Určite sa každý nezamestnaný používateľ internetu stretol so situáciou, že pri vstupe na krásnu webovú stránku rozmýšľate, čo by sa stalo, keby ste si takúto webstránku vytvorili, pretože mať dobrý web vám prinesie peniaze a možno aj slávu. Máte túžbu a túžbu po tom, okamžite zadáte do vyhľadávača "Ako vytvoriť web?" Takmer všade vám povedia, že na vytvorenie dobrej webstránky sa musíte naučiť HTML. Ak ste v tomto biznise noví, pravdepodobne budete chcieť vedieť, čo to je.
Stručne vám vysvetlím, čo je HTML vlastnými, zrozumiteľnejšími slovami ako na Wikipédii.
HTML je hlavný webový programovací jazyk, základ všetkých základov tvorby webových stránok. Takmer všetky webové stránky sú písané v tomto jazyku. Veľkosť textu na stránke, veľkosť a umiestnenie obrázka, pozadie stránky atď. toto všetko je napísané v tomto jazyku. HTML je to, s čím sa webové stránky zrodili, čo znamená, že je to materinský jazyk takmer všetkých webových stránok. Napríklad, ak ste Číňan, potom hovoríte po čínsky, ak ste Ukrajinec, potom hovoríte po ukrajinsky, ale ak ste webová stránka, hovoríte HTML. Každý správny webový programátor pozná HTML takmer naspamäť a je s ním dobrý.
Tento jazyk je zrozumiteľný a ľahko sa učí, ale ako všetky jazyky tohto sveta, aby ste ním dobre hovorili, vyžaduje si prax. To znamená, že aj keď sa to úplne naučíte, nebudete vedieť urobiť dobrý web hneď, potrebujete čas, trpezlivosť a prax. Zvyčajne začiatočníci na začiatku svojej cesty webového programátora jednoducho nemajú trpezlivosť naučiť sa všetko a precvičovať si to krok za krokom. Tí, ktorí prešli testom, všetko sa naučili, získali skúsenosti vo svojej praxi pri učení jazyka a nevzdali to – čaká dobrá odmena.
Existuje niekoľko webových programovacích jazykov. Na vytvorenie jednoduchej webovej stránky potrebujete iba jeden jazyk, hlavný, a to HTML. Na vybudovanie komplexného a veľkého webu budete potrebovať pomocné jazyky, takpovediac sa o nich dozviete už počas alebo po štúdiu jazyka HTML. Ak sa rozhodnete začať cestu webového programátora, môžete sa začať učiť HTML práve teraz. Pamätajte na najdôležitejšiu vec - ak to vezmete, nevzdávajte sa a nevzdávajte sa, pretože to ničí väčšinu programátorov.
Tieto štyri písmená HTML znamenajú niekoľko slov, konkrétne Hyper Text Mark-up Language, čo v ruštine znie ako hypertextový značkovací jazyk.
Prečo je potrebný HTML?Prečo je tento jazyk potrebný? Prečo ho učiť? Prečo nie nejaký iný? Alebo načo sa to ešte učiť, ak existuje kopa iných programov na jednoduché vytváranie webstránky?
Ako som už povedal, HTML je hlavný webový programovací jazyk. Nie je to jediný jazyk, ktorý sa používa na vytváranie webových stránok, ale je to hlavný nástroj, ktorý vedie ďalšie jazyky, takže je nevyhnutné sa ho naučiť. Aj keď používate program na vytváranie webových stránok alebo hotové šablóny, HTML vám výrazne uľahčí život. Navyše, ak chcete v budúcnosti vytvoriť dobrú, veľkú a profesionálnu webovú stránku, nepomôžu vám programy a šablóny, všetko začne od nuly a pomôže vám s tým vaša znalosť tohto jazyka.
Ako používať HTMLPoužívanie tohto jazyka je veľmi jednoduché a je prístupné každému. Dá sa dokonca použiť v bežnom poznámkovom bloku (.txt). Na uľahčenie používania existujú špeciálne programy, napríklad Notepad++. Viac podrobností o používaní tohto jazyka bude popísané v lekciách HTML.
Ako sa naučiť HTMLAk sa chcete naučiť HTML, musíte mať veľa trpezlivosti, aby ste sa s týmto jazykom oboznámili. Je ľahké sa to naučiť, ale hlavné je získať skúsenosti a prax, čím viac praxe máte, tým ste lepší webový programátor.
Každá stránka má iný vzhľad a funkčnosť, ale s čím to súvisí a v akom jazyku je stránka napísaná? Na to všetko sa používajú kaskádové štýly a HTML. Kód tohto jazyka si môžete pozrieť sami, ak si prezriete objekty v prehliadači. Konkrétne o tom, čo je HTML, si povieme v tomto článku.
Náš článok je zameraný hlavne na začiatočníkov, takže dúfame, že pravidelní čitatelia blogu pochopia!
Príspevok bude rozdelený do nasledujúcich bodov:
Čo je HTML stránkaZnačkovací jazyk nazývaný HTML sa používa na navrhovanie všetkých prvkov stránky vrátane tabuliek, obrázkov a textu. S kódom sa môžete zoznámiť a pokúsiť sa mu porozumieť, ak používate akýkoľvek moderný prehliadač, stačí kliknúť pravým tlačidlom myši na stránku a v ponuke kliknúť na riadok „zdrojový kód stránky“ alebo „HTML kód“. Potom uvidíte niečo ako editor, v ktorom je veľa nezrozumiteľných nápisov a symbolov, toto je kód jazyka HTML.
Každý dokument WWW má formátovaný a krásne navrhnutý text, ako aj hypertextové odkazy a obrázky, ktoré vyberie vlastník stránky. Aby mohli programátori pracovať s týmito prvkami, vytvorili jazyk s názvom HTML (Hyper Text Markup Language), čo v preklade znamená hypertextový značkovací jazyk. Každý prehliadač funguje a zobrazuje HTML inak, preto sa v rôznych prehliadačoch zobrazuje inak, najmä v starších verziách Internet Explorera.
Všetky HTML dokumenty sú podobné – ide o štandardný textový súbor, ktorý má značkovacie značky daného jazyka spolu s textami, ktoré budú návštevníci stránky čítať. Stránka sa vytvára pomocou značiek a práve tie číta prehliadač pri jej načítaní. Definovaním značiek a ich dizajnu môžete umiestniť článok alebo iný materiál na konkrétne miesto na stránke, pridať grafické súbory a fotografie, ako aj hypertextové odkazy na iné stránky webu. Súbor HTML spočiatku nie je webový dokument, stane sa ním až po prečítaní prehliadačom.
Samozrejme, štandardný HTML kód má svoje nedostatky a nevýhody. Budete sa musieť usilovne snažiť usporiadať odseky s textom na stránke, pretože na označovanie a všetko ostatné musíte zaregistrovať určité vlastnosti pre celý text a pre každý jednotlivý odsek. Ak má vaša stránka 50 stránok a každá má 10 až 20 odsekov, formátovanie textu a vkladanie rovnakých značiek zakaždým zaberie veľmi dlho. To nielen unavuje vlastníka stránky, ale negatívne ovplyvňuje aj váhu stránok. Práve z tohto dôvodu neskôr vznikli kaskádové štýly, stručne sa im hovorí CSS, čo znamená Cascading Style Sheets, vďaka nim rýchlo navrhnete text. Môžete priradiť jednu značku a dať jej určité vlastnosti, ako je farba textu, veľkosť, písmo atď., a potom ju použiť na odseky. V tomto prípade je súbor so štýlom uložený samostatne, možno ho nahrať na jednu stránku alebo niekoľko naraz. Ďalej sú hlavné prvky stránky napísané v HTML a vloží sa text a potom sa pripojí CSS a všetok text získa požadovaný dizajn. Tým sa znižuje aj váha strán, čo je veľmi dôležité. 
Použitie CSS je vhodné, ak má web veľa stránok, ktoré budú mať rovnaký dizajn. Môžete nastaviť určité formátovanie textu pre všetky odseky, ak do dokumentu napíšete niekoľko riadkov pomocou kódu CSS. Pri vytváraní webovej stránky dizajnéri rozloženia vytvoria hlavné rozloženie v jazyku HTML na základe rozloženia vytvoreného vo Photoshope. Ale potom stránka vyzerá nedokončená, musíte vytvoriť atraktívny vzhľad, a to sa dosiahne pomocou kaskádových štýlov. Nie je ťažké sa to naučiť, ak máte veľa voľného času, keďže celkový vzhľad všetkých stránok je približne rovnaký, môžete mať jedno rozloženie s niekoľkými blokmi a „prispôsobiť“ mu ostatné stránky. Kaskádové šablóny štýlov sú spravidla oveľa zložitejšie ako CSS; je ešte ťažšie usporiadať web pomocou blokov namiesto tabuliek. Okrem toho sa v úvodných fázach môžete stretnúť s problémom, akým je odlišné zobrazenie stránky v prehliadačoch. Práve preto, aby sa nestrácal čas a nezarábali na weboch, vznikli CMS - hotové layouty webstránok, ktoré môžu byť bezplatné alebo platené a majú špecifický systém správy.
Čo je HTML5. Rozdiely a výhodyNový štandard HTML5 pomáha majiteľom webových stránok a zbavuje ich povinnosti používať formát Adobe Flash, ale aj iné programy. Vďaka tomuto štandardu môžete zmeniť zobrazovanie textu na stránkach a zjednodušiť zadávanie informácií pri vypĺňaní elektronických formulárov. Ak rozdelíme všetky inovácie tohto jazyka, môžeme zdôrazniť nasledujúce body:
Ak máte nejaké otázky, napíšte ich do komentárov, radi na ne odpovieme!
Základy HTML pre začiatočníkov, čo by teraz mal vedieť každý začínajúci webmaster alebo bloger. Ak sa chcete naučiť vytvárať základné webstránky, rozumieť samotnému kódu, vedieť, čo sa za tým skrýva a čo by malo ísť, bez znalosti základov jazyka HTML to jednoducho nejde. Na svojom blogu budem mať celý reťazec článkov, ktoré sa tejto téme budem venovať od A po Z, popíšem každý tag, ktorý sa v dokumente nachádza, čo znamená a ako ho správne používať.
Základy HTMLAk nepoznáte najzákladnejšie veci, vaša cesta je uzavretá. Verím, že každý človek, ktorý sa rozhodne pre vývoj a tvorbu webových stránok, by mal poznať a rozumieť základom, z čoho sa samotná stránka skladá, ako funguje a čo sa deje v samotnom kóde.
Samozrejme, existuje pomerne veľa programovacích jazykov, všetky sú svojím spôsobom zložité, ale sú niektoré, ktoré musíte nevyhnutne poznať. Ak chcete krásne navrhnúť list, ktorý sa má poslať poštou, máte svoju vlastnú skupinu VKontakte, skupinu na iných sociálnych sieťach, rovnaký kanál YouTube, musíte si pohrať s kódom na ktoromkoľvek z motorov stránok, stačí poznať základné pojmy.
Uviedol som len niekoľko príkladov, v skutočnosti sa tieto poznatky na internete využívajú čoraz častejšie. Som viac praktik ako teoretik, preto vám v mojich článkoch v tejto sekcii ukážem moje príklady, ako a čo som robil, krok za krokom. Zverejním vzorové stránky aj celé lokality.
Html dokument je najjednoduchší textový dokument, značkovací jazyk, s ktorým sa na internete stretávate každý deň. Tagy popisujú štruktúru dokumentu. Značky sú formátované ako uhlové< >zátvorky, do ktorých je napísaný názov značky. Prehliadač sa pozrie na štruktúru dokumentu, zostaví ho a zobrazí podľa jeho pokynov na vašom monitore, ak ste, samozrejme, urobili všetko správne.
Celý tento proces začína ešte predtým, než uvidíte hotový obrázok. Prehliadače spracovávajú dokument postupne, od začiatku do konca. Vrátane všetkého, čo má byť na stránke. Tabuľky, obrázky, skripty atď., okrem štýlov CSS.
Základy pre začiatočníkovČo je html – ak sa pozriete na to, čo píše Wikipedia – (HyperText Markup Language) hypertextový značkovací jazyk pre dokumenty. Väčšina stránok na internete obsahuje označenie stránok v tomto jazyku. Tento jazyk interpretujú prehliadače a výsledný formátovaný text sa zobrazí na monitore vášho počítača alebo mobilnom zariadení.
Tento jazyk je vo svojej podstate veľmi jednoduchý a prístupný na učenie. Každý sa môže naučiť a pochopiť jeho základy. Na používanie takéhoto jazyka potrebujete poznať a používať deskriptory, ktoré sa tiež nazývajú tagy. Dokument sa vytvára pomocou značiek.
Z čoho by mala pozostávať štruktúra dokumentu, aké tagy by mali byť prítomné. Pozrime sa na všetko na jednom malom príklade. Napísal som nejaký text v MS Office a ukázal som ho na tejto snímke obrazovky.
Ak chcete tento text zobraziť v prehliadači rovnakým spôsobom, ako bol napísaný v dokumente, musíte k nemu pridať označenie stránky, ktoré obsahuje niektoré značky. Najprv si ich pozrite, potom každého popíšem, kto je za čo zodpovedný.
Vitajte na mojom blogu, teraz absolvujete lekciu o základoch HTML. Ak sa vám tento článok páčil, môžete sa prihlásiť na odber tohto blogu a dostávať nové články do vašej e-mailovej schránky.
Blog Evgenyho Nesmelova! web Základy html a css pre začiatočníkovZ akých značiek pozostáva akýkoľvek html dokument, čo obsahuje a kde by sa to malo všetko zapísať?
< html > < body > < h2 >< / h2 > < p >Vitajte na mojom blogu, teraz si prečítajte návod na základy HTML. Ak sa vám tento článok páčil, môžete sa prihlásiť na odber tohto blogu a dostávať nové články do vašej e-mailovej schránky.< / p > < h2 >Blog Evgenia Nesmelovovej! Nesmelov. ru Základy HTML a CSS pre začiatočníkov< / h2 > < / body > < / html > |
Každý kód pozostáva zo znakov, ktoré sú umiestnené v lomených zátvorkách. Všetky tieto sa nazývajú prvky. Všetky prvky sa zvyčajne skladajú z dvoch značiek, otváracej a zatváracej. Odporúčam vám, aby ste si najprv pozorne prezreli značky; ak niektorý z nich vynecháte a nezatvoríte ho, budete musieť opraviť veľké časti kódu, aby ste našli chybu.
Boli prípady, keď to trvalo viac ako jeden deň, človek kontaktuje a žiada o pomoc, nevie nájsť chybu na svojej stránke, preto si vždy veľmi pozorne prezrite, čo a kam píšete. Poďme sa teraz pomocou tohto príkladu pozrieť na každý prvok kódu, čo je v ňom napísané, čo to znamená a čo sa nakoniec stane.
Väčšina štítkov je párových, čo zahŕňa otvárací štítok a uzatvárací štítok. Okrem takýchto značiek existujú aj samostatné značky. Značky sa môžu spájať s ostatnými, a tak sa do seba vnárať. Zobrazte napríklad text tučným písmom a kurzívou naraz.
Text
< strong > < i >Text< / strong > < / i > |
Ešte raz pripomínam, že treba dodržiavať pravidlá, ktoré sú v dokumente prítomné. Takto prehliadač chápe, čo je na stránke, jej postupnosť, obsah atď.
Značka je komponent, ktorý hovorí webovému prehliadaču, aby vykonal určitú úlohu. Napríklad prítomnosť odseku, tabuľky, formulára alebo obrázka.
Atribút – upravuje značku. Môžete napríklad zarovnať odsek na stred alebo doprava, tiež nastaviť umiestnenie obrázka na stránke atď.
VŽDY zatvorte štítky, ak ho otvoríte, nezabudnite ho zavrieť. V opačnom prípade sa vyskytne chyba a váš dokument sa na stránke nezobrazí správne. Sú aj výnimky, na ktoré netreba zabúdať.
Je zrejmé, že je potrebné pochopiť, že existuje názov dokumentu a jeho telo. Názov je všetko, čo značka obsahuje. Telo dokumentu (), telo dokumentu obsahuje celý obsah stránky. Ak je potrebné nechať časť kódu pre seba, a tým tieto značky uzavrieť do komentárov, použije sa na to značka. Všetko, čo je vo vnútri takejto značky, slúži ako komentár a prehliadače to nevnímajú.
Začnime úplne prvým. Na začiatku dokumentu som otvoril tag a na konci som ho zatvoril. Tento kód je prítomný v absolútne každom dokumente a hovorí prehliadaču, že všetko, čo je umiestnené medzi týmito značkami, je HTML kód. Je to koreň samotného dokumentu; všetko, čo sa následne nachádza za touto značkou, už nie je zahrnuté v dokumente a nie je vnímané prehliadačmi. Na samom začiatku dokumentu je štítok otvorený a na samom konci musí byť zatvorený.
Celá časť tejto značky obsahuje všetky technické informácie o dokumente. Rovnako ako predchádzajúci štítok, aj hlava musí byť na konci otvorená a zatvorená. Tieto informácie zahŕňajú názov stránky, popis, kľúčové slová vyhľadávacieho nástroja a kódovanie. O kódovaní trochu nižšie.
Obsah
< head >Obsah< / head > |
Táto značka je súčasťou hlavy a musí byť napísaná vo vnútri značky hlavy. Táto značka názvu je povinná a musí sa nachádzať v každom dokumente HTML. Okrem toho sa zobrazuje ako názov okna prehliadača. Dĺžka takejto hlavičky by nemala presiahnuť 60 znakov. Text takejto hlavičky by mal obsahovať čo najúplnejšie informácie, ktoré charakterizujú obsah stránky.
Ak ste do hlavičky napísali „Hello World“, toto je informácia, ktorá by sa mala na stránke zobrazovať a žiadna iná. Nemali by ste klamať ľudí a vyhľadávače, im sa to nepáči, a tým si veci zhoršujete. Informácie obsiahnuté v tejto značke by mali súvisieť s obsahom vašej stránky.
Po povinnej značke title nasleduje voliteľná, no rovnako dôležitá metaznačka. Táto značka je jednoduchá. Pomocou tejto značky nastavíte popis stránky (description) a jej kľúčové slová (keywords).
Okrem toho môže metaznačka obsahovať údaje o autorovi stránky a ďalšie vlastnosti metadát. Môžete zabrániť tomu, aby bola celá stránka indexovaná vyhľadávačmi. Nastavte stránku tak, aby sa automaticky obnovovala po 20 sekundách alebo po 5 sekundách, po ktorej nasledoval prechod na inú stránku.
< meta name = "robots" content = "index, follow" > < meta http - equiv = "refresh" content = "20" > < meta http - equiv = "refresh" content = "5; url=http://сайт/" > |
Takýchto meta prvkov môže byť niekoľko, keďže môžu niesť úplne iné informácie. Ostatní používatelia, keď otvoria stránku v prehliadači, nevidia všetky vaše popisy, to všetko zostáva skryté.
Značka štýlu sa dá použiť aj na nastavenie štýlov na stránke. Ak používate veľa rôznych štýlov css, je vhodné ich nastaviť v samostatnom súbore. Ak ich potrebujete špecifikovať niekoľko, toto všetko je možné špecifikovať priamo v html dokumente.
.base ( šírka: 100px; farba pozadia: #000; výška: 150px; farba: #fff; )
< style type = "text/css" > základňa( šírka: 100px; farba pozadia : #000; výška: 150px; farba : #fff; |
Alebo pridajte štýly špecificky do jednej značky; na to musíte pridať prvok štýlu do samotnej značky. Táto značka musí byť použitá v kontajneri, ktorý nastavuje štýly pre stránku. Môžete použiť niekoľko takýchto značiek, nebude to chyba.
Značka odkazu, ktorá je trochu podobná predchádzajúcej značke, vám umožňuje nastaviť štýly pre dokument, ktoré sú v inom súbore. Inými slovami, k existujúcemu dokumentu môžete pripojiť kompletnú šablónu so štýlmi css, ktorá pozostáva z mnohých vlastností. Zmenšíte tak veľkosť dokumentu, ktorý sa v konečnom dôsledku načíta a otvorí rýchlejšie na počítači alebo mobilnom zariadení s nízkou rýchlosťou internetu.
Môžete pripojiť viac ako jeden súbor, neexistujú žiadne obmedzenia. Takúto značku nie je potrebné zatvárať. Ak je všetko vykonané správne, do dokumentu sa načítajú konkrétne štýly zo samostatného súboru. Tento tag je možné pridať k základom html a nezabudnúť na jeho existenciu. Výsledkom je takýto obrázok:
< link href = "css/style-lg.css" rel = "stylesheet" > < link href = "css/style-md.css" rel = "stylesheet" > < link href = "css/style-sm.css" rel = "stylesheet" > |
Pomocou značky script môžete k dokumentu pripojiť rôzne scenáre (skripty). Vyžaduje sa prítomnosť uzatváracej značky. Samotný skript môže byť umiestnený na začiatku dokumentu, vo vnútri alebo na konci.
|
Informuje prehliadač, že čokoľvek umiestnené medzi týmito značkami by sa malo objaviť v okne prehliadača. Tu sú hlavné značky, ktoré môžu byť prítomné v absolútne každom dokumente. Značka tela slúži ako hlavné telo stránky, ktoré zahŕňa celý jej obsah. Odporúča sa otvoriť túto značku a nezabudnite ju zavrieť na konci dokumentu.
Nadpisy strán h1 h2 h3Poďme ďalej, vidíme štítok, ktorý sa otvára a zatvára rovnakým spôsobom. Táto značka označuje hlavný nadpis textu, vo väčšine prípadov je pod hlavičkou H1 názov stránky. V skutočnosti existuje iba šesť údajových nadpisov. . Používajú sa aj v SEO, ale to je trochu iná téma. Určite na to zvýrazním jeden článok a uvediem ich podrobný popis, prihláste sa na odber aktualizácií blogu, aby vám nič neušlo.
Prítomnosť takýchto nadpisov v článku bude hrať dôležitú úlohu pri propagácii stránky. Ich použitie vám navyše poskytne prehľadnú štruktúru stránky, jej názov, podnadpisy, zvýraznenia, pododstavce atď. Vždy ich používajte a zavádzajte do praxe. Na mnohých CMS, ako je WordPress, pri písaní textu môžete vidieť „nadpis 1“, „nadpis 2“, „nadpis 3“ atď. Oni sú zodpovední za h1, h2 a h3.
Ak napíšete hlavný text z nového odseku, napíšete značku
Na začiatku a zatvorte ho na konci
. Označenie odseku v html je ekvivalentom vytvorenia nového odseku v dokumente MS Word. Do dokumentu som nepridal nič nové. Ale to nie je všetko, čo by malo byť prítomné v html dokumente. Pozrime sa na ďalší príklad, popis príde o niečo neskôr.HTML dokument
Tento text bude tučný, a tento je tiež kurzívou
< ! DOCTYPE html > < html > < head > < meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / > < title >HTML dokument< / title > < / head > < body > < p > < b > < / b > < / p > < / body > < / html > |
Každý dokument obsahuje prvok head a title. Prvý, ktorý nasleduje hneď po prvom tagu. Tento tag obsahuje všetky informácie o stránke, obsahuje aj prvok. Title – informácia o názve stránky, inými slovami názov stránky, jej názov. Práve v názve uvádzate správny názov stránky, podľa ktorej vás bude používateľ hľadať cez vyhľadávač, čo je veľmi dôležitý bod. Oba prvky musia byť otvorené a tiež zatvorené. Každý prvok je uzavretý znakom „/“. Výsledkom je takýto obrázok.
Nadpis a obsah stránky
| < / html > |
Ako vidíte, nie je nič zložité. Tu sú najzákladnejšie značky, ktoré by mali byť prítomné v každom html dokumente. Nezabudnite zavrieť každý z nich, inak prehliadač nebude schopný vnímať úplný obraz kódu. Toto musíte vždy vedieť a pamätať. Potom začnete vkladať text, obrázky, videá atď. Ale to už bude v iných článkoch.
Editor Notepad++
Na prácu s kódom použite program Notepad++. Je zadarmo a nie je ťažké ho nájsť na internete. Veľmi pohodlné na pochopenie akéhokoľvek kódu; tiež pohodlne zobrazuje otváracie a zatváracie značky. Podporujeme syntax viac ako 40 programovacích jazykov. Presne to, čo potrebujete, aby ste sa naučili základy html.
Poznámkový blok je vo všetkých smeroch lepší ako bežný poznámkový blok. V záujme maximálneho pohodlia, jednoduchosti a učenia musí byť tento editor najprv nainštalovaný na vašom počítači. Najdôležitejšou výhodou a pohodlím je, že editor Notepad++ zobrazuje rady pri písaní kódu, vďaka čomu je vaša práca oveľa rýchlejšia a kvalitnejšia.
prvok DOCTYPEKaždý dokument musí obsahovať aj nasledujúci prvok doctype. Prečo je to potrebné a čo by v ňom malo byť. Obyčajne tieto riadky ľudia veľmi nenadchnú, prepíšu si ich do dokumentov a pokojne pracujú. Tieto prvky informujú prehliadač, aká verzia html sa používa v dokumente, aký je popis stránky, aké kódovanie sa používa, aké kľúčové slová sú zahrnuté, kto je autorom a ako sa stránka volá.
Zvyčajne sú umiestnené na samom začiatku. Možností je viacero a všetky sa od seba líšia, napíšem jeden príklad, ktorý sa používa najčastejšie. Tento polotovar možno použiť ako hotovú šablónu. Ďalej bude jasný popis každého riadku, s tým by nemali byť žiadne problémy.
Stručne jasným jazykom o základoch html: Tento riadok hovorí prehliadaču, že tento dokument je XHTML verzie 1.0, používa sa angličtina a celý tento neporiadok sa nachádza na tejto adrese. Ďalej v metaznačke uvádzame kódovanie, ktoré sa používa. Najčastejšie sa používa Windows 1251.
Popis - dotýka sa témy SEO, jednej z troch hlavných značiek, ktoré musia byť prítomné v absolútne každom dokumente; táto značka označuje popis stránky. Čo je napísané na tejto stránke, krátky popis, maximálne dve vety. Značka kľúčových slov pokrýva aj tému SEO, táto značka je povinná. Obsahuje kľúčové slová, ktoré používatelia internetu použijú, aby vás našli prostredníctvom vyhľadávačov.
Tag title obsahuje názov samotného dokumentu, jeho názov, ktorý vidíme v prehliadači. Asi najdôležitejší tag v celom dokumente, ktorý má najväčší vplyv na propagáciu stránky. Článok o pridávaní a navrhovaní tejto značky podrobnejšie popisuje.
Čo si musíte zapamätať z tejto lekcie o základoch html:
Všetky hlavné stránky by mali byť vždy pomenované index. Takto je to akceptované a všetci sú na to zvyknutí, bez ohľadu na príponu súboru, môže to byť html alebo php. Vždy sa to tak volá.
Pozrite si video o základoch HTML od Webformyself.
Hypertextový značkovací jazyk, základné prvky a štruktúra. Toto všetko a ešte oveľa viac sa pokúsim popísať na svojom blogu. V prvom rade budú napísané užitočné informácie pre začiatočníkov, bude poskytnutý príklad kódu a bude poskytnutá možnosť stiahnuť si samotný príklad spolu s hotovou stránkou.
Za vznik HTML musí moderný svet poďakovať jednému vedcovi z Európskej rady pre jadrový výskum (Conseil Européen pour la Recherche Nucléaire, CERN). Tento vedec sa volá Timothy John Berners-Lee. Prvá verzia HTML bola vytvorená za účelom formátovania vedeckých dokumentov. Ide o štruktúrne formátovanie bez prvkov popisu farebných schém, parametrov písma a pod. HTML teda pôvodne umožňovalo zvýrazňovať nadpisy, odseky, zoznamy a podobné štrukturálne prvky v texte. Výsledok spracovania alebo „prehrávania“ HTML by nemal závisieť od technických vlastností hardvéru pre jeho vizualizáciu, keďže neobsahoval parametre tejto vizualizácie. Postupom času sa táto vlastnosť hypertextového značkovacieho jazyka čiastočne stratila.
Takže vzhľad prvých verzií HTML sa datuje do roku 1986 av roku 1991 bol HTML výrazne vylepšený a začal sa používať špeciálne na prenos hypertextu cez World Wide Web. Hovorí sa, že svetoznáma skratka HTML, čo znamená Hyper Text Markup Language, sa objavila presne začiatkom 90. rokov minulého storočia. A teraz krátky exkurz do rodokmeňa značkovacích jazykov. Prvá verzia hypertextového značkovacieho jazyka HTML bola vytvorená na základe SGML (Standard Generalized Markup Language), ktorý možno určitým spôsobom považovať za prototyp eXtensible Markup Language. Štandard XML si v dnešnej dobe získal obrovskú popularitu vďaka veľkému množstvu jeho rozšírení používaných vo výpočtovej technike. Aby som čitateľa úplne zmiatol, hneď dodám, že následne bol na základe XML vyvinutý hypertextový značkovací jazyk XHTML (Extensible Hypertext Markup Language), ktorý v podstate replikuje HTML. V dôsledku toho máme skratky SGML, HTML, XML a XHTML a musíme pochopiť, ktorý je ktorý. V skutočnosti je všetko jednoduché: SGML nie je nič iné ako súbor pravidiel, na základe ktorých je možné postaviť akýkoľvek značkovací jazyk. HTML je jedným z týchto jazykov - aplikácia SGML. Inými slovami, SGML definuje, ako by mali vyzerať značkovacie prvky, a HTML definuje, čo presne by mali byť prvky a ako by ich mali prehliadače interpretovať. XHTML je zasa aplikáciou XML a samotné XML nie je nič iné ako zjednodušená verzia SGML. , napriek tomu, že sú si vzhľadovo veľmi podobné, majú výrazné skryté rozdiely, ktoré z veľkej časti spočívajú v princípe ich spracovania.
Teraz sa vráťme do histórie vývoja HTML. Takže až do roku 1994 sa HTML stále používal iba na štrukturálne označovanie údajov, hoci už obsahoval značky na zvýraznenie textu tučným písmom alebo kurzívou. V tom istom roku 1994 vznikla organizácia W3C (World Wide Web Consortium) - World Wide Web Consortium, na čele ktorého stojí, celkom logicky, ten istý Tim Berners-Lee a v roku 1995 bolo zverejnené odporúčanie HTML 2.0. Tvorcovia HTML už pochopili, že ich nápad sa časom vyvinie z jazyka statického textového značenia na hlavný nástroj na vytváranie dynamických internetových zdrojov. Hlavným doplnkom HTML 2.0 bol vzhľad ako súčasť jazyka formulárov so sadami užívateľských ovládacích prvkov, ktoré mali byť použité pre užívateľa na zadávanie parametrov pre HTTP požiadavky.
Po vydaní druhej verzie sa okamžite začalo pracovať na ďalšej generácii HTML. V roku 1997 bolo vydané odporúčanie HTML 3.2, ktoré doplnilo značkovací jazyk o tabuľky, rámce, obrázky a niektoré ďalšie dôležité značky. Najdôležitejším úspechom 3. verzie je však to, že sa jej autori opäť vrátili k problému vizualizácie značiek v prehliadači, pričom nezabudli, že HTML by malo označovať iba štruktúru dokumentu a nemalo by priamo obsahovať parametre pre grafické štýly pre zobrazenie prvkov v prehliadač. Výsledkom ich práce na HTML 3.2 bol vznik samostatného jazyka CSS (Cascading Style Sheets) – kaskádových štýlov, ktorých kód je teraz možné prepojiť s kódom HTML markup a tým prispôsobiť vzhľad stránky.
Vydaním verzie 4 HTML v roku 1997 pracovníci W3C zbavili svoje myšlienky tých nepotrebných prvkov, ktoré sa s príchodom CSS stali zastaranými a ohrozili myšlienku oddelenia značenia štruktúry od parametrizácie prezentácie. Ale kvôli takýmto drobnostiam by novú verziu nikto nezablokoval. Hlavným úspechom odporúčaní HTML 4.0 bol vzhľad objektového modelu stránky (Document Object Model, DOM), s prvkami ktorého bolo teraz možné manipulovať pomocou skriptovacích programovacích jazykov vykonávaných prehliadačmi. Najpopulárnejším takýmto programovacím jazykom je JavaScript. HTML plus DOM plus JavaScript sa rovná dynamickému HTML alebo jednoducho DHTML, čo znamenalo prelom vo webdizajne. Teraz môžu prvky načítanej internetovej stránky meniť svoj vzhľad v reakcii na akcie používateľa, ako aj pridávať nové a odstraňovať existujúce prvky. 24. decembra 1999 bola vydaná posledná verzia 4. verzie hypertextového značkovacieho jazyka HTML 4.01.
HTML5 zatiaľ nezískalo štatút oficiálneho odporúčania W3C, ale už teraz je jasné, že autori HTML pokračujú v práci na vývoji požiadaviek na podporu objektového modelu dokumentu a interpretáciu JavaScriptu. Hoci HTML5 dostane množstvo nových tagov, väčšina odporúčaní sa stále týka správania prehliadača v kontexte DHTML: zabudovaná bude podpora funkcií drag-and-drop, možnosť kresliť na virtuálne plátno , ovládať históriu prehliadania a zdieľať správy medzi stránkami, ukladať kontext vykonávania a oveľa viac. Dúfame, že s vydaním nových odporúčaní HTML postupne zmiznú problémy s nedostatočnou kompatibilitou medzi prehliadačmi, keď sa rovnaký kód JavaScript spúšťa v rôznych prehliadačoch odlišne. Koniec koncov, tendencia definovať požiadavky na prácu s objektovým modelom a JavaScriptom bude pokračovať a vývojári prehliadačov budú musieť (ak chcú, aby sa ich softvérové produkty používali) tieto požiadavky dodržiavať.
Vydanie HTML5 je naplánované na rok 2014. Možno dovtedy W3C vypracuje samostatné odporúčania týkajúce sa iba programovania JavaScriptu a HTML sa nakoniec opäť stane výlučne značkovacím jazykom pre štruktúru dokumentov. Napriek tomu, že dnes je len rok 2012, mnohé z nich už podporujú najpopulárnejšie prehliadače. Veľa, čo museli weboví dizajnéri predtým robiť sami (rovnaké presúvanie myšou), s vydaním HTML5 bude podporované na úrovni prehliadača a tento vývoj udalostí sa nemôže len radovať. Ostáva nám len dúfať, že trend bude pokračovať.
Internet je celosvetová sieť, ktorá združuje počítačové siete po celom svete na základe jednotných štandardných dohôd (protokolov) o spôsoboch výmeny informácií a jednotnom systéme adresovania.
K dnešnému dňu si internet získal bezprecedentnú popularitu. Podľa odborníkov internet spája viac ako 100 miliónov počítačov. Internetové služby využíva viac ako 300 miliónov ľudí v 170 krajinách.
Z funkčného hľadiska je internet:
ü lacný, rýchly spôsob komunikácie medzi predplatiteľmi na celom svete;
ü bezkonkurenčné úložisko informácií o akejkoľvek oblasti vedomostí;
ü nové perspektívne prostredie pre aktivitu.
Vplyv internetu zasahuje nielen do technologickej oblasti počítačových komunikácií, ale má aj sociálne zameranie a preniká do celej spoločnosti, keďže operačné prostriedky získavania vedomostí a elektronického obchodu sa stále viac rozširujú.
Najbežnejšou a najpopulárnejšou internetovou službou súčasnosti je WWW (World Wide Web). Informácie na WWW sú prezentované vo forme takzvaných hypertextových (alebo širšie, hypermediálnych) dokumentov, ktoré môžu obsahovať formátovaný text, grafiku, audio a video fragmenty.Hlavným znakom hypertextových dokumentov je prítomnosť aktívnych zón, ktoré sú citlivé na kliknutie myšou, aktívne môžu byť fragmenty textu, celé obrázky a ich časti, kliknutie na aktívnu zónu spôsobí stiahnutie (cieľového) dokumentu spojeného s touto zónou.
Aby ste sa naučili uverejňovať materiály na internete, musíte sa najskôr zoznámiť s hypertextovým značkovacím jazykom HTML (HyperT ext Markup L jazyk)
Základy HTMLZnačkovací jazyk pre hypertextové dokumenty HTML je súbor príkazov nazývaných tagy (z angl tag HTML tagy nájdené v texte dokumentu interpretuje prehliadač pri zobrazení dokumentu.
Prezeranie HTML dokumentov sa vykonáva pomocou programov - prehliadačov(z angličtiny prehliadač), ktoré zobrazujú dokument podľa značiek HTML a poskytujú navigáciu pomocou hypertextových odkazov. Najbežnejšie prehliadače sú Microsoft Internet Explorer od spoločnosti Microsoft Corporation a Netscape Navigator od spoločnosti Netscape Communications Corporation.
Keďže dokument HTML je textový súbor, možno ho pripraviť v jednoduchom textovom editore, akým je napríklad Poznámkový blok ( Poznámkový blok), ale je to veľmi náročné na prácu. Častejšie používajú špecializované editory určené špeciálne na prípravu HTML dokumentov, ktoré vám umožňujú vkladať značky pomocou tlačidiel na paneli nástrojov alebo príkazov ponuky a nastavovať atribúty značiek v dialógových oknách, napríklad Macromedia Dreamweaver, Microsoft FrontPage, HomeSite atď.
Dokument HTML je možné získať jeho konverziou do formátu HTML, napríklad z formátu dokumentov Microsoft Office. Treba si uvedomiť, že pri takejto transformácii sa zdrojový text HTML dokumentu ukáže ako extrémne nadbytočný a potrebuje opravu.Oveľa efektívnejšie je použiť špeciálne HTML editory.
Syntax značky HTMLHTML tag je napísaný v lomených zátvorkách (znaky) a pozostáva z názvu, za ktorým môže nasledovať zoznam atribútov (pre väčšinu tagov voliteľné). Názvy a atribúty sú anglické slová a skratky.
Značky možno rozdeliť do dvoch skupín:
Spárované značky (nazývané aj kontajnerov) majú dve zložky: otváranie (počiatočné) a zatváranie (konečné); uzatvárací komponent má rovnaký názov, ale pri písaní sa pred názvom uvádza lomka (symbol / ). Text dokumentu a ďalšie značky môžu byť umiestnené medzi otváracím a zatváracím komponentom. Fragment dokumentu, ktorý sa nachádza medzi úvodným a záverečným prvkom kontajnerovej značky, naformátuje prehliadač podľa významu značky. Napríklad text nachádzajúci sa medzi značkami sa zobrazí tučným písmom (názov značky je z angličtiny tučný). Párové značky môžu byť vnorené, ale nesmú sa prekrývať.
Nespárované značky (nazývané aj autonómny) nemajú konečnú zložku. Pri ich interpretácii sa do zobrazeného dokumentu vloží jeden alebo druhý objekt. Napríklad tag , vyskytujúce sa v texte HTML dokumentu, spôsobí vloženie grafického obrázka zo súboru pict.gif.
Atribúty v zozname sú od seba oddelené jednou alebo viacerými medzerami, tabulátormi alebo znakmi nového riadku, poradie, v ktorom sú atribúty napísané, nie je dôležité. Prevažná väčšina atribútov sa používa ako pár názov atribútu = hodnota atribútu. Ak je hodnota atribútu viac ako jedno slovo alebo jedno číslo, mala by byť uzavretá v jednoduchých alebo dvojitých úvodzovkách. Atribúty nie sú špecifikované v záverečných komponentoch tagov.
Tu je príklad značky s atribútmi:
|
Názov značky Názov atribútu |
|
Hodnota atribútu |
|
Názov atribútu |
|
Hodnota atribútu |
Ahoj !
Keď prehliadač narazí na takúto značku v dokumente HTML, interpretuje ju tak, že zobrazí text za značkou v znakoch zväčšených vzhľadom na základnú veľkosť (SIZE=+2) a červenej farbe (COLOR=RED); toto formátovanie textu sa použije, kým nenájdete koncovú značku.
Na veľkosti písmen v položkách značiek a atribútov nezáleží.
Štruktúra dokumentu HTMLDokument HTML je uzavretý v značkách a. Medzi týmito značkami sú dve časti: hlavička (medzi značkami a) a časť tela dokumentu (medzi značkami a). Časť hlavičky obsahuje popis parametrov používa sa pri zobrazovaní dokumentu, ale neprejavuje sa priamo v okne prehliadača. Časť tela dokumentu obsahuje hlavný text určený na zobrazenie prehliadačom, formátovacie značky, umiestnenie obrázkov, tabuliek, hypertextových odkazov atď.
HTML kód najjednoduchšieho dokumentu vhodného na zverejnenie na internete vyzerá takto:
< TITLE >Naša prvá stranaTITLE >
Najjednoduchší HTML dokument
Tento kód je možné napísať v textovom editore Poznámkový blok a uložiť ako súbor s príponou . htm alebo. html - v tomto prípade sa dokument otvorí v predvolenom prehliadači nainštalovanom na vašom počítači. Prehliadač zobrazí tento dokument tak, že vo svojom okne zobrazí riadok „Najjednoduchší dokument HTML“ umiestnený v časti tela dokumentu. Fráza „Naša prvá stránka“ sa zobrazí v záhlaví prehliadača.
Sekcia HEADSekcia hlavičky zvyčajne obsahuje značky, ktoré sú pre používateľa neviditeľné, no napriek tomu môžu aktívne ovplyvňovať vzhľad dokumentu.
|
Tag |
Účel |
|
Určuje názov celého dokumentu. Názov sa zvyčajne zobrazuje v záhlaví okna prehliadača. Tento prvok je povinný pre akýkoľvek HTML dokument a môže byť zadaný maximálne raz. |
|
|
Určuje základnú adresu (URL) aktuálneho dokumentu, ktorá bude východiskovým bodom pre výpočet relatívnych adries URL v rámci dokumentu. Prvok nemá koncovú značku. Musí byť prítomný aspoň jeden z argumentov: HREF - určuje základnú adresu (URL) aktuálneho dokumentu. TARGET – určuje názov rámca, ktorý sa bude štandardne používať v hypertextových odkazoch. To môže byť užitočné, ak chcete otvoriť všetky odkazy v dokumente v inom rámci. |
|
|
< STYLE TYPE= "text /css " > |
Používa sa na vloženie kaskádových štýlov (CSS - Cascade Style Sheet) do dokumentu. TYPE je povinný atribút, ktorého hodnota je zvyčajne "text/css". |
|
< МЕТА …> |
Element META sa používa na technický popis dokumentu. Pomocou tohto prvku sa do názvu dokumentu vnesú ďalšie užitočné informácie, ktoré používateľ nevidí, no niekedy sú jednoducho nenahraditeľné pre správne indexovanie vašej stránky robotmi vyhľadávacieho servera. Prvok nemá koncovú značku. NAME – definuje názov meta príspevku. Existuje mnoho preddefinovaných mien, niektoré z nich môžete vidieť v príklade nižšie. CONTENT - priradí hodnotu meta záznamu definovanému v parametri NAME. |
Táto sekcia obsahuje hlavný obsah webovej stránky – text dokumentu, obrázky, tabuľky atď. Prvok BODY sa v dokumente nesmie objaviť viac ako raz a môže obsahovať nasledujúce atribúty:
|
Syntax atribútu |
Účel |
|
MARGINHEIGHT= číslo |
Určuje šírku (v pixeloch) horného a dolného okraja dokumentu. Funguje iba v prehliadačoch Netscape |
|
TOPMARGIN= číslo |
Určuje šírku (v pixeloch) horného a dolného okraja dokumentu. Funguje iba v prehliadačoch Internet Explorer |
|
MARGINWIDTH= číslo |
Určuje šírku (v pixeloch) ľavého a pravého okraja dokumentu. Funguje iba v prehliadačoch Netscape |
|
ĽAVÝ OKRAJ= číslo |
Určuje šírku (v pixeloch) ľavého a pravého okraja dokumentu. Funguje iba v prehliadačoch Internet Explorer |
|
POZADIE= URL |
Určuje obrázok, ktorý má „vyplniť“ pozadie (obrázok na pozadí). Hodnota je uvedená v absolútnej alebo relatívnej adrese obrázka (pozri časť Umiestnenie obrázkov) |
|
BGCOLOR= farba |
Určuje farbu pozadia dokumentu. MicrosoftinternetPrieskumník podporuje 16 štandardných názvov farieb (aqua, čierna, modrá, fuchsiová, šedá, zelená, limetková, gaštanová, námornícka, olivová, fialová, červená, strieborná, modrozelená, žltá, biela) Ďalším spôsobom je použitie farebného kódu vo forme šesťmiestneho hexadecimálneho čísla, ktoré špecifikuje intenzitu červenej (prvé dve číslice), zelenej (ďalšie dve číslice) a modrej (posledné dve číslice) zložky. Intenzita každej zložky v hexadecimálnom tvare sa pohybuje od 00 do FF. Keď špecifikujete farbu ako hodnotu atribútu pre značku, pred hexadecimálnym číslom je znak #. Napríklad položka COLOR ="#0000 FF " znamená modrá Napriek zásadnej možnosti určenia miliónov farieb je potrebné brať do úvahy, že prehliadače zobrazujú iba 256 farieb a každý prehliadač má svoju vlastnú farebnú paletu, v ktorej prehliadač vyberie farbu, ktorá sa najviac približuje zadanej |
|
TEXT= farba |
Určuje farbu textu v dokumente |
|
LINK= farba |
Určuje farbu hypertextových odkazov v dokumente |
|
ALINK= farba |
Definuje farbu zvýraznenia hypertextových odkazov po kliknutí. |
|
VLINK |
Definuje farbu hypertextových odkazov na už zobrazené dokumenty |
Všetky značky formátovania znakov majú otvárací aj uzatvárací komponent a pôsobia na text medzi nimi.
Hlavná značka je ... FONT>, ktorá musí byť použitá s jedným alebo viacerými atribútmi, ktoré menia veľkosť, farbu a typ písma:
|
Syntax atribútu |
Účel |
|
VEĽKOSŤ = význam |
Veľkosť sa zadáva buď ako absolútna hodnota (číslo od 1 do 7) alebo relatívne k základnej veľkosti písma (v tvare +n alebo -n). |
|
FARBA= farba |
Farba |
|
TVÁR = zoznam písiem |
Typy písma na zobrazovanie textu; mená sú uvedené v poradí podľa preferencie oddelené čiarkami, napr. FACE="Verdana, Helvetica, Arial, Sans-Serif" Môžete tiež určiť jeden z typov písma, ale majte na pamäti, že toto písmo nemusí byť nainštalované na počítači používateľa a „exotické“ písma sa v prehliadači nezobrazia. |
Okrem toho sa značky používajú na zmenu štýlu znakov:
. .. (z angl. bold) − tučné písmo;
.. . (z angličtiny italic) - kurzíva;
... (z angl. TeleType) – jednopriestorové písmo;
... (z angl. underline) - podčiarknuté;
... S > (z angličtiny s trojkolka) - prečiarknutý;
... (z angličtiny s ub skript) – dolný index;
... (z angličtiny súp erscript) je horný index.
Text uzavretý medzi značkami
a (z angličtiny pre naformátovaný), sa zobrazí tak, ako bol vopred naformátovaný, so všetkými medzerami a zalomeniami riadkov.
Formátovanie odsekovText sa zobrazuje v okne prehliadača slovo po slove, po dosiahnutí pravého okraja okna sa ďalšie slovo automaticky presunie na nový riadok. Aj keď bolo v kóde stránky zadaných niekoľko medzier alebo bol text napísaný na nový riadok, tieto akcie sa pri zobrazení v prehliadači nezobrazia. Preto na zobrazenie série po sebe idúcich medzier alebo niekoľkých prázdnych riadkov v texte musíte použiť rôzne značky.
Tag
(z angličtiny b reak)preruší prúd textu a vloží nový riadok bez vytvorenia nového odseku. Viacero po sebe idúcich značiek
sa interpretujú ako niekoľko prázdnych riadkov. Riadkovanie je jednoduché. Značka nemá uzatváraciu zložku ani atribúty.
Tag(z angličtiny p aragraf)začína odsek; nový odsek je od predchádzajúceho oddelený dvojitým riadkovaním. Odsek nemôže byť prázdny, tj niekoľko po sebe idúcich značiek
sa interpretujú ako jedna (na rozdiel od značky
).Uzáverový komponent
nepovinné, pretože predchádzajúci odsek končí tam, kde začína nový. Značka má voliteľný atribút ALIGN označujúci typ zarovnania odseku, ktorý môže mať hodnoty LEFT, CENTER, RIGHT a JUSTIFY, určujúce zarovnanie doľava, stred, vpravo a šírka. Text v značkách bude tiež vycentrovaný.
...Ak je uzatváracia zložka
vynecháte, zadaný typ zarovnania sa zachová až do ďalšej značky, ktorá špecifikuje zarovnanie, alebo do konca dokumentu.
HTML vám umožňuje vytvárať odseky formátované ako číslované zoznamy alebo zoznamy s odrážkami. Textový fragment, ktorý je zoznamom, je uzavretý v značkách:
objednaný (číslovaný) zoznam (z angličtiny o objednaný l ist)
neusporiadaný (odrážkový) zoznam (z anglického u objednané l ist)
Každý prvok zoradeného alebo neusporiadaného zoznamu je uzavretý v značkách ... (z angličtiny l ist i tem). Pri zobrazovaní textu sa každý prvok zoznamu umiestni na nový riadok označený číslom alebo značkou. Okrem toho môže mať zoznam názov, ktorý je špecifikovaný značkou (z angličtiny l ist h eader). Záverečné štítky sa nevyžadujú.
|
Číslovaný zoznam |
Zoznam s odrážkami |
|
|
Prvok kódu |
< O L> Smerovanie Prvý prvok Druhý prvok Tretí prvok |
< U L> Smerovanie Prvý prvok Druhý prvok Tretí prvok U L> |
|
Displej prehliadača |
Smerovanie 1. Prvý prvok 2. Druhý prvok 3. Tretí prvok |
Smerovanie · Prvý prvok Druhý prvok · Tretí prvok |
Viacúrovňový zoznam možno usporiadať kombináciou číslovaných zoznamov a zoznamov s odrážkami.
Značka má voliteľné atribúty:
|
Syntax atribútu |
Účel |
|
|
TYP = formát |
Formát číslovania môže mať nasledujúce hodnoty: |
|
|
arabské číslice (predvolené) |
||
|
veľké písmená |
||
|
malými písmenami |
||
|
veľké rímske číslice |
||
|
malé rímske číslice |
||
|
START = hodnota |
prvé číslo v zozname (predvolené 1) |
|
Značka má voliteľný atribút
|
Syntax atribútu |
Účel |
|
|
TYP = formát |
Formát tokenu môže mať nasledujúce hodnoty: |
|
|
disk |
disk (predvolené) |
|
|
Kruh |
kruh |
|
|
Námestie |
Námestie |
|
Odstavce môžu byť tiež formátované ako nadpisy úrovní (od n = 1 do n = 6), na tento účel sa používajú značky vo forme ... n>. Nadpis prvej úrovne je zobrazený najväčším písmom.
Tagy
, ... ,
môže mať atribút zarovnania ALIGN s hodnotami LEFT, RIGHT a CENTER.
Umiestnenie výkresovObrázky, ktoré prehliadač zobrazuje pri prezeraní webovej stránky, sú uložené v samostatných súboroch vo formáte gif, jpg (jpeg) alebo png a v kóde stránky je vytvorený odkaz na požadovaný súbor. Na to slúži nepárový tag, ktorý má jeden povinný a množstvo voliteľných atribútov.
|
Požadovaný atribút: |
|
|
SRC = url |
Adresa grafického súboru (relatívna alebo absolútna) |
|
ALT= text |
Alternatívny text zobrazený v režime prehliadača bez načítania obrázkov (musí byť uzavretý v úvodzovkách) |
|
HRANICIA = význam |
Hrúbka okraja v pixeloch, 0 znamená bez okraja (predvolené) |
|
BORDERCOLOR = farba |
Nastaví farbu okraja |
|
VÝŠKA = význam |
Výška obrázka v pixeloch (predvolene originál) alebo ako percento výšky okna prehliadača |
|
ŠÍRKA = význam |
Šírka obrázka v pixeloch (predvolene originál) alebo ako percento šírky okna prehliadača |
|
HSPACE = význam |
Voľné miesto naľavo a napravo od obrázka v pixeloch |
|
VSPACE = význam |
Voľné miesto nad a pod obrázkom v pixeloch |
|
ZAROVNAŤ = význam |
Zarovná obrázok vodorovne. Ak je nastavené LEFT alebo RIGHT, obrázok bude zodpovedajúcim spôsobom vodorovne zarovnaný, nastavenie týchto hodnôt spôsobí, že text sa bude obtekať okolo obrázka |
Pozrime sa bližšie na absolútne a relatívne spôsoby adresovania súboru.
Adresovanie v absolútnej forme používa sa pri odkazovaní na zdroje umiestnené na iných serveroch. Univerzálna adresa, ktorá určuje umiestnenie informačného zdroja, sa nazýva URL (Uniform Resource Locator). Adresa URL pozostáva z dvoch častí oddelených dvojbodkou. Prvá časť označuje typ sieťového protokolu, ktorý závisí od typu zdroja. Napríklad, ak sa zdroj nachádza na WWW serveri, ide o protokol http.Druhá časť obsahuje názov počítača (servera) v systéme názvov domén a (ak je to potrebné) názov cesty k súboru. Pri písaní názvu cesty sú názvy adresárov oddelené lomkou (znak /) v názvoch súborov a adresárov rozlišovať medzi veľkými a malými písmenami, medzery nie sú povolené. Tu sú príklady adries URL:
http://www. vshu. kirov .ru/ site / images / picture 1. jpg
http://195.21.123.13:8110
ftp://everything.com/soft/prog.zip
mailto:Táto e-mailová adresa je chránená pred spamovacími robotmi. Ak ju chcete vidieť, musíte mať povolený JavaScript.
Posledná adresa URL smerujúca na protokol mailto a e-mailová adresa neodkazuje na žiadny informačný zdroj; Toto je jediný typ adresy URL, ktorý neobsahuje dve lomky za dvojbodkou.
Adresovanie obrázkov v absolútnej podobe sa pri tvorbe webu prakticky nepoužíva.
Adresovanie v relatívnej forme používa sa pri odkazovaní na zdroje umiestnené na rovnakom serveri. Pri zápise cesty k súboru sú názvy adresárov oddelené lomkou (symbol /), pohyb po adresároch súborového systému o úroveň vyššie je označený dvoma bodkami (symboly ..). Aby to bolo jasnejšie, predstavte si počítač napríklad s nasledujúcou adresárovou štruktúrou obsahujúcou súbory HTML:
SHAPE\* MERGEFORMAT
|
MySite |
|
Stránky |
|
snímky |
|
Strana1.htm Strana2.htm Obr.1.jpg Obr.2.jpg |
|
Index.htm Obrázok.jpg |
V tomto prípade sú napríklad možné nasledujúce možnosti zápisu značky IMG:
ü < IMG SRC = Picture . jpg >(Obrázok .jpg obrázok sa nachádza na stránke Index .htm)
ü < IMG SRC = Images / Pict 1. jpg >(obrázok Obr. 1. jpg sa nachádza na stránke Index. htm)
ü < IMG SRC =../ Picture . jpg >(Obrázok . jpg obrázok sa nachádza na stránke Strana 1. htm )
ü < IMG SRC =../ Images / Pict 1. jpg >(obrázok Obr. 1. jpg sa nachádza na stránke Strana 1. htm)
Napriek tomu, že sa formálne vyžaduje iba atribút SRC, v praxi je potrebné zadať aj alternatívny text (atribút ALT), keďže veľa ľudí pracuje s prehliadačom v režime bez načítania obrázkov.
Výška a šírka oblasti, v ktorej sa kresba zobrazuje, sa určuje pomocou atribútov šírky a výšky v pixeloch alebo v percentách veľkosti obrazovky. Keď je zadaný jeden z týchto atribútov, mierka výkresu sa upraví tak, aby sa jeho výška alebo šírka zhodovala so zadaným. Druhá veľkosť sa nastaví automaticky vo vhodnom pomere. Použitie iba jedného z atribútov zmení oba rozmery výkresu.
Ak explicitne nastavíte oba atribúty, mierka obrázka bude upravená pozdĺž dvoch osí v súlade so zadanými rozmermi. Atribúty výška a šírka nemenia čas načítania obrázka, ale iba jeho vzhľad (veľkosť) na obrazovke.
Hypertextový odkaz je objekt (text, obrázok, fragment obrázka), ktorý po kliknutí myšou vedie k novému dokumentu alebo fragmentu dokumentu. Sú to hypertextové odkazy, ktoré vám umožňujú organizovať prechody medzi akýmikoľvek dokumentmi zverejnenými na internete.
Textové hypertextové odkazySpojenie medzi dokumentmi HTML a fragmentmi dokumentov je organizované pomocou značky ...(z angličtiny a nchor - kotva).
Značka sa používa na vytvorenie prepojenia na iný dokument aj na prepojenie na fragment dokumentu.
|
Požadovaný atribút: |
|
|
HREF = url |
Adresa cieľového dokumentu (môže byť prezentovaná v absolútnej a relatívnej forme) |
|
Základné voliteľné atribúty: |
|
|
NAME=" názov" |
Označí ten medzi< A >a > fragment dokumentu ako možný objekt prepojenia. Ako hodnotu musíte v latinčine napísať akékoľvek indexové slovo, ktoré je jedinečné pre tento dokument. Napríklad značka Section1 vytvára takzvaný štítok (záložku) na prechod do sekcie 1. V tomto prípade sa môžete na označenú oblasť odkázať jednoduchým uvedením jej názvu za názvom dokumentu (pred ktorým je znak #). takže,<
A
HREF
="
Index
.
html
#
part
1">K časti 1 A > vás zavedie do sekcie „1. časť“ indexového súboru. html a |
|
CIEĽ = " Názov" |
Názov rámca (rámčeka) alebo okna na zobrazenie cieľového dokumentu. Tento atribút sa používa iba v spojení s parametrom HREF. Hodnota musí byť buď názov jedného z existujúcich rámcov, alebo jeden z nasledujúcich rezervovaných názvov: _self - označuje, že dokument špecifikovaný v parametri HREF by sa mal zobraziť v aktuálnom rámci; _blank - určuje, že dokument sa má zobraziť v novom okne |
|
TITLE= "(!JAZYK: text!}" |
Keď umiestnite kurzor myši na hypertextový odkaz, zobrazí sa popis |
Text a obrázky umiestnené medzi značkami sa stanú aktívnou oblasťou dokumentu citlivou na kliknutie myšou, ktoré spôsobí načítanie cieľového dokumentu. Text hypertextového odkazu je zvýraznený podčiarknutím a farbami špecifikovanými ako hodnota atribútov LINK, A LINK, V LINK značky (alebo predvolená farba).
Hypertextové odkazy - obrázkyAk chcete vytvoriť hypertextový odkaz z celého obrázka, môžete použiť aj značku ...., len namiesto textu (alebo spolu s textom) medzi< A >a nachádza sa značka >< IMG …>so všetkými relevantnými atribútmi.
Napríklad , .
Hyperlinková mapaZnačka vám umožňuje urobiť z časti textu alebo celého obrázka aktívnu zónu; Aby sa rôzne fragmenty jedného obrázka spájali s rôznymi cieľovými dokumentmi, budete musieť použiť značku, ktorá implementuje obrázok mapy.
V prípade kontajnerovej značky je jediným povinným atribútom NAME , ktorého hodnotou bude názov (napríklad NAME=" mymap " , ktorý sa musí použiť pri popise atribútu USEMAP značky IMG popisujúcej obrázok, ktorý má slúžiť ako mapu (s # − USEMAP="#mymap")
Vo vnútri kontajnera musí mať každá oblasť obrázka citlivá na myš štítok s nasledujúcimi atribútmi:
|
Syntax atribútu |
Účel |
|
COORDS= zoznam |
Čiarkami oddelený zoznam súradníc aktívnej zóny (v závislosti od typu daného tvaru zóny) |
|
HREF = url |
|
|
TVAR = formulár |
Definuje tvar jadra. Možné hodnoty pre tento atribút: kruh(kruh – určený súradnicami stredu a polomeru v pixeloch); rect(obdĺžnik - určený súradnicami ľavého horného a pravého dolného rohu); poly(polygón - definovaný súradnicami jeho vrcholov) Vo všetkých prípadoch sa súradnice merajú od ľavého horného rohu obrázka v pixeloch, os X smeruje doprava a os Y smeruje nadol. |
|
NOREF |
niekedy je potrebné uviesť, že daná zóna (určená atribútom SHAPE a súradnicami COORDS) nie je aktívna, nereaguje na kliknutie myšou |
Tabuľky v dokumentoch HTML sa nepoužívajú ani tak na umiestňovanie údajov do zarámovaných buniek, ale na vzájomné usporiadanie častí textu a obrázkov.
Tabuľky v HTML sú zostavené riadok po riadku. Všetky tabuľkové údaje sú uzavreté v značkách
; popis každého riadku buniek (riadkov) je obsiahnutý v značkách ...; obsah každej bunky je obsiahnutý v značkách ... (bežné bunky) alebo ... H> (hlavičky).
Ak teda chcete opísať napríklad tabuľku dvoch riadkov, z ktorých každý obsahuje dve bunky, budete musieť vytvoriť nasledujúcu konštrukciu:
Bunky tabuľky môžu obsahovať text, obrázky, vnorené tabuľky atď. Bunky tabuľky by ste nemali nechávať prázdne; ak by sa niektorá bunka javila ako prázdna, umiestnite do nej nezalomiteľnú medzeru.
Text umiestnený v bunkách tabuľky v predvolenom nastavení automaticky umiestňuje prehliadač; text sa zobrazuje slovo po slove; Keď sa dosiahne pravý okraj bunky, ďalšie slovo sa presunie na nový riadok.
Bunky tabuľky môžu zahŕňať viacero riadkov alebo stĺpcov; pri popise takýchto buniek sú atribúty ROWSPAN (bunka, ktorej značka obsahuje tento atribút „natiahnutá“ o určený počet riadkov) a COLSPAN (bunka je „natiahnutá“ o niekoľko stĺpcov) použité. Tu je príklad usporiadania tabuľky so zlúčenými bunkami:
< TR >
< TD ROWSPAN=2>1-1 TD >
Značky, ktoré popisujú tabuľky, majú množstvo voliteľných atribútov.
Atribúty značiek určujú parametre tabuľky ako celku:
|
Syntax atribútu |
Účel |
|||
|
ALIGN = hodnota |
Zarovnanie vzhľadom na tok textu; možné hodnoty sú vľavo, vpravo a na stred |
|||
|
POZADIE = url |
Obrázok na pozadí pre celý stôl |
|||
|
BGCOLOR= farba |
Farba pozadia |
|||
|
BORDERCOLOR = farba |
Farba okraja |
|||
|
BORDERCOLORDAK = farba |
Zafarbí pravý a spodný okraj hlavného rámca a ľavý a horný okraj každej bunky určenou farbou |
|||
|
BORDERCOLORLIGHT = farba |
Zafarbí ľavý a horný okraj hlavného rámca a podľa toho pravý a spodný okraj každej bunky určenou farbou |
|||
|
CELLPADDING = hodnota |
Vzdialenosť od okrajov bunky k jej obsahu v pixeloch |
|||
|
CELLSPACING = hodnota |
Vzdialenosť medzi bunkami v pixeloch |
|||
|
HSPACE = význam |
Voľné miesto naľavo a napravo od tabuľky v pixeloch |
|||
|
VSPACE = význam |
Voľné miesto nad a pod tabuľkou v pixeloch |
|||
|
ŠÍRKA = význam |
Šírka tabuľky (nastavená v pixeloch alebo ako percento aktuálnej šírky okna prehliadača) |
|||
Atribúty tagu špecifikujú parametre danej série (ak vzniknú rozpory, atribúty uvedené v tagu sa zrušia). Zarovnanie obsahu bunky; možné hodnoty sú vľavo, vpravo a na stred
POZADIE = url
Obrázok na pozadí buniek daného riadku tabuľky
BGCOLOR= farba
Farba pozadia buniek v tomto riadku
HRANICIA = význam
Hrúbka okraja obklopujúceho bunky tohto riadku; BORDER=0 označuje neviditeľný okraj
VALIGN = význam
Vertikálne zarovnanie obsahu bunky; možné hodnoty sú hore, na stred a dole
Atribúty tagov špecifikujú parametre danej bunky (ak sa vyskytnú nezrovnalosti, atribúty špecifikované v a tagy sa zrušia).
|
Syntax atribútu |
Účel |
|
ZAROVNAŤ = význam |
Zarovnajte obsah buniek; možné hodnoty sú vľavo, vpravo a v strede |
|
POZADIE = ur l |
Obrázok na pozadí bunky tabuľky |
|
BGCOLOR= farba |
Farba pozadia bunky |
|
HRANICIA = význam |
Hrúbka rámu obklopujúceho bunku |
|
VALIGN = význam |
Vertikálne zarovnanie obsahu bunky; možné hodnoty sú hore, na stred a dole |
|
ŠÍRKA = význam |
Šírka bunky v pixeloch alebo percentá šírky tabuľky |
|
ROWSPAN= význam |
Označuje počet riadkov pokrytých bunkou |
|
COLSPAN = význam |
Určuje počet stĺpcov pokrytých bunkou |
Pri práci s tabuľkami treba myslieť na to, že zadanú hodnotu pre atribút WIDTH si v mnohých prípadoch „všimne“ iba prehliadač. Dané proporcie sa málokedy dodržia presne, prehliadač sa snaží tabuľku zobraziť čo najlepšie (v jeho chápaní).
TickerPomocou tickeru na webovej stránke je dynamickejšia a umožňuje vám vytvoriť efekt pohybu objektu. Vytvorenie tickeru pomocou značky< MARQUEE >... MARKÍZA >.
Medzi< MARQUEE >a MARQUEE > možno nájsť fragmenty textu a obrázky. Text je možné formátovať pomocou vhodných značiek a grafika sa vkladá pomocou .
|
Syntax atribútu |
Účel |
|
BGCOLOR= farba |
Farba pozadia. Ak je zadané pozadie, prehliadač nakreslí na obrazovku farebný prúžok, po ktorom sa pohybuje text alebo obrázok. |
|
VÝŠKA = význam |
Výška lišty pozadia. Hodnota je určená v pixeloch alebo ako percento výšky okna prehliadača. Napríklad, ak zadáte atribút HEIGHT=25%, lišta bude zaberať štvrtinu výšky okna |
|
ŠÍRKA = význam |
Šírka panela ukazovateľa, uvedená v pixeloch alebo ako percento šírky okna prehliadača |
|
DIRECTION= význam |
Smer pohybu čiary: vľavo - vľavo (predvolené), vpravo - vpravo, hore - hore, dole - dole |
|
SPRÁVANIE = význam |
Atribút riadi správanie sa tickeru: rolovanie (predvolené) – po dosiahnutí okraja okna sa čiara stratí z dohľadu a potom sa objaví na opačnej strane; snímka - z okraja okna sa objaví čiara, dosiahne opačnú a zastaví sa; alternatívne - čiara sa pohybuje doprava alebo doľava, „odráža sa“ od okrajov okna a mení smer pohybu |
|
HSPACE = posun pixelov |
Posuňte lištu vodorovne doprava |
|
VSPACE = vy čo ta v pixeloch |
Vytvorenie prázdneho priestoru nad a pod pásom |
|
LOOP = význam |
Počet prechodov riadkov cez obrazovku |
|
SUMA SCROOLAUT = význam |
Počet pixelov, ktoré čiara prejde každým krokom. Predvolený režim je približne 10 px/krok. Tento atribút umožňuje nastaviť rýchlosť pohybu linky |
|
SCROLLDELAY = význam |
Definuje časový interval (v milisekundách) medzi krokmi, pomocou tohto atribútu sa môže čiara pohybovať trhane |
|
TRUESPED |
Keď je nastavený tento príznak (atribút bez hodnoty), použije sa zadaná hodnota SCROLLDELAY. Ak príznak nie je nastavený, hodnota je SCROLLDELAY |