Co je to webová stránka? Jedná se o dokument napsaný v jazyce HTML (Hypertext Markup Language), který lze zobrazit pomocí prohlížeče. Na webovou stránku se dostanete zadáním adresy URL.

Webová stránka může obsahovat text, grafiku a hypertextové odkazy na jiné stránky a soubory.

Jak otevřít webovou stránku

Pro zobrazení webové stránky je nutný prohlížeč (např. internet Explorer, Edge, Safari, Firefox nebo Chrome). Ve svém prohlížeči můžete otevřít webovou stránku zadáním adresní řádek URL. Například zadáním „https://www.computerhope.com/esd.htm“ se zobrazí stránka ESD Computer Hope.

Pokud neznáte adresu URL webu, který chcete navštívit, můžete použít vyhledávač najít webovou stránku nebo použít vyhledávání na webu.

Kdy byla vytvořena první webová stránka?

První webovou stránku vytvořil v CERN Tim Berners-Lee 6. srpna 1991. Předtím můžete navštívit a zobrazit první web a první webovou stránku na adrese http://info.cern.ch/.

Jaký je rozdíl mezi webem a webovou stránkou?

Webová stránka je místo, které obsahuje více než jednu webovou stránku. Náš zdroj je například web, který zahrnuje tisíce různých webových stránek, včetně té, kterou právě čtete:

Ve výše uvedeném příkladu adresy URL je „url.htm“ webová stránka, je to vždy poslední část adresy URL. U adres URL, které nekončí na .htm, .html, .php, .cgi, .pl nebo jinou příponu souboru, server ve výchozím nastavení načte webovou stránku index.htm. Například neexistuje žádná webová stránka pro adresu URL kontaktní stránky. V tomto případě se výchozí indexový soubor načte z adresáře /contact.

Příklady webových stránek

Již jsme zmínili, že prohlížeče slouží k prohlížení webových stránek. Webová stránka se skládá z několika prvků, včetně CSS, obrázků a JavaScriptu. Tělo webové stránky je vytvořeno pomocí pomocí HTML. Tento kód může být vytvořen pomocí HTML editoru, napsán člověkem nebo generován pomocí skriptů na straně serveru. Webová stránka vytvořená člověkem obvykle končí příponou .htm nebo .html. Tato stránka má například název souboru „webpage.htm“. Stránky vygenerované skriptem mohou končit .cgi, .php, .pl atd.

Jaké prvky obsahuje webová stránka?

Níže je uveden rozpis hlavních prvků, aby weboví designéři pochopili, jaká je logická struktura webové stránky:

Název webu, logo nebo název společnosti se téměř vždy nachází v levém horním rohu každé webové stránky. Také je dobré použít slogan resp Stručný popis stránky, aby měli noví návštěvníci představu o webu. Tento prvek webové stránky je obvykle odkaz, který vede na domovskou stránku;

Vyhledávací panel umožňuje návštěvníkům rychle najít webovou stránku. Měl by být přítomen na každé stránce;

Navigační lišta nebo nabídka se obvykle nachází v horní nebo levé části každé webové stránky. Měl by obsahovat odkazy na každou z hlavních částí webu;

Bannerové reklamy se mohou objevit na různých místech webové stránky. Obvykle se zobrazují v horní, levé, pravé nebo dolní části webové stránky nebo jsou součástí hlavního obsahu;

Sociální tlačítka umožňují návštěvníkům sdílet odkaz na webovou stránku na stránkách sociálních sítí;

Na vytvořených webových stránkách drobky pomáhají návštěvníkovi pochopit, kde se nachází, a také se přesunout do jiných částí webu;

Nadpis by měl být v horní části každé webové stránky. Vytváří se pomocí HTML tagu.

Úvodní odstavec je jedním z nejdůležitějších prvků webové stránky. Návštěvníka by mělo zajímat, aby si přečetl obsah webové stránky. Jedním ze způsobů, jak upoutat pozornost návštěvníků, je vložit obrázek vedle úvodního odstavce;

Každá webová stránka by měla být rozdělena do nadpisů nižší úrovně, které umožní návštěvníkovi snadno prohledat obsah a najít to, co ho na stránce nejvíce zajímá. Při vytváření webové stránky to lze provést pomocí HTML značek...;

Je dobré poskytnout návštěvníkům odkaz nebo tlačítko, které přesměruje na formulář. zpětná vazba aby vám mohli říci, zda to pro ně bylo užitečné tuto webovou stránku nebo ne;

Pro uživatele mohou být užitečné i další informace a nástroje, jako je tlačítko pro tisk stránky;

Zápatí by mělo obsahovat Dodatečné informace, který je pro firmu nebo web důležitý. Stejně jako odkazy na jiné webové stránky;

Na všech webových stránkách musí být také zveřejněna autorská práva a jakákoli právní nebo důvěrná upozornění. V základech návrhu webových stránek může tento prvek nejen odkazovat na relevantní právní informace. To také znamená, že návštěvníci dosáhli konce webové stránky;

