AMIGA REVIEW online
  Uvodná stránka     Software     Hry     Obaly     Download     Kniha návštev     Amiga na PC     Amiga Forever  

Vytvořte si WEBku...

Jan Petkov

Dnes vás naučím téměř všemu co o programování v jazyce HTML vím. Nebojte se, není toho mnoho...

Co budeme potřebovat: Doporučuji všem soupis příkazů HTML z minulého čísla AmigaReview. Na obrázku č. 1 je dále zobrazena veškerá potřebná grafika.
Vytvoříme si první stranu firemní prezentace. Titulní strana má splňovat několik základních pravidel. Má být přitažlivá, reprezentativní, má říci o firmě co nejvíce základních informací a to velmi stručně, má obsahovat co nejvíce grafiky a přitom být velmi nenáročná na paměť. Je na nás kladeno velké množství navzájem si odporujících požadavků. Práce webovského grafika je jedno velké a náročné dobrodružství.
Začneme kostrou stránky:

<!DOCTYPE HTML PUBLIC „//IETF//DTD HTML//EN“>
<HTML>
< H E A D > < T I T L E > L D MARKETING</TITLE></HEAD>
<BODY>
</BODY>
</HTML>

Na pozadí stránky je možno umístit i obrázek. Ten navíc bude mít i tu „výhodu“, že se bude neustále opakovat. Tak lze například vyrobit barevný přechod na celé straně pouze tím, že na pozadí umístíme 1 dob široký pruh s barevným přechodem. Velmi tím ušetříme na kilobytech. Obrázky na webu se ukládají ve formátu GIF (i animace) a JPEG. GIF je lepší pro obrázky, které nejsou příliš „složité“ nebo obsahují velké jednobarevné plochy, což je i naše pozadí. GIF je nutné použít i pro animace a obrázky s průhledným pozadím. Naproti tomu JPEG je velmi vhodný pro obrázky s velkým počtem detailů což jsou například fotky. Ale zpět k našemu pozadí - příkaz <BODY> si rozšíříme na:

<BODY BGCOLOR=#ffffff TEXT=#000000 BACKGROUND=„pics/pozadi1.gif“>

Základem formátování HTML stránek jsou tabulky. Na obrázku č.2 je zobrazena výsledná stránka s orámovanýma tabulkami. Je vidět, že použijeme dvě navzájem vnořené tabulky.
První tabulka bude obsahovat 3 řádky a 2 sloupce, přičemž spojíme druhou buňku z prvního a druhého řádku (buňka bude přes 2 řádky ROWSPAN=2). Spojíme taky obě dvě buňky ve třetím řádku (COLSPAN=2):

<TABLE>
<TR>
<TD> </TD>
<TD ROWSPAN=2> </TD>
</TR>
<TR>
<TD VALIGN=MIDDLE ALIGN=RIGHT></TD>
</TR>
<TR>
<TD COLSPAN=2>
</TD>
</TR>
</TABLE>

Druhá tabulka bude rovněž rozměrů 3x2, ale tady spojíme celý druhý sloupec tabulky to jedné buňky (bude přes 3 řádky ROWSPAN=3):

<TABLE>
<TR>
<TD></TD>
<TD ROWSPAN=3></TD>
</TR>
<TR>
<TD></TD>
</TR>
<TR>
<TD></TD>
</TR>
</TABLE>

Obě tabulky ještě ošperkujeme parametry, vyplníme buňky příslušnými obrázky a odkazy a práci máme téměř hotovou.
Obrázek na stránku zavedeme příkazem:

<IMG SRC=„pics/ldlogo.gif“ BORDER=„0“ ALT=„LD MARKETING“ WIDTH=„00401“ HEIGHT=„00091“>

Takto se zavede firemní logo o určitých rozměrech, v případě, že obrázek nebude k dispozici, tak se zobrazí alternativní text „LD MARKETING“ a v případě, že by obrázek někdy fungoval jako aktivní odkaz na jinou HTML stránku, tak tloušťka jeho rámečku bude nulová. Je dobré udávat i rozměry obrázku, urychlíte tím naformátování stránky.
Obrázek, který bude aktivním odkazem na stránku s kontaktní adresou (kontakt.htm) bude vypadat takto:

<A HREF=„kontakt.htm“>
<IMG SRC=„pics/kontakt1.gif“ BORDER=„0“ ALT=„kontakt“ WIDTH=„00119“ HEIGHT=„00025“>
</A>

Dejte si pozor na malá a velká písmena v názvech souborů. Většina WWW serverů totiž běží na Unixu, kde to není jedno. Doporučuji v názvech souborů vždy uvádět jen malá písmena.
Naši práci na HTML stránce dokončíme tím, že vnoříme celou druhou tabulku do první buňky ve druhém řádku v první tabulce. Tak.
Celý program pak vypadá takto:

