November 8, 2008
HTML alebo HyperText Markup Language (Hypertextový značkový jazyk) je značkový jazyk určený na vytváranie webových stránok a iných informácií zobraziteľných vo webovom prehliadači. Používa sa teda na zobrazenie konečného grafického výstupu v prehliadači webových stránok.
Pôvodne bol určený ako veľmi zjednodušená podmnožina jazyka SGML, ktorý sa používa v organizáciách s komplexnými publikačnými požiadavkami, ale neskôr sa stal samostatným štandardom (ISO/IEC 15445:2000). Špecifikáciu jazyka HTML udržiava World Wide Web Consortium (W3C). Aktuálna verzia je HTML 4.01, ale W3C plánuje nahradiť HTML jazykom XHTML, implementáciou jazyka XML, ktorá zjednoduší prácu prehliadačov aj tvorcov web stránok.
Informácie
Jazyk HTML umožňuje vytvárať dokumenty obsahujúce text, hypertextové odkazy, multimediálny a iný obsah, formuláre, skripty a metainformácie prehliadateľné v tzv. webovom prehliadači.
Jazyk HTML je textový; umožňuje čítanie a upravovanie priamo v textovom editore. Existujú aj špecializované programy na grafické WYSIWYG editovanie stránok HTML, napríklad Macromedia Dreamweaver alebo Microsoft FrontPage, prípadne NVU ktorému sa budeme vnovať aj v našich článkoch. Ďalšou možnosťou ako vytvárať stránky v jazyku HTML je dynamická (alebo aktívna) tvorba obsahu programom bežiacim na strane servera, napríklad PHP alebo ASP, ktorý na požiadanie vygeneruje stránku a pošle používateľovi.
Verzie
Oficiálna špecifikácia HTML 1.0 neexistuje, pretože sa v tom čase používali rôzne neformálne štandardy. Prvá formálna špecifikácia bola označená číslom 2.0, aby sa zdôraznil rozdiel oproti predchádzajúcim neoficiálnym verziám.
Štandard HTML 3.0 vytvorilo novozaložené W3C v marci 1995. Obsahovalo mnoho nových možností ako podpora tabuliek, obtekanie textu, a zobrazovanie matematických výrazov. V tom čase ho nepodporili webové prezerače. Ďalšia navrhovaná verzia, HTML 3.2, väčšinu nových prvkov vynechala a namiesto toho prijala prvky, ktoré medzičasom vytvorili webové prezerače Netscape a Mosaic. Plánovaná podpora matematiky z verzie HTML 3.0 sa neskôr stala samostatným štandardom MathML.
Verzia HTML 4.0 takisto prijala mnohé prvky a vlastnosti z jednotlivých prezeračov, ale zároveň sa pokúšala ‘vyčistiť’ štandard tak, že niektoré prvky označila ako ‘zastaralé’.
Ďalšie verzie jazyka HTML už nebudú. Jeho pokračovateľom je jazyk XHTML, založený na XML.
Štruktúra
V značkách jazyka HTML existujú štyri druhy prvkov:
- Štruktúrové prvky. Označujú zmysel textu. Napríklad
-
<h1>Golf</h1>
- označuje, že slovo “Golf” je nadpisom prvej úrovne.
- Prezentačné prvky. Popisujú výzor textu, bez ohľadu na jeho zmysel. Napríklad
-
<b>tučné</b>
- zobrazí slovo “tučné” tučným písmom. Prezentačné prvky sa už neodporúča používať; výzor textu by mal byť popísaný pomocou kaskádových štýlov. Tag <b> je dnes nahredný <strong>.
- Hyperlinky. Linky do iných dokumentov. Napríklad
-
<a href="http://sk.wikipedia.org/">Wikipédia</a>
- urobí zo slova Wikipédia linku na dané URL.
- Ovládacie prvky. Vytvárajú tlačidlá, zaškrtávacie políčka, zoznamy, atď.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Tento zápis definuje, že dokument je v súlade s W3C.
Zdroj: wiki, autor
undefined
Október 10, 2008
<!– /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:”"; margin:0cm; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:”Times New Roman”; mso-fareast-font-family:”Times New Roman”;} h2 {mso-style-next:Normální; margin-top:12.0pt; margin-right:0cm; margin-bottom:3.0pt; margin-left:0cm; mso-pagination:widow-orphan; page-break-after:avoid; mso-outline-level:2; font-size:14.0pt; font-family:Arial; font-weight:bold; font-style:italic;} p {mso-margin-top-alt:auto; margin-right:0cm; mso-margin-bottom-alt:auto; margin-left:0cm; mso-pagination:widow-orphan; font-size:12.0pt; font-family:”Times New Roman”; mso-fareast-font-family:”Times New Roman”;} pre {margin:0cm; margin-bottom:.0001pt; mso-pagination:widow-orphan; tab-stops:45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt; font-size:10.0pt; font-family:”Courier New”; mso-fareast-font-family:”Times New Roman”;} @page Section1 {size:595.3pt 841.9pt; margin:70.85pt 70.85pt 70.85pt 70.85pt; mso-header-margin:35.4pt; mso-footer-margin:35.4pt; mso-paper-source:0;} div.Section1 {page:Section1;} /* List Definitions */ @list l0 {mso-list-id:1204514819; mso-list-template-ids:-722194934;} ol {margin-bottom:0cm;} ul {margin-bottom:0cm;} –>
Rámy, alebo anglicky frames sú spôsob rozloženia a štruktúry webovej stránky a jej následného zobrazovania. Princíp framov je asi taký, že konečná stránka ktorá sa zobrazí v prehliadači je poskladaná z viacerých samostatných súborov v ktorých sú zdrojové kódy pre tú konkrétnu časť stránky.
Ako to vyzerá?
Ako na to
Poďme si to teda vyskúšať. V našom príklade použijeme 3 súbory:
- obsah ľavej časti
- obsah pravej časti
- hlavný súbor kde sú definované jednotlivé časti
Tak ako v minulom článku, aj v tomto si najprv ukážeme kód, ktorý potom rozoberieme a vysvetlíme.
<html>
<head>
<title>Definícia rámov</title>
</head>
<frameset cols="215,*">
<frame name="menu" src="a.html">
<frame name="obsah" src="b.html">
</frameset>
</html>
Myslím že úvod – hlavičku opisovať nemusím, to už ovládame. Hneď za tým vidíme už prvý neznámy tag – párový, ktorým je frameset s parametrom cols.
Frameset začína definíciu rámov. Obsahuje vždy jeden parameter, ktorým je cols alebo rows (stĺpce, riadky). Zápis cols v tomto príklade znamená, že prvý rám bude mať šírku 215 pixelov. Druhý rám vedľa neho vyplní ostávajúcu časť okna. Keby bol uvedený atribút rows, rámy by sa zobrazovali vodorovne, nie vedľa seba, ale pod sebou.
Ďalší tag je frame. Ten nám už definuje konkrétny rám ktorý sa zobrazí. Musí obsahovať dôležité atribúty – name a src. Atribút “name” definuje názov rámu. Ten budeme neskôr potrebovať pre cielenie odkazov. Atribút “src” definuje cestu k súboru, ktorý sa má zobraziť. V našom prípade a.html.
Dodám ešte že v tagu frame môžu byť vložené ďalšie rámy. Praktické využitie? Takmer žiadne. Rámy v dnešnej dobe stratili moc význam, používajú sa len zriedka, alebo na veci, kde nie je možné iné riešenie.
Rámy a odkazy
Pokiaľ máme stránku postavená na rámoch a používame na nej odkazy na iné sekcie, môžme nastaviť otváranie týchto odkazov v ktoromkoľvek frame. Práve v tejto chvíli na rad prichádzajú atribúty “name” ktoré sme definovali v nastavení rámov.
Ako bude teda vyzerať odkaz na zobrazenie stránky c.html v frame obsah? Nasledovne:
<a href="kontakt.html" target="obsah">
Záver
K problematike rámov ma viac toho nenapadá. Dajte si pozor na definíciu rámovania (border) pri Vašich hrátkach a testoch framov. Taktiež pri definovaní štýlu a podobne. K štýlom sa dostaneme neskôr.
Frame sa v dnešnej dobe ako som už písal moc nepoužívajú. Význam mali pred niekoľkými rokmi kedy bolo programovanie stránok v plienkach, nedbalo sa na štandardy, pojem SEO (+ jeho obmeny) boli neznáme.
Osobne som framy nevyužil nikdy. Preto dnes nebude ani nijaký zhrňujúci test ako posledne 
August 15, 2008
V minulej časti o meta tagoch sme si povedali čo to je, na čo sú dobré a základný prehľad tých najpoužívanejších. Dnes meta tagy dokončíme a povieme si niečo o tých zložitejších, ktoré vyhľadávačom určujú čo majú so stránkou robiť.
Opät pripomeniem že meta tagy MUSIA byť v hlavičke (<head>m</head>).
Meta
Nasledujúci meta tag je určený hlavne pre vyhľadávač Google. Určuje mu aby stránku archivoval a vypísal jej úryvok:
<meta name="googlebot" content="snippet,archive" />
Na stránkach nie je nutne dôležitý a kľudne ho môžete vynechať (osobne ho nepoužívam vôbec). Opačný účinok môžme dosiahnuť zápisom nosnippet a noarchive čo znamená že sa web archivovať nebude a nevypisoval úryvok z nej. Samozrejme je možné tieto nastavenia kombinovať. Pre viac informácií zalovte v Google.
Od vyhľadávačov na chvíľu odbočíme. Vďaka META tagu je možné obsah stránky presmerovať na stránku inú po určitej dobe (samozrejme nastavenej):
<meta http-equiv="refresh" content="6; URL=http://www.nejakyweb.tld" />
Ako vidíme tu je použitý zápis http-equiv teda nie name. Hodnota 6 v content znamená že sa má stránka presmerovať za 6 sekúnd. Toto riešenie presmerovania meta tagom je dnes už málo používané. Využívajú sa flexibilnejšie metódy, napríklad .HTACCESS súbor (povieme si nabudúce), PHP script, JavaScript prípadne DNS nastavenia pre stránku. Ale je to jedna z možností META Tagov.
Individuálne použiteľným tagom je aj Generator. Ten informuje v akom editore, programe bola stránka napísaná, naprogramovaná. Tag má štandardnú syntax, name + content takže by ste s ním nemali mať problém. Tentokrát príklad neuvediem
Teraz prejdeme už k tým pikantnostiam. Začneme tagom Cache (čítaj keč). Ten určuje prehliadaču (Vášmu internetovému kde otvárate stránky), aby aktuálne otvorenú stránku neukladal do odkladacej pamäte tzv. Cache. Keď stránky cache-ujú môžu tak robiť buď na strane servera (záleží od naprogramovanie – vhodné pre weby s vysokou návštevnosťou) alebo na strane klienta, každá stránka ktorá nemá nastavený meta tag aby necache-ovala. Keď je stránka v cache Vášho prehliadača, po jej novom načítaní sa obsah načíta najprv z tejto cache. Takže nezobrazí sa Vám vždy úplne aktuálna stránka ale tá, ktorá bola uložená v tejto pamäti. Tu je zápis meta tagu:
<META http-equiv="cache-control" content="no-cache" />
Ak chceme aby sa stránka ukladala do cache tak namiesto no-cache použijeme iba cache. Pre cache-control existujú aj iné nastavenia, tie však v tomto momente nie sú pre nás potrebné a zaujímavé. Rovnaký výsledok by ste mali dosiahnuť aj s použitím tagu:
<META http-equiv="pragma" content="no-cache" />
Avšak môže sa stať že nebude fungovať úplne korektne.
Záver
Existujú aj iné špecifické a rozširujúce meta tagy ktoré sú dostupné a funkčné napríklad len pre jeden prehliadač, alebo jeden systém. Tie nás však nebudu zaujímať lebo skôr urobia viac škody ako osohu, nie všade fungujú a takmer sa nepoužívajú.
Keď sa v budúcnosti budeme zaoberať s GoogleAnalytics, indexovaním, indexovaním Live.com a inými službami, povieme si aj špecifických metatagoch, ktoré slúžia na identifikáciu a odosielanie dát na určité miesta.
Zatiaľ je to na teraz všetko.
August 14, 2008
Vieme, že jazyk HTML používa tagy a značky (párové alebo nepárové). Medzi nepárové tagy patria aj tak zvané META tagy. Tie sa stávajú dôležité čoraz viac lebo v dnešnej dobe sa kladie veľký dôraz na SEO optimalizáiu (Search engine optimalization) – optimalizácia stránky pre vyhľadávače (napr. Google).
META Tagy
META tagy sú vždy umiestnené v hlavičke zdrojového kódu, teda sú uzavreté v tagoch:
<head>
</head>
Meta tagy poskytujú informácie predovšetkým vyhľadávačom a katalógom, ktoré musia stránku najprv zaindexovať, to znamená vložiť do svojej databázy aby bolo možné ju vyhľadávať a zobrazovať vo výsledkoch hľadania na určité kľúčové slová alebo frázy. Meta tagy aktiež určujú či sa stránka má vbec indexovať, v akom kódovaní sa má zobraziť (existuje niekoľko znakových kódovaní, napríklad ISO, UTF-8, WINDOWS a iné), autora stránky, rok výroby, poslednú aktualizáciu a podobne.
Na rôznych diskusiách na internete sa možno dočítate že meta tagy už nemajú svoj význam, sú zbytočné, ale pozor, neverte tomu!
Príklady
Začneme najprv meta tagom určujúcim kódovanie stránky. Nezabúdajte, že ich píšeme vždy do hlavičky. Takže kódovanie:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
V ďalších príkladoch už head uvádzať nebudem. Tento meta tag (vidíme, že je nepárový a nepárové tagy sa ukončujú medzerou a lomítkom na konci) nastaví kódovanie na výstupe stránky na UTF-8. Odporúčam na VŠETKY vaše stránky používať UTF-8. Vyhnete sa tým zbytočným problémom.
Ďalší dôležitý META tag je Desciption, alebo Popis. Ten využívajú hlavne vyhľadávače.
<meta name="Description" content="Stránka informujúca o stave školských lavíc na ZŠ Kybernetikov AB v Lučenci" />
V tomto meta tagu už vidím zvyčajnú syntax (tvar) ako by mal vyzerať. Na začiatku je meta a nasleduje hodnota name. tam je uvedené o aký meta tag ide, o čom bude informovať. A následne content kde je už samotný obsah meta. V Description META , vidíme že v krátkosti popisuje obsah webu/stránky ktorá je zameraná, alebo kde sa nachádzajú informácie o stave školských lavíc. Žiadne podrobné a zbytočné veci tam nie sú. Iba stručné informácie, žiadne obsiahle opisovanie každej funkcie, každej informácie na stránke (toto nie je slohová práca).
Ďalší dôležitý meta tag je Keywords. Ako už názov hovorí, ide o kľúčové slová ktoré bude vyhľadávač/katalóg používať.
<meta name="Keywords" content="lavice,škola,skola,zakladna,stav,lucenec,ZS" />
Syntax tagu je opäť rovnaká. Name a content. V prípade Keywords sa môžete vypísať do sýta. Kľúčové slová alebo frázy oddeľujte čiarkou. Fráza, slovné spojenie by nemalo byť dlhšie ako 2 slová. Môžte uviesť ľubovoľne veľa kľúčových slov na ktoré ma vyhľadávač reagovať aby zaradil Vašu stránku do výsledkov. Opäť to ale nepreháňajte. Ak ich uvediete veľa môže to mať opačný účinok. Samozrejme uvádzajte len slová ktoré sú charakteristické pre VAŠU stránku, pre ten konkrétny web a nevymýšľajte si slová ktoré s ním nemajú nič spoločné.
Prvkom, ktoré využívajú vyhľadávače je aj meta tag Author. Aj z tohto názvu dokážeme usúdiť, že sa jedná a o tag určujúci autora stránky. Skúste si najprv tipnúť ako bude vyzerať jeho zápis…. Ak už máš tak čítaj ďalej:
<meta name="Author" content="Maťko kukurička" />
Uhádol si? Nič zložité ale veľmi účinné. Nezabúdajme na ukončenia meta tagov. Keď už sme pri tom autorovi, čo tak si doplniť ešte Copyright, vlastníctvo a práva pre web. Ako to bude vyzerať? Kľúčové slovo som ti poskytol… skús.
<meta name="Copyright" name="Maťko Kukurička (c) 2008" />
Napríklad aj takto. Alebo tam mže byť len meno, prípadne rok, alebo meno a (c).
Teraz keď sme si prešli tie základné meta tagy je čas, aby ste si ich vyskúšai vložiť na web, prípadne sa naučii ich syntax. V pokračovaní si povieme o zložitejších meta tagoch toré určujú cache (ukladaciu pamäť), expiráciu, indexovanie a podobne. Tie hovoria vyhľadávačom, čo majú so stránkou spraviť.
August 12, 2008
V tomto prvom návode si povieme a vysvetlíme ako vytvoríme Vašu prvú webovú stránku v jazyku HTML. Nie je to nič obtiažné vytvoriť jednoduchú HTML stránku, mal by to vedieť každý priemerný človek pracujúci s internetom.
Aby sme vytvorili jednoduchú stránku v HTML jazyku, budeme potrebovať:
- samozrejme počítač, klasický desktop alebo laptop 
- webový prehliadač (IE, Operu, Mozillu alebo iné)
- program na tvorbu webových stránok (čítaj nižšie)
- samozrejme prístup na internet aby sme mohli stránku uverejniť (ak aktuálne prístup nemáme, stránku môžeme uverejniť aj neskôr keď ju dokončíme.)
- a nápad o čom ideme náš prvý web robiť
Čo musíme vedieť?
- pracovať na PC, mať vedomosti mierne pokročilého
- pracovať s FTP protokolom (samozrejme bude aj návod)
Čoho sa nemusíme obávať?
- na začiatok a pre jednoduché účely nebudeme potrebovať profesionálne programy na tvorbu webu
- nebudú z toho vyplývať žiadne finančné výdavky
Ako sa vytvárajú HTML stránky?
- buď si napíšeme rovno celú stránku podobne ako vo Worde (program sa o ostatné postará)
- alebo si napíšeme zdroj v HTML jazyku (samozrejme že kód HTML musíme poznať)
My sa v tomto návode budeme zaujímať jedine tvorbou stránok pomocou tzv. wysiwyg editorov, to znamená, že v programe budeme rovno písať text a upravovať ho, respektíve pridávať obrázky a ostatné. Program si automaticky vytvára HTML kód podľa toho, čo chcete na Vašom webe publikovať. Neskôr si ukážeme ako taký HTML kód vyzerá.
Postup pre začiatočníkov:
1.) Budeme potrebovať nejaký ten program na tvorbu webu. Odporúčam program NVU. Je to program nenáročný, hlavne freeware, v CZ jazyku a je veľmi malý, má do 10 MB. Na stránke www.stahuj.cz si mo môžeme stiahnúť rovno v CZ jazyku. Keď ho máme naištalovaný, ukážme si ako vypadá jeho prostredie:
Vidíme tam nástroje pre úpravu webu, ktoré sú podobné ako vo Worde, takže veľkosť písma, štýl, font atď. Dole vidíme možnosť vytvorenia webu. My si ukážeme ako sa robí web v “Normálnom” režime. Hore je samozrejme lišta s nástrojmi, ktorá je veľmi jednoduchá. Už po niekoľkých použitiach zistíte, že nejde o nič zložité. Teraz si ukážeme ako napíšeme a upravíme nejaký ten text + pozadie:
Keď už máme nastavené pozadie, farbu odkazu a ostatné veci, môžeme vyskúšať napísať nejaký text a upraviť ho:
Keď už relatívne s textom a pozadím pracovať vieme, skúsme si ukázať ako vložíme na stránku nejaký ten obrázok:
Obrázok máme vložený… Následne stránku uložíme a nahráme cez protokol FTP na webpriestor.
HOTOVO!
Užitočné odkazy
Štatistiky
Partneri
 |
 |
 |