Tlačítko Začátek stránky může návštěvníkům pomoci rychle přejít zpět na začátek webové stránky a získat přístup k odkazům nabídky.

Co mohou uživatelé na webové stránce dělat?

Většina webových stránek má zajímavé hypertextové odkazy, na které kliknete, abyste našli další informace. Můžete také poslouchat hudbu, sledovat videa, nakupovat, chatovat a mnoho dalšího.

Než se pustíme do lekcí tvorby webových stránek HTML a CSS, je důležité porozumět rozdílům mezi těmito dvěma jazyky, syntaxi každého jazyka a některé základní terminologii.

Co jsou HTML a CSS?

HTML (HyperText Markup Language) definuje strukturu obsahu a jeho význam, definuje obsah, jako jsou nadpisy, odstavce nebo obrázky. CSS (Cascading Style Sheets) neboli kaskádové styly je prezentační jazyk vytvořený pro navrhování vzhled obsah pomocí například písem nebo barev.

Tyto dva jazyky – HTML a CSS – jsou na sobě nezávislé a tak by to mělo zůstat. CSS by nemělo být napsáno uvnitř dokumentu HTML a naopak. Obecně platí, že HTML bude vždy reprezentovat obsah a CSS vždy definuje styl.

S tímto pochopením rozdílu mezi HTML a CSS se pojďme ponořit do HTML podrobněji.

Základní pojmy HTML

Než začnete pracovat s HTML, pravděpodobně se setkáte s některými novými a často podivnými pojmy. Postupem času se se všemi blíže seznámíte, ale prozatím byste měli začít se třemi základními pojmy HTML – prvky, značky a atributy.

Elementy

Prvky určují, jak definovat strukturu a obsah objektů na stránce. Některé z běžně používaných prvků zahrnují více úrovní nadpisů (definovaných jako prvky od do ) a odstavců (definovaných jako

); Do seznamu můžete zahrnout prvky . . . a mnoho dalších.

Prvky jsou označeny lomenými závorkami kolem názvu prvku. Prvek tedy bude vypadat takto:

Tagy

Přidání úhlových závorek< и >vytvoří kolem prvku to, co se nazývá tag. Tagy se nejčastěji vyskytují ve dvojicích otevíracích a uzavíracích tagů.

Úvodní značka označuje začátek prvku. Skládá se ze symbolu ; Například, .

Závěrečná značka označuje konec prvku. Skládá se ze symbolu< с последующей косой чертой и именем элемента и завершается символом >; Například, .

Obsah, který se objeví mezi úvodní a závěrečnou značkou, je obsahem tohoto prvku. Odkaz bude mít například úvodní značku a uzavírací značku. Co je mezi těmito dvěma tagy, bude obsah odkazu.

Takže značky odkazů budou vypadat nějak takto:

...

Atributy

Atributy jsou vlastnosti používané k poskytování dalších informací o prvku. Mezi nejběžnější atributy patří atribut id, který identifikuje prvek; atribut class, který klasifikuje prvek; atribut src, který určuje zdroj vloženého obsahu; a atribut href, který určuje odkaz na přidružený zdroj.

Atributy jsou definovány v úvodní značce za názvem prvku. Atributy obecně zahrnují název a hodnotu. Formát těchto atributů se skládá z názvu atributu, za kterým následuje rovnítko, za nímž následuje hodnota atributu v uvozovkách. Například prvek s atributem href bude vypadat takto:

Shay Howe

Ukázka základních pojmů HTML

Tento kód zobrazí text „Shay Howe“ na webové stránce a po kliknutí na tento text uživatele přesměruje na http://shayhowe.com. Prvek odkazu je deklarován pomocí otevírací značky a uzavírací značku pokrývající text a také atribut a hodnotu adresy odkazu deklarovanou prostřednictvím href="http://shayhowe.com" v úvodní značce.

Rýže. 1.01. Syntaxe HTML ve formě obrysu zahrnuje prvek, atribut a značku

Nyní, když víte, co jsou prvky, značky a atributy HTML, pojďme se podívat na naši první webovou stránku. Pokud zde něco vypadá jako nové, nebojte se – za pochodu to rozebereme.

Přizpůsobení struktury dokumentu HTML

HTML dokumenty jsou jednoduché textové dokumenty uložené s příponou .html spíše než .txt. Chcete-li začít psát HTML, potřebujete nejprve textový editor, který vám vyhovuje. To bohužel nezahrnuje Microsoft Word nebo Pages, protože se jedná o složité editory. Dva nejoblíbenější textové editory pro psaní HTML a CSS jsou Dreamweaver a Vznešený text. Mezi bezplatné alternativy patří také Notepad++ pro Windows a TextWrangler pro Mac.

Všechny dokumenty HTML obsahují požadovanou strukturu, která zahrnuje následující deklarace a prvky: , a .

Deklarace typu dokumentu nebo se nachází na samém začátku dokumentu HTML a informuje prohlížeče, která verze HTML se používá. Protože budeme používat nejnovější verzi HTML, náš typ dokumentu bude jednoduše . Poté následuje prvek označující začátek dokumentu.

