TD1 Част 1; HTML - език за маркиране за структуриране на документи

Целта на този урок е да разбере как се пишат основните уеб страници, наричани още статични страници (Web 1.0). Такава уеб страница съдържа две части:

HTML: HTML файлът съдържа структурата на страницата и нейното съдържание; в допълнение към обикновен текст, той осмисля текста, като посочва какво попада в даден абзац, заглавие и т.н., като използва етикети (пример

CSS: CSS файлът е отговорен за оформлението на тези елементи (поставете този абзац в розово, използвайте шрифта „Sans Serif“ за това заглавие, ...)

Браузърът (Firefox, Chrome, Safari, IE/Edge, ...) е софтуерът, който ни позволява да преглеждаме уеб страници. Целта на този урок е да демистифицира начина, по който тези два типа файлове се интерпретират от браузъра. За това ще създадем сайт, чието изобразяване съответства на файла target.png, започвайки от файла index.txt, който съдържа почти „суровото“ съдържание на сайта, който трябва да бъде създаден.

Първо ще се посветим на уточняване на структурата (следователно HTML), която можем да добавим към нашето сурово съдържание. След това ще видим във втората част на урока как да постигнем изобразяването, предложено от target.png, като създадем CSS файл.

Преобразуване на текстов документ в HTML документ

Ролята на навигатора

Както беше казано по-рано, ролята на браузъра (Firefox, Chrome, Safari, IE/Edge, ...) е да преглежда уеб страници. Така че браузърът преобразува текстов файл, съдържащ HTML/CSS, в дисплей с оформление, с изображения ...

Страницата TD е уеб страница. Отворете източниците на тази страница, за да видите HTML кода, който се използва за показване на тази страница (щракнете с десния бутон след това върху изходния код или Ctrl + U).

За да създадете уеб страница, просто създайте текстов файл и му дайте разширението .html, така че браузърът да разбере, че трябва да го тълкува като HTML документ.

Запазете файла index.txt локално в папката HTMLCSS/TD1/.
Направете index.html копие на index.txt в същата папка.

Отворете и двете index.txt и index.html файлове в браузъра.
Какви разлики в дисплея виждате? Защо ?
Как се показват прекъсванията на редове в HTML документ ?
Как се показва HTML текст, заобиколен от и -> ?

Езиковият стандарт HTML

Нашият index.html документ се интерпретира като HTML документ от браузъра.

HTML, което означава HyperText Markup Language, следователно е език за маркиране, съдържащ така наречените хипертекстови връзки към други документи.

HTML е стандарт, т.е. напълно описан език (не се колебайте да разгледате набързо неговата спецификация, много техничен, но изчерпателен документ).

Нека тестваме съответствието на index.html със стандарта HTML5, като използваме валидатора https://html5.validator.nu/. Какви грешки са посочени ?

Нека започнем с грешката

Валидаторът ни казва, че е очаквал да види в началото на нашия документ. Този маркер се използва, за да декларира, че документът е написан в HTML5. Всъщност има няколко "HTML" стандарта: HTML4, XHTML, HTML5, ... Днес хората използват предимно HTML5 и ние ще направим същото.

За да бъде документът валиден и разпознат като HTML 5 документ, добавете етикетът в самото начало на файла.
Повторно тестване съответствието на вашия документ.

Казва ни валидаторът Кодирането на символа не е декларирано.

Кодирането показва как се записва файлът (UTF-8, ANSI, iso-8859-15, ...). Ако повечето знаци са записани по стандартен начин, специални знаци (ударения, œ, ...) могат да бъдат записани по много различен начин.

Поради това е необходимо да посочите кодирането на символите, за да се покажат правилно специалните символи на вашата страница. Винаги ще използваме UTF-8 кодиране (и в идеалния случай всеки трябва да използва и това).

Добавяне така че следващият ред, който декларира кодирането в заглавката на документа точно след DOCTYPE.

Отворете отново index.html в браузъра и проверете дали всички акценти са показани.

Забележка: Ако акцентите все още не работят, това е такане е достатъчно да кажем, че файлът ви е в UTF-8. Вашият файл също трябва да бъде добре записани в UTF-8. Например в Notepad ++ кодирането е отбелязано долу вдясно. Можете да конвертирате файла си в UTF-8, като търсите в менютата.

Повторно тестване съответствието на вашия документ.

Последната грешка ни казва за елемент на глава, на който липсва заглавие. Коригирайте вашата уеб страница, като вмъкнете заглавие след. Открили ли сте какво се променя на дисплея ?

В този момент валидаторът показва, че файлът index.html е валиден HTML5 документ.

Обичайна структура на HTML документ

HTML тагове

Видяхме в предишното упражнение първите ни тагове и. Етикетите се използват за структуриране на документа. Те анотират съдържания от тях текст и следователно придават значение. Има два вида тагове:

Повечето тагове обхващат съдържание: те започват с отварящ таг, след това съдържанието, което искаме да "анотираме", и завършва със затварящ таг .
Например маркерът се използва, за да се каже, че обхващаният от него текст ще бъде заглавието на документа.

Определени маркери не приемайте съдържание: те просто се състоят от отварящ маркер. Те се наричат още самозатварящи се маркери. Например видяхме маяка и ще видим скоро,
...

Други примери:

Основната структура

Така че нека използваме тагове, за да създадем добра основна структура на HTML документ:

След реда за декларация за език, документът се включва в етикета и се състои от две части:

заглавката съдържа информация за HTML документа, като например
- един (задължителен таг)
- един за дефиниране на кодирането
тялото съдържа реалното съдържание. Ще видим примери за маркери в раздела Общи етикети.

HTML документ е като дърво

HTML таговете придават дървовидна структура на документа. В нашия пример index.html

дървото е както следва:

е основният елемент
и са двамата синове на стихията
и са двама синове на стихията
„Неофициален сайт на Чък Норис“ е син на стихията .

Актуализирайте страницата си index.html, така че да спазва горната HTML структура.
(Трябва да добавите маркерите и)
Повторно тестване съответствието на вашия документ.

Инструменти за уеб разработка

В останалата част от урока ще използваме браузъра си, за да „инспектираме“ нашата уеб страница. За това препоръчваме Chrome или Firefox. Натиснете клавиша F12. Инструментите за разработка имат две отделни части, едната посветена на HTML, а другата ... на CSS. Тези инструменти са чудесни за научаване как да създадете уеб страница.

Има три начина да се съсредоточите върху определен елемент:

Щракване с десния бутон на мишката в показаната страница, последвано от "Проверка/Проверка на елемента", позволява да видите съответния HTML код в инструмента за разработка.
Кликването в инструмента за разработка ви позволява да проверите област от интерес на страницата (чрез задържане на мишката).
Когато задържите мишката върху елемент в инструмента за разработка, той го оцветява на страницата.

Запознайте се с тези три техники, като огледате страницата на TD.
Например щракнете с десния бутон върху елемента "има три начина ...", след което "проверете елемента". Инструментът за разработка трябва да ви представи HTML кода и да ви позиционира директно

Често срещани HTML тагове

Коментари в HTML

Възможно е да добавите коментари в HTML. Тези коментари не се интерпретират от браузъра и следователно не се показват (но те остават налични в изходния код). Следователно това е информация, оставена от разработчиците за разработчици. Те се поставят между етикетите и ->:

Във файла index.html има само коментари, като толкова много инструкции за замяната им с HTML. Ще ги обясним в следващите раздели.

Ценни книжа

Ще започнем с добавяне на структура към нашата страница. За целта ще използваме маркерите за съдържание

за идентифициране на различните раздели:

се използва за заглавия на документи

се използва за раздели на документи

се използва за подраздели на документи и така нататък.

Например заглавието по-горе се получава със следния код: