Výuka DDM čt 15:30-16:30
Home CV Výuka Úkoly

Internet používáme každý den. Chceš do tohohle světa proniknout? Zjistit co to obnáší vlastnit doménu. Chceš si napsat vlastní web a být online? Nebo tě zajímá, jak online svět funguje? Co na konci získáš? Budeš mít svůj web online, ke kterému bude mít přístup každý!

Víc info najdeš na stránkách DDM.

Sára

1. hodina - 17. 9. 2020

Řekli jsme si co je to tag. Tag je znamená česky štítek. Kód mezi tagy je kompilován (zobrazován) speciálním způsobem, podle toho jaký tag použijeme. Pro čitelnost kódu, by všechny části html kódu spadat do nějakého tagu.
Tagy jsou párové a nepárové.
Všechny tagy začínají počátečním tagem <tag>. Nepárové tagy mají pouze pořáteční tag, zatímco párové mají i koncový, který vypadá </tag>.

Ukázali jsme si jak vypadá základ html stránky.

<!DOCTYPE html>

<head>

</head>

< body>

</body>

</html>

Označení <!DOCTYPE html> </html> nám určuje že je vše mezi těmito tagy je psáno v jazyce html5.

Mezi tagy <body> </body> je tělo programu, zatím všechno co uživatel vidí.

Tagem <h1> <h1> vyznačujeme nadpisy. Tento tag je od slova headings což v překladu znamená nadpis.

Slovníček

česky anglicky
right pravý
left levý
horizontal vodorovný
table tabulka
width šířka
hlava head
tělo body
headings nadpis
tag štítek
strong silný, tlustý
stripe pruh
random náhodný

2. hodina - 24. 10.

Opakování.

3. hodina - 1. 10.

Nahráli jsme první verzi html stránky na server - web zdarma.cz


Ukázali jsme si různé druhy formátování textu. Text se nejlépe formátuje pokud upravujeme nějaký reálný text, nebo alespoň text který se reálnému blíží. generátor náhodného textu. Různé tagy pro formátování textu:

<strong> tučné písmo malý červený míček
<em> kurzíva malý červený míček
<s> přeškrtnuté písmo malý červený míček

4. hodina

Ukázali jsme si jak vložit link na stránku. Vkládáme ho pomocí tagu a a jeho elementu hreff. Takže to celé vypadá takto:

<a href= "https://www.webzdarma.cz/">odkaz</a>

5. hodina - 15. 10.

Probrali jsme jak udělat tabulku:

Tabulka

Tabulky děláme pomocí párového tagu table, což v angličtině znamená tabulka. Uvnitř tabulky používáme tagy které označují řádky a sloupce. Je důležité zachovávat správné uzavírání tagů. Tabulky plníme po řádcích. Nejprve musíme říct že začínáme nový řádek. To uděláme pomocí párového tagu tr. To ovšem nestačí musíme ještě zadefinovat sloupce, pomocí tagy td. Pokud budeme chtít více sloupců, napíšeme je pod sebe:

<table>

<tr>

<td> první řádek/prvni sloupec <td/>

<td>první řádek/druhýsloupec <td/>

<tr>

<tr>

<td> toto je druhý řádek </td>

<td> druhý řádek druhý sloupec <td/>

<tr>

<tr>

<td> třetí řádek první sloupec </td>

<td> třetí řádek druhý sloupec </td>

<tr>

</table>

Úkol

Udělejte tabulku, která bude mít 3 sloupce a 4 řádky, do prvního sloupce můžete napsat třeba dny v týdnu do dalšího třeba datum a do třetí jméno lidí kteří májí svátek.

Dávejte si pozor na to Jaké tagy kde máte, je to jako sendwitch když začínáte houskou tak i končíte houskou, na obě housky dáte sýr a na to salát. Pokud to dáte dohromady tak máte housku, sýr, salát, sýr, housku.

čára

Dvě sekce stránky můžeme oddělit čárou pomocí atributu hr od slova horizontal line = vodorovná čára.


Je to nepárový tag, to znamená že má pouze koncový tag. Pokud chceme čáru jinak dlouhou, můžeme ji upravit pomocí atributu. Atribut je něco co nám upřeňuje parametry daného tagu.

Pokud bychom například chtěi čáru jen přes půl stránky, nastavíme šířku (width) na 50%, šířku můžeme nastavovat v procentech a pixelech (o těch si povíme víc na další hodině)

<hr width=50%>


Můžeme chtít nastavit i místo na kterém chceme čáru udělat. Pkud chceme aby čára začínala uprostřed stránky a šla do konce, nastavíme její pozici (=align)


Další pozice které můžeme nastavovat tak jsou left (levá), center (uprostřed), right(pravá)

Úkol:

Udělejte čáru která podtrhne nadpis první úrovně. Ta čára bude od prava dlouhá 1/4 tránky.

Další hodina

Úkoly naleznete zde, nebo v sekci úkoly