Html css pro začátečníky čerstvé lekce. Základy CSS pro začátečníky. Základy HTML a CSS pro začátečníky

Vzdělávací program

Gumové rozložení se nazývá rozložení, ve kterém se web mění v závislosti na šířce prohlížeče.

Podle našeho názoru je kvalitní gumové rozložení znakem dovednosti projektanta a designéra dispozice. Při vývoji a údržbě liknavého webu čelí designéři, technologové a editoři mnoha výzvám. Za prvé, obrázky a text se musí chovat adekvátně a zůstat čitelné v jakémkoli rozlišení. Za druhé, v rozložení by neměly být žádné díry.

Hlavní výhoda gumové rozložení spočívá v tom, že se uživatel sám rozhodne, jakou formou si web prohlédne. V rukou má nástroj, kterým si může upravit maximální šířku stránek, která se mu hodí – prohlížeč, jehož velikost lze vždy změnit.

Nejběžnějším problémem s proměnlivým rozvržením jsou textové bloky, které se nedají číst a při vysokých rozlišeních se příliš roztahují. Jakob Nielsen ve své knize Web Design tento problém a jeho příčiny podrobně popisuje: studie ukázaly, že uživatelé obtížně čtou texty, ve kterých oko nepokryje celý řádek. Známý faktže noviny omezují šířku sloupce textu. To se samozřejmě vyplatí dělat na internetu.

Existují dva důvody, proč nechtějí vyrábět „gumu“: estetický a technologický.

Odpověď pro estéty

Estetické „proti“ spočívá v tom, že někteří vývojáři považují pevné rozvržení za stabilnější, a proto uživateli připadají „nativní“ a „útulné“. Ale „emocionální vnímání“ webu není to, na co by se vývojáři rozhraní měli zaměřit, je často velmi subjektivní.

Bojujeme se strachy technologů

Technologická příčina se scvrkává na soubor obav.

Co dělat se vznikajícími dutinami?

Dobře navržených gumových stránek, kde se tento problém řeší, je poměrně dost. Online publikace „Vremya-n“ roztahuje obrázky do vysokého rozlišení. Obrázky Google používají bloky, které přeskakují z řádku na řádek v různých šířkách prohlížeče.

Co dělat s širokými textovými bloky?

Můžete použít vícesloupcovou strukturu. V tomto případě bloky při natahování zůstávají čitelné. Tato metoda je implementována na Lenta.ru. Ale i na běžném třísloupcovém webu můžete dosáhnout čitelnosti textu.

Většina kaučukových webů, které si pamatujeme, byla vytvořena na počátku roku 2000, kdy nebylo tolik příležitostí jako nyní. Tehdejší webové stránky byly „přilepené“ k okrajům obrazovky a protaženy pouze středovým sloupcem. Přitom ten text byl samozřejmě strašně natahovaný.

Schéma místa s protahovacími středovými a pevnými bočními sloupy.
Při vyšším rozlišení je středový sloupek neúměrně natažený.

Efektivnější možností by bylo rozšířit pokud možno všechny sloupce a hlavně okraje mezi nimi a k ​​okrajům prohlížeče. Jednoduše řečeno, sloupce a vzdálenosti mezi nimi by měly úměrně měnit svou velikost. V tomto případě bude web vypadat hezky i ve vyšším rozlišení.

Diagram místa s proporcionálně roztaženými sloupy a vzdálenostmi mezi nimi.
U tohoto schématu je středový sloupek znatelně užší než v předchozí verzi.

Co dělat s obrázky?

Mnoho webů postavených na grafice je opraveno, ale marně. Například web Drive.ru, přestože jeho záhlaví tvoří pouze obrázky, funguje skvěle v jakémkoli rozlišení. A Autorambler, jehož podstatou je ukázat jeden karasový obrázek, jej jednoduše roztáhne tak, aby zaplnil celou obrazovku. Moderní prohlížeče umí obrázky poměrně efektivně komprimovat a roztahovat.

Pokud design obsahuje krásnou grafickou hlavičku v plné šířce, není to také překážkou pro vytvoření gumového rozložení. Stačí požádat návrháře, aby nakreslil záhlaví o šířce 2000 pixelů. Rozvržení ořízne obrázek při malých rozlišeních a při velkém rozlišení bude obrázek viditelný téměř celý.

Diagram webu s oříznutým grafickým záhlavím.

Výjimky z pravidel

Většině webů nebude vadit, že jsou gumové. Stále však existují možnosti, ve kterých není „guma“ potřeba. Nemůžete například přetahovat datové tabulky – široké sloupce jsou obtížně čitelné. A pokud se celý web skládá z takových tabulek, pak má smysl to opravit.

V některých případech je možný kompromis, když se web roztáhne jen do určité velikosti. Například v blozích kde většina z obsah na stránce je publikace nebo zpravodajské weby (Lenta.ru).

Jakýkoli problém s rozložením gumy, o kterém se kdy diskutovalo, je řešitelný. Tohoto tématu jsme se dotkli povrchně, ale naším cílem je vytvořit produkt, který je uživatelsky co nejpříjemnější. A gumové rozložení je jedním z nástrojů, který se nechceme bát použít.

„Gumové rozložení

Všechny šablony, které jsme vytvořili, měly pevnou šířku: to znamená, že šířka jednotek, sloupců, oblastí atd. zůstává při změně velikosti okna prohlížeče konstantní. Většina komerčně úspěšných webů tento princip využívá již od nástupu internetu. Tento přístup se ukázal jako nejvíce účinná metoda rozložení, které vám umožní vytvořit kvalitní design v prostředí, které není vždy vhodné pro návrháře.

Nemohu si však pomoct a neuvažuji "gumové" rozložení– vytváření stránek, které mění velikost v závislosti na oblasti zobrazení.

Návrháři chtějí vytvářet weby, které skutečně zohledňují preference uživatelů. Nemůžeme proto zavrhnout přesvědčivé argumenty, na které míří proti stránky pevná šířka a zasahující za"gumové" rozložení. Pevná šířka webové stránky v podstatě odráží návrhářovu zálibu v ovládání. skutečné použití, zatímco stránky, které se mění v závislosti na zobrazované oblasti, berou nejprve v úvahu potřeby uživatele.

Dá se říci, že kdy velká velikost na obrazovce, měl by web zabírat celou dostupnou oblast a kdy malá velikost– odpovídajícím způsobem snížit. Nebylo by úplně fér tvrdit, že „fluidní“ layout se snaží přizpůsobit všem uživatelům, ale jeho úkol se tomu blíží. Internet je konglomerát mnoha systémů, které slouží široké skupiny uživatelů způsobem, který nejlépe vyhovuje jejich individuálním potřebám. Souhlasíte s tím, že stejné vnímání obsahu nebo funkčnosti stejné stránky je nemožné. Proč by měl být vzhled pro všechny stejný? Fluid layout je vhodnější pro internet a lépe zohledňuje jeho silné stránky a slabé stránky než stránky pevné velikosti. Jak již bylo uvedeno dříve, čím přirozenější je řešení, tím je účinnější.

