Html код пример – Как написать простую HTML-страничку / Полезное / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY — Вебджем.рф

Содержание

Пример HTML-кода: основы веб-разработки :: SYL.ru

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

За кулисами интернета

Откройте ваш любимый сайт в браузере Google Chrome. Этот обозреватель имеет самую удобную панель разработки, поэтому идеально подходит для обучения.

Чтобы быстро добраться до панели, нажмите горячую клавишу F12 на клавиатуре. Если вдруг по каким-то причинам это не сработало, найдите нужный пункт в меню браузера и выберите его, нажав «Дополнительные инструменты» > «Инструменты разработчика».

Откроется новая панель с несколькими вкладками, из которых нам нужна первая – Elements. Здесь как раз и описан весь HTML-код текущей страницы.

Структура HTML-документа

С помощью панели можно на живом примере разобраться, как устроен сайт, увидеть его составные части. Важно понимать, что конечный внешний вид обеспечивается не только HTML-разметкой, но и стилями, описанными с помощью CSS. Во вкладке Elements можно ознакомиться только с базовой структурой.

Все составляющие страницы расположены в иерархическом порядке. Просмотреть вложенные элементы можно с помощью стрелочек.

На примере HTML-страница целиком обернута в блок с названием HTML, внутри которого расположены контейнеры head и body. Если развернуть их, внутри можно обнаружить еще несколько уровней элементов с разными названиями.

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

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

На скриншоте видно, как выделяется панель навигации:

Есть еще элемент DOCTYPE , расположенный на самом верху. Он тоже относится к служебным данным.

Теги и их атрибуты

Аббревиатура HTML буквально означает «язык гипертекстовой разметки». То есть любая веб-страница – это просто текст, размеченный определенным образом. Для его форматирования используются специальные элементы – теги (дескрипторы).

Чтобы отличить тег от самого текста, его заключают в угловые скобки. На примере HTML-кода можно увидеть самые разные теги: html, head, body, header, div. Они бывают двух видов:

Закрывающиеся теги с контентом имеют две части и заключенный между ними текст. Закрывающимся является, например, дескриптор header. Вторая часть отличается от первой наличием прямого слеша перед именем тега.
Незакрывающиеся теги без контента состоят только из одной части. Примером может служить тег meta.

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

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

Любой тег может иметь ряд параметров (атрибутов), определяющих его свойства. В HTML примером служит дескриптор гиперссылки a и его атрибут href , содержащий адрес страницы, на которую будет осуществлен переход при нажатии ссылки.

Наглядное изучение HTML

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

Но как бы хорош ни был учебник, для успеха нужны еще две составляющие:

самостоятельный опыт верстки;
изучение чужих HTML-примеров.

Консоль разработчика в популярных браузерах (кроме Google Chrome, хорошие панели можно найти в Mozilla Firefox и Internet Explorer) — лучший способ изучать веб-страницы. Он позволяет освоить основные паттерны верстки, научиться видеть конечное представление кода и даже динамически вносить в него изменения.

Примеры HTML // Вебшкола онлайн

Примеры использования основных тегов HTML

Простой html-документ
Отображение текста в параграфах
Еще примеры с параграфами
Переход на новую строку(тег br)
Проблемы со стихами(трудности html-форматирования)
Заголовки
Заголовки, выровненные по центру
Горизонтальная линия
Комментарии в html-коде
Изменение цвета фона

Форматирование текста в HTML

Форматирование текста
Предварительно отформатированный текст
Теги для отображения программного кода
Вставка адреса
Аббревиатуры и акронимы
Направление написания текста
Длинные и короткие цитаты
Удаленный и вставленный текст

Ссылки

Вставка ссылки
Изображение как ссылка
Открытие ссылки в новом окне браузера
Переход в другое место (в открытом документе)
Отмена фреймов
Ссылка на отправку почты (mailto)
Еще один вид ссылки на почту

Фреймы

Вертикальный фрейм из 3-х документов
Горизонтальный фрейм из 3-х документов
Использование тега <noframes>

Фрейм из колонок и строк
Использование атрибута noresize
Фрейм-навигация
Строчный фрейм (фрейм в html-документе)
Переход к определенному месту документа
Переход к определенному месту документа с помощью фрейма-навигации

Таблицы

Простая таблица
Виды рамок таблицы
Таблица без рамок
Заголовки в таблице
Пустые ячейки таблицы
Название таблицы
Ячейки из нескольких колонок/строк
Теги в таблице
Cell padding (отступ между контентом и рамкой таблицы)
Cell spacing (отступ между ячейками таблицы)
Фон таблицы
Фон ячейки таблицы
Выравнивание содержимого ячейки
Атрибут frame
Атрибуты frame и border

