Jak psát web

o tvorbě internetových stránek

Na této stránce: Základní kurz Prvky stránek Provoz webu HTML CSS styly O reklamě

Nové stránky:  Font-size Margin Width Position a dalších 60 CSS vlastností Všechny změny

Weblog - Archiv weblogu - Stažení celého webu - Příklady

Základní kurz

Jak si udělat stránky, co je a co není potřeba, je lepší použít editor nebo ťukat zdroj?

Základy HTML znát nemusíte, avšak jen do doby, než nastanou problémy.

Jak stránky publikovat, zpřístupnit světu, pokud možno zadarmo. Posílání stránek na server pomocí FTP, grafické rozhraní freewebu.

Zásady psaní textů vhodných pro Internet, hlavně zmiňuji psychologii, nadpisy, češtinu a aktuálnost.

Editory jsou programy, které je možné na psaní stránek použít.

Různé prohlížeče zobrazují stejné stránky různě, pozor na to.

Prvky stránek

Obrázky a pozadí - Odkazy - Tabulky - Rámy - Formuláře - Barvy - Ostatní

Obrázky a pozadí

Příprava obrázku popisuje základní grafické formáty, průhledné a animované gify.

Obrázky v HTML, atribut alt, rozměry obrázku, obtékání. Příklad obrázku:

<img src="soubor.gif" widht="120" height="60" alt="popisek">

Vše o pozadí: zápis pozadí stránky, pozadí čehokoliv v CSS, neopakovaný obrázek na pozadí, umístění, pseudopozadí.

Odkazy

Odkazy v HTML, základní syntaxe, URL, protokoly. Příklad odkazu:

<a href="http://www.jakpsatweb.cz">Jak psát web</a>

Zdokonalení odkazů, zejména zvýraznění po přejetí myší, nové okno, bublina u odkazu.

Nové okno otevřené odkazem, příklady na target i složitější skriptování.

Záložky a odkazy na ně umožňují odrolovat text kliknutím na začátek nějakého odstavce.

Mailové adresy na HTML stránkách, automatické vyplňování polí.

Tabulky

Tabulky -- úvod, základní syntaxe, popis tagů <table>, <tr> a <td>.

Formátování tabulek, rámečky, okraje, barvy, pozadí.

Nové vlastnosti tabulek: col, colgroup, tbody, frame, rules.

Design pomocí tabulek nastiňuje kontroverzní způsoby formátování textu.

Rámy

Základní definice rámů, logika souborů, syntaxe framesetu.

Formátování rámů, šířka, výška, zobrazování okrajů.

Proč rámy nepoužívat, shrnutí důvodů, kvůli kterým se dnes od rámů raději upouští.

Iframe je rám plovoucí někde stránce, dá se do něj načítat jiná stránka, např. Seznam:

<iframe src="http://www.seznam.cz" width="300" height="300"></iframe>

Formuláře

Úvod do formulářů, jednoduché příklady, předávání dat.

Formuláře v HTML, popis jednotlivých prvků formuláře.

Zdokonalení formulářů, finty z HTML 4.0 label, fieldset a také aplikace css stylů na formuláře.

Parazitní formuláře dovolují posílat data ze stránek na cizí servery.

Formulář odesílaný na e-mail se dá udělat nespolehlivě, nebo spolehlivě.

Barvy

Zápis barev v HTML a CSS pomocí rgb, desítkově a šestnáctkově. Teorie a příklady zápisu.

Základní barvy (16 barev).

Bezpečné barvy se zobrazují vždy správně na 256 barvách.

Pojmenované barvy se dají použít v HTML bez znalosti kódu barvy.

Ostatní

Div a span, neutrální html tagy

Titulek stránky, jak je důležitý tag <title>

Levé menu s odkazy -- všechny způsoby, jak jej udělat a udržovat.

Zvuky a hudba, přehrávání na pozadí, vazba na události.

Seznam definic poskytuje zajímavé málo používané tagy.

Formátovací chyby zmiňují nějaké detaily, kterých je dobré se vyvarovat.

Okraje objektů - margin a padding

Efektivní používání prohlížeče vybočuje z návodů na psaní, zabývá se prací uživatele.

Provoz webu

Obsah / forma. Je důležitější smysl textu nebo barva použitého písma? Smysl.

Použitelnost je pojem pro fakt, že uživatelé umějí stránku použít.

Rychlost stránek. Rozbor možností, co udělat pro zlepšení a jak to nezkazit.

Ikona stránky, zobrazování obrázku favicon.ico u oblíbené položky.

Zaheslování stránek, různé možnosti (tajná adresa, JavaScript, PHP ...).

Přesměrování stránky odkazem, meta tagem, javascriptem nebo na serveru.

Okolní svět

Služby vzdálených serverů: pomáhají na stránky dostat věci jako počitadlo, kniha návštěv (guestbook), anketa, chat. Jak získat statistiku přístupů.

Hledání na vlastním serveru pomocí cizího vyhledávače.

Vyhledávací roboti, jak pracují, jak s nimi spolupracovat a jak je omezovat.

O Google, podle čeho řadí a jak je užitečný webmasterům

Katalogy typu Seznamu. Jak přidávat nejefektivněji odkazy.

