Robiť webové stránky nesprávne ach ťažkéje to tak, ako sa zdá. Naučte sa kódovať jednoduchá stránka spomocou jazyka HTMLa značkovanie pre web.

Navrhnúť a vytvoriť jednoduchú webovú stránku je veľmi jednoduché. Dokonca aj začiatočníci sa môžu naučiť webdizajn bez toho, aby vynaložili príliš veľa úsilia a času.

HTML je hlavný značkovací jazyk pre webové stránky. Poďme sa naučiť základy a skúsme si vytvoriť jednoduchú stránku.

Úvod do HTML

HTML je hypertextový značkovací jazyk.

Hypertext je text, ktorý funguje ako odkaz.

HTML definuje štruktúru webovej stránky a zabezpečuje jej správne zobrazenie v prehliadači. HTML dokument môže byť veľmi jednoduchý alebo zložitý, v závislosti od aktuálnej úlohy.

Webové prehliadače prijímajú dokumenty HTML z webového servera a zobrazujú ich ako webové stránky. Každý prehliadač rozumie HTML a vykresľuje obrázky, text, videá tak, ako je to napísané v kóde.

HTML je primárny značkovací jazyk pre web. Používa sa však na vytváranie statických webových stránok, bez interaktivity a animácií. html5, Najnovšia verzia HTML je v tomto smere o niečo lepšie, najmä čo sa týka videa alebo zvuku.

HTML je dnes HTML5, najnovšia verzia, ktorá pridáva viac funkcií ako predchádzajúce verzie a teraz dokáže definovať, ako sa videá, obrázky a text zobrazujú na obrazovke prehliadača.

HTML5 je jedným z výkonných nástrojov na vývoj webových stránok. S HTML5 je streamovanie médií možné bez použitia doplnkov tretích strán, ako je Flash. HTML5 tiež podporuje ukladanie dát na strane klienta. Toto možno použiť na podporu webových aplikácií, keď je klient offline.

Web a HTML

Web tvoria vzájomne prepojené webové stránky a aplikácie, ako aj obrázky, videá, animácie a interaktívny obsah. Značkovacie jazyky tvoria základ webu. Tieto jazyky sa používajú od čias, keď boli webové stránky veľmi jednoduché a budú aj naďalej súčasťou webu, jeho vývoja a budúcnosti.

HTML zostáva základnou zručnosťou pre všetkých webových vývojárov a dizajnérov.

Podľa prieskumu W3Techs je jazyk HTML, ktorý používa 74,3 % všetkých webových stránok.

Ako vytvoriť jednoduchú HTML stránku

Vývoj HTML je jednoduchý, a preto sa človek môže ľahko naučiť kódovať jednoduchú HTML stránku. Najprv sa však musíte naučiť základy jazyka.

Kódovanie HTML pomocou textového editora

HTML dokument je v podstate Textový dokument. Existuje veľa textových editorov, ktoré môžete použiť na písanie HTML. Dve najpopulárnejšie sú Dreamweaver a Vznešený text. Bezplatní redaktori- Notepad++ pre Windows a Text Wrangler pre Mac. V skutočnosti si môžete vytvoriť webovú stránku Microsoft Word, ale nemali by ste to robiť, pretože to pridáva dodatočný a nepotrebný kód do dokumentov HTML.

Ako editor použijeme napríklad Notepad++. Môžete si vybrať ľubovoľný editor podľa vlastného výberu.

Vytváranie a úprava HTML

Vytvorenie nového dokumentu HTML je rovnaké ako pre akýkoľvek iný typ dokumentu. Vyberte "Súbor" - "Nový" na otvorenie nového dokumentu v programe Poznámkový blok ++. Vykonajte zmeny v dokumente a kliknite na tlačidlo Uložiť.

Ukladanie HTML

HTML dokument je súbor s príponou .htm alebo .html. Niektoré editory môžu poskytovať aj možnosť „Uložiť ako HTML“. Súbor je lepšie pomenovať latinkou, malým písmenom a medzery nahradiť pomlčkami alebo bodkami.

Ak ste kód napísali v programe Poznámkový blok a uložili ho ako textový dokument, môžete ho pomocou programu preložiť na html stránku Úplný veliteľ. Vyberte príkaz „Premenovať“ a zmeňte príponu súboru z .txt na .html.

HTML formát stránky

