0:00|Введение
0:02|Определение HTML и его уникальность
0:30|Демонстрация скачивания и открытия сайта в HTML
1:06|Основы HTML-разметки и форматирования кода
1:20|Рассмотрение структуры HTML-документа (DOCTYPE, head, body)
3:30|Работа с текстом и тегами (заголовки, параграфы, форматирование)
5:05|Использование тегов input для ввода данных
6:36|Вывод мультимедийных элементов (картинки, видео, аудио)
7:02|Создание таблиц и работа с ячейками
7:21|Создание ссылок и выпадающего списка
7:37|Использование списка
8:00|Роль тега div и работа с классами и идентификаторами
8:26|Комментарии в HTML-коде
В данном ролике рассматривается основная структура и элементы HTML-разметки. HTML является стандартизированным языком гипертекстовой разметки документов и основой всех веб-сайтов. Автор объясняет, что HTML уникален по сравнению с другими языками программирования, так как даже если сайт написан с ошибками, он все равно будет работать без прерывания работы браузера.
Далее автор демонстрирует практическую часть, показывая как создать HTML-документ с использованием различных элементов и тегов. Он объясняет, как правильно форматировать текст, создавать различные типы ввода данных, добавлять мультимедийные элементы (картинки, видео, аудио) и создавать таблицы, ссылки, выпадающий список и списки.
Автор также обращает внимание на важность правильного указания путей к файлам и дает объяснение абсолютных и относительных путей. Кроме того, он подчеркивает значение использования классов и идентификаторов для работы со стилями и другими языками программирования.
!ВИДЕО! = https://youtu.be/8Z7RGuObVLY
HTML база.
Начнем.
HTML — стандартизированный язык гипертекстовой разметки документов для просмотра веб-страниц в браузере.
Все сайты в мире написанны на HTML.
Это уникальный язык, в отличии от других языков программирования, и уникальность заключается в том, что сайт всегда будет работать, возможно криво, но со стороны браузера не когда не будет ошибок и прерывания переработки кода.
Чтобы в этом убедиться, скачаем любой сайт, допустим сайт моего канала в контакте, для этого жмём правой кнопкой мыши по свободному пространству, затем сохранить как, и сохраняем на компьютере.
Теперь переходим в папку, в которую сохранили, появился файл и папка с одним именем, переходим в папку и удаляем файлы с расширениями css и js, и теперь открываем файл с расширением html с помощью браузера, и видем голый сайт на одном html.
Формат записи кода для браузера не важен, а для разработчика оптимальный вариант, когда каждый тег записывается на следующей строке, а когда в теге есть больше одного атрибута, то желательно их тоже по строкам разбить.
Далее переходим в панель просмотра кода, и видем стандартную структуру верстки сайта: < восклецательны знак doctype html >, оно объевляет, что документ написан на языке html, и в конце закрывающий тег - < касая черта html >, обозначает для браузера где конец документа.
Затем head, где задаются параметры, такие как текст и иконка, которая выводиться в вкладке браузера, также тут подключаются стили, джава скрипты, шрифты, библиотеки картинок, мета данные типа кодировки документа и многое другое.
За head идёт body, он содержит всю видимую часть сайта, например тексты, картинки, видео, вообщем контент.
В основном все объекты обернуты в теги div, но это сейчас, а раньше вместо div был table, это таблица вобщем разницы нет со стороны пользователя, а с нашей стороны таблицы требует много танцов с бубными, это надо создать столбцы и строки затем задать ширину и высоту ячейки, короче с тегом div легче работать.
С краткой теорией разобрались, перейдём к практике, возникает вопрос в чём писать код, ответ пишите где хотите, даже в блокноте можно написать полноценный сайт любой сложности, на канале есть несколько роликов на эту тему, но в этом видео я буду писать код в visual studio code с плагенем live server для скорости.
Переходим в проводник и создаём файл с расширением html, и открываем в программе, пишем выше проговоренную основу, теперь скажу что есть два вида тега, одиночные и парные, они оба нам встретятся, разница между ними проста, у одиночного тега нету закрывающего тега с косой чертой.
Начнем с головы, с head, зададим текст для вкладки, для этого есть тег title, и между тегами пишим текст, вот текст появился, и довавим мета тег для указания кодировки документа.
Теперь в теле будем работать, начнём с текста конкретно с заголовка, их существует 6 размеров, и для этого есть парные теги от h 1 до h 6.
Чтобы создать обзац, есть парный тег, p, между которыми вставляем текст, а чтобы вывести текст в кавычках, есть парный тег, q.
А одиночный тег hr создаёт простую линию на ширину строницы.
Теперь форматируем текст, для этого в начале и в конце необходимой части для форматирования ставим теги.
Если надо надстрочный или подстрочный текст, то есть теги sup, и sub, необходимо перечеркнуть, ставим тег, del, если надо подчеркнуть текст, то есть тег, ins, чтобы текст стал полужирным, используем тег, b, или, strong, для перевода на навую строку, есть тег, br, чтобы сделать текст прописным, есть два тега, i, или, em.
Между атрибутами необходимо ставить точку с запятой, следующем теге несколько атрибутов, как раз и посмотрим.
Чтобы детально редактировать текст, есть парный тег, font, между тегами текст, первый атрибут это color, в нём указываем имя цвета или шестнадцатеричный код через решетку, второй атрибут, face, в нем указываем шрифт для текста, и третий атрибут size, тут задаем размер текста.
С форматированием текста закончили, теперь ввод данных, для ввода текста есть парный тег, textarea.
Теперь input, он в основном используется для отправки данных на сервер, в формах, это кантейнер с большим разнообразием типов ввода данных, text для ввода текста, password для ввода пароля, color для выбора цвета, date для ввода даты, time для ввода времени, number для ввода чисел, file для загрузки файлов, radio для логического, checkbox аналогично, range нужен чтобы создать ползунок, botton для создания кнопки, и в артибуте value, пишем текст, есть ещё несколько типов, но они не как, внешне, не отличаются.
Также для текстовых типов можно задать атрибут, value, это начальное значение в поле ввода.
Сейчас выведим плейер: с картинкой, с видео, и с аудио.
Небольшое отступление, для работы с файлами, необходимо знать как прописывать пути к файлам, есть два варианта, обсолютный и относительный.
Обсолютный путь практически не используется, потому что при перенёсе сайта с компьютера на сервер, необходимо переписать путь ко всем файлам сайта.
А относительный путь используется всегда, и чтобы поднятся в файловой системе надо использовать сочитание символов, две точки и слеш.
Для картинки есть одиночный тег, img, внутри ищем картинку с помощью src.
Для видео есть парный тег video, в нем добавляем параметр, controls, между тегами допишим тег source src, для поиска.
Для аудио есть парный тег audio, в нем добавляем параметр, controls, между тегами допишим тег source src, для поиска.
Теперь рассмотрим создание таблиц, все теги в ней парные, обьявим таблицу с помощью тегов table, и tbody, чтобы создать строку, используем тег, tr, чтобы разделить строку на ячейки, пишем тег, td, только в нём выводим контент.
Переходим к гипер ссылкам, для их создание, есть тег а, он парный, основным атрибутом является href, где указывается url, адрес в кавычках, как заглушку можно изпользовать решетку, между тегами пишем текст.
Создадим выпадающий список с помощью парного тега select, а для создания пунктов в нем, есть парный тег option, и между ними выводим текст.
Далее выведим обычный список, для этого есть парные теги li, и, ul, ul, создаёт список, а, первый тег создаёт пункты в списке, а между тегами текст.
Пришло время и до, div.
Div, это парный тег, который работает как каробка, в которую можно что угодно поместить, потом из этих каробок соберают сайты, как в тетресе, с помощью стилей.
И к абсолютно к каждому элементу - тегу можно добавить два атрибута, а именно класс и индикатор, для дольнейшей работы со сайтом на других языках программирования.
На последок рассмотрим комментарии, чтобы открыть комментарий, надо написать, знак меньше, восклицательный знак, и два тире, а чтобы затрыть коментарий, необходимо написать, два тире и знак больше, они нужны для программиста, чтобы просто в коде написать пометку.
На этом у меня всё.
Подпишитесь там, где вам удобнее смотреть нас, сканировав qr код.
С вами был Fa Read - Школа Программирования.
<!DOCTYPE html>
<head>
<title>mysite</title>
<meta charset="utf-8">
</head>
<body>
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
<p>d:\Рабочий стол 2\site\0.png d:\Рабочий стол 2\site\index.html d:\Рабочий стол 2\site\pd:\Рабочий стол 2\site\0.png d:\Рабочий стол 2\site\index.html d:\Рабочий стол 2\site\pd:\Рабочий стол 2\site\0.png d:\Рабочий стол 2\site\index.html d:\Рабочий стол 2\site\pd:\Рабочий стол 2\site\0.png d:\Рабочий стол 2\site\index.html d:\Рабочий стол 2\site\p</p>fa read
<p>d:\Рабочий стол 2\site\0.png d:\Рабочий стол 2\site\index.html d:\Рабочий стол 2\site\pd:\Рабочий стол 2\site\0.png d:\Рабочий стол 2\site\index.html d:\Рабочий стол 2\site\pd:\Рабочий стол 2\site\0.png d:\Рабочий стол 2\site\index.html d:\Рабочий стол 2\site\pd:\Рабочий стол 2\site\0.png d:\Рабочий стол 2\site\index.html d:\Рабочий стол 2\site\p</p>fa read
<q>https://milk.cohttps://milk.cohttps://milk.cohttps://milk.cohttps://milk.cohttps://milk.cohttps://milk.cohttps://milk.cohttps://milk.cohttps://milk.cohttps://milk.cohttps://milk.cohttps://milk.cohttps://milk.cohttps://milk.cohttps://milk.cohttps://milk.cohttps://milk.cohttps://milk.cohttps://milk.cohttps://milk.cohttps://milk.cohttps://milk.cohttps://milk.cohttps://milk.co</q>fa read
<hr>
<sup>https://milk.cohttps://milk.cohttps://milk.co</sup>fa read
<sub>https://milk.cohttps://milk.cohttps://milk.cohttps://milk.cohttps://milk.co</sub>fa read
<del>fa read</del>fa read
<ins>fa readfa readfa readfa read</ins>
<b>fa read</b>fa read <strong>fa read </strong>
<br>
fa read
<i>fa readfa readfa read</i>fa read<em>fa readfa read</em>
<font color="#1b69de";face="fantasy";size="3">fa read</font>
<textarea></textarea>
<input type="text">
<input type="password">
<br>
<input type="color">
<input type="date">
<input type="time">
<input type="number">
<input type="file">
<input type="radio">
<input type="checkbox">
<input type="range">
<input type="button"value="подпишись">
<br>
<img src="90.png">
<video controls><source src="p1.mp4"></video>
<audio controls><source src="p/1.mp3"></audio>
<table>
<tbody>
<tr>
<td>
<b>faread</b>
<b>faread</b>
</td>
<td>
<b>faread</b>
<b>faread</b>
</td>
</tr>
<tr>
<td>
<b>faread</b>
<b>faread</b>
</td>
<td>
<b>faread</b>
<b>faread</b>
</td>
</tr>
</tbody>
</table>
<a href="https:\\google.com">google</a>
<select>
<option>
1
</option>
<option>
2
</option>
<option>
3
</option>
</select>
<ul>
<il>faread1</il>
<il>faread2</il>
<il>faread3</il>
</ul>
<div class="div"; id="div">
<il>faread</il>
</div>
</body>
</html>