html

Created by Honza Šuráň

vkládání jiné stránky

jiná webovka:

<a href="https://www.youtube.com" style="color:red">YouTube</a>

vlastní webovka/soubor:

<a href="stránka2.html">stránka 2</a>

ve složce:

<a href="složka/stránka2.html">stránka 2</a>

target: _blank: nové okno

další atributy

 

jump-to

obrázek/video

obrázek/animace:

<img src="kočička.jpg ...další parametry> (obrázek)
<img scr="animace.gif> (animovaný obrázek - "gif")

další parametry: width, height, align a další

video:

<video src="video.mp4 ...další parametry>toto se ukáže, nebude-li video fungovat</video>

další parametry:
width, autoplay, controls a další

div+span (kontejnery)

blokové prvky: zabírají celou šíři stránky: naoř. odstavce

in-line prvky: zabírají, kolik potřebují: např. odkazy

kontejnery: definují formátování pro celý blok/řádek

<span>: in-line kontejner

<div>: blokový kontejner (neplést s <p>, což je běžný odstavec. fungují trošku podobně, ale zdaleka ne úplně. např. do divu můžu naházet odstavce, naopak to ale není možné)

<span>span1</span>
<span>span2</span>

span1 a span 2 budou na stejném řádku.

<div>div1</div>
<div>div2</div>

div1 a div2 si vezmou každý samostatný řádek

YT tutorial

editor

atom

odkazy

input/vstup

<input>

<input type="text">
<input type="password"> - místo znaků ukáže černé puntíky
<input type="text" value="zadej uživatelské jméno"> - je vyplněno předem

file, range apod. kompletní seznam atributů

<textarea></textarea>

dá se opět nastavit se spoustou atributů:
<textarea rows="10" cols="25" maxlength="256">Výchozí text</textarea>

readonly, required apod. kompletní seznam

<form></form> - kontejner pro vstupy

barvy pozadí a textu

barvičky

na stránce o css vysvětleno podrobněji

index.html :-)

CSS

html

přímé vkládání celé webovky

<iframe src="https://orgpad.com">zobrazený text, nezobrazí-li se cílová webovka</iframe>

další atributy: width, height, bordercolor... celý seznam

některé webovky tuto funkci neumožňuj

seznam užitečných tagů

nový řádek	<br>
kódování stránky	<meta charset="UTF-8">
nadpisy	<h1></h1> ...<h6></h6>
styl např. odstavce	<p style="color:lightgreen; background-color:#FFB09F></p>
dolní index horní index	<sub></sub> <sup></sup>
titulek, zobrazený na liště oken prohlížeče	<title></title>
záhlaví hlavní část zápatí	<header></header> <main></main> <footer></footer>
navigační elementy, např. odkazy na sekce webovky, dává se do záhlaví	<nav></nav>
členění webovky	<article></article> <section></section>
zarovnání na střed	<center></center>

jakpsatweb

w3schools

vzhled jako záložky v prohlížeči (head)

titulek: <title>html - OrgPad</title>

logo: <link rel="icon" href="../images/OrgPad-logo.img" type="image/icon type" />

meta

<meta>

charset="UTF-8": úplně základní

základní formátování dat HTML stránky

<meta name="author" content="Honza">

<meta name="viewport" content="width=device-width, initial-scale=1.0"

dělají se mezi nimi entery

všechny atributy: zde

html seznam

bodový seznam	<li>banán</li> <li>hruška</li>
seřazený seznam	<ol>    <li></li> ...</ol> +jdou vkládat jeden do druhého
a jeho formát	ol type="i"> -> nebude číslovat, bude íčkovat
popisný seznam	dl>    <dt>Jablka</dt> (description term)    <dd>Sladká, rajče ne</dd> (popis) </dl>

html tabulka

<table></table>
<tr></tr> (table row)
<td></td> (table data) = jedna buňka
<th></th> (table header) - speciálně zvýrazeněno

<caption></caption> (titulek tabulky) - zarovnán na střed

<thead></thead>
<tbody></tbody> (pouze k přehlednosti)

<td colspan="2"></td> - sloučené 2 buňky

<table border="1"> - tabulka bude mít vodorovné a svislé čáry mezi jednotlivými buňkami a kolem sebe