HTML a CSS - Založení webu(1)

Tutoriál

Než začneme...
...Musíte mít:

  • Vhodný editor (nejlépe PSPad)
  • Počítač (patrně jej máte pokuď však stránky prohlížíte na mobilu mějte na paměti že na něm nelze programovat HTML ani CSS)
Začínáme
Internet je dnes celosvětovým zdrojem informací a také nejpoužívanějším médiem a může se také stát výnosným byznysem. Jenže všechny internetové stránnky by nevznikli kdyby nebylo jazyka HTML. Jazyk HTML se skládá z takzvyných "tagů" neboli v češtině značek. Celá stránka by ale byla dosti nepřehledná kdyby sme použili pouze HTML a proto se později podíváme i na CSS což jsou v češtině kaskádové styly. Díky nim můžeme stránky zpřehlednit a celkově vylepšit jejich design a takový vzhled je dosti důležitý jelikož takovému návštěvníkovi stránek se často ohavný vzhled nelíbý a to se může projevit na recenzích a dokonce mírně i na návštěvnosti.

Celá stránka je doslova "uzavřená" ve značkách <html>. Ale nemůžete jen tak napsat <html> a myslet si že je vše dobře. Jednak musíte napsat dvě značky což je jasné protože jinak by stránka nemohla být uzavřená a hlavně na začátek (první značku) se píše <!DOCTYPE html> a nakonec se píše </html>. Povinná je dále také hlavička v angličtině "head". Vkládáme ji do html (jinak to ani nelze) a stačí napsat <head> a pro uzavření </head>.Stránky (respektive kód) zatím vypadá asi takto:

  <!DOCTYPE html>
  <head>
  </head>
  </html>
  
To však rozhodně zatím není vše protože na stránce v prohlížeči by se nic nezobrazilo. Teď vytvoříme tzv. "tělo" stránky do kterého se píše většina kódu a také se tam nachází téměř všechen obsah který vidí obyčejný návštěvník ve svém internetovém prohlížeči. Tělo stránky vytvoříme tak že napíšeme <body> a pak </body>. Teď se však vrátíme zpátky k hlavičce a tzv. "tělo" necháme na později. V hlavičce nám totiž chybí velmi důležitá věc a to je značka <tile>. Napište ji do hlavičky a uvnitř značky tile (tzn. mezi <tile> a </tile>) napište něco jako název webu který se bude zobrazovat na záložce a hlavně ve vyhledávači (Google,atd.) kde se bude zobrazovat jako název což je důležité a bez tohoto opatření se vaše stránky ve vyhledávači nemusí vůbec zobrazit! Kód stránky vypadá následovně:
  <!DOCTYPE html>
  <head>
  <tile> Testovací stránky </tile>
  </head>
  <body>
  </body>
  </html>
  
To je asi zatím vše. V příští kapitole se podíváme jak vytvořit text a základní formátování.

Líbí se vám článek? Ohodnoťte: - pozn. probíhá testování.

iko.png, 433B
iko2.png, 720B














Máte nějaké připomínky? Navštivte naší návštěvní knihu:

Návštěvní kniha

hlavni strana.png, 544B
cropped-next-x-logo.jpg, 31kB
NEXT-X THE LEGENDARY SITE
Copyright © 2012 Programuj.borec.cz
„O chytré ženské je nouze. Konečně o chytré mužské zrovna tak.“ Jan Werich