17.07.2023 в 07:04
Тим Тоуди
HTML – то же самое, что и текстовый документ!
Язык программирования HTML используется для структурирования и отображения веб-страницы и её контента. Давайте более детально рассмотрим из каких блоков состоит код HTML.
Рассмотрим документ word:
Title: My First Document
Welcome to my Document!
This is a paragraph of text in my document.
It's really quite an interesting paragraph, as paragraphs go.
Here's a link to the OpenAI website for more interesting content: www.openai.com
Here is an image.
[IMAGE INSERTED]
Here is a list of my favorite fruits:
- Apples
- Oranges
- Bananas
Теперь переведем его на сайт, используя HTML
<!DOCTYPE html>
<html>
<head>
<title>My First Document</title>
</head>
<body>
<h1>Welcome to my Document!</h1>
<p>This is a paragraph of text in my document.
It's really quite an interesting paragraph, as paragraphs go.
Here's a link to the <a href="http://www.openai.com">OpenAI</a> website for more interesting content.</p>
<img src="your-image-source.jpg" alt="An image in my document" />
<p>Here is a list of my favorite fruits:</p>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
</body>
</html>
Считайте HTML-теги эквивалентом различных элементов в документе Word
Каждый _tag _ служит определенной цели и имеет определенное место отображения на веб-странице. Давайте разберемся в этом на нашем примере:
!DOCTYPE html
: Эта строка необходима для объявления типа документа и версии HTML. В данном случае это HTML5.html
: Это корень HTML-документа. Все теги, которые используются для отображения чего-либо на веб-странице, находятся внутри этого тега.head
: Этот тег содержит такие элементы, как заголовок документа (который отображается как название вкладки в браузере), ссылки на таблицы стилей (CSS), объявление кодировки символов и многое другое. Важно отметить, что содержимое тегаhead
не отображается на самой веб-странице при просмотре в браузере.title
: Этот тег вложен в тег и используется для задания заголовка веб-страницы.body
: В тегbody
помещается содержимое веб-страницы - это то, что видят пользователи при посещении вашей страницы.h1
: Этот тег используется для добавления заголовка верхнего уровня, который обычно является названием веб-страницы или заголовком раздела самого высокого уровня.p
: Это тег абзаца, который используется для обозначения текстовых абзацев.OpenAI
: Этот тег создает гиперссылку. Текст между открывающим и закрывающим тегами - это текст, который будет отображаться в виде ссылки на веб-странице. В атрибутеhref
указывается URL страницы, на которую вы хотите сослаться.img
: Этот тег используется для вставки изображений в веб-страницу. Источник изображения (src
) указывает на местоположение файла изображения, а атрибутalt
содержит альтернативный текст для изображения, если оно не может быть отображено.ul
иli
: Эти теги используются для создания неупорядоченных (маркированных) списков. Тегul
обозначает начало списка, а каждый элемент списка оборачивается тегомli
.
Базовые уроки по HTML можете найти у нас на сайте базовая структура, создание форм или изучить их на канале.