Введение в HTML

Введение в HTML
Что такое браузер

ЧТО ТАКОЕ URL
URL (Uniform Resource Locator) — единый

указатель ресурса, в общем виде
выглядит так: <протокол>://<хост>/<путь>
— Протокол — «язык», на котором общаются
браузер и сервер.
— Хост — адрес или имя сервера, у которого мы
запрашиваем документ.
— Путь — адрес расположения документа на
сервере.
Пример ссылки: http://maub.zp.ua
ЧТО ДЕЛАЕТ БРАУЗЕР
1. Формирует и отправляет запрос на сервер

— HTTP.
2. Получает ответ сервера — HTTP.
3. Разбирает полученный документ — HTML.
4. Рисует и отображает полученный
документ в окне — HTML и CSS.
5. Реагирует на действия пользователя —
CSS и JavaScript.
НА КАКОМ ЭТАПЕ УЧАСТВУЕТ
ВЕРСТАЛЬЩИК
Как сервер отвечает на запросы, определяет

backend-программист.
2. На этапе разбора и отрисовки документа
верстальщик сообщает
браузеру, что, где и как отобразить на
странице.
3. На этапе обработки действий
пользователя участвует frontend-
программист.
КАКУЮ ИНФОРМАЦИЮ СОДЕРЖИТ
ДОКУМЕНТ
HTML документ, полученный с сервера,

содержит:
— Текстовую информацию;
— Структуру документа (заголовки, абзацы и
так далее);
— Ссылки на другие ресурсы (изображения,
видео, аудио, стили).
ЗАДАЧА БРАУЗЕРА
Именно такую информацию браузер должен

уметь правильно представлять на экране.
И значит, нам необходимо сообщить ему, что
является заголовком,
абзацем,
где сделать акцент
и когда должна следовать иллюстрация.
HyperText Markup Language
HTML является стандартным

языком, предназначенным для создания
гипертекстовых документов в
среде WEB. HTML-документы
могут просматриваться
различными типами WEB-
браузеров
ЦЕЛИ СОЗДАНИЯ HTML
— Cоздавался как язык для обмена научной и

технической
документацией.
— Пригодный для использования людьми, не
являющимися
специалистами в области вёрстки.
— HTML был задуман и создан как средство
структурирования и
форматирования документов без их привязки к
средствам
воспроизведения.
ОСОБЕННОСТИ HTML
Просто текст в HTML-документе браузер никак не

форматирует.
— Переносы строк заменяет на пробел.
— Несколько подряд идущих пробелов показывает как
один.
— Для разметки используются специальные метки,
которые обозначают
начало и конец абзаца, заголовка и все остальные
элементы.
— Чаще всего их называют тегами.
— Набор тегов ограничен, и у каждого из них своя роль.
СТАНДАРТИЗАЦИЯ
Стандарт поддерживается Консорциумом

Всемирной паутины W3C.
— В стандарт как раз входит допустимый
набор тегов, их роль, и прочие
особенности их использования.
— Текущая версия стандарта HTML — 5.1
— Все браузеры стараются обеспечить
максимальную поддержку
актуальному стандарту.
Верстка веб-страниц
ТЕГ
Схема парного тега:

<имяТега> </имяТега>
Схема одиночного тега:
<имяТега>
Иногда в HTML тегах устанавливают
атрибуты со значениями:
<имяТега атрибут="значение"> </имяТега>
<имяТега атрибут="значение">
Где имяТега — это h1, p, b, img, a, table.
Категории тегов
Парные теги
Одиночные теги
Блочные теги
Строчные теги
Новые теги HTML5
Устаревшие теги
Нестандартные теги
Теги верхнего уровня (html, head и body)
Теги головы HTML-документа
Семантические теги
Теги верхнего уровня
теги отвечающие за создание HTML-

документа, их всего три:
<html> </html> — начало и конец HTML-
документа,
<head> </head> — голова HTML-

документа,
<body> </body> — тело HTML-документа.

Теги головы HTML-документа
<link> — подключает внешние

файлы .css, .xml, .ico,
<meta> </meta> — мета-теги,
<title> </title> — название страницы,
<style> </style> — внедряет CSS-код в
страницу,
<script> </script> — загружает внешний
JavaScript-файл .js, также между этими
тегами может размещаться JavaScript-код.
Семантические теги
<article> </article> — обрамляют основной

контент страницы,
<blockquote> </blockquote> — обрамляют
цитаты взятыя из внешних источников,
<small> </smal> — обрамляет текст
написанный мелким шрифтом в
юридических документах
С чего начинается работа
 Создаем папку с названием нашего проекта,

например Whitesquare.
 В ней создаем пустой файл index.html.
 В папке проекта создаем папку css с пустым
файлом styles.css.
 В папке проекта создаем пустую папку images.
Создание веб-страницы
 <! DOCTYPE html>

 <html>
 <head>
 <title> MY page!!!</title>
 </head>
 <body>
 Hello WORLD!!!!
 </body>
 </html>
