Základy tvorby www stránky v HTML kódu. Odstavce, nadpisy, formátování písma a seznamy (odrážky a číslování). © Mgr. Petr Loskot, leden 2010 http://www.jakpsatweb.cz http://polopate.jakpsatweb.cz Časopis PPK Časopis PC World Wikipedia.cz
Praktická cvičení – první stránky Pro tvoření HTML kódu budeme používat poznámkový blok. Není nejideálnější, ale postačí. Je dostupný v příslušenství Windows. Práce si budeme ukládat do složky M:\4B_IKT2\HTML\PRIJMENI. (vytvořme si ji).
Praktická cvičení – první stránky Pro tvoření HTML kódu budeme používat poznámkový blok. Ten ale ukládá soubory ve formátu *.txt Aby z toho vznikl HTML soubor, přejmenujeme příponu souboru z *.txt na *.html nebo to tak rovnou uložíme.
Praktická cvičení – úkol č. 1 <html> <head> <title>Má první stránka na škole</title> </head> <body> <p> Ahoj, jmenuji se ……Klárka …., chodím do třídy 4B_IKT2…… a toto je můj první pokus s html kódem pro www stránku.</p> </body> </html>
Praktická cvičení – úkol č. 1 Napsaný text ulož do složky M:\4B_IKT2\HTML\PRIJMENI. Soubor nazvi ukol_1.html . Doporučení: názvy souborů i složek pišme bez DIAKRITIKY. Soubor uprav tak, aby měl příponu *.html. Vyzkoušej NÁHLED stránky v prohlížeči.
Praktická cvičení – úkol č. 1
Praktická cvičení – první stránky Náhled – prohlížení HTML souboru (www stránky) Děje se tak automaticky po kliknutí na soubor. Soubor se otevře v Internetovém prohlížeči. Internet Explorer. Mozilla. Opera. Úprava – úprava HTML souboru (www stránky) Nutno otevřít v poznámkovém bloku. Např.: přes volbu OTEVŘÍT V PROGRAMU.
Praktická cvičení – úkol č. 1 Vrať se zpět ke zdrojovému (HTML) kódu (úprava souboru v textovém editoru) a změň text na .…… toto je můj druhý pokus ……. Prohlédni změněnou stránku v prohlížeči. Pokud se změna neprojeví, použij AKTUALIZAČNÍ tlačítko prohlížeče.
Praktická cvičení – úkol č. 1
Formátování textu - odstavec Odstavec - <p> text odstavce </p> Vymezení odstavce <p>, </p>. Možná vůbec nejpoužívanější tag. Po jeho konci prohlížeč automaticky zalomí řádek a udělá vertikální mezeru. p – z anglického par, paragraph.
Formátování textu - nadpisy Nadpis - <h1> text nadpisu </h1> Vymezení nadpisu první úrovně. <h3>, </h3>; <h4>, </h4>……… Nadpis druhé, třetí úrovně (mezinadpis, nadpis kapitoly). Lze použít až šest úrovní nadpisů (tedy až <h6>). Vykreslují se různě velké podle důležitosti. Jsou velmi důležité pro vyhledávače. h – z anglického headline.
Formátování textu – řez písma Tučné (Bold) - <b>, </b> text mezi těmito tagy bude tučný. Kurzíva (Italic) - <i>, </i> text mezi těmito tagy bude kurzívou. Podtržený text - <u>, </u> text mezi těmito tagy bude podtržený, ale nepoužívejte to, plete se to s odkazem.
Praktická cvičení – úkol č. 2 Napsaný text ulož do složky M:\4B_IKT2\HTML\PRIJMENI. Soubor nazvi ukol_2.html . Doporučení: názvy souborů i složek pišme bez DIAKRITIKY. Soubor uprav tak, aby měl příponu *.html. Vyzkoušej NÁHLED stránky v prohlížeči.
Praktická cvičení – úkol č. 2 Řez písma a nadpisy. <html> <head> <title>Má druhá stránka</title> </head> <body> <h1>Nadpis první úrovně</h1> <h2>Nadpis druhé úrovně</h2> <h3>Nadpis třetí úrovně</h3> <h4>Nadpis čtvrté úrovně</h4> <h5>Nadpis páté úrovně</h5> <h6>Nadpis šesté úrovně</h6> <p>Odstavec s obyčejným textem</p> <p>Odstavec s <b>tučným textem</b></p> <p>Odstavec s <i>kurzivou</i></p> </body> </html>
Centrování – zarovnání na střed Tag <center> Napíšeme-li tento tag za tag odstavce, nadpisu a pod, bude tento text zarovnán na střed. Upravme si předešlou stránku „Má druhá stránka“ tak, aby byl text vycentrován.
Centrování textu
Zvýraznění textu <span>, </span> dvojice tagů vymezující nějak odlišný text. <span style="color: red">, </span> V tomto případě má kus textu červenou barvu. Jde o první příklad tagu, který má tak zvaný atribut. Atributem je "style" a má hodnotu "color: red". Pomocí tohoto atributu style= se dá detailně nadefinovat vzhled textu. V praxi má většina tagů nějaký atribut.
Zvýraznění textu - barvy Pomocí atributu <span style="color: barva">, </span> Upravme stránku „Řez písma a nadpisy.“
Zdroj: http://www.jakpsatweb.cz/archiv/barvy-pojmenovane.html
Uvozovky u atributů Častým dotazem je, kdy se musejí dělat uvozovky kolem hodnot atributů. Jestli <font color=blue> je něco jiného než <font color="blue">. V tomto případě je to totéž, uvozovky nejsou povinné. Ale pokud hodnota atributu obsahuje mezeru, tak tam uvozovky být musejí. Invalidní příklad: <font face=Times New Roman> Prohlížeč by to bez uvozovek chápal jako více atributů. Takže doporučuji uvozovky dávat všude, nic se tím nezkazí.
Zvýraznění textu - barvy
Seznamy Číslování - <ol> Odrážky - <ul> (ordered list = číslovaný seznam) Odrážky - <ul> (unordered list = nečíslovaný seznam) Uvnitř mohou být pouze elementy <li>, (list item = položky seznamu), viz dále.
Položky seznamu Položku seznamu ohraničujeme tagem <li> (z angl. list item). Pro správné zobrazení musí být uvnitř seznamu to znamená uvnitř elementu <ol>, <ul>. Zobrazuje se vždy na novém řádku za: číslem (pokud jde o <ol>) za odrážkou (v ostatních případech). Mezi jednotlivými položkami nejsou zvětšené vertikální mezery.
Odrážky Pozn.: odrážka (v textu) = bullet <ul> <li>položka seznamu s odrážkami</li> <li>položka seznamu s odrážkami</li> <li>položka seznamu s odrážkami</li> </ul> Pozn.: odrážka (v textu) = bullet
Víceúrovňové odrážky Před položkami první úrovně se jako odrážka zobrazí puntík Víceúrovňové odrážky se dají dělat zanořováním dalšího <ul> do <li>. Druhá úroveň zobrazuje přednastaveně kolečko. Třetí úroveň zobrazuje přednastaveně čtvereček.
Připomenutí Ani v příkladech a zkouškách nezapomínejte na správnou strukturu kódu! Doctype zatím vynecháme. Hlavička. Tělo. Na začátek patří ještě <html>. Na konec patří ještě </html>.
Připomenutí - shrnutí <html> <head> <title>Moje stránka s odrážkami</title> </head> <body> <p>text bez odrážek</p> <ul> <li>položka seznamu s odrážkami</li> </ul> </body> </html>
Děkuji za pozornost © Mgr. Petr Loskot, 2010
Konec © Mgr. Petr Loskot, 2010