HTML ako jazyk pozostáva z prvkov, značiek a atribútov, ktoré definujú obsah stránky. HTML elementy nám umožňujú pridávať na webovú stránku tabuľky, obrázky, video, audio atď.

HTML prvky

Prvky definujú štruktúru a obsah webovej stránky. Označené lomenými zátvorkami okolo názvu prvku. Obsah, ktorý nie je medzi „<>“ sa zobrazí na webovej lokalite. Prvok vyzerá asi takto:

značky

Prvok s lomenými zátvorkami okolo neho tvorí značku ( ). Značky sa nezobrazujú na obrazovke, ale pomáhajú prehliadaču pochopiť, čo by mal zobrazovať. Počiatočná značka označuje začiatok prvku a koncová značka označuje jeho koniec.

Napríklad:

Otváracia značka:

Záverečná značka:

Obsah medzi otváracou a uzatváracou značkou je obsahom prvku.

Značky možno použiť dvoma spôsobmi:

Používanie značiek v pároch

Párové štítky obsahujú otvárací a uzatvárací štítok. Takto vyzerajú:

Tu je nejaký text

Je tam otváracia značka ( ) a uzatváracia značka () na označenie konca odseku. To znamená, že všetko medzi týmito dvoma značkami je odsek.

Jednotlivé značky

Jednotlivé značky sa používajú na definovanie samozatváracích prvkov a vkladanie prvkov, ako sú obrázky. Nie je potrebné definovať začiatok a koniec týchto prvkov.

Tieto prvky sú napísané takto:

Záver / (lomka) je tiež voliteľný. Je to rovnaké ako pri nahrávaní . Aby ste sa však vyhli zámene s úvodnou značkou, je dobré na koniec pridať / (lomítko).

Atribúty

Atribúty sú prvky, ktoré rozširujú značky Ďalšie informácie. Atribút je umiestnený v úvodnej značke a obsahuje názov a hodnotu.

Značka atribútu bude vyzerať takto:

Značka „HTML“ uvedená vyššie má atribút „lang“ s hodnotou „en-US“.

Štruktúra dokumentuHTML

Každý HTML dokument má definovanú základnú štruktúru nasledujúce položky:

DOCTYPE aleboDTD: Deklarácia typu dokumentu špecifikuje používanú verziu HTML. Táto značka je umiestnená na začiatku dokumentu.

HTML: Spárovať HTML tagy definuje začiatok a koniec HTML dokumentu.

kapitolaHLAVIČKA< hlava>: táto časť definuje všeobecné informácie pre stránku a zvyčajne krátke. Obsah tohto prvku sa na stránke nezobrazuje. Názov obsahuje značku TITLE, ktorá definuje názov dokumentu zobrazený v záhlaví prehliadača. HEADER môže obsahovať aj metadáta alebo odkazy na externé súbory.

kapitolaBODY: Táto sekcia obsahuje hlavnú časť stránky. Jeho obsah sa zobrazuje v prehliadači. Väčšina kódu stránky HTML sa nachádza v prvku body.

kódovanie: táto značka určuje kódovanie použité v dokumente HTML. Kódovanie určuje, ako sa súbor uloží a ako sa zobrazí. Špeciálne symboly. Všeobecne akceptovaná hodnota pre túto značku je UTF-8, ktorá umožňuje zobraziť takmer všetky znaky v jazyku.

jednoduchá stránkaHTML

Teraz, keď rozumieme základom HTML prvky Skúsme si vytvoriť základnú HTML stránku. Začnime vytvorením prázdneho textového dokumentu v textovom editore.

Krok 1: Prvý riadok kódu HTML, ktorý sa má pridať, špecifikuje prvok DOCTYPE ako „html“. To znamená, že sa používa najnovšia verzia HTML.

Krok 3: Potom pridáme značku title so značkou Title a informáciami o znakovej sade.

ahoj svet

Krok 4: Potom sa zapíše značka BODY.

ahoj svet

Krok 5: Teraz je prázdny dokument HTML pripravený. Začnime pridávať text na zobrazenie. Pridávame značku názvu

a tag

Definujú nadpis prvej úrovne a odsek pod ním.

ahoj svet

ahoj svet

Jednoduchá HTML stránka

Hlavná HTML stránka je pripravená a môžeme ju uložiť do priečinka podľa vlastného výberu.

Zobrazenie stránkyHTML


