Как называется указание к оформлению разметки веб страницы на языке html напишите ответ

HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки»;) — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.

HTML – язык разметки гипертекста (HyperText Markup Language).
Гипертекст
– текст + ссылки для автоматического перехода (гиперссылки).
Разметка
– указания к оформлению и расположению текста и других
элементов на странице.

HTML = гипертекст + теги разметки

Тег (tag) заключается в угловые скобки <...>.
Область действия тега – между открывающим и закрывающим тегами.
Открывающий тег может содержать параметры.
Закрывающий тег начинается с символа слеш
</...>.
Регистр при написании имен тегов и параметров не важен.
Тег неизвестный браузеру – игнорируется.

Вложенные теги: Теги могут вкладываться друг в друга как матрешки. Вложенный тег должен заканчиваться до закрытия внешнего.

`<font size="+3">большой текст <b>полужирный</b></font>`	— правильно
`<font color="#BB0000">красный текст <b>добавим жирности</font> не красный</b>`	— не правильно

Пробелы, разрыв строки, комментарии

Внутри документа HTML (web-страницы):

Несколько пробелов или несколько новых строк игнорируются — считаются
за один пробел.
Для указания новой строки используйте тег разрыва строки <br>.
Текст, заключенный в блок (<p>...</p>,
<h1>...</h1> и т.д), автоматически начинается
с новой строки.
Пропускаются текст и теги внутри комментария: .
Только текст в пердварительно форматированном блоке (<pre>...</pre>)
отображается «как есть», т.е. со всеми пробелами и разрывами
строк.

Структура web-страницы

Первым идет необязательный тег <!DOCTYPE...,
задющий формат документа: html, xml и их версию.

Тег <html>...</html> определяет
границы HTML-документа, который делится на голову — <head>...</head>
и тело — <body>...</body>.

