Введение в HTML

5 (100%) 4 vote[s]

Немного истории. Тим Бернерс-Ли написал предложение в 1989 году о системе под названием World Wide Web. Затем он создал первый веб-браузер, сервер и веб-страницу. Он написал первые спецификации для URL, HTTP и HTML.

В октябре 1994 года Тим Бернерс-Ли основал Консорциум World Wide Web (W3C) в Массачусетском технологическом институте, Лаборатория компьютерных наук [MIT / LCS], в сотрудничестве с CERN , откуда возникла сеть (см. Информацию на оригинальном сервере CERN). ), при поддержке DARPA и Европейской комиссии .

В апреле 1995 года Inria стала первым европейским хостом W3C, за которым в 1996 году последовал Японский университет Кейо (кампус Shonan Fujisawa) в Азии. В 2003 году ERCIM взял на себя роль европейского хоста W3C из Inria. В 2013 году W3C объявил Университет Бэйхан четвертым принимающим лицом.

HTML: начало

HTML (Hyper Text Markup Language) – это, скорее, не язык программирования, а язык разметки страницы. Текущая версия – HTML5.

Что нужно для того, чтобы начать писать веб-страницу? Во-первых, браузер. Google Chrome – наиболее распространенный на домашних ПК, поэтому будем работать с ним.

Также понадобится простенький редактор кода, можно использовать либо Sublime, либо Notepad++.

Для более быстрого освоения можно воспользоваться одним из онлайн-редакторов, ссылки на которые есть в конце статьи (Code Pen, Live Weave). С их помощью можно ощутить все преимущества живого кодирования и сразу видеть на экране результат своих трудов. С ними мы будем работать в дальнейшем, так как они поддерживают всю тройку языков программирования: html, css, javascript. В отличие от программирования на других языках, устанавливать оффлайн-IDE не обязательно.

Основные термины  HTML

1.Тег. Имеет такой вид: <html>. Состоит из имени тега и угловых скобок.

2. Элемент. Состоит из двух тегов – открывающего <html> и закрывающего </html> и текста между ними: <html>Text</html>. Большинство элементов имеют такую структуру. Но есть элементы, не имеющие закрывающего тега. Например, <br> (брейк). Обозначает разрыв строки и перенос в следующую.

Например, строка

<р>Lorem ipsum dolor <br>sit amet, consectetur adipiscing<br> elit, sed do eiusmod tempor<br> incididunt ut labore et<br> dolore magna aliqua.</р>

будет выведена на экран в таком виде:

 Lorem ipsum dolor
 sit amet, consectetur adipiscing
 elit, sed do eiusmod tempor
 incididunt ut labore et
 dolore magna aliqua. 

3. Атрибут. Имеет такой вид: <div id=”main”class = «регулярные абзацы»>Text</div> . Используется для того, чтобы записать и хранить дополнительную информацию. Атрибутом (уникальным идентификатором) является id=”main”, который является частью класса «регулярные абзацы». Иерархия идентификаторов: id, class, тег.

4. Комментарий. Используется для пояснения тех или иных блоков кода для облегчения понимания другим человеком (который, может быть, будет работать с вашим кодом). Браузер его игнорирует. Синтаксис:

<! - Это комментарий ->  

Базовая структура HTML-документа:

<!DOCTYPE html>
     <html>

         <head>
             <meta charset="UTF-8"/>
             <title>title</title>
         </head>

         <body>
             <p>My first paragraph.</p>
         </body>

   </html> 

Как видно, в тексте имеются отступы. Чем более вложенным является элемент, тем больше отступы. На самом деле, отступы не являются обязательными, но их использование делает код читабельным.

Он содержит один элемент html. Оказывается, это включает в себя все содержимое вашего HTML-файла. html содержит два компонента: голову и тело. 

Эта структура — то, что называется «деревом». Любой данный элемент (за исключением самого внешнего элемента «html») целиком содержится внутри другого элемента, называемого «родительским» элементом. Не удивительно, что элементы, которые содержит данный элемент, являются его «дочерними» элементами. И, да, детей от общего родителя часто называют «братьями и сестрами».

Таким образом, в приведенном выше примере верхний элемент — это элемент html, который содержит всего два элемента — заголовок и тело. Элемент head содержит элемент title (содержит информацию для браузера), а body (основной видимый контент страницы) содержит элемент h1 и элемент p. В более сложных примерах тело, конечно, будет содержать гораздо больше детей, но для нашей цели пока что этого достаточно.

Правило 1:  хорошие заголовки страниц особенно важны для навигации. Они помогают людям узнавать, на какой странице они находятся, быстро ориентироваться между страницами, открытыми в их браузере. Первое, что видит пользователь на экране, когда переходит на другую веб-страницу, это заголовок страницы. В разметке веб-страницы это слова <title> внутри <head>.

<img src = " https://№№№№№ " width = "72" height = "48" alt = "Ссылка на рецепты" > 

Важно. Текстовые альтернативы («альтернативный текст») являются основным способом сделать визуальную информацию более доступной, так она будет воспроизводиться с помощью любой сенсорной модальности (например, визуальной, слуховой или тактильной), чтобы соответствовать потребностям пользователя. Например, человек, который не может видеть изображение, может получить альтернативный текст, прочитанный вслух с использованием синтезированной речи. Например:

содержит краткое описание цели ссылки.

Правило 2: Как автор или разработчик контента, вы должны всегда выбирать кодировку UTF-8 ( <meta charset=”UTF-8” />) для своего контента или данных. Текст на компьютере или в Интернете состоит из символов. Символы представляют буквы алфавита, знаки пунктуации или другие символы.

Unicode — это универсальный набор символов, т.е. стандарт, определяющий в одном месте все символы, необходимые для написания языков, используемых на компьютерах. Это расширенный набор всех других наборов символов, которые были закодированы.

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

1.	<head>
2.	<meta charset="utf-8"/>
3.	...
4.	</head>

Бывает, что на некоторых компьютерах вместо кириллических символов выскакивают черные ромбики. Тогда используют кодировку <meta http-equiv=»Content-Type» content=»text/html; charset=cp1251″ />. Это стандартная 8-битная кодировка для русских версий Microsoft Windows до 10-й версии. Хотя, нужно стараться избегать устаревших кодировок (ISO-8859-6, ASCII).

Дополнительно можно объявлять основной язык (<html lang = «ru» >). Ставится выше тега <head>.

1.	<!doctype html>
2.	<html lang="ru">
3.	<head>

Теперь наш простой код уже можно вставить в онлайн-редакторе, а затем уже запустить из созданного файла в браузере. Для этого вставляем его в редактор кода (Notepad++)и сохраняем в формате .html. Дважды кликаем по нему, и в окне браузера увидим My first paragraph.

Если у вас большой проект, то главный файл сохраняется под названием index.html. Это общее правило.

See the Pen
My first paragraph
by Alla (@AllaJan)
on CodePen.

Коротко о форматировании текста

Теги

  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6> — заголовки, <p>-обычный параграф (абзац).
  • bold <b>Текст</b> — текст жирным. Альтернатива – тег <strong>  </strong>.
  • ltalic <i> и <em>. Задает курсив.

Несмотря на сходный результат, не совсем эквивалентны и заменяемы. Первый тег <b> — относится к тегам физической разметки и устанавливает жирный текст, а тег <strong> — является тегом логической разметки и определяет важность помеченного текста.

  • <small> делает текст между тегами меньше в отношении родительского текста.
  • <sup>  и <sub> делают текст надстрочным или подстрочным соответственно.
  • <pre> используется для вывода текста в первоначальном формате (например, нужно вывести на странице фрагмент кода со всеми отступами и другим форматированием).
  • <blockquote> тег для отображения цитат.
  • <mark> подсвечивает текст желтым цветом.
  • Таблицы <table>, <tr> и <td>.
  • <span> выделяет строчный элемент и задает ему свой стиль.
  • Кавычки <q>.
  • Списки:

Маркированный

<ul>
  <li>Первый пункт</li>
  <li>Второй пункт</li>
  <li>Третий пункт</li>
</ul>

Нумерованный

<ol>
  <li>Первый пункт</li>
  <li>Второй пункт</li>
  <li>Третий пункт</li>
</ol>

Список определений

<dl>
  <dt>Термин 1</dt>
    <dd>Определение 1</dd>
  <dt>Термин 2</dt>
    <dd>Определение 2</dd>
</dl>

Атрибуты

Все элементы HTML имеют атрибуты.

Синтаксис

Атрибуты используются в тегах для дальнейшего определения тега:

  • он используется внутри открывающего тега и должен быть добавлен после пробела: например, начинать вывод списка с №3 — <ol start=»3″>;
  • start=»3″. Имя атрибута, знак равенства, открывающая кавычка, значение атрибута, закрывающая кавычка;
  • атрибуты представляют собой пару имя-значение: start=»3″; имя: начальное значение: любое положительное целое число;
  • единственное исключение из пары имя-значение, если атрибут является «логическим атрибутом». Эти атрибуты имеют только два типа значений — true или false. Но вместо того, чтобы писать «true» или «false» для его значения, вы добавляете имя атрибута, чтобы указать true, и опускаете его, чтобы указать false. Примером является атрибут «перевернутый» в упорядоченном списке <ol> .Добавление этого атрибута указывает на то, что порядок списка должен быть обратным (в порядке убывания). <ol reversed></ol>
  • Тег может иметь несколько атрибутов:
<ol start="3"></ol>
<ol id="cinema" class="attribute-list"       start="3"></ol>
<ol start="3"       class="attribute-list"></ol>

Глобальные атрибуты

Глобальные атрибуты могут быть применены ко всем тегам . Это общие атрибуты. Примерами глобальных атрибутов являются id и class . Есть более глобальные атрибуты. Вот список всех глобальных атрибутов  и значений, которые они принимают. 

Таким образом, такие атрибуты, как id и class, могут быть применены к любому тегу HTML.

<p id = "para1" class = "Стихи" lang = "ru-Ru"> Глобальный атрибут lang принимает коды языков для значений. Код для русского языка ' ru '. </ p> 

<html lang = «ru»> </ html> — атрибут языка сообщает браузеру, что содержимое этого документа будет на русском языке.

<ul id = "intro-list"> </ ul>
<pre class = "html-code"> </ pre>

Глобальные атрибуты: примеры

Глобальный атрибут: ‘id’

Чтобы понять атрибуты, мы рассмотрели пример использования идентификатора и класса. Рассмотрим это подробнее и обсудим еще один заголовок глобального атрибута .

Идентификатор атрибут присваивает элементу уникальный идентификатор. В HTML-документе это значение идентификатора может использоваться только в отношении одного элемента.  

Правила именования для атрибута id :

  • Должен быть хотя бы для одного элемента.
  • Не должен содержать пробелов.
  • Значения чувствительны к регистру. Это означает, что «вопросы» и «Вопрос» не являются одинаковыми. Это не означает, что вы можете использовать два разных идентификатора, которые отличаются только регистром, то есть «myid» и «MyId». Они разные, легальные, но крайне запутанные!
<p id = "question-about-html" > Сколько раз можно использовать конкретное значение 'id' в документе HTML? </ р>
<p id = "html-answer" > Однажды </ p>

id  в основном используется для:

  1. Стилизация вашего элемента. Вы можете указать стиль, который хотите задать элементу в таблице стилей, ссылаясь на «id». Используя CSS, вы можете указать код, который будет задавать разные стили для « question-about-html»  (например: черный текст, выровненный по центру) и « html-answer»  (например: зеленый текст).
  2. Указание цели ссылки. Вы можете сделать ссылку на раздел вашей HTML-страницы, используя ‘id’ раздела. Вы должны ссылаться на значение ‘id’ с предшествующим ему числовым знаком — ‘# id-value’.
  3. В JavaScript ‘id’ может использоваться для манипулирования html-элементом. Используя ‘id’ элемента, вы можете написать код JavaScript, чтобы он выполнял действие, то есть изменял текст в тегах абзаца. 

Глобальный атрибут: «class»

Класс атрибута, при этом похож на идентификатор группы набора элементов в том же классе. Это пара имя-значение: class = «classname» . В отличие от идентификатора, который уникален для элемента, одно и то же имя класса может быть назначено более чем одному элементу. Например:

<p class = "question" > Как тебя зовут? </ р>
<p class = "question" > Вам нравится HTML5? </ р>

Оба абзаца выше сгруппированы по классу с именем ‘question’. Элемент может иметь одно или несколько имен классов. Если мы также хотим, чтобы второй вопрос находился в классе html, потому что это вопрос, связанный с html, вы можете добавить два имени класса, разделив их пробелом:

<p class = "question html" > Вам нравится HTML5? </ р>

Класс в основном используется для:

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

В JavaScript класс также можно использовать для манипулирования html-элементами того же класса. 

Глобальный атрибут: «lang»

lang атрибут указывает язык текста в элементе , к которому он прикреплен. Определение языка контента становится все более важным, так как браузеры адаптируют стили и другие аспекты взаимодействия с пользователем в соответствии с языком контента. 

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

Другие глобальные атрибуты

accesskey

Позволяет указать одну или несколько клавиш, которые будут выбирать элемент на странице.

<input type="text" name="name" accesskey="n" />

contenteditable

