…

,

,

,
, ,

Chyba

Chyba

Privilno

Podle normy

Nesprávné použití seznamů

Značky OL a UL lze použít k zobrazení položek seznamu různými způsoby. Získáte také spoustu dalších výhod. Značky seznamu jsou velmi užitečné při formátování informací, aby se zobrazovaly správně. Doporučuji, abyste při vytváření seznamů přestali používat uvozovky. Vyhledávače jsou stejně dobré v používání seznamů a pomáhají strukturovat informace na stránce. Místo hacků používejte standardní značky.

Použití stylů v kódu

Pravděpodobně jste již slyšeli, že používání stylů v kódu je špatné. Přemýšleli jste někdy, proč tomu tak je? Důvodem je, že CSS a sémantické HTML jsou navrženy speciálně tak, aby oddělily obsah od jeho návrhu. Tento model poskytuje mnohem větší flexibilitu a pohodlí při práci s dokumenty.

Chyba

Váš úžasný text

Ignorování značek titulků

Značky nadpisů jsou navrženy tak, aby oddělovaly nadpisy do samostatné sekce na stránce. Norma doporučuje používat značky z

před

. Design a uspořádání textu v nich může být libovolné, ale ať je dokument správně strukturován!

Chyba Váš úžasný titul

Text vašeho článku.

Privilno

Váš úžasný titul

Text vašeho článku.

Nesprávné použití značky FORM

Všichni často děláme chyby při vytváření formulářů a tabulek v HTML. Pamatujte, že tabulka musí být vytvořena již ve formuláři!

Chyba

...

Privilno
...

Bez použití atributu ALT

Při práci s obrázky musíte použít atribut ALT. To je nezbytné, protože uživatelé budou moci určit, co by mělo být na místě obrázku, i když používají velmi pomalé připojení. Tato hodnota by měla popisovat podstatu použitého obrázku. Nikdy nepoužívejte alt="obrázek". Pokud obrázek plní čistě dekorativní funkci, použijte alt="*".

Chyba Privilno

Nesprávné značky pro tučné písmo nebo kurzívu

Ačkoli A odvádějí svou práci ve většině případů dobře, použití stylů k dekoraci textu umožňuje mnohem větší flexibilitu designu. Pokud by značka měla pouze podtrhnout význam určité části textu, pak použijte značky A .

Zbytečné použití zalomení řádků

Štítek
lze použít jednou na řádek pro začátek další věty na dalším řádku. Mnoho lidí používá tuto značku k vytvoření mezery mezi prvky. Toto použití neodpovídá standardu.

Chyba První odstavec.


Pokračování textu. Privilno

První odstavec.

Pokračování textu.

Tagy: HTML, chyby

Formátování textu v HTML - metody a příklady - 4,0 z 5 na základě 1 hlasu

Jak změnit, aby se rozdělil na odstavce a , jsme zvažovali v předchozích lekcích.

V této lekci se podíváme na to, jak lze formátovat text v HTML a jaké pro to existují značky.

Nejprve se podívejme, jak můžete změnit vzhled textu pomocí značky a pár zavírání. Štítek existuje několik atributů. Atribut face="" lze použít k nastavení písma textu. Chcete-li to provést, musíte mezi uvozovkami v atributu face="" zadat název písma.

Například: Tvůj text

V tomto příkladu bylo nastaveno písmo Arial a veškerý text umístěný mezi tagy bude zobrazen v tomto písmu. Můžete zadat ne jeden, ale několik písem oddělených čárkami, v tomto případě bude vybráno první vhodné písmo ze seznamu. To znamená, že pokud například uživatel, který navštíví vaši stránku, nemá v systému první písmo, bude vybráno písmo druhé.

Píše se to takto: Tvůj text

Musíte být opatrní s výběrem písma. Není třeba specifikovat různá exotická písma. Protože prostě nemusí být v počítači vašeho návštěvníka. Nejlepší je používat standardní fonty jako Arial, Times Roman, Vernada, Tahoma.

Další atribut značky je size="". Pomocí tohoto atributu můžete nastavit velikost písma. Chcete-li to provést, musíte mezi uvozovky zadat číslo od 1 do 7.

Například: Tvůj text

Kromě toho existuje další skupina HTML tagů používaných pro formátování textu, s jejichž pomocí lze text tučně, kurzívou, podtržením nebo přeškrtnutím.

