HTML Введение в HTML Создание HTML-документа

PPTX

Описание презентации по отдельным слайдам:

1 слайд

Введение в HTML
2 слайд

Создание HTML-документа
<Html>
<head>
<title>Первая веб-страничка</title>
<head>
<body>
Какой –нибудь текст
</Body>
</html>
<название_тега параметр1=“значение1” параметр2=“значение2”> либо

<название_тега параметр1=“значение1” параметр2=”значение2”>…</тег>
3 слайд

<!DOCTYPE html PUBLIC “-/ /W3C/ /DTD HTML 4.01 Transitional/ /EN”>
<html>
<head>
<meta content=“text/html; charset=Windows-1251” http-equiv=“content-type”>
<title>Вторая веб-страничка</title>
</head>
<body>

</body>
</html>
4 слайд

<!DOCTYPE html PUBLIC “-/ /W3C/ /DTD HTML 4.01 Transitional/ /EN”>
<html>
<head>
<meta content=“text/html; charset=Windows-1251” http-equiv=“content-type”>
<title>Использование абзацев</title>
</head>
<body>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, tptam rem aperiam, eaque ipsa quae ab illo invertore
veritatis et quasi arhitecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </p>
<p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt
ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima
veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi
Ut aliquid ex ea commodi consequatur?</p>
</body>
</html>
5 слайд

Sed ut perspiciatis unde omnis iste natus error sit voluptatem
Accusantium doloremque laudantium, …
<!DOCTYPE html PUBLIC “-/ /W3C/ /DTD HTML 4.01 Transitional/ /EN”>
<html>
<head>
<meta content=“text/html; charset=Windows-1251” http-equiv=“content-type”>
<title>Использование абзацев</title>
</head>
<body>
<h1>Введение в HTML</h1>
<h2>Ключевые понятия</h2>
<h3>Форматирование текста</h3>
<h3>Оформление ссылок</h3>
<body>
</html>
<b>Жирный текст</b>
<i>Курсивный текст</i>
<U>Подчеркнутый текст</u>
6 слайд

<!DOCTYPE html PUBLIC “-/ /W3C/ /DTD HTML 4.01 Transitional/ /EN”>
<html>
<head>
<meta content=“text/html; charset=Windows-1251” http-equiv=“content-type”>
<title>Ссылки</title>
</head>
<body>
<a href=“page2.html”>Перейти ко второй странице</a>
</body>
</html>
<!DOCTYPE html PUBLIC “-/ /W3C/ /DTD HTML 4.01 Transitional/ /EN”>
<html>
<head>
<meta content=“text/html; charset=Windows-1251” http-equiv=“content-type”>
<title>Ссылки</title>
</head>
<body>
<a href=“http://www.svitter.ru”>Свиттер</a>
</body>
</html>
7 слайд

• Альтернативный текст изображения (выводит в случае, если загрузка картинки невозможна)
• Размеры изображения
• Параметры рамки вокруг изображения
• Параметры выравнивания изображения
<a href=“../second/page2.html”>Перейти ко второй странице</a>
<a href=http://www.svitter.ru target=“_blank”>Свиттер</a>
<!DOCTYPE html PUBLIC “-/ /W3C/ /DTD HTML 4.01 Transitional/ /EN”>
<html>
<head>
<meta content=“text/html; charset=Windows-1251” http-equiv=“content-type”>
<title>Использование абзацев</title>
</head>
<body>
<img src=“http://www.htmlbook.ru/images/sample.gif”> - абсолютный адрес размещения изображения
<img src=“img/img.gif”> - адрес размещения изображения относительно текущего HTML-документа
</body>
</html>
8 слайд

<!DOCTYPE html PUBLIC “-/ /W3C/ /DTD HTML 4.01 Transitional/ /EN”>
<html>
<body border=“1”>

<table>
<tr>
<td>1-я ячейка</td>
<td>2-я ячейка</dt>
</tr>
<tr>
<td>3-я ячейка</td>
<td>4-я ячейка</td>
</tr>
</table>

</body>
</html>
9 слайд