Списки

Неупорядоченный список
Упорядоченный список
Виды неупорядоченных списков
Виды упорядоченных списков
Вложенный список
Вложенный список 2
Список определений

Формы и ввод информации пользователем

Создание полей ввода
Создание поля ввода пароля

Множественный выбор (checkbox)
Переключатель (radiobutton)
Простой выпадающий список выбора
Выпадающий список с выбранным значением
Поле ввода текста
Создание кнопки
Поля ввода данных с рамкой и названием
Поле ввода с кнопкой подтверждения
Множественный выбор и кнопка подтверждения
Переключатель и кнопка подтверждения
Отправка e-mail с помощью формы

Изображения

Вставка изображения
Вставка изображения из нелокальных источников
Фоновое изображение
Выравнивание изображения относительно текста
«Всплывание» изображения вправо/влево относительно текста
Изменение размера изображения
Альтернативный текст (используется при ошибке загрузки изображения)
Изображение как ссылка
Карта изображения

Фон (фоновое изображение)

Удачное сочетание фона и текста
Неудачное сочетание фона и текста
Удачное фоновое изображение 1
Удачное фоновое изображение 2
Неудачное фоновое изображение

Стили

Стиль в разделе <HEAD> документа
Ссылки без подчеркивания
Ссылка на внешний файл стиля

Раздел <head>

Изменение заголовка страницы
Атрибут target для всех ссылок на странице.

Раздел <meta>

Описание документа
Ключевые слова документа
Перенаправление пользователя на другой URL

Скрипты

Вставка скрипта
Использование тега <noscript>

Примеры web-страниц на HTML — Учитель программирования.ру

Основные тегиТекстСсылкиФреймыТаблицыСпискиФормыИзображения

Пример 1. Структура документа HTML

<HTML>
<HEAD>
<TITLE>Название документа</TITLE>
</HEAD>
<BODY bgcolor=”teal” text=”aqua”>
Здесь расположен сам Web-документ.
<CENTER><h2><font color=”yellow”>Всем привет!</h2></CENTER></font><P>
<CENTER><font color=”red” size=4>Здравствуй, мир!</CENTER></font>

</BODY>
</HTML>

Пример 2. Структура простейших веб-страниц

<HTML>
<HEAD>
<TITLE>Поисковые системы Internet.</TITLE>
</HEAD><BODY bgcolor=”navy” text=”yellow”>
<big><i><U>Поисковые системы в Интернете</i></big></U></CENTER>
<hr color=”aqua”>
<font color=”white”>Ниже приведены некоторые популярные зарубежные
поисковые системы и отечественная система Rambler. Для поиска
информации используется окно Search, в которое вводится ключевое
слово и нажимается кнопка Search.<br></font>
Просмотрите примеры:
<a href=”altavist.HTM”>ALTAVIST.HTM</a>,
<a href=”EXCITE.HTM”>EXCITE.HTM</a>,
<a href=”YAHOO.HTM”>YAHOO.HTM</a>!
<hr color=”red”>
1.<IMG SRC=”altavist.gif”>
2.<IMG SRC=”yahoo.gif”>
3.<IMG SRC=”excite.gif”>
4.<IMG SRC=”lycos.gif”><P>

5.<IMG SRC=”infoseek.gif”>
6.<IMG SRC=”rambler.gif”><hr color=”lime”>
<tt><big><U><font color=”aqua”>Используйте поисковые системы для
поиска информации в Интернете!</tt></big></U></font>
</BODY>
</HTML>

Пример 3. Разметка веб-страницы

<HTML>
<HEAD>
<TITLE>Эхо Москвы.</TITLE>
</HEAD>
<BODY bgcolor=”purple” text=”lime” link=”yellow”>
<CENTER><u><font color=”yellow”>24 часа в сутки!</u></font><br>
Информация на любые темы!
<font color=”aqua”>Частота на УКВ 73,82 МГц или 91,2 МГц FM.<p></font>
<IMG SRC=”echomsk.gif” width=”403″ height=”263″><p>
<i><big><font color=”white”>Слушайте Эхо Москвы!
Остальное видимость!<br></i></big></font>
Адрес в Интернете:

Пример 4. Простой пример на HTML

<HTML>
<HEAD>
<TITLE>Упорядоченные и неупорядоченные списки</TITLE>
</HEAD>
<BODY BGCOLOR=”navy” text=”yellow”>
<h4><U>Неупорядоченный список</h4></U>
<UL>
<LI>Элемент 1.
<LI>Элемент 2.
<LI>Элемент 3.
</UL>
<HR color=”lime”>
<h4><U>Упорядоченный нумерованный список</h4></U>
<OL>
<LI>Элемент 1.
<LI>Элемент 2.
<LI>Элемент 3.
</OL>
</BODY>
</HTML>

