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

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

Základní pojmy (1) #Nejpoužívanější internetové prohlížeče: Google Chrome (32.0.x), Mozilla Firefox (27.0), Internet Explorer (11.0.2), Opera (19.0.x),

Podobné prezentace


Prezentace na téma: "Základní pojmy (1) #Nejpoužívanější internetové prohlížeče: Google Chrome (32.0.x), Mozilla Firefox (27.0), Internet Explorer (11.0.2), Opera (19.0.x),"— Transkript prezentace:

1 Základní pojmy (1) #Nejpoužívanější internetové prohlížeče: Google Chrome (32.0.x), Mozilla Firefox (27.0), Internet Explorer (11.0.2), Opera (19.0.x), Safari (7.0.1) #HTML (HyperText Markup Language): poslední vývojová verze 4.01, nyní se testuje HTML 5 #XHTML (eXtensible HyperText Markup Language): současná verze 1.1, pracuje se na XHTML 5 #CSS (Cascading Style Sheets = Kaskádové styly): současná verze 2.1

2 Základní pojmy (2) #Validátor (X)HTML: #Validátor CSS: #Volně dostupné editory pro tvorbu webových stránek: PSPad, Notepad,...PSPad #„Parodie na editory“: MS FrontPage, MS Word, … #FTP (File Transfer Protocol): hromadný přenos dat na web (přímo přes editor PSPad nebo např. pomocí programu Total Commander)

3 Nastavení editoru PSPad (1) Nastavení -> Nastavení programu

4 Nastavení editoru PSPad (2) Nastavení -> Nastavení programu

5 Nastavení editoru PSPad (3) Nastavení -> Nastavení programu

6 Nastavení editoru PSPad (4)

7 PSPad – vytvoření nového souboru #1) CTRL + N #2) Soubor  Nový #3) Ikonka, na kterou míří modrá šipka (viz obrázek dále) #4) Dvojklik na lištu, na kterou míří zelená šipka (viz obrázek dále) #Ať už si vyberete jakýkoli způsob, otevře se okno nebo nabídka, kde zvolíte buď XHTML nebo Cascading Style Sheet, podle toho, s čím potřebujete pracovat. Automaticky vložený text promažete.

8 PSPad – vytvoření nového souboru

9 Pravidla a doporučení pro názvy souborů #soubory pojmenovávejte pokud možno pouze malými písmeny #v názvech souborů pokud možno nepoužívejte mezery (při názvu z více slov použijte např. podtržítko) #v názvech souborů rozhodně nepoužívejte diakritiku #přípona pro XHTML soubory: *.html #přípona pro CSS soubory: *.css

10 PSPad – uložení souboru #1) CTRL + S (popř. F12 – Uložit jako) #2) Soubor  Uložit / Uložit jako #3) Ikonka, na kterou míří červená šipka (viz obrázek) #Doporučení: propojené soubory XHTML a CSS ukládejte do stejné složky.

11 PSPad - pomůcka v případě nouze #CTRL + mezerník  vyvolá seznam XHTML tagů (CSS vlastností, …) #používejte jen pokud je to nezbytně nutné (je zde příliš mnoho nepotřebných nastavení, které jen matou, pokud nevíte, co znamenají)

12 XHTML – základní pravidla #značkovací jazyk používající tzv. tagy, které se píší malými písmeny a uzavírají se do znaků <> #tagy se dělí na párové a nepárové #příklad párového tagu: odstavec #příklad nepárového tagu: #klávesová zkratka pro <>: ALT (pravý) + <> (klávesy přímo nad pravým ALT) ALT (levý) + 60 / 62 (numerická klávesnice)

13 XHTML – kostra dokumentu titulek stránky

14 XHTML – tělo stránky (tagy div, p, span, a, h1…h6) #blokové prvky (div, p, h1, h2, h3, h4, h5, h6) #řádkové prvky (a, span) #div = blok #p = odstavec #h1, h2, h3, h4, h5, h6 = nadpisy od největšího k nejmenšímu #a = hypertextový odkaz #span = kontejner

15 XHTML – blokové a řádkové prvky v praxi nadpis odstavec odstavec číslo 2 Seznam Hypertextové odkazy: absolutní x relativní x absolutní: Seznam relativní: zájmy webmaster

16 CSS - syntax selektor { vlastnost: hodnota; } Selektory mohou být mj. tagy / prvky (body, div, p, h1, h2, h3, h4, h5, h6, span, a,...). Pokud chceme např. nadefinovat pro celý dokument zarovnání textu doprostřed a barvu pozadí žlutou, zadáme: body { text-align: center; /* nezapomínejte na středník po zapsání každé vlastnosti */ background: yellow; } Pozn.: Klávesové zkratky pro {} jsou ALT (pravý) + B / N nebo ALT (levý) / 125 (numerická klávesnice)

17 Úkol: vytvořte jednoduchý xhtml dokument Zadání v souboru instrukce02.doc


Stáhnout ppt "Základní pojmy (1) #Nejpoužívanější internetové prohlížeče: Google Chrome (32.0.x), Mozilla Firefox (27.0), Internet Explorer (11.0.2), Opera (19.0.x),"

Podobné prezentace


Reklamy Google