Материалы для студентов HTML

HTML — это основа веб-страницы. В этом модуле мы рассмотрим, как создать надёжную и осмысленную структуру веб-страницы.

Ключевые выводы

  • Студенты понимают структуру HTML-файла.
  • Студенты знают, как использовать общие теги для создания веб-страницы.

Что такое HTML?

HTML — это сокращение от языка гипертекстовой разметки (HyperText Markup Language). Это код, который мы используем для:

  • создавать документы, которые хранятся во всемирной паутине и отображаются в браузере.
  • обеспечить базовую структуру для нашей веб-страницы — ее костяк.
  • обеспечить правильную загрузку текста и изображений для отображения в нашем браузере.

Когда мы используем HTML?

Каждая веб-страница, которую вы видите во всемирной паутине, написана с использованием HTML-кода. Кнопки, изображения, формы, текстовые разделы — всё это элементы, созданные с помощью HTML.

Если представить нашу веб-страницу как человеческое тело, то HTML — это его костная структура. Мы можем добавить к телу кожу и одежду с помощью CSS, но только после того, как у нас будет готов скелет.

HTML в действии

В основе HTML лежат элементы. Элементы создаются с помощью тегов.

Большинство элементов имеют открывающий и закрывающий теги:

<!-- opening tag -->
<p>

<!-- closing tag -->
</p>

Контент (текст или даже другие элементы HTML), который вы хотите видеть на веб-странице, можно разместить между этими тегами, как будто вкладывают друг в друга слои сэндвича.

<p>The content that you write here will be seen on the web page</p>

<section>
  <p>This text is inside a paragraph within a section.</p>
</section>

Некоторый HTML-контент создается с помощью самозакрывающихся тегов, которым не нужен дополнительный закрывающий тег:

<img />
<link />

Достаточно только одного этого тега, поскольку задача этого элемента — удерживать место в документе. В отличие от большинства других элементов HTML, внутрь этих самозакрывающихся элементов невозможно вкладывать другие элементы или информацию.

Части элемента HTML

Пример HTML

Этот код будет отображаться в браузере и выглядеть так, как показано на рисунке ниже.

Этот Кодекс... 

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>HTML Example</title>
</head>
<body>
  <h1>My Day In The Garden</h1>
  <section>
    <h2>Flora</h2>
    <p>I spent the morning drawing some of the daffodils that
    are inbloom.</p>
    <p>I picked a few tulips to put in a vase in the dining
    room.</p>
  </section>
  <section>
    <h2>Fauna</h2>
    <p>Today I spotted that hummingbird again, buzzing around
    the newly blooming tree.</p>
    <img
    src="https://media.gettyimages.com/photos/magentathroated-woodstar-feeding-from-flowers-picture-id853369596"
    alt="hummingbird"/>
  </section>
</body>

... делает эту веб-страницу

HTML-ссылка

Обрамление

Контекст и цель

HTML расшифровывается как язык гипертекстовой разметки (Hyper Text Markup Language). Это способ структурной разметки текста. Он позволяет компьютерам и программистам легко определить назначение фрагмента текста.

Представьте себе HTML как скелет веб-страницы: он обеспечивает структуру и содержание, а JavaScript и CSS — интерактивность и стиль.

Цели обучения

Студенты смогут

  • создайте HTML-файл и откройте его в редакторе и браузере
  • создать HTML-файл с правильной структурой
  • перечислите и используйте некоторые общие теги для добавления структуры и контента на свой веб-сайт

Начиная

Каркас и назначение секции

  • HTML пишется внутри файлов с расширением .html .
  • Вы можете дать своим HTML-файлам любое имя, однако index.html — наиболее распространенное имя, используемое для целевой страницы, если только у разработчика нет причин настроить сервер по-другому. 
# creating an html file on the command line
touch index.html
# opening your html file in your browser
open index.html

Мини-задания

  1. Создайте 3 дополнительных HTML-файла с любыми именами по вашему желанию.
  2. Откройте один из файлов в текстовом редакторе и браузере.

Структура HTML-страницы

Каркас и назначение секции

HTML-документ всегда должен начинаться с одной и той же структуры:

  • Тег DOCTYPE — особый и не закрывается. Он также единственный тег, который может содержать небуквенно-цифровые (буквы/цифры) значения.
  • <head> содержит информацию о вашем веб-сайте, но не сам контент, который будет отображаться на странице.
  • <body> содержит все содержимое вашей страницы, которое будет отображаться на экране.
  • Теги , которые вы будете использовать для создания структуры вашей страницы, должны располагаться между тегами <body> .
  • Между открывающим и закрывающим тегами мы вставляем текст или «контент» элемента . Конечный результат будет выглядеть так: <example-tag>Content Goes in here</example-tag> . Теги также можно размещать внутри других тегов.
  • Обратите внимание, что при размещении тега внутри другого тега необходимо сделать отступ для нового тега , чтобы показать, что он является дочерним по отношению к родительскому тегу.

Словарный запас

  • элементы — элементы (например, изображения, абзацы и заголовки), созданные с помощью HTML-кода.
  • теги — фрагменты кода, которые указывают, где начинаются и заканчиваются определенные элементы.
  • дочерние - элементы, содержащиеся ВНУТРИ других элементов.
  • родительские - элементы, СОДЕРЖАЩИЕ другие элементы.

Примеры HTML

Примечание: следующий пример — всего лишь справочный документ. Вам не обязательно понимать все сразу, но полезно увидеть, как может выглядеть правильно отформатированный HTML-код.

<!-- Standard tag setup of an HTML document  -->
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my
    interests.</p>
  </section>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>
<!-- Nested elements  -->
<section>
  <p>I am the text that will show up on your website.</p>
</section>
<!-- The <section> is the parent element -->
<!-- The <p> is the child element -->

Мини-задания

  1. Откройте один из созданных вами файлов и добавьте базовую структуру тегов HTML.
  2. Настройте HTML-код для отображения вашего генеалогического древа (или генеалогического древа другого человека). Используйте тег section для указания семейной группы. Используйте тег p для указания члена семьи. Семьи — сложная структура, но вот пример: 
<section>Jetson Family
  <div>George and Jane
    <p>Judy</p>
    <p>Elroy</p>
  </div>
  <p>Rosie the robot</p>
  <p>Astro the dog</p>
</section>

<!-- In this example, Judy and Elroy are the children of Jane and George. -->

Общие теги

Каркас и назначение секции

Как правило, мы не создаём собственные типы элементов. Вместо этого существует набор предопределённых элементов с уже связанной с ними функциональностью.

Обратитесь к HTML-справочнику для получения подробной информации о примерах блоков кода. 

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <br>
  <img
  src="https://media.gettyimages.com/photos/portrait-of-kitten-against-colored-background-picture-id903869076"
  alt="kitten with blue background">
  <hr>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my interests.</p>
    <h3>My favorite websites</h3>
      <ul>
        <li><a href="www.google.com">Google</a></li>
      </ul>
    <h3>My favorite books</h3>
      <section>
        <h4>Non-Fiction</h4>
        <ol>
          <li>Eloquent Javascript</li>
        </ol>
      </section>
      <section>
        <h4>Fiction</h4>
        <ol>
          <li>Hitchhiker's Guide to the Galaxy</li>
        </ol>
      </section>
  </section>
  <hr>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>

Мини-задания

  1. Пересмотрите весь вышеуказанный контент с учетом ВАШИХ интересов.
  2. В одном из других пустых HTML-файлов, созданных вами в начале урока, представьте, что вы готовите новостную статью с заголовком, заголовками и подзаголовками (не можете придумать содержание? Напишите об одном дне, когда вы путешествовали. Вспомните мини-путешествия, которые вы совершили, места, которые вы посетили, еду, которую вы ели).
  3. Используйте соответствующие теги и добавьте контент, чтобы ваша новостная статья появилась на вашем сайте.
  4. Убедитесь, что ваш контент отображается в вашем браузере!
  5. STRETCH: Создайте форму, которую можно заполнить, чтобы отправить вам комментарий к вашей статье. Хотя она пока не работает (мы не подключили её к Javascript), создание этой формы в HTML может стать первым шагом к созданию рабочей формы.

Контекст

HTML — это язык контента во Всемирной паутине.

Вы будете использовать командную строку для навигации и открытия HTML-файлов. Ваши HTML-файлы будут дополнены стилями CSS и поведением, написанными с помощью JavaScript- скриптов , состоящих из различных функций . HTML-файлы также будут шаблонами, используемыми Google App Engine и заполняемыми из базы данных .

HTML в действии

Начало работы с HTML

HTML пишется внутри файлов с расширением .html .

Просмотр вашей страницы

Чтобы просмотреть HTML-файл на Mac: в командной строке перейдите в папку с вашей HTML-страницей и введите open filename, заменив «filename» на имя вашего HTML-файла.

Общий синтаксис 

<tag>
  Content
</tag>

Элементы вложены

HTML-элементы можно размещать внутри других элементов: 

 <parent>
    <child>
      This content is inside of the child tag, which is inside of
      the parent tag. Keep an eye on indentation to see which is
      the parent and which is the child!
    </child>
  </parent>

Структура HTML-страницы

Базовая структура каждой веб-страницы одинакова. Она выглядит так: 

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>
  • <head> содержит информацию о вашем веб-сайте, но не сам контент, который будет отображаться на странице (можно подумать, что это «мозг» вашей веб-страницы).
  • <body> содержит все содержимое вашей страницы, которое будет отображаться на экране.

