Уроки HTML&CSS
- Введение в HTML
- 1. Знакомство с HTML
- 2. HTML - элементы
- 3. Ваш первый HTML-код
- 4. Основные составляющие
- 5. Семантика
- 6. Основные правила разметки
Введение в HTML
1. Знакомство с HTML
В основе любой веб-страницы, лежат HTML, CSS и JavaScript.
Что такое HTML?
HTML (от англ. HyperText Markup Language) — это язык гипертекстовой разметки сайта, который помогает структурировать содержание каждой веб-страницы. С его помощью браузер понимает, как должны отображаться заголовки, изображения, таблицы.
HTML — документ создаётся в обычном текстовом редакторе, чаще всего в «Блокноте». Также существуют специализированные приложения, например, Notepad++ или Sublime Text, с подсветкой кода.
Преимущества HTML:
— Подходит почти для всех браузеров.
— Код можно написать в любом текстовом редакторе.
— HTML можно использовать бесплатно.
— У него простой и понятный синтаксис.
— Подходит для профессиональных разработчиков сайтов и для любителей.
— HTML интегрируется с другими языками программирования.
Взгляните на этой простой код с текстовым абзацем:
<p>Hello there</p>
HTML состоит из различных элементов, которые определяют поведение содержимого веб-страницы.
Например, приведенный выше пример кода, создает элемент абзаца.
2. HTML - элементы
HTML элементы создаются при помощи тегов.
Например. чтобы создать абзац, его нужно заключить в тег абзаца:
<p>I am learning HTML</p>
<p> -это открывающий тег абзаца. Он определяет начало элемента. Элемент должен быть закрыт тегом </p>, то есть он определяет конец элемента. Обратите внимание на косую черту (forward slash) в теге — она нужна для определения закрывающего тега. Текст между открывающим и закрывающим тегами является содержимым элемента.
Итак. при открытии страницы браузер обрабатывает элементы страницы и отображает содержимое пользователю.
В итоге пользователь видит элемент <p>I am learning HTML</p> в виде простой строки текста без тегов:
I am learning HTML
Важно указать правильные названия тегов и скобки. В случает опечатки в теге браузер не сможет его обработать и просто отобразить его в виде текста.
Например:
[par] some text [/par]
3. Ваш первый HTML-код
HTML-страница может содержать множество элементов.
Например, создадим два абзаца:
<p>I am learning HTML</p>
<p>HTML is fun</p>
4. Основные составляющие
Обратите внимание на этот код:
<body align="center">
... ... ...
</body>
Перед вами цельный элемент HTML — языка.
Из чего он состоит?
Он состоит из открывающегося тега <body> и закрывающего тега</body>
<body>...</body>
Кроме того, каждый тег, может содержать в себе какие-то атрибуты.
Что такое атрибуты?
Например, у человека, атрибутами могут быть часы, или какие-то украшения, и также и HTML — теги, могут иметь свои атрибуты. В нашем случае, атрибут align:
align="center"
Что он делает?
Он выравнивает содержимое тега по центру. Например, если мы хотим отобразить на странице какой-то текст или стихи, то для того чтобы этот текст отображался по центру страницы, мы указываем в теге атрибут align со значением center. Содержимое всего элемента, будет находиться, между открывающимся и закрывающимся тегом.
Например:
<body>
<p align="center">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
Вот так, этот текст, будет отображаться в браузере:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
5. Семантика
Теперь поговорим о семантики языка. Как нам создавать HTML документ?
Обратите внимание на этот эту разметку:
<html>
<head>
... ... ...
</head>
<body>
... ... ...
</body>
</html>
- Тег <html> является контейнером, который заключает в себе все содержимое веб-страницы, включая теги <head> и <body>. Открывающий и закрывающий теги <html> в документе не обязательны, но хороший стиль диктует непременное их использование.
- Тег <head> содержит в себе информацию о странице. В нем располагаются метатеги, ссылки на подключаемые модули.
- Тег <body> является контейнером для всего содержимого, которое будет отображено пользователю.
6. Основные правила разметки
- Элементы не должны пересекаться. Другими словами, если открывающий тег располагается внутри элемента, то и соответствующий закрывающий тег должен располагаться внутри этого же элемента.
- Блочные элементы могут содержать вложенные блочные и текстовые элементы.
- Текстовые элементы могут содержать вложенные текстовые элементы.
- Текстовые элементы не могут содержать вложенные блочные элементы.
7. Основные элементы для работы с текстом
* В разметке все пробельные символы более одного пробела игнорируются, в том числе переносы строки и табуляции.
Тег <p></p> (параграф, абзац) — является одной из основных семантических единиц, и следовательно для него в разметке есть отдельный тег. При этом между ними автоматически создаются вертикальные отступы и после каждого параграфа делается перенос строки.
Давайте рассмотрим, как работает этот тег на примере текста Lorem Ipsum:
<html>
<head></head>
<body>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<p>
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>
Обратите внимание, строки которые мы заключили в теги параграфов <p></p>, отделились параграфами от остальной части текста:
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Тег <pre></pre> (от англ. preformatted — предварительно отформатированный) — является контейнером, который отображает содержимое, учитывая все пробельные символы, указанные внутри себя.
<html>
<head></head>
<body>
<pre>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</pre>
</body>
</html>
Обратите внимание, с помощью тега <pre></pre> мы получили полностью отредактированный текст, с учетом всех пробелов и отступов.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Тег <br/> (от англ. break — разрыв)- делает перенос на следующую строку. Он не имеет содержимого, потому в конце видим /.
Давайте посмотрим как он работает на примере текста Lorem Ipsum:
<html>
<head></head>
<body>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br/> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br/> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br/> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>
Обратите внимание, в том месте, где мы установили тег <br/> браузер разрывает текст, и следующий текст, который остался после тега <br/> переносится на следующую строку:
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
8. Теги title
Тег <title> Содержит имя страницы, которое отображается пользователю на вкладке в браузере.
Тег <body> является контейнером для всего содержимого, которое будет отображено пользователю.
<html>
<head>
<title>Простой пример html страницы</title>
</head>
<body>
Здесь располагается основное содержимое страницы, которое будет отображено пользователю в окне браузера
</body>
</html>
9. Игнорирование пробельных символов
<html>
<head>
<title>Игнорирование пробельных символов</title>
</head>
<body>
Все пробельнве символы более одного пробела игнорируются, в том числе переносы строк и табудяции
</body>
</html>
Обратите внимание, на код с пробелами, и на результат, как видим, все тексты вывелись в одно строку, игнорирую пробелы кода:
Подведём итог тому, что мы узнали:
— HTML-элементы создаются при помощи тегов.
— Тег <p> используется для создания текстового абзаца.
— Элемент абзаца состоит из открывающего тега, содержимого и закрывающего тега.