Параметры таблиц
Основными параметрами таблиц являются:
• align – выравнивание таблицы.
• bgcolor – цвет фона таблицы.
• border – толщина рамки таблицы.
• bordercolor – цвет рамки таблицы.
• height – высота таблицы
• width – ширина таблицы
• cellpadding – расстояние между границей ячейки и её содержимым
• cellspacing – расстояние между ячейками таблицы
Параметры ячеек
Среди параметров ячеек выделим:
• align – выравнивание содержимого ячейки по горизонтали.
• valign - выравнивание содержимого ячейки по вертикали.
• bgcolor – цвет фона ячейки.
• bordercolor – цвет рамки вокруг ячейки.
• height – высота ячейки
• width – ширина ячейки
• colspan – число ячеек, которые должны быть объединены в одну по горизонтали.
• rowspan – число ячеек, которые должны быть объединены в одну по вертикали
10 слайд

Особенности таблиц:
• Таблицы могут образовывать вложенность. То есть одна таблица может быть
помещена внутрь ячейки другой. Это очень полезное свойство при верстке сайта с
помощью таблиц.
• Если размеры таблицы не заданы отдельно, то они вычисляются на основе
содержимого ячеек. То есть таблица растягивается в зависимости от наполнения.
• Если у таблицы указан атрибут border и не указан bordercolor, то рамка таблицы
будет трехмерной. Указание bordercolor убирает трехмерность.
11 слайд

<university>
<group name=“E31”>
<student name=“Kovalev” seven=”female” />
<student name=“Victor” sex=“male” />
</group>
<group name=“E33”>
<student name=“Kotova” sex=”female” />
<student name=“Larisa” sex=“male” />
</group>
</university>
<group></group>
<student />

<br/>
<a href=“index.php”>На главную</a>
<a href=‘index.php’ >На главную</a>
<a href=“index.php >На главную</a>
12 слайд

Домашнее задание
• Выбрать и установить у себя на компьютере редактор HTML кода
• Найти в интернете html-справочник, скачать его себе.
• Создать HTML-страницу, в которой использовать ВСЕ теги, встречающиеся в
этом уроке.
• Предлагается создать страницу по следующему макету:
13 слайд

Для верстки страницы используйте таблицу (все содержимое страницы должно быть помещено в ячейки таблицы). Ячейки таблицы должны быть отделены друг от друга линиями.
• Ссылки меню слева должны быть рабочими и вести на любые другие страницы (пример: yandex.ru).
• Задание со звездочкой:). При нажатии на картинку она должна открываться в отдельном окне браузера.

Краткое описание материала

Особенности таблиц:

• Таблицы могут образовывать вложенность. То есть одна таблица может быть

помещена внутрь ячейки другой. Это очень полезное свойство при верстке сайта с

помощью таблиц.

• Если размеры таблицы не заданы отдельно, то они вычисляются на основе

содержимого ячеек. То есть таблица растягивается в зависимости от наполнения.

• Если у таблицы указан атрибут border и не указан bordercolor, то рамка таблицы

будет трехмерной. Указание bordercolor убирает трехмерность.

Для верстки страницы используйте таблицу (все содержимое страницы должно быть помещено в ячейки таблицы). Ячейки таблицы должны быть отделены друг от друга линиями.

• Ссылки меню слева должны быть рабочими и вести на любые другие страницы (пример: yandex.ru).

• Задание со звездочкой:). При нажатии на картинку она должна открываться в отдельном окне браузера.

Описание презентации по отдельным слайдам

HTML Введение в HTML Создание HTML-документа

Труд (технология)

Другие методич. материалы

25.12.2014

622

Файл будет скачан в формате:

PPTX

Автор материала

Назаренко Игорь Павлович

заместитель директора по безопасности

На сайте: 10 лет и 6 месяцев
Всего просмотров: 166566
Подписчики: 1
Всего материалов: 73

166566
просмотров
73
материалов
1
подписчиков

Настоящий материал опубликован пользователем Назаренко Игорь Павлович.
Инфоурок является информационным посредником. Всю ответственность за опубликованные материалы несут пользователи, загрузившие материал на сайт. Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.