Рабочие листы
к вашим урокам
Скачать
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).
• Задание со звездочкой:). При нажатии на картинку она должна открываться в отдельном окне браузера.
6 660 953 материала в базе
Настоящий материал опубликован пользователем Назаренко Игорь Павлович. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс профессиональной переподготовки
500/1000 ч.
Курс повышения квалификации
180 ч.
Курс профессиональной переподготовки
300/600 ч.
Курс повышения квалификации
72 ч.
Мини-курс
2 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.