Až donedávna nám možnosti webdesignu neumožňovaly plně si užít „plynulé“ uspořádání. Nové možnosti prohlížeče spolu s inovacemi v CSS a JavaScriptu, které jsou zaměřeny na zařízení, umožňují návrhářům vytvářet mnohem dynamičtější stránky.

Inovativní designéři se nyní mohou zapojit do toho, co je známé jako „responzivní“ webový design. Ethan Marcotte, silný zastánce, tvrdí, že tento přístup otevírá nové možnosti:

Pomocí standardních technologií můžete web učinit pohodlným a atraktivním vzhledem tak, aby byl nejen flexibilnější, ale také se přizpůsobil prostředí, ve kterém je implementován.

Tyto technologie se vyvíjejí neuvěřitelně rychle, a tak jsem se rozhodl, že se jim ve své knize nebudu věnovat. Dosud nebyly nalezeny nejlepší postupy pro responzivní webdesign.

Základní principy designu však zůstávají v platnosti bez ohledu na vývoj nového přístupu. Je také pravda, že návrháři by měli i nadále sdílet kontrolu nad svými vlastními výtvory s uživateli, kteří chtějí ovládat své akce. Bylo by chybou si myslet, že responzivní web design znamená dát uživatelům úplnou kontrolu, protože ve skutečnosti jen potřebují některé funkce. Uživatelé doufají, že jim designéři nejen poskytnou nějakou skořápku, ale také ji dostatečně zdokonalí, aby byla zvládnutelná.

Návrhář by měl za uživatele učinit některá rozhodnutí, ale ne všechna, ale pouze ta, která pomáhají ve vnímání. Návrhář umožňuje uživateli ovládat aspekty vnímání, které jsou pro jeho cíle nejdůležitější, ale uživatel se musí stále cítit stabilně a spolehlivě.

Responzivní web design tento úkol nijak neusnadňuje. Vlastně si to komplikuje. Bude ještě více situací, se kterými je třeba počítat, více kombinací prvků uživatelské rozhraní PROTI různé kombinace, což znesnadní vnímání stránek. Tím se mřížka stává ještě důležitější pro obecný design; vytvoření silné mřížky v jádru responzivního webového designu jej učiní uzemněnějším a spolehlivějším.

Stejné principy návrhu založené na mřížce lze použít jak v proměnlivém rozložení, tak v responzivním návrhu webu. Jednotky lze spojovat do sloupců a ploch a měnit velikosti prvků v závislosti na základních parametrech mřížky. Tyto prvky by měly růst a zmenšovat se podle stejných parametrů, ale je důležité si uvědomit, že ne vše se musí změnit. Některé prvky mohou a měly by zůstat nezměněny. V prostředí, kde se velikosti prvků donekonečna mění, je velmi důležité zachovat konzistenci a poskytnout uživatelům určitý druh reference. Jak se tato teorie vyvíjí, otevírají se nové příležitosti pro designéry pracující v této oblasti. Ústřední role designéra ale zůstane nezměněna – člověka, který řídí uživatelské vnímání.

Z knihy Adobe InDesign CS3 od Zavgorodniy Vladimir

Rozložení ve více sloupcích Hlavním designovým prvkem všech novin je rozložení ve více sloupcích. Protože je obtížné si představit řádek o délce celé stránky novin, návrhář stránku rozdělí do samostatných sloupců; jejich počet závisí na formátu novin Kdy

Z knihy 300 nejlepších programů pro všechny příležitosti autor Leontyev Vitaly Petrovich

Rozvržení s ilustracemi Dalším rysem rozvržení časopisu, který je důležité si zapamatovat, je velké množství snímky. Pokud pro novinový článek (kratší, zabírající část stránky) stačí jedna nebo dvě ilustrace, pak delší články v časopisech vyžadují

Z knihy O čem se v knihách o Delphi nepíše od Grigorieva A. B.

Finální podoba a rozvržení letáku Prvním úkolem při konečném návrhu letáku je návrh nápisu „Nový“, který naše čtenáře pravděpodobně trápí již delší dobu Pro design zvolíme jednoduchý vizuál technika, která se často používá

Z knihy HTML 5, CSS 3 a Web 2.0. Vývoj moderních webových stránek. autor Dronov Vladimir

Konečné rozložení stránky Konečné rozložení stránky bude v našem případě zredukováno na následující operace: umístění servisních informací na stránku (například záhlaví a zápatí); vyplnění stránky skutečným textem (skutečné televizní programy, výběr skutečných

Z knihy HTML 5, CSS 3 a Web 2.0. Vývoj moderních webových stránek Vladimir Dronov

Rozvržení textu Prvním úkolem rozvržení bude přiřazení stylů importovanému textu. Měli byste také odstranit nadbytečné prázdné řádky (které se obvykle používají pro nadpisy a postranní pruhy v sazbě) a ponechat pouze prázdný řádek mezi textem postranního pruhu a následujícím běžným textem.

Z knihy Mobily na prvním místě! od Wroblewského Luke

Layout a předtisková příprava textu

Z autorovy knihy

1.3.4.2. Operace s gumovou čárou a rastrem Nyní musíme dát uživateli možnost kreslit čáry. K tomu používáme standardní gumovou linku: uživatel stiskne levé tlačítko myši a při jeho držení pohybuje myší. Dokud držíte tlačítko stisknuté,

Z knihy autora Z knihy autora

Rozložení s více sloupci Rozložení s více sloupci je něco, co ve webovém designu dlouho chybělo. Někteří nadšenci to již dlouho implementují pomocí tabulek nebo kontejnerů, ale nyní mají „legální“ prostředky k rozdělení textu do libovolného počtu sloupců.

Z autorovy knihy

7 Rozvržení ZÁSADY ORGANIZACE OBSAHU a prvky rozhraní používané při vývoji designu běžných stránek mohou být nepochybně užitečné při navrhování mobilní webové aplikace. Ale jak si můžete být jisti, že tyto zásady budou relevantní pro kohokoli

01.10.2013 01:04 73845

Fluidní layout webu (stejně jako pevný layout) začíná vytvořením tzv. skeletu neboli rámce pro další vývoj. Obecně platí, že rozvržení html je konstruktor. Nejprve je vytvořen hlavní kontejner, základ, který bude následně odpovídat za minimální a maximální šířku celého webu a hranic. Pokud vše uděláte správně, pak změnou maximální velikosti můžete zvětšit maximální velikost webu například z 1280px na 1360px nebo 1920px prakticky bez úprav kódu (a někdy i bez nich). Neměli byste dělat nekonečnou gumu, protože na velkých monitorech je nečitelná. Ideální variantou by bylo html rozložení, které zahrnuje všechna hlavní rozlišení obrazovky, včetně mobilních, například gumové rozložení pro rozlišení obrazovky od 240px do 1920px.

Je tu pár typy html vzhledově odlišné uspořádání. Než přejdeme k praktické konstrukci rámu, pojďme se krátce podívat na tyto typy rozložení:

Vizuálně různé typy rozložení jsou: Fluidní rozložení, pevné rozložení, adaptivní rozložení. Adaptivní rozložení lze kombinovat s fluidním rozložením.

Vlastnosti každého typu rozvržení:
1) Pevné rozložení – schopnost kontejneru hlavního webu mít stejnou šířku bez ohledu na rozlišení monitoru. Pokud je obrazovka menší než pevná velikost hlavní kontejner, poté se objeví boční rolování (rolování doleva a doprava).

