Kód šablóny stránky. So širokým rámom. Voliteľné značky v HTML5
Lekcia „Ako vytvoriť HTML stránku“ je venovaná rozloženiu veľmi jednoduchej webovej stránky. Dozviete sa, ako správne uložiť HTML súbor, nastaviť potrebné kódovanie pre správne zobrazenie HTML stránky v prehliadači a umiestniť texty, zoznamy a obrázky na webovú stránku.
Po preštudovaní tejto lekcie sa už naučíte, ako vytvoriť svoju prvú webovú stránku, ako na obrázku 1.
Obrázok 1
1. Štruktúra HTML dokumentu
Súbory HTML majú príponu .htm alebo .html.
Značky sú zvyčajne spárované: počiatočné a koncové značky. Počiatočné -<>, Konečný, Napríklad
A
Nazýva sa aj párová značka kontajner .
Niektoré značky nemajú požadovaný pár značiek, táto značka sa nazýva slobodný
. Takáto značka sa uzatvára napríklad napísaním pravej lomky pred uzatváraciu hranatú zátvorku
Štruktúra html dokumentu vyzerá takto (obrázok 2).
Obrázok 2
Vysvetlivky k zoznamu na obrázku 2
Konštrukcia DOCTYPE v prvom rade znamená jeden zo štandardov rozloženia webových stránok.
Medzi značkami
A
obsahuje hlavičkovú časť. Súčasťou je dizajn
Obrázok 3
Záznam znamená kódovanie cyriliky, aby sa písmená zobrazovali v prehliadači správne. Ak nie je zadané kódovanie, písma sa niekedy môžu zobraziť nasledovne (obrázok 4)
Obrázok 4
Tá istá stránka po vložení kódovania (obrázok 5)
Obrázok 5
Poznámka: namiesto kódovania charset="windows-1251" môžete použiť kódovanie charset=" utf -8" , ktorá vám umožňuje vytvárať viacjazyčné stránky, pretože sú v nej prítomné všetky postavy existujúce na svete. V tomto prípade v Poznámkový blok++ je potrebné pred rozložením a uloženímhtml-vyberte súbor z horného menu Kódovanie - Kódovať do UTF -8 bez kusovník (UTF-8 bez kusovníka)
Tieto informácie stačia na vytvorenie prvého dokumentu.
Cvičenie 1
1. Vytvorte priečinok, pomenujte ho môjdom. Názvy všetkých priečinkov a súborov musia byť vytvorené malými latinskými písmenami, Ruské mená nemožno použiť. Udržujte mená krátke a zmysluplné.
Kód webovej stránky napíšeme do programu Poznámkový blok. Je lepšie používať nie Poznámkový blok, ktorý sa dodáva so systémom Windows, ale „pokročilejší“, napríklad Notepad++. Distribúcia Poznámkový blok++ je v priečinku CD/distr.
2. Otvorte Poznámkový blok++. Uistite sa, že je nastavené kódovanie ANSI, urobte to v menu v položke Kódovania, nastavte polohu Kódovať do ANSI.
3. Napíšte kód zo zoznamu na obrázku 2 do programu Notepad++.
Kód v zozname na obrázku 2 nám v budúcnosti poslúži ako šablóna, aby sme nemuseli zakaždým vypisovať štruktúru HTML dokumentu. Skopírujte odtiaľto konštrukciu DOCTYPE (nie je potrebné si ju zapamätať ani zapamätať).
4. Uložte súbor ako template.html v priečinku môj dom, zatiaľ čo v teréne Typ súboru Inštalácia Všetky druhy(Obrázok 6), inak sa vaša webová stránka neotvorí v prehliadači.
Obrázok 6
5. Po uložení spustite šablóna. html dvojité kliknutie. V dôsledku toho bude váš súbor vyzerať takto (obrázok 7).
Obrázok 7
Ak nedostanete výsledok ako na obrázku vyššie, znamená to, že s najväčšou pravdepodobnosťou je chyba v kóde. Stačí jeden chybný znak a webová stránka sa nezobrazí správne. Znova skontrolujte kód podľa zoznamu na obrázku 2.
6. Vo vnútri priečinka môj dom vytvorte priečinok verejnosti_ html. Tento názov je zvyčajne priečinok, v ktorom je stránka uložená pri hosťovaní na skutočnom hostingu (tento priečinok možno nazvať aj www).
7. Uložte súbor šablóna. html v priečinku verejnosti_ html pod novým názvom Hlavná. html.
8. Z priečinka CD/ html_css_1 otvorte súbor text_main.txt v programe Poznámkový blok ++ a tiež otvorte súbor uložený pod názvom Hlavná. html
9. Skopírujte celý text zo súboru text_main.txt a vložte ho do súboru Hlavná. html namiesto slovného spojenia „obsah webovej stránky“. V značke
10. Uložte zmeny a ukážte súbor Hlavná. html v prehliadači. Uvidíte neformátovaný text. Prehliadač nerobí ani zalomenia riadkov, ktoré sú v zdrojovom texte (obrázok 8).
Obrázok 8
2. Formátovanieweb-označené stránkyHTML
Tento tutoriál Ako vytvoriť stránku HTML obsahuje základné značky, ktoré sa používajú na označenie webovej stránky.
Značky sú určené na formátovanie textu webovej stránky. Zoznam značiek si môžete pozrieť podrobnejšie v priečinku CD/AdresárHTML v adresári html401_en.chm(v hornej položke ponuky prvkov).
Pozrime sa na niektoré značky.
Prvky h 1, h 2, h 3, h 4, h 5, h 6
Štruktúrovanie tela dokumentu sa vykonáva vo vnútri prvku < telo> pomocou nadpisov špecifikovaných prvkami h1, h2, h3, h4, h5, h6.
Prvky nadpisu sú spárované, preto musia mať otvor < h1> a zatváranie h1> značky.
HTML má šesť úrovní nadpisov: h1 (najvyššie), h2, h3, h4, h5 a h6 (najspodnejšie). Funkcionalita prvkov nadpisov je podobná bežným štýlom nadpisov v textových editoroch.
Účinky týchto šiestich značiek sú znázornené na obrázkoch nižšie. Na jednom obrázku zdroj(Obrázok 9), na druhej strane - pohľad v prehliadači (Obrázok 10).
Obrázok 9
Obrázok 10
Rozdelenie textu na odseky
Tag < p> nastaví začiatok odseku a vloží medzeru do hornej časti odseku - zarážku na oddelenie tohto odseku od predchádzajúceho.
Vynútiť prerušenie čiary
Tag
umožňuje zalomiť zostávajúci text odseku na ďalší riadok. Toto je nepárová značka a na rozdiel od značky odseku nezväčšuje medzery medzi riadkami.
Cvičenie 2
1. Naformátujte názov „Katalóg architektonických projektov“ pomocou značiek
A
.2. Naformátujte názov „Projekty pre váš budúci domov“ pomocou značiek
A
.3. Naformátujte nadpisy „Projekty domu“ a „Oblasti domu“ pomocou značiek
A
.4. Rozdeľte hlavný text na odseky pomocou značky
V prvých dvoch odsekoch použite značku
prelomiť čiaru. V dôsledku toho by váš kód mal vyzerať takto (obrázok 11).
5. Zobrazte výsledok v prehliadači.
Obrázok 11
Odrážkové a číslované zoznamy
Pomocou nástrojov HTML môžete vytvárať ľubovoľné zoznamy: číslované (numerické a abecedné) a zoznamy s odrážkami odlišné typy značky.
Tag < ul>…ul> vygeneruje zoznam s odrážkami.
Tag < ol>…ol> vygeneruje očíslovaný zoznam.
Jedna položka zoznamu ako v
- , a v
- Implementujte kód zobrazený na obrázku 13 do nového súboru.
- Uložte súbor do priečinka môj dom pod menom spisok_ vlozh. html. Výsledok na obr. 13
- absolútna;
- príbuzný.
- zadajte priečinok folder_2,
- potom zadajte priečinok folder_1,
- potom priložte obrázok.
- opustiť priečinok folder_1,
- opustiť priečinok folder_2,
- priložiť obrázok.
- opustiť priečinok folder_1,
- opustiť priečinok folder_2,
- prejdite do priečinka folder_3,
- prejdite do priečinka folder_4,
- priložiť obrázok pic.jpg
- opustiť priečinok folder_1,
- opustiť priečinok folder_2,
- opustiť priečinok folder_3,
- zadajte priečinok folder_4,
- priložiť obrázok pic.jpg.
- template.html
- main.html
- spisok_vlozh.html
- vnútri priečinkamôj dommal by tam byť priečinokverejnosti_ htmlso súbormi budúcej lokality
- sedem príkladov relatívneho adresovania a dva príklady ako kontrolné praktická úloha 14
- kľúčové slová a popis stránky;
- odkazy na iné súbory (*.css a *.js).
- vytvorené pomocou značky <
li>
.
Cvičenie 3
1. Vytvorte očíslovaný zoznam pod nadpisom „Projekty domov“.
2. Vytvorte zoznam s odrážkami pod nadpisom „Oblasti domu“. Váš kód bude vyzerať takto (obrázok 12).
Obrázok 12
3. Zobrazte stránku v prehliadači.
Zoznamy môžu byť vnorené do seba pomocou rôznych značiek.
Príklad vnoreného zoznamu je znázornený na obr. 13
Cvičenie 4
Obrázok 13. Príklad vnoreného zoznamu
Štýly písma
Tag … - umožňuje zobraziť text tučným písmom.
Tag … - umožňuje zobraziť text kurzívou.
Tag … - zobrazí podčiarknutý text.
Napríklad:
V tomto prípade sa zobrazí text tučná kurzíva , ale nie je podčiarknuté.
A v tomto prípade bude text napísaný tučnou podčiarknutou kurzívou .
Dolné a horné indexy
Tag < sub> A sub> umožňuje znížiť text o pol riadka pod normálny text.
Tag < súp> A súp> umožňuje zvýšiť text o pol riadka nad normálny text. Text umiestnený medzi týmito značkami sa zobrazí menším písmom ako bežný text.
Cvičenie 5
1. Naformátujte názov myhouse.ru tučným písmom v prvom odseku (obrázok 14).
Obrázok 14
2. Formulujte frázu „Viac ako 95 % projektov“ podčiarknutou kurzívou v druhom odseku (obrázok 15).
Obrázok 15
3. Ak sa používajú štvorcové metre, naformátujte horné indexy (obrázok 16).
Obrázok 16
4. Uložte súbor. Zobraziť cez prehliadač. Webová stránka by mala vyzerať takto (obrázok 17).
Obrázok 17
3. Vkladanie obrázkov
V našom článku Ako vytvoriť stránku HTML sa pozrieme na to, ako umiestniť obrázky na webovú stránku.
Značka sa používa na vkladanie obrázkov .
Povinný atribút pre túto značku je src(z angličtiny SouRCe - zdroj). Určuje cestu k grafický súbor, ktorého obrázok by sa mal zobraziť na webovej stránke.
Ak chcete vložiť obrázok, použite príkaz 
Napríklad: "
obrázok1.jpg"
alt="Obrázok" />
!}
Atribút alt je potrebný na to, aby pri prezeraní webovej stránky v režime vypnutých obrázkov bol namiesto chýbajúceho obrázka nápis, ktorý je napísaný v atribúte alt. Odporúča sa tiež vždy používať alternatívne texty, pretože vyhľadávače ich analyzujú ako kľúčové slová pri vyhľadávaní obrázkov.
Grafické súbory môžu byť vo formáte jpg, gif, png a vždy vo farebnom modeliRGB.
Cvičenie 6
1. Za zoznam oblastí domu vložte na webovú stránku obrázky projektov chaty projektu_1.jpg A projektu_2.jpg z priečinka CD/html_css_1 . Najprv skopírujte tieto dva obrázky do priečinka, kde sa nachádza súbor main.html. Kód na vloženie obrázka bude vyzerať takto (obrázok 18).
Obrázok 18
2. Zobrazte výsledok v prehliadači (obrázok 19).
Obrázok 19
V podstate princíp používania značiekHTMLby malo byť jasné. Používajú sa podľa rovnakého princípu: ak je štítok kontajner, potom existuje otvárací a uzatvárací štítok. Ak je značka jednoduchá, potom neexistuje žiadna záverečná značka; v tomto prípade sa pravá lomka napíše pred uzatváraciu lomenú zátvorku, napr.< br/>. Či je značka kontajnerová alebo jednoduchá, vždy sa môžete pozrieť do špecifikáciehtml401_ru.chm v sekcii „prvky“.
4. Adresovanie v rámci lokality
V našej prvej lekcii Ako vytvoriť stránku HTML preskúmame koncepty adresovania v HTML.
Zvážme možnosti adresovania, keď potrebujete umiestniť obrázky do súboru html, ktorý sa môže nachádzať v rôznych priečinkoch lokality.
Existujú dva typy adresovania:
Absolútna adresnosť (pomocou názvov jednotiek počítača) nepoužité(Obrázok 20)
Obrázok 20
Použité relatívne adresovanie - adresovanie v rámci dokumentu alebo súboru dokumentov na jednom serveri. Ak chcete odkazovať na súbor v rámci lokality, musíte prehliadaču povedať, ktorou cestou sa má dostať k požadovanému súboru.
|
Príklad 1 Obrázok sa nachádza v rovnakom priečinku ako dokument HTML (obrázok 21). To znamená, že obrázok a súbor HTML sú na rovnakej úrovni systém súborov a HTML dokument môže okamžite pripojiť obrázok. V tomto prípade bude vloženie obrázka na webovú stránku vyzerať takto.
Obrázok 21 Praktická úloha7 Implementujte príklad 1 (vytvorte priečinok, súbor doc.html, urobte ľubovoľný obrázok). Obrázok |
|
Príklad 2 Obrázok obr. jpg je v priečinku priečinok_1 . HTML dokument sa nachádza mimo folder_1. Tie. V súborovom systéme lokality je HTML dokument umiestnený o jednu úroveň vyššie ako obrázok (obrázok 22). Musíte zadať priečinok folder_1 a potom priložiť obrázok
Obrázok 22 Praktická úloha8 Implementujte príklad 2 (vytvorte priečinok, súbor doc.html, urobte ľubovoľný obrázok). Obrázok musí byť vložený na webovú stránku doc.html. |
|
Príklad 3 Obrázok obr. jpg je v priečinku priečinok_1 , ktorý zase leží v priečinku priečinok_2 . Dokument HTML sa nachádza mimo týchto priečinkov (obrázok 23). HTML dokument je teda o dve úrovne vyššie ako obrázok. Potrebné:
Obrázok 23 Praktická úloha9 Implementujte príklad 3 (vytvorte priečinky, súbor doc.html, urobte ľubovoľný obrázok). Obrázok musí byť vložený na webovú stránku doc.html. |
|
Príklad 4 priečinok_1 . Obrázok sa nachádza mimo zložky folder_1. Tie. HTML dokument je umiestnený o jednu úroveň nižšie ako obrázok (obrázok 24). Musíte opustiť zložku_1 a potom priložiť obrázok. Opustenie priečinka naznačuje konštrukcia ../ (dve bodky a lomka doprava).
Obrázok 24 Praktická úloha10 Implementujte príklad 4 (vytvorte priečinok, súbor doc.html, urobte ľubovoľný obrázok). Obrázok musí byť vložený na webovú stránku doc.html. |
|
Príklad 5 Dokument HTML sa nachádza v priečinku priečinok_1 , ktorý sa zase nachádza v priečinku priečinok_2 . Obrázok sa nachádza mimo týchto priečinkov. HTML dokument je teda umiestnený o dve úrovne nižšie ako obrázok (obrázok 25). Potrebné: Keďže musíte skončiť dvakrát, dizajn ../ dvakrát opakovať.
Obrázok 25 Cvičenie 11 Implementujte príklad 5 (vytvorte priečinky, súbor doc.html, urobte ľubovoľný obrázok). Obrázok musí byť vložený na webovú stránku doc.html. |
|
Príklad 6 (Obrázok 26) Potrebné:
Obrázok 26 Cvičenie 12 Implementujte príklad 6 (vytvorte priečinky, súbor doc.html, urobte ľubovoľný obrázok). Obrázok musí byť vložený na webovú stránku doc.html. |
|
Príklad 7 (Obrázok 27) Potrebné: Vzhľadom k tomu, že musíte odísť trikrát, dizajn ../ opakovať trikrát.
Obrázok 27 Cvičenie 13 Implementujte príklad 7 (vytvorte priečinky, súbor doc.html, urobte ľubovoľný obrázok). Obrázok musí byť vložený na webovú stránku doc.html. Preto, bez ohľadu na to, koľkokrát potrebujete vystúpiť, umiestnime konštrukciu ../ toľkokrát, a ak vstúpime, uvedieme názvy priečinkov, s ktorými sa na ceste stretneme. |
/
>
/
>
/
>
Cvičenie 14
1. Vytvorte html dokument a vložte doň obrázok tak, aby cesta k obrázku bola nasledovná.
"
../../../../../../folder_1/folder_2/folder_3/image.jpg" /
>
2. Vypracujte si vlastný príklad vloženia obrázku do html dokumentu tak, aby obsahoval a VÝCHOD z priečinkov a vchod do priečinkov. Príklad by sa mal líšiť od všetkých vyššie uvedených príkladov.
Po dokončení tejto témy by ste mali mať vytvorené nasledujúce súbory:
Bolo vynájdených veľa jazykov, ale HTML je jedným zo špeciálnych a najpopulárnejších jazykov. S tým sú spojené mnohé ďalšie kľúčové pokroky v programovaní. Veľa sa stane možným, keď myseľ vývojára pozná značkovací jazyk - HyperText Markup Language (HTML).
V HTML v podstate nie je nič zložité a za pár minút si HTML stránku v Poznámkovom bloku dokáže vytvoriť každý, kto má ďaleko od programovania a internetu. Príklad hodný pozornosti, jednoduchosť, ktorá je skutočne dostupná každému.
všeobecný popis
HTML súbor je jedna stránka webu, aj keď sa o tom dá polemizovať, ale to, že jeden súbor tvorí jednu stránku, je na začiatok jasné.
Súbor HTML začína hlavičkou DOCTYPE, ktorá označuje, že typ súboru je HTML. Všetky prvky stránky (tagy) sú uvedené v lomených zátvorkách. Každý pár ("<» и «>") obsahuje jednu značku HTML. HTML tagy sa zvyčajne dodávajú v pároch, to znamená, že pre každý „tag“ existuje „/tag“. Obe sú uzavreté v uhlových zátvorkách. Existujú jednotlivé značky, z ktorých najobľúbenejšie je „br/“ - prechod na ďalší riadok.
Najväčšou značkou v súbore je samotný HTML, ktorý obsahuje iba dve značky: HEAD a BODY. V prvom sú vytvorené rôzne popisy, sú uvedené odkazy na ďalšie súbory potrebné na stránke, ktoré môžu byť prítomné PHP skripty a JavaScript. Druhý zaznamenáva obsah stránky. Aj vo forme značiek a skriptov.
Jednoduchá HTML stránka
Príklad vytvorenia takejto stránky je uvedený nižšie v článku. Pozrime sa na to pozorne.
Sekcia HEAD
Hlavný účel - všeobecný popis stránky a všeobecné skriptá, hoci to druhé je dosť relatívny pojem. Zvyčajne sa tu pripisuje významná dôležitosť iba dvom veciam:
Pre zobrazenie obsahu stránky je obsah tejto sekcie dôležitý len nepriamo, pretože naznačuje: niekde v iných súboroch sú pravidlá CSS pre značky a skripty v iných jazykoch.
Stránka HTML má stránku, ktorá sa zobrazí, keď návštevník prejde myšou na kartu, kde je stránka otvorená. Toto dôležitý bod, pretože robí stránku výrazne prezentovateľnejšou, ľahšie povedané, podpísanou čitateľným textom.
META tagy sú dôležité v internetovom programovaní vo všeobecnosti, ale keď potrebujete vytvoriť HTML stránku v programe Poznámkový blok, nie je vhodné zahltiť príklad zbytočnými konštrukciami.
Ak je potrebné pristúpiť k skriptovaniu po zistení znalosti HTML, potom by sa mali okamžite riešiť kaskádové štýly. Súbory CSS obsahujú najmä pravidlá dizajnu HTML tagy.
Sekcia BODY
Ukážková stránka HTML je v skutočnosti sekcia BODY. Toto je miesto, kde sú obsiahnuté všetky informácie, celý obsah stránky. Všetky informácie sú prezentované vo forme značiek a skriptov, napríklad vkladanie kódu JavaScript alebo časti programov PHP.
Je dôležité pochopiť, že príklad webovej stránky HTML v prehliadači a rovnaký príklad v textovom editore, najmä v programe Poznámkový blok, nie sú to isté. V prvom prípade máme pripravený HTML text, v ktorom sa vykonajú všetky skripty. Napríklad PHP odpracovalo svoju časť a namiesto svojho kódu vytvorilo potrebné značky na správnych miestach. JavaScript tiež splnil svoje poslanie, aj keď o ňom treba diskutovať samostatne.
HTML sú značky, nie skripty. V konečnom dôsledku sa v prehliadači zobrazuje iba obsah stránky, iba jej značky. Nie je tam žiadny PHP kód.
JavaScript je v osobitnom postavení, jeho úlohou je obsluhovať stránku nielen v momente načítania (preťaženia), ale aj v momentoch, keď je stránka v prehliadači návštevníka a on ju študuje.
Jednoduchý príklad (iba časť BODY) je uvedený nižšie.
A v prehliadači návštevníka to vyzerá takto:
Kód nešpecifikoval, ako majú vyzerať prvky, ktoré prehliadač zobrazí. Všetky viditeľné štýly sú v pravidlách CSS. V tomto prípade v súbore Mcss/scPhpWordRW.css, ktorý bol prepojený (pozri úplne prvý príklad stránky HTML).
Na rozdiel od HTML je téma CSS jednoduchšia, pravidlá sú veľmi dostupné a ich počet je malý, keď príklad vytvorenia HTML stránky nevyžaduje nič iné ako poznámkový blok. Všetko je veľmi prístupné pre okamžité zvládnutie:
Toto ukazuje, ako jednoducho je opísaná značka scLogo_vDoc a tento popis je taký, že v normálnom stave značka zobrazuje obrázok vDoc-logo.png a keď nad ňou prejdete myšou, zobrazí sa vDoc-logo-h.png.
Štruktúra HTML popisov
Jazyk nenaznačuje žiadnu štruktúru a pojem syntax je tu veľmi relatívny. Neexistujú žiadne premenné, ale existuje veľa možností. Základným základom hypertextu je, že existuje prvok (tag), ktorý má nevyhnutne názov.
Názov sa v prípade párového štítku skladá zo samotného názvu (tagName) a lomených zátvoriek („<» + tagName +«>"), Ak hovoríme o o začiatku značky a "„ak je zaznamenaný jeho koniec.
Príklad HTML stránky s popisom atribútov sa nachádza nižšie v texte.
Značka môže mať atribúty, v takom prípade sú umiestnené s medzerou za názvom značky pred koncovou hranatou zátvorkou ">". Atribúty, ak ich tag má, sa zapisujú iba na začiatok tagu. Za obsah značky sa považuje to, čo je medzi začiatkom značky a jej koncom.
HTML vám umožňuje opísať blokové a vložené prvky. Prvé zaberajú určitú oblasť v okne prehliadača, môžu byť umiestnené absolútne, to znamená na požadovanom mieste v oblasti zobrazenia stránky HTML, a majú špecifickú veľkosť.
Vložené prvky sa vo všeobecnosti zobrazujú v jednom vlákne, to znamená, že ako boli špecifikované v súbore stránky, zobrazujú sa na obrazovke. Zobrazenie celkového toku je možné ovplyvniť pri načítaní stránky. Umiestnenie, viditeľnosť a ďalšie vlastnosti prvkov bloku je možné kedykoľvek ovplyvniť prostredníctvom kódu JavaScript.
Okrem jednoduchých prvkov ponúka HTML popis tabuliek a formulárov. Tieto prvky sú veľmi žiadané pri „každodennom vytváraní webových stránok“.
Popis stola: visačky TABLE, TR, TD
Pomocou značky TABLE môžete vytvoriť tabuľku, určiť určitý počet riadkov TR a určitý počet buniek TD v každom riadku. Na rozdiel od obvyklej tabuľkovej organizácie je tabuľková organizácia kvôli zvláštnostiam HTML značiek obmedzená na túto deklaráciu, preto, ak chce vývojár mať obdĺžnikovú tabuľku, v ktorej je počet stĺpcov vo všetkých riadkoch rovnaký, musí sledovať to sám.
Základnou pozíciou HTML je robiť všetko, čo je špecifikované, ale nič, čo nie je pochopené. V niektorých prípadoch nie je počet stĺpcov v každom riadku tabuľky taký dôležitý, ale ak potrebujete zlúčiť bunky vertikálne alebo horizontálne, budete musieť všetko veľmi starostlivo počítať.
Príklad HTML stránky popisujúcej jednoduchú tabuľku je prehľadne zobrazený v článku.
Tu je zobrazená tabuľka troch riadkov po troch stĺpcoch a v prvom riadku bola namiesto značky TD použitá značka TH - hlavička stĺpca. Tieto dva tagy sa nijako zvlášť nelíšia, ale je celkom možné použiť prvý na rozlíšenie prvého riadku tabuľky a v CSS môžete k TH pripojiť svoj vlastný štýl, ktorý ho odlišuje od ostatných TD.
Popis formulára: tagy FORM, INPUT
Formuláre sú najobľúbenejšou súčasťou značiek HTML. Pomocou formulárov môžete prenášať informácie. V skutočnosti je stránka sama o sebe výstupom informácie, ale forma je jej vstupom.
Príklad HTML stránky popisujúcej jednoduchý formulár:
Možností využitia formulárov je oveľa viac, no toto sú hlavné možnosti. Môžete špecifikovať vstupné polia, priradiť im dizajn a manipulátory na analýzu údajov zadaných používateľom. Môžete zadať skryté polia a preniesť informácie o pozadí zo stránky. Môžete určiť tlačidlá na prenos informácií, kliknutím na ktoré sa spustí proces prenosu informácií.
Pomocou HTML
Ovládať hypertextový jazyk je práca v akejkoľvek špecializácii v oblasti programovania na internete, no ak potrebujete písať programy v PHP alebo JavaScripte, tak musíte dokonale ovládať HTML + CSS.
Jazyk PHP bol uvedený v predchádzajúcom príklade. PHP beží na serveri, takže stránka s týmto formulárom preletela zo servera do prehliadača s vyplnenými poliami. Najmä funkcia TestOnBlur uvedená v tagu INPUT (onblur event handler) dostala všetky parametre ako textové polia.
V prehliadači beží JavaScript a aby tlačidlo na odosielanie údajov späť na server fungovalo správne, teda konštrukcia: onclick=jQuery("#to").val("košík"), musíte mať predstavu nielen o tom, čo je jQuery, ale aj o tom, čo je #to, val, cart. Presnejšie, musíte poznať základné HTML tagy a všeobecné pravidlá aplikovaním štýlov CSS na ne.
To je dosť na rýchle zvýšenie kvalifikácie v akejkoľvek špecializácii v oblasti programovania na internete.
Dobrý deň, milí čitatelia blogu. S týmto článkom sa začneme učiť základy jazyk HTML.
Pravdepodobne už viete, že hlavným jazykom internetu je hypertextový značkovací jazyk HTML (HyperText Markup Language). V tomto článku sa naučíme základné pojmy HTML a naučíme sa vytvárať jednoduché WEB stránky.
Začnime tým najdôležitejším, pozrime sa, ako to funguje Celosvetový web— Internet. Ak chcete vytvoriť webové stránky, vytvorte súbory napísané v HTML a umiestnite ich na webový server. Potom môže vaše webové stránky nájsť každý prehliadač nainštalovaný na zariadení s prístupom na internet, či už je to počítač, telefón alebo tablet.
webový server- toto je obyčajný počítač so špeciálnym softvér s prístupom na internet. Neustále počúva požiadavky prehliadačov na webové stránky, obrázky, audio a video súbory. Po prijatí žiadosti o jeden z týchto zdrojov ho server vyhľadá a odošle do prehliadača.
Prehliadač- Toto špeciálny program, určený napríklad na prehliadanie webových stránok internet Explorer. Pomocou prehliadača prehliadate webové stránky kliknutím na odkazy. Každé takéto kliknutie spôsobí, že prehliadač požiada webový server o HTML stránku, dostane odpoveď a zobrazí stránku vo svojom okne. Keď sa stránka zobrazí, jazyk HTML začne fungovať a povie prehliadaču všetko o štruktúre a obsahu webovej stránky. Použitie príkazov - značky, HTML hovorí prehliadaču, kde začínajú odseky textu, aká časť textu je nadpis a kam vložiť tabuľky a dokonca aj obrázky. A tagy sú napríklad slová v lomených zátvorkách
,
