Рабочие листы
к вашим урокам
Скачать
1 слайд
Выполнил студент группы №3.
Титов Виктор. «Тракторист-машинист с/х производства»
Преподаватель: Кравцова М.В.
Интернет -страница и редакторы для её создания.
Государственное автономное профессиональное образовательное учреждение Воронежской области
«Новохопёрский аграрно-экономический техникум»
2 слайд
HTML расшифровывается HyperText Markup Language (в переводе означает Язык Разметки ГиперТекста).
HTML предназначен для создания веб-страниц во всемирной паутине.
Основные понятия
3 слайд
Тэги - это метки, которые используются для указания браузеру, как он должен показывать web-сайт.
Большая часть HTML тегов состоит из двух частей:
открывающий тег <...>
закрывающий тег </...>
Теги не чувствительны к регистру
Основные понятия
4 слайд
Абсолютно любой документ, построенный на базе HTML будет состоять, по меньшей мере, из следующих тегов:
<HTML> - Это самый главный тег, так как указывает принадлежность документа к HTML языку, заключает в себе всё содержимое веб – страницы, ставится в самом начале и соответственно в конце закрывает документ.
<html>…</html>
<HEAD> - Этот тег не менее важен, в нём размещается не видимая информация о вашем сайте предназначенная для поисковых машин.
<head>…</head>
Структура HTML документа.
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>
Отображение в браузере:
Наверх страницы
Рабочие листы
к вашим урокам
Скачать
6 665 120 материалов в базе
Настоящий материал опубликован пользователем Кравцова Марина Васильевна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс повышения квалификации
36 ч. — 180 ч.
Курс профессиональной переподготовки
300 ч. — 1200 ч.
Курс повышения квалификации
72 ч. — 180 ч.
Мини-курс
5 ч.
Мини-курс
2 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.