2) Pryžové uspořádání - schopnost kontejneru hlavního místa se roztáhnout do šířky od a do zadaných minimálních a maximálních rozměrů. Fluid layout může být bez udání minimální (na obrazovkách menších než Npx to nebude vypadat moc slušně, statické objekty mohou plavat na sobě, pokud nepřidáte přizpůsobivost) nebo maximální velikost, pak se bude roztahovat donekonečna ( představte si, jak bude článek vypadat v rozlišení 7000px, téměř na jednom řádku), takže dobrý html uspořádání má vždy rozumné limity. Proto byste měli vždy zkontrolovat výsledek rozložení v různých rozlišeních a v různých prohlížečích.

3) Adaptivní rozvržení – schopnost jak hlavního kontejneru, tak kteréhokoli z prvků webu se přizpůsobit rozlišení obrazovky, a tím vám umožní měnit velikost písma, umístění objektů, barvu a vše, co si můžete přát. Navíc se to děje dynamicky, bez zásahu uživatele, například pomocí dotazů na média, které umožňují automaticky určit rozlišení monitoru, typ zařízení (mobil, smartphone, tablet) a nahradit zadané hodnoty PROTI automatický režim. To dává skvělé příležitosti. Například při kombinaci proměnlivého rozvržení s adaptivním můžete přizpůsobit zobrazení webu, od nejmenších mobilních rozlišení až po největší monitory. Adaptivní rozložení neovlivňuje možnosti flexibilních nebo pevných, doplňuje je.

Proto, nejlepší možnost dnes bude k dispozici rozvržení html, původně vytvořené jako gumové rozvržení, například 980px-1920px, upgradované na 240px pomocí adaptivní rozložení. Vždy si musíte pamatovat hlavní rozdíl:

Proměnlivé rozvržení funguje pouze s kontejnery, zatímco adaptivní rozvržení funguje jak s kontejnery, tak s jejich obsahem, což vám umožňuje měnit objekty, jako jsou písma, nahrazovat jeden objekt jiným a mnoho dalšího v závislosti na rozlišení obrazovky nebo zařízení. Pokuste se proto při plánování a vytváření svých projektů zohlednit tuto nuanci a pamatujte, že dnes je fluidní layout v kombinaci s adaptivním layoutem považován za dobrou formu při tvorbě webových stránek a zítra se může stát nevyřčeným standardem. Proto, abyste nemuseli dohánět později, je lepší předběhnout dnes, čímž se výše uvedená kombinace stane pro vás normou.

Rovněž stojí za zvážení platnosti webu při rozvržení. Panuje názor, že validita již dnes ovlivňuje výkon, alespoň ve vyhledávačích. systém Google. Při vytváření projektu se proto vždy vyplatí nahlédnout do online validátoru a ověřit validitu a pokud možno minimalizovat výskyt chyb. Obvykle se kontroluje platnost domovská stránka místo. Je obvyklé používat jej k určení platnosti webu. Za zmínku také stojí, že většina CMS má na některých místech kód, který neprojde validací.

To je často vidět v úplné novinky, kde je vizuální editor, zejména při nadměrném používání formátování a různých druhů zvýrazňování pomocí samotného editoru. Ale bez toho není kam, takže pokud hlavní stránka webu projde validací, bude to docela hodný výsledek a vnitřní stránky můžete projít, pokud je to možné. Někdy je třeba upravovat i v enginu, což ne každý umí, takže ve všem je potřeba rozumná míra a validita by měla být pro návrháře layoutu běžným jevem, každodenní normou, ale zároveň ne mánie, která vás nutí dělat validitu kvůli platnosti. Jen je potřeba se snažit to dělat co nejefektivněji a v rámci svých možností snížit počet chyb na minimum. Nakonec, pokud se vyskytne tucet nebo dvě chyby, web nepřestane fungovat, takže byste z nich neměli panikařit.

Nyní přejděme přímo k vytvoření rámce webu, který používá gumové rozvržení:
Nejprve musíme vytvořit obecný standard, jako vždy, doctype, servisní značky a mezi značky umístit samotný obsah budoucího webu. Protože účelem této lekce není popsat každou značku a její účel, ale ukázat metodu v praxi, nebudu se pouštět do popisu servisních značek, ale jednoduše uvedu příklad standardního zdrojového html pro jakýkoli web, v náš případ html5.

Rozložení rámu

Takto vypadá úvodní tělo webu i bez rámečku a vnitřních bloků. Toto jsou pouze informace, které prohlížeč potřebuje, online knihovna pro vnímání html5, protože je to stále jen doporučení a specifikace je stále html 4.1, i když rozšířené používání html5 je již v plném proudu. V servisních značkách jsou také metaznačky, název a soubor ve stylu css vizuální design náš rám.

Chcete-li vytvořit hlavní snímek, který se zmenší na 240 pixelů a zvětší na 1920 pixelů a při rozlišení větším než 1920 pixelů bude vycentrován, musíte umístit kontejner bezprostředně za značku body a zavřít ji před uzavírací značku body. Veškerý zbytek náplně je třeba implementovat dovnitř.

Obvykle se tento kontejner nazývá podobnými názvy, jako je wrap, wrapper atd., což znamená, že se jedná o obalový blok, který zahrnuje veškerý obsah hlavního rozvržení, bloky a obsah. Proto nebudeme znovu vynalézat kolo, ale pokusíme se použít obecně přijímané názvy tříd.
Třída je druh přezdívky pro jakýkoli kontejner, který lze jednou zaregistrovat a použít kdekoli, neomezené množství jednou.

Pokud například napíšete třídu ve stylech css, řekněme redblock a přiřadíte jí červené pozadí, pak každý blok, kterému tuto třídu přiřadíte, bude mít červené pozadí. Přiřazení třídy je velmi jednoduché. Požadovaný blok je napsán v uvozovkách požadované jméno, například redblock nebo wrapper, nebo privetvasya. Tento abstraktní třída, kterou si vymyslíte sami, jako přezdívku pro štěně.
Náš obalový kontejner, kterému jsme se rozhodli přiřadit třídu wrapper, by tedy mohl vypadat takto:

Ale protože jsme si jisti, že na celém webu budeme mít pouze jeden obalový kontejner, je vhodnější přiřadit mu identifikátor spíše než třídu. Rozdíl mezi identifikátorem a třídou je v tom, že třídu lze používat, jak chcete, ale na stránce může být pouze jeden identifikátor. Identifikátor má vyšší prioritu, protože je jeden, může být adresován specificky. Dá se to přirovnat k frontě na nádraží. Všichni slyšeli hlášení na nádraží, například občanka Kutuzova Adelina Matveevna, jděte k výpravčímu...

V tomto případě je oslovování občanky celým jménem obdobou identifikátoru v html (říkají také ID, ID, ID). A zpráva jako vážení cestující, odjezd vlaku...
Bude to srovnatelné s třídou, protože výzva se vztahuje na všechny cestující, bez konkrétní výzvy.

Přítomnost identifikátoru nezakazuje použití třídy a stejný název třídy a identifikátor (ID) se liší a k takovému bloku lze přistupovat buď podle třídy, nebo podle id.
Například:

Běžný výskyt, který umožňuje přístup k danému bloku několika způsoby. Ale tato informace obecný plán, na zahřátí. Tato lekce předpokládá, že již máte alespoň teoretické znalosti a porozumění výše uvedenému.
To znamená, že nebudeme komplikovat proces zvaný rozvržení webu, na základě kterého bude mít náš blok stále id a ne třídu, je jediný svého druhu, ale nepotřebujeme zde extra třídu. Proto ať je to takto:

Framework je připraven, nyní podle pravidel html5 použijeme sémantické značky, které vyhledávačům usnadní pochopení struktury, aby to hlavní nezůstalo bez povšimnutí. Znovu opakuji, v této lekci nebudeme zatěžováni popisem značek, proto je zde speciální sekce, ve které jsou html značky podrobně popsány, s ukázkou a možností experimentovat na vlastní kůži.

Upozorňuji na to, že si zpočátku zvyknete na hlavní pravidlo – obsahová část má v očích vyhledávačů větší váhu, čím je vyšší ve struktuře. Proto je při rozvržení nutné vzít toto v úvahu a dodržovat toto pravidlo:

Postranní panely a zápatí by měly být ve zdrojovém kódu umístěny níže než hlavní část, která by měla být zvýrazněna tagem článku, který vyhledávači označuje hlavní obsah. Dále použijeme tagy: header, main, article, aside, footer, jejichž účelem je především ukázat sémantický význam a priority ve struktuře. Rozložení našeho ještě negumovaného rozvržení tedy po přidání těchto značek bude vypadat takto:

HTML kód

Zobrazit kód

Rozvržení rámečku z webu Šablona rámečku záhlaví Pro budoucí web

obsah

Levý postranní panel Pravý postranní panel Zápatí

Takto bude vypadat naše html šablona, ​​ale abychom si vizualizovali naše rozvržení, musíme použít css styly. Za tímto účelem jsme podle očekávání zahrnuli náš soubor stylu css do hlavy. Nyní se můžeme obrátit na každý blok.

Za tímto účelem jsme jim výše přiřadili třídy a identifikátory, aby nedošlo k záměně jednoho divu za jiný. Některé sémantické značky, které máme v jednotné číslo, to není relevantní, protože na ně můžeme odkazovat jménem jako na značku, a to i bez třídy a id. Tím se zmenší velikost souboru stylů a neovlivní to výsledek.

Takže si myslím, že s html kódem je vše jasné, toto je jen budoucí anonymní rámec a flexibilního rozložení je dosaženo manipulací s css třídami. Adaptivní rozložení má stejné kořeny, je to css. Umožňují vám oživit rozvržení a reagovat na velikost obrazovky. Proto budou se souborem stylu css provedeny další akce.

Nebudeme se zabývat každým záznamem, protože se jedná o standard obsažený v každé šabloně stylů. Soustředíme se pouze na metodu, která umožňuje, aby boční lišty zůstaly pevné a zároveň se středová část natahuje od minimální až po maximální šířku, kterou si sami nastavíme, a bude se pohybovat v rozmezí 240px - 1920px.

Než začneme s recenzí css kód a (ve kterém není nic nadbytečného, ​​nechal jsem jen to, co je potřeba pro tuto lekci, plus pro viditelnost jsem přidal pozadí pro bloky a minimální výšku, aby byly bloky dobře vidět), věnujte pozornost několika nuance:

1) Pokud se podíváte pozorně, zápatí se nachází mimo hlavní kontejner. Není to náhodné, protože toto uspořádání umožní stlačit zápatí dolů. Myslím, že mnoho lidí vidělo na webových stránkách zápatí, které zůstává dole v jakémkoli měřítku. A mnozí chtěli vědět, jak se to dělá. Proto vysvětlím mechanismus po cestě, po kterém bude vše jasné.

2) Mnoho lidí, kteří na webu viděli 100% roztažitelné zápatí, záhlaví a gumové centrum, to již považuje za responzivní design. Není to tak úplně pravda, adaptabilita je širší pojem a pokročilejší transformace, ale v tuto lekci to se nebere v úvahu. Rozložení pryže však může být různých typů, včetně výše uvedeného typu. Okamžitě proto modernizujme naši šablonu tak, aby nakonec bylo záhlaví a zápatí vždy 100%, ale zároveň viditelná část obsah, který obsahovaly, byl od 240 do 1920 pixelů a byl vycentrován.
Toto je metoda, kterou jsem použil na tomto webu.

3) Proto musíme do našeho rozložení přidat něco dalšího, abychom mohli realizovat myšlenky popsané v druhém odstavci. Aby tedy naše zápatí a záhlaví byly vždy 100% (většinou jsou tyto bloky vyplněny pozadím, obrázky atd.) a zároveň jejich výplň nepřesahuje 1920px, provedeme následující:

1) Umístěte jej nad obalovou nádobu přímo před tělo
2) Vytvořme několik bloků se stejnou třídou, například já tomu obvykle říkám .maxw, takže nebudu vybočovat ze svých pravidel. Pojďme ji přidat do záhlaví a zápatí a přiřadit tuto třídu naší hlavní sekci s třídou .section. Přidáme také podmínku pro starší verze IE, s voláním sady pravidel v případě přihlášení z IE< 9 (если такие пользователи еще есть), и специальный метатег meta name =" viewport " для корректного соотношения масштаба на устройствах типа планшет, смартфон, и тд (такие пользователи точно есть).
3) Abychom mohli ovládat chování našich bloků při rozlišení obrazovky pod 980px, přidáme úplně dole do souboru stylu pravidla @media, ve kterých zaregistrujeme potřebné změny pro určité bloky, v našem případě pro postranní panely. Donuťme je, aby se při rozlišení obrazovky pod 980px přesunuli pod obsahovou část a zarovnali na střed.
V důsledku toho bude naše rozvržení html vypadat takto:

Finální html kód

Zobrazit html kód

Rozvržení rámečku z webu Šablona rámečku záhlaví Pro budoucí web

obsah

Levý postranní panel Pravý postranní panel Zápatí

Náš soubor stylu bude vypadat takto:

CSS kód

Zobrazit css kód