Uvnitř prvku definuje nejlepší část dokumentu, včetně různých metadat (doprovodných informací o stránce). Obsah uvnitř prvku se nezobrazuje na samotné webové stránce. Místo toho může obsahovat název dokumentu (který se zobrazuje v záhlaví okna prohlížeče), odkazy na jakékoli externí soubory nebo jakákoli jiná užitečná metadata.

Veškerý viditelný obsah webové stránky bude obsažen v prvku. Struktura typického HTML dokumentu vypadá takto:

Ahoj světe! Ahoj světe!

Toto je webová stránka.

Ukázka struktury HTML dokumentu

Tento kód zobrazuje dokument, počínaje deklarací typu dokumentu , poté bezprostředně následuje . Uvnitř jsou prvky a . Prvek obsahuje kódování stránky přes značku a název dokumentu přes prvek. Prvek obsahuje nadpis přes prvek a odstavec textu přes příponu . Protože nadpis i odstavec jsou vnořeny do prvku, jsou na webové stránce viditelné.

Pokud je prvek uvnitř jiného prvku, známého také jako vnořený, je vhodné jej odsadit, aby byla struktura dokumentu dobře uspořádaná a čitelná. V předchozím kódu jsou oba prvky vnořené a posunuté v rámci . Struktura odsazení pro prvky pokračuje novými prvky přidanými dovnitř a .

Samozavírací prvky

V předchozím příkladu byl prvek jedinou značkou, která neobsahovala uzavírací značku. Nebojte se, bylo to provedeno záměrně. Ne všechny prvky se skládají z otevíracích a zavíracích značek. Některé prvky jednoduše přijímají obsah nebo chování prostřednictvím atributů v rámci jediné značky. je jedním z těchto prvků. Obsah prvku v příkladu je přiřazen pomocí atributu charset a hodnoty. Mezi další typické samouzavírací prvky patří:

• 
  

Následující struktura vytvořená pomocí deklarace typu dokumentu a prvků , a , je zcela běžná. Chceme, aby byla tato struktura dokumentu pohodlná, protože ji budeme často používat při vytváření nových HTML dokumentů.

Ověření kódu

Bez ohledu na to, jak pečlivě píšeme náš kód, chyby jsou nevyhnutelné. Naštěstí při psaní HTML a CSS máme validátory, které kontrolují naši práci. W3C nabízí validátory HTML a CSS, které skenují kód na chyby. Kontrola našeho kódu nejen pomáhá správně se vykreslovat ve všech prohlížečích, ale také pomáhá učit osvědčené postupy při psaní kódu.

Na praxi

Jako webdesignéři a front-endoví vývojáři máme ten luxus zúčastnit se řady skvělých konferencí věnovaných našemu řemeslu. V průběhu dalších lekcí se chystáme uspořádat vlastní Styles Conference a vytvořit pro ni webové stránky. Takhle!

Přehoďme trochu od HTML a podívejme se na CSS. Pamatujte, že HTML definuje obsah a strukturu našich webových stránek, zatímco CSS definuje jejich vizuální styl a vzhled.

Základní pojmy CSS

Kromě pojmů HTML existuje několik základních pojmů CSS, se kterými se budete muset seznámit. Tyto výrazy zahrnují selektory, vlastnosti a hodnoty. Stejně jako u terminologie HTML, čím více pracujete s CSS, tím více se tyto pojmy stávají přirozeností.

Selektory

Při přidávání prvků na webovou stránku lze pomocí nich upravit styl pomocí CSS. Selektor určuje, na který prvek nebo prvky v HTML se mají cílit a na které se mají aplikovat styly (jako je barva, velikost a poloha). Selektory mohou zahrnovat kombinaci různých metrik pro výběr jedinečných prvků v závislosti na tom, jak konkrétní chceme být. Například chceme vybrat každý odstavec na stránce nebo vybrat pouze jeden konkrétní odstavec.

Selektory jsou obvykle spojeny s hodnotou atributu, jako je hodnota id nebo třídy, nebo s názvem prvku, jako je nebo .

V CSS jsou selektory kombinovány se složenými závorkami (), které uzavírají styly, které se aplikují na vybraný prvek. Tento selektor cílí na všechny prvky

P(...)

Vlastnosti

Jakmile je prvek vybrán, vlastnost určuje styly, které se na něj použijí. Názvy vlastností jsou za selektorem, uvnitř složených závorek () a těsně před dvojtečkou. Existuje mnoho vlastností, které můžeme použít, jako je pozadí, barva, velikost písma, výška a šířka a další běžně přidávané vlastnosti. V následujícím kódu definujeme vlastnosti barvy a velikosti písma, které platí pro všechny prvky

P ( barva: ...; velikost písma: ...; )

Hodnoty

Doposud jsme pouze vybrali prvek pomocí selektoru a pomocí vlastností jsme určili, jaký styl na něj chceme aplikovat. Nyní můžeme pomocí hodnoty nastavit chování této vlastnosti. Hodnoty lze zadat jako text mezi dvojtečkou a středníkem. Níže vybereme všechny prvky

A nastavte hodnotu vlastnosti color na oranžovou a hodnotu vlastnosti font-size na 16 pixelů.

P ( barva: oranžová; velikost písma: 16px; )

Abychom to otestovali, v CSS naše sada pravidel začíná selektorem, po kterém bezprostředně následují složené závorky. Tyto složené závorky obsahují deklarace skládající se z dvojic vlastností a hodnot. Každá deklarace začíná vlastností, za kterou následuje dvojtečka, hodnota vlastnosti a nakonec středník.

Běžnou praxí je posouvat dvojice vlastností a hodnot uvnitř složených závorek. Stejně jako u HTML pomáhá odsazení udržet náš kód organizovaný a jasný.

Rýže. 1.03. Struktura syntaxe CSS zahrnuje selektor, vlastnosti a hodnoty

Znalost několika základních pojmů a obecné syntaxe CSS je skvělý začátek, ale než se ponoříme do hlubin, musíme probrat několik dalších bodů. Zejména se musíme blíže podívat na to, jak selektory fungují v CSS.

Práce se selektory

Jak již bylo zmíněno dříve, selektory označují, které prvky HTML budou stylizovány. Je důležité plně porozumět tomu, jak používat selektory a jak fungují. Prvním krokem by mělo být poznávání různé typy selektory. Začneme nejzákladnějšími selektory: selektory typu, třídy a identifikátoru.

Voliče typu

Selektory typu cílí na prvky podle jejich typu. Například, pokud chceme cílit na všechny prvky, měli bychom použít selektor div. Následující kód zobrazuje selektor typu pro prvky a také odpovídající HTML.

Div(...)

... ...

Třídy

Třídy umožňují vybrat prvek na základě hodnoty atributu třídy. Selektory tříd jsou o něco specifičtější než selektory typů, protože vybírají spíše konkrétní skupinu prvků než všechny prvky stejného typu.

Třídy vám umožňují aplikovat stejné styly na různé prvky najednou pomocí stejné hodnoty atributu třídy pro více prvků.

V CSS jsou třídy reprezentovány úvodní tečkou následovanou hodnotou atributu class. Pod selektorem třídy jsou vybrány všechny prvky obsahující hodnotu atributu úžasné třídy, včetně prvků a

Skvělý(...)

...

Identifikátory

Identifikátory jsou ještě přesnější než třídy, protože cílí vždy pouze na jeden jedinečný prvek. Stejně jako selektory tříd používají hodnotu atributu třídy, identifikátory používají jako selektor hodnotu atributu id.

Bez ohledu na typ zobrazeného prvku lze hodnotu atributu id použít na stránce pouze jednou. Pokud jsou přítomna ID, měla by být vyhrazena pro důležité prvky.

V CSS jsou identifikátory reprezentovány symbolem hash na začátku, za kterým následuje hodnota atributu id. Zde id vybere pouze prvek obsahující atribut id s hodnotou shayhowe .

#shayhowe (...)

...

Další voliče

Selektory jsou extrémně výkonné věci a ty popsané výše patří mezi nejčastější voliče, se kterými se setkáváme. Tyto selektory jsou jen začátek. K dispozici je mnoho pokročilých voličů a jsou snadno dostupné. Jakmile se s nimi vyznáte, nebojte se mrknout na některé z těch pokročilejších.

Dobře, začněme dávat všechno dohromady. Přidáme prvky na stránku uvnitř našeho HTML, pak můžeme tyto prvky vybrat a upravit je pomocí CSS. Nyní propojme tečky mezi HTML a CSS, aby tyto dva jazyky spolupracovaly.

Připojování CSS

Aby naše CSS mluvilo s naším HTML, musíme ukázat na soubor CSS z HTML. Osvědčeným postupem je zahrnout všechny naše styly do jednoho externího souboru, na který odkazuje prvek našeho dokumentu HTML. Použití jednoho externího CSS nám umožňuje používat stejné styly na celém webu a rychle na něm provádět změny.

Další možnosti přidání CSS

Mezi další možnosti začlenění CSS patří použití interních a inline stylů. S těmito možnostmi se můžete setkat i ve skutečnosti, ale obecně jsou odsuzovány, protože aktualizace webů jsou těžkopádné a těžkopádné.

Abychom vytvořili naši externí šablonu stylů, opět chceme použít náš vybraný textový editor k vytvoření nového textový soubor s příponou .css. Náš soubor CSS by měl být uložen ve stejné složce nebo podsložce jako náš soubor HTML.

Uvnitř prvku je použit prvek, který definuje vztah mezi HTML a CSS soubory. Protože odkazujeme na CSS, používáme atribut rel s hodnotou šablony stylů k označení jejich vztahu. Atribut href se navíc používá k označení umístění nebo cesty k souboru CSS.

V následujícím příkladu HTML dokumentu element ukazuje na externí šablonu stylů.

Aby se CSS správně vykreslovalo, musí hodnota cesty atributu href přímo odpovídat místu, kde je soubor CSS uložen. V předchozím příkladu je soubor main.css uložen ve stejném umístění jako soubor HTML, známém také jako kořenová složka.

Pokud je soubor CSS umístěn v podsložce, musí hodnota atributu href odpovídajícím způsobem odpovídat této cestě. Pokud byl například náš soubor main.css uložen do podsložky s názvem stylesheets, pak by hodnota atributu href byla stylesheets/main.css. Toto používá lomítko (nebo lomítko) k označení přesunu do podsložky.

Na tento moment naše stránky začínají pomalu, ale jistě ožívat. Do CSS jsme se zatím příliš neponořili, ale možná jste si všimli, že některé prvky mají styly, které jsme v našem CSS nedeklarovali. Je to prohlížeč, který těmto prvkům vnucuje vlastní preferované styly. Naštěstí můžeme tyto styly poměrně snadno přepsat, což je to, co uděláme dále pomocí resetu CSS.

Pomocí resetování CSS

Každý prohlížeč má své vlastní výchozí styly pro různé prvky. Jak Google Chrome zobrazení nadpisů, odstavců, seznamů atd. se může lišit od způsobu, jakým to dělá Internet Explorer. Aby byla zajištěna kompatibilita mezi prohlížeči, stal se široce používaný reset CSS.

Resetování CSS přebírá všechny základní prvky HTML s daným stylem a poskytuje konzistentní styl ve všech prohlížečích. Tyto resety obvykle zahrnují odstranění kót, odsazení, okrajů nebo dalších stylů, které tyto hodnoty snižují. Protože kaskádování CSS funguje shora dolů (o tom se brzy dozvíte) – náš reset by měl být na samém vrcholu našeho stylu. Tím je zajištěno, že se tyto styly přečtou jako první a je to. různé prohlížeče začne pracovat ze společného referenčního bodu.

Existuje spousta různých resetů CSS, které lze použít, všechny mají své vlastní silné stránky. Jeden z nejpopulárnějších od Erica Meyera, jeho reset CSS je přizpůsoben tak, aby zahrnoval nové prvky HTML5.

Pokud se cítíte trochu dobrodružně, je tu také Normalize.css vytvořený Nicholasem Gallagherem. Normalize.css se nezaměřuje na použití tvrdého resetu pro všechny základní prvky, ale místo toho na nastavení společných stylů pro tyto prvky. To vyžaduje hlubší porozumění CSS a také znalost toho, čeho byste chtěli pomocí stylů dosáhnout.

Kompatibilita a testování napříč prohlížeči

Jak již bylo zmíněno dříve, různé prohlížeče vykreslují prvky odlišně. Je důležité si uvědomit důležitost kompatibility a testování napříč prohlížeči. Stránky by neměly vypadat úplně stejně ve všech prohlížečích, ale měly by být blízko. Které prohlížeče chcete podporovat a do jaké míry, je rozhodnutí, které musíte učinit na základě toho, co je pro váš web nejlepší.

Při psaní CSS je třeba věnovat pozornost několika věcem. Dobrou zprávou je, že to všechno zvládnete a chce to jen trochu trpělivosti, abyste to zvládli.

Na praxi

Vraťme se tam, kde jsme na našem konferenčním webu naposledy skončili, a podívejme se, jak můžeme přidat nějaké CSS.

V naší složce styles-conference vytvoříme novou složku s názvem Assets. Zde uložíme všechny zdroje pro náš web, jako jsou styly, obrázky, videa atd. Pro naše styly pojďme do složky aktiv přidat další složku se šablonami stylů.

Pomocí textového editoru vytvoříme nový soubor s názvem main.css a uložíme jej do složky se styly, kterou jsme právě vytvořili.

Zobrazením souboru index.html v prohlížeči můžeme vidět, že prvky a

Již obsahuje výchozí styl. Zejména mají jedinečnou velikost písma a prostor kolem sebe. Pomocí resetu Erica Meyera můžeme tyto styly změkčit a umožnit každému z nich začít od stejného základu. Chcete-li to provést, podívejte se na jeho webovou stránku, zkopírujte kód a vložte jej na začátek našeho souboru main.css.

/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 Licence: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, velký, citovat, kód, del, dfn, em, img, ins, kbd, q, s, samp, malý, úder, silný, sub, sup, tt, var, b, u, i, střed, dl, dt, dd, ol, ul, li, sada polí, formulář, štítek, legenda, tabulka, titulek, tbody, tfoot, thead, tr, th, td, článek, stranou, plátno, detaily, vložit, obrázek, titulek, zápatí, záhlaví, hgroup, menu, nav, output, ruby, section, Summary, time, mark, audio, video ( margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline ; ) /* HTML5 display-role reset pro starší prohlížeče */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1; ) ol, ul ( styl seznamu: žádný; ) blockquote, q ( uvozovky: žádné; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border- kolaps: kolaps; border-spacing: 0; )

Náš soubor main.css se začíná formovat, tak jej propojme se souborem index.html. Otevřete index.html v textový editor a přidejte prvek do , hned za prvek.

Protože prostřednictvím prvku odkazujeme na styly, přidejte atribut rel se stylem value .

Zahrneme také odkaz na náš soubor main.css pomocí atributu href. Pamatujte, že náš soubor main.css je uložen ve složce šablon stylů, která se nachází ve složce aktiv. Hodnota atributu href, což je cesta k našemu souboru main.css, by tedy měla být assets/stylesheets/main.css.

Konference stylů

Je čas zkontrolovat naši práci a podívat se, jak naše HTML a CSS spolupracují. Otevření souboru index.html (nebo obnovení stránky, pokud je již otevřena) v prohlížeči by mělo ukázat mírně odlišný výsledek než dříve.

Rýže. 1.04. Naše stránky konference Styly s resetem CSS

Demo a zdrojový kód

Níže si můžete prohlédnout web Styles Conference v jeho aktuálním stavu a také si stáhnout aktuální zdrojový kód webu.

souhrn

Takže je vše v pořádku! V tomto tutoriálu jsme udělali několik velkých kroků.

Přemýšlejte, nyní znáte základy HTML a CSS. Jak budeme pokračovat a budete trávit více času psaním HTML a CSS, budete mnohem pohodlnější pracovat s těmito dvěma jazyky.

Abychom to shrnuli, probrali jsme následující:

• Rozdíl mezi HTML a CSS.
• Úvod do prvků HTML, značek a atributů.
• Nastavení struktury vaší první webové stránky.
• Úvod do CSS selektorů, vlastností a hodnot.
• Práce s CSS selektory.
• Ukazatel na CSS z HTML.
• Důležitost resetu CSS.

Nyní se podíváme blíže na HTML a trochu se seznámíme se sémantikou.

Prostředky a odkazy

• Běžné HTML termíny prostřednictvím Scripting Master
• Podmínky a definice CSS prostřednictvím působivých webů
• Nástroje CSS: Resetujte CSS pomocí Erica Meyera

Cíl práce: seznámit studenty se základními pojmy jazyka HTML, strukturou HTML dokumentu, povinnými značkami, komentáři, metodami formátování textu, fyzickými a logickými styly a osvojení dovedností při tvorbě jednoduchých statických webových dokumentů.

V laboratorních hodinách budeme používat textový editor Poznámkový blok pro přípravu HTML souborů a prohlížeč Internet Explorer jako nástroj pro sledování toho, co bylo uděláno.

Teoretické informace

Základní pojmy

Hyper-textový- informační struktura, která umožňuje vytvořit sémantická spojení mezi textovými prvky na obrazovce počítače takovým způsobem, že můžete snadno přecházet z jednoho prvku do druhého. V praxi se v hypertextu některá slova zvýrazňují podtržením nebo vybarvením jinou barvou (hypertextové odkazy). Zvýraznění slova označuje spojení mezi tímto slovem a nějakým dokumentem, ve kterém je téma spojené se zvýrazněným slovem probráno podrobněji. Samostatný dokument napsaný ve formátu HTML se nazývá:

HTML dokument;

Webový dokument;

Webová stránka.

Takové stránky jsou obvykle ve formátu NTM nebo HTML.

Skupina webových stránek patřících jednomu autorovi nebo jednomu subjektu IEDV a vzájemně propojených běžnými hypertextovými odkazy tvoří strukturu nazývanou webový uzel nebo web. Každá HTML stránka má svou vlastní unikátní URL - AdpEC na internetu.

Rám (Rám) - termín, který má dva významy. První hodnotou je oblast dokumentu s vlastními posuvníky. Druhým je obrázek 0DNN0H v animovaném grafickém souboru (rámci).

Applet (Applet) - program přenesený na klientský počítač ve formuláři samostatný soubor a spustí se při prohlížení webové stránky.

skript (Skript) , neboli skript, je program zahrnutý do webové stránky pro rozšíření jejích možností. V určitých situacích prohlížeč Internet Explorer zobrazí zprávu: "Povolit spuštění skriptu na stránce?" V tomto případě máme na mysli skripty.

CGI (Běžný Brána Rozhraní) - obecný název pro programy, které vám při práci na serveru umožňují rozšířit možnosti webových stránek. Bez těchto programů není možné vytvářet interaktivní webové stránky.

Prohlížeč (Prohlížeč) - program pro prohlížení webových stránek.

Živel- Návrh jazyka HTML. Můžete si to představit jako kontejner, který obsahuje data a umožňuje vám je určitým způsobem formátovat. Jakákoli webová stránka je sada prvků. Jednou z hlavních myšlenek hypertextu je možnost vnořování prvků. Například:

Obsah prvku, data, která prvek formátuje

Štítek(v angličtině tag - label, deskriptor, label) - počáteční nebo koncová značka prvku. Tagy definují hranice působení prvků a oddělují prvky od sebe. V textu webové stránky jsou značky uzavřeny v lomených závorkách< >a za koncovou značkou vždy následuje lomítko. Text není mezi těmito závorkami (< >), je zcela viditelný při prohlížení v prohlížeči. Například:

Obsah prvku, data, která

formátuje prvek

Tento text bude umístěn v samostatném odstavci

Jakákoli webová stránka je sada prvků. Jedním ze základních principů HTML je schopnost vnořovat jeden prvek do druhého.

Atribut- parametr nebo vlastnost prvku. Atributy jsou umístěny uvnitř počáteční značky a jsou od sebe odděleny mezerami. Pokud cement obsahuje text, mohou atributy určovat barvu a velikost písma, zarovnání odstavců textu atd. Pokud prvek obsahuje obrázek, pak atributy mohou určovat velikost obrázku, přítomnost a velikost rámečku kolem obrázku atd.

Tento text bude zarovnán na střed obrazovky

Tento příklad opět používá značku, která definuje začátek a konec odstavce. Počáteční značka však obsahuje atribut align, který nastavuje zarovnání textu na střed obrazovky.

Poznámka:

Žádný užitečné informace musí být mezi počáteční a koncovou značkou udávající její formát;

Všechny atributy jsou umístěny v počáteční značce;

Pro snadné použití můžete počáteční značku napsat velkým (velkým) písmenem (P) a koncovou značku malým (malým) písmenem (/p), i když to není nutné;

Ne všechny prvky vyžadují koncový (uzavírací) tag;

Začněte psát každý nový prvek pomocí nový řádek. Odsadit vnořené prvky (záložka). To opět není nutné, ale značně vám to usnadní práci.

Když si stáhnete jakýkoli dokument z WWW, jeho text se v okně vašeho prohlížeče zobrazí v perfektně naformátované a snadno čitelné formě. To znamená, že WEB stránky nejsou obyčejný text, ale obsahují také některé pomocné informace pro ovládání prezentace dokumentu v okně vašeho prohlížeče. Protože při vytváření dokumentu není jasné, na jakém typu počítače si jej uživatel bude prohlížet, nelze WEB stránky připravit a uložit ve formátu vyvinutém pro konkrétní počítačovou platformu, například ve formátu Microsoft Word pro Windows XP. Aby uživatel pracující na jakémkoli typu počítače viděl dokument v odpovídajícím formátu, používá se jazyk HTML vyvinutý speciálně pro tento účel.

Co je to vlastně HTML?

Pokud pracujete s prohlížečem, vyberte v nabídce příkaz Zobrazit - Zobrazit HTML kód (Zobrazit - Zdroj). Na displeji se objeví okno s počátečním kódem této stránky v HTML.

Buď stiskněte CTRL+U

Vzhled WEB stránek na internetu se často mění. Pro nás to ale v tuto chvíli není podstatné.

HTML - HyperText Markup Language

HTML – HyperText Markup Language je poměrně běžná sada příkazů, které popisují strukturu dokumentu. Tento značkovací jazyk umožňuje zvýraznit jednotlivé logické části v dokumentu – nadpisy, odstavce, tabulky, seznamy atd., ale neurčuje konkrétní atributy formátování. Konkrétní typ formátování určuje prohlížeč sám při čtení dokumentu a prohlížeč konkrétně poskytuje lepší zobrazení WEB dokument na vaší obrazovce.

Jak již bylo zmíněno, WEB stránky můžete vytvářet pomocí speciálních editorových programů, které automaticky generují HTML kód, práce s nímž nevyžaduje znalost značkovacího jazyka. Tyto programy jsou ale často omezené ve svých schopnostech, obsahují chyby a často produkují špatný HTML kód, který nefunguje na všech platformách. Pokud tedy chcete seriózně ovládat WEB design a porozumět principům tvorby WEB dokumentů, neobejdete se bez znalosti základů jazyka HTML, zejména proto, že vytváření WEB stránek na něm není vůbec obtížné. Možná je to ještě snazší než ovládat program pro vytváření HTML stránek.

jazyk HTML

Jazyk HTML existuje v několika variantách nebo specifikacích. Stejně jako verze softwarových produktů jsou specifikace číslovány: 2.0, 3.0, 3.2, 4.0. Jakákoli následující specifikace představuje rozšíření a doplnění předchozí. Použijeme posledně jmenované konstrukce HTML specifikace 4.0, které jsou podporovány nejnovější verze nejběžnější prohlížeče.

Dokument v okně HTML kódu je textový dokument ve speciálním formátu. Všechny soubory v tomto formátu mají HTML rozšíření(.html) nebo HTM (.htm). Dokument HTML kombinuje prostý text s prvky značek uzavřenými v lomených závorkách< и >, Například, , , , . Tyto značkovací prvky se nazývají tagy. Štítky mohou být jednoduché, otevírací a zavírací a mohou se skládat z následných částí v určitém pořadí:

• levá úhlová závorka.

Úvodní značka, která se objevuje na začátku dokumentu HTML a označuje jeho začátek, se tedy skládá z názvu HTML a dvou lomených závorek< >, a tag umístěný na konci WEB dokumentu kromě určených částí obsahuje i lomítko / znak znamenající uzavírací tag a označující konec dokumentu. Značka znamená začátek kódu skriptovacího programu integrovaného do dokumentu. Tato značka obsahuje kromě názvu skriptu také atribut jazyka s hodnotou "vbscript", což znamená, že skript je napsán v jazyce vbscript.

Ve značkách lze použít pouze znaky latinky a v hodnotách atributů lze použít jakékoli znaky. Pokud jsou jako hodnoty atributů použity například znaky azbuky, musí být uvedeny v uvozovkách, například name="Section 1".

Jazyk HTML nerozlišuje mezi velkými a malými písmeny, takže značky a jsou ekvivalentní. Ale v roce 2010 konsorcium w3c, které na sebe vzalo odpovědnost dát věci do pořádku v oblasti specifikace jazyka HTML, ve své nejnovější verzi neúnavně radí psát značky malými znaky, a jinými slovy významné podmínky. Proto dále budeme používat psaní značek malými písmeny.

Tagy jako html základ

Většina tagů je párových: za úvodním tagem následuje odpovídající uzavírací tag a mezi nimi je text nebo jiné tagy, například:

Internetové knihkupectví Three Steps

V takových případech tvoří dva tagy a mezi nimi uzavřená část dokumentu blok nazvaný HTML prvek. Některé značky jsou například jednoduché a nemají uzavírací značku. Tyto značky jsou samy o sobě prvky HTML.

Většina značek může mít jeden nebo více atributů – charakteristik, které poskytují další informace o tom, jak má prohlížeč zpracovat aktuální značku. Ale nemusí tam být vůbec žádné atributy. Atribut tagu se skládá z názvu, například align, rovnítka = a hodnoty, která je určena řetězcem znaků, například "center": align="center". Hodnoty atributů jsou obvykle uzavřeny v uvozovkách. Pokud však tyto hodnoty používají pouze latinské znaky, čísla a pomlčky, lze uvozovky vynechat, například: align=center. Vynechání uvozovek se však přísně nedoporučuje kvůli řadě okolností souvisejících s nadcházející integrací HTML s JavaScriptem a jazyky. Vypěstujte si proto zvyk okamžitě psát atributy v uvozovkách.

Struktura dokumentu HTML

Každý HTML dokument má specifickou strukturu, která vypadá takto:

…

Struktura dokumentu HTML obsahuje následující základní prvky:

• značky a , které označují začátek a konec dokumentu;
• záhlaví oddělené a ;
• tělo ohraničené štítky...

Titulek, oddělený značkami a, používá značky ... k definování názvu dokumentu, který by měl nastínit jeho obsah a obvykle obsahuje méně než 5–6 slov. Tento název zobrazují prohlížeče v záhlaví pracovního okna programu a roboti, kteří sestavují indexy pro vyhledávače, identifikují dokument pomocí jeho názvu.

Kromě prvku ... může záhlaví obsahovat prvky ..., například pro označení informací o dokumentu. Úvodní značka obsahuje dvojice name=value, které popisují vlastnosti dokumentu, například typ dokumentu, jeho šifrování, autorství, seznam klíčových slov atd. Tyto údaje využívají také vyhledávače při indexování dokumentů.

HTML (HyperText Markup Language) je speciální formátovací jazyk textové dokumenty(nazývá se také dokumentový značkovací jazyk - prohlížeč WWW dokumentů). HTML je poměrně jednoduchá sada příkazů, které popisují strukturu dokumentu. HTML umožňuje zvýraznit jednotlivé logické části v textu (nadpisy, odstavce, seznamy atd.), umístit samostatně připravenou fotografii nebo obrázek na webovou stránku a uspořádat na stránce odkazy pro komunikaci s jinými dokumenty.

HTML nespecifikuje specifické a přesné atributy formátování dokumentu, jako to dělá například Microsoft Word. Konkrétní typ dokumentu je nakonec určen pouze programem - prohlížeč na tvém počítači. Potřeba právě takového přístupu je spojena s heterogenitou hardwaru a software počítače připojené k internetu. HTML také není programovací jazyk, ale webové stránky mohou obsahovat vložené programy - skripty na Javascriptové jazyky A Visual Basic Skript a programy - applety v jazyce Java.

Z pohledu uživatel Windows, Webová stránka je jednoduše soubor *.htm nebo *.html umístěný na internetovém serveru, v lokální síť nebo na pevném disku vašeho počítače.

Pamatujte, že HTML není programovací jazyk, je určen pouze pro označování dokumentů. Tito. v podstatě tvoří HTML stránku, jednoduše upravíte text pomocí značek v podstatě stejným způsobem jako v běžném textovém editoru. Každá značka má svou vlastní vlastnost, ale všechny jsou uzavřeny v lomených závorkách "", například , .

Všechny značky v HTML jsou rozděleny do dvou typů – párové a nepárové. Párové tagy jsou ty, jejichž úvodní tag vyžaduje uzavírací tag. Závěrečné značky v HTML jsou označeny lomítkem a psány takto. Nespárované značky nevyžadují uzavírací značku. Příkladem takových značek je značka přerušení na další řádek
. Existují také povinné značky, které musí být použity na všech stránkách, a volitelné značky, které se používají podle potřeby.