Stránky pro začátečníky v tvorbě WWW

Ahoj všem,
před několika měsíci jsem - prvotně pro svého kamaráda - udělala stránky s návody pro naprostý začátek psaní HTML a CSS.

Časem se trochu rozrostly, a teď, když byly díky Yuhůově nabídce přesunuty do velmi dobré společnosti na JPW, jsem se konečně odhodlala Vám je tady nabídnout - třeba i ke kritice vzhledu a obsahu, ale také jako zdroj informací pro začátečníky, nebo zdroj odkazů pro ty, kteří ostatním pomáhají svými radami.

http://polopate.jakpsatweb.cz

hezky, aspon bude na co odkazovat

kritika vzhledu?
no styl je podobny FAQ;)... takze imho hezky

Tak já si teda vezmu na starost kritiku obsahu. Pročetl jsem více méně všechno, takže toho bude trochu víc, předem se omlouvám :-). Vezmu to popořadě:

>>http://polopate.jakpsatweb.cz/?page=jak:
"Trochu to tady míchám, ale budu tady psát o striktním XHTML 1.0, alespoň alespoň pokud mé znalosti dovolí"
V kódu ti chybí deklarace jmenného prostoru, která by tam měla být a máš tam dvakrát alespoň.

>>http://polopate.jakpsatweb.cz/?page=struktura2:
"Jinými slovy - tímto zápisem řeknete prohlížeči, v jaké verzi (X)HTML jste svou stránku napsali. Prohlížeč podle toho s kódem naloží."
Tohle říká MIME-typ. Pokud bych měl použít přirovnání, které tam uvádíš, tak ten překladatel by byl spíše validátor než prohlížeč. Pokud pošleš stránku jako text/html, tak tam můžeš mít DOCTYPE třeba XHTML 2.0, ale prohlížeč bude se stránkou nakládat jako s HTML, ne jako s XHTML.

>>http://polopate.jakpsatweb.cz/?page=odkazy2:
"<a href='velka_fotka.jpg'><img src='mala_fotka.jpg' /></a>"
Chybí zde alternativní text, u obrázkového odkazu to je dvakrát chyba

>>http://polopate.jakpsatweb.cz/?page=css:
"Několikrát jsem zmínila, že doporučuju (a nejen já) vyhýbat se jakýmkoli html tagům nebo zápisům do kódu HTML, které mají vliv na určení vzhledu stránky - to znamená vyhýbat se tagům jako <center>, <font> a tak."
Značka <font> sama o sobě žádný prezentační význam nemá. Pokud nepoužiješ její atributy, tak je ta značka neškodná.

>>http://polopate.jakpsatweb.cz/?page=span-div:
"Možná se to na první pohled nezdá, ale mezi blokové prvky patří z těch základních, námi zmíněných: odstavec <p>, nadpisy <h1> - <h6>, zalomení řádku <br /> a v této kapitole se naučíme používat <div>."
Určitě je <br> blokový element?

>>http://polopate.jakpsatweb.cz/?page=formatovani-spanu-divu:
"<p>Kočky jsou <span class="vyrazny">domácí zvířata</span>, která předou.</p>"
Já sice chápu, že to je pouze příklad, ale jako zastánce sémantiky mne tento zápis trhá oči. Na tohle by se správně měla použít značka <strong>, nešel by vymyslet nějaký elegantnější příklad se spanem? Mimochodem na této stránce chybí odkaz na další stránku ("Co na "dobrý" web nepatří")

>>http://polopate.jakpsatweb.cz/?page=nepatri:
"Vyskakovací okna - Nejen že to neodpovídá standardům..."
Moc nevím, jak jsi to myslela, ale IMHO standardy se o tom nezmiňují a snad ani nemohou. Určitě to ale je proti přístupnosti.

To by bylo k obsahu všechno. Ještě dvě poznámky mimo - logo není klikací a každá stránka by mohla mít jedinečný titulek. Jinak pěkný web a gratuluji k přesunutí webu pod jakpsatweb a přeji hodně úspěchů :-).

musim říct, mooc pěkný...

Mooc hezky a rek bych ze se z toho da hodne naucit :-D

http://polopate.jakpsatweb.cz/?page=class-id - link "naučili" odkazuje na neexistujici stranku!

díky že jste se mrkli, díky Timy za hloubkovou analýzu ;-)

1. deklarace jmenného prostoru - něco s tím provedu, dík za upozornění
2. MIME typ - tohle ale asi zatím nechám tak jak to je, i když to je dejme tomu nepřesné. Má to být "polopatě", detaily a přesné vysvětlení jistě zájemci najdou jinde.
3. alt texty - díky, doplním
4. tag font - no a když mu nedáš atributy, tak na co ti bude?
5. <br /> - minimálně podle jpw je to blokový prvek, viz http://www.jakpsatweb.cz/html/bloky.html, nebo třeba http://academ.hvcc.edu/~kantopet/old/xhtml/index.php?page=xhtml+block+elements&parent=xhtml+basics, ale uznávám, že to není nejlepší příklad
6. span="vyrazny" - souhlasím s tebou, vymyslím třeba časem něco chytřejšího
7. ty standardy - asi jsem neměla na mysli nic konkrétního než to, že se to prostě nedělá ;-)