Ak chcete zobraziť stránku HTML, musíme ju otvoriť v prehliadači. Prejdite do priečinka, kde bol uložený dokument HTML, a dvakrát naň kliknite.

Otvorí sa v prehliadači a uvidíme veľmi jednoduchú stránku. Môžete skontrolovať, čo zobrazuje:

Názov ako "Ahoj svet"

Nadpis prvej úrovne ako „Ahoj svet“

Odsek s textom "Jednoduchá stránka HTML"

Teraz, keď sme vytvorili jednoduchú HTML stránku, pozrime sa, ako môžeme pridať ďalšie funkcie. HTML poskytuje oveľa viac funkcií ako to, čo sme pridali na hlavnú stránku HTML. Môžete pridať farbu pozadia, písma, farby písma, obrázky, odkazy, zoznamy a ďalšie, aby ste vytvorili krásnu stránku HTML. Poďme sa na niektoré z nich pozrieť pridané vlastnosti.

Pokročilé formátovanie textu

HTML poskytuje špeciálne prvky pre špeciálne formátovanie textu.

Úrovne nadpisov je možné nastaviť pomocou značiek

-

. Celkovo je k dispozícii 6 úrovní nadpisov. A

- veľkosťou je najväčší z nich,

- najmenší.

značky

sa používajú na označenie začiatku nového odseku. Prehliadač zvyčajne pridá jeden prázdny riadok medzi dva odseky.

Prvky formátovania sa používajú na zobrazenie špeciálnych typov textu. Text je možné formátovať pomocou nasledujúcich značiek:

tučné -

kurzíva -

podčiarknuté -

Písmo -

Kompletný zoznam týchto značiek je k dispozícii tu.

Pridávanie odkazov

Toto je text odkazu


Pridávanie obrázkov

Tag je jedna značka, žiadna uzatváracia značka. Môžete zadať atribúty obrázka.

Atribút src určuje umiestnenie obrázka.

Atribút štýlu má veľa možností vrátane šírky a výšky obrázka v pixeloch.

Atribút alt dáva Stručný opis Snímky. Používa sa, ak sa z nejakého dôvodu nenačíta obrázok.


Pridanie názvu

Tag

je novinkou v jazyku HTML5 a určuje najvyšší prvok webovej stránky. Nadpisy zvyčajne obsahujú logo spoločnosti, kontaktné informácie, navigačné odkazy atď. V jednom dokumente môže byť viacero prvkov<>.

Pokročilé koncepty v HTML

HTML je technológia, ktorá sa ľahko učí, takže mnohí dizajnéri pracujú len so základnými konceptmi. Ak chcete naplno využiť výhody HTML, budete sa musieť zoznámiť s pokročilými konceptmi. To vám pomôže vytvoriť atraktívnu webovú stránku s menšou námahou.

Spomenieme niekoľko konceptov, ktoré vám pomôžu ďalej. Môžete sa aj naďalej učiť viac a používať pokročilé HTML a jeho funkcie.

validácia HTML kódu

Overenie HTML sa používa na kontrolu chýb v kóde HTML. Ak sa vaša webová stránka nenačítava, môžete pomocou kontroly nájsť príčinu problému.

Validácia tiež poskytuje odporúčania pre kód, ktorý nezodpovedá najnovšiemu štandardu HTML. Neplatný kód HTML spôsobí, že web nebude použiteľný. Môže to spôsobiť problémy s načítaním alebo nesúlad s výstupom rôzne prehliadače. Mnohé overovacie služby sú bezplatné, ako napríklad validator.w3.org

Pridanie ďalších značiek

Existuje oveľa viac značiek a atribútov HTML, ako sme tu diskutovali. Dva dobré vzdelávacie zdroje sú w3schools a HTML Dog, ktoré majú viac tutoriálov a úplný zoznam značky.

Môžete tiež použiť "Zobraziť zdrojovú stránku" vo svojom prehliadači na preskúmanie kódu dobre navrhnutých webových stránok a zobrazenie nových techník.

Pomocou webhostingovej služby môžete do svojej webovej domény pridať viacero stránok HTML. Budeš potrebovať softvér FTP uploady na prenos vašich HTML súborov na webový server. Existuje mnoho webhostingových služieb, ktoré poskytujú funkciu FTP.

DodatokCSS aJavaScript