Позволяет пользователю менять содержимое страниц.

<!DOCTYPE HTML>
<html>
<head>
  <title>Example</title>
</head>
<body>
  <p contenteditable="true">It is raining right now</p>
</body>
</html>

contextmenu

Позволяет определить контекстное меню для элементов, которое появляется при запуске их пользователем (например, когда при клике правой кнопкой мыши).

dir

Определяет направление текста элемента при помощи двух значений, который может принимать: ltr (слева направо) и rtl (справа налево).

<!DOCTYPE HTML>
<html>
<head>
  <title>Example</title>
</head>
<body>
  <p dir="rtl">This is right-to-left</p>
  <p dir="ltr">This is left-to-right</p>
</body>
</html>

draggable

Поддержка для «drag and drop». Указывает элемент, который может быть «перетянут».

dropzone

Дополнение к атрибуту draggable.

hidden

Булевый атрибуто. Указывает на неактуальный в данный момент элемент. При этом браузеры его не отображают.

spellcheck

Указывает браузеру,  должен ли он проверять орфографию. Применяется к тем элементам, которые пользователи могут редактировать.

<!DOCTYPE HTML>
<html>
<head>
  <title>Example</title>
</head>
<body>
  <textarea spellcheck="true">This is some mispelled text</textarea>
</body>
</html>

style

Определяет стиль CSS непосредственно для элемента. Используется тогда, когда количество элементов стилей невелико и нет надобномти выносить их в отдельный файл.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут style</title>
 </head> 
<body>

  <p><span style="color: red; font-size: 2em">L</span>orem ipsum dolor 
  sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt 
  ut lacreet dolore magna aliguam erat volutpat.</p>
  <p><span style="color: red; font-size: 2em">U</span>t wisis enim ad 
  minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
  ut aliquip ex ea commodo consequat.</p>

 </body>
</html>

Неглобальные атрибуты

Локальные атрибуты — это атрибуты, применяемые к конкретному экземпляру тега. Может применяться к одному или нескольким тегам.  Неглобальные  атрибуты можно применить к нескольким тегам, таким как  <img> , <input> и <video>.

Примеры неглобальных атрибутов:

Элементы image <img> и hyperlink <a> , о которых мы вскоре узнаем, имеют множество собственных неглобальных атрибутов.

<img>:  src , alt и т. д.

<a>  : href , target , download и т. д.

Выравнивание текста (синтаксис <p align=»left»>…</p>):

  • left — выравнивание по левому краю, задается по умолчанию;
  • right — выравнивание по правому краю;
  • center — выравнивание по центру;
  • justify — выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для текста, длина которого более, чем одна строка.

Ссылки <a href=»URL»>текст ссылки</a>

<abbr  tittle=” Hyper Text Markup Language ”>HTML</abbr> с атрибутом title с пояснениями. При наведении курсора на HTML появится всплывающее пояснение «Hyper Text Markup Language».

Атрибуты таблицы:

  • аlign выравнивание по краю окна браузера;
  • bcolor фон;
  • border граница вокруг текста в пикселях;
  • cellpadding расстояние между границей и содержимым ячейки;
  • cellspacing расстояние между внешними границами ячеек;
  • width ширина таблицы;
  • cols количество столбцов таблицы.

Атрибуты списка:

  • <ul type=»disc«> маркированный список с заполненными кружочками.
  • <ul type=»circle«> маркер в виде окружности.
  • <ul type=»square«> квадратный маркер.

Заключение

Получив базовые представления о разметке страниц, попробуйте поэкспериментировать с кодом и посмотреть на результаты ваших действий. Все вопросы изучайте самостоятельно. Помимо указанных в статье, вот еще список полезных ресурсов для изучения:

Online редакторы кода:

Offline редакторы кода:

IDE (Integrated Development Environment):

Документация, учебники:

MDN(HTML): https://developer.mozilla.org/ru/docs/Web/Guide/HTML

MDN(CSS): https://developer.mozilla.org/ru/docs/Web/CSS 

CSS Tricks: https://css-tricks.com/

Дополнительно:

Шпаргалка со списком всех CSS стилей: http://media.mediatemple.netdna-cdn.com/

Learn Layout(en)http://learnlayout.com/ 

Frontenderhttp://frontender.info/

Проверка валидности кода:W3C HTML Checker

Следующая статья — короткие практические задачи.

Читайте больше по теме:

Подписаться
Уведомление о
guest
0 комментариев
Inline Feedbacks
View all comments
Просмотры: 511

Популярные записи