Урок 1. Введение в HTML
HTML (HyperTextMarkupLanguage) означает язык разметки гипертекста
HTML -документ — это один большой контейнер, который начинается с тега <HTML> и заканчивается тегом </HTML>:
КонтейнерHTML или гипертекстовый документ состоит из двух других вложенных контейнеров: заголовка документа (HEAD) и тела документа (BODY).
Файлы HTML обычно имеют расширение html. Их можно создавать при помощи любого текстового редактора.
==================================================
Пример 1
Откройте HTML-Reader
НАПЕЧАТАЙТЕ
<html>
<head>
<title>Это заголовок страницы</title>
</head>
<body>
<h1>Здравствуйте!</h1>
<p>Это моя первая страница HTML. <b>Этот текст выводится жирным шрифтом.</b></p>
</body>
</html>
СОХРАНИТЕ КАК page1.html
-----------------------------------------------
ПОЯСНЕНИЕ К ПРИМЕРУ 1:
Ваш первый HTML-документ начинается с тега <html>, который сообщает браузеру о начале документа HTML и заканчивается тегом </html>, который информирует браузер о достижении конца документа HTML.
Текст между тегами <head> и </head> является информацией заголовка документа. Эта информация не выводится в окне браузера.
Текст "Это заголовок страницы" между тегами <title> и </title> является заголовком документа. Этот заголовок выводится в строке заголовка окна браузера.
Текст между тегами <body> и </body> является текстом, который будет выведен в окне браузера. Текст "Здравствуйте!" между тегами <h1> и </h1> будет отображен стилем заголовка, обычно жирным шрифтом большего размера.
Тег<p> означает, что начинается новый параграф, тег</p> означает конец параграфа.
Текст "Этот текст выводится жирным шрифтом." между тегами <b> и </b> будет выведен жирным шрифтом.
| Теги HTML используются для выделения элементов HTML. Обычно теги HTML используются парами и заключены между двумя символами угловых скобок <(начальный тег)> и </(конечный тег)>. Текст между начальным и конечным тегами является содержимым элемента. Некоторые теги не имеют конечного, например, тег принудительного переноса строки <br>, для таких тегов рекомендуется использовать следующее написание <br/>. |
ОСНОВНЫЕ ТЕГИ HTML
Пример 2 Параграфы
Следующий пример показывает, как отображаются параграфы
<html><body><p>Это параграф 1.</p><p>Это параграф 2.</p><p>Это параграф 3.</p></body></html>Пример 3 Заголовки
Заголовки определяются с помощью тегов от <h1> до <h6>. <h1> определяет заголовок самого большого размера, а <h6> определяет заголовок самого маленького размера.
<h1>Это заголовок первого уровня</h1><h2>Это заголовок второго уровня</h2><h3>Это заголовок третьего уровня</h3><h4>Это заголовок четвертого уровня</h4><h5>Это заголовок пятого уровня</h5><h6>Это заголовок шестого уровня</h6>Заголовки автоматически отделяются дополнительными промежутками от остальных элементов документа.
Пример 4 Заголовки
<html><body> <h1>Это заголовок уровня 1</h1><h2>Это заголовок уровня 2</h2><h3>Это заголовок уровня 3</h3><h4>Это заголовок уровня 4</h4><h5>Это заголовок уровня 5</h5><h6>Это заголовок уровня 6</h6> <h1 align="center">Это заголовок 1, он выровнен по центру страницы.</h1> <p>Используйте теги заголовков только для заголовков. Не используйте их просто для того, чтобы выделить что-то жирным шрифтом. Используйте для этого другие теги.</p> </body></html>Пример 5 ФОН
Этот пример демонстрирует использование цветного фона на странице HTML. При выборе фона всегда проверяйте, чтобы текст был хорошо читаем!
<html><bodybgcolor="yellow"><h2>Смотри: Цветной фон!</h2></body></html>Пример 5 Форматирование символов
<html><body><p>Если необходимо чтобы к тексту было применено какое-либо форматирование, например, выделение <b>полужирным</b>или <i>курсивом</i>, необходимо использовать соответствующие теги форматирования. При этом форматируемый текст помещается между тегами.</p></body></html>Пример 6 Гиперссылки
Гипертекстовые ссылки необходимы для соединения с другими документами в Web. Для их записи используется тег<a>, который называют "якорь" (аnchor).
<html><body> <p><a href="https://www.e-nlama.ru">Этот текст </a> является ссылкой на страницу во Всемирной Паутине.</p> </body></html>Пример 7 Списки HTML
Неупорядоченные списки
Неупорядоченный список является списком элементов. Элементы списка маркируются с помощью специальных знаков (обычно небольшой черный круг).
Неупорядоченный список начинается с тега <ul>. Каждый элемент списка начинается с тега <li>.
<html><body> <h4>Неупорядоченный список:</h4><ul><li>элемент 1</li><li>элемент 2</li><li>элемент 3</li></ul> </body></html>Упорядоченные списки
Упорядоченный список также является списком элементов. Элементы списка маркируются с помощью чисел или букв.
Упорядоченный список начинается с тега <ol>. Каждый элемент списка начинается с тега <li>. У тега <ol> может быть два атрибута: start (определяет первое число, с которого начинается нумерация пунктов) и type (определяет стиль нумерации пунктов). Может иметь значения:
"A" - заглавные буквы A, B, C...
"a" - строчные буквы a, b, c...
"I" - большие римские числа I, II, III...
"i" - маленькие римские числа i, ii, iii...
"1" - арабские числа 1, 2, 3...
· <html>· <body>· · <h4>Упорядоченный список:</h4>· <ol>· <li>элемент 1</li>· <li>элемент 2</li>· <li>элемент 3</li>· </ol>· · </body>· </html>ТЕГИ
| Основные теги | |
| <html></html> | Указывает программе просмотра страниц что это HTML документ. |
| <head></head> | Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин. |
| <body></body> | Определяет видимую часть документа |
| Атрибуты тела документа | |
| <bodybgcolor=?> | Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет. |
| <bodytext=?> | Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет. |
| Теги для форматирования текста | |
| <h3></h3> | Создает САМЫЙ БОЛЬШОЙ заголовок |
| <h6></h6> | Создает самый маленький заголовок |
| <b></b> | Создает жирный текст |
| <i></i> | Создает наклонный текст |
| <fontsize=?></font> | Устанавливает размер текста в пределах от 1 до 7. |
| <fontcolor=?></font> | Устанавливает цвет текста, используя значение цвета в виде RRGGBB. |
| Гиперссылки | |
| <a href="URL"></a> | Создает гиперссылку на другие документы или часть текущего документа. |
| Форматирование | |
| <p> | Создает новый параграф |
| <p align=?> | Выравнивает параграф относительно одной из сторон документа, значения: left, right, или center |
| <br> | Вставляет перевод строки. |
| <dl></dl> | Создает список определений. |
| <ol></ol> | Создает нумерованный список |
| <li> | Определяет каждый элемент списка и присваивает номер |
| <ul></ul> | Создает ненумерованный список |
| Графические элементы | |
| <imgsrc="name"> | Добавляет изображение в HTML документ |
| <imgsrc="name" align=?> | Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle |
ПРАКТИКУМ 1.
Создать документ HTML,содержащий основные теги
для определения структуры. Необходимо ВЫПОЛНИТЬ все требования форматирования текста.На рабочем столев папке Проект1 расположено задание (текст), и 2 картинки: logo и city.
Общая информация
Нижнекамский муниципальный район – один из наиболее развитых регионов Республики Татарстан. Обладает крупным индустриально-аграрным производством, строительной и транспортной инфраструктурой, мощным научным и образовательным потенциалом, развитым здравоохранением и сферой социальных услуг.
Нижнекамский муниципальный район расположен в центральной части Республики Татарстан, численность населения около 270 тыс. человек.
По площади (1672,5 кв.км.) занимает среднее положение среди 43 районов Республики.
В состав муниципального образования «Нижнекамский муниципальный район» вошли:
1. город Нижнекамск
2. поселок Камские Поляны
3. 15 сельских поселений из 65 населенных пунктов
Выполнение практикума 1 по шагам:
ШАГ 1
Откройте HTML-Reader. Напечатайте
<html>
<title>Главная</title>
<body>
<h1>Общая информация</h1>
<p><b>Нижнекамский муниципальный район</b> - один из наиболее развитых регионов
Республики Татарстан.
Обладает крупным индустриально-аграрным производством,
строительной и транспортной инфраструктурой, мощным научным и
образовательным потенциалом, развитым здравоохранением и
сферой социальных услуг.</p>
</body>
</html>
Получится так.
ШАГ 2
Разместите текст «Общая информация» по центру.
Добавим тег > <p align=center>
html>
<title>Главная</title>
<body>
<h1><p align=center><font color=FF0000>Общая информация!</font></h1>
<p><b>Нижнекамский муниципальный район</b> - один из наиболее развитых регионов
Республики Татарстан.
Обладает крупным индустриально-аграрным производством,
строительной и транспортной инфраструктурой, мощным научным и
образовательным потенциалом, развитым здравоохранением и
сферой социальных услуг.</p>
</body>
</html>
ШАГ 3
Сделайте текст «Общая информация» красным цветом
Добавим теги <font color=??????> </font><
<html>
<title>Главная</title>
<body>
<h1><p align=center> <font color=FF0000> Общая информация!</font></h1>
<p><b>Нижнекамский муниципальный район</b> - один из наиболее развитых регионов
Республики Татарстан.
Обладает крупным индустриально-аграрным производством,
строительной и транспортной инфраструктурой, мощным научным и
образовательным потенциалом, развитым здравоохранением и
сферой социальных услуг.</p>
</body>
</html>
ШАГ 4
Добавить текст ниже.
<html>
<title>Главная</title>
<body>
<h1><p align=center><font color=FF0000>Общая информация!</font></h1>
<p><b>Нижнекамский муниципальный район</b> - один из наиболее развитых регионов
Республики Татарстан.
Обладает крупным индустриально-аграрным производством,
строительной и транспортной инфраструктурой, мощным научным и
образовательным потенциалом, развитым здравоохранением и
сферой социальных услуг.</p>
<p><i>Нижнекамский муниципальный район расположен в центральной части Республики
Татарстан, численность населения около 270 тыс. человек.</i></p>
<p>По площади (1672,5 кв.км.) занимает среднее положение среди 43 районов Республики. </p>
<p>В состав муниципального образования "Нижнекамский муниципальный район" вошли: </p>
</head>
</html>
ШАГ 5
Сделать нумерованный список.
<html>
<title>Главная</title>
<body>
<h1><p align=center><font color=FF0000>Общая информация!</font></h1>
<p><b>Нижнекамский муниципальный район</b> - один из наиболее развитых регионов
Республики Татарстан.
Обладает крупным индустриально-аграрным производством,
строительной и транспортной инфраструктурой, мощным научным и
образовательным потенциалом, развитым здравоохранением и
сферой социальных услуг.</p>
<p><i>Нижнекамский муниципальный район расположен в центральной части Республики
Татарстан, численность населения около 270 тыс. человек.</i></p>
<p>По площади (1672,5 кв.км.) занимает среднее положение среди 43 районов Республики. </p>
<p>В состав муниципального образования "Нижнекамский муниципальный район" вошли: </p>
<ol>
<li>город Нижнекамск </li>
<li>поселок городского типа Камские Поляны </li>
<li>сельских поселений из 65 населенных пунктов. </li>
</ol>
</head>
</html>
ШАГ 6