Тег <input> является одним из разносторонних
элементов формы и позволяет создавать разные элементы интерфейса и обеспечить
взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей
и флажков. Хотя элемент <input> не требуется
помещать внутрь контейнера <form>, определяющего
форму, но если введенные пользователем данные должны быть отправлены на сервер,
где их обрабатывает серверная программа, то указывать <form> обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских
приложений, например, скриптов на языке JavaScript.
Основной атрибут тега <input>, определяющий
вид элемента — type. Он позволяет задавать
следующие элементы формы: текстовое поле (text),
поле с паролем (password), переключатель (radio),
флажок (checkbox), скрытое поле (hidden),
кнопка (button), кнопка для отправки формы (submit),
кнопка для очистки формы (reset), поле для отправки
файла (file) и кнопка с изображением (image).
Для каждого элемента существует свой список атрибутов, которые определяют его
вид и характеристики. Кроме того, в HTML5 добавлено еще более десятка новых элементов.
Синтаксис
HTML
<input атрибуты>
XHTML
<input атрибуты />
Атрибуты
accept
Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
accesskey
Переход к элементу с помощью комбинации клавиш.
align
Определяет выравнивание изображения.
alt
Альтернативный текст для кнопки с изображением.
autocomplete
Включает или отключает автозаполнение.
autofocus
Устанавливает фокус в поле формы.
border
Толщина рамки вокруг изображения.
checked
Предварительно активированный переключатель или флажок.
disabled
Блокирует доступ и изменение элемента.
form
Связывает поле с формой по её идентификатору.
formaction
Определяет адрес обработчика формы.
formenctype
Устанавливает способ кодирования данных формы при их отправке на сервер.
formmethod
Сообщает браузеру каким методом следует передавать данные формы на сервер.
formnovalidate
Отменяет встроенную проверку данных на корректность.
formtarget
Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.
list
Указывает на список вариантов, которые можно выбирать при вводе текста.
max
Верхнее значение для ввода числа или даты.
maxlength
Максимальное количество символов разрешенных в тексте.
min
Нижнее значение для ввода числа или даты.
multiple
Позволяет загрузить несколько файлов одновременно.
name
Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
pattern
Устанавливает шаблон ввода.
placeholder
Выводит подсказывающий текст.
readonly
Устанавливает, что поле не может изменяться пользователем.
required
Обязательное для заполнения поле.
size
Ширина текстового поля.
src
Адрес графического файла для поля с изображением.
step
Шаг приращения для числовых полей.
tabindex
Определяет порядок перехода между элементами с помощью клавиши Tab.
type
Сообщает браузеру, к какому типу относится элемент формы.
value
Значение элемента.
Также для этого тега доступны универсальные атрибуты и события.
Несмотря на то, что сейчас можно создавать отличные сайты на конструкторах в визуальном режиме, использование языка HTML остаётся важным навыком разработчика. Даже если вы не пишете шаблон с нуля, может возникнуть необходимость отредактировать его или вставить виджет стороннего сервиса — через HTML-код.
HTML позволяет форматировать страницы, придавая им необходимый вид. Если такой задачи нет, то знание тегов поможет отредактировать код встраиваемого виджета. Понимая структуру HTML, вы, например, можете быстро изменить размер видео или виджета и другие особенности его отображения.
Базовые теги
<!—…—> — тег для добавления комментариев в документ. Помещённые внутри него теги не интерпретируются браузером.
<!DOCTYPE> — показывает браузеру тип документа, сообщает его версию и язык.
<html></html> — корневой тег, который сообщает браузеру, что это HTML-документ. Все остальные элементы помещаются внутри него.
<head></head>— контейнер, в который помещаются метаданные документа, не видимые пользователям, но считываемые поисковыми роботами: например, <title> или <style>.
<meta> — тег для оформления метаданных документа, используемых браузером для обработки страницы, а поисковиками — для индексации.
<body></body> — тег, обрамляющий видимую пользователям часть документа. Всё, что вы укажите внутри этого контейнера, отобразится на странице. Тег <body> имеет несколько атрибутов, позволяющих управлять цветами.
<body bgcolor=?> — цвет фона документа в формате RGB.
<body text=?> — цвет текста.
<body link=?> — цвет гиперссылок.
<body vlink=?> — цвет гиперссылок, по которым уже переходили.
<body alink=?> — цвет гиперссылок при нажатии.
<title></title>— метатег, который задаёт название страницы, отображаемое на вкладке браузера.
<header></header> — определяет содержимое блока с вводной информацией сайта или группой ссылок.
Форматирование текста
<h2></h2>……<h6></h6>. — теги заголовков, от самого большого к самому маленькому.
<b></b> — жирный текст без придания важности выделенному фрагменту.
<strong></strong> — расставление акцентов в тексте путём выделения его фрагментов полужирным начертанием.
<i></i> — выделение текста курсивом без придания важности.
<del></del> — зачёркивает текст, помечая его удалённым.
<u> — подчёркивание без дополнительного акцентирования внимания.
<em></em> — расставление акцентов путём выделения фрагментов текста курсивом.
<mark></mark> — выделение частей текста жёлтым маркером.
<tt></tt> — имитация текста, набранного на печатной машинке.
<small></small> — отображение фрагмента с меньшим кеглем шрифта, чем у остального текста.
<sub></sub> — подстрочное начертание символов.
<sup></sup> — надстрочное начертание символов.
<cite></cite> — оформление цитат.
<address> — добавление контактов или подписи автора. При открытии в вею-браузере выделяется курсивом.
<pre></pre> — вывод неформатированного текста с сохранением пробелов и особенностей переносов.
<p></p> — контейнер для абзаца.
<br> — переносит текст на другую строку без создания абзаца.
<blockquote> </blockquote> — отступы с обеих сторон для оформления цитаты или врезки.
<q></q> — краткое цитирование.
<dl></dl> — контейнер для размещения термина и его определения.
<dt> — добавление термина.
<dd> — добавление определения понятия
<dfn> — выделение термина курсивом. Последующий текст должен раскрывать понятие.
<abbr> — указывает, что текст является аббревиатурой или акронимом. Для добавления пояснения используется атрибут title.
<ol></ol> — список с цифрами.
<ul></ul> — список со значками.
<li> — отметка каждого элемента перечня (цифра или значок в зависимости от типа списка).
<a></a> — добавление гиперссылки в текст. Имеет обязательный атрибут href, в котором указывается ссылка или якорь. Внутри контейнера помещается текст, при нажатии на который происходит переход на другую страницу или другое место на этой же странице.
<code></code> — выделение фрагмента кода с помощью шрифта monospace.
Встраивание элементов
<img></img> — вставка изображения. Имеет атрибут src, который указывает на адрес нужного файла. Есть и другие атрибуты:
<img src=»name» align=?> — выравнивание к одной из сторон документа. Например, значение right переместит рисунок в правый край, а left — в левый.
<img src=»name» border=?> — позволяет настроить в пикселях толщину рамки вокруг изображения.
<picture></picture> — контейнер для расположения элемента <img> без <source>, который даёт браузеру возможность самостоятельно выбрать подходящую картинку.
<audio></audio> — вставка звукового контента.
<video></video> — вставка видео (поддерживается Ogg, WebM и MP4).
<source></source> — указывает местоположение файла для <video>, <audio> и <picture>
<track> — формирует субтитры для <video> и <audio>.
<object></object> — контейнер, через который встраиваются мультимедийные файлы. Для передачи параметров применяется тег <param>.
<hr> — размещает на странице горизонтальную линию. Имеет несколько атрибутов.
<hr size=?> — устанавливает высоту линии.
<hr width=?> — устанавливает ширину линии.
<hr noshade> — убирает тень у линии.
<hr color=?> — задаёт цвет линии.
<script></script> — определяет выполнение сценария на стороне посетителя сайта. Может содержать сам скрипт или иметь ссылку на внешний источник.
<noscript></noscript> — ограничивает фрагмент документа, в котором скрипт не выполняется.
Работа с таблицами
<table></table> — размещает таблицу. Все остальные теги для форматирования таблиц должны находиться внутри это контейнера.
<thead></thead> — определяет заголовок.
<tbody></tbody> — отмечает тело таблицы.
<td></td> — создаёт одну ячейку.
<th></th> — указывает на заголовок ячейки.
<tr> — создание одной строки.
<tfoot></tfoot> — показывает нижний колонтитул.
<caption></caption> — вставляет подпись. Указывается после тега <table>.
<col> — позволяет указать ширину и другие параметры одной или нескольких колонок.
Создание форм и кнопок
<form></form> — создание форм на странице. С помощью HTML описывается только внешний вид, для выполнения функций требуется запуск соответствующих скриптов на сервере.
<button></button> — создаёт интерактивную кнопку. Внутри контейнера нужно поместить текст или изображение.
<select multiple name=»NAME» size=?></select> — формирует меню с поддержкой скроллинга.
<select name=»NAME»></select> — создаёт ниспадающее меню.
<option></option> — описывает каждый отдельный пункт меню.
<input> — формирует поля для добавления пользовательских данных.
<output> — выводит результаты вычислений, сделанных с помощью скрипта.
<label> — оформляет пометку для поля, созданного тегом <input>.
<textarea></textarea> — создаёт большие поля для ввода текста.
Введение в HTML (бесплатный учебник)
💬 «Каждый великий разработчик, которого вы знаете, добился успеха, решая проблемы, для решения которых они не были квалифицированы, пока они действительно не сделали это».
(Патрик Маккензи)
Введение
Добро пожаловать на второй день курса веб-разработки для начинающих. Сегодня день HTML! HTML предназначен для структурирования данных. Его не волнует, как что-то выглядит; для этого и нужен CSS, который мы будем изучать завтра.
Точно так же, как прочность здания зависит от его фундамента, HTML — это скелет, который скрепляет все вместе. Чтобы поместить его в более веб-контекст, HTML гарантирует, что страницу можно использовать на различных устройствах и браузерах, и предоставляет структуру для добавления CSS, JavaScript и содержимого самого веб-сайта или приложения.
Что мы будем делать сегодня?
Узнайте об HTML и базовом синтаксисе HTML
Узнайте о различных элементах HTML, которые мы будем использовать в этом курсе
Создать базовую структуру для нашей собственной веб-страницы
Готовы к еще одному приключенческому дню данных, структуры и магии? Пойдем!
1.
HTML
Мы уже узнали, что HTML — это тип языка, который структурирует содержимое; другими словами, он помечает различные элементы, такие как изображения и текст, чтобы сообщить вашему браузеру, как отображать содержимое и в каком порядке.
Вчера мы написали кое-что на HTML и поработали с несколькими элементами HTML, но толком их не поняли. Давайте изменим это в этом уроке. Мы рассмотрим, из чего состоит HTML, другими словами, из HTML-элементов, а затем используем их для добавления деталей на наш сайт-портфолио.
Теги элементов
Мы уже видели несколько HTML-элементов. Вы можете думать о HTML-элементе как об отдельной части веб-страницы, такой как блок текста, изображение, заголовок и т. д. Вчера вы использовали элемент заголовка h2 , который выглядел так:
Каждый элемент HTML имеет HTML-тегов , а тег (
или
) заключен в угловые скобки, такие как < и >. Теги определяют элементы и сообщают браузеру, как их отображать (например, они могут сообщить браузеру, является ли элемент изображением или абзацем текста).
Большинство элементов HTML имеют открывающий тег и закрывающий тег , которые показывают, где начинается и заканчивается элемент. Закрывающий тег — это просто открывающий тег с косой чертой (/) перед именем элемента. Мы можем обобщить формат HTML-элемента следующим образом:
Здесь контент — это то, что мы добавляем. Это может быть что угодно, например «Hello world» в нашем примере с h2; Однако «имя элемента» должно быть одним из предопределенных тегов, таких как h2, h4, p или strong.
Давайте рассмотрим несколько важных вещей, которые нужно знать об элементах HTML, прежде чем мы углубимся в их использование.
Атрибуты элементов
Элементы HTML могут иметь определенные атрибуты , которые изменяют их функциональность и поведение. Эти атрибуты записываются внутри открывающего тега. Например,
У нас есть элемент изображения с атрибутом «ширина» со значением 300 и атрибутом «высота» со значением 200, что, как вы могли догадаться, сделает изображение шириной 300 пикселей и высотой 200 пикселей. Давайте посмотрим на другой пример.
Очень удачно названный элемент textarea будет отображать поле ввода текста, где наши пользователи могут писать текст. В этом примере rows и cols — это атрибуты, определяющие количество строк и столбцов, которые должна занимать текстовая область соответственно.
Такие атрибуты, как ширина и высота для img или строки и столбцы для текстовой области, полезны непосредственно в HTML. Но некоторые атрибуты имеют особое значение — это означает, что они ничего не делают сами по себе, но требуют от нас написания дополнительных CSS или JavaScript и, таким образом, соединяют три столпа вместе — и мы узнаем о них больше позже в этом разделе. курс.
Обратите внимание, что в некоторых элементах нет содержимого, и, следовательно, они не должны иметь закрывающий тег. Изображениям, например, нужен только атрибут «src» (сокращение от источника или местоположения для поиска изображения).
Обратите внимание на /> в конце (вместо ). Это связано с тем, что элементы изображения имеют исходный атрибут (src), который извлекает изображение для отображения. Там нет контента, который должен идти внутрь. Есть и другие элементы, похожие на img, которые не требуют закрывающего тега.
Вложенные элементы
Элементы HTML могут быть вложены друг в друга; другими словами, один элемент может содержать другие элементы. Взгляните на следующий блок кода.
Обратите внимание, что у нас есть два сильных элемента в нашем элементе абзаца. Это абсолютно законно.
Для простоты чтения мы можем отформатировать предыдущий блок кода следующим образом:
HTML не важно, сколько места или сколько новых строк вы используете. Предыдущие два примера будут отображаться точно так же (но последний легче читать, поэтому мы предпочитаем его).
Другие правила
Помимо этого, есть несколько основных правил, которые применяются ко всем HTML-страницам. Например, самым внешним элементом HTML должен быть сам. Точно так же весь «видимый» контент помещается в
, а вся конфигурация/метаданные (данные о самой странице) — в.
Помните вчерашний код нашей первой веб-страницы?
По этой причине
попал в<head>, а браузер подхватил его и отобразил как заголовок веб-страницы (хотя внутри страницы он не был виден).</p><p></p><h3><span class="ez-toc-section" id="2_HTML"> 2. Элементы HTML </span></h3><p> Теперь, когда у нас есть общее представление об элементах HTML, давайте рассмотрим некоторые элементы, которые мы будем использовать в этом курсе.</p><h4><span class="ez-toc-section" id="i-21"> Заголовки </span></h4><p> Заголовки в точности соответствуют названию. В HTML есть шесть заголовков, от h2 до h6. Заголовок 1 или h2 — самый большой и значимый заголовок; это сигнализирует о том, что это самый важный текст на странице. Значение постепенно уменьшается по мере продвижения к h6.</p><h4><span class="ez-toc-section" id="i-22"> </span></h4><h4><span class="ez-toc-section" id="i-23"> Ссылки привязки </span></h4><p> Элемент привязки <strong> a </strong> включает гипертекст <strong> </strong> в HTML. Он может ссылаться на другую страницу того же или другого веб-сайта.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/cf.ppt-online.org/files/slide/5/5k82LC6edB1oOS0zQViMZHJFfbxXsTyagYWnjP/slide-68.jpg' /><noscript><img loading='lazy' src='/800/600/https/cf.ppt-online.org/files/slide/5/5k82LC6edB1oOS0zQViMZHJFfbxXsTyagYWnjP/slide-68.jpg' /></noscript> Вот как создать якорную ссылку на главную страницу Google:</p><p> Этот код будет отображаться следующим образом. Обратите внимание, как при наведении указателя мыши на ссылку отображается значение href привязки в левом нижнем углу страницы. Вы должны были щелкнуть пару таких якорных ссылок, чтобы попасть на эту самую страницу!</p><p></p><h4><span class="ez-toc-section" id="i-24"> </span></h4><h4><span class="ez-toc-section" id="i-25"> Абзацы </span></h4><p> Элемент абзаца <strong> p </strong> используется для текстовых блоков. Обычно мы оформляем абзацы таким образом, чтобы между ними и между первым абзацем и его заголовком оставалось достаточно места.</p><h4><span class="ez-toc-section" id="i-26"> </span></h4><h4><span class="ez-toc-section" id="i-27"> Списки </span></h4><p> Списки очень удобны для отображения данных в упорядоченном или неупорядоченном списке. Для <strong> упорядоченных списков </strong> (список, в котором используются числа) мы используем<ol>, а для <strong> неупорядоченных списков </strong> (список с маркерами) мы используем<ul>. Внутри одного из этих элементов каждый 9Элемент списка 0037 </strong> обозначается<li>. Вот пример:</p><p> Вот как наш пример <strong> «рендерит» </strong> (это просто красивое слово, означающее, как оно выглядит в нашем браузере, когда мы обновляем страницу).<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/expertnov.ru/800/600/http/luxe-host.ru/wp-content/uploads/c/f/b/cfba53ce0f7186250d4e63db746dc1c0.jpeg' /><noscript><img loading='lazy' src='/800/600/https/expertnov.ru/800/600/http/luxe-host.ru/wp-content/uploads/c/f/b/cfba53ce0f7186250d4e63db746dc1c0.jpeg' /></noscript></p><p></p><h4><span class="ez-toc-section" id="i-28"> Разделы и интервалы </span></h4><p> Можно представить, что все на веб-странице содержится в наборе блоков. Наша работа как веб-разработчиков состоит в том, чтобы расположить эти поля так, чтобы вся страница хорошо выглядела на всех экранах. Эти поля содержат текст, изображения и все остальное, что мы видим на веб-страницах.</p><p> Названия этих ящиков: разделы <strong> (div) </strong> и интервалы <strong> (span) </strong> . Разделы div и span ничего не делают сами по себе, но мы добавляем к ним что-то, например, текст и изображения, и они позволяют нам располагать текст и изображения так, как нам нравится.</p><p> Хорошей аналогией div и span являются мешки. Сумки, такие как сумочки или рюкзаки, сами по себе не очень полезны. Никто не стал бы таскать с собой пустую сумку. Они становятся полезными, когда мы храним в них вещи — они помогают нам поддерживать порядок. Вот как нам нравится думать о делениях и промежутках. Это контейнеры для фактических функциональных элементов на вашей веб-странице.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/cf.ppt-online.org/files/slide/p/pxaNPq8WEZDdtSXh5GcTKvOAlFYsmwzQuBVeML/slide-12.jpg' /><noscript><img loading='lazy' src='/800/600/https/cf.ppt-online.org/files/slide/p/pxaNPq8WEZDdtSXh5GcTKvOAlFYsmwzQuBVeML/slide-12.jpg' /></noscript></p><p> Мы увидим, как они работают, когда добавим их на нашу страницу ниже.</p><h4><span class="ez-toc-section" id="i-29"> Формы </span></h4><p> Мы постоянно заполняем формы в Интернете. Формы и элементы форм позволяют нам принимать пользовательский ввод. Будь то вход в наши учетные записи в социальных сетях или публикация твита, везде, где вы видите место для добавления текста, нажатия кнопки или переключения флажка, в фоновом режиме есть элемент HTML-формы.</p><h3><span class="ez-toc-section" id="3"> 3. Ваша очередь: Создание базового макета страницы </span></h3><p> Теперь мы знаем достаточно элементов HTML, чтобы начать добавлять HTML в наш проект страницы портфолио! Прежде чем мы приступим к написанию кода, давайте взглянем на наш каркас. Каркас — это дизайн с низкой точностью, который мы используем в качестве эталона для кода нашего веб-сайта.</p><center><div class="advv"><ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-1812626643144578"
data-ad-slot="9935184599"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></div></center><p> В реальном мире в вашей команде могут быть преданные дизайнеры, которые придумают дизайн, который затем будет передан вам, разработчику, для реализации (преобразования в фактический код). В нашем случае мы будем использовать нарисованный от руки дизайн в качестве отправной точки.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/myslide.ru/documents_3/42ac8c67f82d817901ce6372eafb5df1/img12.jpg' /><noscript><img loading='lazy' src='/800/600/https/myslide.ru/documents_3/42ac8c67f82d817901ce6372eafb5df1/img12.jpg' /></noscript> Цель, которой он служит, аналогична: он дает нам общее представление о том, как должен выглядеть наш конечный результат.</p><p></p><p> Глядя на макет, мы можем примерно разделить нашу страницу на разделы.</p><ul><li> Введение<ul><li> Изображение профиля</li><li> Имя</li><center><ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-1812626643144578"
data-ad-slot="4491286225"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center><li> Профессиональное звание</li><li> Цитата</li></ul></li><li> О компании<ul><li> Кто я</li><li> Что мне нравится</li></ul></li><li> Портфолио</li><li> Ссылки и контактная форма</li></ul><p> Как правило, полезно думать о разделах, потому что, как вы увидите, каждый из этих маркеров станет блоком сам по себе, а подпункты будут вложены в основные пункты. Давайте возьмем каждый из этих пунктов и рассмотрим их отдельно.</p><h5><span class="ez-toc-section" id="i-30"> Введение </span></h5><p> Раздел введения содержит изображение (изображение профиля), заголовок (имя), подзаголовок (профессиональное звание) и строку текста (цитата). Мы можем начать с поля введения и добавить в него каждый из вложенных элементов.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/schtirlitz.ru/800/600/http/salonfifi.ru/wp-content/uploads/4/e/b/4eb65b22081d42f68478e7d2447a7e23.jpeg' /><noscript><img loading='lazy' src='/800/600/https/schtirlitz.ru/800/600/http/salonfifi.ru/wp-content/uploads/4/e/b/4eb65b22081d42f68478e7d2447a7e23.jpeg' /></noscript> Обратите внимание, что этот код находится внутри тега body, то есть между открывающим и закрывающим тегами body (<body> и <script defer src="https://ylianova.ru/wp-content/cache/autoptimize/js/autoptimize_96a9e2c52d9175549d13ef33873eb0ed.js"></script></body>).</p><p> Помните, что мы говорили об элементе <strong> div </strong>? Это похоже на коробку, которая скрепляет наш контент. Внутри коробки у нас есть все элементы, о которых мы упоминали выше.</p><p> Обратите внимание на https://via.placeholder.com/150 в источнике изображения (<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src=)? Это изображение-заполнитель, которое мы используем при разработке этого веб-сайта. Мы можем заменить его нашим собственным изображением позже, как только мы будем довольны нашим дизайном.</p><noscript><img src=)? Это изображение-заполнитель, которое мы используем при разработке этого веб-сайта. Мы можем заменить его нашим собственным изображением позже, как только мы будем довольны нашим дизайном.</p></noscript><p> Посмотрим, как это выглядит в браузере.</p><p></p><p> Ты понял? Это верно. У нас готов первый раздел нашего сайта. Вы можете увидеть свой код в браузере, нажав Ctrl+F12 (в Windows или Linux) или Cmd+F12 в Mac OS.</p><p></p><p> Это код, интерпретированный вашим браузером. Вы можете попробовать нажать на каждый элемент (img, h2 и т. д.) и увидеть, что браузер выделяет их для вас.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/cf.ppt-online.org/files/slide/t/Tz2ZP9IWuHyRVrmStGxv301kL8d5psNXloKbaM/slide-20.jpg' /><noscript><img loading='lazy' src='/800/600/https/cf.ppt-online.org/files/slide/t/Tz2ZP9IWuHyRVrmStGxv301kL8d5psNXloKbaM/slide-20.jpg' /></noscript></p><p> <strong> 😎Совет профессионала: </strong> Это окно, которое появилось в нашем браузере, называется <strong> меню инструментов разработчика </strong> и широко используется в реальной веб-разработке для проверки кода и устранения ошибок. Лучший способ привыкнуть к этому новому инструменту — поиграть с ним.</p><h5><span class="ez-toc-section" id="i-31"> О программе </span></h5><p> Далее давайте рассмотрим раздел О программе. Он состоит из двух списков и заголовка, который идет с каждым списком. Обратите внимание, что на этот раз у нас есть два блока (div), вложенных в один большой блок. Это левое и правое поле, каждое со своим заголовком (<h4><span class="ez-toc-section" id="i-32">) и неупорядоченным списком (</span></h4><ul>). Давайте напишем код для этого сразу после закрывающего тега предыдущего (Введение) раздела 9.0242 </дел> </code> .</p><p> Давайте посмотрим на результат этого в нашем браузере.</p><p></p><p> Посмотреть изменения кода на GitHub ></p><p> <strong> Вот краткое напоминание: </strong> Вы можете щелкнуть ссылку Github выше, чтобы увидеть точное изменение, которое было сделано.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/schtirlitz.ru/800/600/https/myslide.ru/documents_3/d53b2276212c91357b0efcaad8ed4768/img46.jpg' /><noscript><img loading='lazy' src='/800/600/https/schtirlitz.ru/800/600/https/myslide.ru/documents_3/d53b2276212c91357b0efcaad8ed4768/img46.jpg' /></noscript> Мы рекомендуем вам сначала попробовать написать код самостоятельно и посмотреть ссылку на Github только в том случае, если вы застряли.</p><h5><span class="ez-toc-section" id="i-33"> Портфолио </span></h5><p> Отлично! Теперь займемся разделом «Портфолио». Этот раздел будет содержать четыре скриншота выбранного нами проекта. Вы увидите в нашем каркасе, что мы планируем расположить их в сетке 2×2. Позже в курсе мы сможем сделать это с помощью CSS. А пока давайте добавим заголовок и четыре изображения, используя тег <img> чуть ниже предыдущего раздела.</p><p> Обратите внимание, что мы снова используем здесь изображения-заполнители (но теперь мы сделали их 300, что соответствует их размеру, длине и ширине в пикселях).</p><p> Результат после добавления на нашу страницу должен выглядеть следующим образом:</p><p></p><p> Посмотреть изменения кода на GitHub ></p><h5><span class="ez-toc-section" id="i-34"> </span></h5><p> Наш последний раздел — это нижний колонтитул <strong> </strong> (названный так потому, что это вертикальный конец веб-страницы). ). Он содержит несколько ссылок на наши профили в социальных сетях, таких как LinkedIn, Github и Twitter, но вы можете заменить их своими собственными ссылками, если хотите!</p><p> Обратите внимание на заполнитель <strong> <user> </strong> в атрибуте <strong> href </strong> элемента <strong> anchor </strong>.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/cf2.ppt-online.org/files2/slide/e/ECpRoTLajhfF2HcP3vdWmOyZ97qIzri1xugGlY/slide-5.jpg' /><noscript><img loading='lazy' src='/800/600/https/cf2.ppt-online.org/files2/slide/e/ECpRoTLajhfF2HcP3vdWmOyZ97qIzri1xugGlY/slide-5.jpg' /></noscript> Вы должны заменить это своими соответствующими именами пользователей для этих сайтов. Например, <strong> https://twitter.com/<user> </strong> станет <strong> https://twitter.com/careerfoundry </strong>, чтобы связать якорный элемент со страницей CareerFoundry в Твиттере, и аналогичным образом для других ссылок. <strong> </strong></p><p> Поместите этот раздел после закрывающего тега div раздела «Портфолио».</p><h5><span class="ez-toc-section" id="i-35"> </span></h5><h5><span class="ez-toc-section" id="i-36"> Контактная форма </span></h5><p> У нас также будет форма «Свяжитесь со мной» с полями ввода. На реальном веб-сайте это позволило бы людям отправлять нам сообщения. На данный момент форма, которую мы пишем, находится только на внешнем интерфейсе. Это не сработает, так как у нас еще нет для этого бэкенда.</p><center><ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1812626643144578"
data-ad-slot="3076124593"
data-ad-format="auto"
data-full-width-responsive="true"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center><p> Здесь мы впервые представили несколько элементов. Давайте рассмотрим их один за другим и поймем, что происходит в строках кода выше.</p><p> 1. <code> <действие формы=”#”> </code></p><ul><li> Элемент формы определяет HTML-форму, которую вы используете для входа в Twitter или ввода сообщения в Facebook.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/cf.ppt-online.org/files/slide/l/lfRintJBaA3HzENrxD920cITOvKbkwgs6eFQXm/slide-22.jpg' /><noscript><img loading='lazy' src='/800/600/https/cf.ppt-online.org/files/slide/l/lfRintJBaA3HzENrxD920cITOvKbkwgs6eFQXm/slide-22.jpg' /></noscript> Форма может иметь один или несколько полей ввода, кнопок, флажков или раскрывающихся списков.</li><li> Форма может быть «отправлена», что сигнализирует браузеру, что пользователь ввел данные в форму. Атрибут действия — это место, куда должны быть отправлены данные при отправке формы (в нашем случае это «#», потому что мы не хотим никуда отправлять данные).</li><center><ins class="adsbygoogle"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-1812626643144578"
data-ad-slot="4908081011"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center></ul><p> 2. <code> <метка для=””> </code></p><ul><li> Метка отмечает метку для входного элемента. Это может быть текст рядом с полями ввода или значок. Атрибут for принимает атрибут «id» вложенного элемента ввода.</li></ul><p> 3. <code> <input type=""> </code></p><ul><li> Ввод определяет элемент ввода (элемент принимает данные от пользователя). Элемент ввода имеет атрибут типа, который принимает множество значений. Например, <strong> type=»text» </strong> отобразит поле ввода текста, а <strong> type=»submit» </strong> отобразит кнопку, которая отправляет форму, когда мы нажимаем на нее.</li><center><ins class="adsbygoogle"
style="display:inline-block;width:580px;height:400px"
data-ad-client="ca-pub-1812626643144578"
data-ad-slot="8813674614"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center></ul><p> 4. <code><textarea> </code> </p> <ul> <li> Как уже говорилось, элемент textarea будет отображать более крупное поле для ввода текста.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/xn--90abhccf7b.xn--p1ai/800/600/http/images.myshared.ru/26/1289085/slide_6.jpg' /><noscript><img loading='lazy' src='/800/600/https/xn--90abhccf7b.xn--p1ai/800/600/http/images.myshared.ru/26/1289085/slide_6.jpg' /></noscript> Следуйте следующему разделу и попытайтесь выяснить, в чем разница между <input type="text" /> и <текстовое поле>. Подсказка: один из двух поддерживает ввод многострочного текста. </li>
</ul> <p> Как и в случае с разделом «О программе», нам нужно, чтобы поля ссылок и поля комментариев были выровнены рядом друг с другом, ссылки слева, а поля комментариев справа. На данный момент нам нужно добавить открывающий и закрывающий «div» вокруг этих двух секций, по сути заключая каждый из этих блоков в больший блок. Конечный результат должен выглядеть примерно так: </p><center><div class="advv"><ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-1812626643144578"
data-ad-slot="9935184599"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></div></center> <p> </p> <p> Посмотреть изменения кода на GitHub > </p> <p> Вот и все! У нас есть раздел ссылок, а затем у нас есть наши входные данные. Попробуйте ввести что-нибудь в поля формы и нажмите «Отправить». Вы заметили какие-либо изменения? Да, в адресной строке браузера теперь есть символ фунта «#». Помните, где мы его использовали? Атрибут формы <strong> действие </strong>! </p> <h4><span class="ez-toc-section" id="i-37"> Резюме </span></h4> <p> На этом второй день подходит к концу.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/myslide.ru/documents_4/4e843c708bee753def88106da1628fe4/img7.jpg' /><noscript><img loading='lazy' src='/800/600/https/myslide.ru/documents_4/4e843c708bee753def88106da1628fe4/img7.jpg' /></noscript> Сегодня мы узнали о различных видах элементов HTML. Мы создали нашу первую веб-страницу и добавили структуру и информацию, с которыми мы будем работать на протяжении всего курса. Сегодня мы сделали то же, что вы обычно делаете в начале любого веб-проекта: структурировали свои данные и помещали их в правильные HTML-элементы. </p> <p> Теперь, когда это сделано, мы можем сосредоточиться на стиле и функциональности. Другими словами, теперь мы можем добавить больше цвета, форматирования и позиционирования в наш HTML-документ. Завтра мы впервые заглянем в мир CSS, языка стилей в Интернете. <br/> </p> <h4><span class="ez-toc-section" id="i-38"> 🧐Ежедневное задание </span></h4> <p> Попробуйте заменить изображения разделов «О программе» и «Портфолио» вашими собственными изображениями. В идеале это должны быть квадратные изображения, а не супер огромные. Если у вас возникли проблемы с поиском хороших изображений, загрузите их отсюда. <br/> </p> <h4><span class="ez-toc-section" id="i-39"> 📗Ссылки </span></h4> <ul> <li> Основы HTML https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
</li>
</ul> <p> <br/> </p> <h4><span class="ez-toc-section" id="i-40"> ❓ Часто задаваемые вопросы </span></h4> <p> <strong> В.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/cs13.pikabu.ru/post_img/2019/11/09/7/og_og_1573296480213143677.jpg' /><noscript><img loading='lazy' src='/800/600/https/cs13.pikabu.ru/post_img/2019/11/09/7/og_og_1573296480213143677.jpg' /></noscript> Элемент не отображается на экране? </strong> </p> <p> A. Проверьте, правильно ли закрыт этот элемент / нет ли в коде несбалансированных тегов HTML. Используйте инструменты разработчика в браузере для более быстрой отладки </p> <p> <strong> В. Можем ли мы использовать более интересные / красочные изображения вместо скучных серых? </strong> </p> <p> A. Окончательные изображения мы добавим позже, когда будем изучать CSS. На данный момент будет проще, если мы сначала сосредоточимся на данных и создадим правильную структуру страницы. </p> <p> <strong> В. Трудно запомнить так много тегов HTML и их функций. Должен ли я выучить их наизусть? </strong> </p> <p> A. Это случается со всеми нами в начале. Главное – продолжать практиковаться, и вскоре они станут для вас второй натурой. </p> <p> <strong> В. Страница выглядит очень скучно. Можем ли мы добавить к нему немного красок? </strong> </p> <p> О. Как упоминалось ранее, в этом руководстве мы сосредоточимся только на содержании и структуре, поскольку это и есть HTML.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/cf.ppt-online.org/files/slide/m/MQtIug6HKi8fZ29wDJCbO45ALl1ayosNXzEnUV/slide-21.jpg' /><noscript><img loading='lazy' src='/800/600/https/cf.ppt-online.org/files/slide/m/MQtIug6HKi8fZ29wDJCbO45ALl1ayosNXzEnUV/slide-21.jpg' /></noscript> Позже в курсе мы рассмотрим стили и цвета! </p> <p> <strong> В. Я читал о семантическом HTML и таких элементах, как раздел, статья и навигация. Должны ли мы использовать их вместо div и span? </strong> </p> <p> A. HTML5 определяет множество новых компонентов, которые можно использовать вместо div или span. В реальном мире мы рекомендуем использовать семантические компоненты HTML, когда это возможно. В этом курсе мы хотели бы свести к минимуму количество новых понятий, которые мы вводим, поэтому семантический HTML не упоминается. Если вы все еще хотите узнать о них, мы можем порекомендовать эту статью. </p> <h2><span class="ez-toc-section" id="_HTML-2"> Что такое HTML? Ваше универсальное решение для создания веб-страницы </span></h2> <p> Последнее обновление 20 апр. 2023 г. Просмотры 12,1 тыс. навыки работы с языками программирования, такими как Java и Python. </p> <p> Стать сертифицированным специалистом </p> <p> HTML — один из наиболее широко используемых языков в Интернете для разработки веб-страниц. Это поможет вам погрузиться в мир веб-разработки и улучшить свои навыки.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/cf.ppt-online.org/files/slide/n/nJK7mce8Xy9vZCL2UF50gNuos1TdtDPrl3xBOq/slide-64.jpg' /><noscript><img loading='lazy' src='/800/600/https/cf.ppt-online.org/files/slide/n/nJK7mce8Xy9vZCL2UF50gNuos1TdtDPrl3xBOq/slide-64.jpg' /></noscript> Итак, давайте перейдем к деталям <strong> Что такое HTML </strong> и каковы основы HTML в следующей последовательности: </p> <ul> <li> Происхождение HTML </li> <li> Что такое HTML? </li> <li> Структура HTML </li> <li> Как работает HTML? </li> <li> Основы HTML </li> </ul> <p> </p> <h3> </h3><strong> Происхождение HTML </strong> </h3> <p> История языка гипертекстовой разметки (HTML) — странная и интересная история. Человек, стоящий за HTML, Тим Бернерс-Ли собирал свою первую элементарную систему просмотра и авторинга для Интернета и создал быстрый небольшой гипертекстовый язык, который служил бы его целям. </p> <p> Но проблема заключалась в простоте языка. HTML был <strong> текстовым </strong>, и любой мог использовать любой редактор или текстовый процессор для создания или преобразования документов для Интернета. Разработчики начали внедрять новые функции в свои браузеры и выпускать расширенные версии HTML. </p> <p> <strong> Учебник HTML для начинающих | Edureka </strong> </p> <iframe src="//www.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/myslide.ru/documents_3/3c3ca41b67f3cc9ad03241a4e71079ae/img35.jpg' /><noscript><img loading='lazy' src='/800/600/https/myslide.ru/documents_3/3c3ca41b67f3cc9ad03241a4e71079ae/img35.jpg' /></noscript> youtube.com/embed/88PXJAA6szs?rel=0&showinfo=0″ frameborder=»0″ allowfullscreen=»allowfullscreen» data-mce-fragment=»1″/> </iframe> <h3> </h3><strong> Что такое HTML? </strong> </h3> <p> Язык разметки <strong> </strong> — это компьютерный язык, который используется для применения правил компоновки и форматирования к текстовому документу. Язык разметки делает текст более <strong> интерактивный </strong> и <strong> динамический </strong> . Он может преобразовывать текст в изображения, таблицы, ссылки и т. д. </p> <p> </p> <p> </p> <p> </p> <p> HTML означает <strong> Язык гипертекстовой разметки </strong> и является стандартным языком разметки для создания веб-страниц и веб-приложений. Он используется для описания структуры веб-страниц с помощью разметки. </p> <p> </p> <h3> </h3><strong> Структура HTML </strong> </h3> <p> HTML-теги бывают двух основных типов: <strong> блочные </strong> и <strong> встроенные теги </strong> . </p> <ol> <li> <p> <strong> Элементы уровня блока </strong> занимают все доступное пространство и всегда начинают новую строку в документе.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/ylianova.ru/800/600/http/fuzeservers.ru/wp-content/uploads/b/1/2/b1240ae076df96cddce0590aff0e2585.jpeg' /><noscript><img loading='lazy' src='/800/600/https/ylianova.ru/800/600/http/fuzeservers.ru/wp-content/uploads/b/1/2/b1240ae076df96cddce0590aff0e2585.jpeg' /></noscript> Пример блочных тегов включает <strong> заголовков, </strong> и <strong> абзацев. </strong> </p> </li> <li> <p> <strong> Встроенные элементы </strong> занимают столько места, сколько им нужно, и не начинают новую строку на странице. Обычно они служат для форматирования внутреннего содержимого <strong> элементов </strong> блочного уровня. Некоторые из примеров встроенных тегов включают <strong> связывает </strong> и выделяет <strong> строки </strong> . </p> </li> </ol> <p> </p> <p> </p> <p> </p> <p> Три тега блочного уровня, необходимые для HTML-документа, это <html>, <head> и <body>. </p> <ol> <li> Тег <strong> <html></html> </strong> — это элемент самого высокого уровня, который охватывает каждую страницу <strong> HTML </strong>. </li> <li> Тег <strong> <head></head> </strong> содержит метаинформацию, такую как заголовок страницы <strong> </strong> и <strong> кодировка </strong> . </li> <li> Наконец, тег <strong> <body></body> </strong> заключает в себе все <strong> содержимое, </strong> которое появляется на странице.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> </li> </ol> <p> </p> <h3> </h3><strong> Как работает HTML? </strong> </h3> <p><center><ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-1812626643144578"
data-ad-slot="4491286225"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center> Документы HTML заканчиваются расширением <strong> .html </strong> или <strong> .htm </strong>. Вы можете просмотреть его с помощью любого веб-браузера. Браузер читает файл HTML и отображает содержимое для просмотра пользователями. </p> <p> </p> <p> Каждая HTML-страница состоит из набора тегов или элементов, которые известны как строительные блоки веб-страниц. Они создают иерархию, которая структурирует контент в разделы, абзацы, заголовки и другие блоки контента. </p> <p> Возьмем пример <strong> </strong> и посмотрим, как элементы структурированы в HTML: </p><pre title="">
<дел>
<h2><span class="ez-toc-section" id="i-41">Основной заголовок</span></h2>
<h3><span class="ez-toc-section" id="i-42">Подзаголовок</span></h3>
<p>Абзац</p>
<img class="lazy lazy-hidden" decoding="async" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="/" alt="Изображение"><noscript><img decoding="async" src="/" alt="Изображение"></noscript>
<p>Второй абзац с <a href="https://example.com">гиперссылкой</a></p>
</div>
</pre><p> Теперь давайте перейдем к тому, что такое HTML? статью и получить подробную информацию об основных тегах в HTML. </p> <p> </p> <h3> </h3><strong> Основы HTML </strong> </h3> <p> Чтобы создать веб-страницу с HTML, вам необходимо знать о некоторых из <strong> основных элементов </strong>, таких как: </p> <p> </p> <p> </p> <h4/> </h4><h4/><span class="ez-toc-section" id="_90_006"> <p> 90 006 <h4> </span></h4><strong> Заголовки </strong> </h4> <p> Заголовки HTML определяются с помощью <strong> <h2><span class="ez-toc-section" id="i-43"> от </span></h2></strong> до <strong> <h6> </h6></strong> тегов.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/expertnov.ru/800/600/http/images.myshared.ru/6/698895/slide_29.jpg' /><noscript><img loading='lazy' src='/800/600/https/expertnov.ru/800/600/http/images.myshared.ru/6/698895/slide_29.jpg' /></noscript> </p> <p> <strong> <h2> </h2></strong> определяет <strong> самый </strong> <strong> важный </strong> заголовок. Принимая во внимание, что <strong> <h6> </h6> </strong> определяет <strong> наименее важный </strong> заголовок: </p><pre title="">
<h2><span class="ez-toc-section" id="i-44">Первый заголовок</span></h2>
<h3><span class="ez-toc-section" id="i-45">Второй заголовок</span></h3>
<h4><span class="ez-toc-section" id="i-46">Третий заголовок</span></h4>
<h5><span class="ez-toc-section" id="i-47">Четвертый заголовок</span></h5>
<h5><span class="ez-toc-section" id="i-48">Пятый заголовок</span></h5>
<h6><span class="ez-toc-section" id="i-49">Шестой заголовок</span></h6>
</pre><h4> </h4><strong> Абзацы </strong> </h4> <p> Абзацы HTML определяются с помощью <strong> <p> </strong> тегов. С помощью этого тега вы можете добавить столько <strong> абзацев </strong>, сколько захотите. </p><pre title="">
<p>Первый абзац</p>
<p>Второй абзац.</p>
</pre><h4> </h4><strong> Ссылки </strong> </h4> <p> Ссылки HTML являются <strong> гиперссылками </strong> . Вы можете нажать на ссылку и перенаправить на другой документ или веб-страницу. Ссылки определяются тегами <strong> <a> </strong>: </p><pre title="">
<a href="www.edureka.co">Добавить ссылку</a>
</pre><h4> </h4><strong> Изображения </strong> </h4> <p> Изображения необходимы для того, чтобы украсить или изобразить сложные концепции простыми способами на вашей веб-странице.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/xn--90abhccf7b.xn--p1ai/800/600/https/fs.znanio.ru/d5af0e/bb/e4/478d21215d38e8a2c86e2c438c6eb74f04.jpg' /><noscript><img loading='lazy' src='/800/600/https/xn--90abhccf7b.xn--p1ai/800/600/https/fs.znanio.ru/d5af0e/bb/e4/478d21215d38e8a2c86e2c438c6eb74f04.jpg' /></noscript> HTML-изображения определяются с помощью <strong> тегов <img> </strong>. </p> <p> Исходный файл <strong> (src) </strong> , альтернативный текст <strong> (alt) </strong> , ширина и высота предоставляются как атрибуты: </p><pre title="">
<img class="lazy lazy-hidden" decoding="async" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="image.jpg" alt="Эдурека"
</pre><noscript><img decoding="async" src="image.jpg" alt="Эдурека"
</pre></noscript> <h4> </h4><strong> Кнопки </strong> </h4> <p> Элемент <strong> <button> </strong> используется для создания кнопки HTML. Все тексты между открывающим и закрывающим тегами отображаются как текст на кнопке. Он определяет нажимаемую кнопку. Внутри элемента <strong> <button> </strong> вы можете добавлять текст или изображения: </p><pre title="">
<button>Нажмите здесь</button>
</pre><h4> </h4><strong> Списки </strong> </h4> <p> HTML предоставляет три способа указания списков информации. Все списки должны содержать один или несколько элементов списка. </p> <ol> <li> <p> <strong> <ul> </strong> : <strong> Ненумерованный список </strong> сортирует элементы, используя простые маркеры. </p> </li> <li> <p> <strong> <ol> </strong> : <strong> Заказанный список </strong> использует различные схемы номеров для перечисления ваших товаров.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> </p> </li> <li> <p> <strong> <dl> </strong> : Список <strong> определений </strong> упорядочивает ваши элементы так же, как они расположены в словаре. </p> </li> </ol> <p> <strong> Ненумерованный список </strong> </p> <p> Этот список создан с использованием тега HTML <strong> <ul> </strong>: </p><pre title="">
<ул>
<li>Питон</li>
<li>Ява</li>
<li>DevOps</li>
<li>Облачные вычисления</li>
</ol>
</ul>
</pre><p> <strong> Упорядоченный список </strong> </p> <p> Этот список создан с использованием тега <strong> <ol> </strong>: </p><pre title="">
<ол>
<li>Питон</li>
<li>Ява</li>
<li>DevOps</li>
<li>Облачные вычисления</li>
</ol>
</pre><p> <strong> Список определений </strong> </p> <p> Список определений — это идеальный способ представить глоссарий, список терминов или другой список имен/значений. Он создается с использованием <strong> тегов <dl> , <dt> и <dd> </strong>: </p><pre title="">
<дл>
<dt><b>HTML</b></dt>
<dd>Это расшифровывается как язык гипертекстовой разметки</dd>
<dt><b>HTTP</b></dt>
<dd>Это расшифровывается как протокол передачи гипертекста</dd>
</dl>
</pre><h4> </h4><strong> Таблицы </strong> </h4> <p> Таблица HTML определяется тегом <strong> <table> </strong>.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/myslide.ru/documents_7/fb833d6b7a7288f47d77e52ec7336b20/img13.jpg' /><noscript><img loading='lazy' src='/800/600/https/myslide.ru/documents_7/fb833d6b7a7288f47d77e52ec7336b20/img13.jpg' /></noscript> </p> <ul> <li> Строки определяются тегами <tr>. </li> <li> Заголовки определяются с помощью тегов <th> </li> <li> Ячейки таблицы определяются с помощью тегов <td>. </li> </ul><pre title="">
<таблица>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Возраст</th>
</tr>
<tr>
<td>Джилл</td>
<td>Смит</td>
<td>50</td>
</tr>
<tr>
<td>Ева</td>
<td>Джексон</td>
<тд>94</td>
</tr>
</таблица>
</pre><p> Теперь, когда вы знаете об основах, давайте взглянем на полный код <strong> </strong> для создания базовой веб-страницы <strong> HTML </strong> . </p> <h4> </h4><strong> Пример.html </strong> </h4><pre title="">
<html>
<голова>
<title>Что такое HTML?
<тело BGCOLOR="черный">
Добро пожаловать в Edureka!
То же самое обстоит и в случае обработки данных с помощью клиентских
приложений, например, скриптов на языке JavaScript.
1.
Последующий текст должен раскрывать понятие.
HTML
Давайте посмотрим на другой пример.
Это связано с тем, что элементы изображения имеют исходный атрибут (src), который извлекает изображение для отображения. Там нет контента, который должен идти внутрь. Есть и другие элементы, похожие на img, которые не требуют закрывающего тега.
Точно так же весь «видимый» контент помещается в
