HTML structure
This is a modal window.
Das Video konnte nicht geladen werden, da entweder ein Server- oder Netzwerkfehler auftrat oder das Format nicht unterstützt wird.
Formale Metadaten
| Titel |
| |
| Alternativer Titel |
| |
| Serientitel | ||
| Anzahl der Teile | 10 | |
| Autor | ||
| Lizenz | CC-Namensnennung 3.0 Deutschland: Sie dürfen das Werk bzw. den Inhalt zu jedem legalen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen. | |
| Identifikatoren | 10.5446/62725 (DOI) | |
| Herausgeber | ||
| Erscheinungsjahr | ||
| Sprache |
Inhaltliche Metadaten
| Fachgebiet | |
| Genre |
1
2
3
4
5
6
7
8
9
10
00:00
TouchscreenElement <Gruppentheorie>Web-SeiteHilfesystemInformationBrowserDatensichtgerätAbgeschlossene MengeAttributierte GrammatikMeta-TagIdentifizierbarkeitRenderingCASE <Informatik>MaßerweiterungPoisson-KlammerOffene MengeInhalt <Mathematik>WinkelElektronische PublikationSkriptspracheSchreib-Lese-KopfBasis <Mathematik>DatenstrukturGeradeTypentheorieDeklarative ProgrammierspracheMereologieDateiformatVolumenvisualisierungCodeSelbst organisierendes SystemXMLComputeranimationJSONUML
03:45
Element <Gruppentheorie>Offene MengeInhalt <Mathematik>MomentenproblemElektronische PublikationDatenstrukturRechenschieberBrowserAttributierte GrammatikAbgeschlossene MengeCASE <Informatik>Computeranimation
05:38
Element <Gruppentheorie>WinkelPoisson-KlammerComputeranimation
05:49
Element <Gruppentheorie>CASE <Informatik>Attributierte GrammatikComputeranimation
06:00
DatenstrukturPoisson-KlammerAttributierte GrammatikElement <Gruppentheorie>Arithmetisches MittelComputeranimation
06:17
E-MailBridge <Kommunikationstechnik>Computeranimation
06:24
MultifunktionBrowserAbgeschlossene MengeComputeranimation
06:36
Poisson-KlammerWinkelAbgeschlossene MengeElement <Gruppentheorie>DifferenteOffene MengeComputeranimation
07:04
Computeranimation
07:13
XMLUMLJSON
Transkript: Ukrainisch(automatisch erzeugt)
00:11
Сьогоднішня тема – структура html файлів. Сьогодні ми розглянемо, що складається html сторінка, дізнаємося про структуру тегів, що таке атрибути та метатеги.
00:24
Вивчимо, як правильно організовувати html документ, щоб він був зручний для розуміння та підтримки. Зараз ви можете спостерігати на екрані html сторінку в текстовому форматі, що містить елементи, інформацію, яку в подальшому веб-браузер
00:44
буде використовувати для відображення та рендеру веб-сторінки. В більшості випадків html сторінки мають розширення крапка html. Тож давайте розглянемо більш детальніше поточний код.
01:02
В першому рядку ми бачимо декларацію типу. Даний тех повідомляє браузеру, що файл має відповідне розширення, а саме dock-type html. І в подальшому це допомагає браузеру правильно розуміти, як відображати відповідний файл.
01:22
Далі, першим елементом ми бачимо html, що повідомлює нашому браузеру і нам, що це початок нашої html сторінки. В середині html файлу ми маємо також два теги.
01:41
Це header, який містить інформацію про сторінку, наприклад, такі як title, стилі, скрипти та тому подібним. Далі ми розглянемо детальніше цей тех. І після тегу head ми бачимо тех-body.
02:00
Tech-body – це є основою нашої html сторінки. Саме все, що міститься в цьому тегу, буде відображено в нашій html сторінці. Будь-яка html сторінка складається з html елемента, який зараз зображено на екрані.
02:23
Html елемент складається з відкриваючого тега та закриваючого тега. Також більшість тегів складається з двох частин, тобто відкриваючий та закриваючий. І відповідно між ними поміщується контент,
02:44
який буде відображено в html сторінці після рендеру браузером. Також в кутові дужки відкриваючого та закриваючого тега потрібно помістити element-id. element-id – це ідентифікатор елементу, який ми хочемо відобразити.
03:02
В нашому випадку це a. Тобто саме за допомогою цього елемента id браузер розуміє, що потрібно і в якому форматі відрендерити на сторінці. Також відкриваючи тег може містити атрибути.
03:21
Атрибут складається з двох частин. Це атрибут k і атрибут value. Це додаткові в кожного елементу може бути свої унікальні атрибути, які в більшості відрізняються у різних елементів.
03:46
Також зараз ви можете бачити відкриваючі та закриваючі теги. Це слайд, який зображує, що складаються теги і чим вони відрізняються для HTML-елементу.
04:01
Тобто є відкриваючий тег, він складається з відкриваючих скобок, елемент-id і закриваючого тегу. Також можуть бути атрибути, але на даний момент зараз це неважливо. І закриваючий тег – та ж сама структура, тільки слайд, який пояснює браузеру, що це саме закриваючий тег.
04:23
З попередніх слайдів ми можемо зробити висновки, що будь-який HTML-файл складається з HTML-елементів. Я вже пропоную детальніше розібратися, що ж таке HTML-елемент, поговорити про його структуру. Будь-який HTML-елемент складається із тегів.
04:42
У більшості випадків HTML-елементи складаються з подвійних тегів, є одинарні, але зараз це неважливо, далі це обговоримо. Отже, HTML-елемент складається із стартового тегу,
05:00
атрибутів, контенту та кінцевого тегу. Також HTML-тех описує початок і кінець саме HTML-елементу. Тому пропоную детальніше обговорити саме на прикладі якогось елементу,
05:23
що таке теги, що таке атрибути, що таке контент. Пропоную на прикладі елементу H1 показати, що таке взагалі HTML-елемент і його вміст. Будь-який HTML-елемент починається із стартового тегу.
05:42
Стартовий тег складається із двох кутових дужок. І між ними поміщується елемент ID. В нашому випадку це H1. Далі в стартовому елементі, в стартовому тезі може бути якийсь атрибут.
06:01
Ось, наприклад, Style в нашому випадку. Далі ми обговоримо, що цей атрибут Style означає. Загалом це неважливо. Тут зголовне зрозуміти структуру. Ось стартовий тег, ELEMENT ID, закриваючі кутові дужки і атрибут.
06:21
Далі йде вміст. Тобто ми ось зараз пишемо, наприклад, header, текст. Це те, що буде відображено у відповідному HTML-теґі, коли буде рендерити це все браузер. І далі йде закриваючий тег. Різниця між відкриваючим та закриваючим тегом полягає в слыши.
06:42
Закриваючий тег повинен містити slash. Ось ідея нам підказала, але загалом це виглядає ось так. Тобто ми ставимо slash, потім ми пишемо ELEMENT ID, який відповідає нашому старту. Тобто ми закрили його. І так само це все поміщується у кутові дужки.