Презентация на тему: Тема 1. Технология HTML разработки Web-страниц

Тема 1. Технология HTML разработки Web-страниц
Тема 1. Технология HTML разработки Web-страниц
Знакомство с языком HTML
Тема 1. Технология HTML разработки Web-страниц
Тема 1. Технология HTML разработки Web-страниц
Тема 1. Технология HTML разработки Web-страниц
теги и атрибуты
Тема 1. Технология HTML разработки Web-страниц
Заголовок документа – теги <Head> и <Title>
Тело документа – тег <body>
Параметры тега <body>
Оформление текста Заголовки
Абзацы
Точные интервалы
Физическое и логическое форматирование текста
теги физических стилей
Изменение шрифта
Тема 1. Технология HTML разработки Web-страниц
теги логических стилей
Ссылки на веб-страницы
Ссылки на разделы одного документа
Использование графики в HTML
Создание таблиц
Тема 1. Технология HTML разработки Web-страниц
Тема 1. Технология HTML разработки Web-страниц
Создание WEB -страниц в блокноте.
1/26
Средняя оценка: 4.2/5 (всего оценок: 18)
Код скопирован в буфер обмена
Скачать (193 Кб)
1

Первый слайд презентации: Тема 1. Технология HTML разработки Web-страниц

Изображение слайда
2

Слайд 2

Понятие Web-страницы тесно связано с именем Тима Бернерс-Ли, который в 1989 году предложил руководству международного центра высоких энергий (CERN) проект распределенной гипертекстовой системы, которую он назвал W o rld Wide Web – Всемирная паутина. Одним из основных компонентов технологии создания распределенной гипертекстовой системы W o rld Wide Web стал язык гипертекстовой разметки HTML ( HyperText Markup Language )

Изображение слайда
3

Слайд 3: Знакомство с языком HTML

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

Изображение слайда
4

Слайд 4

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

Изображение слайда
5

Слайд 5

Язык HTML описывает документ как совокупность контейнеров, каждый из которых имеет свое начало и конец, обозначенные указателями разметки –  тегами. Теги записываются в < >. Большинство тегов – парные <html>…</html>

Изображение слайда
6

Слайд 6

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

Изображение слайда
7

Слайд 7: теги и атрибуты

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

Изображение слайда
8

Слайд 8

<html> <head> <title> Мой первый шаг </title> </head> <body> Здравствуйте, это моя первая страница. <br> Добро пожаловать! </body> </html> Структура HTML -документа

Изображение слайда
9

Слайд 9: Заголовок документа – теги <Head> и <Title>

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

Изображение слайда
10

Слайд 10: Тело документа – тег <body>

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

Изображение слайда
11

Слайд 11: Параметры тега <body>

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

Изображение слайда
12

Слайд 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

Слайд 13: Абзацы

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

Изображение слайда
14

Слайд 14: Точные интервалы

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

Изображение слайда
15

Слайд 15: Физическое и логическое форматирование текста

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

Изображение слайда
16

Слайд 16: теги физических стилей

<b>…</b> Полужирный шрифт <big>… </big> Увеличенный шрифт <i>…</i> Курсив <small>…</small> Уменьшенный шрифт <u>…</u> Подчеркивание <sup>… </sup> Верхний индекс <s>…</s> Зачеркнутый шрифт <sub>… </sub> Нижний индекс <tt>…</tt> Стиль печатной машинки <blink>…</blink> Мерцающий текст (в Internet Explorer) Можно комбинировать теги стилей: <b><i> Полужирный курсив </i></b>

Изображение слайда
17

Слайд 17: Изменение шрифта

тег <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 ”

Изображение слайда
18

Слайд 18

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

Изображение слайда
19

Слайд 19: теги логических стилей

<abbr> </abbr> Аббревиатура <acronym> </acronym> Сокращение, напр., HTML <cite>… </cite> Библиографическая ссылка, исп. для записи названий книг и пр. (курсив) <samp>… </samp> Текст с «буквальным» смыслом <code> </code> Для текстов программ <var>… </var> Для имен переменных <em>… </em> Визуальное выделение (курсив) <strong>… </strong> Логическое выделение (полужирный) <dfn>… </dfn> Для специальных терминов <kbd>… </kbd> Для технических терминов <q> … </q> Блок цитат (а трибут cite=“URL” - источник цитаты) <address> … </address> Адрес (курсив)

Изображение слайда
20

Слайд 20: Ссылки на веб-страницы

Для записи гипертекстовой ссылки используется тег <a> ( anchor -якорь). В атрибуте href этого тега следует задать UR L того объекта, на который ведется ссылка. < a href = URL > Отображаемое название гипертекстовой ссылки </a>.

Изображение слайда
21

Слайд 21: Ссылки на разделы одного документа

Технология внутренних ссылок в документах состоит в том, что внутри него вначале создается метка вида <a id="имя_метки">…</ a >. Ссылки на метки имеют вид <a href="#имя_метки">…</ a >.

Изображение слайда
22

Слайд 22: Использование графики в HTML

Для вставки изображения используется тег <img> с одним обязательным атрибутом src (SouR C e – источник). В качестве источника выступает файл графических форматов: gif, jpeg, png <img src="ball.png" />

Изображение слайда
23

Слайд 23: Создание таблиц

< table > <caption align=top> Заголовок над таблицей > </caption> <tr> <td>…</td>…<td>…</td> </tr> ……………………………………… <tr> <td>…</td>…<td>…</td> </tr> </ table >

Изображение слайда
24

Слайд 24

<table> <tr> <td>Город</td> <td>Население, тыс.&nbsp;чел.</td> </tr> <tr> <td>Москва</td> <td>10&nbsp;383</td> </tr> <tr> <td>Санкт-Петербург</td> <td>4&nbsp;661</td> </tr> </table>

Изображение слайда
25

Слайд 25

Изображение слайда
26

Последний слайд презентации: Тема 1. Технология HTML разработки Web-страниц: Создание WEB -страниц в блокноте

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

Изображение слайда