Урок 2 - informlessons.files.wordpress.com · Содержание урока •...
Transcript of Урок 2 - informlessons.files.wordpress.com · Содержание урока •...
![Page 1: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/1.jpg)
Урок 2
Основы HTML
![Page 2: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/2.jpg)
Содержание урока
• Структура HTML документа
• Основные теги оформления текста
• Спецсимволы
• Гиперссылки• Гиперссылки
• Изображения
• Списки
• Формы и их элементы
![Page 3: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/3.jpg)
Структура HTML документа
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Мой первый документ</title>
<meta http-equiv="Content-Type" content="text/html; charset=win-1251">
</head>
<body>
…
</body>
</html>
![Page 4: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/4.jpg)
Основные теги оформления текстаОсновные теги оформления текста
![Page 5: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/5.jpg)
Заголовки
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвертого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>
![Page 6: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/6.jpg)
Параграфы
<p>Здесь мы напишем первый параграф.</p>
<p>А здесь мы напишем второй.</p>
<p>И для третьего место тоже найдется.</p>
![Page 7: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/7.jpg)
Теги выделения текста
<b>…</b> текст будет
<strong>…</strong> жирным
<i>…</i> в этом случае<i>…</i> в этом случае
<em>…</em> курсивное начертание
<u></u> подчеркнутый
![Page 8: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/8.jpg)
H<sub>2</sub>O - H2O
М<sup>2</sup> - м2
<pre>
Я Московский озорной гулякаЯ Московский озорной гулякаПо всему Тверскому околотку
</pre>
![Page 9: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/9.jpg)
Вложенные теги
<p>Использовать вложенность тегов
<b>легко
<i>и просто</i>
</b>
</p>
![Page 10: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/10.jpg)
Спецсимволы
© - значок копирайта
< и > - символы < и >
« и » - символы « и »
← и → - символы и← и → - символы и
- неразрывной пробел
— - длинное тире
![Page 11: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/11.jpg)
Пример использования
<p>
<b>Этот текс будет жирным <b>
</p>
![Page 12: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/12.jpg)
Комментарии
<!-- Здесь можно писать комментарий,
который не будет отображаться в
документе -->
![Page 13: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/13.jpg)
ГиперссылкиГиперссылки
![Page 14: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/14.jpg)
<a href=“file.html”>
текст ссылки, который видит пользователь
</a>
![Page 15: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/15.jpg)
Относительные ссылки
Из index.html в new_order.html
<a href=“orders/new_order.html”>новый заказ</a>
Из new_order.html в index.html
<a href=“../index.html”>главная</a>
![Page 16: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/16.jpg)
Абсолютные ссылки
<a href=“http://yandex.ru” target=“_blank” >
перейти на яндекс
</a>
![Page 17: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/17.jpg)
Якоря в гиперссылках
<a href=“#p10”>прочитать 10 параграф</a>
<h1 id=“p10”><h1 id=“p10”>
Вот и долгожданный параграф
</h1>
![Page 18: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/18.jpg)
ИзображенияИзображения
![Page 19: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/19.jpg)
Формат JPEG (JPG)
Плюсы:• Небольшой размер файла
• Поддерживает 16 млн. цветов
• Можно управлять качеством
изображения при сохраненииизображения при сохранении
Минусы:• При сжатии размеров теряется
качество
• Не поддерживает прозрачность
![Page 20: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/20.jpg)
Формат GIF
Плюсы:• Поддерживает анимацию
• Поддерживает прозрачность
• При сжатии не теряет в качестве
Минусы:Минусы:• Кол-во цветов до 256
![Page 21: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/21.jpg)
Формат PNG
Плюсы:• Поддерживает прозрачность
• При сжатии не теряет в качестве
Минусы:• Кол-во цветов до 256
PNG - 8
• Кол-во цветов до 256
Плюсы:• При сжатии не теряет в качестве
• Использует 16 млн. цветов
• Плавный переход от прозрачной области к цветной
Минусы:•Большой размер файла
PNG - 24
![Page 22: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/22.jpg)
Формат – JPEG
Разрешение – 400 х 249 Пикс
Размер файла – 11,5 Кб
Формат – GIF
Разрешение – 400 х 249 Пикс
Размер файла – 40,8 Кб Размер файла – 40,8 Кб
Формат – PNG-24
Разрешение – 400 х 249 Пикс
Размер файла – 186 Кб
![Page 23: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/23.jpg)
<img
src=“img/my_foto.jpg”
alt=“это моя фотография”
Вставка изображения на страницу
title = “это моя фотография”
width=“300”
height=“300”
/>
![Page 24: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/24.jpg)
СпискиСписки
![Page 25: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/25.jpg)
Маркированные списки
<ul>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li><li>Третий элемент</li>
</ul>
![Page 26: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/26.jpg)
Нумерованные списки
<ol>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li><li>Третий элемент</li>
</ol>
![Page 27: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/27.jpg)
Формы и их элементыФормы и их элементы
![Page 28: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/28.jpg)
Структура
<form action=“file.php“
method=“post”
enctype =“multipart/form-data”
> >
<fieldset>
<legend>Контактные данные</legend>
…
</fieldset>
</form>
![Page 29: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/29.jpg)
Элементы форм
<textarea cols=“30” rows=“5” name=“title” >
</textarea>
<select name=“year” multiple=“multiple“ size=“2”> <select name=“year” multiple=“multiple“ size=“2”>
<option value=“1”>1981</option>
<option value=“2” selected=“selected”>1982</option>
</select>
<input type=“text” name=“title” value=“…” />
![Page 30: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/30.jpg)
Элемент <input />
<input type=“text” size=“50” />
<input type=“password” size=“30” />
<input type=“checkbox” checked="checked" />
<input type=“radio” /><input type=“radio” />
<input type=“submit” value=“сохранить” />
<input type=“reset” value=“очистить” />
<input type=“button” value=“просто кнопка” />
<input type=“file” />
![Page 31: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/31.jpg)
Как я запомню такое количество
тегов и атрибутов???
![Page 32: Урок 2 - informlessons.files.wordpress.com · Содержание урока • Структура html документа • Основные теги оформления](https://reader034.fdocuments.net/reader034/viewer/2022050719/5e191100047b527ff635c0df/html5/thumbnails/32.jpg)
Ответ:
Запомните на практике, учитесь пользоваться
справочниками.
Например:Например:
Htmlbook.ru