<!DOCTYPE HTML PUBLIC „//IETF//DTD HTML//EN“>
<HTML>
<HEAD> <TITLE>LD MARKETING</TITLE></HEAD> <BODY BGCOLOR=#ffffff TEXT=#000000 BACKGROUND=„pics/pozadi1.gif „>
<TABLE BORDER=0 CELLPADING=0 CELLSPACING=0 WIDTH=640> <TR>
<TD ALIGN=RIGHT VALIGN=BOTTOM>
<IMG SRC=„pics/ldlogo.gif“ BORDER=„0“ ALT=„LD MARKETING“ WIDTH=„00401“ HEIGHT=„00091“>
<BR>
<HR SIZE=2 COLOR=#000000>
</TD>
<TD ROWSPAN=2 ALIGN=CENTER VALIGN=BOTTOM>
<IMG SRC=„pics/zidle.jpg“ BORDER=„0“ WIDTH=„00176“ HEIGHT=„00284“>
</TD>
</TR>
<TR>
<TD VALIGN=MIDDLE ALIGN=RIGHT>
<TABLE BORDER=0 CELLPADING=0 CELLSPACING=5>
<TR>
<TD VALIGN=CENTER ALIGN=RIGHT>
<A HREF=„kolekce.htm“><IMG SRC=„pics/collect1.gif“ BORDER=„0“ ALT=„collection 98“ WIDTH=„00156“ HEIGHT=„00027“></A>
</TD>
<TD ROWSPAN=3 VALIGN=CENTER> <IMG SRC=„pics/oblouk.gif“ BORDER=„0“ WIDTH=„00056“ HEIGHT=„00166“></TD>
</TR>
<TR>
<TD VALIGN=CENTER ALIGN=RIGHT>
<A HREF=„profil.htm“><IMG SRC=„pics/profil1.gif“ BORDER=„0“ ALT=„profil firmy“ WIDTH=„00187“ HEIGHT=„00030“></A>
</TD>
</TR>
<TR>
<TD VALIGN=CENTER ALIGN=RIGHT>
<A HREF=„kontakt.htm“>
<IMG SRC=„pics/kontakt1.gif“ BORDER=„0“ ALT=„kontakt“ WIDTH=„00119“ HEIGHT=„00025“>
</A>
</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD COLSPAN=2 ALIGN=RIGHT VALIGN=BOTTOM>
<HR SIZE=2 WIDTH=80ó COLOR=#000000 ALIGN=RIGHT><BR>
<FONT SIZE=1 FACE=„ARIAL“> Tady si třeba něco napište... </FONT>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Všimněte si, že celá webovská strana si vystačila bez jediného znaku textu - vše jsme poskládali z grafiky. Takový styl patří sice k posledním trendům, ale vřele vám jej nedoporučuji. Šikovná práce s textem patří k základním kamenům kreativní tvorby HTML stránek. Ale to si už zkuste sami...

Vytlačiť článok


© ATLANTIDA Publishing Všechna práva vyhrazena.
Žádna část nesmí být reprodukována nebo jinak šířena bez písemného svolení vydavatele.



Amiga na Vašem PC rychle, snadno a zdarma!


none

AMIGA REVIEW

57 ( 11-12 / 2000 )
56 ( 9-10 / 2000 )
55 ( 7-8 / 2000 )
54 ( 5-6 / 2000 )
53 ( 3-4 / 2000 )
52 ( 1-2 / 2000 )
 
51 ( 12 / 1999 )
50 ( 11 / 1999 )
49 ( 10 / 1999 )
48 ( 9 / 1999 )
46-47 ( 7-8 / 1999 )
45 ( 6 / 1999 )
44 ( 5 / 1999 )
43 ( 4 / 1999 )
42 ( 3 / 1999 )
41 ( 2 / 1999 )
40 ( 1 / 1999 )
 
39 ( 12 / 1998 )
38 ( 11 / 1998 )
37 ( 10 / 1998 )
36 ( 9 / 1998 )
35 ( x / 1998 )
34 ( x / 1998 )
33 ( 1-2 / 1998 )
 
32 ( 11-12 / 1997 )
31 ( 9-10 / 1997 )
30 ( 7-8 / 1997 )
29 ( 6 / 1997 )
28 ( 5 / 1997 )
27 ( 4 / 1997 )
26 ( 3 / 1997 )
25 ( 2 / 1997 )
24 ( 1 / 1997 )
 
23 ( 12 / 1996 )
22 ( 11 / 1996 )
21 ( 10 / 1996 )
20 ( 9 / 1996 )
18-19 ( 7-8 / 1996 )
17 ( 6 / 1996 )
16 ( 5 / 1996 )
15 ( 4 / 1996 )
14 ( 3 / 1996 )
13 ( 2 / 1996 )
12 ( 1 / 1996 )
 
11 ( 12 / 1995 )
10 ( 11 / 1995 )
9 ( 10 / 1995 )
8 ( 9 / 1995 )
7 ( 7 / 1995 )
6 ( 5 / 1995 )

ATLANTIDA NEWS

5 ( 3 / 1995 )
4 ( 1 / 1995 )
 
3 ( 11 / 1994 )
2 ( 9 / 1994 )
1 ( 7 / 1994 )
0 ( 5 / 1994 )