”Пример

Списки определений

Списки определений имеют вид:

Название термина 1
Определение термина 1
Другое определение термина 1
Название термина 2
Определение термина 2

Другое определение термина 2
Название термина 3
Определение термина 3
Другое определение термина 3

Петров И.C., E-mail: [email protected]

”Пример

<HTML>
<HEAD>
<TITLE>Формы</TITLE></HEAD>
<BASE>
<BODY bgcolor=”silver”>
<FORM>
<CENTER><FONT size=6>Элементы диалога</font></center>
<HR color=”blue”>
<Н2>Элемент ISINDEX</h3>
<ISINDEX prompt=”Cтpoкa для ввода критерия поиска”>
<HR color=”blue”>
<Н2>Элементы INPUT</h3>
<h4> Ввод текстовой строки </h4>
<INPUT type=”text” size=50>
<h4> Ввод пароля </h4>
<INPUT type=”password”>
<h4> Флажки </h4>
<INPUT type=”checkbox” name=”F001″ checked>
<INPUT type=”checkbox” name=”F001″ checked>
<h4> Переключатели </h4>
<INPUT type=”radio” name=”S001″ vаluе=”Первый”>

<INPUT type=”radio” name=”S001″ value=”Второй”>
<INPUT type=”radio” name=”S001″ value=”Третий” checked>
<h4> Кнопка подтверждения ввода </h4>
<INPUT type=”submit” value=”Подтверждение”>
<h4> Кнопка с изображением </h4>
<INPUT type=”image” src=”lycos.gif”>
<h4> Кнопка очистки формы </h4>
<INPUT type=”reset” value=”0чистка”>
<h4> Файл </h4>
<INPUT type=”file” name=”photo” accept=”image/*”>
<HR color=”blue”>
<Н2>Элемент SELECT
<SELECT multiple>
<OPTION value=а>Первый
<OPTION value=Ь>Второй
<OPTION value=с>Третий
<OPTION value=d>Четвертый
</select></h3>
<HR color=”blue”>
<Н2>Элемент TEXTAREA
<TEXTAREA rows=5 cols=30>
Область для ввода текста
</textarea></h3>
<HR color=”blue”>
</FORM>
</BODY>
</HTML>

”Пример

”Пример

”Пример

”Пример

[spoiler title=”Пример 1. Вывод текста”]

Этот текст написан полужирным шрифтом.
Этот текст логически выделен тегом strong (может отображаться как обычный текст в некоторых браузерах или отображаться полужирным шрифтом). В некоторых браузерах действие аналогично действию тега b.
Этот текст отображается более крупным шрифтом (может отображаться обычным шрифтом в некоторых браузерах)
Этот текст логически выделен тегом em. В некоторых браузерах действие аналогично действию тега i.
Этот текст отображается курсивом.
Этот текст отображается более маленьким шрифтом.
Этот текст ниже , а этот выше уровня основного текста.

[/spoiler] [spoiler title=”Пример 2. Форматирование текста”]

<html>
<body>
<pre>
Это предварительно
отформатированный текст.
В нем сохраняются
все пробелы и пустые
строки, которые вы указали.
</pre>
<p>Тег pre хорошо использовать для отображения компьютерного кода.:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
[/spoiler] [spoiler title=”Пример 3. Вывод программного кода”] <html>
<body>
<code>Тег code предназначен для отображения одной или нескольких строк текста, который представляет собой программный код. Сюда относятся имена переменных, ключевые слова, тексты функции и т.д. Браузеры обычно отображают содержимое контейнера code как моноширинный текст уменьшенного размера.</code>
<br>
<kbd>Тег kbd используется для обозначения текста, который набирается на клавиатуре или для названия клавиш. Браузеры обычно помечают текст в контейнере kbd моноширинным шрифтом.</kbd>
<br>
<tt>Текст, отмеченный тегом tt отображаетя моноширинным текстом. Этот тег относится к группе тегов физического форматирования.</tt>
<br>
<samp>Тег samp используется для отображения текста, который является результатом вывода компьютерной программы или скрипта. Браузеры обычно отображают текст в контейнере samp с помощью моноширинного шрифта. С помощью стилей можно задать свое собственное оформление.</samp>
<br>
<var>Тег var используется для выделения переменных компьютерных программ. Браузеры обычно помечают текст в контейнере var курсивным начертанием.</var>
</body>
</html>
[/spoiler] [spoiler title=”Пример 4. Текст адреса”] <html>
<body>
<address>
Дональд Дак<br>
почтовый ящик 555<br>
Диснейленд<br>
США
</address>
</body>
</html>
[/spoiler] [spoiler title=”Пример 5. Аббревиатуры”] <html>
<body>
<abbr title=”United Nations”>UN</abbr>
<br />
<acronym title=”World Wide Web”>WWW</acronym>
<p>Атрибут title используется для отображения текста, содержащегося в нем, при наведении курсора мыши на акроним или аббревиатуру.</p>
</body>
</html>
[/spoiler] [spoiler title=”Пример 6. Цитаты”] <html>
<body>
Блок цитаты:
<blockquote>
Это длинная цитата. Это длинная цитата. Это длинная цитата. Это длинная цитата.
</blockquote>
<p><b>Браузер вставляет пустую строчку и отступы перед и после блока цитаты.</b></p>
Короткая цитата:
<q>Это короткая цитата</q>
<p><b>Элемент q никак не выделяется и отображается как обычный текст.</b></p>
</body>
</html>
[/spoiler] [spoiler title=”Пример 7. Зачёркивание и подчёркивание”] <html>
<body>
<p>
Дюжина — это
<del>тринадцать</del>
<ins>двенадцать</ins>
единиц.
</p>
<p>
Большая часть браузеров перечеркивают удаленный текст и подчеркивают вставленный текст.
</p>
<p>
Старые браузеры могут отображать удаленный текст как простой текст.
</p>
</body>
</html>
[/spoiler] [spoiler title=”Пример 8. Параграфы”] <html>
<body>
<abbr title=”United Nations”>UN</abbr>
<p>Это параграф.</p>
<p>Это другой параграф.</p>
</body>
</html>
[/spoiler] [spoiler title=”Пример 9. Написание степеней и формул”] <html>
<head>
<title>Форматированиеhtml</title>
</head>
<body>
y=x<sup>2</sup>-уравнениепараболы.<br><br>
H<sub>2</sub>O-формулаводы.
</body>
</html>
[/spoiler] [spoiler title=”Пример 10. Заголовки”] <html>
<head>
<title>Форматированиеhtml</title>
</head>
<body>
<h2>Это заголовок первого уровня</h2>
<h3>Это заголовок второго уровня</h3>
<h4>Это заголовок третьего уровня</h4>
<h5″>Это заголовок четвертого уровня</h5>
<h5″>Это заголовок пятого уровня</h5>
<h6″>Это заголовок шестого уровня</h6>
Это просто текст
</body>
</html>
[/spoiler]

[spoiler title=”Пример 1. Ссылка”]

Этот текст является ссылкой на примеры html.

А этот текст приведет вас на известный видеохостинг Youtube.

[/spoiler] [spoiler title=”Пример 2. Ссылка в изображении”]

Вы можете сделать изображение ссылкой:

[/spoiler] [spoiler title=”Пример 3. Открытие ссылки в новой вкладке”]

К примерам html

Если вы укажете атрибуту target значение “_blank”, ссылка откроется в новом окне браузера.

[/spoiler] [spoiler title=”Пример 4. Ссылка для отправки почты”]

Это ссылка на отправку почты:
[email protected]?subject=Привет%20тебе”>
Отправить письмо!

Внимание: Пробелы между словами должны быть заменены знаком «%20» , чтобы вы были уверены, что браузер будет правильно отображать ваш текст.

[/spoiler]

[spoiler title=”Пример 1. Несколько вертикальных фреймов”] <html>
<frameset cols=”25%,50%,25%”>
<frame src=”frame1.html”>
<frame src=”frame2.html”>
<frame src=”frame3.html”>
</frameset>
</html>
[/spoiler] [spoiler title=”Пример 2. Несколько горизонтальных фреймов”] <html>
<frameset rows=”25%,50%,25%”>
<frame src=”frame1.html”>
<frame src=”frame2.html”>
<frame src=”frame3.html”>
</frameset>
</html>
[/spoiler] [spoiler title=”Пример 3. Навигация по фреймам”] <html>
<frameset cols=”120,*”>
<frame src=”frame_contents.html”>
<frame src=”frame1.html”
name=”showframe”>
</frameset>
</html>
[/spoiler] [spoiler title=”Пример 4. Iframe – построчные фреймы”] <html>
<body>
<iframe src=”examples_main.html”></iframe>
<p>Некоторые старые браузеры не поддерживают строчные фреймы.</p>
<p>В этом случае строчный фрейм не будет отображен в окне браузера.</p>
</body>
</html>
[/spoiler] [spoiler title=”Пример 5. Переход к месту во фрейме”] <html>
<frameset cols=”20%,80%”>
<frame src=”frame1.html”>
<frame src=”frame4.html#C10″>
</frameset>
</html>
[/spoiler]

[spoiler title=”Пример 1. Простая таблица”] <html>
<body>
<p>
Каждая таблица начинается с тега table.
Каждая строчка таблицы начинается с тега tr.
Каждая ячейка таблицы начинается с тега td.
</p>
<h5>Таблица из одной колонки:</h5>
<table border=”1″>
<tr>
<td>100</td>
</tr>
</table>
<h5>Одна строчка из трех колонок:</h5>
<table border=”1″>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h5>Две строчки по три колонки:</h5>
<table border=”1″>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
[/spoiler] [spoiler title=”Пример 2. Рамки таблицы”] <html>
<body>
<h5>Таблица с обычной рамкой:</h5>
<table border=”1″>
<tr>
<td>Первая</td>
<td>строчка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строчка</td>
</tr>
</table>
<h5>С широкой рамкой:</h5>
<table border=”8″>
<tr>
<td>Первая</td>
<td>строчка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строчка</td>
</tr>
</table>
<h5>С очень широкой рамкой:</h5>
<table border=”15″>
<tr>
<td>Первая</td>
<td>строчка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строчка</td>
</tr>
</table>
</body>
</html>
[/spoiler] [spoiler title=”Пример 3. Заголовки таблицы”] <html>
<body>
<h5>Заголовки таблицы:</h5>
<table border=”1″>
<tr>
<th>Имя</th>
<th>Телефон</th>
<th>Телефон</th>
</tr>
<tr>
<td>Билл Гейтс</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h5>Вертикальные заголовки:</h5>
<table border=”1″>
<tr>
<th>Имя:</th>
<td>Билл Гейтс</td>
</tr>
<tr>
<th>Телефон:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Телефон:</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
[/spoiler] [spoiler title=”Пример 4. Таблица с заголовком”] <html>
<body>
<h5>
Эта таблица с широкой рамкой и названием
</h5>
<table border=”6″>
<caption>Название</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
[/spoiler] [spoiler title=”Пример 5. Ячейки на несколько колонок”] <html>
<body>
<h5>Ячейки состоит из двух колонок:</h5>
<table border=”1″>
<tr>
<th>Имя</th>
<th colspan=”2″>Телефон</th>
</tr>
<tr>
<td>Билл Гейтс</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h5>Ячейка состоит из двух строк:</h5>
<table border=”1″>
<tr>
<th>Имя:</th>
<td>Билл Гейтс</td>
</tr>
<tr>
<th rowspan=”2″>Телефон:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
[/spoiler]

[spoiler title=”Пример 1. Простой список”] <html>
<body>
<h5>Неупорядоченный список:</h5>
<ul>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ul>
</body>
</html>
[/spoiler] [spoiler title=”Пример 2. Упорядоченный список”] <html>
<body>
<h5>Упорядоченный список:</h5>
<ol>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ol>
</body>
</html>
[/spoiler] [spoiler title=”Пример 3. Разные виды списков”] <html>
<body>
<h5>Значки списка в виде закрашенного круга:</h5>
<ul type=”disc”>
<li>Яблоки</li>
<li>Бананы</li>
<li>Лимоны</li>
<li>Апельсины</li>
</ul>
<h5>Значки списка в виде незакрашенного кругаCircle bullets list:</h5>
<ul type=”circle”>
<li>Яблоки</li>
<li>Бананы</li>
<li>Лимоны</li>
<li>Апельсины</li>
</ul>
<h5>Значки списка в виде закрашенного квадрата:</h5>
<ul type=”square”>
<li>Яблоки</li>
<li>Бананы</li>
<li>Лимоны</li>
<li>Апельсины</li>
</ul>
</body>
</html>
[/spoiler] [spoiler title=”Пример 4. Разные виды упорядоченных списков”] <html>
<body>
<h5>Нумерованный список:</h5>
<ol>
<li>Яблоки</li>
<li>Бананы</li>
<li>Лимоны</li>
<li>Апельсины</li>
</ol>
<h5>Нумерация заглавными буквами:</h5>
<ol type=”A”>
<li>Яблоки</li>
<li>Бананы</li>
<li>Лимоны</li>
<li>Апельсины</li>
</ol>
<h5>Нумерация строчными буквами:</h5>
<ol type=”a”>
<li>Яблоки</li>
<li>Бананы</li>
<li>Лимоны</li>
<li>Апельсины</li>
</ol>
<h5>Нумерация заглавными римскими цифрами:</h5>
<ol type=”I”>
<li>Яблоки</li>
<li>Бананы</li>
<li>Лимоны</li>
<li>Апельсины</li>
</ol>
<h5>Нумерация строчными римскими цифрами:</h5>
<ol type=”i”>
<li>Яблоки</li>
<li>Бананы</li>
<li>Лимоны</li>
<li>Апельсины</li>
</ol>
</body>
</html>
[/spoiler] [spoiler title=”Пример 5. Вложенные списки”] <html>
<body>
<h5>Вложенный список:</h5>
<ul>
<li>Кофе</li>
<li>Чай
<ul>
<li>Черный чай</li>
<li>Зеленый чай</li>
</ul>
</li>
<li>Молоко</li>
</ul>
</body>
</html>
[/spoiler]

[spoiler title=”Пример 1. Форма полей ввода”] <html>
<body>
<form action=””>
Имя:
<input type=”text” name=”firstname”>
<br>
Фамилия:
<input type=”text” name=”lastname”>
</form>
</body>
</html>
[/spoiler] [spoiler title=”Пример 2. Форма ввода пароля”] <html>
<body>
<form action=””>
Имя пользователя (логин):
<input type=”text” name=”user”>
<br>
Пароль:
<input type=”password” name=”password”>
</form>
<p>
Помните, что когда вы вводите пароль, браузер показывает звездочки вместо символов.
</p>
</body>
</html>
[/spoiler] [spoiler title=”Пример 3. Переключатель”] <html>
<body>
<form action=””>
Мужчина:
<input type=”radio” checked=”checked”
name=”Sex” value=”male”>
<br>
Женщина:
<input type=”radio”
name=”Sex” value=”female”>
</form>
<p>
Пользователь может выбрать только одно значение.
</p>
</body>
</html>
[/spoiler] [spoiler title=”Пример 4. Выпадающий список”] <html>
<body>
<form action=””>
<select name=”cars”>
<option value=”volvo”>Вольво</option>
<option value=”saab”>Сааб</option>
<option value=”fiat”>Фиат</option>
<option value=”audi”>Ауди</option>
</select>
</form>
</body>
</html>
[/spoiler] [spoiler title=”Пример 5. Поля ввода”] <html>
<body>
<form action=””>
<input type=”button” value=”Всем привет!”>
</form>
</body>
</html>
[/spoiler] [spoiler title=”Пример 6. Множественный переключатель и кнопка подтверждения”] <html>
<body>
<form name=”input” action=”html1.asp” method=”get”>
У меня есть мотоцикл:
<input type=”checkbox” name=”vehicle” value=”Bike” checked=”checked” />
<br />
У меня есть машина:
<input type=”checkbox” name=”vehicle” value=”Car” />
<br />
У меня есть аэроплан:
<input type=”checkbox” name=”vehicle” value=”Airplane” />
<br /><br />
<input type=”submit” value=”Подтвердить” />
</form>
<p>
Если вы нажмете на кпопку «Подвердить», вы отправите ваши данные на новую страницу, которая называется html1.asp.
</p>
</body>
</html>
[/spoiler]

[spoiler title=”Пример 1. Вывод изображений”] <html>
<body>
<p>
Вставка простого изображения:
<img src=”skype.jpeg”
width=”111″ height=”111″>
</p>
<p>
Двигающееся изображение (анимация):
<img src=”sun.gif”
width=”62″ height=”62″>
</p>
<p>
Помните, что синтаксис вставки анимации ничем не отличается от синтаксиса вставки простого изображения.
</p>
</body>
</html>
[/spoiler] [spoiler title=”Пример 2. Фоновые изображения”] <html>
<body background=”skype.jpeg”>
<h3>Взгляните, мы вставили изображение, как фон!</h3>
<p>Можно вставлять изображения форматов gif, jpg/jpeg и png.</p>
<p>Если размеры изображения меньше страницы, оно будет повторяться пока не заполнит весь фон.</p>
</body>
</html>
[/spoiler] [spoiler title=”Пример 3. Всплывание изображений”] <html>
<body>
<p>
<img src =”skype.jpeg”
align =”left” width=”48″ height=”48″>
Параграф с изображением. Атрибуту «align» присвоено значение «left». Изображение «всплывает» влево по отношению к тексту.
</p><br /><br />
<p>
<img src =”skype.jpeg”
align =”right” width=”48″ height=”48″>
Параграф с изображением. Атрибуту «align» присвоено значение «right». Изображение «всплывает» вправо по отношению к тексту.
</p><br /><br />
</body>
</html>
[/spoiler] [spoiler title=”Пример 4. Изменения размера изображений”] <html>
<body>
<p>
<img src=”skype.jpeg”
width=”20″ height=”20″>
</p>
<p>
<img src=”skype.jpeg”
width=”45″ height=”45″>
</p>
<p>
<img src=”skype.jpeg”
width=”70″ height=”70″>
</p>
<p>
Вы можете изменять размер изображения, меняя значения атрибутов «height» (ширина) и «width» (высота) тега img.
</p>
</body>
</html>
[/spoiler]

HTML Основные

В этой главе Вы частично научитесь использовать теги в примерах.

В следующих главах Вы узнаете о них более подробно.

HTML Документ

Все HTML документы должны начинаться с объявления типа документа: <!DOCTYPE html>.

Сам HTML документ начинается с <html> и заканчивается </html>.

Видимая часть HTML документа находится между <body> и </body>.

Пример

<h2>Мой первый заголовок</h2>
<p>Мой первый параграф.</p>

</body>
</html>

Редактор кода »

HTML Заголовки

HTML заголовки определены тегами <h2> до <h6>.

<h2> определяет наиболее важный заголовок. <h6> определяет наименее важная заголовок:

Пример

<h2>Это заголовок 1</h2>
<h3>Это заголовок 2</h3>
<h4>Это заголовок 3</h4>
<h5>Это заголовок 4</h5>
<h5>Это заголовок 5</h5>
<h6>Это заголовок 6</h6>

Редактор кода »

HTML Параграфы

HTML параграфы определяются тегом <p>:

HTML Ссылки

HTML ссылки определяются тегом <a>:

Назначение ссылки указана в атрибуте href.

Атрибуты используются для предоставления дополнительной информации об элементах HTML.

Вы узнаете больше об атрибутах в следующей главе.

HTML Изображения

HTML изображения определяются с помощью тега <img>.

Исходный файл src, альтернативный текст alt, ширина и высота указана в качестве атрибутов width и height:

HTML Кнопки

Кнопки HTML определяются тегом <button>:

HTML Списки

Списки HTML определяются тегом <ul> (неупорядоченный/маркированный список) или тегом <ol> (упорядоченный/нумерованный список), затем теги <li> (элементы списка):

HTML Макеты

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

Макеты на основе таблиц

В недалеком прошлом таблицы были самым простым и самым популярным способом создания многоколоночных макетов в HTML. Вся веб-страница помещалась внутри большой таблицы (<table>). Однако элемент <table> разработан не для создания макетов страниц, его цель — отображение табличных данных.
Следующий макет создается с помощью таблицы, состоящей из 3-х строк и 2 столбцов, где строки содержащие контент заголовка и футера охватывают обе колонки, используя атрибут colspan:

Пример: Макет на основе таблицы

Макет на основе таблицы

Основной контент…

<!DOCTYPE html>
<html>
<head>
<title>Макет на основе таблицы</title>
    <style>
        table {
            width: 100%;
            border: 0;
        }
        td.header {
            background-color: #b5dcb3;
        }
        td.sidebar {
            background-color: #dddddd;
            width: 30%;
            vertical-align: top;
            padding:5px;
        }
        td.sidebar>ul {
            list-style: none;
            padding:5px;
        }
        td.article {
            background-color: #eeeeee;
            height: 200px;
            width: 70%;
            vertical-align: top;
            padding:5px;
        }
        td.footer {
            background-color: #b5dcb3;
            text-align: center;
            padding:5px;
        }
    </style>
</head>
<body>
  <table border="0">
    <tr>
      <td colspan="2"><h2>Шапка сайта</h2></td>
    </tr>
    <tr>
      <td>
        <b>Главное меню</b>
            <ul>
                <li>HTML Элементы</li>
                <li>HTML Атрибуты</li>
                <li>HTML Таблицы</li>
                <li>...</li>
            </ul>
      </td>
      <td>Основной контент...</td>
    </tr>
    <tr>
      <td colspan="2">Copyright © 2017 wm-school.ru</td>
    </tr>
  </table>
</body>
</html>

	Совет: Не используйте таблицы для разметки страницы! W3C осуждает использование таблиц для разметки.

Макеты на основе DIV-элементов

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

Ниже приведена визуализация макета с использованием тегов <div> для группировки элементов на странице:

<div=»header»>

<div>

Пример: Макет на основе DIV-элементов


Главное меню HTML Элементы HTML Атрибуты HTML Таблицы …	Основной контент…
Copyright © 2017 wm-school.ru

<!DOCTYPE html>
<html>
<head>
<style>
#page {
    width: 100%;
}
#header {
    background-color:#808000;
}
#sidebar>ul {
    list-style: none;
    padding:5px;
}
#sidebar {
    background-color:#dddddd;
    height:200px;
    width:30%;
    float:left;
    padding:5px;        
}
#content {
    background-color:#eeeeee;
    height:200px;
    width:70%;
    float:left;
    padding:5px;    
}
#footer {
    background-color:#808000;
    clear:both;
    text-align:center;
    padding:5px;    
}
</style>
</head>
<body>

<div>
<div>
<h2>Шапка сайта</h2>
</div>

<div>
<b>Главное меню</b>
<ul>
  <li>HTML Элементы</li>
  <li>HTML Атрибуты</li>
  <li>HTML Таблицы</li>
  <li>...</li>
</ul>
</div>

<div>
<p>Основной контент...</p>
</div>

<div>
Copyright © 2017 wm-school.ru
</div>
</div>

</body>
</html>

Новые элементы макета в HTML5

Спецификация HTML5 предоставляет новые семантические теги, описывающие содержащийся в них контент. Так как современные сайты включают в свои страницы боковые панели, заголовки и секции, в спецификацию HTML5 были включены новые теги, предназначенные для деления страницы на логические области. Семантическая разметка предназначена для описания контента. Семантическая разметка упрощает понимание смысла и контекста информации, размещенной на странице — как для поисковиков, так и для разработчиков. Теперь программы экранного доступа могут позволить пользователям проигнорировать заголовки и нижние колонтитулы и сразу перейти к основному контенту. Кроме того, поисковые машины могут придать большее значение содержимому элементов <article>, чем содержимому <header> или <footer>.

Новые элементы разметки в HTML5
Элемент	Значение / описание
<header>	Определение заголовка страницы или раздела.
<nav>	Определение области навигации страницы или раздела.
<section>	Определение логической области страницы или группировка контента.
<article>	Определение статьи (логически завершенного блока контента).
<aside>	Определение вторичного или связанного контента.
<footer>	Определение завершителя страницы или раздела.
<details>	Определяет дополнительные детали.
<summary>	Определяет заголовок для элемента <details>.

Следующий пример имеет такую же структуру, как рассмотренный пример с применением тегов <div>. Однако многие из элементов <div> в нем заменены новыми элементами HTML5. Например заголовок помещен внутри элемента <header>, меню навигации — в элементе <nav>, а статьи — в отдельных элементах <article>.

Ниже приведена визуализация макета с использованием тегов HTML5 для раметки страницы:

<nav>

Пример: Макет на основе элементов HTML5


Главное меню HTML Элементы HTML Атрибуты HTML Таблицы …	Основной контент…
Copyright © 2017 wm-school.ru

<!DOCTYPE html>
<html>
<head>
<style>
#page {
    width: 100%;
}
header {
    background-color:#0095B6;
}
nav>ul {
    list-style: none;
    padding:5px;
}
nav {
    background-color:#dddddd;
    height:200px;
    width:30%;
    float:left;
    padding:5px;        
}
section {
    background-color:#eeeeee;
    height:200px;
    width:70%;
    float:left;
    padding:5px;    
}
footer {
    background-color:#0095B6;
    clear:both;
    text-align:center;
    padding:5px;    
}
</style>
</head>
<body>

<div>
<header>
<h2>Шапка сайта</h2>
</header>

<nav>
<b>Главное меню</b>
<ul>
  <li>HTML Элементы</li>
  <li>HTML Атрибуты</li>
  <li>HTML Таблицы</li>
  <li>...</li>
</ul>
</nav>

<section>
<h2>Заголовок</h2>
<p>Основной контент...</p>
</section>

<footer>
Copyright © 2017 wm-school.ru
</footer>
</div>

</body>
</html>

Please enable JavaScript to view the comments powered by Disqus.

Html код пример – Как написать простую HTML-страничку / Полезное / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY

Пример HTML-кода: основы веб-разработки :: SYL.ru

За кулисами интернета

Структура HTML-документа

Теги и их атрибуты

Наглядное изучение HTML

Примеры HTML // Вебшкола онлайн

Примеры использования основных тегов HTML

Форматирование текста в HTML

Ссылки

Фреймы

Таблицы

Списки

Формы и ввод информации пользователем

Изображения

Фон (фоновое изображение)

Стили

Раздел <head>

Раздел <meta>

Скрипты

Примеры web-страниц на HTML — Учитель программирования.ру

HTML Основные

HTML Документ

Пример

HTML Заголовки

Пример

HTML Параграфы

HTML Ссылки

HTML Изображения

HTML Кнопки

HTML Списки

HTML Макеты

Макеты на основе таблиц

Пример: Макет на основе таблицы

Макеты на основе DIV-элементов

Пример: Макет на основе DIV-элементов

Новые элементы макета в HTML5

Новые элементы разметки в HTML5

Пример: Макет на основе элементов HTML5

Добавить комментарий Отменить ответ

Рубрики

Макеты на основе таблиц

Пример: Макет на основе таблицы