Структура HTML-документа
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2

Final//EN">
<HTML>
<HEAD>
<TITLE>Заголовок документа</TITLE>
</HEAD>
<BODY>
Hello WORLD!!!!!
</BODY>
</HTML>
Новые семантические теги HTML5
 <header> — заголовок
 <article> — новость, статья, пост
 <aside> — сайдбар, список рубрик
 <figure> — блок с изображением и подписью к нему
<figcaption> — описание контента (подпись к изображению) в теге
<figure>. Должен быть первым или последним в блоке.
 <footer> — подвал сайта. Имя автора, дата документа, контактная и
правовая информация.
 <hgroup> — группирование заголовков
 <nav> — основная навигация по сайту, как правило главное меню
 <section> — раздел документа. <section>может использоваться
несколько раз внутри одной статьи представляя её разделы.
<section>может и должен содержать заголовки <H2> или <H3>
 <time> — помечает текст внутри тега <time> как дату
<header></header>
Категории контента: потоковое содержимое.

Группирует вводные и навигационные
элементы, не является обязательным.
Может содержать заголовки, оборачивать
содержание раздела страницы, форму
поиска или логотип. В HTML-документе
может содержаться одновременно
несколько элементов <header> и они могут
располагаться в любой части страницы.
<header></header>
<header>
<h1>Site description</h1>
<nav>
<ul>
<li><a href="">About</a>
<li><a href="">Forum</a>
<li><a href="">Download</a>
</ul>
</nav>
</header>
Навигация по сайту
 Оформление главной навигации по сайту

должно заключаться в тег nav. Также
следует помнить что хорошей практикой
считается оформлять навигацию
элементами списка.
<nav> </nav>


<main>
...основной контент страницы...
</main>
Не может входить в состав других
структурных тэгов: article, aside, footer,
header или nav в силу своей уникальности.
main {display:block;}
Оформление статьи
Тег article — служит для обертки статей. В

общем, этот тег содержит в себе блок
контента, который может быть вынут из
контекста страницы, и использован
отдельно в другом месте.
article
 <main>...
 
 <article>
 
 <header>
 
 <h1>Article title</h1>
 
 <time datetime="2015-09-30T15:25:55" pubdate>30 Сентября
 </time>
 </header>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo
quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt
repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae
eaque unde?</p>
article


<h2>Article sub-title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nemo quisquam, soluta sunt, aliquam voluptatem
voluptates! Deserunt repudiandae aperiam pariatur sit
harum at a, quo, est neque. Adipisci beatae eaque
unde?</p>
<footer> <a href="#">Читать далее</a>
<a href="#">Комментарии</a>
</footer>
</article>...
</main>
Сайдбар или колонка с виджетами
В него могут входить как блоки nav, так и

другие элементы, не являющиеся по-сути
навигационными (рекламные баннеры,
фотография автора и информация о нем,
кнопки социалок и пузомерки и т.д.).
Для каждого отдельного элемента сайдбара
используем блок aside. Внутри него
заголовок оформляем тегом h1.
aside
 
 <div class="sidebar">
 
 <aside>
 <h1>Widget title</h1>
 ... </aside>
 <aside>
 <h1>Последние записи</h1>
 ... </aside>
 <aside>
 <h1>Популярные комментарии</h1>
 ... </aside>
 </div>
Тег section
 Используется для представления группы или

секции тематически связанного контента.
 Его использование похоже на article с
главным отличием в том что допускается
отсутствие смысла содержимого внутри
элемента <section> вне контекста самой
страницы. Рекомендуется использовать теги
(<h1> – <h6>) для обозначения темы секции.
Пример использования тега section
 <h1>An Event Apart</h1>

 <section>
 <header>
 <h2>Cities</h2> </header>
 <p>Join us in these cities in 2017.</p>
 <section>
 <header> <h3>Seattle</h3> </header>
 <p>Follow the yellow brick road.</p>
 </section>
 <section> <header> <h3>Boston</h3> </header>
 <p>That's Beantown to its friends.</p>
 </section>
 <section> <header> <h3>Minneapolis</h3> </header>
 <p>It's so <em>nice</em>.</p>
 </section>
 </section>
 <small>Accommodation not provided.</small>
Заголовки страницы
 hgroup — тэг призван группировать

заголовки страницы в одну логическую
единицу.
 <hgroup>
<h1>Самый сайт</h1>
<h3>Здесь описание Самого сайта</h3>
</hgroup>
Группирующий элемент
 <figure>
 Обычно в него помещается самодостаточная

информация, отсутствие или перенос которой
в другое место не исказит смысл документа. Чаще
всего это иллюстрации, диаграммы, фотографии
с кратким комментарием или без него.
 Такой информационный блок можно озаглавить
с помощью тега <figcaption>, который должен
располагаться внутри <figure> в качестве первого
или последнего дочернего элемента.
figure
 <figure>
 <img src="collider.gif"