CSS je možné použiť na rýchle zlepšenie vzhľad vaše stránky. Pomocou CSS môžete pridať farby, písma a zmeniť umiestnenie prvkov. So stolovou väzbou css štýly na stránku HTML, môžete zmeniť štýl celého textu.

JavaScript je programovací jazyk a možno ho použiť na pridanie ďalších funkcií na stránky HTML. Príkazy JavaScript sa vkladajú medzi značky. Môžu byť použité na pridávanie interaktívnych tlačidiel, vykonávanie matematických výpočtov a ďalšie.

Otvára sa pred vami úžasný svet vývoja webu. Odvážte sa! Zdolať tento vrchol je jednoduché, treba len začať.


Vo všeobecnosti odhadnem čas na základné štúdium html ako 2-8 hodín, zvyšok je voliteľný. A samozrejme, čas štúdia závisí od záujmu. Odporúčam si to rozdeliť na niekoľko dní po 20-30 minút.

Si pripravený? Tak poďme na to!

Na vytvorenie stránky v html NEPOTREBUJEME internetové pripojenie.

Budeme potrebovať

1) Vyberte si textový editor . na prvý krát dosť Poznámkový blok(v ňom potrebujeme iba príkaz Uložiť ako)
Ak chcete okamžite začať programovať v špecializovaných textových editoroch, venujte pozornosť:
1) pre Windows
Poznámkový blok ++(stiahnuť alebo )
intyp(Stiahnuť ▼)

2) pre Mac a linux
editor bluefish(Stiahnuť ▼)

Ich rozdiel od bežných textových editorov je hlavne v tom, že robia automatické odsadenie, ! umožniť opätovné uloženie súboru v inom kódovaní (všimnite si, že sa s tým stretnete v budúcnosti), vyfarbiť značky v rôznych farbách, ako je kód v spodnej časti lekcie. V bežnom editore bude jednofarebný.

2) Akýkoľvek internetový prehliadač ako napr internet Explorer pre Windows resp safari pre Mac OS X a iOS. Áno, môžete tiež Mozilla, Google Chrome , Opera, Yandex a Mail prehliadače atď.

Začnime vytvárať HTML stránku

1) vytvorte priečinok na pracovnej ploche html. Urobíme to tak, aby boli lekcie štruktúrované a obsiahnuté na jednom mieste.

2) Vytvorte náš súbor v textovom editore, akým je napríklad Poznámkový blok. Ďalej Uložiť ako.

Kódovanie je lepšie zvoliť UTF-8 a potom si vybrať všetky typy súborov a vyberte názov súboru s príponou .html na konci, napríklad index.html

Vyberieme si ako adresár (priečinok), kam uložiť naše html
Kliknite uložiť. Pripravený!

Často sa kladie otázka o čom prípona súboru nie je viditeľná. Zoberme si to pekne po poriadku

Schopnosť vidieť prípony súborov môže pomôcť určiť typ súboru a umožňuje vám manuálne (pomocou príkazu premenovať) zmeniť nielen príponu, ale aj typ súboru (napríklad z txt na html)

nemalo by to vyzerať takto: fotografia, textový dokument, hra
takto by to malo vyzerať: foto.jpg; textový dokument.txt; game.exe

Ak však názvy súborov stále vyzerajú ako v prvej možnosti (BEZ, napríklad .txt ; jpg ; .exe na konci názvu súboru), postupujte takto:

Pozeráme sa na nastavenia súborov a priečinkov:

Pre Windows XP Otvorte ľubovoľný priečinok - Nástroje (horný panel) - Možnosti priečinka - Zobraziť - Skryť rozšírenia pre registrované súbory (zrušte začiarknutie) - Použiť

Pre Windows 7 Otvorte ľubovoľný priečinok - Usporiadať - Možnosti súboru a vyhľadávania - Zobraziť - Skryť prípony pre registrované typy súborov (zrušte začiarknutie) - Použiť

Pre MacOS Klikneme na plochu - Finder - Predvoľby (Nastavenia) - Rozšírené (Rozšírené) - zaškrtneme políčko Zobraziť všetky prípony súborov (Zobraziť prípony všetkých súborov) - Použiť

3) vložte doň celý kód (spolu s komentármi) nižšie:



<br>


Názov mojej stránky


4) otvorte súbor. Na otvorenie tohto súboru si môžete vybrať iný prehliadač, na tento účel stlačíme pravé tlačidlo myši na našom súbore index.html - Na otvorenie s a vyberte prehliadač zo zoznamu, napríklad Internet Explorer, Google Chrome, Mozilla, prehliadač Yandex atď.

Výsledkom je, že otvorením internetového prehliadača vznikne index.html, Mala by sa vám zobraziť takáto stránka:


Obrázok 1.

Na postava 1 vidíme, ako prehliadač vo výsledku zobrazil vašu stránku. Text nasledujúcich prvkov je zvýraznený červenou farbou:



<br>Názov vašej prvej stránky <br>

Názov mojej stránky

Toto je moja prvá webová stránka!

V kóde nižšie vidíte základné minimum html dokumentu. Treba sa to naučiť a nemiešať miestami otváraním a zatváraním tagov.



Tag hlavu vyberie hlavičku dokumentu. Predpisuje prvky súvisiace najmä s používaním Prehliadača pri spracovaní prvkov vašej stránky (názov, Kľúčové slová, autorstvo a pod.) Konkrétne o jeho obsahu si povieme neskôr.

Tag titul znamená názov stránky. Toto je jediná značka obsiahnutá v hlavu Ten, ktorý je zobrazený na stránke. To, čo zadáte po úvodnej a pred záverečnou značkou, bude Názov vašej stránky na internete



<br>Názov stránky <br>


Tag telo znamená telo stránky. Čo napísať po úvodnom a záverečnom štítku telo a bude obsahom vašej stránky


<br>Názov stránky <br>

Akýkoľvek titul


Len text

Text v odseku. Bude sa písať s Nový riadok a končí sa uzatváracou značkou


Iný text



Takmer všetky značky v HTML otváranie a zatváranie(výnimkou je napr. img tag, čo znamená vložiť obrázok).



<br>Názov stránky <br>



Ešte raz pripomínam, že je dôležité nezabudnúť písať uzatváracie značky pre všetky ostatné typy značiek, inak Prehliadač presne nepochopí, kde ste chceli ukončiť ten či onen prvok. Ako je uvedené nižšie:



<br>

Chcem zvýrazniť text tučný, a tento kurzívou



Zámerne sme zabudli na koncovú značku b za slovom vytlačeným tučným písmom. V dôsledku toho prehliadač zobrazil nasledovné

Chcem zvýrazniť text tučný, a tento kurzívou

Ako vidíte, text až do konca bude tučný a ten, ktorý mal byť kurzívou, bude tučný aj kurzíva. Buď opatrný!

5) Ak chcete niečo upraviť vo svojom súbore index.html(a teraz ho štandardne otvára iba prehliadač), potom stlačíme pravé tlačidlo myši na našom súbore index.html- vybrať si Na otvorenie s a zo zoznamu vyberieme už textový editor, bude to buď Poznámkový blok alebo iný textový editor, ktorý ste nainštalovali.

V zásade vysvetlil základy. Zatiaľ html stránka vyzerá celkom jednoducho, ale v ďalších lekciách vám podrobne poviem o týchto a ďalších prvkoch a ich účele - vložíme obrázky, vytvoríme odkazy a oveľa viac)

Gratulujem!
Je to ľahké?)

Začnime našu dnešnú lekciu vytvorením najjednoduchšej webovej stránky. Na to si najskôr pripravíme textový dokument, potom ho prevedieme na htm dokument, potom doň vložíme pár riadkov kódu a následne si otvoríme našu vytvorenú web stránku v prehliadači. Potom sa zoznámime s konceptom tagov, požadovanými prvkami a ich variantmi, ktoré by mali byť prítomné na každej webovej stránke. Budeme sa zaoberať ich rozdielmi a vlastnosťami ich aplikácie. Potom sa naučíme základné pravidlá potrebné pri písaní kódov. Týkajú sa požadovaných prvkov, pravidiel pre písanie značiek a funkcií prehliadača pri vnímaní kódu.

Základná štruktúra HTML
Poďme vytvoriť konečný jednoduchý html dokument. Ak to chcete urobiť, vytvorte priečinok v počítači. Pomenujte ju ako chcete. Ideme do toho, klikneme kliknite pravým tlačidlom myši myši od prázdne pole a vyberte Nový > Textový dokument. Otvorte vytvorený textový dokument a horné menu vyberte "Súbor" > "Uložiť ako...". V dialógovom okne, ktoré sa otvorí, do riadku "Názov súboru" napíšeme index.htm. V riadku "Kódovanie" vyberte UTF-8 a kliknite na "Uložiť". Budeme mať indexový súbor, do ktorého zadáme všetky HTML kódy.

