2. HTML – язык разметки гипертекста

Preview:

DESCRIPTION

Основы HTML. Структура документа, теги. Абзацы, заголовки, списки. Выделение полужирным и курсивом в HTML. Атрибуты тегов.

Citation preview

HTML – язык разметки гипертекста

Теория и практика

<html><head><title> Моя первая страничка</title></head><body>Я - великий ВЕБ дизайнер. Да – я таков! </body></html>

Тип файла. Теги

ТЕКСТ

Текстовый файлproba.html

ТЭГ

<html><head><title> Моя первая страничка</title></head><body>Я - великий ВЕБ дизайнер. Да – я таков! </body></html>

Структура HTML документа<head> - Служебная чаcть

(для браузера)

<body> - тело документа (страница)

Инструменты для работы

Блокнот - Windows

Notepad++

Adobe Dreamweaver

<html><head><title> Моя первая страничка</title></head><body>Я - великий ВЕБ дизайнер! </body></html>

Сохранить в файл «proba.html»

Практика

Просмотреть в браузере

Абзацы

……….</head><body><p> Обо мне</p><p> Я - великий ВЕБ дизайнер! </p> </body></html>

Заголовки

……….</head><body><h1> Обо мне</h1><p> Я - великий ВЕБ дизайнер! </p> </body></html>

Форматирование текста• курсив и полужирный текст

……….</head><body><h1> Обо мне</h1><p> Я - <strong>великий </strong> ВЕБ <em> дизайнер</em>! </p> </body>…

Вложенность тегов….<body><h1> Обо мне</h1><p>Я - <strong><em>великий</em></strong> ВЕБ дизайнер! </p> </body>…..

<strong><em>великий</strong></em>

Пересечение!

Списки• Маркированный (неупорядоченный)

<p> Я люблю: </p> <ul> <li>кушать</li> <li>спать</li> <li>кодировать в HTML</li> </ul>

Списки (продолжение)

• Нумерованный список<p>Утром я должен:</p> <ol> <li>сделать зарядку</li> <li>почистить зубы</li> <li>сделать Д.З.</li> </ol>

Атрибуты тегов

• <body bgcolor="lime">

Атрибут Значение

Продолжение следует…

Recommended