* ( okraj: 0; odsazení: 0; ) html ( výška: 100 %; ) záhlaví, navigace, sekce, hlavní, článek, stranou, zápatí ( zobrazení: blok; ) tělo ( výška: 100 %; šířka: 100 %; background: #fefefe; ) .maxw ( margin: 0 auto; min-width: 240px; max-width: 1920px; ) header (min-width: 240px; width: 100%; height: 220px; background: #74C9FF; ) #wrapper ( pozice: relativní; okraj: 0 auto; výška: auto !důležité; výška: 100 %; /*min-výška: 100 %; - Je potřeba stlačit zápatí dolů */ padding: 5px 0; ) . sekce ( šířka: 100 %; padding: 0 0 220px; pozice: relativní; .section:after ( content: ""; clear: both; display: table; ) .mainwrap ( width: 100%; float: left; overflow: skryté ; ) hlavní ( padding: 0 240px 0 240px; min-height: 350px; margin: 0; ) article ( padding: 0 5px; margin: 0 5px; background: #EAF2F5; min-height: 350px; ) #s_left ( plovoucí : vlevo: 240px; pozice: relativní pozadí: #E88139; šířka: 240px; margin-left: -240px; vpravo: 0; poloha: relativní; pozadí: #E86A3B; minimální výška: 350px; ) zápatí ( margin: -220px auto 0; width: 100%; min-width: 240px; height: 220px; background: #AFBFC6; position: relativní; ) /* Pro zobrazení na zařízeních menších než 980px*/ @media screen and ( min-width:240px) a (max-width:479px) ( main ( padding:10px; ) #s_left ( padding: 0; margin: 0 auto; float: none; clear: both; left: 0; ) #s_right ( padding: 0; margin: 0 auto; clear: both; right: 0; ) @media screen and (min-width:799px) ( main ( padding:10px; ) #s_left ( padding: 0; margin: 0 auto; float: none; clear: both left: 0 ) #s_right ( padding: 0; margin: 0 auto; float: none; clear: both; right: 0; ) ) @media screen and (min-width:800px) and (max-width:979px) ( main ( padding:10px; ) #s_left ( padding: 0; margin: 0 auto; float: none; clear: both; left: 0; ) #s_right ( padding: 0; margin: 0 auto: žádné: obojí;

Teď na to přijdeme nejnovější akce s naším rozložením a zvažte hlavní nuance pryžového rozložení, díky kterému jsme nedostali statický rám, ale pryžový.

1) Hlavičku jsme přesunuli ven, protože v první verzi byla uvnitř obalového kontejneru. A obalový kontejner byl zase maximálně 1920px, jak bylo řečeno hned na začátku. To by neumožnilo vytvořit záhlaví 100% široké; Z toho obalujícího jsme tedy odstranili maximální šířku a posunuli ji mimo ni, plus jsme vytvořili class.maxw , kterému jsme přiřadili toto maximum 1920px a zarovnání na střed. Nyní máme to, že každý blok s třídou .maxw bude mít 1920px. Proto do záhlaví a zápatí vložíme kontejner div s touto třídou, takže vše v něm se roztáhne od 240px do 1920px a bude vycentrováno, pokud je rozlišení větší než 1920px. To lze vidět změnou rozlišení pomocí stupnice, například pomocí posuvníku v opeře.

2) Zápatí stlačené dolů. To je také důležitá vlastnost rozložení. Tajemství je zde toto:
Samotné zápatí je umístěno mimo obalový kontejner, který má naopak 100 % výšky. Také sekce, která je umístěna uvnitř obálkové, ale sama obepíná boční lišty a středovou část, dává odsazení zdola do výšky zápatí pomocí vycpávky. Tím vznikne dole pod obsahem prázdný prostor. Protože výška je 100 % a zápatí je mimo blok, je posunuto mimo dohled o vzdálenost rovnající se jeho výšce. Vytvořením odsazení dole pomocí padding:0 0 100px připravíme prostor pro posunutí zápatí do výšky se zápornou hodnotou. Tím dojde k odsazení horní části v opačném pořadí, což znamená, že se posune nahoru do své výšky. Výsledkem je, že máme spodní okraj 100px, zápatí je posunuto 100px pod obrazovku, a to je konstantní pozice. Když dáme zápatí příkaz margin:-100px auto 0 , tak jej zvedneme zespodu spodní části obrazovky do vytvořené dutiny. V důsledku toho máme zápatí přitisknuté ke spodní části obrazovky.

3) Fluidní rozvržení zajímá mnohé, proto je naše lekce věnována rozvržení webu, přesněji řečeno rozvržení rámce webu, který by měl mít dva postranní panely o pevné šířce, v našem případě je to 240px, ale zároveň na jakékoli obrazovce od 240px do 1920px by měl být náš rám libovolně roztažen po šířce a html rozložení musí chápat, že potřebujeme natáhnout pouze středovou část, nesahat na postranní panel!

No, musí to tak být. Rozložení je připraveno. Musíme jen přijít na to, proč se tak chová?
S obalovým kontejnerem je vše jasné, ale jak rozvržení HTML drží postranní panely při roztahování obsahové části?

Vše zde není tak složité, jak by se mohlo na první pohled zdát. Layout CSS stylů je také layout, což znamená, že podléhá určitým pravidlům pro rozložení stylů webu.
Důležitá role Tím se přehraje levé a pravé odsazení, které jsme zadali pro značku článku. Pokud se podíváte na html kód, uvidíme, že existuje kontejner s id=container, který má 100% šířku. Uvnitř je náš článek, který má výplň vlevo a vpravo, výplň:10px 270px. Šířka pro něj však není specifikována a s ohledem na skutečnost, že má display: block (určili jsme to pro prvky html5 tak, aby přestaly být inline), bude to celá šířka a bez explicitní šířky , odsazení bude uvnitř kontejneru a ne za nimi. Díky této kombinaci máme id=container, uvnitř kterého je článek s 270px levým a pravým odsazením. Máme 240px postranní panely a 20px pro odsazení od centrálního článku.

Nyní si vzpomeňte, co jsem psal výše o stlačené zápatí. A pokud jste zapomněli: vraťte se a přečtěte si to znovu, gumové rozvržení není křížovka, nemusíte ji hádat, rozvržení html vyžaduje přesnost a péči. Gumové rozložení tedy používá stejný princip jako patka stlačená dolů, pouze došlo k vertikálnímu posunu a zde k horizontálnímu posunu.

Zavírá se před levou a pravou stranou, takže jsou pod hlavní, která již udělala 240px odsazení na levé a pravé straně, to znamená, že stejně jako v případě se zápatím stisknutým dolů, máme 240px prázdné místo vlevo a vpravo a postranní panely jsou bezprostředně pod levým postranním panelem. Opravdu se jim líbí, že výchozí pravidlo je v levém horním rohu. Vzhledem k tomu, co je nad nimi, bude místo vlevo pod ním dodržovat pravidla. Toto rozložení je tak mazané a rozložení gumy je ještě mazanější. Ale na to existuje lék a diskutujeme o něm. Proto je to pro nás jen layout..

Posledním krokem je správné umístění našich postranních panelů tak, aby chápali, že jsme si vědomi rozvržení webu, a stojí tam, kde říkáme. Chcete-li to provést, můžete připojit logiku. Pokud se blok na šířku nevejde, posune se dolů. A pokud jsou podporovány záporná čísla v polohování, což znamená, že můžeme nechat efekt působit obráceně.

Levý blok je na prvním místě, takže mu dejte záporný okraj margin-left:-100% a přelstí se tím, že se objeví přesně na prázdném místě, které si pro nás článek připravil. Layout je dobrý, gumové rozložení je ještě lepší a hotové rozložení je ještě lepší, zvláště po dlouhých bitvách. Proto kontrolní střela na našeho soupeře zvaná gumové rozložení je posunutím pravé postranní lišty doleva o její vlastní šířku. Proč odešel?
Ano, protože to bylo vpravo, nevešlo se to o 240 pixelů a bylo to posunuto dolů do levého rohu, vše je podle pravidel, html zde není na vině, ale css má také charakter. Proto margin-left:-240px vyřeší zbývající problém přesunutím pravého bloku přesně do připraveného prázdného prostoru napravo od strany.

Dobře, prozkoumali jsme a vytřídili všechna stinná místa v gumovém rozložení rozložení. Vše jsme zkontrolovali pomocí příkladu, zdroje jsou přiloženy. Layout je něco, co vyžaduje neustálé dovednosti, ať už je to gumové nebo pevné. Adaptivní rozvržení je samostatné téma. Možná v příští lekci nevytvoříme rám od začátku, už ho máme. Je lepší přidat přizpůsobivost ke stávajícímu, hrát si s písmem, měnit pozadí, obrázky v závislosti na rozlišení obrazovky, obecně podrobně analyzujeme nuance rozvržení, nebo přesněji adaptivní rozvržení. A nezapomeňte zkontrolovat html platnost Po rozložení webu to rozhodně nebude horší.

Níže je zdrojový kód s hotovým layoutem, který si můžete stáhnout. Pokud chcete něco změnit, například počet postranních panelů nebo jejich ID, výšku záhlaví nebo zápatí a další změny, můžete jednoduše použít bezplatné online generátor rozložení rámu. Lze vytvořit jako rám s pevné rozložení, tak si to vezměte gumové rozložení+ předepsané podmínky pro adaptivní uspořádání.
To vše lze provést na našem generátoru šablon.

Gumové rozložení

Nebo jsou dobře obeznámeni s HTML, když se naučili potřebné znalosti z jiných zdrojů, pak je čas začít se učit CSS.

CSS (Cascading Style Sheets) – kaskádové styly jsou souborem popisů stylů, určitých HTML tagů (dále jen HTML elementů), které lze aplikovat na oba samostatná značka- prvek a současně všem identickým prvkům na všech stránkách webu. CSS je v podstatě jakýsi doplněk HTML, který výrazně rozšiřuje jeho možnosti.

No a co? Ptáte se... Proč potřebuji tento notoricky známý CSS? Já a HTML dovnitř čistá forma dařilo!

Uvedu několik důvodů pro použití CSS:

HTML ve své čisté podobě má velmi omezenou sadu nástrojů, která neumožňuje řešit určité designové a funkční představy webmastera. No, alespoň si například vezměte bolestnou otázku všech začínajících webových řemeslníků: "Jak odstranit podtržení z odkazu?" nebo "Jak mohu změnit barvu a zvýraznit, když umístím kurzor na tento odkaz?" Neexistuje žádný způsob, jak to udělat pouze s HTML!! Kolik takových „ožehavých otázek“ ještě existuje? - tma.. Tady to přichází Nápověda CSS, který řeší většinu problémů souvisejících s designem webových stránek.

Předpokládejme, že jste napsali web se 100 stránkami... dobrý web, informativní, lidé na něj chodí... A najednou z nějakého důvodu potřebujete změnit jeho design, no, já nevím, móda se změnila, našli jste lepší konstrukční řešení, zákazníkovi se to nelíbilo.. ale nikdy nevíte proč.. Kolik času a úsilí vám zabere kompletní předělání všech 100 stránek webu? CSS nabízí chytré řešení tohoto problému. Co když jednou a samostatný soubor plně popsat celý design webu? Řekněme: označte všechny nadpisy červeně, odstavce

pište kurzívou, odkazy nepodtrhávat :) vyplňte pozadí na všech stránkách zelenou atd... a pak už jen těm 100 HTML stránkám zpřístupnit CSS soubor a získat z něj potřebné informace? Nyní, když chcete například přebarvit všechny nadpisy z červené na zelenou, nemusíte otevírat všech 100 stránek, hledat na nich štítky a na každé uvádět, že nyní nejste červení, ale zelení! Stačí otevřít soubor s popisem a změnit barvu prvku v něm na zelenou a je to!! Všechny nadpisy na všech stránkách webu jako kouzlem zezelenají.

Vzhledem k tomu, že CSS umožňuje vkládat opakující se popisy stylů stejných prvků do jednoho souboru, dochází k výraznému „vykládání“ HTML dokumentů, což šetří objem, provoz, čas, peníze... HTML kód se stává lehkým, snadným číst a upravovat.

Tak jak? Zaujalo? Pokud ano, doporučuji přejít k přímému učení CSS. V kapitolách této učebnice se dozvíte, jak implementovat kaskádové styly na stránky vašeho webu, seznámíte se se zákl. vlastnosti stylu prvky na příkladu vytvoření webu s pomocí CSS, ponořte se do jemností a triků věci. Pokud jste již obeznámeni s kaskádovými styly a pouze vás zajímají referenční informace, pak navrhuji podívat se do příručky CSS, kde jsou shromážděny a stručně popsány vlastnosti CSS a jejich možné hodnoty.

Tento článek není zamýšlen jako komplexní průvodce značkovacím jazykem dokumentů HTML. Pokrývá základy HTML - základní principy, pojmy a definice této technologie, po jejichž zvládnutí můžete snadno pokračovat ve studiu HTML kódování.

Pro prostudování lekce si stáhněte archiv s potřebnými soubory.

HTML je značkovací jazyk pro dokumenty. Správná výslovnost je HTT.

Pravděpodobně jste někdy pracovali v editoru dokumentů Word nebo podobně. kancelářské aplikace? Pravděpodobně víte, že tento typ editoru má bohaté možnosti pro úpravu textu, uspořádání prvků, vkládání obrázků atd.

Možná se ptáte, proč psát o textových procesorech v článku o HTML? Ale proč. Pokud na to přijdete, co je kancelářský editor? Jedná se o aplikaci pro úpravu a zobrazování dokumentů.

Klíčové slovo je zde dokument. To znamená, že vytváříme, upravujeme a prohlížíme dokument v nějakém programu, v tomto případě - v kancelářský redaktor. Pokud takový dokument otevřeme v jednoduchém textovém editoru, například v Poznámkovém bloku, uvidíme mnoho podivných symbolů a znaků. Tato změť symbolů je pro lidstvo nepochopitelná, ale pro počítače srozumitelná. Díky tomuto vnitřnímu jazyku Word dokument získává určitou strukturu a vzhled v samotném editoru a dokument se před námi objevuje v celé své kráse s formátovaným textem a obrázky na jejich místě.

HTML je značkovací jazyk dokumentů pro prohlížeč. Word je zde prohlížeč a dokument je stránka HTML To je úplný základ HTML technologie, jehož porozumění je nutné k tomu, aby nedošlo k záměně značkovacího jazyka webových dokumentů s programovacími jazyky. Název mluví sám za sebe – s pomocí HTML My označení, kde se na stránce prvek, obrázek nebo text zobrazí a v jakém pořadí se budou zobrazovat vedle sebe.

Ano, jednoduché psaní a formátování textu v kancelářských aplikacích nemá s programováním nic společného. Pozorný čtenář si ale všimne důležitého detailu – in textový procesor Text a obrázky píšeme, upravujeme a formátujeme pomocí vizuálních tlačítek a nabídek, ale proč se kód HTML píše ručně? Proč se učit tolik technických podrobností o psaní značek pro dokument?

