'

Секция «Основы сайтостроения»

Понравилась презентация – покажи это...





Слайд 0

Секция «Основы сайтостроения» Кротова Т.В. Овчарова О.П.


Слайд 1

Цели секции Знакомство слушателей с технологией создания Web-страниц с использованием языка HTML и каскадных таблиц стилей Демонстрация результатов работы учащихся профиля «Интернет-технологии»


Слайд 2

План работы секции «Создание Web-страниц средствами HTML» (40 мин.) «Изменение внешнего вида страницы с использованием технологии CSS» (30 мин.) Презентация работ учащихся профиля «Интернет-технологии» (20 мин.)


Слайд 3

«Создание Web-страниц средствами HTML» Кротова Т.В.


Слайд 4

Web-конструирование. HTML Введение в HTML. Программирование вывода текста. Абзац, заголовок, пользовательское форматирование. Выделение участков текста. Цветовое решение Web-документа. Дизайн Web-документа. Стиль страниц Web-документа. Стиль программирования. Списки и иерархия. Нумерованный, маркированный список. Вложенный список. Список – определение. Гипертекст. Ссылка внутри Web-документа. Ссылки на другой Web-документа. Таблицы. Использование таблиц для формирования структуры страницы Web-документа. Вставка графических изображений на страницу Web-документа. Взаимное расположение графического изображения и текста. Зачетный творческий проект. Защита творческого проекта.


Слайд 5

Основные понятия HTML (HyperText Markup Language) – язык разметки гипертекста. Гиперссылка – чувствительная область на экране, позволяющая осуществить переход к другому документу или к другой части текущего документа. Гипертекст – это особый текст, в котором есть ссылка на другую Web-страницу или документ. Тег – команда языка HTML, заключенная в угловые скобки.


Слайд 6

Теги и атрибуты тегов <P align=right> Текущий абзац будет выровнен по правому краю </P>


Слайд 7

Особые требования Создание HTML-кода только в Блокноте Имена тегов писать заглавными буквами, имена атрибутов – строчными Демонстрировать структурность программы (отступы для вложенных конструкций) Длина каждой строки HTML-кода – не более 80 символов


Слайд 8

Структура HTML-программы <HTML> <HEAD> <META ……… > <TITLE> Заголовок окна браузера </TITLE> </HEAD> <BODY> Теги для разметки содержимого Web-странички </BODY> </HTML>


Слайд 9

Программирование абзацев и заголовков <P> текст абзаца </P> Абзац <BR> Принудительный разрыв строки в абзаце <Hn>Заголовок</Hn> Заголовок n-го уровня <HR> Горизонтальная линия <PRE> Текст </PRE> Вывод текста на экран браузера в неизменном виде <SUB>Индекс</SUB> Нижний индекс <SUP>Индекс</SUP> Верхний индекс <B> Текст</B> Полужирный текст <I> Текст </I> Курсив


Слайд 10

Списки Маркированный Нумерованный Список определений


Слайд 11

Программирование маркированного списка <UL> <LI> 1 элемент </LI> <LI> 2 элемент </LI> ………………… <LI>n элемент </LI> </UL>


Слайд 12

Программирование нумерованного списка <OL> <LI> 1 элемент </LI> <LI> 2 элемент </LI> ………………… <LI> n элемент </LI> </OL>


Слайд 13

Программирование списка определений <DL> <DT> Термин1 </DT> <DD> определение термина 1 </DD> …………….. <DT> Термин n </DT> <DD> определение термина n </DD> </DL>


Слайд 14

Программирование картинок <IMG src=имя файла> Необязательные атрибуты тега IMG: alt width и height border hspace и vspace align


Слайд 15

Программирование таблиц <TABLE> <TR> 1 строка таблицы <TD>…</TD> 1 ячейка строки 1 ……………… <TD>…</TD> n ячейка строки 1 </TR> <TR> 2 строка таблицы <TD>…</TD> 1 ячейка строки 2 ……………… <TD>…</TD> n ячейка строки 2 </TR> ……………………. <TR> m строка таблицы <TD>…</TD> 1 ячейка строки n ……………… <TD>…</TD> n ячейка строки n </TR> </TABLE>


Слайд 16

Гиперссылки Переход внутри одного документа Переход к другому документу Переход к метке другого документа


Слайд 17

Организация перехода к метке текущего документа <A href=#метка> Текст гиперссылки</A> …………… ………. <A name=метка></A>


Слайд 18

Организация перехода к другому документу К началу документа <A href=и_ф> Текст гиперссылки</A> К метке другого документа Первый файл <A href=и_ф#метка> Текст гиперссылки</A> Второй файл <A name=метка></A>


×

HTML:





Ссылка: