Vytvoříme webovou stránku a hostujeme ji na lokálním webovém serveru. Vytvoření html stránky v poznámkovém bloku: vysvětlení pro figuríny

Dobrý den, milí přátelé a hosté mého blogu! Ach. Právě jsem si všiml, že mi Yandex udělil TIC 20, i když včera to bylo 0. Chápu, že TIC už vlastně nic neznamená, ale stále je to velmi příjemné a radostné. No, obecně jsem chtěl pokračovat v nedávno zahájené sérii článků o budování stránek. A první věcí, kterou bych rád začal, jsou základy hypertextového značkovacího jazyka (nikoli programování!) HTML.

HTML je stále základ všeho, a i když nejste cool webový vývojář, ale děláte své stránky na enginech, pak znalost jazyka HTML bude obrovským a tlustým plusem. Proto vám v dnešním článku chci říct, jak vytvořit html web pomocí poznámkového bloku.

Samozřejmě to, co dnes budeme dělat, se jen stěží bude nazývat web, takže hned řeknu, že dnes nevytvoříme cool web, ale řeknu vám strukturu toho, jak se vše děje s touto metodou vytváření vlastních webový zdroj. Myslím, že bys neměl mít žádné potíže. Ve výsledku vytvoříme pro začátek nejjednodušší webovou stránku. A pokud jste připraveni, jdeme na to!

Chcete-li začít, vytvořte dokument ve formátu prostého textu nebo otevřete poznámkový blok. Chcete-li otevřít poznámkový blok, můžete zavolat na řádek "Spustit" a zadat tam poznámkový blok. Otevřeno? Výborně!

Jakýkoli html dokument nebo web je označen speciálními značkami. Značka je speciální znak, který dává webu pokyn, jak správně zobrazit ten či onen obsah, který je v něm uzavřen. Nyní se tím nebudu podrobně zabývat, protože vám povím o značkách v mém .

Dovolte mi jen říci, že většina značek je spárována, to znamená, že úvodní značka je umístěna jako první a poté, co jsme zapsali informace, musíme značku zavřít. Zavírá se stejným způsobem jako otevírá, pouze před zavřením musíte vložit znak „/“.

Obecně platí, že pro fungování potřebujeme odstranit několik povinných značek. Podívejme se, jaké to jsou.

• - to je hlavní tag, díky kterému říkáme webu, že sem teď budeme psát v HTML, takže se nebojte. Stránka by jím měla začínat a končit.
• - zde se zadávají servisní informace, např. název dokumentu, popis a mnoho dalších. Umístěno bezprostředně za otevřenou značku .
• - Mezi tyto hodnoty zapíšeme titulek stránky, to znamená, že tento titulek se nebude zobrazovat v obsahu samotného webu, ale na kartě prohlížeče. Tento typ je umístěn mezi
  A
  .
• - Tato značka je zodpovědná za zobrazování obsahu na webu. To znamená, že vše, co napíšete mezi tyto značky, se zobrazí na webové stránce.

Mám pocit, že ne všichni všemu rozuměli a někteří mají v hlavě nepořádek, tak vám vše ukážu na živém příkladu.

Živý příklad

Vytvoříme tedy textový dokument a napíšeme tam následující obsah:

napsal jsi? Výborně! Zde jsem vám dal informace konkrétně ve formě obrázku, nikoli ve formě textu, takže je nebudete kopírovat. Jsem darebák, že?)) Všimli jste si, že štítky jsou do sebe vnořené jako hnízdící panenky? Tak to má být.

Rada! Přesto se snažte nekopírovat obsah, ale přepsat jej vlastníma rukama. Veškerou látku se tak naučíte mnohem lépe a rychleji.

Poté uložte dokument jako html. Chcete-li to provést, při ukládání po pojmenování dokumentu vložte tečku a napište html. To znamená, že byste měli získat index.html. Poté se váš dokument automaticky uloží nikoli jako textový dokument, ale jako webová stránka. A když dokument uložíte, změňte kódování na UTF-8. Tento soubor můžete otevřít v libovolném prohlížeči. Udělejme to a uvidíme, co máme.

Podívejte se, kolik jsme toho celkem napsali, a v konečném dokumentu zůstal pouze náš uvítací text. Proč? Ano, protože samotné tagy se ve finální verzi nezobrazují a zobrazené informace se zobrazují pouze mezi tagy tělo. Takže takhle to všechno dopadlo. Ale podívejte se, to, co jsme napsali do hlavy, nebo spíše do nadpisu, se nyní zobrazuje v záložce prohlížeče.

Pokud zde budete chtít znovu něco upravit, pak vám bude stačit tento již uložený dokument znovu otevřít v poznámkovém bloku. Obecně, podívejte se, takže s pomocí poznámkového bloku jsme vytvořili náš první web. Ano ... je těžké tomu říkat web, ale ve skutečnosti je. Udělali jsme základ (framework) a pokud jej nahrajeme na hosting, tak se již zobrazí na internetu.

Zkuste ale přidat pár mezer a napsat další text, nebo jen napsat pár řádků textu a uložit ho do stejného dokumentu.

Nyní otevřete tento dokument pomocí prohlížeče. co vidíme? A to, že vaše mezery a zalomení řádků neovlivnily dokument a vše jde na jednom řádku. Ošklivé, že? A to vše proto, že samotný html nerozumí vašim mezerám (kromě jedné) nebo pomlčkám. Aby bylo možné zalomit řádky, je potřeba vše označit dalšími značkami, o kterých si povíme v dalších článcích.

Mnozí si pravděpodobně pomyslí něco jako: „A to jsou vaše stránky? Ano, spadl jsi z dubu. Ano, moji drazí. Tuto primitivní webovou stránku lze také nazvat webovou stránkou. A ještě jednou opakuji, že smyslem tohoto článku nebylo vytvořit mega cool web, ale ukázat vám základ jakéhokoli webu, jak vypadá, jak se všechno děje.

Ale nebojte se. To vše jsou úvodní lekce. Dále se budeme nořit hlouběji a hlouběji do html značení a budeme schopni vše správně naformátovat a uspořádat. Obecně bude vše v pohodě a uděláme plnohodnotný webový zdroj. Jen se to všechno nevejde do jednoho článku a ani to nebudu mačkat a krájet, jinak z toho bude odpad.

Dedikovaný notebook pro webové vývojáře

Tento prehistorický nástroj však již nebudeme používat, protože pro vývojáře existuje pohodlnější a sofistikovanější poznámkový blok a je zcela zdarma. Stáhnout to odtud a nainstalujte běžným způsobem.

V budoucnu budu pracovat přes editor Notepad ++. Nainstalujte jej a pochopíte, proč je to pohodlné. Nejsou zde žádná moudrá nastavení, ale pokud jste náhle nainstalovali anglickou verzi, přejděte do nabídky „Předvolby“ a ve sloupci „Lokalizace“ vyberte ruštinu.

Jo, a také přejděte do nabídky "Kódování" a vyberte "UTF-8". No, okamžitě uložte tento soubor ve formátu html. Chcete-li to provést, vyberte nabídku "Soubor" - "Uložit jako" a pojmenujte rejstřík dokumentu výběrem z rozevíracího seznamu formát "html". Děje se tak proto, aby program rozuměl tomu, co děláme, a zvýraznil za nás potřebné značky a příkazy.

Proč index stránky vůbec nazývám? Faktem je, že když navštívíte jakýkoli web, ve výchozím nastavení hledá stránku index.html nebo index.php. Právě tyto soubory jsou obecně přijímány jako hlavní, ale obecně to lze na serveru změnit.

Samozřejmě, pokud se chcete vše rychle naučit, doporučuji se podívat na nedávno vydané Kurz HTML5 a CSS3. Tam je vše podrobně popsáno a ukázáno na živém příkladu, navíc se dozvíte, jak vytvořit několik typů stránek. Obecně velmi zajímavé a poučné lekce.

No, doporučuji, abyste se přihlásili k odběru aktualizací mého blogu, abyste nezmeškali další lekce a další zajímavé věci. Nezapomeňte se také podívat na mé další příspěvky na blogu. Jsem si jist, že mnohé z nich vám budou užitečné. Obecně vám přeji hodně štěstí. Uvidíme se v dalších článcích. Ahoj!

S pozdravem Dmitrij Kostin.

Jak víte, všechno skvělé vždy začíná v malém. Pokud vás zajímá odpověď na otázku, jak vytvořit web přes poznámkový blok, pak jste o této možnosti určitě někde slyšeli. To je skutečně možné. Ale hned je třeba zmínit, že v současné době s největší pravděpodobností nikdo nevytvoří moderní dynamický interaktivní web prostřednictvím poznámkového bloku, protože na to existují speciální programy, které výrazně urychlují a zjednodušují proces vývoje. Ale je docela možné vytvořit plnohodnotnou webovou stránku.

HTML je jen způsob standardizace značení dokumentů, které prohlížeče jedinečně interpretují tak, aby se zobrazovaly na obrazovkách počítačů v uživatelsky přívětivé podobě. Hlavním nástrojem jazyka HTML jsou speciální strukturní prvky, s jejichž pomocí je dokument vypracován. Říká se jim deskriptory nebo značky.

Obecně je značka konstrukcí formuláře

Zvažte hlavní typy značek a jejich účel.

• Živel . Nastaveno na úplný začátek stránky a slouží k informování prohlížeče, jak má tento dokument interpretovat. Je volitelná, ale na stránce velmi žádoucí, aby se předešlo případným problémům s jejím zobrazením.
  
• Štítek . Jedná se o párový štítek a skládá se ze dvou částí A. Každá stránka webu začíná touto značkou a končí jí.
  
• Štítek . Je to také párový štítek a skládá se ze dvou částí A. Tato značka obsahuje různé důležité informace o stránce: její název, odkazy na použité styly designu, zahrnuté skripty, speciální metadata.
  
• Štítek a nachází se uvnitř štítku . Tato značka definuje název stránky, se kterou bude viditelná v prohlížeči.
  
• Štítek . Jedná se o párový štítek, který se skládá ze dvou částí A a následuje značku Na stránce. Je v tagu <body>, který obsahuje všechny informace, které se zobrazují na stránce v prohlížeči.
  
• Štítek . Je svobodný. Používá se k označení konce řádku v dokumentu.
  
• Štítek . Odkazuje na párové značky, je napsán v mírně odlišné formě než ostatní značky a používá se k vytváření odkazů. Je základním prvkem celého konceptu jazyka HTML, ale i internetu jako celku.
  
• Štítek

  . Odkazuje na párové značky a skládá se ze dvou částí. S jeho pomocí se vytvoří textový odstavec.
  

• značky

  ,

  ,

  ,

  ,

  ,

  . Patří mezi párové značky, protože se skládají například ze dvou značek

  A

  . Tyto značky slouží k vytvoření šesti úrovní podnadpisů a zároveň ukazují důležitost textu v nich obsaženého ve vztahu k celému dokumentu.
  

• Štítek . Je to také párový štítek, který se skládá ze dvou částí A a nastaví styl písma na tučné.
  

Mnohým se může zdát, že tvorba webových stránek je obtížný, až nemožný úkol. K tomu se musíte hodně učit, učit se, dělat. Ve skutečnosti existuje asi 100 značek, které se ani nemusíte učit. Důležité je pouze pochopit, co a kde se používá. Informace lze nakouknout do různých cheatů a časem si začnete pamatovat štítky na stroji.



Jednoduchý kód, aby byl text červený

Není o moc těžší psát tučně

Dosáhli jsme dna

Nyní víte o značkách trochu více a můžete je používat. Zkusme vložit odkaz na propojení několika stránek dohromady..

Dobře, teď je po všem. Vaše první stránka je připravena

Soubor musí být pojmenován index.html. Konec ".html" označuje příponu souboru. Pokud jednoduše zadáte název indexu, dokument se uloží jako textový soubor a prohlížeč jej neotevře.

Uložil jsem dokument na plochu. Nyní jej musíte najít, stisknout pravé tlačítko myši a otevřít v libovolném prohlížeči. Vyberu si Google Chrome.

Takto vypadá stránka, kterou jsem právě vytvořil. Vaše to nebude jiné. Všechno je úplně stejné: s obrázky a barevným písmem.

Nyní půjdu do podrobností o značkách, ale nyní jen odstraníme „ centrum “ a vložte řádek obsahující slovo „ barva". Mimochodem, už jsem psal. Je to velmi jednoduché, doporučuji přečíst.

Uložte dokument znovu, tentokrát stačí použít klávesovou zkratku Ctrl + S a poté stránku obnovit v prohlížeči pomocí tlačítka F5

Pamatujte, že téměř každá značka se musí otevřít a zavřít. To znamená, že kód s lomítkem musí být někde umístěn. V tomto případě to vypadá takto: .

Vidíte, nadpis zčervenal. Stejným způsobem můžete dát požadovaný odstín libovolné části textu.

No, to je vše, příklad je připraven a měli byste být na sebe hrdí. Samozřejmě ještě není online, k tomu musí být webová stránka rozvržena, což zajišťuje hosting. Musíte také připojit svou doménu, aby ostatní lidé viděli váš výtvor.

Stránku zatím vidíte pouze vy. Ale musíte uznat, že jen člověka z doby železné může taková stránka překvapit. Ale to je první zkušenost, pojďme ji udělat ještě úspěšnější pochopením značek, které jsme použili. To vám pomůže naučit se vytvářet své projekty bez cizí pomoci.

značky

S vaším svolením přejdu na NotePad++. Oproti běžnému poznámkovému bloku má řadu výhod. Nyní budu opravdu potřebovat zvýrazňovací značky, abych vám ukázal prvky, o kterých budu mluvit. Obecně platí, že pokud se budete učit html, pak velmi doporučuji instalaci tohoto bezplatného programu.

Není to jediné a mohu vám jich nabídnout pár dalších, pokud by měl někdo zájem o alternativy. Přejdeme k teoretické části.

Hlavní

Stránka začíná a končí značkami . Ukazují prohlížeči, že se jedná o webový dokument vytvořený pomocí html.

Další přichází nebo titul. Obsahuje nejdůležitější informace o stránce, v našem případě - . Pokud jste ještě nenašli frázi "Moje první stránka", která je přítomna v kódu, věnujte pozornost samotné kartě nad vyhledávacím řádkem.

Totiž tagy jsou zodpovědní za začátek a konec hlavních informací o stránce.

Štítek

označuje, že fráze je nadpis. Ve výchozím nastavení je o něco větší než hlavní text a je tučný. Pokud jsme nyní psali nejen v html, ale také vytvářeli soubor CSS, se kterým by náš soubor měl něco společného, ​​mohli bychom ovládat velikost, písmo a dokonce i barvu všech nadpisů na stránce bez psaní styl fontu jak jsme to udělali v příkladu. Na to je ale ještě brzy.

Mimochodem, Title a H1 mají svůj vliv při přidělování místa vašemu webu ve výsledcích vyhledávání. Musíte s nimi zacházet s velkou pozorností a nepište dovnitř, pokud jen to. Jsou příbuzné s . Kromě h1 existují také h2, h3, h4.

Ve stejné linii je otevírání a zavírání

. Díky tomuto prvku můžete zarovnat text na střed. Pokud je tato značka odstraněna, text bude zarovnán vpravo.

- jeden z mála samostatných tagů. To znamená, že to funguje samo o sobě. Díky tomu přeskakujete prvky z jednoho řádku na druhý. Jinými slovy, udělejte krok zpět. Napsali to jednou, což znamená, že se posunuli dolů jednou, dvakrát, jako já, a ukázalo se, že odsazení je o něco větší.

Obrázek

Následuje značka img , tedy obrázek, obrázek. Hranatá závorka se otevře, vejdou se do ní všechny základní informace o obrázku, teprve poté se zavře. Je třeba poznamenat, že img je tag a všechny ostatní prvky kódu, které se do něj vejdou, jsou jeho atributy.

V první řadě jde alt , což je popis. To je také nutné pro optimalizaci. Někdy také přidáno titul . Když najedete myší na obrázek, zobrazí se vedle kurzoru nápověda, když je stránka již otevřená v prohlížeči.

Bylo možné nahrát obrázek do složky webu a nastavit k němu cestu, ale šel jsem jednodušší cestou. Mezi na Pixabay jsem našel obrázek, otevřel ho v novém okně a vložil odkaz.

Ve štítku src je napsána cesta k obrázku. Je to on, kdo říká prohlížeči, že se musíte posunout dále, abyste našli požadovaný obrázek, a jakým směrem se podívat - píšete sami.

Formátování textu

je zodpovědný za to, že části textu dá nějaký speciální styl, například jako v našem případě jinou barvu. style="color:red" znamená, že barva bude červená. Pokud chcete žlutou, napište žlutá, zelená - zelená. Můžete použít barevné kódy z Photoshopu.

pomáhá vytvořit tučný text.

---

nakreslí vodorovnou čáru. Je jednoduchý a používá se pouze v zavřeném stavu. Pokud napíšete

---

několikrát získáte přesně stejný počet vodorovných pruhů, když stránku otevřete v prohlížeči.

Odkazy

sděluje prohlížeči, že bude následovat odkaz. Chcete přesměrovat čtenáře na jinou adresu. Tato značka je dodávána s povinným atributem href="adresa" . Do uvozovek se vkládá cesta, kam má prohlížeč převést návštěvníka na stránku. Po napsání této značky se vloží popis, slovo nebo několik, po kliknutí na které se čtečka přesune dále. Po splnění těchto podmínek můžete vložit druhý, uzavírací tag .

Po napsání těla stránky značku zavřete tělo protože tělo je hotové. A uveďte, že dnes přestáváte používat html .

Pokud se chcete dozvědět více o html tagech a naučit se vkládat nejen obrázky, ale i videa, vytvářet tlačítka, různé formuláře, seznamy, odstavce, pak vám mohu nabídnout bezplatný kurz Evgeny Popova " základy html ". Pouze 33 lekcí vám pomůže dosáhnout nové úrovně.

Také vám chci doporučit videokurz, který řekne, jak se weby tvoří. Celý proces je ukázán na reálných příkladech, což je obzvlášť dobře. Kurz je určen jak pro začátečníky, kteří ještě neovládají ani HTML, tak pro ty, kteří již dobře umí jak HTML, tak CSS, ale neumí dobře rozvržení stránek. Více informací získáte kliknutím na odkaz: www.srs.myrusakov.ru/makeup

Navíc berte Bezplatná kniha o vytváření webových stránek ! Tato kniha je zaměřena na začátečníky a právě tam vznikají webové stránky OD a DO. To znamená, že se připraví design, pak se vymyslí stránky, napíše se softwarová část a pak se stránka umístí na internet. Autor vše pečlivě komentuje a kniha má spoustu screenshotů a ilustrací. Zvláštností knihy je navíc to, že nevzniká nějaká abstraktní stránka, ale zcela reálná a existující na internetu.

Dnes jste toho udělali hodně, protože první krok je nejtěžší.

Přihlaste se k odběru newsletteru a skupina VKontakte a zjistěte více: jak a proč potřebujete webový engine, jaké je rozložení bloků a modulární mřížka, jak psát weby a mnoho dalšího.

Uvidíme se znovu a hodně štěstí!

Dělat webové stránky špatně ach těžkéje to tak, jak to vypadá. Naučte se kódovat jednoduchou stránku pomocípomocí jazyka HTMLa značkování pro web.

Navrhnout a vytvořit jednoduchý web je velmi snadné. Dokonce i začátečníci se mohou naučit webdesign, aniž by vynaložili příliš mnoho úsilí a času.

HTML je hlavní značkovací jazyk pro webové stránky. Pojďme se naučit základy a zkusit vytvořit jednoduchou stránku.

Úvod do HTML

HTML je hypertextový značkovací jazyk.

Hypertext je text, který funguje jako odkaz.

HTML definuje strukturu webové stránky a zajišťuje její správné zobrazení v prohlížeči. HTML dokument může být velmi jednoduchý nebo složitý, v závislosti na úkolu, který právě provádíte.

Webové prohlížeče přijímají dokumenty HTML z webového serveru a zobrazují je jako webové stránky. Každý prohlížeč rozumí HTML a vykresluje obrázky, text, videa tak, jak je napsáno v kódu.

HTML je primární značkovací jazyk pro web. Používá se však k vytváření statických webových stránek, bez interaktivity a animace. HTML5, nejnovější verze HTML, je v tomto ohledu o něco lepší, zejména pokud jde o video nebo zvuk.

HTML je dnes HTML5, nejnovější verze, která přidává více funkcí než předchozí verze a nyní může definovat, jak se videa, obrázky a text zobrazují na obrazovce prohlížeče.

HTML5 je jedním z mocných nástrojů pro vývoj webových stránek. S HTML5 je streamování médií možné bez použití pluginů třetích stran, jako je Flash. HTML5 také podporuje ukládání dat na straně klienta. To lze použít k podpoře webových aplikací, když je klient offline.

Web a HTML

Web se skládá z propojených webových stránek a aplikací, stejně jako obrázků, videí, animací a interaktivního obsahu. Značkovací jazyky tvoří základ webu. Tyto jazyky se používají od dob, kdy byly webové stránky velmi jednoduché a budou i nadále součástí webu, jeho vývoje a budoucnosti.

HTML zůstává základní dovedností pro všechny webové vývojáře a designéry.

Podle průzkumu W3Techs je HTML jazykem, který používá 74,3 % všech webových stránek.

Jak vytvořit jednoduchou HTML stránku

Vývoj HTML je snadný, a proto se lze snadno naučit kódovat jednoduchou HTML stránku. Nejprve se ale musíte naučit základy jazyka.

Kódování HTML pomocí textového editoru

HTML dokument je v podstatě textový dokument. Existuje mnoho textových editorů, které můžete použít k psaní HTML. Dvě nejoblíbenější jsou Dreamweaver a Sublime Text. Bezplatné editory - Notepad++ pro Windows a Text Wrangler pro Mac. Ve skutečnosti je možné vytvořit webovou stránku v aplikaci Microsoft Word, ale nevyplatí se to, protože do HTML dokumentů přidává další a zbytečný kód.

Jako editor použijeme například Notepad++. Můžete si vybrat libovolný editor podle svého výběru.

Vytváření a úpravy HTML

Vytvoření nového dokumentu HTML je stejné jako u jakéhokoli jiného typu dokumentu. Vyberte "Soubor" - "Nový" pro otevření nového dokumentu v programu Poznámkový blok++. Proveďte změny v dokumentu a klikněte na Uložit.

Ukládání HTML

HTML dokument je soubor s příponou .htm nebo .html. Některé editory mohou také poskytovat možnost „Uložit jako HTML“. Je lepší pojmenovat soubor latinkou, malým písmenem a mezery nahradit pomlčkami nebo tečkami.

Pokud jste kód napsali v programu Poznámkový blok a uložili jej jako textový dokument, můžete jej přeložit do html stránky pomocí programu Total Commander. Vyberte příkaz "Přejmenovat" a změňte příponu souboru z .txt na .html.

Formát stránky HTML

HTML jako jazyk se skládá z prvků, značek a atributů, které definují obsah webu. HTML prvky nám umožňují přidávat na webovou stránku tabulky, obrázky, video, audio atd.

HTML prvky

Prvky definují strukturu a obsah webové stránky. Označeno lomenými závorkami kolem názvu prvku. Obsah, který není mezi „<>" se zobrazí na webu. Prvek vypadá asi takto:

značky

Prvek s lomenými závorkami kolem něj tvoří značku ( ). Značky se nezobrazují na obrazovce, ale pomáhají prohlížeči pochopit, co by měl zobrazovat. Počáteční značka označuje začátek prvku a koncová značka označuje jeho konec.

Například:

Úvodní štítek:

Závěrečný štítek:

Obsah mezi otevírací a uzavírací značkou je obsahem prvku.

Tagy lze použít dvěma způsoby:

Použití značek ve dvojicích

Párové tagy obsahují otevírací a uzavírací tag. Takto vypadají:

Zde je nějaký text

Je tam otevírací štítek ( ) a uzavírací značku () pro označení konce odstavce. To znamená, že vše mezi těmito dvěma značkami je odstavec.

Jednotlivé značky

Jednotlivé značky se používají k definování samouzavíracích prvků a vkládání prvků, jako jsou obrázky. Nemusíte definovat začátek a konec těchto prvků.

Tyto prvky jsou zapsány takto:

Závěr / (lomítko) je také volitelný. To je stejné jako nahrávání . Aby však nedošlo k záměně s úvodní značkou, je dobré na konec přidat / (lomítko).

Atributy

Atributy jsou prvky, které rozšiřují značky o další informace. Atribut je umístěn v úvodní značce a obsahuje název a hodnotu.

Značka atributu bude vypadat takto:

Výše uvedená značka 'HTML' má atribut 'lang' s hodnotou 'en-US'.

Struktura dokumentuHTML

Každý HTML dokument má základní strukturu definovanou následujícími prvky:

DOCTYPE neboDTD: Deklarace typu dokumentu určuje verzi používaného HTML. Tato značka je umístěna na začátku dokumentu.

HTML: Dvojice HTML tagů definuje začátek a konec HTML dokumentu.

KapitolaHLAVA< hlava>: tato část definuje obecné informace o stránce a je obvykle krátká. Obsah tohoto prvku se na stránce nezobrazuje. Název obsahuje značku TITLE, která definuje název dokumentu zobrazený v záhlaví prohlížeče. HEADER může také obsahovat metadata nebo odkazy na externí soubory.

KapitolaTĚLO: Tato sekce obsahuje hlavní část stránky. Jeho obsah se zobrazí v prohlížeči. Většina kódu stránky HTML je uvnitř prvku body.

kódování: tato značka určuje kódování použité v dokumentu HTML. Kódování určuje, jak se soubor uloží a jak se zobrazí speciální znaky. Obecně přijímaná hodnota pro tento tag je UTF-8, která umožňuje zobrazit téměř všechny znaky v jazyce.

jednoduchá stránkaHTML

Nyní, když rozumíme základním prvkům HTML, zkusme vytvořit základní HTML stránku. Začněme vytvořením prázdného textového dokumentu v textovém editoru.

Krok 1: První řádek kódu HTML, který se má přidat, určuje prvek DOCTYPE jako „html“. To znamená, že se používá nejnovější verze HTML.

Krok 3: Poté přidáme značku title se značkou Title a informacemi o znakové sadě.

Krok 4: Poté se zapíše značka BODY.

Krok 5: Nyní je prázdný dokument HTML připraven. Začněme přidávat text k zobrazení. Přidáme značku názvu

a tag

Definují nadpis první úrovně a odstavec pod ním.

Ahoj světe

Jednoduchá HTML stránka

Hlavní HTML stránka je připravena a můžeme ji uložit do složky dle vlastního výběru.

Zobrazení stránkyHTML

Chcete-li zobrazit stránku HTML, musíme ji otevřít v prohlížeči. Přejděte do složky, kde byl dokument HTML uložen, a dvakrát na něj klikněte.

Otevře se v prohlížeči a uvidíme velmi jednoduchou stránku. Můžete zkontrolovat, co ukazuje:

Název jako "Ahoj světe"

Nadpis první úrovně jako „Ahoj světe“

Odstavec s textem "Jednoduchá stránka HTML"

Nyní, když jsme vytvořili jednoduchou HTML stránku, podívejme se, jak můžeme přidat další funkce. HTML poskytuje mnohem více funkcí, než jaké jsme přidali na hlavní HTML stránku. Můžete přidat barvu pozadí, písma, barvy písem, obrázky, odkazy, seznamy a další a vytvořit tak krásnou stránku HTML. Pojďme se podívat na některé z těchto doplňkových funkcí.

Pokročilé formátování textu

HTML poskytuje speciální prvky pro speciální formátování textu.

Úrovně nadpisů lze nastavit pomocí značek

-

. K dispozici je celkem 6 úrovní nadpisů. A

- toto je velikostně největší z nich,

- nejmenší.

značky

se používají k označení začátku nového odstavce. Prohlížeč obvykle přidá jeden prázdný řádek mezi dva odstavce.

Prvky formátování se používají k zobrazení speciálních typů textu. Text lze formátovat pomocí následujících značek:

Tučně -

kurzíva -

podtrženo -

Písmo -

Kompletní seznam těchto značek je k dispozici zde.

Přidávání odkazů

Toto je text odkazu

Přidávání obrázků

Štítek je jeden tag, žádný uzavírací tag. Můžete zadat atributy obrázku.

Atribut src určuje umístění obrázku.

Atribut stylu má mnoho možností, včetně šířky a výšky obrázku v pixelech.

Atribut alt poskytuje krátký popis obrázku. Používá se, pokud se z nějakého důvodu nenačte obrázek.

Přidání názvu

Štítek

je novinkou v HTML5 a určuje nejvyšší prvek webové stránky. Nadpisy obvykle obsahují logo společnosti, kontaktní informace, navigační odkazy atd. V jednom dokumentu může být více prvků<>.

Pokročilé pojmy v HTML

HTML je technologie, která se snadno učí, takže mnoho návrhářů pracuje pouze se základními pojmy. Pokud chcete plně využít výhod HTML, budete se muset seznámit s pokročilými koncepty. To vám pomůže vytvořit atraktivní web s menší námahou.

Zmíníme několik konceptů, které vám pomohou dále. Můžete se i nadále učit více a používat pokročilé HTML a jeho funkce.

validace HTML kódu

Ověření HTML se používá ke kontrole chyb v kódu HTML. Pokud se vaše webová stránka nenačítá, můžete pomocí kontroly najít příčinu problému.

Validace také poskytuje doporučení pro kód, který neodpovídá nejnovějšímu standardu HTML. Neplatný kód HTML způsobí, že web nebude použitelný. To může způsobit problémy s načítáním nebo nekonzistentní výstup v různých prohlížečích. Mnoho ověřovacích služeb je zdarma, například validator.w3.org

Přidání dalších značek

Existuje mnohem více HTML značek a atributů, než jsme zde probírali. Dva dobré výukové zdroje jsou w3schools a HTML Dog, které mají více výukových programů a kompletní seznam značek.

Můžete také použít "Zobrazit zdrojovou stránku" v prohlížeči, abyste prozkoumali kód dobře navržených webových stránek a viděli nové techniky.

S webhostingovou službou můžete do své webové domény přidat více stránek HTML. K přenosu souborů HTML na webový server možná budete potřebovat software pro nahrávání FTP. Existuje mnoho webhostingových služeb, které poskytují funkci FTP.

DodatekCSS aJavaScript

CSS lze použít k rychlému vylepšení vzhledu a dojmu z vašeho webu. Pomocí CSS můžete přidat barvy, písma a změnit umístění prvků. Propojením šablony stylů CSS se stránkou HTML můžete změnit styl veškerého textu.

JavaScript je programovací jazyk a lze jej použít k přidání dalších funkcí na stránky HTML. Příkazy JavaScriptu se vkládají mezi značky. Lze je použít k přidání interaktivních tlačítek, provádění matematických výpočtů a dalších.

Otevře se před vámi úžasný svět vývoje webu. Odvažte se! Zdolání tohoto vrcholu je snadné, stačí jen začít.