Ve skutečnosti existuje spousta editorů, pomocí kterých můžete vytvářet a upravovat stránky HTML, podobně jako ve Wordu. To znamená, že zdrojový kód HTML je pro nás skrytý a my se do něj nedostaneme.

Něco jako Word pro HTML. Takový vizuální editory jsou nazývány:

WYSIWYG redakce - W hat Y ou S ee I s W hat Y ou G et. Tedy pokud to přeložíme do ruštiny: co vidíme, to dostáváme.

Říkám jim "wuzivoogies". Ačkoli je to foneticky nesprávné, jasně to ukazuje nesmyslnost tohoto vynálezu. Začátečníci velmi často používají takové editory k vytvoření svých prvních webových stránek. To je samozřejmě výhodné - nemusíte se ponořit do studia značek, stylů designu a dalších, na první pohled nepříjemných a složitých věcí. Samotný editor automaticky převádí naše akce do HTML kódu.

Ale jak se říká, nic se neděje jen tak. Přesněji řečeno, tento přístup má velmi vážné nevýhody. Co všem brání používat vizuální editory HTML design stránky? Faktem je, že takto tvořené stránky mají většinou ze sémantického hlediska spoustu zbytečného kódu a spoustu chyb. Nyní s tím samozřejmě nejsou žádné problémy vysokorychlostní internet připojení a rozdíl ve velikosti stránky 400 kb a 100 kb není pro rychlost podstatný, nicméně optimalizovaný a správně napsaný HTML kód odstraňuje mnoho problémů a poskytuje mnoho výhod, jmenovitě:

• Kompetentní HTML kód má pozitivní vliv na optimalizace pro vyhledávače, rychlost skenování vyhledávací robot místo. Kilobajty kódu generované vuzivugou nejsou přijatelné a dokonce škodlivé;
• HTML kód generovaný WYSIWYG editorem má mnoho sémantických chyb. To znamená, že značky vygenerované takovým editorem se používají k jiným účelům, kde je třeba je použít, například seznamy
  , editor vygeneruje další značku, kterou nepotřebujeme. Záleží samozřejmě na editoru, ale tady máme na mysli komplexní řešení pro tvorbu webových stránek, nejen pro úpravu textu textová oblast WYSIWYG znamená.
  • Generuje se spousta zbytečných značek a struktura dokumentu se nafoukne. Řekněme, že v takovém programu přesunete prvek, nejprve doprava, pak doleva, pak doprostřed - každá akce zanechá stopu v původní HTML kód. Editor je program a nemůže vědět, co přesně chcete ve výsledku získat, generuje tuny kódu, přičemž bere v úvahu všechny možné možnosti chování dokumentu v prohlížeči.
  • Editory pro vizuální návrh HTML kódu zpravidla rychle zastarávají. A kvůli nezájmu ze strany profesionálů jsou obecně připraveni o podporu a přestávají se rozvíjet. A HTML se vyvíjí. Všechno se vyvíjí kromě wuzivoogi. V souladu s tím nemohou generovat správné a moderní kód, která by zahrnovala nové funkce a řešení.
  • Podporovat a rozvíjet takové projekty je nebeský trest. O používání vzorů a opětovném použití kódu nemůže být vůbec řeč.

  HTML tedy budeme psát pouze pery. Adekvátní nástroje pro vizuální Editace HTML Ještě s nimi nepřišli a je nepravděpodobné, že se objeví. Značkovací jazyk HTML je snadné se naučit a pochopit jej a existuje mnoho nástrojů pro automatizaci psaní kódu HTML, ale o tom v dalších lekcích.

  Poté, co si mladí HTML guru trochu pohráli s WYSIWYG editorem, opustí tento marný úkol a pokračují dál.

  Struktura dokumentu HTML

  Pro třídy doporučuji stáhnout a nainstalovat editor Sublime Text. Vřele doporučuji nepoužívat vestavěný Poznámkový blok Windows pro rozvržení HTML, pokud si nechcete zlomit psychiku v raných fázích učení HTML.

  Rozhodli jsme se, že kód HTML dokument Napíšeme to ručně, tedy napíšeme. HTML Layout - proces vytváření HTML dokument. V běžných lidech a v informovaných kruzích je to jen rozvržení. Každý dokument má strukturu a určitá pravidla konstrukce. Z jakých prvků se kód skládá, jaká je struktura HTML?

  Vytvořme si na počítači úvodní šablonu – soubor index.html, otevřeme jej pomocí editoru a vložíme do něj následující kód:

  Hlavička Tělo dokumentu Upozorňujeme, že dokumenty HTML mají příponu .html.

  Tedy v pořadí z příkladu.

  - typ dokumentu (doctype)

  Tato konstrukce je vždy uvedena na začátku dokumentu, aby prohlížeč správně „rozuměl“, která verze HTML je při konstrukci dokumentu použita.

  Vzhledem k tomu, že se HTML neustále vyvíjí, má několik verzí, jako každé jiné software. Současná verze HTML je pátý a doctype uvedený v příkladu je aktuální.

  V zásadě nemá smysl zacházet hlouběji do studia typů dokumentů, protože s vydáním HTML5 se tento design stal standardem. Stačí jej vložit na začátek dokumentu pokaždé, když začnete vytvářet rozvržení webu.

  - začátek dokumentu

  První značka, kterou vidíme za doctype, je .

  HTML tag je strukturní jednotka značení HTML dokumentu. HTML kód se skládá ze stavebních bloků nazývaných tagy. Každá značka má svou vlastní funkci a naučit se značkovací jazyk HTML je v konečném důsledku o naučení se značek a jejich vlastností v dokumentu.

  Rád bych poznamenal, že naučit se HTML není tak těžké, jak by se mohlo na první pohled zdát. Naučit se značky používané při označování dokumentů není tak snadné. obrovský tlak na mozku.

  Označení dokumentu tedy začíná tagem a končí uzavíracím tagem. Každý tag, který obsahuje další tagy nebo prvky, musí být uzavřen uzavíracím tagem. Například , , atd.

  Značka je povinná, protože obsahuje celou strukturu dokumentu a je obalem pro další prvky.

  Štítek

  Dále vidíme tag, který obsahuje další prvky, které nám zatím nejsou jasné. Obsahuje další elementy – to znamená, že elementy nebo tagy jsou mezi úvodním a závěrečným tagem konstruktu:

  obsah nebo jiné značky

  Účelem tagu je uchovat meta informace HTML dokumentu, tedy informace, které se v dokumentu samotném nezobrazují, ale jsou důležité a do značné míry určují, jak bude dokument vypadat a chovat se.
  Tato značka požadované v dokumentu.

  Tag - název dokumentu Název

  Název je požadovaný štítek, obsahující textové metainformace, které se zobrazují v názvu prohlížeče nebo záložky. Značka musí být v . Také se používá obsah této značky vyhledávače pro zobrazení dokumentu ve výsledcích vyhledávání.

  Meta tag

  Meta tag je specializovaný tag určený k poskytování strukturovaných dat o stránce. Meta tagy se nejčastěji používají v . Meta tagy jsou volitelné v HTML struktura dokument.

  Favicon

  Připojí k dokumentu soubor s obrázkem favicon. Favicon je miniaturní ikona zobrazená vedle názvu dokumentu na kartě prohlížeče. Favicon je grafický soubor, velikost 16 x 16 (nebo 32 x 32) pixelů, které mohou mít různé formáty, například png, jpg, ico, gif. Tradičně používané formát ico. Animované oblíbené ikony jsou gif soubory obsahující animaci. Pozorovat animovaná favicon můžete například VKontakte, když přijde nová zpráva.

  Styly dokumentů CSS

  Připojuje se k CSS dokument HTML stylový soubor.

  CSS- kaskádové Styly HTML dokumentů. Každá značka, která se nachází ve značce, má sadu vlastností, jako je barva, šířka, výška, poloha vzhledem k ostatním prvkům. Všechny tyto vlastnosti jsou CSS styly, do kterých lze vložit externí soubor. Návrh připojuje externí soubory k dokumentu HTML, včetně stylů CSS.

  Poznámka: Vlastnost href konstrukce určuje umístění externího souboru. V našem příkladu soubor styl.css A favicon.ico, jsou ve stejné složce jako soubor index.html. nemá uzavírací značku.

  Štítek

  Značka obsahuje kód nebo odkaz na soubor javaScript a nejčastěji se používá uvnitř značky, ačkoli nástroj Optimalizace rychlosti stránky Google doporučuje používat tuto značku na konci dokumentu, před uzavírací značkou.

  V našem příkladu je připojen externí soubor script.js, který se nachází ve stejné složce jako hlavní soubor index.html.

  Takže, přátelé, podívali jsme se na hlavní prvky, které se v tagu používají nejčastěji. Kromě těchto prvků existuje řada dalších, které jsou konkrétnější a volitelné.

  Tělo alias tělo

  Zde začínají všechny nejzajímavější a vizuálně hmatatelné věci HTML rozložení dokument.

  Přejděme přímo k rozložení viditelné části stránky. Vše, co napíšeme a rozložíme uvnitř značky, se zobrazí v prohlížeči. Otevřeme náš soubor index.html v prohlížeči, abychom jasně viděli, co v editoru děláme.

  Tag může obsahovat libovolné HTML tagy potřebné k návrhu dokumentu a zajištění jeho funkčnosti (formy). Poskytnu tabulku nejpoužívanějších značek a stručně každý popíšu. Příklady uvedené v editoru můžete ihned spustit.

  Štítek	Popis
  	Značka pro vytváření odkazů v dokumentu. Příklad: text odkazu Atribut href určuje dokument, na který odkaz povede.
  ,	Tvoří text kurzíva nebo tučně (zvýrazněno). Příklad: kurzíva tučný (zvýrazněný) text
  , , , , ,	Nadpisy dokumentů. K dispozici je celkem 6 úrovní nadpisů, ale v praxi se používají pouze h1 až h4. V dokumentu by měl být pouze jeden nadpis, zvýrazněný tagem h1 jako hlavní nadpis dokumentu. Příklady: Nadpis první úrovně Nadpis druhé úrovně Nadpis třetí úrovně... atd.
  ,	Seznamy dokumentů. Jedná se o číslovaný seznam nebo seznam s odrážkami. Prvek takového seznamu je tag Příklady: Živel seznam s odrážkami 1 Položka odrážky 2 Položka číslovaného seznamu 1 Položka číslovaného seznamu 2
  	Odstavec. Tato značka definuje odstavec textu oddělený od ostatních odstavců. Je velmi vhodné tuto značku zavřít. Příklad: Vzhled Značení HTML je do značné míry určeno styly CSS. Někteří webmasteři se však rozhodli nepoužívat styly v raných fázích projektu.
  	Obrázek. Pomocí této značky můžete vložit obrázek do značky HTML. Nezapomeňte u všech obrázků uvést alternativní text – atribut „alt“. Tato značka je samozavírací. Příklad:
  + +	Formuláře a vstupní prvky. Formuláře jsou určeny k zadávání informací do systému na serveru. Tak nějak Zpětná vazba uživatel a web. Formuláře se například používají, když potřebujete odeslat nějakou zprávu na server. Kromě toho mohou formuláře plnit další funkce, ale hlavním úkolem je odesílat data na server. Příklad - jednoduchá forma odeslání zprávy, ve které uživatel webu uvede své jméno, e-mail a nějaký text: Text zprávy
  	Definuje podřetězec v řetězci. Používá se ke stylování části řádku pomocí CSS. Jeden z nejčastěji používaných tagů. Bez designu se to v prohlížeči nijak neprojevuje. Příklad: Učení HTML ve většině případů nezpůsobuje začátečníkům žádné potíže.
  ,	Tagy jsou navrženy tak, aby vkládaly video a zvuk do dokumentu. Závěrečná značka je povinná. Příklady: Parametr control nám říká, že stránka by měla zobrazovat ovládací prvky mediálního obsahu, stejně jako běžný audio/video přehrávač.
  	Opravdu královský štítek. Nejpoužívanější a populární značka PROTI HTML značky stránky. Tento blokový prvek, určený ke správě bloků na webu. Často se používá koncept „báječného“ rozvržení - to znamená, že všechny bloky na webu jsou rozmístěny pomocí těchto značek. Může obsahovat další značky. Příklad: Text ve vnořeném bloku Všechny prvky jsou ve většině případů zdobeny vlastnostmi CSS styly. Závěrečná značka je povinná.
  	Tato značka se načte externí stránka do dokumentu. Příklad:

  Nezvážili jsme všechny značky a není to nutné. v tomto stádiu. Hlavní věc je pochopit základní myšlenku HTML, naučit se používat výše uvedené značky a pak jít dál.

  Vezměte prosím na vědomí, že všechna jména v přiložených souborech musí být napsána latinkou, bez mezer.

  Například:

  To je nezbytné pro větší kompatibilitu obsahu stránky. Navíc to diktují standardy pro psaní HTML kódu.

  Takže teď víme nějaké základy HTML: jakou by měl mít strukturu? standardní HTML dokument, známe některé z nejoblíbenějších značek, je čas pustit se do toho nejchutnějšího – konkrétně sušenek.

  Praktická úloha na téma HTML layout

  Pokud jste si archiv s příklady ještě nestáhli, udělejte to. Můžete se například podívat na soubor example.html, který byl také v archivu.

• Rozbalte archiv a ve složce s rozbalenými soubory vytvořte soubor index.html. Otevřete vytvořený soubor pomocí textový editor Vznešený text;
• Vytvořte počáteční strukturu dokumentu s doctype, tag obsahující a a pokračujte v úpravě obsahu tagu;
• Otevřete soubor readme.txt a proveďte příslušné úlohy v souboru index.html, který jste vytvořili. Chcete-li zkontrolovat výsledek, otevřete index.html ve svém oblíbeném prohlížeči.

Tím končí lekce o základech HTML, v další lekci „Základy CSS“ se naučíme, jak spravovat styly prvků dokumentu, seznámíme se s kaskádovými styly, naučíme se používat třídy stylů a jak udělat náš layout krásný a barevný. .

Uvidíme se znovu, přátelé!