Между <head>...</head> задаются общие свойства
документа, например, текст заголовка <title>...</title>,
дополнительная информация <meta> (в частности тип
документа и кодировка <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">), данные
для поисковых серверов и т.д.

Внутри тега <body>...</body> собственно и
пишется визуальная часть документа.

Дополнительные стили шрифтов

HTML позволяет использовать различные стили шрифтов для выделения
текстовой информации в html-документах. В следующей таблице список стилей,
поддерживаемых большинством броузеров:

Тэг	Описание	Пример использования	Результат
b	Тэг `<b>` определяет, что содержащийся в нем текст должен быть отображен жирным (bold) шрифтом	<b> Этот текст жирный </b>	Этот текст жирный
i	Тэг `<i>` определяет, что содержащийся в нем текст должен быть отображен курсивом (italic)	</i> Этот текст наклонный </i>	Этот текст наклонный
tt	Тэг `<tt>` определяет, что содержащийся в нем текст должен быть выведен шрифтом с фиксированным размером знакоместа (monospaced)	<tt> Этот текст с непроп. шрифтом </tt>	Этот текст с непроп. шрифтом
big	Тэг `<big>` определяет, что содержащийся в нем текст должен быть выведен шрифтом, большим чем основной	Этот шрифт <big>больше</big>, чем основной	Этот шрифт больше, чем основной
small	Тэг `<small>` определяет, что содержащийся в нем текст должен быть выведен шрифтом, меньшим чем основной.	Этот шрифт <small>меньше</small>, чем основной	Этот шрифт меньше, чем основной

Про написание спецсимволов вы сможете узнать подробнее здесь

Основные цвета

Color’s name	Название	Red	Green	Blue
black	черный	00	00	00
navy	темно-синий	00	00	80
blue	синий	00	00	FF
green	зеленый	00	80	00
teal	сине-зеленый	00	80	80
lime	ярко-зеленый	00	FF	00
aqua	голубой	00	FF	FF
maroon	вишневый	80	00	00
purple	фиолетовый	80	00	80
olive	оливковый	80	80	00
gray	темно-серый	80	80	80
silver	светло-серый	C0	C0	C0
red	красный	FF	00	00
fuchsia	лиловый	FF	00	FF
yellow	желтый	FF	FF	00
white	белый	FF	FF	FF

Источник: http://shkolo.ru/html-yazyik-razmetki-giperteksta/

Источник

Инструменты для разработки веб-сайтов

Avatar

26.03.2020.
Тест. Информатика, 11 класс

Будьте внимательны! У Вас есть 10 минут на прохождение теста. Система оценивания — 5 балльная. Разбалловка теста — 3,4,5 баллов, в зависимости от сложности вопроса. Порядок заданий и вариантов ответов в тесте случайный. С допущенными ошибками и верными ответами можно будет ознакомиться после прохождения теста. Удачи!

Список вопросов теста

Вопрос 1

Что такое поисковый робот?

Варианты ответов

Программа, пополняющая поисковый указатель
Сортировщик страниц поискового каталога
Программа для поиска людей в социальных сетях
Разновидность поискового сервера

Вопрос 2

Укажите разновидности html-редакторов.

Варианты ответов

Браузеры
Провайдеры
Редакторы исходного кода
Визуальные html-редакторы

Вопрос 3

При помощи какого языка пишется разметка веб-страниц?

Варианты ответов

PHP
HTTP
HTML
FTP

Вопрос 4

Укажите преимущества визуальных HTML-редакторов, по сравнению с редакторами исходного кода при оформлении веб-страниц?

Варианты ответов

Можно не знать язык разметки гипертекста
Более рациональное написание кода
Сразу виден результат работы
Проверка правильности кода

Вопрос 5

Как иначе называются визуальные html-редакторы?

Варианты ответов

Веб-редакторы
Тег-редакторы
Ручные редакторы
WYSIWYG-редакторы

Вопрос 6

Как называется параметр тега в языке HTML?

Вопрос 7

При помощи каких программ можно создавать веб-страницы на языке разметки гипертекста?

Варианты ответов

Текстовые редакторы
Редакторы исходного кода
Среды программирования
Графические редакторы

Вопрос 8

Как называется указание к оформлению разметки веб-страницы на языке HTML?

Вопрос 9

Укажите преимущества редакторов исходного кода перед текстовыми редакторами при создании веб-страниц?

Варианты ответов

Возможность сразу видеть результат
Можно не знать язык разметки гипертекста
Готовые шаблоны кода
Проверка правильности кода

Вопрос 10

Укажите недостатки визуальных HTML-редакторов.

Варианты ответов

Требуют знания большого количества тегов
Большой объем веб-страниц
Нерациональная генерация кода
Создание веб-страниц занимает много времени

Источник

В основе Интернета лежит язык разметки HTML. В этой статье мы рассмотрим основы HTML.

Содержание

1. Что такое HTML?
2. Минимальная веб-страница
3. Структура веб-страницы
4. Таблицы
5. Блоки, аудио и видео
6. Цвета
7. Формы

1. Что такое HTML?

Язык HTML (HyperText Markup Language — язык разметки гипертекста) — это язык для обозначения элементов веб-страницы. Это не язык программирования, поэтому любой может его освоить. Суть языка в том, что нужно исходный текст разметить специальными метками — тегами.

Например, тег параграфа выглядит так:

В данном примере мы разметили текст тегом p. В начале стоит открывающий тег <p>, а в конце — закрывающий тег </p>.

Каждый тег обозначается некоторым кодом. Обычно тег начинается знаком «<код параметры>» и заканчивается знаком «</код>». Существуют теги без закрывающего знака.

Стандарт HTML: https://www.w3.org/TR/html52/

В тегах можно указывать параметры. Например, текст, выровненный влево, выглядит так:

<p align=»left»>Пример текста</p>

Пробелы в HTML сокращаются до одного пробела. Переводы строк игнорируются.

Чаще всего используются следующие теги:

<b> — полужирный текст
<i> — курсив
<br> — перевод строки
<hr> — горизонтальная линия

<a> — ссылка
<pre> — форматированный текст

<ins> — добавленный текст
<del> — удаленный текст

Существует шесть уровней заголовков: с <h1> по <h6>.

<h1>Заголовок уровня 1</h1>

<h2>Заголовок уровня 2</h2>

<h3>Заголовок уровня 3</h3>

<h4>Заголовок уровня 4</h4>

<h5>Заголовок уровня 5</h5>

<h6>Заголовок уровня 6</h6>

Результат будет выглядеть так:

2. Минимальная веб-страница

Создание веб-страницы на HTML называется версткой. А человек, который верстает страницы называется верстальщиком. Верстка имеет свои правила и сейчас мы начнем с ней знакомиться.

Чтобы создать минимальную веб-страницу достаточно в любом текстовом редакторе написать следующий текст:

<!DOCTYPE html>

<head>

<title>без имени</title>

</head>

<body>

</body>

</html>

Этот текст нужно сохранить с именем index.html.

Рекомендую использовать для этого редактор Geany. В этом редакторе есть шаблон для HTML5.

После этого веб-страницу можно открыть в любом браузере.

Строки минимальной веб-страницы означают следующее:

<!DOCTYPE html> — стандарт HTML5

<html lang=»ru»> — язык страницы русский

<head></head> — техническая информация о веб-странице

<title>без имени</title> — Заголовок веб-страницы

<body> </body> — тело веб-страницы

</html> — завершение веб-страницы

3. Структура веб-страницы

Для указания на структуру используются теги:

<header> — шапка документа
<nav> — навигация по сайту
<article> — статья
<aside> — боковая панель
<footer> — подвал

Эти теги позволяют поисковым системам более точно определять семантику сайта.

4. Таблицы

Таблица задается тегами:

<table> — общий контейнер
<tr> — строка
<td> — ячейка
<th> — заголовок столбца
<caption> — название таблицы

Простая таблица выглядит так:

<table> — начало таблицы

<tr> — начало первой строки

<td>Ячейка 1</td>

<td>Ячейка 2</td>

<td>Ячейка 3</td>

</tr> — конец первой строки

<tr> — начало второй строки

<td>Ячейка 4</td>

<td>Ячейка 5</td>

<td>Ячейка 6</td>

</tr> — конец второй строки

</table> — конец таблицы

Текст без комментариев выглядит так:

<table>

<tr>

<td>Ячейка 1</td>

<td>Ячейка 2</td>

<td>Ячейка 3</td>

</tr>

<tr>

<td>Ячейка 4</td>

<td>Ячейка 5</td>

<td>Ячейка 6</td>

</tr>

</table>

Сама таблица будет выглядеть так:

5. Блоки, аудио и видео

До HTML5 использовалась табличная верстка. При этом вся веб-страница представляла собой большую таблицу, а отдельные элементы размещались в ячейках.

В HTML5 рекомендуется так называемая блочная верстка. Для работы с ней используются два тега:

<div> — блочный элемент
<span> — строчный элемент.

По умолчанию блочные элементы начинаются с новой строки и заполняют весь контейнер, а строчные могут начинаться в любом месте строки и заканчиваются после контента.

Таблицы используются только для вывода табличных данных.

Размещение аудио.

Видео из файла.

Ролик на YouTube

allow=«accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture» allowfullscreen> 

</iframe>

6. Цвета

В HTML цвет можно указать как значение RGB, используя следующую формулу:

RGB (красный, зеленый, синий)

Каждый параметр определяет интенсивность цвета от 0 до 255.

Например:

rgb (255, 0, 0) — красный.
rgb (0, 0, 0) — черный.

Цветовые значения RGBA являются расширением цветовых значений RGB с альфа-каналом, который определяет непрозрачность для цвета.

Стандартные названия цветов: https://colorscheme.ru/html-colors.html

7. Формы

Формы используются для получения данных от пользователя. Тег form является контейнером для управляющих элементов.

Пример простой формы:

Имя:<br>

Фамилия:<br>

</form>

Для получения данных используется тег <input>:

флажки <input type=»checkbox»>
радиокнопки — <input type=»radio»>
ввод текста — <input type=»text»>
пароль — <input type=»password»>
отправить форму — <input type=»submit»>

и многое другое.

Полный список здесь:

https://developer.mozilla.org/ru/docs/Web/HTML/Element/input

Поля формы можно разделять на логические блоки с помощью элемента <fieldset>. Каждому разделу можно присвоить название с помощью элемента <legend>.

Обязательные для заполнения поля обозначаются атрибутом required. В полях выбора можно сразу установить выбор атрибутом checked.

Для создания больших текстовых полей применяется элемент <textarea>. Размеры поля устанавливаются с помощью атрибутов cols и rows. В поле можно использовать замещающий текст placeholder, который исчезает, как только пользователь начинает ввод текста.

Пример формы с группировкой данных:

<legend>Личная информация:</legend>

Имя:<br>

Фамилия:<br>

</fieldset>

<legend>Ввод пароля:</legend>

Введите пароль:<br>

Повторите пароль:<br>

</fieldset>

<legend>Интересы:</legend>

<p>Любимые музыкальные жанры</p>

<ol>

<li><input type=«checkbox» name=«musik» value=«кантри»>Кантри</li>

</ol>

<p>Хобби</p>

<option selected value=«1»>Спорт</option>

<option value=«2»>Рыбалка</option>

<option value=«4»>Животные</option>

<option value=«5»>Путешествия</option>

<option value=«6»>Танцы</option>

<option value=«7»>Театр</option>

</select>

</fieldset>

</form>

Когда пользователь заполнил форму и нажал “Отправить”, данные отправляются на сервер и обрабатываются (как правило, на языке PHP). После этого пользователю выдается веб-страница с результатами обработки. В минимальном варианте данные формы можно отправить на Email.

Также можете прочитать хорошую статью по HTML на английском:

Learn HTML Free in [2022] – Basic HTML Codes for Beginners

Источник

Теги разметки страницы

Данная статья учебника посвящена такой теме как разметка страницы, рекомендую Вам максимально внимательно, а лучше несколько раз перечитать ее. Это связано с тем, что если вы поймете эту тему, то вы сможете без проблем создать каркас будущего сайта, что по большому счету и является главной целью этого учебника и языка гипертекстовой разметки.

Теги <div> и <span> представляют из себя универсальные пустые контейнеры, которые необходимо заполнить каким-либо содержанием, либо сгруппировать вложенные элементы для их дальнейшей стилизации средствами CSS, и при необходимости динамически манипулировать ими с использованием скриптов, например, на таком языке программирования как Javascript.

Обращаю Ваше внимание на то, что элементы <div> и <span> сами по себе не оказывают никакого влияния на другие элементы страницы.

Тег <div> определяет любой отдельный блок содержимого и предназначен для деления веб-страницы на фрагменты. Вы можете объединить любой набор логически связанных элементов в единственном блоке <div>.

Этот элемент является блочным и это означает, что его содержимое всегда будет начинаться с новой строки, при этом элемент занимает всю доступную ширину. Не так давно, этот элемент занимал абсолютный топ, посвященный делению страницы на логические составляющие, но с приходом HTML 5 было добавлено достаточно семантических элементов, которые позволяют в некоторых ситуациях заменить тег <div> на более осмысленный, но об этом чуть позднее.

В отличии от блочного элемента <div> тег <span> является строчным и применяется к внутренним (inline) элементам страницы, то есть к словам, фразам, которые находятся в пределах абзаца или небольшого фрагмента текста, оглавления и тому подобное.

Тег <span> вы можете использовать для таких задач как:

Выделение участка текста определённым цветом, фоном или даже фоновым изображением.
Изменение отдельным словам или фразам размера шрифта, семейства шрифта или типа шрифта.
Создание различных форматирующих стилей для выбранного участка текста.
Использование скриптовых языков программирования к выбранным текстовым участкам, например подсветка синтаксиса кода и так далее.

Пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Теги <div> и <span></title>
	</head>
	<body>
		<div style = "color:green">
			<p>Абзацы мы объединили тегом &lt;div&gt;, а это <span style = "color:red">слово</span> мы заключили тегом &lt;span&gt;.</p>
			<p>С помощью встроенной таблицы стилей мы выделили это слово красным цветом, а блок текста получил зеленый цвет.</p>
		</div>
		<div style = "background-color:khaki">
			<p>Обратите внимание, что тег &lt;div&gt; является блочным и это означает, что его содержимое всегда будет начинаться с новой строки, при этом элемент занимает всю доступную ширину.</p>
			<p>Этот блок тоже содержит два абзаца. С помощью встроенной таблицы стилей мы указали для всего блока цвет заднего фона - khaki, а для этога <span style = "background-color:orangered">слова</span> orangeRed (мы заключили его в тег &lt;span&gt;).</p>
		</div>
	</body>
</html>

В этом примере мы:

Блочными элементами <div> создали два блока, содержащие по два абзаца текста внутри (элементы <p>).
Для первого блока с помощью встроенной таблицы стилей мы указали, что все элементы получат цвет текста зеленый, а одно слово, которое мы поместили внутри тега <span> красный.
Для второго блока с помощью встроенной таблицы стилей мы указали, что весь блок получит цвет заднего фона хаки, а одно слово, которое мы поместили внутри тега <span> оранжево-красный.

Результат нашего примера:

Рис. 42 Использование тегов разметки в HTML.

Тег <div> имеет довольно общий характер — это просто элемент на уровне блока, используемый для разбиения страницы на разделы. Одна из целей HTML 5 заключается в предоставлении в распоряжение разработчиков широкого выбора из других, семантически более осмысленных тегов.

Рис. 43 Человек, который использует только тег <div>.

HTML 5 включает в себя множество различных тегов, чьи имена отражают тип их содержимого, и эти теги могут использоваться вместо тега <div>. HTML 5 предлагает новые блочные семантические элементы для определения различных частей веб-страницы, давайте их детально рассмотрим.

Тег <header>

Тег <header> html5 (верхний колонтитул) является признаком верхнего колонтитула или баннера верхней части страницы, которая обычно содержит логотип (иконка), навигацию, относящуюся ко всему сайту, форму поиска по сайту, заголовок страницы с подзаголовком, авторскую информацию и так далее. Допускается размещать несколько элементов <header> html5 в одном документе.

<header>
		<img src = "logo.png" alt = "logo"> <!-- изображение с логотипом -->
		<h1>Заголовок первого уровня</h1> <!-- заголовок первого уровня -->
</header>

Рис. 43а Пример размещения тега <header> на странице.

Обращаю Ваше внимание, что запрещается помещать элемент <header> html5 внутрь таких элементов, как <footer> html5 (нижний колонтитул), <address> html5 (определяет контактную информацию) или внутрь другого элемента <header> html5 .

Тег <nav>

Тег <nav> html5 (навигация) используется для обозначения содержимого в виде основных навигационных ссылок.
Документ может иметь несколько элементов <nav> html5 , например, один для навигации по сайту, а второй для навигации по странице.

<nav> <!-- начало навигации -->
	<ul> <!-- маркированный список -->
		<li><a href = "#">Домой</a></li> <!-- ссылка в элементе списка -->
		<li><a href = "#">HTML</a></li> <!-- ссылка в элементе списка -->
		<li><a href = "#">CSS</a></li> <!-- ссылка в элементе списка -->
	</ul> <!--конец списка-->
</nav> <!-- конец навигации -->

Рис. 43б Пример размещения тега <nav> на странице.

Обратите внимание, что не все ссылки в документе следует помещать внутрь тега <nav> html5 , элемент предназначен только для крупных навигационных блоков.
Не используйте элемент <nav> html5 внутри тега <footer> html5 (нижний колонтитул).
Программы чтения с экрана для пользователей с ограниченными возможностями, могут использовать этот элемент, чтобы определить, нужно ли опустить начальную визуализацию этого содержимого.

Тег <aside>

Тег <aside> html5 (отступление) предназначен для обозначения содержимого, относящегося к окружающему этот тег содержимому.
Элемент <aside> html5 представляет собой раздел страницы с контентом, который может рассматриваться отдельно от основного содержания. В этих разделах часто размещаются боковые колонки, рекламный контент, биографические данные, веб-приложения, информация о профиле пользователя, пометки на полях в печатном журнале и так далее.

<article> <!-- начало статьи -->
	<p>Сегодня мы с семьей пересматривали фильм "Один дома 2"...</p>
		<aside> <!-- отступление (выносим информацию, например, на поля) -->
			<p>В одной из сцен фильма снялся будущий президент <abbr title = "Соединенные штаты Америки">США</abbr> - <i>Дональд Трамп</i></p>
		</aside> 
</article> <!-- конец статьи -->

Рис. 43в Пример размещения тега <aside> на странице.

Тег <article>

Тег <article> html5 (статья) применяется для обозначения раздела страницы, содержащего завершенную, независимую композицию. Данный элемент может содержать в себе такую информацию как запись блога, товар в интернет-магазине, пост на форуме, газетная статья, любой другой независимый элемент содержимого или просто основной текст страницы.

Элемент должен иметь в качестве дочернего (вложенного) элемента заголовок от <h2> до <h6> (если до этого не использовался <h1>, то допускается его разовое размещение).
Внутри тега <article> html5 могут содержаться другие одноименные элементы с близким по смыслу содержимым.

<article> <!-- начало основной статьи -->
	<h1>Статьи о птицах</h1><!-- заголовок первого уровня (если был использован в документе, то h2, а во вложенных h3) -->
	<p>Вводная информация о птицах...</p>
	<article> <!-- начало первой вложенной статьи -->
		<h2>Статья о воробье</h2> 
		<p>Информация про воробьев...</p>
	</article> <!-- конец первой вложенной статьи -->
	<article> <!-- начало второй вложенной статьи -->
		<h2>Статья о синице</h2>
		<p>Информация про синиц...</p>
	</article><!-- конец второй вложенной статьи -->
</article> <!-- конец основной статьи -->

Рис. 43г Пример размещения тега <article> на странице.

Тег <section>

Тег <section> html5 (раздел) служит для группировки взаимосвязанного содержимого.

Не используйте элемент <section> html5 в качестве универсального контейнера, для этих целей подходит элемент <div>. Раздел должен логически отображать структуру документа, например, вы можете разбить содержимое главной страницы на три раздела: вводную информацию о сайте, контактную информацию и самые последние новости.

Данный тег часто используется при верстке целевых страниц (англ. landing page, «посадочная страница») для логического разделения страницы на разделы.

Элемент должен иметь в качестве дочернего (вложенного) элемента заголовок от <h2> до <h6> (если до этого не использовался <h1>, то допускается его разовое размещение).

<section> <!-- начало первой вложенной статьи -->
	<h2>Первый раздел</h2> 
	<p>Информация внутри раздела</p>
</section> <!-- конец первой вложенной статьи -->
<section> <!-- начало второй вложенной статьи -->
	<h2>Второй раздел</h2>
	<p>Информация внутри раздела</p>
</section><!-- конец второй вложенной статьи -->

Рис. 43д Пример размещения тега <section> на странице.

Совместное использование тегов <section> и <article>

Обратите внимание, что допускается в качестве дочернего (вложенного) элемента тега <article> html5 использовать тег <section> html5 (раздел), как бы разбивая по смыслу содержимое.
При этом необходимо, чтобы элемент <article> html5 и вложенные элементы <section> html5 имели в качестве дочернего (вложенного) элемента заголовок от <h2> до <h6> (если до этого не использовался <h1>, то допускается его разовое размещение внутри <article> html5 ).

Рис. 43е Пример размещения тега <section> внутри <article>.

По аналогии с вышерассмотренным примером допускается помещать элементы <article> html5 внутрь элементов <section> html5 , формируя при этом разделы с тематической информацией.
При этом на элементы действуют те же правила по размещению заголовков:

Рис. 43ж Пример размещения тега <article> внутри <section>.

Допускается помещать элементы <section> html5 (раздел) в другие элементы <section> html5 , но при этом рекомендуется учитывать следующую структуру документа:

<body>
	<h1>Заголовок первого уровня</h1>
	<section>
		<h2>Заголовок второго уровня</h2>
		<section>
			<h3>Заголовок третьего уровня</h3> 
		</section>
	</section>

Тег <footer>

Тег <footer> html5 (нижний колонтитул) содержит информацию, которая обычно помещается в нижнем колонтитуле страницы, например сведения об авторских правах, другую правовую информацию, некоторые ссылки для навигации по сайту и тому подобное.

Обращаю Ваше внимание, что на количество тегов <footer> html5 на одной странице ограничений не накладывается, вы можете, допустим, поместить нижний колонтитул внутри тега <article> html5 , чтобы хранить в нем информацию, относящуюся к статье, например сноски, ссылки или выписки.

<body>
	<h1>Важный заголовок</h1> 
	<article> <!-- начало первой статьи -->
		<h2>Статья о бытие</h2> 
		<p>Информация про бытие...</p>
		<footer>Сноски, ссылки и тому подобное <!-- "подвал" статьи -->
			<address>Информация об авторе статьи</address>
		</footer>
	</article><!-- конец первой статьи -->
	<article> <!-- начало второй статьи -->
		<h2>Статья о бытие 2</h2> 
		<p>Информация про бытие 2...</p>
		<footer>Сноски, ссылки и тому подобное <!-- "подвал" статьи -->
			<address>Информация об авторе статьи</address>
		</footer>
	</article> <!-- конец второй статьи -->
	<footer>сведения об авторских правах, навигация по сайту, счетчики... <!-- "подвал" сайта -->
		<address>Контактные данные автора сайта</address>
	</footer>
</body>

Рис. 43з Пример размещения тега <footer> на странице.

Тег <main>

Тег <main> html5 предназначен для основного содержимого документа (основной контент).
Контент внутри элемента должен быть уникальным для всего документа и не должен содержать элементы, которые повторяются в различных документах (боковые панели, навигационные ссылки, информация об авторских правах, логотип сайта, формы поиска и тому подобное).
Допускается использование элемента только один раз в одном документе.

Рис. 43и Пример размещения тега <main> на странице.

Обращаю Ваше внимание, что тег <main> html5 не должен быть потомком таких блоков как (не должен быть вложен в них):

Разметка для сайта на HTML 5

Давайте закрепим полученные знания на примере, и сделаем простую разметку для сайта, используя современный стандарт гипертекстовой разметки HTML 5.

Хочу сразу оговориться, что в этом примере будет использовано CSS свойство, которое позволяет сделать элемент плавающим — содержимое, которое находится ниже плавающего элемента, смещается вверх и начинает обтекать этот плавающий элемент.
Не переживайте если вы сейчас не поймете работу этого свойства, так как нас сейчас больше интересует правильная разметка документа, а подробное изучение плавающих элементов будет рассмотрено в учебнике CSS в статье «Плавающие элементы».

<!DOCTYPE html>
<html>
	<head>
		<title>Разметка страницы</title>
	</head>
	<body>
		<header style = "background-color:khaki; height:100px">
			<p>Верхний колонтитул (тег <header>)</p>
		</header>
		<nav style = "background-color:coral; height:75px">
			<a href = "#">Ссылка 1</a> |
			<a href = "#">Ссылка 2</a> |
			<a href = "#">Ссылка 3</a> |
		<p>Панель навигации (тег <nav>)</p>
		</nav>
		<aside style  = "float:right; width:200px; height:250px; background-color:tan">
			<p>Справа мы разместили тег <aside></p>
		</aside>
		<main style = "height:250px">
			<h1>Главный заголовок сайта</h1>
			<p>Основное содержимое (тег <main>)</p>
			<section style = "background-color:grey; height:75px">
				<h2>Заголовок второго уровня</h2>
				<p>Раздел 1 (тег <section>)</p>
			</section>
			<section style = "background-color:grey; height:75px">
				<h2>Заголовок второго уровня</h2>
				<p>Раздел 2 (тег <section>)</p>
			</section>
		</main>
		<footer style = "background-color:khaki; height:80px">
			<p>Нижний колонтитул (подвал) тег <footer></p> 
			<address>Пример с сайта basicweb.ru</address>
		</footer>
	</body>
</html>

Обратите внимание, что практически к каждому элементу для демонстрации мы применили встроенный CSS стиль, применение встроенных стилей не
является хорошей практикой, научиться грамотно применять стили вы можете после изучения языка HTML 5 в Учебнике CSS 3.

И так по порядку, что мы сделали в этом документе:

Для элемента <header> (верхний колонтитул) мы задали цвет заднего фона khaki и установили высоту элемента равную 100 пикселям.
Следующим на странице мы разместили элемент <nav> (навигация), для которого задали те же встроенные CSS свойства, но указали цвет заднего фона coral, а высоту элемента 75 пикселей.
Далее мы разместили элемент <aside>, который мы сделали плавающим и сместили в правую сторону (CSS свойство float со значением right), задали ему цвет заднего фона (tan), ширину (200 пикселей) и высоту (250 пикселей). Как вы можете заметить другие элементы его обтекают, не смотря на то, что они блочные. Таким образом происходит верстка плавающими элементами.
Добавили на страницу элемент <main> в который мы добавили заголовок первого уровня (тег <h1>). Прдеполагается, что внутри этого элемента будет содержаться основной контент.
Внутри элемента <main> мы добавили два тематических раздела (тег <section>), поместили внутри этих элементов заголовки второго уровня (тег <h2>), задали им цвет заднего фона grey и высоту блоков по 75 пикселей.
После основного содержимого мы разместили элемент <footer> (нижний колонтитул), по аналогии с предыдущими элементами задали ему цвет заднего фона (khaki) и высоту (80 пикселей). Внутри него разместили тег <address>, в котором указали контактные данные, которые по умолчанию отображаются курсивом.

Результат нашего примера:

Рис. 44 Разметка страницы на HTML 5.

Разметка иллюстраций в HTML 5

Тег <figure> html5 применяется для обозначения контента, иллюстрирующего или поддерживающего определенную идею текста.
Тег <figure> html5 может содержать изображение, видеоролик, схему, фрагмент кода, диаграмму или даже таблицу — почти все, что может встретиться в потоке веб-контента и должно восприниматься как автономная единица.

Благодаря тегу <figcaption> html5 вы можете вывести пояснение к содержимому, которое находится внутри тега <figure> html5 .
Тег <figcaption> html5 должен размещаться как первый, или последний элемент внутри тега <figure> html5 .

Давайте рассмотрим пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <figure></title>
	</head>
	<body>
		<main>
			<figure>
				<img src = "10.jpg" alt = "ничоси" width = "80" height = "80">
				<figcaption>Ничоси 1</figcaption>
			</figure>
			<figure>
				<img src = "10.jpg" alt = "ничоси" width = "80" height = "80">
				<figcaption>Ничоси 2</figcaption>
			</figure>
		</main>
	</body>
</html>

В этом примере основное содержимое документа поместили внутри тега <main> html5 , в который мы поместили
два элемента <figure> html5 , каждый из которых содержит внутри себя изображение (тег <img>) шириной и высотой 80 пикселей. Кроме того тегом <figcaption> html5 мы вывели текстовое пояснение к содержимому каждого элемента <figure> html5 . Элемент <figcaption> html5 мы разместитили перед закрывающим тегом </figure>.

Результат нашего примера:

Рис. 45 Разметка изображений в HTML 5.

Обратите внимание, что если вы разместите элемент <figcaption> html5 первым вложенным элементом тега <figure> html5 , то пояснение будет отображаться сверху изображения:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <figcaption></title>
	</head>
	<body>
		<main>
			<figure>
				<figcaption>Ничоси 1</figcaption>			
				<img src = "10.jpg" alt = "ничоси" width = "80" height = "80">
			</figure>
			<figure>
				<figcaption>Ничоси 2</figcaption>
				<img src = "10.jpg" alt = "ничоси" width = "80" height = "80">
			</figure>
		</main>
	</body>
</html>

Результат нашего примера:

Рис. 46 Пример использования тега <figcaption>

Скрытие содержимого в HTML 5

В заключение статьи, для расширения вашего кругозора хочу познакомить Вас с двумя последними элементами, добавленными в HTML 5. В настоящее время эти элементы поддерживаются всеми браузерами за исключением Internet Explorer и Edge.

Тег <details> html5 определяет дополнительные детали, которые пользователь может отобразить или скрыть. Данный тег может быть использован для создания интерактивных виджетов в будущем, которые пользователь может открывать и закрывать, т.к. внутри тега можно разместить любой контент. Содержание в <details> html5 отображается для пользователя только если логический атрибут open html5 установлен.

Тег <summary> html5 определяет видимый заголовок для тега <details> html5 . Если элемент не используется, то устанавливается значение браузера по умолчанию (как правило, заголовок «Подробнее»).

Пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <details> и <summary></title>
	</head>
	<body>
		<details>
			<summary>Показать ? </summary>
			Пожалуйста <img src = "10.jpg" alt = "ничоси" width = "80" height = "80">
			<details>
				<summary>Ещё? </summary>
				<img src = "10.jpg" alt = "ничоси" width = "80" height = "80">
			</details>
		</details>
	</body>
</html>

В этом примере мы использовали два элемента <details> html5 , один из которых мы поместили внутрь первого, каждый их них скрывает изображение (тег <img>). Кроме того, они имеют различные заголовки, которые заданы с использованием тега <summary> html5 .

Результат нашего примера:

Рис. 47 Пример использование тегов <details> и <summary>.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл и изображение) в любую папку на вашем жестком диске:

Используя полученные знания составьте следующий одностраничный сайт посвященный енотам:

Практическое задание № 25.

Перед тем как приступать, внимательно изучите страницу, которую Вам необходимо будет повторить, открыв пример в отдельном окне.

Подсказка: в примере используются цвета coral и aliceblue.

После того, как вы выполните упражнение, пройдите валидацию документа на сайте W3C, при необходимости исправьте ошибки, а затем проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что результат вашего примера соответствует готовому примеру.

Источник

Статьи

Опубликовано 19.12.2022 16:56

Lego

Оглавление:

Суть понятия.
Зачем изучать + преимущества
Недостатки.
Что можно сделать.
Что нельзя сделать.
Сложность изучения.
Как работает: примеры кода.
Список самых популярных тегов.

HTML (от английского HyperText Markup Language, дословный перевод: «язык гипертекстовой разметки») — это язык разметки, который используется для формирования содержимого страницы. HTML применяется только для оформления структуры веб-страницы. Последовательность взаимодействия браузера с HTML следующая: браузер получает HTML-страницу от сервера, используя протокол HTTP или HTTPS, затем — такой документ интерпретируется в программный интерфейс, который и будет выводиться на конечное пользовательское устройство. Страница HTML создается при помощи базовых элементов HTML (гиперссылки, списки, изображения, символы, текстовые блоки, таблицы). Если за структуру страницы отвечает только HTML, то за нее внешний вид страниц — каскадные таблицы стилей (CSS).

Простыми словами, HTML — это код для структурирования и вывода в браузере содержания определенной веб-страницы.

Категории содержимого элементов HTML

HTML — это язык программирования или нет?

Нет, HTML не является языком программирования. Это язык разметки. Тем не менее, в HTML-коде могут встречаться скрипты, написанные на настоящих языках программирования, например, на JavaScript. Такие скрипты включаются в HTML-документ для задания функциональной составляющей веб-странице, например, для управления содержанием ил поведением её компонентов. Все это происходит при помощи языков программирования, так как сам HTML не позволяет решать эти задачи.

Зачем изучать HTML + преимущества

В 2023 году HTML используется так широко, как не используется ни один другой язык разметки. Пока есть интернет (в привычном нам виде) будет и HTML.

Вот еще 4 причины учить HTML:

Он очень простой. Его легко изучить и просто использовать.
Он может стать первой ступенью к новым знаниям. Язык разметки не просто помогает в изучении основ веб-программирования, он также часто является первой ступенью на пути к «большому» программированию или изучению высокоуровневых языков программирования.
Он поддерживается всеми браузерами.
Он может быть интегрирован с другими языками, такими как CSS, JavaScript.

И три возможности, которые даёт HTML:

Не зависит от платформы. Если устройство использует браузер, значит оно сможет открывать веб-страницы на HTML.
На веб-страницу можно добавлять: изображения, видео и аудио.
В текст можно добавлять гипертекст.

Недостатки HTML

У этого языка разметки есть четыре недостатка:

Можно создавать только статические веб-страницы. Для создания динамических веб-страниц — придётся задействовать другие языки.
Для создания даже простой веб-страницы необходимо написать большое количество кода.
В этом языке разметки есть дыры и уязвимости, так что с точки зрения безопасности — это не на 100 % защищённый вариант.
Нельзя задать функциональность блоку.

Даже элементарный раскрывающийся блок сделать на голом HTML не получится

Что можно сделать на HTML

Можно создать только структуру веб-страницы: заголовки, разделы, ссылки, распределить места для изображений и видео. Ничего большего, например, написать скрипт, на HTML не сделать. И без CSS создать даже элементарные, привычные нам на страницах вещи — не получится. Но можно назначить цвет для текста, например.

Веб-цвета в HTML 4.01

Что нельзя сделать на HTML

Нельзя написать скрипт, задать функциональность определенной кнопке, задать поведение блока при действии пользователя.

Вот ещё несколько сценариев, что нельзя сделать на HTML (без стилей и JavaScript):

Сделать раскрывающееся меню.
Создать подсветку для текста любого цвета.
Сделать диалоговое окно.
Сделать сворачивающееся и раскрывающееся меню.

Даже такую элементарную подсветку без стилей сделать не получится

Сложность изучения

По сравнению с каким-нибудь высокоуровневым языком программирования (например, зыками группы C) изучить HTML — вообще не сложно.

Выучить этот язык разметки можно за пару дней. Другое дело, что HTML в одиночку, без «стилей» (и это как минимум) — никому не нужен. Усвоить вышеуказанный стек за 2 дня уже не получится, понадобится минимум месяц, а то и два. Что касается JavaScript, то на его усвоение уйдёт минимум 4-5 месяцев. Таким образом, усвоить минимальный набор знаний и технологий для HTML можно примерно за полгода, но при достаточно усердном подходе к обучению.

Как работает HTML: примеры кода

Давайте посмотрим, как устроен HTML-документ на конкретном примере.

Любой HTML-документ начинается с указания декларации версии HTML. Этот элемент называется DOCTYPE. Выглядит строка с этим элементом может по-разному, например, вот так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

А в HTML 5, например, тег вообще один:

 <!DOCTYPE html>

В рамках этой статьи мы попробуем разобрать все самые важные элементы и теги HTML. Давайте разберём главные строительные блоки документа на реальном примере.

Вот так выглядит элементарный HTML-документ:

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8">
	<title>Страница сайта</title>
  </head>
  <body>
	<img src="images/pie-icon.png" alt="Пирог">
  </body>
</html>

Теперь посмотрим на основные элементы HTML. Разберем основные теги, которые встретились в примере выше, в том же порядке, что и в самом коде.

— тот самый DOCTYPE о котором мы уже сказали выше. По сути, в 2023 году, он является анахронизмом, который необходим для формального соблюдения правил HTML-документа. А вот в старых версиях HTML в доктайп содержались URL, которые вели на сборник правил для каждого конкретного стандарта HTML.
— это HTML-элемент. Он используется для формирования корня документа. Это элемент верхнего уровня, которому подчиняются все элементы, которые лежат ниже (другими словами, находится внутри него).
— HEAD-элемент. Является элементом метаданных документа, другими словами, он содержит машиночитаемую информацию о конкретном документе, например, о его TITLE, скриптах, кодировке и CSS. Поправка: в элементе-HEAD находится информация, которую видят только поисковые машины. Внутри HEAD-элемента не размещается контент, который должны увидеть посетители сайта на странице.
— BODY-элемент. В теле документа (с тегом BODY) находится непосредственный контент или содержимое HTML-страницы. При этом, в HTML-документе может быть только один боди-элемент. Внутри этого элемента размещается контент, видимый для посетителя веб-страницы. Например: текст и медиафайлы (от изображений до аудио и видео).
— задание кодировки для документа. В нашем случае — использована кодировка UTF-8. Это универсальный вариант и его можно использовать в 98% случаев.
— TITLE-элемент. При помощи него формируется тайтл или заголовок. Такой тайтл мы видим в десктоп-браузере во вкладке страницы:

Заголовок страницы отображает любой браузер

Это были главные элементы HTML. Но мы еще не упомянули изображения. Чтобы вставить изображение в код HTML — необходимо использовать HTML-элемент image. Например, вот так:

<img src="images/pie-icon.png" alt= Пирожок с вишней">

Вот главные атрибуты для элемента изображения в HTML:

src — полный путь до картинки, которая добавляется в документ.
alt — метатег, содержащие альтернативное описание изображения. По сути — это текст, который будет отображаться, если картинка не сможет быть загружена, а также текст, который будут озвучивать скринридеры при открытии страницы.

Использование замещаемого элемента img

Список самых популярных HTML-тегов

Выше мы уже разобрали основные HTML-элементы, которые есть в любом подобном документе. Теперь — сосредоточимся на тегах, которые используются для разметки текста. Это одни из самых важных HTML-элементов и вы должны знать их в любом случае.

Ссылки. Чтобы создать ссылку просто добавьте a-элемент (a — сокр. от слова anchor — «якорь» на английском).

Пример использования якоря (ссылки)

Допустим, мы хотим обернуть в ссылку текст «Фиолетовый страус». Добавляем тег таким образом:

<a>Фиолетовый страус</a>

Теперь добавляем атрибут href (это сокращение от англ. hypertext reference) и указываем ссылку на документ:

<a href="https://www.bird.com/ru/purple-ostrich/">Фиолетовый страус</a>

Особое внимание обращайте на корректный протокол (HTTPS или HTTP) в начале ссылки, иначе ссылка может просто не открыться или открыться с ошибками.

Заголовки. Без заголовков — никуда. Их любят как люди, так и поисковые машины.

Заголовок страницы отображается в сниппете на странице результатов поиска

Если вы не понимаете, как устроены заголовки на веб-странице — подумайте о заголовках и подзаголовках внутри бумажной книги. На странице сайта они выполняют точно такую же роль.

HTML предусматривает шесть уровней заголовков, но, чаще всего, применяются не более 4 уровней.