alt="Синхрофазотрон" />
 <figcaption>
 <h4>Синхрофазотрон</h4>
 <p>На схеме 1 изображен принцип
действия…</p>
 </figcaption>
 </figure>
time
 позволяет однозначно кодировать время и

дату по грегорианскому календарю с
учетом всех возможных смещений часовых
поясов. Состоит данный тэг из т.н.
«считываемой» части и контентной.
 <time datetime=2017-09-27>27 сентября

2017</time>
time
 <time>11:00</time>
 <time datetime=2017-09-27Т11:00Z>
или
 <time datetime=2017-09-27Т11:00+02:00>
 <time datetime=2017-09-27Т11:00z
pubdate>
video
 video — служит для простой вставки видео

на страницы сайта.
 То есть, код вставки может быть до
безобразия простым:
 <video src=kinoshka.ogv></video>
 можно добавить либо автозапуск
(autoplay), либо элементы управления
(controls)
video
Также можно добавить размеры окна

проигрывателя в пикселах и картинку-
заставку (poster). Выглядеть это может так:
<video src=kinoshka.ogv width=600

height=400 poster=kinoshka.jpg
controls></video>
audio
 Для вставки медиа-контента сайта
 <audio src=pestnya.ogg controls></audio>
 Opera и FF — ogv и ogg, Safari — H.246 и

MP3, а Google Chrom — и тех и других
Тег source
<video controls>
<source src=kinoshka.ogv type='video/ogg;
codecs="theora, vorbis"'>
<source src=kinoshka.mp4 type='video/mp4;
codecs="avcl.42E01E, mp4a.40.2"'>
</video>
canvas
Элемент canvas предоставляет посетителям

сайта интерфейс для двумерного рисования:
линии, заливки, формы, текст и пр. Вот
отличный пример — Harmony.
<canvas width="600 height=400></canvas>
<script type="text/javascript">
var ctx = document.querySelector('canvas')
getContext('2d');
ctx.fillRect (10, 20, 50, 50);
</script>
Подвал сайта — Footer
Может располагаться имя автора, дата

документа, контактная и правовая
информация
 

 <footer>
 <p class="copyright">© 2017 Rightblog.ua
Copyright</p>
 </footer>
Проверка HTML-страницы
 Для проверки структуры страницы можно

использовать инструмент HTML5 outliner.
Он показывает структуру страницы блокам
и заголовкам.
 https://gsnedders.html5.org/outliner/
Домашнее задание
Создать сайт «Как провести интернет в

МАУБ» , состоящий из четырёх страниц
(index.html, foto.html, sposob.html,
contacts.html).
На главной странице отобразить свою
историю поступления в МАУБ, жизнь в
МАУБ (участие в мероприятиях, участие в
конференциях, награды и т.п.)
Домашнее задание
На странице фотогалерея добавить 5-6

фотографий, связанных с вашей учёбой в
МАУБ.
На третьей странице отобразить возможные
и невозможные)) способы подключения
Интернет в МАУБ (ваша фантазия)
На странице контактов отобразить контакты
интернет провайдеров Запорожья,
отображенных на странице фотогалереи.

Введение в HTML

Загружено:

Сведения о документе

Описание:

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Описание:

Авторское право:

Доступные форматы

Введение в HTML

Загружено:

Описание:

Авторское право:

Доступные форматы

Введение в HTML

Что такое браузер

URL (Uniform Resource Locator) — единый

1. Формирует и отправляет запрос на сервер

Как сервер отвечает на запросы, определяет

HTML документ, полученный с сервера,

Именно такую информацию браузер должен

HTML является стандартным

— Cоздавался как язык для обмена научной и

Просто текст в HTML-документе браузер никак не

Стандарт поддерживается Консорциумом

Схема парного тега:

теги отвечающие за создание HTML-

<head> </head> — голова HTML-

<body> </body> — тело HTML-документа.

<link> — подключает внешние

<article> </article> — обрамляют основной

 Создаем папку с названием нашего проекта,

 <! DOCTYPE html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2

Категории контента: потоковое содержимое.

 Оформление главной навигации по сайту

<!-- Главная Навигация по сайту --<nav>

Основное содержимое страницы

Тег article — служит для обертки статей. В

В него могут входить как блоки nav, так и

 Используется для представления группы или

 <h1>An Event Apart</h1>

 hgroup — тэг призван группировать

 Обычно в него помещается самодостаточная

 позволяет однозначно кодировать время и

 <time datetime=2017-09-27>27 сентября

 video — служит для простой вставки видео

Также можно добавить размеры окна

<video src=kinoshka.ogv width=600

 Для вставки медиа-контента сайта

 <audio src=pestnya.ogg controls></audio>

 Opera и FF — ogv и ogg, Safari — H.246 и

Элемент canvas предоставляет посетителям

Может располагаться имя автора, дата



 Для проверки структуры страницы можно

Создать сайт «Как провести интернет в

На странице фотогалерея добавить 5-6

Вам также может понравиться