Teraz skopírujte nižšie uvedený kód a vložte ho do súboru index. Dôležité! Tento súbor musíte otvoriť pomocou špeciálneho editora. Zvyčajne používam Poznámkový blok. Ak to chcete urobiť, kliknite pravým tlačidlom myši na súbor index a vyberte "Otvoriť pomocou..." > "Poznámkový blok". Existujú aj ďalšie špeciálne editory so zvýraznením značiek. Kto je pohodlnejší. Potom stlačením klávesov Ctrl + S uložíme naše zmeny a potom dvakrát klikneme na index. Naša prvá vytvorená webová stránka sa otvorí v prehliadači.

Moja prvá webová stránka

Toto je moja prvá webová stránka

Aby prehliadač pri zobrazení dokumentu pochopil, že nejde o obyčajný text, ale o formátovací prvok a aplikované sú značky. Existujú dva typy štítkov – jednoduché a párové (kontajnery). Jedna značka sa používa samostatne, zatiaľ čo párová značka môže obsahovať ďalšie značky alebo text. Párové štítky sa skladajú z dvoch častí - otváracej a uzatváracej. Úvodná značka je označená ako jedna značka a lomka > sa používa v záverečnej značke.

Každý HTML dokument musí začínať značkou a končiť jej náprotivkom, značkou. Okrem nich v daný súbor obsahuje ďalšie tri páry značiek, ktoré musia byť prítomné v akomkoľvek inom HTML dokumente. Pár značiek

Používajú sa na označenie akýchkoľvek informácií o samotnom HTML dokumente. Značky a slúžia na pridanie názvu, ktorý sa zobrazuje v záhlaví prehliadača. Značky a sa používajú na označenie akéhokoľvek textu zobrazeného na stránke HTML.

Povinné prvky dokumentu XHTML
V jazyku XHTML viac Nová verzia HTML, pre vytvorené webové stránky je potrebný ešte jeden prvok – značka. Slúži na označenie typu aktuálneho dokumentu - DTD (definícia typu dokumentu, popis typu dokumentu). Je to potrebné, aby prehliadač vedel, ako interpretovať aktuálnu webovú stránku. Táto značka sa zobrazuje v hornej časti súboru a identifikuje aktuálny dokument HTML ako vyhovujúci požiadavkám XHTML (alebo vyhovujúcim špecifikácii XHTML). Ak vytvárate dokument kompatibilný s XHTML, môže vyzerať asi takto:

Moja XHTML stránka Toto je moja prvá XHTML stránka.

Značka má tri príchute: Strict, Transitional a Frameset. V hornej časti dokumentu HTML deklarujete, ktorý z nich chcete použiť.

Prísne Túto variáciu značky použite iba vtedy, ak ste si istí, že všetci návštevníci vašej webovej stránky používajú nové webové prehliadače, ktoré dokážu správne interpretovať šablóny štýlov. Striktný variant vyzerá takto:

Prechodný Použite túto odrodu, ak presne neviete, ktoré z nich softvér sa použije na zobrazenie vašej webovej stránky.

Sada rámov Použite túto odrodu pri práci s rámami.

Venujte pozornosť ďalšiemu rozdielu medzi XHTML kódmi a bežnými. HTML dokumenty: Značka má tri nové atribúty: xmlns, xml:lang a lang. Kedy HTML aplikácie museli ste zahrnúť iba značku na identifikáciu súboru ako dokumentu HTML, ale v tomto prípade musíte pridať atribút xmlns, ktorý spája dokument s definíciou XHTML W3C, ktorá sa stále vyvíja. Zatiaľ nezabudnite zahrnúť značku a celú značku na všetky svoje webové stránky.

Správne kódovanie
Samotné značky nestačia na vytvorenie dobrej webovej stránky. Ak sa pri písaní HTML kódov stále môžete dopustiť chýb, potom XHTML kódy vyžadujú prísne dodržiavanie pravidiel. Hoci aktuálne verzie väčšina moderných prehliadačov je schopná správne interpretovať vaše kódy, aj keď sú zadané z nesprávnych značiek, nasledujúce verzie prehliadačov sa nebudú líšiť v takejto ostrosti. Teraz môžete myslieť na budúcnosť a naučiť sa niektoré nasledovať základné princípy písanie webových kódov, ktoré zodpovedajú štandardom XHTML.

