Главная / Технология / HTML Введение в HTML Создание HTML-документа

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

Введение в HTML
Создание HTML-документа  	 		Первая веб-страничка 	 	 		Какой –нибудь текст 	...
    Вторая веб-страничка
Использование абзацев   Sed ut perspiciatis unde omnis iste natus error s...
Sed ut perspiciatis unde omnis iste natus error sit voluptatem Accusantium do...
Ссылки   Перейти ко второй странице       Ссылки   Свиттер
• Альтернативный текст изображения (выводит в случае, если загрузка картинки ...
1-я ячейка 2-я ячейка   3-я ячейка 4-я ячейка
Параметры таблиц Основными параметрами таблиц являются: • align – выравниван...
Особенности таблиц: • Таблицы могут образовывать вложенность. То есть одна та...
              На главную На главную На главную
Домашнее задание • Выбрать и установить у себя на компьютере редактор HTML ко...
Для верстки страницы используйте таблицу (все содержимое страницы должно быт...
1 из 13

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

№ слайда 1 Введение в HTML
Описание слайда:

Введение в HTML

№ слайда 2 Создание HTML-документа  	 		Первая веб-страничка 	 	 		Какой –нибудь текст
Описание слайда:

Создание 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> <br> </body> </html>

№ слайда 4 Использование абзацев   Sed ut perspiciatis unde omnis iste natus error sit
Описание слайда:

<!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 dolor
Описание слайда:

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 1-я ячейка 2-я ячейка   3-я ячейка 4-я ячейка
Описание слайда:

<!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 – выравнивание
Описание слайда:

Параметры таблиц Основными параметрами таблиц являются: • 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> <br/> <a href=“index.php”>На главную</a> <a href=‘index.php’ >На главную</a> <a href=“index.php >На главную</a>

№ слайда 12 Домашнее задание • Выбрать и установить у себя на компьютере редактор HTML кода
Описание слайда:

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

№ слайда 13 Для верстки страницы используйте таблицу (все содержимое страницы должно быть п
Описание слайда:

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

HTML Введение в HTML Создание HTML-документа
  • Технология
Описание:

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

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

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

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

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

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

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

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

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

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

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

Автор Назаренко Игорь Павлович
Дата добавления 25.12.2014
Раздел Технология
Подраздел
Просмотров 299
Номер материала 12039
Скачать свидетельство о публикации

Оставьте свой комментарий:

Введите символы, которые изображены на картинке:

Получить новый код
* Обязательные для заполнения.


Комментарии:

↓ Показать еще коментарии ↓