Tvoříme webové stránky - I. - Úvod

14. 6. 2013 Milan Suk HTML Žádný komentář 926

V seriálu Tvoříme webové stránky si od naprostých základů až po samotné publikování ukážeme tvorbu webových stránek. Hlavními tématy bude samozřejmě jazyk HTML, kterému se budu věnovat v několika prvních dílech, dále CSS, přičemž ve spojení s jazykem HTML si vytvoříme fungující prototyp webové stránky. Na tento seriál plánuji navázat seriálem o jazyce Javascript. Zde si nejdříve ukážeme základní struktury a programové postupy, dále praktické využití Javascriptu a dominantní částí bude také použití knihovny jQuery.

V tomto prvním díle si řekneme něco málo o samotném jazyce HTML, představíme si některé editory, které nám tvorbu stránek usnadní a nakonec si ukážeme, jak syntaxe HTML vypadá.

Jazyk HTML

Jazyk HTML je zkratka pro HyperText Markup Language. Je to značkovací jazyk založený na jazyku SGML. Dalším příkladem jazyka, který je odvozený od SGML, je například XML. Pokud již znáte XML, HTML bude procházka růžovým parkem. HTML je totiž do důsledku přesnější deklarace XML.

S první verzí (HTML 0.9) přišel Tim Berners-Lee. První verze tohoto jazyka byla vyvinuta společně s editor HTML stránek a prvním plnohodnotný webovým prohlížečem WorldWideWeb. Systém byl využíván ve výzkumném středisku v Cernu. Bylo možno prakticky jen jednoduché formátování textu. V dalších verzích možnosti jazyka HTML rostly a dnes (vezměme verzi HTML5) tu máme plnohodnotný ale přeci pořád jednoduchý způsob jak formátovat text na webových stránkách. Samozřejmě nemůžeme hovořít o nějakám jednoduchém formátováním textu. Webové stránky jsou dnes tak komplexní systémy, že napsat podle standardu, správně dynamicky (Javascript, popř. servervý PHP) a k tomu graficky pro uživatele přívětivně webovou stránku znamená studium, zkoušení, studium, zkoušení,...

Jak to funguje

Nastává otázka, jak vlastně webové stránky ve vztahu k webovému prohlížeči fungují. Celá akce započnu po zadání požadováné adresy a stisku tlačítka Enter (či stisku na hypertextový odkaz) ve vašem oblíbeném prohlížeči. Prohlížeč (na straně klienta) zpracuje uživatelský dotaz a na cílový server odešle požadavek pro cílová data. Server požadavek příjme, zpracuje a zpět pošlu odpověď s požadovanými daty. To celé se děje na tzv. HTTP protokolu. To je celosvětově rozšířený a uznávený protokol sloužící na výměnu dokumentů. Problém HTTP je, že odeslaná data nelze nějak šifrovat. Proto se dnes setkáte také s bezpečnější alternativou HTTPS, která používá navíc protokol TLS (jeho předchůdce SSL) , který umožňuje šifrování dat.

Je to velmi jednoduše řečeno, ale jde o to, aby si čtenář udělal nějaký přibližný pohled na to, jak web funguje.

Editory

HTML se nijak nekompiluje, tudíč v nejhorším případě lze vždy otevřít klasický windowsácký Notepad a HTML kód napsat přímo v něm. Pokud si ovšem chcete dopřát trochu komfortu a zpřehlednit si práci, doporučuji používat editory kódu, které dokáží zvíraznit určité prvky syntaxe jazyka (Syntax hightlight) a neuvěřitelným způsobem zpřehlednit kód. Je obrovské množství editorů, které jsou k dispozici i zdarma, takže se nemusíte bát velkých investicí.

Zatím nejpříjemnější zkušenost mám s editorem Notepad++ - http://notepad-plus-plus.org/. Je to free editor, který dokáže zvýražnovat syntaxi velkého množství jazyků, lze doplnit o množství pluginů.

Dále mám zkušenosti s editorem PSPad - http://www.pspad.com/cz/. Používal jsem ho dříve, ale mám u něho pocit takové strnulosti a malé flexibility. Na trhu je tohoto softwaru mnohem více, viz následující seznam.

  • HTML Editor - český editor.
  • Golden HTML Editor - opět český software, je zde systém trochu podobný Intellisense ve Visual Studiu.
  • Visual Studio - Vhodnější spíše na velké projekty, kde je podstatná část serverových skriptů (ASP.Net, PHP). Na obyčejné statické stránky je to až příliš robustní nástroj.

Základy syntaxe HTML

Prvkům jazyka HTML se říká tagy. Jsou to definovaná odznačení, která se zapisují mezi závorky větší/menší. Tagy bývají buď párové nebo nepárové. Toto dělení je zcela oprávněné, protože párové tagy mají většinou ohraničovat nějaký blok (tj. nějaký text, obrázek, tabulka,...), proto je třeba přesně definovat úsek, pro který bude vlastnost platit. Nepárové tagy na druhou stranu například něco vykreslují či definují. Níže je prototyp párového tagu tag, který upravuje text Text, kt...

<tag>Text, který budeme formátován.</tag>

Tagy lze i vnořovat do sebe, ale je třeba dávat pozor na to, že se musí jednotlivé tagy včas uzavírat. Pokud například nastavíte nějakému text kurzívu a tučné písmo, mělo by to vypadat asi následovně

<tucne><kurziva>Tučný a kurzívou psaný text.</kurziva></tucne>
<tucne><kurziva>Tučný a kurzívou psaný text.</tucne></kurziva> - toto je špatně

Nelze například nejdříve otevřít tag <tucne> a jako první ho uzavírat. Prohlížeč to samozřejmě pochopí, ale je to proti standardům.

Závěr

To je pro tento díl vše. V dalším díle si představíme strukturu HTML dokumentu a základní formátovací tagy.



Aktuálně

  • 3. 6. 2013 - Nový vzhled webu

Code Snippety

Komentáře

Statistiky

  • TOPlist