Разметить заголовки можно при помощи тега h1 (вместо единицы — поставьте ту цифру, уровень заголовка которого вам требуется. Например, вот заголовки четырех уровней:


<h1> Главный заголовок. Он должен быть один на весь документ</h1>
<h2> Заголовок второго уровня </h2>
<h3> Заголовок третьего уровня</h3>
<h4> Заголовок четвертого уровня</h4>

Списки. В HTML вы можете использовать списки для перечислений.

Пример тега списка в коде

Например, у нас есть такой текст:

<p>Фиолетовые страусы важны, ведь их популяция продолжает сокращаться из года в год. Вот лишь некоторые причины, почему мы должны сохранить фиолетовых страусов: они красивые, они полезны, они на грани вымирания...численность фиолетовых страусов должна быть восстановлена</p>

И вот один из способов, как сделать список в HTML:

<p>Фиолетовые страусы важны, ведь их популяция продолжает сокращаться Из года в год. Вот лишь некоторые причины, почему мы должны сохранить фиолетовых страусов</p>
<ul>
  <li>они красивые</li>
  <li>они полезные</li>
  <li>они на грани вымирания</li>
</ul>
<p>численность фиолетовых страусов должна быть восстановлена</p>

Последний элемент текстовой разметки HTML, который мы ещё не рассмотрели — абзац.

Абзац. Добавить его очень просто:

<p>Тег абзаца</p>

Оформлять абзацы в HTML-коде нужно исключительно таким тегом — не нужно ни придумывать ничего нового или дополнительного.

Остались вопросы?

Укажите ваши данные, и мы вам перезвоним

Источник

HTML (язык разметки гипертекста) — это основной строительный блок Интернета. Он определяет значение и структуру веб-контента. Другие технологии, помимо HTML, обычно используются для описания внешнего вида / представления веб-страницы ( CSS ) или функциональности / поведения ( JavaScript ).

«Гипертекст» относится к ссылкам, которые соединяют веб-страницы друг с другом либо в пределах одного веб-сайта, либо между веб-сайтами. Ссылки — это фундаментальный аспект Интернета. Загружая контент в Интернет и привязывая его к страницам, созданным другими людьми, вы становитесь активным участником Всемирной паутины.

HTML использует «разметку» для аннотирования текста, изображений и другого содержимого для отображения в веб-браузере. Разметка HTML включает специальные «элементы», такие как <head> , <title> , <body> , <header> , <footer> , <article> , <section> , <p> , <div> , <span> , <img> , <aside> , <audio> , <canvas> , <datalist> , <details> , <embed> , <nav> , <output> , <progress> , <video> , <ul> , <ol> , <li> и многие другие.

Элемент HTML отделяется от другого текста в документе «тегами», которые состоят из имени элемента, окруженного « < » и « > ». Имя элемента внутри тега нечувствительно к регистру. То есть он может быть написан прописными, строчными буквами или их смесью. Например, <title> может быть записан как <Title> , <TITLE> или любым другим способом. Однако принято и рекомендуется писать теги строчными буквами.

Приведенные ниже статьи помогут вам узнать больше о HTML.

В нашей области обучения HTML есть несколько модулей, которые обучают HTML с нуля — никаких предварительных знаний не требуется.

Введение в HTML: Этот модуль задает тон,знакомя вас с важными концепциями и синтаксисом,такими как применение HTML к тексту,как создавать гиперссылки и как использовать HTML для структурирования веб-страницы.
Мультимедиа и внедрение: Этот модуль изучает,как использовать HTML для включения мультимедиа в ваши веб-страницы,в том числе различные способы включения изображений,и как встраивать видео,аудио и даже целые другие веб-страницы.
HTML tables: Представление табличных данных на веб-странице в понятной и доступной форме может оказаться сложной задачей.Этот модуль охватывает базовую разметку таблиц,наряду с более сложными функциями,такими как реализация подписи и резюме.
HTML forms: Формы являются очень важной частью Web-они обеспечивают большую часть функциональности,необходимой для взаимодействия с веб-сайтами,например,регистрацию и вход в систему,отправку отзывов,покупку товаров и многое другое.Этот модуль поможет вам начать с создания клиентской/внешней части форм.
Использование HTML для решения общих проблем: Предоставляет ссылки на разделы контента,объясняющие,как использовать HTML для решения очень распространенных проблем при создании веб-страницы:работа с заголовками,добавление изображений или видео,подчеркивание контента,создание базовой формы и т.д.

Источник

Скачать материал

Выберите документ из архива для просмотра:

Выбранный для просмотра документ Пр_р_HTML1.doc

Скачать материал

Курс добавлен 16.12.2022

Сейчас обучается 24 человека из 13 регионов

Выбранный для просмотра документ HTML_1.ppt

Скачать материал

Описание презентации по отдельным слайдам:

2 слайд

Hyper
Text
Markup
Language
Язык разметки гипертекста
3 слайд

Цель урока:

Познакомиться со структурой WEB-документа.
Изучить основные команды форматирования WEB-документа.
Узнать, как создавать простейшие WEB-документы.
Получить практические навыки их создания.
4 слайд

Знакомство с языком HTML
Гипертекст – это электронный документ, который содержит гиперссылки на другие документы.
Гипертекстовый документ предназначен для вывода информации на экран компьютера.
Гипертекстовая технология – это технология, базирующаяся на использовании гипертекстовых документов. Ее применяют в компьютерных энциклопедиях и учебных программах, прикладных программах для работы со справочной информацией и для организации доступа к информации в W W W, т.е. при работе с WEB-документами.
WEB-документ – это текст, написанный на языке HTML или другом, который предназначен для просмотра электронной информации на экране компьютера с помощью программы-браузера.
5 слайд

Так как WEB-документ предназначен для просмотра его на компьютере, то желательно, чтобы он помещался целиком на экране. Поэтому WEB-документы называют еще WEB-страницами.
Несколько WEB-страниц на одну тему называют WEB-узлом или WEB-сайтом.
WEB-сайты создают WEB-дизайнеры.
WEB-дизайн – это совокупность правил и рекомендаций, которыми должны руководствоваться авторы, чтобы их сайты были информативными и выглядели привлекательно.
6 слайд

Команды языка HTML называются теги и они записываются в < >. Большинство тегов – парные <html>…</html>

Документ HTML имеет три структурных типа содержимого:
Теги – команды в < >.
Комментарии –пояснения к документу. Они помогают разобраться в его содержании <!— … — >.
Текст – то, что пользователь видит на экране браузера.
Мультимедийные элементы – картинки, звук, видео – не являются частью HTML-документа и хранятся в отдельных файлах. HTML-документ содержит только ссылки на эти файлы в виде тегов.
7 слайд

теги и атрибуты
Каждый тег состоит из имени тега, за которым может следовать список атрибутов (параметров)
<i>
<img src=“dog.gif” width=6>
Атрибуты отделяются от имени тега и друг от друга пробелами. Значение атрибута пишется после знака равенства. Если значение состоит из одного слова или цифры, то его можно писать без кавычек. Для значений из нескольких слов кавычки обязательны ( “ ).
Тег со всеми атрибутами желательно располагать на одной строке.
Для большинства тегов нужен закрывающий тег:
<i> </i>
8 слайд

<html>
<head>
<title> Мой первый шаг </title>
</head>
<body>
Здравствуйте, это моя первая страница.

Добро пожаловать!
</body>
</html>
Структура HTML-документа
9 слайд

Заголовок документа – теги <Head> и <Title>
Тег <Head>…</Head> заключает в себе теги заголовка.

Тег <Title>…</Title> содержит слова, которые появляются в стоке заголовка браузера
<html>
<head>
<title>Мой первый шаг </title>
</head>
2. Дополнительные теги заголовка:
<meta> — содержит дополнительные данные о документе, используемые поисковыми серверами;
<base> и <link> — определяют базовый адрес документа и некоторые другие
10 слайд

Тело документа – тег <body>
Все, что находится между<body> и </body>, называется содержимым тела документа.
Тег <body> может содержать 3 группы параметров:
Управление внешним видом документа.
Атрибуты программирования – по событию, таблицы стилей и пр.
Атрибуты ссылок и идентификации.
11 слайд

Параметры тега <body>
Bgcolor – изменяет цвет фона. Цвет задается словом или кодом RGB
<body bgcolor = “red”>
<body bgcolor = “#FF0000”>
Text – задает цвет текста.
<body bgcolor = “red” text=“blue”>
Background – помещает в качестве фона изображение из файла с картинкой.
<body background = “dog.gif”>
Bgproperties = “fixed” – фоновый рисунок не прокручивается вместе со страницей.
Link – задает цвет гиперссылок, по которым пользователь еще «не ходил».
Vlink – задает цвет посещенных гиперссылок.
Alink – цвет активной гиперссылки (под курсором мышки во время нажатия)
12 слайд

Оформление текста
Заголовки
Существует 6 уровней заголовков:
<h1> . . . </h1>, …,
<h6> . . . </h6>
Атрибут – align – выравнивание
Значения: Left (по умолчанию)
Right Centr
<body bgcolor =»#CC3399″ text =»#CCCCCC»>
<h1 align = “center”> Title 1 </H1>
<h2 align = “right”> Title 2 </H2>
<h3 align = “left”> Title 3 </H3>
<h4> Title 4 </H4>
<h5> Title 5 </H5>
<h6> Title 6 </H6>
</body>
13 слайд

Абзацы
Тег <p> указывает на начало нового абзаца и вставляет пустую строку перед абзацем. Атрибут align.

Тег
— разрыв строки. Используется для записи текстов стихов и песен.
Атрибут clear позволяет продолжить поток текста после (ниже) рисунка или таблицы. Значения left, right, all — продолжают вывод текста там, где указанный в атрибуте край или оба края свободны от таблиц и рисунков. Этот атрибут имеет смысл только с выровненными влево или вправо рисунками или таблицами.
14 слайд

Точные интервалы
Тег <nobr>… </nobr> создает область, в которой текст не разбивается на строки.
Тег <wbr> используется в сочетании с <nobr> и указывает браузеру место где, в случае необходимости, можно разорвать строку.
Тег <pre>… </pre> выделяет часть исходного текста, который должен отображаться «как есть» — с теми же отступами и разбиением на строки. Используется для записи текстов программ. Внутри этого тега могут располагаться гиперссылки, картинки и пр.
Тег <center>… </center> — содержимое выравнивается по центру – текст, рисунки, таблицы. Аналог атрибута align=center
16 слайд

Физическое и логическое форматирование текста
Физическая разметка документа – это явное указание браузеру, как должен выглядеть тот или иной фрагмент текста – размер шрифта, курсив и т.п.
Логическая разметка учитывает смысл выделенного фрагмента – цитата, сведения об авторе и т.п.
Современные стандарты языка HTML советуют использовать по-возможности логическую разметку, хотя физическое форматирование еще никто не отменял.
17 слайд

теги физических стилей
Можно комбинировать теги стилей:
<b><i>Полужирный курсив</i></b>
18 слайд

Изменение шрифта
тег <font> … </font>- изменяет размер, цвет и стиль текста.

Атрибуты:
size — размер шрифта 1-7. По-умолчанию size=3
Размер изменяется на 20%: 4 размер больше 3 на 20%,
5 размер больше 4 на 20%
size=4 – абсолютный размер,
size= +1 – относительный (на 1 больше, чем базовый размер шрифта)

color — цвет текста,
face — название шрифта
face=»Comic Sans MS, Courier New”
19 слайд

<html>
<head>
<title>Мой второй шаг </title>
</head>
<body>
Это обычный шрифт
<p>
<font size=5 color=»#CC3399″ face=»Comic Sans MS, Courier New»>
Это измененный шрифт
</font>
<p>
Это снова обычный шрифт
</body>
</html>
20 слайд

теги логических стилей
21 слайд

Теги логического и физического форматирования могут комбинироваться друг с другом и с тегами установки интервалов.
22 слайд

Создание WEB-страниц в блокноте.
В своей папке создать отдельную папку для файлов сайта.
Открыть программу БЛОКНОТ.
Написать в нем текст WEB-страницы.
Сохранить этот текст в этой папке под любым именем с расширением .html.
Перейти в эту папку.
Документ должен иметь значок или
Открыть этот документ. (Откроется программа-браузер).
Если нужно внести изменения в документ, то выполнить команду ВИДПросмотр HTML-кода (Исходный текст). Текст WEB-страницы откроется в блокноте.
Внести в текст изменения. Сохранить его (Ctrl+S), перейти в программу-браузер и нажать кнопку ОБНОВИТЬ.
23 слайд

Итоги урока:
Познакомились со структурой и основными командами форматирования WEB-документа.
Узнали, как создавать простейшие WEB-документы.
24 слайд

Задание на урок:
Создать две WEB-странички на произвольную тему
1.На первой применить физические стили форматирования (шрифт, курсив и т.п.), фон сделать цветным.
2. На второй применить логические стили форматирования. В качестве фона использовать картинку из файла.
25 слайд

Домашнее задание
Выучить конспект.
Гл. 6, § 4.6

Выбранный для просмотра документ План урока HTML_1.doc

Скачать материал

Краткое описание документа:

Цели и задачи урока:

Сформулировать основные принципы создания WEB -страниц; познакомить учеников с основными командами оформления текста; продемонстрировать использование этих команд на конкретных примерах оформления WEB -страниц; формировать навыки и умения создания простейших WEB -страниц.
Развивать логику, умение анализировать, сравнивать, делать выводы, высказывать свою мысль.
Воспитывать аккуратность, внимательность, вежливость и дисциплинированность, бережное отношение к своему здоровью.

Тип урока: усвоение новых знаний.

Оборудование: мультимедийная система, слайды, учебник.

Ожидаемые результаты:

В конце урока ученики смогут:

Дать определение таким понятиям:
- Гипертекст;
- WEB -страница, WEB -сайт; WEB -дизайн;
- Язык разметки гипертекста HTML ;
Использовать команды языка HTML для форматирования текста;

Ориентировочный план урока

Актуализация опорных знаний
Как вы можете определить понятие «Интернет»?
Что такое служба WWW ?
Как называются документы, которые мы можем просматривать в программе-браузере?
Изложение нового материала.
Систематизация понятий
- Гипертекст;
- WEB -страница, WEB -сайт; WEB -дизайн;
- Язык разметки гипертекста HTML ;
Команды (теги), определяющие структуру WEB -документа.
Команды (теги) форматирования текста.
Физкультминутка.
Примеры использования тегов форматирования.
Закрепление нового материала.
Итоги урока.
Домашнее задание. Выучить конспект, Глава 6, § 4.6

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 144 622 материала в базе

Выберите категорию:
Выберите учебник и тему

Выберите класс:
Тип материала:
- Все материалы
- Статьи
- Научные работы
- Видеоуроки
- Презентации
- Конспекты
- Тесты
- Рабочие программы
- Другие методич. материалы

Найти материалы

Другие материалы

12.01.2015
641
0

12.01.2015
12660
4

12.01.2015
868
0

12.01.2015
493
0

12.01.2015
643
0

12.01.2015
635
0

12.01.2015
637
5

Источник

Теги

Пробелы, разрыв строки, комментарии

Структура web-страницы

Дополнительные стили шрифтов

Инструменты для разработки веб-сайтов

Список вопросов теста

Вопрос 1

Варианты ответов

Вопрос 2

Варианты ответов

Вопрос 3

Варианты ответов

Вопрос 4

Варианты ответов

Вопрос 5

Варианты ответов

Вопрос 6

Вопрос 7

Варианты ответов

Вопрос 8

Вопрос 9

Варианты ответов

Вопрос 10

Варианты ответов

1. Что такое HTML?

2. Минимальная веб-страница

3. Структура веб-страницы

4. Таблицы

5. Блоки, аудио и видео

6. Цвета

7. Формы

Теги разметки страницы

Тег <header><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" src="https://basicweb.ru/images/mini5.png" alt="html5" title="Добавлен в HTML5" />

Тег <nav><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" src="https://basicweb.ru/images/mini5.png" alt="html5" title="Добавлен в HTML5" />

Тег <aside><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" src="https://basicweb.ru/images/mini5.png" alt="html5" title="Добавлен в HTML5" />

Тег <article><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" src="https://basicweb.ru/images/mini5.png" alt="html5" title="Добавлен в HTML5" />

Тег <section><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" src="https://basicweb.ru/images/mini5.png" alt="html5" title="Добавлен в HTML5" />

Тег <footer><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" src="https://basicweb.ru/images/mini5.png" alt="html5" title="Добавлен в HTML5" />

Тег <main><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" src="https://basicweb.ru/images/mini5.png" alt="html5" title="Добавлен в HTML5" />

Разметка для сайта на HTML 5

Разметка иллюстраций в HTML 5

Скрытие содержимого в HTML 5

Вопросы и задачи по теме

Зачем изучать HTML + преимущества

Недостатки HTML

Что можно сделать на HTML

Что нельзя сделать на HTML

Сложность изучения

Как работает HTML: примеры кода

Список самых популярных HTML-тегов

Выберите документ из архива для просмотра:

Описание презентации по отдельным слайдам:

Краткое описание документа:

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

Другие материалы

Тег <header>

Тег <nav>

Тег <aside>

Тег <article>

Тег <section>

Тег <footer>

Тег <main>