Čtvrtek 11. dubna Základy HTML

Transkript

Čtvrtek 11. dubna
Základy HTML
HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je
jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci
dokumentů na Internetu.
HTML soubor je obyčejný text obalený značkami, které se nazývají tagy.

tagy určují, jak bude text vypadat, tedy jakou bude mít formu.

všechny tagy jsou uzavřeny v <ostrých závorkách>.

co není v ostrých závorkách, je text, který se bude zobrazovat. Symbolicky: <tag>text
Obecná syntaxe HTML
HTML má několik málo zásad, které je dobré zmínit.

Nezáleží na velikosti písem, <body> je totéž co <BODY>

V adresách a jménech souborů záleží na velikosti písmen, nesmějí tam být mezery a čeština.

Tagy, které prohlížeč nezná, jako by nebyly.

Na začátku tagu nesmí být mezera, třeba < br> je špatně.

Dvě mezery po sobě (nebo víc) mají stejný význam jako jedna mezera.

Konec řádku ve zdroji se chápe jako mezera.

Jména atributů je dobré dávat vždy do uvozovek, ale není to úplně nutné, pokud uvnitř
nejsou mezery.
Struktura HTML
<html>
<head>
<title>Má první stránka</title>
</head>
<body>
Moje první html stránka.
A nějaké další texty.
</body>
</html>
Co znamenají jednotlivé tagy:
<html> </html>
začíná a končí dokument
<head> a </head>
začíná a končí hlavičku, která se sice nezobrazuje, ale obsahuje některé důležité údaje,
například
<title> a </title>,
vymezující název dokumentu (může se lišit od jména souboru)
<body>
Co je mezi <body> a </body>, se bude zobrazovat. <body> je tag, kterým začíná vlastní tělo
dokumentu, body má atributy – barva pozadí (bgcolor), barva písma (text),
Výše uvedené tagy by měl obsahovat každý html soubor.
Stránku pomocí HTML můžeme psát v jakémkoli textovém editoru, přičemž nejvhodnější je
poznámkový blok. Soubor pak musíme uložit s příponou .html, jako typ zvolíme Všechny soubory
Další tagy:
<br>
nepárový tag, ukončuje řádek
<hr>
nepárový tag, vodorovná čára – atributy – délka (width), tloušťka (size), zarovnání (align), barva
(color) a bez stínu (noshade)
<font> </font>
nastavení barvy (color) velikosti (size) a fontu (face) písma
<h1> až <h6>
nadpisy (angl. heading), mají jediný atribut align; je rozlišováno šest stupňů nadpisů.
Editor HTML je vhodný pro začátečníky na vytváření webových stránek, nabízí u každého tagu
atributy a barevně zvýrazňuje správnou syntaxi.
Čtvrtek 18. dubna
Práce s editorem HTML
Vytvoření nového dokumentu
Jednotlivým tagům můžeme nastavit vlastnosti tak, že umístíme kurzor „dovnitř“ tagu
editor nám nabídne, co můžeme ovlivnit
a
Při volbě typu písma je vhodné použít větu
Příliš žluťoučký kůň úpěl své ďábelské ódy
která obsahuje všechna česká písmena s diakritikou
Vložení obrázku
<img> - obrázek (angl. image), nepárový tag; do stránky se vloží obrázek načtený z jiného souboru;
artibuty - umístění souboru s obrázkem (src), alternativní popis (alt), šířka (width- délka nebo %),
výška (height - délka nebo %)….
V souboru je umístěna pouze cesta k obrázku. Přemístíme-li „html soubor“ na jiný počítač, na server v
internetu apod., cesta se změní a obrázek se nezobrazí.
Řešením je umístění obrázku do stejné složky s „html souborem“ a do src napsat jen název obrázku. Název
by měl být bez diakritiky a jedno slovo. <IMG SRC="fotbal.jpg">
zdrojový kód
<HTML>
<HEAD>
<TITLE>druhá stránka</TITLE>
</HEAD>
<BODY BGCOLOR="#9CCAE4" TEXT="#000080" >
<FONT FACE="Amerigo AT" SIZE=4>
<H1 ALIGN="CENTER">Vytváříme stránky jazykem HTML</H1>
Příliš žluťoučký kůň úpěl ďábelské ódy<BR>
<HR COLOR="#000080" ALIGN="CENTER" SIZE=5 NOSHADE WIDTH="100%">
<IMG SRC="fotbal.jpg" WIDTH=171 HEIGHT=285 ALIGN="right" HSPACE=400 ALT="rozhodčí">
</FONT>
</BODY>
</HTML>
Vzhled stránky se nám objeví v HTML náhledu
Čtvrtek 25. dubna
Odkazy - hypertext
<a> </a> - vše co je mezi těmito značkami je odkaz, může to být text, obrázek apod.
artibuty:
 href – zapíše se jako URL (Unique Resource Locator) stránky, na kterou je odkaz
přesměrován; odkaz může otevírat i dokument
 name – jméno záložky, v dokumentu se vytvoří záložka <a name= “zacatek“></a>, na jiném
místě se vytvoří odkaz <a href = “#zacatek“>Na začátek</a>, který převede uživatele tam, kde
je záložka
 target – určuje okno, ve kterém se zobrazí obsah
Příklady:
1.
Odkaz na webovou stránku
<a href=“http://google.cz>Google</a>
2.
Odkaz na soubor
<a href=“prihlaska.doc>Přihláška</a>
3.
Odkazem je obrázek
<a href="http://cmg.prostejov.cz/"><img src="logo.gif" width=175 height=115></a>
Čtvrtek 9. května
Seznamy
Nečíslovaný seznam:
<ul>
<li>první položka</li>
<li>druhá položka</li>
</ul>
Př.
<ul type="square">
<li>grafiku
<li>text
li>programování
</ul>
Číslovaný seznam:
<ol>
<li>první položka, čísluje se to automaticky</li>
<li>druhá položka</li>
</ol>
Př.
<ol>
<li>IT
<li>plavání
<li>matematika
</ol>
Seznam definic:
<dl>
<dt>pojem1<dd>vysvětlení pojmu 1
<dt>pojem2<dd>vysvětlení pojmu 2
</dl>
Př.
<dl>
<dt>Počítač
<dd> je stroj na zpracovávání dat
</dl>
Čtvrtek 16. května
Tabulka
<table >
<tr> <th>hlavička</th> <th>hlavička</th> </tr>
<tr> <td>Obsah buňky</td> <td>Další buňka</td> </tr>
<tr> <td>levá spodní</td> <td>pravá spodní</td> </tr>
</table>
Co znamenají jednotlivé tagy:
<table>
Párový tag, který začíná tabulku.
<tr>
Párový tag, který začíná a končí řádek tabulky. (TR znamená table row, čili řádek).
<th>
Tag hlavičky tabulky, je vytvořená tučným písmem uloženým na střed.
<td>
Tag buňky tabulky.

Čtvrtek 11. dubna Základy HTML

Transkript

Podobné dokumenty

anglický jazyk

Maturitní otázky

Computer Modern Roman Computer Modern Sans Serif Computer

Tématické okruhy ústní maturitní zkoušku INFORMAČNÍ

Titulek stránky </title

Kapitola 4

eu peníze školám - Základní škola Olomouc, Mozartova 48

Adresa: J.P.SPORT, s.r.o. Družstevní 400 411 08 Štětí IČ: 250 39