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
Pozn.: články boli naskenované ako text a preto obsahujú aj zopár chýb. Taktiež neručíme za zdrojové kódy (Asm, C, Arexx, AmigaGuide, Html) a odkazy na web. Dúfame, že napriek tomu vám táto databáza dobre poslúži.
Žiadna časť nesmie byť reprodukovaná alebo inak šírená bez písomného povolenia vydavatela © ATLANTIDA Publishing
none
|