jo a logo a titulky - to vedu v patrnosti, ale mám v plánu při příležitosti nové adresy trochu rejpnout do designu, který nebyl určen pro web na takovém výsluní... ale až po zkouškovým ;-)

ještě jednou dík za čas, který jsi tomu věnoval - určitě to potřebuje čas od času nějakého editora

MyFlower: díky za postřeh, hned to spravím

http://polopate.jakpsatweb.cz/?page=class-id
tady jak se styluji ty odstavce... ale mozna by se to mohlo rict jinde (snad jsem to neprehlidl, jsem hrozne utahanej)... ze v css plati to, co se napise nejpozdejc. kdyz dvakrat ostyluju to stejny jinak, ze bude platit to posledni. (teda snad nekecam uplny bludy ;-) )

http://polopate.jakpsatweb.cz/?page=nepatri
dole je odkaz na dalsi stranku, ale odkazuje na sebe sama

http://polopate.jakpsatweb.cz/?page=uvod_php
uz nevim proc, ale php vzdycky zapisuju mezi "<?php" a "?>". teda v tom otvirani mam to "php" navic. uz nevim, proc to tak delam, ale urcite to ma dobry duvod... at se vyjadri nekdo, kdo o tom neco vi ;-)

v sekci php nejsou dole odkazy na dalsi stranky...

jinak je to dobry, fakt ze jo. i kdyz to muzu asi tezko posoudit, kdyz uz o tom html a css neco vim. chtelo by to otestovat v praxi na nejakych zacatecnicich...

Tonik: no ono to furt zdaleka není celý. O css jsem začala nedávno, k dědičnosi a pod. se snad propracuju. Chci na to jít pomaličku ;-)
Ty odkazy spravím. Díky za pochvalu.
Ale to testování na začátečnících - je to těžký. Na WZ jsem tam měla diskusi, dva napsali že je to supr, jeden se hrozně divil že se učí od ženský, a další mi tam napsal "trocha skromnosti by neškodila, nemyslíte?" tak nevím. U Yuhůa jsem ode dneška, neměla jsem ještě čas ten vzkazník zprovoznit (předělat připojení sql)... a možná to ani neudělám. Uvidíme.
Jo a kamarád, který se mezi začátečníky sám (a právem) počítá, zase tvrdí, že to je stejně ještě moc komplikovaně vysvětlený. Tak jsem mu řekla, že to samo mu to do hlavy prostě asi nevleze... :-)

* tím "pomaličku" nemyslím rychlost výroby dalších pokračování, ale rychlost výkladu :-))

dis:
> tag font - no a když mu nedáš atributy, tak na co ti bude?
No, můžeš ho nastylovat stejně jako třeba <span>, já to tak třeba používám, protože nemám rád <span> (objektivně je to vlastně jedno, mám pro to vyloženě subjektivní důvody). Zajímavé, že jako příklad prezentačního prvku se poměrně často (respektive snad všude) uvádí právě značka <font>, která ale žádný prezentační význam nemá. Osobně bych spíše jako prezentační značky uvedl třeba <marquee>, <blink> nebo <strike>.

><br /> - minimálně podle jpw je to blokový prvek
No nevím, je to takové rozpoluplné, určitě nemá display:block (http://www.w3.org/TR/CSS21/sample.html), ale kdo ví, jak to zase je. Ale jak si sama řekla, učebnicový příklad to asi nebude :-).

>ty standardy - asi jsem neměla na mysli nic konkrétního než to, že se to prostě nedělá ;-)
Spíš bych tam napsal tu přístupnost, to je jednoznačnější (ale zase jestli nechceš začátečníky strašit, tak tam asi vážně budou lepší ty standardy, je to lehčeji představitelné).

2Timy: máš určitě pravdu, s tím fontem - ale na to ať si začátečníci přijdou, až nebudou začátečníky ;-) zatím jim to zkusím vysvětlit jednoduše a bez vyjímek. Jakmile jim font povolím, tak mi tam budou rvát atributy, protože to někde uvidí. Když jim ho zatrhnu, chybu neudělají, protože si poradí právě s tím spanem... jo je to diskutabilní, ale v jednoduchosti je síla.

Hezké je to. Sice nevím, jak tam nováčka navést (obvykle je navádíme poté, co se tady blbě zeptají), ale je to pěkné. Takhle polopatě by to pochopila i žravá blátotlačka z Traalu.

K tomu vzhledu - lopata v hlavičce stránky vypadá podezřele pixelovatá a tudíž k tomu jemně vyhlazenému zbytku nesedí.

