Každý web má jiný vzhled a funkce, ale jaký je k tomu důvod a v jakém jazyce je stránka napsána? K tomu všemu slouží kaskádové styly a jazyk HTML. Na kód tohoto jazyka se můžete sami podívat, pokud si prohlédnete objekty v prohlížeči. Konkrétně, co je jazyk HTML, si povíme v tomto článku.
Náš článek je zaměřen hlavně na začátečníky, takže doufáme v pochopení pravidelných čtenářů blogu!
Příspěvek bude rozdělen do následujících sekcí:
Co je HTML stránka
Ke stylování všech prvků stránky, včetně tabulek, obrázků a textu, se používá značkovací jazyk zvaný HTML. Můžete se podívat na kód a pokusit se mu porozumět, pokud nějaký používáte moderní prohlížeč, stačí kliknout pravým tlačítkem na stránku a v menu kliknout na řádek "zdrojový kód stránky" nebo "HTML kód". Poté uvidíte něco jako editor, ve kterém je spousta nesrozumitelných nápisů a symbolů, to je kód jazyka HTML.
Každý dokument WWW má bohatě formátovaný a krásně navržený text, stejně jako hypertextové odkazy a obrázky vybrané vlastníkem webu. Aby mohli programátoři s těmito prvky pracovat, vytvořili jazyk nazvaný HTML (Hyper Text Markup Language), což znamená hypertextový značkovací jazyk. Každý prohlížeč funguje a vykresluje HTML jinak, takže se v různých prohlížečích vykresluje jinak, zejména ve starších verzích. internet Explorer.
Všechny HTML dokumenty jsou podobné - to je standard textový soubor, který obsahuje značkovací značky pro daný jazyk spolu s texty, které si návštěvníci webu přečtou. Značky se používají k vytvoření stránky a právě je čte prohlížeč, když ji načítá. Díky definici tagů a jejich designu můžete umístit článek nebo jiný materiál na konkrétní místo na stránce, přidat grafické soubory a fotografie a také hypertextové odkazy na další stránky webu. Zpočátku HTML soubor není webový dokument, stane se jím až po přečtení prohlížečem.
Standardní HTML kód má samozřejmě své nevýhody a nevýhody. Budete se muset hodně snažit uspořádat odstavce s textem na stránce, protože pro označení a všechno ostatní musíte předepsat určité vlastnosti pro celý text a pro každý jednotlivý odstavec. Pokud má váš web 50 stránek a každá má 10–20 odstavců, bude formátování textu a vkládání stejných značek pokaždé trvat velmi dlouho. To nejen unaví vlastníka webu, ale také negativně ovlivňuje váhu stránek webu. Právě z toho důvodu později vznikly kaskádové styly, stručně se jim říká CSS, což znamená Cascading Style Sheets, díky kterým můžete rychle uspořádat text. Můžete přiřadit jednu značku a dát jí určité vlastnosti, jako je barva textu, velikost, písmo a tak dále, a pak ji aplikovat na odstavce. V tomto případě je soubor šablony stylů uložen samostatně, lze jej nahrát na jeden web nebo několik najednou. Dále jsou hlavní prvky stránky napsány v HTML, vloží se text a poté se připojí CSS a veškerý text získá design, který potřebujete. Snižuje také váhu stránek, což je velmi důležité. 
Pomocí CSS je vhodné, pokud má web hodně stránek, které budou mít stejný design. Pokud napíšete několik řádků do dokumentu pomocí kódu CSS, můžete nastavit určité formátování textu pro všechny odstavce. Během vytváření webu návrháři rozvržení vytvoří hlavní rozvržení v HTML se zaměřením na rozvržení vytvořené ve Photoshopu. Ale poté stránka vypadá nedokončená, musíte vytvořit atraktivní vzhled, a toho je dosaženo kaskádovými styly. To se snadno naučíte, pokud máte hodně volného času, protože celkový vzhled všech stránek je přibližně stejný, můžete mít jedno rozvržení s několika bloky a zbytek stránek mu „přizpůsobit“. Kaskádové styly jsou zpravidla mnohem komplikovanější než CSS a je ještě obtížnější rozmístit web do bloků, nikoli do tabulek. Navíc v počátečních fázích můžete narazit na takový problém, jako je odlišné zobrazení webu v prohlížečích. CMS byly vytvořeny proto, abychom neztráceli čas a vydělávali peníze na stránkách - hotové rozvržení stránky, které mohou být bezplatné nebo placené a mají určitý systém správy.
Co je HTML5. Rozdíly a výhody
nový standard HTML5 pomáhá majitelům stránek a zbavuje je povinnosti formát používat Adobe Flash, stejně jako další programy. Díky tento standard můžete změnit zobrazení textu na stránkách a usnadnit zadávání informací při vyplňování elektronických formulářů. Pokud rozdělíme všechny inovace tohoto jazyka, můžeme rozlišit následující body:
- Po vstupu na stránky budou lidé moci sledovat video a poslouchat zvuk prostřednictvím prohlížeče, pro toto je vytvořeno samostatné tlačítko pro přehrávání.
- Nahrávání nových fotografií prostřednictvím tohoto jazyka je mnohem jednodušší, můžete dokonce vytvářet galerie obrázků. Nemusíte ani stahovat další software.
- Můžete najít text a označit textové bloky. Text můžete také doladit, aby se dal dobře číst.
- Pokud si dříve v HTML4 člověk všiml chyby po zadávání dat až při odeslání formuláře, nyní prohlížeč okamžitě hlásí chybu, pokud osoba vyplní formulář špatně. To je pro uživatele velmi výhodné, protože nemusí vícekrát vyplňovat stejné sekce údaji.
- Není třeba používat softwarových modulů, protože s pomocí HTML5 můžete realizovat jakékoli nápady týkající se webu. Pouze v případě, že je stránka unikátní a potřebujete vymyslet něco speciálního, instalujte další softwarové moduly.
- Dříve si lidé nemohli prohlížet stránky normálně prostřednictvím tabletu nebo smartphonu, protože standard HTML4 nemá kompatibilitu prohlížeče pro mobilní zařízení a další operační systémy. Pomocí jazyka HTML5 jsou vytvářeny stránky, které se ideálně čtou ze všech zařízení vysokou rychlostí.
Pokud máte nějaké dotazy - napište je do komentářů, rádi je zodpovíme!
Co je HTML a k čemu slouží? - 3,7 z 5 na základě 3 hlasů
Než přistoupím ke studiu, navrhuji zvážit, co je to html a k čemu je určeno.
HTML je zkratka pro Hyper Text Markup Language, což lze přeložit jako Hyper Text Markup Language. S pomocí tohoto jazyka vznikají webové stránky.
HTML není programovací jazyk. Je určen pro značkování textových dokumentů. To znamená, že s jeho pomocí provádíme formátování textu.
Jak tedy můžeme upravovat text pomocí HTML? Jde o to, že jazyk HTML se skládá ze značek (tagů). Každá značka určuje, jak bude text na vaší stránce vypadat.
Jinak řečeno, každá značka dává vašemu prohlížeči (programu, kterým si prohlížíte webové stránky) konkrétní příkaz, prohlížeč tomuto příkazu rozumí a na vaší obrazovce zobrazí hotový text naformátovaný určitým způsobem.
Samotný kód tedy nevidíte, prohlížeč zobrazí již naformátovaný text a grafiku na obrazovce vašeho monitoru. Pokud se chcete přesvědčit na vlastní oči html kód a tagy, které formátují text, který právě čtete, pak přejděte na svůj internetový prohlížeč Průzkumník přejděte na položku nabídky > zobrazit a z rozevíracího seznamu vyberte položku > zdroj. Podívejte se na nákres.
Tím se otevře okno obsahující kód. Podobný tomu, který můžete vidět na druhém obrázku. Tento kód můžete rolovat a prohlížet, většinou se skládá z tagů, uvnitř kterých je ve většině případů text. Aniž bychom zacházeli do podrobností, můžeme říci, že každý tag určuje, kde, jak, jaké písmo, jakou barvu bude váš text vypadat.
Ve skutečnosti však HTML tagy dokážou nejen formátovat text, ale můžete je použít k vložení obrázku na stránku, vytvoření tabulek, vytvoření odkazů a mnoho dalšího.
Každý tag plní své specifické funkce a abyste se naučili vytvářet webové stránky, musíte vědět, k čemu je ten či onen tag určen. Myslím, že teď už trochu chápete, co je html.
Nejprve se podívejme, co je tag. Zjednodušeně řečeno, tagy se skládají z běžných anglických znaků nebo slov, pouze tato písmena a slova jsou navržena určitým způsobem.
Každý štítek se skládá z lomených závorek,< >ve kterém jsou umístěny určité znaky. Většina z nich se skládá z otevírání a zavírání.
Například tag - otevření a- zavírání. Jak vidíte, liší se přítomností koncového lomítka / uzavíracího znaku. Pokud je mezi nimi umístěno nějaké slovo, např. Ahoj pak se zobrazí tučně. Vše, co je uzavřeno v lomených závorkách, se v tomto případě nezobrazuje na obrazovce, ale je to jakýsi příkaz pro prohlížeč, že slovo, které je uzavřeno mezi těmito značkami, má být zobrazeno tučně.
Tagů je přirozeně mnoho a každý z nich plní své specifické funkce. Přibližně podle tohoto principu fungují všechny ostatní značky a celé HTML jako celek. Když si z internetu vyžádáte jakýkoli dokument, váš prohlížeč stáhne html kód, správně jej interpretuje a zobrazí na vaší obrazovce hotový text, grafiku, tabulky atd.
Účelem této lekce bylo poskytnout vám představu o tom, co je HTML, v následujících lekcích začneme studovat tento značkovací jazyk. Aby vám učení látky bylo snazší, doporučuji začít studovat lekce od těch nejjednodušších, plynule přecházet ke složitějším, např. v následujícím pořadí: na začátku studujte jako dokument , se kterými se nastavují a vyrábějí, učí se nastavovat atd. až obtížnější.
Chcete-li vytvořit stránky HTML, můžete použít speciální programy, jako je , nebo můžete stránky vytvářet pomocí jednoduchého textového editoru, který je dostupný v jakékoli verzi Windows.
HTML- je zkratka pro HyperText Markup Language, což je nejrozšířenější jazyk pro psaní webových stránek.
- Hyper-textový odkazuje na způsob propojení webových stránek (dokumentů HTML). Odkaz dostupný na webové stránce se tedy nazývá hypertext.
- Jak název napovídá, HTML je značkovací jazyk, což znamená, že pomocí HTML jednoduše „označíte“ textový dokument pomocí značek, které webovému prohlížeči sdělují, jak jej strukturovat pro zobrazení.
HTML bylo původně navrženo k definování struktury dokumentů, jako jsou nadpisy, seznamy, odstavce atd., aby se usnadnila výměna. vědecké informace mezi výzkumníky.
HTML se nyní široce používá k formátování webových stránek pomocí různých značek dostupných v jazyce HTML.
HTML dokument
Následující příklad ukazuje dokument HTML v nejjednodušší forma:
záhlaví
Zde je obsah dokumentu...
Uložme kód do souboru HTML document.html pomocí vašeho oblíbeného textového editoru. A otevřete soubor pomocí webového prohlížeče, jako je Internet Explorer, Google Chrome nebo Firefox atd. Měl by ukazovat následující výsledek:
Značky pro vytvoření dokumentu HTML
Jak již bylo zmíněno dříve, HTML je značkovací jazyk a k formátování obsahu používá různé značky. Tyto štítky jsou uzavřeny v lomených závorkách. Většina značek má odpovídající koncové značky, s výjimkou několika značek. Například tag má uzavírací značku a tag má blízký štítek jiný.
Výše uvedený příklad používá k vytvoření dokumentu HTML následující značky:
| Štítek | Popis | ||||||
| Tato značka definuje typ dokumentu a verzi HTML. | |||||||
| Tato značka pokrývá celý HTML dokument a skládá se hlavně z názvu dokumentu, který je reprezentován značkami ... a tělo dokumentu, které je reprezentováno značkami ... . | |||||||
| Tato značka představuje název dokumentu, který může obsahovat další html značky jako např Všechny značky hlavy a těla se naučíme v pozdějších tutoriálech, nyní se podívejme, co je značka deklarace dokumentu. ProhlášeníDeklarace značkypoužívá webový prohlížeč k pochopení verze HTML použité v dokumentu. Současná verze HTML je 5 a používá následující deklaraci:
Existuje mnoho dalších typů deklarací, které lze použít v dokumentu HTML, v závislosti na tom, která verze HTML se používá. Další podrobnosti o tom uvidíme při diskuzi o značcespolu s dalšími HTML tagy. Ahoj všichni!. Druhou lekci budeme věnovat otázce - co je HTML a jak s ním pracovat. V něm se seznámíte s vlastnostmi nejoblíbenějšího webového programovacího jazyka a jasně pochopíte jeho hlavní podstatu. Podle toho, jak se to naučíte, bude pro vás snazší se posouvat vpřed a pak můžete snadno (i když ne, stále musíte tvrdě pracovat) převzít dobytí složitějších jazyků pro tvorbu webových stránek, jako je PHP. Pojďme tedy k věci. Co je HTMLHTML (hypertext markup language) je hypertextový značkovací jazyk. Standardní značkovací jazyk pro internetové dokumenty na World Wide Web. Je to jeden z nejpopulárnějších jazyků pro vývoj webových stránek. Je také považován za nejjednodušší z hlediska načítání v prohlížečích. Nemá žádné složité „mutace“ jako PHP, které před zobrazením stránky v prohlížeči nejprve zadá požadavek na databázi MySql a poté teprve zobrazí obsah uživateli. Nebudu vyprávět dlouhé slovní předehry o tom, jak to vzniklo, protože je to dlouhé a nezajímavé. Pro všechny tyto body - skvělá Wikipedie, která vám pomůže. Chceme se naučit, jak rychle vytvářet webové stránky, že? Pokuta! Pak pojďme dál a pochopme všechny jemnosti této webové vědy. Základy jazyka HTML. Koncept značkyBez znalosti pevného základu se nikam nedostanete, „mat.chast“ („základ“ jakéhokoli předmětu ještě nikdo nezrušil). A nebudeme vybočovat z tradic a pravidel. Základem jazyka HTML jsou značky, nebo přesněji sada značek. Jsou takto označeni<тег>. Tagy jsou vždy spárovány a zobrazeny takto <тег>.
Každý z nich vystupuje přísně určitou funkci zobrazit v prohlížečích. Někdo zobrazí na obrazovce obrázek, jiný odkaz, další zodpovídá za odstavce, další vytvoří tabulku a tak dále. Můžeme do nich napsat libovolný text. Rád jim říkám kontejnery, abych tak řekl, pro přehlednost. Jsou ale i single, ty si prostudujeme v dalších lekcích. A ještě jedna věc k pochopení důležitý bod. PROTI daný jazyk platí Paretův princip, tedy jako v každé oblasti života, činnosti a kdekoli jinde platí pravidlo 80/20. Co to říká? To nám říká, že 20 % (v našem případě html) jazyka dělá 80 % práce. Logika spočívá v tom, že není nutné učit se všechny značky, protože mnohé z nich se prostě nepoužívají nebo se používají velmi zřídka. V našich lekcích se tedy zaměřujeme na ty nejčastější a nejdůležitější. A šlo ti to skvěle! Struktura dokumentu HTMLStruktura jakéhokoli html dokumentu vypadá takto
Nyní popišme každý bod podrobněji: Co je Doctype a jeho významyPrvek doctype se používá k označení typu naší webové stránky. Jedná se o tzv. „deklaraci typu dokumentu“ neboli Prohlášení typu dokumentu. Tato značka by měla být vždy na prvním místě na každé stránce. Je to klíčová součást webových stránek, které tvrdí, že jsou v souladu se standardy: bez něj váš kód neprojde validátorem. Validátor webových dokumentů je počítačový program, která kontroluje shodu jakéhokoli dokumentu, datového toku nebo fragmentu kódu s určitým formátem, kontroluje syntaktickou správnost dokumentu nebo souboru (podle Wikipedie). Existuje několik hodnot Doctype:
Já používám druhou možnost. Je nejpohodlnější s ním pracovat, protože neomezuje vývojáře. Pro čtenáře je zmatek, jaký je tedy mezi nimi rozdíl a který z nich je nejlepší použít? Dovolte mi vysvětlit, jaký je jejich rozdíl. Přechodná verze striktně nesplňuje ověřovací standardy W3C (nebo v ruštině kontroluje), tj. prohlížeč zobrazí obsah webového dokumentu stejným způsobem, i když obsahuje zastaralé, nedoporučované a jiné nestandardní variace kódu. Verze Strict ale přesně dodržuje všechny standardy, to znamená, že pokud jste v praxi zapomněli vložit odpovídající symbol někam do kódu (například lomítko /), budete během kontroly upozorněni. Takto vypadá webový dokument v přísné verzi:
Radím vám použít druhou možnost a nekoupat se, protože je to nejpohodlnější. Nyní se podíváme na další součásti naší stránky. - neboli tag „head“, obsahuje nejdůležitější tagy, které prohlížeči vysvětlují, co je potřeba na stránce udělat a jaké mechanismy spustit. Definuje webový dokument a jeho obsah. Často je naplněný různými skripty, které spouštějí různé funkce na stránce, a nechybí ani důležitý „kontejner“ pro SEO propagaci – tag Nebudeme zabíhat do podrobností a historie toho, co HTML je, ale okamžitě přejdeme k hlavním bodům. HTML je základem pro vytvoření jakékoli webové stránky! Při studiu tématu stavby stránek je nutné začít právě jím. Není zde nic těžkého. Tuto technologii zvládne ABSOLUTNĚ KAŽDÝ! Chci hned poznamenat, že se nejedná o programovací jazyk, ale o značkovací jazyk. Proč je učení HTML snadné? Mluvit plynule anglický jazyk Nemusíte znát všechna slova, která jsou v angličtině. Zde se tedy stačí naučit některé ze základních značek a naučit se s nimi pracovat. A pak už stačí jen cvičit a rozvíjet dovednosti. Pojďme se začít učit tuto fascinující a zároveň jednoduchou technologii. Trocha teorie...Každá stránka se skládá ze značek. To znamená, že stránka ve skutečnosti nevypadá tak, jak jsme na ni zvyklí, ale skládá se z mnoha značek, z nichž každá hraje určitou roli. Vypadá to jako velká cihlová zeď. Pokud jsou všechny cihly na něm úhledně položeny, vypadá celá zeď krásně. Při psaní struktury stránky je tedy nutné věnovat pozornost každému tagu, protože je to „cihla“ pro naši budoucí stránku. Ale co je tag v HMTL?Tento HTML prvek stránku, která tak či onak ovlivňuje zobrazení a rozvržení stránky. Slovy, je to docela těžké pochopit, takže je třeba se na vše hned podívat v praxi a zvyknout si na kód. Podívejte se na obrázek níže: Toto je struktura nejjednodušší stránky. Ale tato opakovaná slova v trojúhelníkových závorkách jsou značky. Pokud otevřete svůj textový editor a napište tento kód a poté jej uložte ve formátu HTML, získáte stránku HTML. Zatím není jasné, co je HTML? 🙂 Z této struktury můžete vidět značky, které musí být přítomny. Toto jsou značky:
Aby to bylo jasnější, na obrázku níže jsem je zvýraznil oranžově: Vše, co napíšeme mezi značky a na naší stránce neuvidíme. Tyto značky mohou prohlížeči sdělit o kódování, o názvu naší stránky, lze zde připojit různé styly, skripty a tak dále. To vše uvidíte v dalších lekcích.A zde jsou všechny značky, které napíšeme mezi značky a, v závislosti na jeho účelu, ovlivní přesně strukturu našeho HTML stránky.No, bylo jasnější, co je HTML? 😉 Ale nezastavujeme a jedeme dál... Některé značky mohou mít uzavírací značku a některé ne. Například tag je tam uzavírací značka. Jak jste možná uhodli, štítky jsou uzavřeny lomítkem.Je velmi důležité respektovat otevírací a uzavírací štítky. Aby nedošlo k chybám. Prohlížeč nemusí ukazovat chybu, ale struktura vašich stránek bude nesprávná i při práci se styly (kde budeme vzhled) bude velký problém. Pokud má tedy tag uzavírací tag, pak musí být přítomen na správném místě. Vezměme si příklad, jak NEZAVÍRAT značky a v jakém pořadí to udělat. Příklad dvou značek: Správný HTML KÓD To, co vidíte výše - toto je správné pořadí psaní uzavíracích značek. Ale taková situace může nastat CHYBA V KÓDU HTML Takže zavřete značky striktně zakázáno! Procvičte si, abyste pochopili, co je HTML...Chcete-li se dozvědět více o tom, co je HTML, můžete si to pouze procvičit. K tomu můžete použít jakýkoli textový editor. Dokonce i poznámkový blok. Doporučuji ale používat Notepad++, protože funkcí pro práci s HTML je mnohem více. Můžete si jej stáhnout z odkazu Download Notepad++. Tento editor má všechny funkce pro vytváření a úpravu HTML stránek. Začněme. Po otevření programu se zobrazí následující okno: Chcete-li vytvořit stránku HTML, musíte do tohoto pole zadat „tělo“ stránky. Níže uvedený text můžete zkopírovat a jednoduše vložit. Lepší je ale vše zadávat ručně. Takže si můžete rychle zapamatovat a zvyknout si na značky. Měli byste tedy získat následující: Dále je potřeba uložit tato stránka ve formátu HTML. Chcete-li to provést, klikněte na nabídku „Soubor“, zde klikněte na „Uložit jako ...“. Zadejte název stránky HTML. Pojmenoval jsem to index.html. Pak stačí uložit do pohodlné místo na tvém počítači. Poté se objeví podsvícení HTML tagy, protože editor Notepad++ pochopí, co to je HTML dokument. A mnohem příjemnější je práce s podsvícením. DoporučenoVýdělky za stahování aplikací – získejte peníze ze smartphonu se systémem ios nebo AndroidModerní technologie poskytují spoustu příležitostí nejen k osobnímu rozvoji, ale také k výdělku. Mnoho metod nevyžaduje žádné...
|
