Prednáška 2. ZákladyHtml... možnostiHtml5.
1. História vývoja jazyka html
V roku 1989 Tim Berners-Lee navrhol vedeniu Medzinárodného centra pre vysoké energie (CERN) projekt distribuovaného hypertextového systému, ktorý nazval World Wide Web (WWW), World Wide Web. Pôvodnou myšlienkou systému bolo spojiť celý súbor informačných zdrojov CERNu do jedného informačného systému pomocou hypertextového navigačného systému.
Jednou zo súčastí technológie na vytváranie distribuovaného hypertextového systému World Wide Web je hypertextový značkovací jazyk Html (HyperTextznačkovanieJazyk- hypertextový značkovací jazyk pre dokumenty), ktorý vyvinul Tim Berners-Lee na základe štandardu pre značkovací jazyk pre tlačené dokumenty - SGML (Standard Generalized Markup Language, štandardný zovšeobecnený značkovací jazyk). Daniel W. Connolly preň napísal Definíciu typu dokumentu, formálny popis syntaxe HTML v podmienkach SGML.
Vývojári HTML dokázali vyriešiť dva problémy:
poskytnúť návrhárom hypertextových databáz jednoduchý spôsob vytvárania dokumentov;
aby bola dostatočne výkonná, aby odrážala vtedajšie chápanie používateľského rozhrania hypertextovej databázy.
Prvá úloha bola vyriešená výberom modelu popisu tagovaného dokumentu. Tento model je široko používaný v systémoch na prípravu dokumentov na tlač.
Jazyk HTML vám umožňuje označiť elektronický dokument, ktorý sa zobrazí na obrazovke s polygrafickou úrovňou dizajnu; výsledný dokument môže obsahovať širokú škálu štítkov, ilustrácií, zvukových a video klipov atď. Jazyk obsahuje pokročilé nástroje na vytváranie rôznych úrovní nadpisov, zvýraznenia písma, rôznych zoznamov, tabuliek a mnoho ďalšieho.
Druhým dôležitým bodom, ktorý ovplyvnil osud HTML, bol fakt, že ako základ bol zvolený bežný textový súbor.
Hypertextová databáza v koncepte WWW je teda súbor textových súborov označených v HTML, ktorý určuje formu prezentácie informácií (markup) a štruktúru väzieb medzi týmito súbormi a inými informačnými zdrojmi (hypertextové odkazy). Hypertextové prepojenia vytvárajúce prepojenia medzi textovými dokumentmi postupne začali spájať rôzne informačné zdroje vrátane zvuku a videa; v dôsledku toho vznikol nový pojem - hypermédia.
Tento prístup predpokladá prítomnosť ďalšej zložky technológie – jazykového tlmočníka. Na World Wide Web sú funkcie tlmočníka rozdelené medzi webový server hypertextovej databázy a používateľské rozhranie. Server okrem prístupu k dokumentom a spracovania hypertextových odkazov zabezpečuje predspracovanie dokumentov, zatiaľ čo používateľské rozhranie interpretuje jazykové konštrukcie spojené s prezentáciou informácií.
Verzie
HTML 4.01 (zmeny, a to významnejšie, ako sa na prvý pohľad zdá) – 24. decembra 1999;
ISO / IEC 15445: 2000 (aka ISO HTML, založené na HTML 4.01 Strict) – 15. máj 2000.
HTML 5 je vo vývoji. Ukončenie vývoja je naplánované na rok 2014.
Neexistuje žiadna oficiálna špecifikácia HTML 1.0. Pred rokom 1995 existovalo veľa neoficiálnych štandardov HTML. Aby sa štandardná verzia od nich odlišovala, bolo jej hneď pridelené druhé číslo.
Verzia 3 bola navrhnutá konzorciom World Wide Web Consortium (W3C) v marci 1995 a poskytla mnoho nových funkcií, ako napríklad vytváranie tabuliek, „obaľovanie“ obrázkov textom a zobrazovanie zložitých matematických vzorcov a podporu formátu gif. Aj keď bol tento štandard kompatibilný s druhou verziou, jeho implementácia bola pre vtedajšie prehliadače náročná. Verzia 3.1 nebola nikdy oficiálne ponúkaná a ďalšia verzia štandardu HTML bola 3.2, ktorá vynechala mnohé zmeny vo verzii 3.0, ale pridala neštandardné prvky podporované prehliadačmi Netscape Navigator a Mosaic.
V HTML 4.0 došlo k určitému vyčisteniu štandardu. Mnoho položiek bolo zastaraných a zastaraných. zastarané). Zastaral sa najmä prvok písma používaný na zmenu vlastností písma (namiesto toho sa odporúčajú šablóny so štýlmi CSS).
V roku 1998 World Wide Web Consortium začalo pracovať na novom značkovacom jazyku založenom na HTML 4, ale v súlade so syntaxou XML. Následne dostal nový jazyk názov XHTML. Prvá verzia XHTML 1.0 bola schválená ako odporúčanie World Wide Web Consortium 26. januára 2000.
Plánovaná verzia XHTML 2.0 mala prelomiť kompatibilitu so staršími verziami HTML a XHTML, no 2. júla 2009 World Wide Web Consortium oznámilo, že na konci roka 2009 vyprší mandát XHTML2 Working Group. Všetok ďalší vývoj štandardu XHTML 2.0 bol teda pozastavený.
World Wide Web Consortium v súčasnosti vyvíja HTML verziu 5. Návrh jazykovej špecifikácie sa objavil na internete 20. novembra 2007.
- Preklad
Poznámka: Toto nie je úplný preklad článku. Pre seba som vybral len tie najzaujímavejšie body. Článok nepredstiera, že je čerstvý, ale možno aj ľudia, ktorí sú oboznámení s rozložením, nájdu niečo zaujímavé pre seba. Článok sa s konkrétnymi príkladmi dotýka niektorých aspektov sémantiky rozloženia.
Pod rezom je veľa písmen! Aby sa nestratili v ich hojnosti, všetky body sú zvýraznené nadpismi.
2. Aké verzie HTML existujú?
Prvá verzia HTML (1989) nemala žiadne číslo verzie; bolo to len "HTML". Prvý štandardizované verzia HTML vydaná organizáciou Internet Engineering Task Force (IETF) v roku 1995 sa nazývala HTML 2.0.7. Aký je rozdiel medzi Strict, Transitional a Frameset DTD?
Rozdiel medzi týmito DTD je v tom, aké prvky a atribúty deklarujú a v tom, ako umožňujú (zaväzujú) vkladanie prvkov.- HTML 4.01 Strict DTD – Zdôrazňuje oddelenie obsahu od prezentácie a správania. Toto DTD odporúča W3C pre všetky nové dokumenty.
- HTML 4.01 Transitional DTD - je akýmsi medzičlánkom pri prechode zo "starého" (old-scool "nového, pred-HTML) značenia na moderné. Neodporúča sa používať pri písaní nových dokumentov. Obsahuje 11 prezentačných prvkov. ale používa sa výlučne na zmenu vzhľadu, napríklad prvku ) a úplný súbor atribútov prezentácie, ktoré zrušené v Prísnom DTD. Prechodné DTD sú často potrebné pre stránky umiestnené v rámcoch, pretože má to prívlastok cieľ potrebné na otvorenie odkazu v inom rámci.
- HTML 4.01 Frameset DTD – Používa sa pre stránky založené na rámcoch. Konzorcium W3 neodporúča používať rámy. Pre moderné stránky by bolo lepším riešením použiť na vyriešenie týchto problémov aplikácie na strane servera.
8. Ktorý DOCTYPE si mám vybrať?
Ak vytvárame novú stránku, W3C odporúča použiť HTML 4.01 Strict (poznámka prekladateľa: samozrejme, každý vie, že je predsa len lepšie použiť XHTML 1.0 Strict).Ak budeme prekladať staré dokumenty HTML 2.0 alebo HTML 3.2, tak kým nepreložíme celú prezentáciu do CSS a prvky zodpovedné za správanie v JavaScripte, môžeme použiť HTML 4.01 Transitional.
11. Prečo validátor nadáva na značku?
nikdy nebolo súčasťou špecifikácie HTML. Nie je to štandardizovaný prvok a hoci je podporovaný väčšinou prehliadačov, nie je súčasťou HTML.Počas vojny o prehliadače na konci 90. rokov sa výrobcovia prehliadačov ako Microsoft a Netscape predháňali v tom, kto príde s ďalšími skvelými funkciami pre štýl a úpravu HTML stránok. Problém bol v tom, že tieto funkcie neboli štandardizované a vo väčšine prípadov nešlo o rôzne prehliadače.
Existujú aj ďalšie prvky, ktoré sú široko používané (napr. markíza), ale nikdy neboli zahrnuté v špecifikácii. Ak je to možné, nikdy ich nepoužívajte.
Rozšírené boli aj neštandardizované atribúty. Jedným z príkladov je šírka okraja.
13. Čo je kusovník?
kusovník, príp značka poradia bajtov(značka sekvencie bajtov) - používa sa v niektorých kódovaniach, ktoré používajú na kódovanie údajov viac ako 8 bitov (napríklad UTF-8 alebo UTF-16). Procesor môže používať dve rôzne schémy ukladania pre veľké celé čísla: big-endian a little-endian. Kusovník obsahuje 16 bitov zapísaných na úplnom začiatku súboru, ktoré prehliadačom oznamujú, ktorá schéma sa používa.Bohužiaľ, mnohé staršie prehliadače tieto informácie nedokážu spracovať, namiesto toho zobrazujú tieto bity ako údaje o znakoch. Ak v hornej časti stránky vidíte niekoľko zvláštnych znakov, potom to s najväčšou pravdepodobnosťou znamená, že kusovník nebol spracovaný prehliadačom (alebo kódovanie nebolo správne nastavené).
Jediným riešením problému je nepoužívať kusovník. Redaktori, ktorí vedia, ako uložiť dokument v UTF-8, vám zvyčajne dajú vybrať, či chcete alebo nechcete použiť kusovník.
14. Aké kódovanie by som mal použiť?
Približne. prekladateľ: nepreložil túto položku; Myslím, že každý vie, že UTF-8 je naše všetko. Malo by sa použiť UTF-8... A pri ukladaní dokumentu vyberte UTF-8 bez kusovníka.16. Prečo potrebujete písať & amp; namiesto &?
Poznámka: Mám sekvencie HTML s medzerou za ampersandom, pretože inak ich analyzátor Habra nezobrazuje tak, ako by mal.Niektoré znaky majú v HTML špeciálny význam: < (menší), > (viac), & (ampersand), " (citácie), " (apostrof). Niekedy, keď chceme tieto ikony použiť v obyčajnom texte, musíme ich nahradiť sekvenciami HTML.
Pre prvé štyri znaky uvedené vyššie budú sekvencie vyzerať takto:
- & lt; (menší)
- & gt; (viac)
- & amp; (ampersand)
- & (citácie)
Pretože ampersand sa používa vo všetkých týchto sekvenciách, musí sa vždy skonvertovať na sekvenciu HTML, a to aj vtedy, keď sa používa vo vnútri atribútov, najmä v atribúte href v odkazoch. Bohužiaľ, ampersand je veľmi bežný v URI ako oddeľovač argumentov.
Vo väčšine prípadov v HTML nesúvislý ampersand nič neporušuje (ale XHTML je iný príbeh). Ale čo ak náhodou narazíme na parameter dotazu, ktorý sa zhoduje s názvom html sekvencie ...
21. Čo použiť,
Alebo
?Element p používa sa na zvýraznenie odsekov v texte. Odsek je jedna alebo viac viet spojených jednou myšlienkou.
Zalomenie riadku ( br) sa používa hlavne ako prezentačný nástroj a mal by byť implementovaný skôr v CSS ako v HTML. Existuje však niekoľko situácií, v ktorých môže mať zalomenie riadkov sémantický význam, napríklad pri označovaní riadkov v poézii a piesňach, pri písaní poštových adries alebo pri označovaní príkladov kódu. V týchto prípadoch pomocou br opodstatnené, ale využívajúce br oddeľovať odseky nie je dovolené.
Na druhej strane p má celkom jasný sémantický význam: označenie odseku. Weboví vývojári majú niekedy tendenciu zvážiť p ako základný blockchain na použitie ako kontajnery, ale to nie je pravda. Nie je nezvyčajné vidieť položky štítok a vstup vnútri p vo formách, ale nazval by som to sémanticky nesprávne. Štítky a vstupné polia nemôžu byť obsahom odsekov.
23. Oplatí sa vymeniť a na a ?
Iba ak naozaj chcete niečo zdôrazniť (niečo zdôrazniť, zdôrazniť). Tieto značky nie sú ekvivalentné.V Dnešných nemenej smutných časoch autori využívajú silný a em na vytvorenie textu tučný alebo kurzívou.
em znamená sémantický prízvuk, zosilnenie významu. Obsah, na ktorý sa tento typ zvýraznenia aplikuje, musí byť pri hlasnom čítaní zosilnený (napríklad hlasnejšie alebo dlhšie). silný znamená ešte viac stresu, ale často sa to považuje za zbytočné (môžete použiť vnorené em indikovať ešte väčší stres). Niektorí odborníci odporúčajú používať silný iba pre určité prvky na stránke, ktoré by mali byť jednoznačne zvýraznené (napríklad ukazovateľ „aktuálna stránka“), a nemali by označovať slová a frázy v hlavnom texte.
b a i nemajú sémantický význam; len zmenia písmo na tučné alebo kurzívu. Sú vhodné na použitie vo všeobecných typografických pravidlách, ktoré nenašli sémanticky vhodný prvok HTML. Napríklad názvy lodí sa tradične zobrazujú kurzívou, no v HTML nie je žiadny prvok. <корабль> ... Preto môžete písať Titanic .
27. Ako správne používať prvok ?
adresu slúži na poskytovanie kontaktných informácií na stránke. Môže to byť poštová adresa, telefónne číslo alebo akékoľvek iné kontaktné informácie. adresu- blokový prvok, ktorý môže obsahovať iba text a vložené prvky. Väčšina prehliadačov sa v predvolenom nastavení zobrazuje kurzívou, ale to sa dá ľahko opraviť pomocou CSS.adresu možno použiť iba na označenie poštovej adresy, ale nie je to tak.
28. Ako správne používať prvok ?
dfn používa sa na „definovanie významov pojmov“. Ide o typografickú konvenciu, obzvlášť bežnú v odborných dokumentoch, na kurzívu, ktorú čitateľ nemusí poznať, keď sa definícia objaví v texte. najprv raz. Predvolené dfn zobrazené kurzívou.Je bežnou mylnou predstavou, že dfn znamená „skratka“ a mnohí autori ho používajú aj ako skratka a skratka(vysvetlením výrazu pomocou atribútu title). Výrazy by mali byť označené dfn v dokumentoch iba raz(pri prvom použití termínu a jeho vysvetlení).
29. Ako správne používať prvok ?
var slúži na označenie premenných, príp vymeniteľnéčasti textu. Ide o typografickú konvenciu na písanie kurzívou premenných, ktoré sú v reálnom živote nahradené inými údajmi. Napríklad v príručke pre telefonickú komunikáciu môžu pokyny na presmerovanie prichádzajúceho telefonického hovoru na inú klapku vyzerať takto:* 21 * dodatočné číslo #
Tu je značka var používa sa na označenie „dodatočného čísla“ (ktoré bude uvedené kurzívou). Každý, kto chce presmerovať hovor na ďalšie číslo 942, napíše „ 21*942# ". teda var neznamená, že by ste mali zadať "d-o-p-o-l-n-and-t-e-l-l-n-y-th n-o-m-e-r", ale to, že namiesto slov "dodatočné číslo" budú čísla.
Je bežnou mylnou predstavou, že var by sa mal použiť na špecifikáciu premenných v príkladoch kódu.
31. Aký je rozdiel medzi tagmi a ?
Na túto otázku naozaj nikto nevie odpovedať! Dokonca aj špecifikácia HTML si do určitej miery protirečí.skratka bolo rozšírenie Netscape pre HTML počas vojny prehliadačov. skratka bolo to rozšírenie od Microsoftu. Obe možnosti znamenajú približne to isté. Oba prvky boli zahrnuté do špecifikácie HTML s rôznym sémantickým významom. Problém je v tom, že nikto nevie vysvetliť, čo je to za sémantiku.
Pozrime sa do slovníka:
Skratka je skrátená forma slova alebo frázy.
Skratka je slovo vytvorené z prvých písmen alebo niekoľkých prvých písmen slov vo fráze alebo niekoľkých slovách.
Definícia skratky hovorí, že ide o slovo, t.j. dá sa to povedať. „NATO“ je teda skratka, pretože pozostáva zo začiatočných písmen Severoatlantickej aliancie. Na rozdiel od toho „FBI“ nebude skratka z definície, pretože sa nedá vysloviť ako celé slovo, ale bude to znieť ako „ef-bi-ah“. Tu začína zmätok. Technicky je „FBI“ známe ako inicializmus (poznámka prekladateľa: v origináli "inicializmus"), ktorej definícia podľa slovníka znie takto:
Inicializmus - 1) meno alebo výraz vytvorený z prvých písmen alebo z niekoľkých prvých písmen slov, ktoré sa vyslovujú ako samostatné slová; 2) skupina prvých písmen s významom meno, organizácia atď., ktoré sa vyslovujú oddelene.
Prvá definícia je takmer rovnaká ako skratka a druhá je viac rezervovaná. Napriek tomu v špecifikácii nie je žiadny prvok. inicializmus a zmätok je umocnený skutočnosťou, že slovo „akronym“ v jednoduchej americkej reči sa používa ako synonymum so slovom „inicializmus“.
Špecifikácia HTML ponúka nasledujúce definície:
skratka- označuje skrátenú formu (napríklad WWW, HTTP, URI, Mass atď.).
skratka- označuje skratku (napr. WAC, radar atď.).
Zdá sa, že špecifikácia odkazuje na definície slovníka, čo znamená, že „FBI“ by malo byť označené skratka odkedy nemožno vysloviť ako celé slovo. Bez ohľadu na to, niekoľko odsekov pod špecifikáciou hovorí:
Západné jazyky bežne používajú akronymy ako „GmbH“, „NATO“ a „F.B.I.“ ako skratky ako „M.“, „Inc.“, „et al.“, „atď.
si ešte zmätený? Som. Najbezpečnejšie je vždy používať skratka keďže všetky akronymy sú tiež skratky, ale nie naopak. Bez ohľadu na to je tu malý problém. Microsoft bol tak naštvaný rozhodnutím W3C použiť skratka pre skratky a inicializmy namiesto skratkaže upustili od podpory značky skratka! (Ale stále zaviedli podporu skratka v programe Internet Explorer 7.)
Čo teda robia chudobní weboví vývojári? A prečo by sme sa vôbec mali trápiť? Samozrejme, je fajn mať prvok, ktorému môžete prívlastok prilepiť. titul, ale môžeme to urobiť s rozpätie"Om. Pointa je, že označovanie akronymov a skratiek je dobré pre súvisiace technológie, najmä pre čítačky obrazovky." Väčšina čítačiek obrazovky však radšej ignoruje značky. skratka a skratka odkedy nikto presne nevie, ako ich správne používať, a spoločnosť Microsoft túto značku nepodporuje skratka... Toto je dvojsečná zbraň.
Nepoznám otázku na túto odpoveď! Osobne používam skratka pre zrejmé skratky ako "Inc." a pre inicializmy ako "FBI" a použitie skratka pre skratky, ktoré možno čítať ako slovo, napríklad „GIF“. Ale podľa špecifikácií nemôžem nikoho viniť za to, že označil "FBI" za skratku. Čo tak "SQL", ktoré niektorí hláskujú a iní nazývajú "pokračovanie".
32. Prečo sú niektoré funkcie zrušené?
Najčastejšou vlastnosťou, ktorá nováčikov zaujíma, je atribút cieľ... Tento atribút je zastaraný v HTML 4.01 Strict, ale je stále podporovaný v HTML 4.01 Transitional. Existuje mnoho prvkov a atribútov, ktoré sú povolené v prechodnom režime, ale nie sú povolené v režime Strict.Dôvodom, prečo W3C zavrhuje určité prvky a atribúty, je oddelenie obsahu (HTML), vzhľadu (CSS) a správania (JavaScript). Zobrazenie prvku v strede je otázka prezentácie; malo by sa to vyriešiť pomocou CSS a nie pomocou značky stred... Otvorenie odkazu v novom okne je vecou správania; mal by byť vyriešený JavaScriptom, nie použitím atribútu cieľ.
V podstate sú zrušené funkcie tie, ktoré sa objavili počas vojny prehliadačov v 90. rokoch. Tieto funkcie boli zahrnuté do HTML 3.2, aby nejako dali veci do poriadku, ale toto nie je hlavná úloha, pred ktorou bolo HTML konfrontované. S vydaním HTML 4 sa jeho autori pokúsili "preškoliť web" odstránením "škodlivých" častí, ktoré boli zahrnuté v HTML 3.2, aspoň v Strict DTD.
Inými slovami, tieto veci boli z nejakého dôvodu zrušené. Ak je to možné, snažte sa ich nepoužívať.
37. Ako pripojiť HTML stránku do inej stránky?
Ak používate Strict DTD, potom máte len jeden platný spôsob - použiť prvok objekt:
Prepáčte podporu objekt"ale nie v Internet Exploreri" f.
Pri použití Transitional DTD môžete použiť iframe"NS:
S príchodom počítačových sietí a ešte viac „world wide web“ sa stalo nevyhnutné prenášať informácie pre rôzne platformy. Koniec koncov je potrebné, aby sa všetky prvky dokumentu na všetkých počítačoch bez ohľadu na použitý systém zobrazovali rovnako. Na tento účel sa používa špeciálny jazyk - HTML. Prvýkrát bolo použitie tohto jazyka popisu stránky použité na zobrazenie vedeckých informácií v Európskom centre pre jadrový výskum (Ženeva) a bolo použité na zobrazenie informácií pre všetky počítače v lokálnej sieti. HTML je dnes neoddeliteľnou súčasťou väčšiny programov a predovšetkým - na zobrazovanie internetových stránok. Prakticky každý používateľ globálnej siete navštevujúci akúkoľvek stránku používa HTML. Všetky informácie, ktoré môže používateľ premýšľať v okne prehliadača, sú opísané prostredníctvom HTML a samotné prehliadače sú špecializované programy na prácu s jazykom HTML.
Čo je HTML?
HTML nie je možné úplne nazvať programovacím jazykom, hoci mnohé funkcie umožňujú robiť jednoduché aplikácie priamo v kóde. Na popis vlastností prvkov sa používajú deskriptory (tagy), pomocou ktorých sa predpisuje veľkosť, poloha a špeciálne vlastnosti prvkov, ako aj odkazy na ďalšie prvky samotného textu alebo iných dokumentov. Celý komplex kódu sa nazýva hypertext a skratka HTML znamená Hypertextový značkovací jazyk, čo v preklade „veľký a mocný“ znamená „hypertextový značkovací jazyk“.
Špeciálny vývoj Html dostal spolu s vývojom WWW (World Wide Web), pretože bol vyvinutý ako univerzálny jazyk pre všetky zariadenia bez ohľadu na vybavenie, ktoré je na nich dostupné. Použitie jazyka umožňuje štrukturálne zobrazenie informácií a zjednodušuje ich vnímanie. V porovnaní s tlačovinami by to zodpovedalo stĺpcom a stranám novín. Nadpisy, umiestnenie obrázkov, tabuľky - to všetko je potrebné pre štruktúrovanú prezentáciu, pretože je veľmi ťažké prečítať solídne pole textu.
Prvé verzie HTML boli roztrúsené a chýbala im jednota. V dôsledku toho sa musel vypracovať určitý jednotný štandard. Toto sa uskutočnilo v roku 1995 a štandard bol formalizovaný ako oficiálna verzia HTML 2.0. Po 2 rokoch (v roku 1997) k nemu pribudli niektoré funkcie. Nový formát dostal názov HTML 3.0 a navrhol ho W3C ( World Wide Web konzorcium)... Teoreticky obsahoval všetky funkcie verzie 2.0, ale v tých časoch boli prehliadače veľmi obmedzené, takže plná kompatibilita nefungovala. Do konca roku 1997, po testovaní verzie 3.2 jazyka, bol prijatý nový štandard 4.0. V ňom boli staré deskriptory zrušené a objavili sa nové, najmä používanie kaskádových štýlov ( CSS).
Základná štruktúra dokumentu
Najmodernejší softvér na úpravu stránky ako napr Dreamweaver a Microsoft SharePoint Designer, automaticky vytvorí základnú štruktúru dokumentov, ale aby ste si ju mohli správne prečítať a vytvoriť sami, musíte sa oboznámiť s jednoduchými pravidlami.
Označenie dokumentu sa vykonáva pomocou značiek, spravidla - spárovaných (otváranie a zatváranie). Štítky sú uzavreté v lomených zátvorkách a používateľovi sa nezobrazujú, ale striktne dodržiavajú rozloženie stránky.
HTML dokument začína a končí značkami formátu dokumentu.
<html>
Tu je kód stránky
html>
Pred tagom dokumentu môže byť štandard, s ktorým sa bude obsah zobrazovať (tag DOCTYPE).
Dokument rozlišuje medzi nadpisom, ktorý prehliadač číta, ale nezobrazuje sa v okne, a telom stránky, ktoré v skutočnosti vidí používateľ.
Názov je definovaný značkami a a obsahuje údaje na formátovanie dokumentu. Hlavička obsahuje aj načítané skripty, ktoré sú potrebné na zobrazenie údajov. V značkách < názov> a názov> píše sa nadpis stránky, ktorý sa zobrazuje v nadpise okna alebo záložky.
Kód hlavnej stránky je reprezentovaný pomocou značiek
a
... Na obrazovke sa zobrazí všetko, čo je medzi nimi napísané, okrem prvkov, pre ktoré sú špecifikované špeciálne hodnoty, a samotných značiek na formátovanie dokumentu.
Štruktúra dokumentu HTML môže byť znázornená nasledovne.
>
< názov> Názov stránky (odráža sa v okne!) názov>
Názov dokumentu. Nezobrazuje sa na obrazovke
Telo dokumentu. Zobrazené na obrazovke
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ť elementárne stránky, rozumieť samotnému kódu, vedieť, čo sa za čím skrýva a čo by malo byť, 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 HTML
Ak neviete to najzákladnejšie, cesta je pre vás ďalej uzavretá. Verím, že každý človek, ktorý sa rozhodne venovať vývoju a tvorbe stránok, by mal poznať a pochopiť základy toho, 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é potrebujete vedieť. Ak chcete krásne navrhnúť list na odoslanie poštou, máte svoju vlastnú skupinu Vkontakte, skupinu v iných sociálnych sieťach, rovnaký kanál youtube, musíte sa pohrabať v kóde na ktoromkoľvek z motorov stránok, stačí poznať základné pojmy.
Uviedol som len pár príkladov, v skutočnosti sa teraz tieto poznatky čoraz viac využívajú na internete. 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, jazyk značiek, s ktorým sa na internete stretávate každý deň. Tagy popisujú štruktúru dokumentu. Označené uhlovým< >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 skôr, ako už uvidíte hotový obrázok. Prehliadače spracovávajú dokument postupne, od začiatku do konca. Vrátane všetkého, čo by malo byť na stránke úplne. 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, výsledný formátovaný text sa zobrazí na monitore vášho počítača alebo mobilného zariadenia.
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é. Poďme si to rozobrať 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 opíšem, kto je za čo zodpovedný.
Vitajte na mojom blogu, teraz absolvujete 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 na váš e-mail.
Blog Evgenyho Nesmelova! Základy html a css stránok pre začiatočníkov
Z akých značiek sa skladá ktorýkoľvek html dokument, čo obsahuje a kde to všetko treba napísať.
< html > < body > < h2 >< / h2 > < p >Vitajte na mojom blogu, teraz absolvujete tutoriál o základnom 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 z vašej e-mailovej schránky.< / p > < h2 >BlogEvgeniya Nesmelova! 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ú uzavreté v lomených zátvorkách. Toto všetko sa nazýva prvky. Všetky prvky sa zvyčajne skladajú z dvoch značiek, otváracej a zatváracej. Najprv vám odporúčam, aby ste si pozorne prezreli značky, ak vám niektorá z nich chýba a nezatvoríte ju, budete musieť opraviť veľké časti kódu, aby ste našli chybu.
Boli prípady, keď to trvalo viac ako jeden deň, človek prosí o pomoc, nevie nájsť chybu na svojej stránke, preto si vždy veľmi pozorne pozerajte, čo a kde píšete. Poďme sa teraz pozrieť na každý prvok z kódu pomocou tohto príkladu, čo je v ňom napísané, čo to znamená a aký je výsledok.
Väčšina značiek je spárovaná, čo zahŕňa úvodnú a záverečnú. Okrem týchto značiek existujú aj samostatné značky. Štítky môžu ísť spolu s ostatnými, a tak sa do seba vnárať. Napríklad zobraziť text tučným písmom a kurzívou naraz.
Text
< strong > < i >Text< / strong > < / i > |
Štruktúra html dokumentu
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 – zmení značku. Môžete napríklad zarovnať odsek na stred alebo doprava, rovnakým spôsobom nastaviť polohu obrázka na strane a podobne.
VŽDY zatvorte štítky, ak ho otvoríte, nezabudnite ho zavrieť. V opačnom prípade dôjde k chybe 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. Nadpis je všetko, čo značka obsahuje.
... Telo dokumentu ( ), telo dokumentu obsahuje celý obsah stránky. Ak je potrebné nechať si kúsok kódu pre seba a priložiť tak tieto značky do komentára, použite značku... Všetko 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 to zatvoril... Tento kód je prítomný v absolútne každom dokumente, hovorí prehliadaču, že všetko 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 prehliadače to nevnímajú. Na samom začiatku dokumentu sa štítok otvorí a na samom konci ho treba zavrieť.
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, jej popis, kľúčové slová pre vyhľadávače a kódovanie. Trochu nižšie o kódovaní.
Obsah< head >Obsah< / head > |
</h3>
<p>Táto značka je súčasťou hlavy, musí byť napísaná vo vnútri značky hlavy. Táto značka názvu je povinná a musí byť prítomná v každom html dokumente. Okrem toho sa zobrazuje ako názov okna prehliadača. Dĺžka takéhoto nadpisu by nemala presiahnuť 60 znakov. Text takéhoto nadpisu by mal obsahovať čo najúplnejšie informácie, ktoré charakterizujú obsah stránky.</p>
<p>Ak ste v nadpise napísali „Ahoj svet“, 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, čím sa zhoršujete. Informácie obsiahnuté v tejto značke sa musia zhodovať s obsahom vašej stránky.</p>
<h3><meta></h3>
<p>Za požadovaným názvom title je voliteľný, ale tiež dôležitý meta tag. Táto značka je jednoduchá. Táto značka sa používa na nastavenie popisu stránky (description) a jej kľúčových slov (keywords).</p>
<p><meta name="keywords" content="Kľúčové slová sú oddelené čiarkami">
<meta name="description" content="Popis stránky nie viac ako dve vety"></p>
<p>Okrem toho môže metaznačka obsahovať údaje o autorovi stránky a ďalšie vlastnosti metadát. Môžete zakázať indexovanie stránky ako celku pre vyhľadávače. Nastavte automatické obnovenie stránky po 20 sekundách alebo po 5 sekundách s následným prechodom na inú stránku.</p>
<p><meta name="robots" content="index, follow">
<meta content="20">
<meta content="5; url=http://сайт/"></p>
<table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show">
</td>
<td class="crayon-code"><p><
meta
name
=
"robots"
content
=
"index, follow"
>
</p><p><
meta
http
-
equiv
=
"refresh"
content
=
"20"
>
</p><p><
meta
http
-
equiv
=
"refresh"
content
=
"5; url=http://сайт/"
>
</p>
</td>
</tr></table><p>Takýchto meta prvkov môže byť viacero, 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é.</p>
<h3><style></h3>
<p>Тег style так же можно использовать для задания стилей на странице. Если вы используете много разных стилей css, в таком случае желательно задавать их в отдельном файле. Если нужно указать несколько из них, все это можно задать прямо в html документе.</p>
<p><style type="text/css">
.base {
width: 100px;
background-color: #000;
height: 150px;
color: #fff;
}</p>
<table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show">
</td>
<td class="crayon-code"><p><
style
type
=
"text/css"
>
</p><p>Base
{
</p><p>width
:
100px
;
</p><p>background
-
color
:
#000;
</p><p>height
:
150px
;
</p><p>color
:
#fff;
</p>
</td>
</tr></table><p>Или добавить стили конкретно к одному тегу, для этого внутри самого тега нужно добавить элемент style. Данный тег нужно использовать внутри контейнера <head>, который задает стили для страницы. Можно использовать несколько таких тегов, ошибкой это не будет.</p>
<table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show">
</td>
<td class="crayon-code">
</td>
</tr></table><h3><link></h3>
<p>Немного похожий с предыдущим тегом, с помощью тега link можно задать стили для документа, которые находятся в другом файле. Другими словами, можно подключить к существующему документу полную таблицу стилей css, которая состоит из множества свойств. Тем самым вы уменьшаете размер документа, который в итоге будет быстрее грузиться и открываться на компьютере или мобильном устройстве при слабой скорости интернета.</p>
<p>Подключать можно больше одного файла, тут ограничений нет. Закрывать такой тег не нужно. Если все сделать правильно, к вашему документу будут подгружаться конкретные стили из отдельного файла. Данный тег можно добавить в основы html и не забывать про его существование. В итоге получается такая картинка:</p>
<p><link href="css/style-lg.css" rel="stylesheet">
<link href="css/style-md.css" rel="stylesheet">
<link href="css/style-sm.css" rel="stylesheet"></p>
<table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show">
</td>
<td class="crayon-code"><p><
link
href
=
"css/style-lg.css"
rel
=
"stylesheet"
>
</p><p><
link
href
=
"css/style-md.css"
rel
=
"stylesheet"
>
</p><p><
link
href
=
"css/style-sm.css"
rel
=
"stylesheet"
>
</p>
</td>
</tr></table><h3><script></h3>
<p>С помощью тега script к документу можно подключить разные сценарии (скрипты). Присутствие закрывающего тега обязательно. Сам скрипт может располагаться в начале документа, внутри и в конце.</p>
<p><script type="text/javascript" href="http://html5shim.googlecode.com/svn/trunk/html5.js"></script></p>
<table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show">
</td>
<td class="crayon-code"><p><script
type
=
"text/javascript"
href
=
<span>"http://html5shim.googlecode.com/svn/trunk/html5.js"
</span>>
</script>
</p>
</td>
</tr></table><h3><body></h3>
<p>Говорит браузеру, что все помещенное между этими тегами, должно отобразиться в окне вашего браузера. Вот основные теги, которые могут присутствовать абсолютно в каждом документе. Тег body служит в качестве основного тела страницы, который включает в себя все ее содержимое. Данный тег желательно открывать и в конце документа не забыть закрывать.</p>
<h3>Заголовки страницы h1 h2 h3</h3>
<p>Поехали дальше, мы видим тег <h1>, который так же открывается и закрывается. Данный тег обозначает основной заголовок текста, в большинстве случаев под заголовком H1 идет название страницы. На самом деле данных заголовком всего шесть. <h1> <h2> <h3> <h4> <h5> <h6>. Их так же используют в SEO, но это уже немного другая тема. Я обязательно выделю для этого одну статью и дам подробное описание для них, подписывайтесь на обновления блога, чтоб ничего не пропустить.</p>
<p>Наличие таких заголовком в статье сыграет важную роль при продвижении страницы. Кроме этого, ихнее использование дает вам четкую структуру страницы, ее заголовок, подзаголовки, выделения, подпункты и так далее. Всегда пользуйтесь ними и применяйте на практике. На многих CMS, например таких как WordPress, при написании текста, можно заметить «заголовок 1», "заголовок 2", "заголовок 3" и так далее. Именно они и отвечают за h1, h2 и h3.</p>
<h3><p></h3>
<p>Если вы пишите основной текст с нового абзаца, вы пишите тег <p>В начале и закрываете его в конце </p>. Обозначение абзаца в html равносильно создание нового абзаца в документе MS Word. Больше ничего нового в документ я не добавлял. Но, это еще далеко не все, что должно присутствовать в html документе. Посмотрим на еще один пример, описание будет немного позже.</p>
<p><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML документ
Этот текст будет полужирным, а этот - ещё и курсивным
< ! DOCTYPE html > < html > < head > < meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / > < title > HTML документ< / title > < / head > < body > < p > < b > < / b > < / p > < / body > < / html > |
Основные элементы Head и Title
В каждом документе присутствует элемент head и Title. Первый из них
, который идет сразу после первого тега . В данном теге идет вся информация о странице, в нем так же заключается элемент| < / html > |
Как видите, ничего сложного нет. Перед вами самые основные теги, которые должны присутствовать в каждом html документа. Не забывайте закрывать каждый из них, иначе браузер не сможет воспринять полноценную картину кода. Это нужно знать и помнить всегда. Дальше вы уже начинаете вставлять текст, картинки, видео и так далее. Но это уже будет в других статьях.
Редактор Notepad++
Для работы с кодом используйте программку Notepad++. Она бесплатная, найти ее в интернете не составит труда. Очень удобная для восприятия любого кода, так же удобно показывается открывающийся тег и закрывающийся. Поддерживаем синтаксис более 40 языков программирования. Как раз то, что нужно для изучения основ html.
Notepad превышает во всех смыслах обычный блокнот. Для максимального удобства, простоты и учебы данный редактор изначально необходимо установить на компьютер. Самое основное преимущество и удобство, редактор Notepad++ показывает подсказки при написании кода, что делает вашу работу быстрее и качественней в разы.
Элемент DOCTYPE
В каждом документе так же должен быть указан вот такой элемента doctype. Для чего он нужен и что в нем должно быть. Обычно народ сильно не увлекается этими строчками, копируют себе в документы и работают спокойно. Данные элементы говорят браузеру, какая версия html используется в документе, какое описание страницы, какая используется кодировка, какие ключевые слова включены, кто автор и как называется страница.
Ставятся они обычно в самом начале. Существует несколько вариантов и все они отличаются друг от друга, я напишу один пример, который используется чаще всего. Данную заготовку можно использовать как готовый шаблон. Далее будет понятное описание каждой строчки, проблем с этим быть не должно.
Коротко на понятном языке про основы html: Данная строчка говорит браузеру о том, что данный документ является XHTML версия 1.0, используется английский язык и вся эта каша расположена по данному адресу. Далее в теге meta указываем кодировку, которая используется. Чаще всего используется виндовс 1251.
Description — затрагивается тема по SEO, один из трех главных тегов, который должен присутствовать абсолютно в каждом документе, данный тег указывает описание страницы. Что написано на этой странице, короткое описание, не больше двух предложений. Тег keywords, так же затрагивается тема по SEO, данный тег является обязательным. В нем пишутся ключевые слова, по которым пользователи интернета будут находить вас через поисковые системы.
В теге title идет название самого документа, его заголовок, который мы видим в браузере. Наверное самый важный тег во всем документе, который больше всего влияет на продвижение страницы. В статье по добавлению и оформлению идет описание данного тега более детально.
Что необходимо запомнить с данного урока про основы html:
- Почти все теги открываются и закрываются;
- Начинается документ с тега ;
- Наличие тега ;
- Наличие тега ;
- Четкая структура html документа.
Все главные страницы всегда должны называться словом index . Так принято и так все привыкли, без разницы какое будет расширение у файла, это может быть и html и php. Называется он всегда только так.
Посмотрите видео про основы html от компании Webformyself.
Язык гипертекстовой разметки, базовые элементы и структура. Все это и многое другое я постараюсь описать на своем блоге. В первую очередь для новичков будет написана полезная информация, предоставлен пример кода и возможность скачать сам пример вместе с готовой страницей.
HTML (Hyper Text Markup Language)-это специальный язык разметки документов. Важно отметить, что здесь речь идет об электронных, а не о печатных документах.
Печатный документ имеет строго заданные размеры страницы и полей. В нем точно заданы параметры шрифтов. Электронные документы, Web-страницы предназначены не для печати на принтере, а для просмотра на экране. Заранее неизвестно, на каком компьютере документ будут просматривать. Неизвестен размер окна обозревателя и неизвестно, какие имеются шрифты.
Язык HTML специально создан, чтобы оформлять экранные документы, которые будут воспроизводиться неизвестными средствами. Изначально язык HTML предназначался не для форматирования документа, а для его функциональной разметки . Например, «заголовок» - это характеристика содержания, а не оформления. Программа для просмотра документа на экране (браузер, броузер, обозреватель), выбирает свой способ отображения части документа, описанной как заголовок.
Создание документа на языке HTML аналогично программированию. Автор документа берет обычный текст и вставляет в него специальные коды (их называют тегами). Когда документ просматривается, теги выполняют роль команд. Например, если в начале абзаца стоит тег
Теги HTML позволяют выполнять выравнивание строк документа, управлять фоном и цветом шрифта, вставлять иллюстрации и обтекать их текстом, включать в документ мультимедийные объекты и многое другое. В результате получаются содержательные и эффектно оформленные Web-документы.
Среди многочисленных тегов HTML есть специальная группа тегов, предназначенных для создания гипертекстовых ссылок. Гипертекстовая ссылка - это выделенный фрагмент текста или иллюстрация, с которыми связан адрес другого документа. Обычно гипертекстовые ссылки выделены подчеркиванием или другим цветом. Если на гипертекстовую ссылку навести указатель мыши, то он изменит форму. Если на гипертекстовой ссылке щелкнуть левой кнопкой мыши, произойдет переход к другой Web-странице, возможно, находящейся на другом сервере, может быть даже на другом континенте.
Документы, созданные в формате HTML сохраняют в файлах с расширением html или htm.
Теги html
Управляющие конструкции языка HTML называются тегами. Теги – это наборы символов, с помощью которых выполняется разметка текста. Все теги записываются в угловых скобках, которые формируются символами «меньше» (<) и «больше» (>). После открывающей скобки идёт ключевое слово, определяющее тег.
Регистр букв в названиях тегов не имеет значения. Однако принято записывать теги прописными буквами, чтобы они отличались от основного текста.
Теги бывают парные и непарные . Для воздействия на часть документа (например, на абзац) используют парные теги: открывающий и закрывающий . Открывающий тег создаёт эффект, а закрывающий прекращает его действие. Закрывающие теги начинаются с символа косой черты (/).
Непарные теги воздействуют на весь документ или дают разовый эффект в месте своего появления. В этом случае закрывающий тег не употребляется.
Если по ошибке в теге записано ключевое слово, отсутствующее в языке, то тег полностью игнорируется.
При просмотре документа в браузере сами теги не отображаются, но влияют на способ отображения документа.
На эффект, создаваемый тегом, могут влиять атрибуты. Атрибуты – это служебные слова, отделённые от ключевого слова тега и друг от друга пробелами. Если требуется указать значение атрибута, то оно записывается после знака равенства и заключается в кавычки. В парных тегах атрибуты добавляются только к открывающему тегу. Закрывающие теги никогда не содержат атрибутов .
Язык HTML позволяет вводить в документ
Hodnota avatarov v psychológii
Hodnota avatarov v psychológii
Ako zdôrazniť písmeno v MS Word
Čo to znamená, ak je avatar osoby
Ako si vytvoriť svoj vlastný Twitter moment