Ako vytvoriť HTML stránku

Obsah

Kroky
Metóda 1 z 1: Písanie stránky HTML
Tipy
Varovania
Čo potrebuješ

HTML (Hypertext Markup Language) je primárny programovací jazyk pre vývoj webových stránok. Vytvorený ako jednoduchý a pohodlný programovací jazyk. Väčšina stránok na internete bola vyvinutá pomocou jednej z foriem tohto jazyka (ColdFusion, XML, XSLT). Po prečítaní tohto článku môžete pokračovať v tréningu s využitím ďalších zdrojov na internete. Skúste na internete vyhľadať ďalšie články súvisiace s touto témou.

Kroky

Metóda 1 z 1: Písanie stránky HTML

1 Predtým, ako sa začnete zoznamovať s jedným z tu uvedených krokov, prečítajte si časť „Čo budete potrebovať“.
2 Čo by ste mali vedieť, než začnete chápať tento problém:
3 Základy. Už ste niekedy počuli o značke? Značka je obklopená uhlovými zátvorkami so slovom vo vnútri. Koncová značka je napísaná v rovnakej forme, ale s lomkou za prvou uhlovou zátvorkou. Atribút je voliteľné slovo v značke, ktoré sa používa na pridanie podrobností k značke.
4 Začiatok dokumentu. Do akéhokoľvek textového editora, ktorý používate, prilepte nasledujúci text:
html> hlava> názov> wikiHow / titul> / hlava> telo> Hello World / telo> / html> veľké> / veľké>
Značka musí byť uzavretá rovnakou značkou, ale lomkou za prvou uhlovou zátvorkou. Existujú výnimky, ako napríklad značky META alebo DOCTYPE.
5 DOCTYPE
- Obvykle je nastavená väčšina webových stránok DOCTYPE “. Pomáha to určiť kódovanie a tiež to, ako ho budú vnímať webové prehliadače. Väčšina stránok bude fungovať bez neho, „ale je to nevyhnutné, ak sa chcete zhodovať (upravujú typy kódovaní na internete a spôsob ich použitia)... DOCTYPE pre HTML 4.01 je uvedený nižšie:! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> Toto je jeden z najbežnejších DOCTYPE sa používa na stránkach po celom internete.Najprv ukazuje na typ stránky popisujúcej „html“, potom zvýrazňuje typ kódovania a nakoniec umiestnenie DOCTYPE, ktoré vo výsledku popisuje stránku pre webový prehliadač.
- Existujú rôzne typy HTML (rôzne verzie vyvinuté v priebehu rokov), napríklad pomocou nových značiek alebo konkrétnych značiek. Niektoré značky sú zastarané (namiesto nich sa používajú iné užitočnejšie značky).
- b> a i> - to je v súčasnosti uložené na štítkoch, pretože sa používajú na transformáciu textu, ale nie na špecifikácie, v dôsledku čoho ich nahrádzajú iné značky. Označiť silný> je náhradou za b>a em>, náhrada za i>.
- Je dôležité, aby boli predchádzajúce značky nahradené značkami, ktoré sú viac než len formátovanie. Ak je text preložený, potom nielen formátovanie, ale aj jeho význam zostáva rovnaký. To je sémanticky správne.
- V XHTML verzii 2.0 b> a i> nepoužíva sa, rovnako ako v HTML verzii 3+.
6 HTML „pravidlo zapuzdrenia“.
- Pozrime sa na dôležitejšie tagy, ktoré sa v súčasnosti používajú. Pri vytváraní stránky sa používa jednoduchá štruktúra. Ak bola značka otvorená, v dôsledku toho malo by to byť zatvorené... To platí pre celú štruktúru. Tu je platný príklad štruktúry rozloženia XHTML:
- ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- html xmlns = "http://www.w3.org/1999/xhtml">
- hlava>
- meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
- title> Hello World! / title>
- / hlava>
- telo>
- h1> Hello World! / h1>
- / telo>
- / html>
- Ukážkový kód, ktorý vydáva správu Ahoj svet... Hovorí sa tomu test Ahoj svet.
7 Nadpis
- Názov webovej stránky je obsah medzi značkou hlava>... Tento obsah nemôže používateľ zobraziť (iba názov, ktorý je uvedený v názve stránky). Informácie medzi značkami hlava>, môže priložiť ďalšie značky, ako napríklad:
  - Značka META sa používa na informácie, ktoré sú užitočné pre vyhľadávače a ďalšie nástroje.
  - Značka LINK, ktorá vytvára prepojenie medzi dokumentmi, napríklad pre štýly (CSS).
  - Značka SCRIPT, ktorá zahŕňa takmer akékoľvek webové kódovanie s možnosťou vzdialeného prístupu (z iného dokumentu).
  - Značka STYLE, čo je v zásade štýl, ktorý je možné použiť na stránku.
  - Značka TITLE je názov, ktorý sa vo vašom webovom prehliadači zobrazuje ako názov stránky.
