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∙