Pomocí značky můžete text nastavit tučně a pár zavírání. Text umístěný mezi těmito značkami bude tučný. Kromě toho lze pomocí značky vytvořit tučný text a pár zavírání. Pro zvýraznění klíčových slov na stránce je lepší použít druhý tag.

Například: Náhled

Pomocí značky můžete změnit text kurzívou text umístěný mezi těmito dvěma tagy bude zkosený doprava.

Například: Text kurzívou

Podtržený text lze vytvořit pomocí značky a pár uzavíracích značek. Mezi těmito značkami bude pod textem čára.

Například: Podtržený text

Přeškrtnutý text lze vytvořit pomocí značky a pár uzavíracích značek text uzavřený mezi těmito značkami bude vystředěn a bude přes něj čára.

Například: Přeškrtnutý text

Další HTML tag používaný k formátování textu je a pár to zavírá. Text uzavřený mezi těmito značkami bude větší než ten hlavní.

Například: Velký text

Štítek a pár to zavírá přesný opak značky diskutované výše. Text uzavřený mezi těmito značkami bude menší než hlavní text.

Například: malý text

A nakonec musíme vzít v úvahu další dva tagy, to jsou tagy , které definují horní index, tj. text umístěný mezi těmito značkami bude mít menší velikost a bude zobrazen nahoře vzhledem k hlavnímu písmu.

Například: ^{Horní index}

A štítky určit dolní index. Test uzavřený mezi těmito značkami bude umístěn pod hlavním textem.

Například: _{dolní index}

Zde ve skutečnosti pomocí těchto značek můžete určit jeden nebo druhý styl písma a formátovat text v html.

Materiál připravil portál:

FEDERÁLNÍ AGENTURA PRO VZDĚLÁVÁNÍ Belgorodská státní technologická univerzita. V. G. Shukhova

S.P. Gavrilovskaya, R.A. Myasoedov, A.I. Rybáková

INTERNETOVÉ TECHNOLOGIE

Pokyny pro realizaci výpočetní a grafické úlohy

pro studenty ekonomických směrů

Belgorod

Laboratorní práce č. 1 Struktura HTML dokumentu.
Formátování dokumentu HTML ................................................................ ..........................
Laboratoř č. 2 Seznamy jsou jednoduché a vnořené.
Vytváření HTML tabulek ................................................ ......................................................
Laboratorní práce č. 3 Vytváření hypertextových odkazů.
Práce s grafikou v dokumentech HTML................................................ ...................
Laboratoř č. 4 Technologie CSS.
Design webových stránek ................................................ ...................................
Laboratoř č. 5 Interaktivní vytváření
HTML dokumenty ................................................................ ........................................................

LAB Č. 1 STRUKTURA DOKUMENTU HTML.

FORMÁTOVÁNÍ DOKUMENTU HTML

Účel práce: vytvoření a testování HTML souboru. Koncept kontejnerů, párových a nepárových značek a prvků.

HyperText Markup Language (HTML) je standardní jazyk

navržený pro vytváření hypertextových dokumentů ve WEB prostředí. HTML dokumenty lze prohlížet různými typy WEB prohlížečů. Když je dokument vytvořen pomocí HTML, webový prohlížeč může interpretovat HTML tak, aby extrahoval různé prvky dokumentu a zpracoval je jako první. Použití HTML umožňuje formátování dokumentů pro prezentaci pomocí písem, čar a dalších grafických prvků na jakémkoli systému, který je zobrazuje.

HTML dokumenty lze vytvářet pomocí libovolného textového editoru nebo specializovaných HTML editorů a konvertorů. HTML dokumenty jsou umístěny na webových stránkách.

Web je speciální složka, která obsahuje soubory obsahující textové informace k tématu ve formátu HTML a také informace ve formě obrázků, grafů, fotografií, animovaných obrázků a zvukových efektů. Existují dva typy webových stránek:

Vytvořeno na webovém serveru poskytovatele internetových služeb. Vytvořeno na intranetu jako týmové weby.

Sekvence vytváření projektu

Proces tvorby projektu se skládá z několika fází.

V první fázi, než začnete vytvářet projekt, byste měli rozhodnout o jeho funkčním účelu a tematickém zaměření informačního materiálu.

Ve druhé fázi je obecné téma obvykle rozloženo do tematických podsekcí a samostatných článků s definicí vazeb mezi nimi. Výsledkem tohoto rozkladu je vytvoření struktury projektu.

Struktura HTML dokumentu

Dokumenty HTML mohou mít různé struktury, které obsahují různé prvky, ale všechny musí obsahovat dva povinné prvky:

Hlavní částí stránky je hlava .

Tělo dokumentu je tělo .

Sekce záhlaví se používá k popisu obecných vlastností stránky, jako je název (název) stránky, který se zobrazí v řádku názvu okna prohlížeče, metaindikace a popisy stylů. meta - indikace slouží k nastavení parametrů, které jsou nezbytné pro vyhledávače.

V HTML existuje pouze jeden pojem – jedná se o TAG (z anglického tag). Značka je kombinace znaků mezi asymetrickými znaky "<" и ">".

Existují dva hlavní typy značek:

Spárovat značky – vyžaduje uzavírací značku. Otvírací a zavírací tag tvoří kontejner, který obsahuje informace.

Příklady:< b >…, < p >…

Nespárované tagy nemají uzavírací tag.

Příklady:< img />, < hr/ >, < br/ >.

Parametry tagu se nastavují pouze pro otevírání spárovaných a nepárových tagů. Jsou umístěny uvnitř těla štítku a jsou obklopeny mezerami. Každá značka má svou vlastní sadu parametrů. Pořadí, ve kterém je v tagu uvedeno více parametrů, může být libovolné. Přítomnost uvozovek při nastavování hodnoty parametru je povinná.

Komentáře jsou určeny k vysvětlení účelu fragmentů kódu HTML a mají následující formát:a může zahrnovat více řádků.

Značky lze vnořovat do sebe. V tomto případě je důležité dodržet pořadí otevírání a zavírání:<тэг1><тэг2><тэг3>text

Struktura dokumentu HTML vypadá takto:

Název dokumentu

Tělo dokumentu

Štítek je označení, že daný soubor obsahuje HTML dokument. Všechny webové dokumenty začínají jím a po nalezení