- Pozrime sa na ukážku niektorých z nich v príklade hlavičky prevzatej z tohto webu (bol skrátený):
  - hlava>
  - titul> ... / názov>
  - meta name = "description" content = "..." />
  - odkaz rel = "stylesheet" type = "text / css" href = "..." />
  - meta http-equiv = "content-type" content = "text / html; charset = UTF-8" />
  - style type = "text / css" media = "all"> ... / style>
  - script type = "text / javascript" src = "..."> / script>
  - / hlava>
    
    Ak ste si to nevšimli, jednotlivé značky boli zvýraznené a aktuálne informácie boli odstránené. Príklad je dosť krátky a ukazuje takmer všetky značky, v ktorých sa dá nájsť hlava>okrem komentára HTML (o tom si povieme v jednoduchých značkách).
8 Jednoduché značky všade
- Poďme ďalej a pozrime sa na ďalšie značky. Buďte opatrní pri označovaní a pamätajte na pravidlo „Zapuzdrenie“.
  - silný> Zdôrazňuje dôležitý text.
  - malý> Zmenší text. Veľkosť písma sa meria v štandardných jednotkách od 1 do 7, 3 je predvolená veľkosť textu. ...
  - pre> Definuje blok formátovaného textu. Ako je správne, taký text je napísaný písmom rovnakej veľkosti a so všetkými medzerami medzi slovami.
  - em> Zobrazí text ako frázu.
  - del> prečiarkne text.
  - ins> Definuje text, ktorý bol vložený do dokumentu.
  - h1> Jedna z mnohých značiek nadpisov. Štítky tohto druhu začínajú na „h“ s rozdielom v počte. Uistite sa, že ste značku zatvorili rovnakým číslom.
  - p> Definuje odsek.
  - ! --- ... ---> Na rozdiel od iných značiek musí byť komentár vnútri samotnej značky. Tieto informácie sú viditeľné iba pri zobrazení kódu.
  - blockquote> Zobrazuje cenovú ponuku, dá sa použiť so značkou cite>.
  - Niekoľko vyššie uvedených príkladov nie je úplný zoznam existujúcich značiek. Ak sa chcete dozvedieť o ostatných, navštívte.
9 Vytvorenie jasnej štruktúry
- Stránky sú navrhnuté tak, aby uchovávali údaje v jednoduchých sadách značiek, aby sme mohli informácie analyzovať na odseky. Počítač rozpoznáva údaje; nevie o kontexte ani koncepčnom spojení. Musíme vytvárať počítačové HTML stránky. To sa dosiahne použitím značky div. Pomáha vytvárať obrovské množstvo stránok. Je možné ho štylizovať pomocou CSS a je jednoduchšie ako vytvárať veľké tabuľky kódov pre rozloženie.
  - div> Táto značka je špeciálna, pretože je možné ju štylizovať a používať samostatné bloky informácií, ktorým porozumie používateľ aj počítač.
- Pozrime sa na jednoduché rozloženie HTML, ktoré používa značku div.
  - ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  - html xmlns = "http://www.w3.org/1999/xhtml">
  - hlava>
  - meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
  - title> Hello World! / title>
  - / hlava>
  - telo>
  - h1> Hello World! / h1>
  - div id = "contentOne">
  - p> Toto je text v div # contentOne. / p>
  - div>
  - p> Odsek v podsekcii div # contentOne / p>
  - / div>
  - / div>
  - / telo>
  - / html>
- Použitie značiek div> pomáha pri hľadaní a úprave štýlov pri práci s CSS a Javascript. HTML bude používať rôzne kódovania na prácu so štýlmi CSS a Javascript, aby vytvorilo lepšie a pohotovejšie používateľské prostredie.

Tipy

Po prečítaní tohto článku neprestávajte a myslite si, že ste sa naučili všetko, čo potrebujete vedieť. Vždy sa je čo učiť, obzvlášť v tejto technológii.
Naučte sa porozumieť a písať kód.
Upozorňujeme, že niektoré značky používajú iba>. Para a br sú niekoľko príkladov. Ostatné značky otvorené pomocou> je potrebné ďalej zatvárať. Napríklad „div> / div>“.
Ľudia očakávajú nové objavy, preto ich znova objavujte, navrhujte alebo kódujte.
Keď sa veľa naučíte, skúste sa naučiť programovať server.
Naučte sa pracovať s CSS aj s Javascriptom.

Varovania

Nezabudnite, že HTML je predovšetkým o úprave obsahu. To znamená, že HTML sa používa iba na ukladanie obsahu v rozpoznanom formáte. Ďalšie zmeny je potrebné vykonať pomocou iných technológií, napríklad CSS. To tiež znamená urobiť „sémanticky správnuaj keď to ostatní nepriznávajú. Ostatné programovacie jazyky pomáhajú vytvárať webové stránky (CSS, Javascript a XML). HTML je konštruktér obsahu.

Čo potrebuješ

Textový editor, ktorý podporuje kódovanie ANSI
Webový prehliadač, ako napríklad Internet Explorer alebo Mozilla Firefox
(Voliteľné) wysiwyg alebo wykiwyg HTML editor, ako napríklad Adobe Dreamweaver, Aptana Studio alebo Microsoft Expression Web