Co se týče diskuse tady, tak:
1) Pokud se má někdo dnes naučit stránky, má se je naučit dělat moderně a efektivně. Takže by se mu měly tagy jako FONT atd. zatajit a radši ho naučit stylování. Čím dříve se naučí stylovat, tím větší bude cítit odpor k tagu FONT apod.
2) Používání <?php a ?> má svůj dobrý důvod - jednak kvůli xml deklaraci a jednak kvůli tomu, že short tags může být vypnuto (právě kvůli xml hlavičkám xml dokumentů)
3) Začátečník potřebuje konkrétní příklady a obrázky ;), dlouhé odstavce textu si nikdy nepřečte (nováček na internetu je líný číst to, co by ho mělo zajímat).
4) Na přístupnost začátečníci kašlou, protože o ní nic nevědí.
5) Barevný vkus (a celkově estetické cítění) má málokdo, zvlášť né nezkušený začátečník.

Můj osobní názor celkový je, že aby mohl někdo dělat pořádné webové stránky, musí o nich vědět to, co potřebuje, a sledovat moderní trendy. Aby mohl vědět, která bije, musí vědět, jak funguje internet, http, skriptování, linux... Tyhle věcí ví málokdo, proto je zde jen několik lidí, kteří něco umí. Naštěstí jsou zde vidět nejvíce.

A pokud by někdo chtěl udělat webové stránky a nevěděl nic o tom, aby si nejprve rozmyslel, jestli webové stránky vůbec musí dělat, pak aby se naučil technologie webu a pokud by to nezvládl, tak ať radši nezkouší dělat na vlastní pěst a pořídí si odporníka.

dis:
>jo je to diskutabilní, ale v jednoduchosti je síla.
souhlasím :-)

Nípal:
>Pokud se má někdo dnes naučit stránky, má se je naučit dělat moderně a efektivně. Takže by se mu měly tagy jako FONT atd. zatajit a radši ho naučit stylování.
Určitě sis přečetl celou diskusi? I <font> se dá úplně normálně nastylovat a ničemu neublíží.
<font style="color:red">
<span style="color:red">
Rozdíl žádný.

no rozdíl je v tom, že font je od 4.01 deprecated, a v DTD XHTML 1.0 vůbec není. Alespoň pokud já teda vím...

dis:
http://webylon.info/C26.cs.aspx doporučuji přečíst :-)
XHTML nezrušilo jediný element, <font> tam je taky http://www.w3.org/TR/xhtml1/dtds.html#dtdentry_xhtml1-transitional.dtd_font

oukej, vypadlo miž v XHTML 1.0 Strict vůbec není. Nebo je? A kde?
http://www.w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strict

dis:
No však ano, v transitional verzi můžeš <font> použít, ve striktní ne. Je už pak jedno, jestli to je HTML strict nebo XHTML strict.

a když dám do dokumentu v XHTML 1.0 Strict tag <font>.. tak validátor píše
Error Line 48 column 255: element "font" undefined.

jo tak to jsme si nerozuměli a minulý post je už trochu out of time ;-) V tom případě mluvíme oba o tom samém. Na svém webu se snažím držet DTD XHTML 1.0 Strict, před chvílí jsem to jen zapomněla uvést...

A co se ti na tom nezdá?

milster: ty posty jsou trochu přeházeny, tak ta diskuse asi nedává smysl... Bavili jsme se o tagu <font>, používat či ne.. a když jsem poukázala na to, že není v dtd u XHTML 1.0, zapomněla jsem napsat že mluvím o strict, a už to bylo o voze a koze :-) tak sorry za ty zmatky

dis:
Také přispěji svým postřehem do mlýna. Poslední odstavec na stránce

http://polopate.jakpsatweb.cz/?page=tagy

"V tomto seznamu ale najdete i tagy formátovací, např. <center>, <b>, <i> apod.; chcete-li se ale se mnou vydat cestou čistého xhtml, tak na ně rovnou zapomeňte."

Elementy b a i jsou narozdíl od center součástí XHTML 1.0 Strict (důkaz: <!ENTITY % fontstyle "tt | i | b | big | small ">, http://www.w3.org/TR/2002/REC-xhtml1-20020801/dtds.html#a_dtd_XHTML-1.0-Strict ) - a to naprosto oprávněně. Tyto elementy neslouží k visuálnímu, nýbrž k logickému vysazení (lepší slovo mě nenapadá) textu, tudíž do citované věty absolutně nepatří. Mám pocit, že jsme to tu (na fóru) probírali v rámci nekonečné diskuze o sémantice.

donny:
tagy b a i slouží k vizuálnímu odlišení.
tagy strong a em slouží k logickému odlišení.

přeber si to jak chceš

BTW, tady několik lidí nechápe jistá rozdíl mezi:
- je v normě
- doporučuje se používat

Já tagy font apod. nedoporučuju používat, přestože jsou v normě.

b a i ROZHODNE NEJSOU visualnimi protiklady k strong a em. B označuje tučně psaný text, I značí kurzívu. EM text vyzdvihuje, STRONG zdůrazňuje. To, že je user-agenti interpretují shodně je rozhodně nestotožňuje. Já třeba používam strong jako červené podtržené.