Общие элементы

Используйте эти общие элементы внутри тегов <body> и </body> для добавления контента на страницу.

Абзац

Чтобы создать абзац, используйте открывающий и закрывающий теги p : 

<p>
  This is a paragraph about how great polar bears are. Aren't they just the best?
</p>

Комментарий

Используйте комментарии, чтобы сделать код более удобным для чтения, не влияя на конечный HTML-код. 

<!-- This is a comment. It lives in the code as a note to yourself or
  to other developers, but is hidden when the HTML is rendered in the
  browser. -->

Заголовки 

<!-- Different levels of headings. Use these for structuring
your page. <h1> is most important heading while <h6> is the
least important heading. -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

Универсальный <div> 

<div> The DIV tag exists to make "dividers" to keep your page
organized. Group other similar or related elements inside these.</div>

Списки

Списки элементов списка <li> заключаются либо в тег неупорядоченного списка <ul> , либо в тег упорядоченного списка <ol> . 

<!-- An unordered list - this will default to a bulleted list. -->
<ul>
  <li>first list item</li>
  <li>second list item</li>
</ul>
<!-- An ordered list - this will default to a numbered list. -->
<ol>
  <li>first list item</li>
  <li>second list item</li>
</ol>

Изображение

Тег <img> требует указания адреса изображения с помощью атрибута src , а необязательный атрибут alt используется для обеспечения доступности, включая программы чтения с экрана. 

<!-- Image hosted elsewhere on the web -->
<img
 src="https://some.hostingsite.com/portrait-of-kitten-in-blue"
 alt="kitten with blue background">

<!-- Image hosted on your own site -->
<img src="img/kitten-blue-background.jpg" alt="Kitten in a donut">

Для гиперссылки тег <a> требует указания адреса назначения гиперссылки с помощью атрибута href . 

<!-- External link  -->
<a href="https://www.google.com"></a>

<!-- Local link -->
<a href="footer.html"></a>

Горизонтальное правило 

<!-- This self-closing tag creates a line across your web page. -->
<hr>

Перерыв 

<!-- This self-closing tag creates a line break between elements. -->
<br>

Форма

Форма <form> используется для сбора информации от пользователя. Для работы формы <form> она должна отправлять собранные данные куда-то для обработки или использования. Поэтому для формы <form> часто требуются дополнительные атрибуты:

  • action — место назначения данных формы при ее отправке
  • method - указывает, следует ли обрабатывать данные с использованием запроса типа GET или POST . 
<!-- a form that will send data to process.php via POST request -->
<form action="/process.php" method="post">

</form>

Вход

<input> — элемент, используемый <form> для сбора информации.

Элемент <input> обычно также имеет атрибут name , который используется базами данных для идентификации поля, к которому относятся отправленные данные. 

<form>
    <!-- a text box with the helper text "Full Name" -->
    <input type="text" name="fullName" placeholder="Full Name">
</form>

Элемент <input> очень универсален: указав атрибут type , его можно отобразить как текстовое поле, календарный выбор даты, переключатель, раскрывающийся список и т. д. Более полный список можно найти в документации .

Советы и рекомендации

  • Узнайте, какие HTML-теги доступны, проверив код веб-страниц, чтобы увидеть, какие теги другие разработчики использовали для добавления чего-либо на веб-страницу.
  • Если вы не нашли то, что хотели бы добавить, обратитесь к документации разработчика. Вот несколько списков всех возможных HTML-элементов : https://www.w3schools.com/Tags/ , https://developer.mozilla.org/en-US/docs/Web/HTML/Element , http://html-css-js.com/html/tags/
  • При написании HTML для элементов, которым требуются открывающий и закрывающий теги, лучше сначала открыть и закрыть тег, а затем добавлять контент между ними. Так вы избежите появления ненужных тегов.
  • Чтобы лучше видеть вложенность HTML-элементов в коде, делайте отступы для элементов, находящихся внутри других элементов. Это поможет вам быстро определить структуру HTML-контента.
  • Оставляйте много комментариев! Они помогут вам находить ошибки в собственном коде и помогут другим, когда вы попросите их его проверить.
  • Такие веб-ресурсы, как html5boilerplate.com, помогут вам быстро приступить к написанию HTML.

Краткое изложение лучших практик

  • Информация о веб-странице указывается в разделе <head> HTML-документа: заголовок, метаданные, ссылки на стили и т. д.
  • Информация на веб-странице размещается в <body> HTML-документа.
  • Существует множество элементов, которые разработчики могут использовать для создания содержимого HTML-документа, включая: <p> , <h1> - <h6> , <div> , <li> , <img> , <a> , <hr> , <br> , <!-- --> и другие.
  • Для некоторых элементов требуется открывающий и закрывающий теги: <p></p> .
  • Другие элементы являются самозакрывающимися, поэтому им требуется только открывающий тег: <img> .
  • Теги могут включать атрибуты ( src , alt , id и т. д.), которые предоставляют дополнительную информацию о том, как должен вести себя элемент: <img src="filename.png" alt="description"> .
  • Комментарии, <!-- --> , содержат заметки для разработчиков, которые полезны для понимания того, что делают разделы веб-страницы.
  • Используйте встроенные в браузер инструменты разработчика для проверки HTML-кода веб-страниц и изучения того, как была построена страница.

Вопрос 1

Какой из следующих элементов является дочерним? (в этом упражнении игнорируйте элементы body/html) 

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>
  1. h1
  2. п
  3. а
  4. h1 и p

Вопрос 2

В HTML-документе __ помещается в элемент <head> , а __ — в элемент <body> .

  1. структура, метаданные
  2. метаданные, структура
  3. заголовки, меньшее содержание
  4. заголовок сайта, основное содержание сайта

Вопрос 3

Какая из перечисленных причин не является веской причиной для создания отступов для вложенных элементов?

  1. Отступы облегчают просмотр элементов, содержащихся в других элементах.
  2. Отступы облегчают чтение структуры веб-страницы.
  3. Отступы облегчают ботам/поисковым системам чтение структуры веб-страницы.
  4. Отступы облегчают идентификацию родственных элементов.

Вопрос 4

Что из перечисленного является атрибутом элемента HTML? 

<div class="sidebar">Sidebar goes here!</div>
  1. div
  2. class
  3. боковая панель
  4. Боковая панель будет здесь!

Вопрос 5

Сколько атрибутов имеет следующий HTML-элемент? 

<input type="text" placeholder="username" name="username" />
  1. 0
  2. 1
  3. 2
  4. 3

Вопрос 6

В следующем фрагменте HTML, демонстрирующем взаимосвязь, какой элемент является родительским? 

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>
  1. <p>
  2. <b>
  3. <i>

Вопрос 7

Сколько элементов в следующем фрагменте HTML являются дочерними по отношению к родительскому элементу?

(Не учитывайте элементы-обертки <body> или <html> ) 

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>
  1. 1
  2. 2
  3. 3
  4. 4

Вопрос 8

Хотя некоторые браузеры корректно отображают следующий фрагмент HTML, в чем проблема? 

<img src=puppies.png width=400 />
  1. У него нет закрывающего тега.
  2. Значения атрибутов должны быть заключены в кавычки.
  3. Предоставление атрибута width также требует атрибута height
  4. Отсутствует обязательный атрибут.

Вопрос 1

Какой из следующих элементов является дочерним? (в этом упражнении игнорируйте элементы body/html) 

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>

Элемент a является дочерним элементом, поскольку он содержится внутри другого элемента.

Вопрос 2

В HTML-документе __ помещается в элемент <head> , а __ — в элемент <body> .

Метаданные размещаются в элементе <head> , а структура — в элементе <body> . Элемент <head> не будет отображаться на самой веб-странице.

Вопрос 3

Какая из перечисленных причин не является веской причиной для создания отступов для вложенных элементов?

Отступы не облегчают ботам/поисковым системам чтение структуры веб-страницы — когда бот читает веб-сайт, он может прочитать HTML-код, даже если он весь находится на одной строке.

Вопрос 4

Что из перечисленного является атрибутом элемента HTML? 

<div class="sidebar">Sidebar goes here!</div>

class — это атрибут. Атрибуты находятся внутри элемента HTML и обычно имеют (но не обязаны иметь) значение.

Вопрос 5

Сколько атрибутов имеет следующий HTML-элемент? 

<input type="text" placeholder="username" name="username" />

Элемент input указанный выше, имеет 3 атрибута: type , placeholder и name .

Вопрос 6

В следующем фрагменте HTML, демонстрирующем взаимосвязь, какой элемент является родительским? 

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>

<p> является родительским элементом, поскольку он содержит другие элементы.

Вопрос 7

Сколько элементов в следующем фрагменте HTML являются дочерними по отношению к родительскому элементу?

(Не учитывайте элементы-обертки <body> или <html> ) 

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>

В фрагменте есть 4 дочерних элемента — по сути, это любой элемент, над которым есть родительский элемент, то есть все, кроме элемента <div> — <h1> , <p> , <i> , <a> .

Вопрос 8

Хотя некоторые браузеры корректно отображают следующий фрагмент HTML, в чем проблема? 

<img src=puppies.png width=400 />

Значения атрибутов должны быть заключены в кавычки. <img /> — самозакрывающийся тег, и у него нет обязательных атрибутов. Допустимо указывать width без height , и наоборот.