С чего начинается HTML
Это задание архивной части. Перейдите по ссылке, чтобы пройти задание в актуальной части.
Каждый HTML-документ должен начинаться с декларации типа документа или «доктайпа». Тип документа нужен, чтобы браузер мог определить версию HTML и правильно отобразить страницу.
Например, для старой версии HTML 4.01 доктайп выглядит так:
А для последней версии HTML уже намного проще:
Последнюю версию HTML ещё называют HTML 5 . Но так как эта версия уже принята как стандарт и распространена почти везде, мы будем называть её просто HTML.
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
HTML: Базовая структура
Любой HTML-документ можно разбить на несколько основных составляющих:
- Блок head , содержащий метаинформацию о нашем сайте. Данные из этого блока не отображаются непосредственно на странице, а служат для её описания, подключения стилей и скриптов.
- Блок body является основным местом, где строится HTML-разметка. Данные в этом блоке будут обработаны и выведены в браузер.
Простейшая разметка в HTML5 выглядит следующим образом:
Базовая разметка HTML Code Basics
Бесплатные уроки по программированию и HTML для новичков
Обратите внимание на первую строку . DOCTYPE (document type) — служебная информация для браузера, где описывается стандарт HTML, который нужно обработать. Текущий стандарт HTML5 поддерживается всеми браузерами, поэтому достаточно указать в первой строке документа , который говорит, что наш документ размечен по стандарту HTML5.
Далее открывается парный тег с атрибутом lang=»ru» . Указание языка также необходимо для браузеров, особенно если сайт рассчитан на массовую аудиторию, в том числе и за рубежом.
Во избежание ошибок, обе вышеописанные конструкции, при их отсутствии, будут добавлены браузером автоматически. В некоторых ситуациях браузеры могут добавить не те строки, которые вы бы хотели, и вместо обработки страницы по стандарту HTML5 браузер будет обрабатывать всё как HTML4, что приведёт ко множеству проблем, так как старые стандарты могут не знать о существовании многих тегов, таких как , и так далее
Задание
Скопируйте базовую разметку HTML из примера выше. Внутри тега вставьте любую разметку. Попробуйте различные теги из тех, которые были пройдены в предыдущих курсах.
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
13. Исходный код веб-страницы
Перед обсуждением темы, приведем традиционную структуру веб-страницы.
Типичная страница на HTML
Заголовок первого уровня
Абзац.
Исходный код страницы традиционно содержит определенные теги. Они организуют структуру веб-страницы. О них мы уже ранее говорили, поэтому повторим. Страница начинается с тега , который объявляет тип документа. Далее можно увидеть контейнер за пределами которого может быть только . Внутри тега указываются заголовок страницы, мета-теги, подключаемые стили и скрипты, то есть то, что для пользователя является «невидимым» (кроме заголовка, отображаемого во вкладке браузера). Далее можно увидеть тег , в котором размещаются все элементы сайта, видимые пользователем.
Поначалу может показаться что нет необходимости соблюдать структуру, ведь вы же разработчик, а следовательно, в праве решать что и как вам делать. Но когда сайт будет запущен, поисковые системы не дадут вам так вольно относится к структуре сайта. Неправильно сверстанные страницы будут ниже ранжироваться в поисковой выдаче, а это приведет к меньшему количеству посещений сайта из поисковых систем и меньшей популярности сайта в целом. Ранжирование – это сортировка сайтов в поисковой выдаче.
Разбираем HTML документ
Урок №3
Разбираем HTML код
Давайте разберём, что означает каждая часть нашего кода HTML-документа, введённого в Блокнот на прошлом уроке:
Название страницы Заголовок статьи
Абзац статьи.
Но для начала узнаем, что такое HTML-тег или просто «тег»?
Тег — основа языка HTML
Основной частью языка HTML является — тег. HTML документ (как и весь html-код) и состоит и тегов. Тег содержит в себе имя и угловые скобки, которые расположены по бокам — :
— это один из множества, различных HTML-тегов, означает абзац.
Теги бывают открывающими и закрывающими. У закрывающих тегов перед именем стоит косая черта (слэш) /
— открывающий тег.
— закрывающий тег.
Между открывающим и закрывающим тегами, обычно располагается текст или другие теги.
У тегов разные имена и каждое имя означает какой либо элемент HTML-страницы: заголовок статьи , абзац (параграф) статьи , фотографию , ссылку , кнопку и т.п.
Рассмотрим другие теги используемые в нашем HTML коде.
Теги — начало и конец HTML-документа
Возвращаемся к нашему HTML документу:
Название страницы Заголовок статьи
Абзац статьи.
Каждый HTML-документ начинается с открывающегося тега и заканчивается закрывающимся тегом
Теги и — голова и тело HTML-документа
Между тегами располагаются два блока.
1. Первый блок начинается и заканчивается тегами — их называют головой HTML-документа.
2. Второй блок начинается и заканчивается тегами — их называют телом HTML-документа.
Название страницы Заголовок статьи
Абзац статьи.
1. — голова HTML-документа .
2. — тело HTML-документа , между этими тегами располагается основная информация страницы: заголовки , абзацы , фотографии , ссылки , кнопки и т.д.
Теги — название HTML-страницы
Название страницы Заголовок статьи
Абзац статьи.
В голове между тегами , располагаются теги
. Между тегами помещают текст, который выступает в качестве названия страницы .
В нашем примере, между тегами , находится текст:
Название страницы
Текст помещённый между тегами появляется в двух местах, в виде названия окна браузера и в виде названия вкладки браузера:
Название страницы, которую вы сейчас читаете, содержит следующий текст:
Разбираем код HTML-документа. Выясняем что такое тег.
Теги и — заголовок и абзац статьи
Название страницы Заголовок статьи
Абзац статьи.
В теле нашего HTML-документа, между тегами , располагаются два вида тегов:
— теги заголовока статьи,
— теги абзаца статьи.
— между этими тегами располагается текст, который является заголовком статьи.
Например, текст заголовока статьи, которую вы сейчас читаете содержит следующее:
Разбираем HTML код
— между этими тегами располагается текст, который является абзацем статьи.
Например, второй абзац статьи, которую вы сейчас читаете, содержит следующее:
Но для начала узнаем, что такое HTML-тег или просто «тег»?
Обобщаем материал по структуре HTML-документа:
Каждый HTML-документ начинается и заканчивается тегами Каждый HTML-документ состоит из двух блоков, головы и тела:
1. — голова HTML-документа,
2. — тело HTML-документа.
В голове HTML-документа между тегами , располагаются теги и некоторая служебная информация о странице (мета-теги) , которую мы изучим чуть позже.
В теле HTML-документа между тегами , располагается основной контент: тексты, изображения, формы, которые обрамлены тегами заголовков h1 , абзацев p , изображений img , ссылок a , кнопок input и т.д.