značky ohraničte sekci nadpisů dokumentu. Tato část nezahrnuje samotný dokument. Zahrnuje pouze značky (a ty speciálně navržené pro tuto sekci), které se vztahují k dokumentu jako celku. Stejná sekce obsahuje název dokumentu, který se nastavuje pomocí tagu , zobrazený v záhlaví programu prohlížeče. Tagy umístěné uvnitř sekce head (kromě názvu dokumentu, který je popsán pomocí tagu

AHOJ! Toto je moje osobní domovská stránka! Jmenuji se
(Zadejte své příjmení, jméno a patronymie).

---

Moje město

žiji v Belgorod

Moje skupina

Studuji v ……

Moje koníčky

Moje koníčky hudba, sport.

Moji přátelé

Moji přátelé všude kolem mě Pomoc.

5. Otevřete soubor v okně prohlížeče a pokud existují chyby, odstraňte je

6. Dokončete úkol.

Vytvořte dokument HTML a umístěte do něj text, přičemž zachováte jeho formátování. Nadpisy zvýrazněte červeně, vycentrujte je a oddělte vodorovnou čarou. Slova vytištěná kurzívou jsou zvýrazněna modře. Uložte zadaný soubor s příponou *.html. Podívejte se na dokument v okně prohlížeče, a pokud tam jsou chyby, opravte je.

Kontrolní otázky

1. Jaké typy znáte HTML tagy?

2. Uveďte nejběžněji používané značky v názvu webové stránky.

3. Jak změnit styl zarovnání v úvodní značce odstavce?

4. Jaký tag lze použít k nastavení nadpisů všech šesti úrovní?

5. Co lze vytvořit pomocí značky title?

6. Jaké značky by měly být použity, aby byl text přeškrtnut tučným písmem?

7. Vysvětlete následující fragment kódu Veselé HTML

8. Co se stane, když tag nebude zavřeno?

LAB Č. 2 JEDNODUCHÉ A VNOŘENÉ SEZNAMY. VYTVÁŘENÍ TABULEK HTML

Účel práce: vytvořit a otestovat soubor HTML. Vytváření seznamů. Vkládání tabulek a jejich struktura. Rozložení stránky s tabulkami.

Stručné teoretické informace

V dokumentu HTML existují tři hlavní typy seznamů: číslovaný seznam definic s odrážkami

Můžeme vytvořit vnořené seznamy pomocí různých značek seznamu nebo jejich opakováním v jiném. Chcete-li to provést, stačí umístit jeden pár štítků (začátek a konec)

uvnitř jiného. Zda budou mít vnořené položky seznamu stejné odrážky, které představují položku seznamu, závisí na prohlížeči. Další podrobnosti naleznete v části „Vnořené seznamy“.

Číslované seznamy

Do očíslovaného seznamu prohlížeč automaticky vloží čísla prvků v pořadí. To znamená, že pokud odeberete jednu nebo více položek z číslovaného seznamu, zbytek čísel se automaticky přepočítá.

Číslovaný seznam začíná počáteční značkou

a končí značkou
1. . Například:

2. Programování
3. Algoritmizace
4. Design

1. Programování

2. Algoritmizace

3. Design

Štítek

může mít možnosti:

kde: typ – Typ počítadla:

A - velká latinská písmena (A,B,C...) a - malá latinská písmena (a,b,c...) I - velké římské číslice (I,II,III...) i - malé římské číslice (i,ii,iii...) 1 - běžné číslice (1,2,3...)

start="n" – Číslo, od kterého se má začít počítat Například:

15. Programování
16. Algoritmizace
17. Design

XV. Programování

XVI. Algoritmizace

XVII. Design

Označené seznamy.

U seznamů s odrážkami prohlížeč obvykle používá k označení položky seznamu odrážky. Vzhled značky je obvykle konfigurován uživatelem prohlížeče.

Seznam s odrážkami začíná počáteční značkou

a končí značkou
. Každý prvek seznamu začíná značkou
1. . Například:

2. Programování
3. Algoritmizace
4. Design

Programování

Algoritmizace

Design

Štítek

může mít parametr:

Typ značky

definuje vzhled značky jako výchozí (disk), kulatý (kruh) nebo čtverec (čtverec). Například:

• Programování
• Algoritmizace
• Design

 Programování

 Algoritmizace

 Design

Seznamy definic.

< dl>…- tag pair - zobrazuje seznamy definic.

Design:

Období

Definice pojmu

S visačkou

pomocí atributu compact můžete nastavit položky seznamu na kompaktnější rozložení.

Design:

Období

Definice pojmu

Tabulky v HTML jsou organizovány jako sada sloupců a řádků. Buňky tabulky mohou obsahovat libovolné prvky HTML, jako jsou nadpisy, seznamy, odstavce, tvary, grafika a prvky formuláře.

Hlavní tabulka značek Tabulka:

...

Toto jsou hlavní značky, které popisují tabulku. Všechny prvky tabulky musí být uvnitř těchto dvou značek. Ve výchozím nastavení nemá tabulka žádné ohraničení ani oddělovače. Hranice je přidána s atributem border.

Řádek tabulky: ...

Počet řádků tabulky je určen počtem párů tagů, které se vyskytují. ... Řádky mohou mít atributy align a valign, které popisují vizuální pozici obsahu řádků v tabulce.

Buňka tabulky: ...

Popisuje standardní buňku tabulky. Buňku tabulky lze popsat pouze v rámci řádku tabulky. Každá buňka musí být očíslována číslem sloupce, pro který je popsána. Pokud v řádku chybí jedna nebo více buněk pro některé sloupce, prohlížeč zobrazí prázdnou buňku. Výchozí umístění dat v buňce je určeno atributy align="left" a valign="middle". Toto umístění lze opravit jak na úrovni popisu řádku, tak na úrovni popisu buňky.

Libovolnou buňku tabulky lze definovat netagy

… a značky …- Záhlaví tabulky (záhlaví tabulky). čt

představuje normální buňku, ale text uvnitř těchto značek bude tučný a zarovnaný na střed.

Podpis: ...

Tato značka popisuje název tabulky (caption). Štítek musí být přítomen uvnitř

..., ale mimo popis jakéhokoli řádku nebo buňky. Výchozí má atribut align="top", ale lze jej explicitně nastavit na align="bottom". zarovnat

určuje, kde bude titulek umístěn nad nebo pod tabulkou. Titulek je vždy vycentrován v rámci šířky tabulky.

Základní atributy ohraničení tabulky

Tento atribut se používá ve značce tabulky. Pokud je tento atribut přítomen, ohraničení tabulky se vykreslí pro všechny buňky a pro tabulku jako celek. border může mít číselnou hodnotu, která určuje šířku ohraničení, například border="3".