Рабочие листы
к вашим урокам
Скачать
1 слайд
Создание
Web-страниц
на языке HTML
2 слайд
Основные понятия
HTML расшифровывается HyperText Markup Language (в переводе означает Язык Разметки ГиперТекста).
HTML предназначен для создания веб-страниц во всемирной паутине.
3 слайд
Основные понятия
Тэги - это метки, которые используются для указания браузеру, как он должен показывать web-сайт.
Большая часть HTML тегов состоит из двух частей:
открывающий тег <...>
закрывающий тег </...>
Теги не чувствительны к регистру
4 слайд
Структура HTML документа.
Абсолютно любой документ, построенный на базе HTML будет состоять, по меньшей мере, из следующих тегов:
<HTML> - Это самый главный тег, так как указывает принадлежность документа к HTML языку, заключает в себе всё содержимое веб – страницы, ставится в самом начале и соответственно в конце закрывает документ.
<html>…</html>
<HEAD> - Этот тег не менее важен, в нём размещается не видимая информация о вашем сайте предназначенная для поисковых машин.
<head>…</head>
5 слайд
<TITLE> - Название, оглавление страницы, предназначен для поисковых машин, этот
тег всегда помещается внутри - <head><title>…</title></head>
<BODY> - В этот тег помещается информация, которая должна отображаться в окне браузера.
<body>…</body>
6 слайд
Пример:
<HTML>
<HEAD>
<TITLE> Это моя первая страница</TITLE>
</HEAD>
<BODY> Привет, мир!</BODY>
</HTML>
7 слайд
Чтобы расширить возможности отдельных тегов и более гибко управлять их содержимым применяются атрибуты тегов.
Атрибуты тега тела документа
<body bgcolor="…"> - Цвет фона документа, используя значение цвета в виде RRGGBB.
<body text="..."> - Цвет текста документа
8 слайд
Таблица цветов HTML
9 слайд
<H1>.....<H6> - Определяет величину заголовка по их степени важности.
<h1>.....</h1> - Самый большой заголовок.
<h6>.....</h6> - Самый маленький заголовок.
<b>…..</b> - Определяет текст жирным шрифтом.
<i>…..</i>- Определяет текст наклонным (курсив) шрифтом.
<tt>…..</tt>- Имитирует стиль печатной машинки.
<font color=”…”>…..</font> - Задаёт цвет текста, шестнадцатеричном коде.
<font size="...">…..</font>- Задаёт величину шрифта в пределах от “1” до “7”.
<big>…..</big>- Увеличивает размер текст на условную 1-цу от заданного.
<strong>…..</strong>- Этот тег, браузер определяет как жирное начертание текста.
<em>…..</em>- Этот тег, браузер определяет как наклонное (курсив) начертании текста.
Атрибуты текст документа
10 слайд
Форматирование текста документа
<p>…..</p>- Определяет новый параграф текста с предварительным пропуском одной строки.
< P ALIGN=”…”> - Выравнивает текст относительно одной из сторон документа. Значения: “left”, “right”, “justify, “ center”.
Пример: <p align="center">текст</p> Текст по центру.
11 слайд
<OL> - Определяет нумерованный список.
<LI> - Объекту, заключённому в этот тег присваивается номер.
Также применяется атребут:
start - Указывает стартовый номер.
type - Определяет характер обозначение, буквенный “Ж”, ”ж”, “J”, ”j” или цифровой – “10”, “Х”.
<ol type="… " start="число" >...</ol>
Пример:
<ol type="1" start="3">
<LI>морковь
<LI>капуста
<LI>яблоки
<LI>уксус
<LI>сахар
<LI>соль
</ol>
Результат:
3. морковь
4. капуста
5. яблоки
6. уксус
7. сахар
8. соль
12 слайд
Графические элементы на странице
<img src="name"> Вставляет изображение на страницу.
<img src="name" align="?"> Форматирует положение изображения в документе. Может иметь значения: left, right, center; bottom, top, middle.
<img src="name" border="?">Устанавливает толщину рамки вокруг изображения
<img src="name" vspase="?">Устанавливает поля сверху и снизу
<img src="name" hspase="?">Устанавливает поля слева и справа.
<hr> - Добавляет горизонтальную линию.
<hr width="?"> Указывает ширину линии в пикселах или процентах.
<hr noshade>Линия без тени.
<hr color="?"> Определяет цвет линии.
13 слайд
Создание таблиц
<table></table> Тег создающий таблицу.
<tr></tr> Задает строку в таблице.
<td></td> Задает отдельную ячейку в таблице.
<th></th> Задает заголовок таблицы (обычная ячейка с форматированием по центру и полужирным текстом)
14 слайд
Атрибуты таблицы
<table border="#"> Определяет толщину рамки.
<table cellspacing="#"> Определяет расстояние между ячейками
<table width="#">Устанавливает ширину таблицы. (Значение параметра может быть в пикселях или процентах)
<table height="#">Устанавливает высоту таблицы. (Значение параметра может быть в пикселях или процентах)
<td colspan="#">Указывает количество столбцов, объединенных в одной ячейке.
<td rowspan="#"> Указывает количество строк, объединенных в одной ячейке.
<td width="#"> Задает ширину ячейки таблицы в пикселях или процентах.
<td height="#">Задает высоту ячейки таблицы в пикселях или процентах.
15 слайд
Оформление гиперссылок
<a href="Адрес ресурса - URL"></a> - Задаёт переход на другие ресурсы.
<a href="Имя файла"> - Название страницы</a> - Задаёт переход на другие страницы сайта.
<a href="Имя файла содержащего информацию" target="_blank"> - Название страницы</a> - Задаёт переход на другую страницу сайта в новом окне.
16 слайд
Атрибуты гиперссылок
<atarget="?"></a> Указывает в каком окне открывать гиперссылку.
Цвет текста гиперссылок
Атрибут LINK служит для выделения гиперссылок, которые еще не посещались пользователем.
Атрибут VLINK - уже посещенные ссылки.
Атрибут ALINK - выделяет активную гиперссылку.
17 слайд
Пример:
Гиперссылка может связывать страницы как в пределах одного сайта, так и указывать на любую страницу в Интернете. При построении ссылки на чужие страницы всегда надо пользоваться абсолютным адресом страницы (http://www.site.com/page.html).
Если создается ссылка на страницу в пределах сайта, то предпочтительнее использовать относительный URL (page.html, catalog/page.html). Делая графическую гиперссылку, помните, что некоторым пользователям графика недоступна, поэтому обязательно включайте соответствующие текстовые элементы.
18 слайд
HTML-код:
<a href="http://on-line-teaching.com/index.html">Ссылка на главную страницу сайта</a>
Отображение в браузере:
Ссылка на главную страницу сайта
HTML-код:
<a href="../index.html">Ссылка на главную страницу сайта</a>Отображение в браузере:
Ссылка на главную страницу сайта
19 слайд
Гиперссылка в пределах html страницы
Иногда необходимо сделать гиперссылку в пределах одной страницы. Например, в начале страницы это гиперссылки, позволяющие перейти к просмотру конкретного вопроса, и в самом низу страницы - позволяющей перейти в начало страницы.
Чтобы построить ссылку на область внутри текущей страницы, надо дать этой области название при помощи атрибута NAME тэга <A>. Имя должно содержать только буквы и цифры.
Таким образом можно делать гиперссылки, указывающие на области других страниц внутри сайта.
Пример:
HTML-код:
<a href="#Начало страницы">Наверх страницы</a>
В то место, куда надо сделать переход надо вставить:
<a name="Начало страницы"></a>
Отображение в браузере:
Наверх страницы
20 слайд
Спасибо за внимание!
Презентация выполнена
преподавателем информатики
ГАОУ СПО Калининградской области
«Колледж сервиса и туризма»
Белоусовой Юлии Викторовной
Рабочие листы
к вашим урокам
Скачать
6 677 916 материалов в базе
Настоящий материал опубликован пользователем Вагурина Мария Сергеевна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс профессиональной переподготовки
500/1000 ч.
Курс профессиональной переподготовки
300/600 ч.
Курс профессиональной переподготовки
300/600 ч.
Курс повышения квалификации
72/180 ч.
Мини-курс
4 ч.
Мини-курс
3 ч.
Мини-курс
3 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.