Zahrňte všetky požadované prvky XHTML zahrnuté v tomto návode do kódov svojich webových stránok. Môžete si vytvoriť šablónu dokumentu XHTML pre seba, ktorá bude spočiatku obsahovať všetky potrebné značky.

Pre všetky značky používajte malé písmená. Pre prehliadač záznamov

A sú rovnocenné (aj keď nemusia nevyhnutne byť). Vo všetkých príkazoch používajte malé písmená, aby ste nemuseli kódovať svoje webové stránky, keď sa zmenia štandardy XHTML.

Nikdy nepoužívajte medzery v názvoch súborov. starý počítačové systémy mám problémy s čítaním názvov súborov, ktoré obsahujú medzery (ako moja prvá stránka .htm). Namiesto medzery zadajte podčiarkovník (napríklad moja_prva_stranka.htm).

Všetky hodnoty atribútov značky musia byť uzavreté v dvojitých alebo jednoduchých úvodzovkách. Absencia úvodzoviek nepovedie k chybám, prehliadače v mnohých prípadoch správne spracujú kód bez úvodzoviek, s výnimkou textu obsahujúceho medzery. Potom bude prehliadač brať ako hodnotu iba prvé slovo. Preto si vždy zvyknite uvádzať hodnoty atribútov značky.

Ak bola akákoľvek značka alebo jej atribút napísaný nesprávne, prehliadač bude takúto značku ignorovať a zobrazí text, ako keby značka neexistovala. Opäť by ste sa mali vyhnúť neznámym značkám, pretože kód HTML neprejde overením.

Existuje určitá hierarchia vnorenia značiek. Napríklad tag

Musí byť vo vnútri nádoby a nikde inde. Aby ste sa vyhli chybám, uistite sa, že značky sú v kóde umiestnené správne. Ak sú značky v hierarchii odkazov navzájom ekvivalentné, potom na ich poradí nezáleží. Môžete si teda vymeniť štítky a to neovplyvní konečný výsledok.

Pre koncovú značku existujú tri stavy: Povinné, Nevyžadované alebo Nevyžadované. Požadovaná koncová značka musí byť vždy prítomná, inak to spôsobí chybu pri renderovaní dokumentu. Pre niektoré značky neexistuje žiadna koncová značka. Voliteľná uzatváracia značka označuje, že vývojár ju môže pridať alebo vynechať, nevedie to k chybe. Odporúča sa však všetky zatvoriť podobné značky, vrátane voliteľných, disciplinuje, vytvára harmonickejší a prísnejší kód, ktorý sa ľahko upravuje.

Zaujíma vás, ako vytvoriť stránku HTML? Aby ste to dosiahli, musíte stráviť niekoľko hodín a budete vedieť a svoju prvú stránku môžete vytvoriť za 5 minút.

HTML je skratka pre HyperText značkovací jazyk. V preklade to znamená „Hypertextový značkovací jazyk“. Je dôležité pochopiť, že HTML nie je programovací jazyk, ale označenie lokality.

Všetky moderné prehliadače schopný to rozpoznať. Informácie potom zobrazujú užívateľsky príjemným spôsobom, ako to zamýšľal autor.

Tento jazyk používa špeciálne značky. Každá značka má svoju vlastnú funkciu. Je ich veľa. Ideál je naučiť sa všetko. Pre začiatočníka však stačia základné znalosti.

Základy HTML

Pred vytvorením stránky HTML musíte vedieť, z čoho pozostáva. V tomto jazyku existujú dva pojmy: prvok a značka.

Začiatočné a koncové značky sa používajú na označenie toho, kde tento prvok začína a končí. Vyzerá to takto.

<открывающий тег>obsahu

Ako vidíte, jediný rozdiel medzi otváracou a zatváracou značkou je "/".

Celý dokument HTML je kolekciou týchto prvkov. Existovať určité požiadavky na štruktúru dokumentu. Všetok obsah stránky musí byť medzi dvoma značkami. a. Pri písaní kódu si zvyknite vkladať otváraciu a zatváraciu značku súčasne.

Pamätajte tiež, že štruktúra jazyk HTML má svoju hierarchiu. Inak sa tomu hovorí hniezdenie. je najdôležitejší, pretože všetky ostatné sú v ňom.

HTML má dva detský prvok:

  • ... ;
  • .. .

