Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

Základy tvorby www stránky v HTML kódu.

Podobné prezentace


Prezentace na téma: "Základy tvorby www stránky v HTML kódu."— Transkript prezentace:

1 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 Časopis PPK Časopis PC World Wikipedia.cz

2 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).

3 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.

4 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>

5 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.

6 Praktická cvičení – úkol č. 1

7 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.

8 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.

9 Praktická cvičení – úkol č. 1

10 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.

11 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.

12 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.

13 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.

14

15 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>

16 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.

17 Centrování textu

18 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.

19 Zvýraznění textu - barvy
Pomocí atributu <span style="color: barva">, </span> Upravme stránku „Řez písma a nadpisy.“

20 Zdroj: http://www.jakpsatweb.cz/archiv/barvy-pojmenovane.html

21 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í.

22 Zvýraznění textu - barvy

23 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.

24 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.

25 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

26

27

28 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.

29

30

31

32

33 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>.

34 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>

35 Děkuji za pozornost © Mgr. Petr Loskot, 2010

36 Konec © Mgr. Petr Loskot, 2010


Stáhnout ppt "Základy tvorby www stránky v HTML kódu."

Podobné prezentace


Reklamy Google