Для занятия вёрсткой потребуется две вещи:
редактор кода (пример ), понимание шаблона HTML-кода. Мы вкратце разберём второй пункт. Валидный HTML-код имеет определённый шаблон. Посмотрите его по ссылке на codepan. io .
обзор-шаблона-html-кода-обложка.png 582.43 KB
<! DOCTYPE html> Первая строчка HTML-документа. В прошлых версиях языка она была куда длиннее. Туда включали ссылку на правила, которые отделяли валидный код от невалидного. В HTML5 от этого отказались. <! DOCTYPE html> - просто строка, необходимая для нормальной работы кода.
<html> Он же корневой элемент. Внутри него два элемента - <head> и <body>. W3C валидатор рекомендует приписывать элементу <html> атрибут lang= «». Так Вы определите язык веб-страницы.
<head> В нём хранятся метаданные. Пользователь не видит его содержимое. Но оно влияет на отображение контента и не только. Подробнее об этом читайте в статье о содержимом элемента <head> .
<body> Тело HTML-документа. Здесь хранятся элементы, которые:
отображаются на веб-странице; делят её на разделы .
Скриншот к заданию
Задание В Visual Studio Code на Windows (по поводу macOS не знаю), Вы можете вызвать шаблон кода за пару секунд. Для этого:
создайте HTML-документ; впишите в область кода «!»; нажмите Enter. Пример результата на скриншоте выше.
{"document": [{"text": [{"type": "string", "attributes": {}, "string": "Для занятия вёрсткой потребуется две вещи: "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "редактор кода ("}, {"type": "string", "attributes": {"href": "https://vk.com/away.php?to=https%3A%2F%2Fcode.visualstudio.com%2F&cc_key="}, "string": "пример"}, {"type": "string", "attributes": {}, "string": "),"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "понимание шаблона HTML-кода."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Мы вкратце разберём второй пункт. Валидный HTML-код имеет определённый шаблон. Посмотрите его по ссылке на "}, {"type": "string", "attributes": {"href": "https://vk.com/away.php?to=https%3A%2F%2Fcodepen.io%2FArthur-Arutunyan%2Fpen%2FGRPKJLB&cc_key="}, "string": "codepan. io"}, {"type": "string", "attributes": {}, "string": "."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "обзор-шаблона-html-кода-обложка.png", "filesize": 596406, "height": 720, "pic_id": 688959, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2023/09/03/%D0%BE%D0%B1%D0%B7%D0%BE%D1%80-%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%B0-html-%D0%BA%D0%BE%D0%B4%D0%B0-%D0%BE%D0%B1%D0%BB%D0%BE%D0%B6%D0%BA%D0%B0.jpeg", "width": 1280}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<! DOCTYPE html> "}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Первая строчка HTML-документа. В прошлых версиях языка она была куда длиннее. Туда включали ссылку на правила, которые отделяли валидный код от невалидного. В HTML5 от этого отказались. <! DOCTYPE html> - просто строка, необходимая для нормальной работы кода. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<html> "}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Он же корневой элемент. Внутри него два элемента - <head> и <body>. W3C валидатор рекомендует приписывать элементу <html> атрибут lang= «». Так Вы определите язык веб-страницы. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<head> "}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "В нём хранятся метаданные. Пользователь не видит его содержимое. Но оно влияет на отображение контента и не только. Подробнее об этом читайте в статье "}, {"type": "string", "attributes": {"href": "https://pabliko.ru/@top/ego_ne_vidno_a_on_est_element_head_i_ego_soderzhimoe-208700/"}, "string": "о содержимом элемента <head>"}, {"type": "string", "attributes": {}, "string": "."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<body> "}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Тело HTML-документа. Здесь хранятся элементы, которые: "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "отображаются на веб-странице;"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "делят её на "}, {"type": "string", "attributes": {"href": "https://pabliko.ru/@top/dlja_chego_nam_nuzhen_html-206418/"}, "string": "разделы"}, {"type": "string", "attributes": {}, "string": "."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "attachment", "attributes": {"caption": "Скриншот к заданию", "presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "структура-html-кода.jpg", "filesize": 45013, "height": 395, "pic_id": 688960, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2023/09/03/%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0-html-%D0%BA%D0%BE%D0%B4%D0%B0.jpeg", "width": 1163}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Задание"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "В Visual Studio Code на Windows (по поводу macOS не знаю), Вы можете вызвать шаблон кода за пару секунд. Для этого: "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "создайте HTML-документ; "}], "attributes": ["numberList", "number"]}, {"text": [{"type": "string", "attributes": {}, "string": "впишите в область кода «!»; "}], "attributes": ["numberList", "number"]}, {"text": [{"type": "string", "attributes": {}, "string": "нажмите Enter. "}], "attributes": ["numberList", "number"]}, {"text": [{"type": "string", "attributes": {}, "string": "Пример результата на скриншоте выше."}], "attributes": []}], "selectedRange": [0, 0]}
Комментарии 1