Blok HEAD obsahuje rôzne servisné informácie. Tieto informácie sa nezobrazujú v prehliadači. Napríklad pokyny pre vývojárov, pre akékoľvek programy, pre roboty a mnoho ďalšieho.

Najdôležitejšie je, že tu nie je žiadny obsah.

Časť BODY určuje obsah dokumentu, ktorý sa zobrazí používateľovi.

Naučte sa okamžite vytvárať otvorené a zatvorené značky, pretože môže byť 10 vnorených prvkov. Okrem toho sa pre pohodlie odporúča, aby boli vnorené značky odsadené. Napríklad takto.

Deje sa tak tak, že značky rovnakej dôležitosti sú na rovnakej úrovni a podradené značky sú „vo vnútri“. Je to teda oveľa pohodlnejšie na vnímanie a hľadanie potrebného kusu kódu. V opačnom prípade sa môžete zmiasť. Aby sa však ušetrilo miesto, karoséria môže byť vykonaná aj bez zarážok. Deje sa tak, aby všetci ostatní nemali odsadenie navyše. Všetko ostatné by malo byť oddelené.

Ako vytvoriť jednoduchú HTML stránku

Na písanie kódu potrebujete nejaký editor. Je ich veľa. Populárne sú Notepad++ a Adobe Dreamweaver. Dá sa použiť aj poznámkový blok.

Takto vyzerá editor Notepad++.

Toto je veľmi pohodlný editor a predsa zadarmo. Vyššie uvedený Adobe Dreamweaver je platený. Rozdiel medzi editormi určenými na písanie a poznámkovým blokom je v tom, že sú zvýraznené špeciálne značky. Ak to nie je zvýraznené, tak si napísal nesprávne.

Aby sa zvýraznenie zhodovalo s jazykom, musí byť špecifikované v nastaveniach.

Pozrime sa, ako vytvoriť HTML stránku v poznámkovom bloku. To znamená, že dokončíme technickú časť a potom pristúpime priamo k štúdiu značiek.

Ako vytvoriť webovú stránku v HTML poznámkovom bloku

Najprv otvorte poznámkový blok.

Potom zadajte to, čo je uvedené na nasledujúcej snímke obrazovky.

Zvyknite si písať rukami, nielen kopírovať. Keď píšete rukami, lepšie si zapamätáte celú databázu značiek.

Potom je možné súbor otvoriť v prehliadači a obdivovať výsledok. Teraz by ste mali byť schopní pochopiť, ako vytvoriť webovú stránku v HTML Poznámkovom bloku.

Svetové konzorcium W3C

Existuje taká organizácia ako W3C, ktorá vyvíja a implementuje všetky štandardy pre internet. Všetky prehliadače dodržiavajú tieto štandardy a spracovávajú označenia stránok (kódy) podľa týchto pravidiel.

Na oficiálnej stránke vývojárov jazyka HTML nájdete tabuľku so všetkými značkami a pravidlami ich používania. V tomto článku uvádzame tie najzákladnejšie.

Napadá vás, aké by mohli byť pravidlá? Všetky popisované značky majú svoje odporúčanie. Je ich niekoľko:

  • Voliteľný štítok.
  • Zakázané.
  • Prázdna značka.
  • Zastarané
  • Stratené.

Značky v HTML

Pred vytvorením stránky HTML musíte zistiť, čo by malo byť v servisnej časti HEAD.

Oblasť HEAD má povinné aj voliteľné značky. Vyžaduje sa názov názvu. Označuje sa hlavička. Je priradený k celému dokumentu. A čo vidíte vo výsledkoch vyhľadávač Google je značka názvu.

Prejdime do sekcie BODY. Existujú prvky, ktoré sa zobrazujú v prehliadači, a nie sú zobrazené. Používateľovi sa napríklad nezobrazujú komentáre. Môžu byť použité na poznámky alebo ako pomôcka pre ostatných zamestnancov, ak pracujete v tíme.

Sú označené ako

Všetko medzi tým, program takto vníma. Upozorňujeme, že značku komentára nemôžete vnoriť do inej značky komentára. Pretože hneď ako otvoríte.

Príklad takéhoto hniezdenia:

pokračovanie prvého komentára -->

Výsledok v prehliadači bude nasledujúci

pokračovanie prvého komentára -->

A tu je kúsok nebudú viditeľné. Druhý otvárací štítok