Meta tagy, automatické přesměrování, klíčová slova, autorství, čeština atd. Např. popisek stránky pro vyhledávače:

<meta name="description" content="stručné shrnutí stránky">

Vytěžování stránek. Jak stáhnout cizí stránky, jak najít skryté soubory, použít je a neporušit přitom zákon.

Čeština

Čeština už dnes nedělá takové problémy jako před lety. Úvod do problematiky kódování diakritiky. Příklad meta tagu pro nastavení kódování:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

Problémy češtiny na příkladech, diagnostická stránka. Plus tabulky českých kódování.

Interpunkce, tečky, čárky, mezery, uvozovky v češtině a v HTML.

Server

Domény na webu, úvod do problematiky. Typy domén, nástin registrace domény 2. úrovně, ceny, doporučení.

Správa souborů. Pojmenovávání, přejmenování, startovací soubor.

Základy nastavení serveru teoreticky naznačují, co by pro vás správce serveru mohl udělat.

Programování stránek -- základní nástin použitelných jazyků a technologií (Javascript, Java, CGI, PHP, ASP).

PHP

Jak začít s PHP, zejména probírám instalaci testovacího serveru pomocí PHPTriad.

Možnosti PHP - nástin pro začátečníky.

Nic jiného tu o PHP nemám, protože se jazykem PHP běžně nezabývám.

JavaScript

Výuka JavaScriptu. Na základě mnoha dotazů dávám k dispozici zatím nedokončené stránky o Javascriptu s příklady.

Přehled HTML

HTML příručka je vlastně moje reference o HTML, takový manuál.

HTML jazyk

syntaxe, terminologie, barva, entity, jednotky, URL, rejstřík tagů, nejdůležitější tagy, obecné atributy.

Přehled tagů

Struktura dokumentu, Úprava textu, Bloky, Seznamy, Odkazy, Obrázky, Tabulky, Rámy, Objekty, Formuláře, Hlavička, Rozšíření HTML.

CSS styly

Hlavní stránka kaskádových stylů, CSS styly -- úvod, Struktura textu, CSS prakticky

Nejdůležitější CSS stránka: Přehled vlastností CSS, jejich hodnot a významů s příklady zobrazení.

Složitější deklarace, Délkové jednotky v CSS, CSS pozicování, Design pozicováním, Zápis stylu pro různé prohlížeče, Omezení CSS, Odlišný vzhled tisku, Základy Dynamického HTML, Filtry, Příklady filtrů, Různé barvy odkazů, Barvení rolovací lišty, Dynamické fonty, Kurzory.

O webové reklamě

Reklamní formáty od fullbanneru 468x60 ke skyscraperu 120x600, rozměry.

Skriptové reklamní formáty pop-up, superstitial, interstitial, out of the banner, stick-in, html kód.

Technologie reklamních formátů. Obrázky, flash, výhody a nevýhody flashe, použití cookies v reklamě.

Reklamní systémy výměnné, agenturní a soukromé. Zobrazovací podvody a proč se nedá na reklamě moc vydělat.

Účinnost webové reklamy, jak myslíme, že reklama působí, a jak se reklama měří.

Odkazy

Archiv Sovy v síti	Příručka moderního webmastera	Janiny odkazy PHP a MySQL
	Další odkazy

Dále mohu vřele doporučit nějaké knihy:

• HTML od Jiřího Koska (Grada 1997, 299,- Kč) ač kniha stará, stále nejlepší
• Web design - Nenuťte uživatele přemýšlet! od Steve Kruga (CP 2003)
• CSS od Marka Prokopa nebo CSS od Petra Staníčka (vyšly skoro zároveň)

Pozor, skoro všechny knížky z oblasti HTML jsou špatné! Tutoriály z webu bývají zastaralé.

O těchto stránkách Tyto stránky jsou soukromé a nezávislé. Jejich cílem je pomáhat lidem udržet si svobodu slova. Neopisuji. Vše se snažím ověřit, pokud něco nevím jistě, uvádím pochybnosti. Nikdo nesmí být nucen číst tyto stránky při vyučování ve škole. Jsem autorem všech zdejších textů a vyhrazuji si na ně všechna práva. moje poděkování - graf návštěvnosti - přehled změn

Ikonka Přidejte, prosím, na své stránky odkaz: <a href="http://www.jakpsatweb.cz/"> Jak psát web</a> nebo ikonku: <a href="http://www.jakpsatweb.cz"><img src="http://www.jakpsatweb.cz/ images/jpw.gif" border="0" alt="Jak psát web" width="88" height="31"></a>

jpw.gif	jpw7.gif	jpw_html.gif
další ikonky a komix

 

Kontakt

Pište mi normálně mailem na dusan@pc-slany.cz . Ocením veškeré připomínky, poznatky, kritiku, pochvaly a tipy na nové články.

Na dotazy nestíhám odpovídat, prosím za pochopení. Pokud se musíte na něco zeptat, ptejte se naprosto konkrétně a co nejstručněji. Než mi položíte dotaz, ujistěte se prosím, že není v často kladených dotazech nebo v encyklopedii. V žádném případě nebudu ladit celé vaše kódy!

• pokud je vám 29 nebo méně, jsme vrstevníci => budeme si tykat
• pokud je vám více než 29, jsem pro vás cucák => můžete mi tykat

Yuhů