545
реклама
HTML Hyper Text ЯЗЫК Markup ГИПЕРТЕКСТА Language РАЗМЕТКИ HTML — язык дескрипторов Дескриптор (tag) - это некое ключевое слово или сокращение. tag - "признак", "метка", "маркер" <tag> ТЕКСТ </tag> Содержание • Начертание текста • Абзацы • Специальные символы • Переносы • Шрифты • Логическая разметка • Списки • Графика • Гиперссылки • Таблицы Начертание текста КУРСИВ (Italic) <I> ТЕКСТ </I> <I>Черный тополь</I> Черный тополь ЖИРНЫЙ ШРИФТ (Bold) <B> ТЕКСТ </B> <B>Черный тополь</B> Черный тополь Подчеркивание (Underline) <U> ТЕКСТ </U> <U>Черный тополь</U> Черный тополь Абзацы Разрыв строки строка1 <BR> строка2 Дело было вечером,<BR>Делать было нечего Дело было вечером, Делать было нечего Абзац (paragraph) <P> ТЕКСТ </P> <P>Дело было вечером,</P> <P>Делать было нечего</P> Дело было вечером, Делать было нечего Абзац с параметрами <P align=параметр> Параметры: Right – правый край Left – <P align=right>Дело было вечером,</P> <P край align=center>Делать было нечего</P> левый Center – по центру Justify – по ширине Дело было вечером, Делать было нечего Абзац с параметрами <P align=параметр> Параметры: Right – правый край Left – <P align=right>Дело было вечером,<BR> Делать левый крайбыло нечего</P> Center – по центру Justify – по ширине Дело было вечером, Делать было нечего Задание 1 Специальные символы Символ «и» “и” „ -и <и> Код &laquo; и &raquo; &ldquo; и &rdquo; &bdquo; &mdash; и &ndash; &lt и &gt неразрывный пробел &nbsp & &amp Переносы Текст без переноса <NOBR> ТЕКСТ </NOBR> <NOBR>У Лукоморья дуб зеленый, златая цепь на дубе том</NOBR> У Лукоморья дуб зеленый, златая це Перенос слова (текста) ТЕКСТ <WBR> ТЕКСТ <NOBR>У Лукоморья дуб зеленый, златая <WBR> цепь на дубе том</NOBR> У Лукоморья дуб зеленый, златая цепь на дубе том Задание 2 Шрифты Дескриптор <FONT> <FONT параметры>ТЕКСТ</FONT> Параметры: Face – гарнитура (вид) Size – размер Color – цвет Гарнитура <FONT face=шрифт> ТЕКСТ </FONT> Привет,<FONT face=Courier> МЕДВЕД!</FONT> Привет, МЕДВЕД! Гарнитура <FONT face=шрифт> ТЕКСТ </FONT> Привет,<FONT face=“Times New Roman”> МЕДВЕД!</FONT> Привет, МЕДВЕД! Размер <FONT size=число> ТЕКСТ </FONT> <FONT size=2> Размер текста 2 </FONT><BR> <FONT size=3> Размер текста 3 </FONT> Размер текста 2 Размер текста 3 число = 1-7 Размер <FONT size=число> ТЕКСТ </FONT> <FONT size=7> Размер текста 7 </FONT><BR> число = 1-7 <FONT size=8> Размер текста 8 </FONT> Размер текста 7 Размер текста 8 Размер <FONT size=число> ТЕКСТ </FONT> Это стандартный текст <BR> <FONT size=-2> Меньше на 2 </FONT><BR> относительно стандартного: + больше - меньше <FONT size=+2> Больше на 2 </FONT> Это стандартный текст Меньше на 2 Больше на 2 Цвет <FONT color=код> ТЕКСТ </FONT> <FONT color=mediumaquamarine> Цвет морской волны</FONT><BR> код = #00-FF код = название (red, black …) <FONT color=#CDAA> А это Коды какой одного цвет? </FONT> цвета! Причина – монитор! Цвет морской волны А это какой цвет? Таблица базовых цветов Палитра Netscape ШРИФТ с несколькими параметрами <FONT пар1 пар2>ТЕКСТ</FONT> <FONT face=Courier size=+2> Свежий ветер</FONT> Свежий ветер ШРИФТ с несколькими параметрами <FONT параметры> <tag> ТЕКСТ <tag> ТЕКСТ</FONT> <FONT face=Courier size=+2> Свежий <S>ветер</S></FONT> Свежий ветер tag: I,U,B, S - зачеркнутый Параметры шрифта по умолчанию <BASEFONT параметры> обычно ставят в начале страницы текста <BASEFONT face=Courier size=2> <FONT color=red>Лучше меньше</FONT> <FONT color=Blue>да лучше!</FONT> Лучше меньше да лучше! Задание 3 Учитель, применяющий ИКТ должен усвоить золотое правило: использование ИКТ на уроках должно быть не самоцелью, а во благо самого процесса обучения и обучающихся. Такая работа требует другой дидактической системы, иных методов и технологий обучения, адекватных личностно-ориентированному подходу в образовании. Эффективность любого урока определяется не тем, что дает детям учитель, а тем, что они взяли в процессе обучения. Умение рационально применять ИКТ с традиционными средствами обучения позволяет учителю создавать ту палитру красок, с помощью которой создается неповторимый шедевр – современный урок. Логическая разметка Физическая разметка текста внешний вид текста (шрифт, размер, цвет, начертание) Логическая разметка текста роль текста на странице (заголовок, цитата, акцент, верхний и нижний индекс, пояснения) Заголовки (header) <Hn>ТЕКСТ</Hn> <H1>Глава первая</H1> <H2>Параграф 1</H2> Глава первая Параграф 1 n = 1- 6 Заголовки (header) <Hn>ТЕКСТ</Hn> n = 1- 6 <H1 align=right>Глава первая</H1> <H2 align=center>Параграф 1</H2> Глава первая Параграф 1 Акценты <EM>ТЕКСТ</EM> <STRONG>ТЕКСТ</STRONG> Здесь выделен <EM>важный момент</EM>. А здесь выделен <STRONG>очень важный момент</STRONG>. Здесь выделен важный момент. А здесь выделен очень важный момент. Цитаты <CITE>ТЕКСТ</CITE> <BLOCKQUOTE>ТЕКСТ</BLOCKQUOTE> Кто сказал: &laquo; <CITE>МЯУ</CITE> &raquo;?<BR> А вот строки из стихотворения:<BLOCKQUOTE>Я помню чудное мгновенье <BR>Передо мной явилась ты </BLOCKQUOTE> Кто сказал: « МЯУ »? А вот строки из стихотворения: Я помню чудное мгновенье Передо мной явилась ты Верхний и нижний индексы <SUB>ТЕКСТ</SUB> …(нижний) <SUP>ТЕКСТ</SUP> …(верхний) H<SUB>2</SUB>SO<SUB>4</SUB> &nbsp E=mc<SUP>2</SUP> H2SO4 E=mc2 Пояснения <ACRONYM title=“пояснение”>ТЕКСТ</ACRONYM> Для разметки текста на WEB-странице используют язык <ACRONYM title=“HyperText Markup Language”> <U>HTML</U> </ACRONYM>. Для разметки текста на WEB-странице используют язык HTML HyperText Markup Language Задание 4 Списки Общая конструкция Д - дескриптор <Д1 параметры всего списка> <Д2 параметры элемента 1> Элемент1</Д2> <Д2 параметра элемента 2> Элемент2</Д2> …………………………………………………………………………… </Д1> Нумерованные списки <OL> <LI>Элемент1</LI> <LI>Элемент2</LI> </OL> Нумерованные списки Все компьютеры имеют три основных блока: <OL> <LI>Монитор</LI> <LI>Системный блок</LI> <LI>Клавиатуру</LI> </OL> Все компьютеры имеют три основных блока: 1. Монитор 2. Системный блок 3. Клавиатуру Нумерованные списки Все компьютеры имеют три основных блока: <OL start=0> <LI>Монитор</LI> <LI>Системный блок</LI> <LI>Клавиатуру</LI> </OL> Все компьютеры имеют три основных блока: 0. Монитор 1. Системный блок 2. Клавиатуру Нумерованные списки Все компьютеры имеют три основных блока: <OL type=I> I <LI>Монитор</LI> <LI>Системный блок</LI> <LI>Клавиатуру</LI> </OL> Все компьютеры имеют три основных блока: I. Монитор II. Системный блок III. Клавиатуру Нумерованные списки Все компьютеры имеют три основных блока: <OL type=A> A <LI>Монитор</LI> <LI>Системный блок</LI> <LI>Клавиатуру</LI> </OL> Все компьютеры имеют три основных блока: A. Монитор B. Системный блок C. Клавиатуру Нумерованные списки Все компьютеры имеют три основных блока: value <OL> <LI>Монитор</LI> <LI value=5>Системный блок</LI> <LI>Клавиатуру</LI> </OL> Все компьютеры имеют три основных блока: 1. Монитор 5. Системный блок 6. Клавиатуру Маркированные списки <UL> <LI>Элемент1</LI> <LI>Элемент2</LI> </UL> Маркированные списки Все компьютеры имеют три основных блока: <UL> <LI>Монитор</LI> <LI>Системный блок</LI> <LI>Клавиатуру</LI> </UL> Все компьютеры имеют три основных блока: • Монитор • Системный блок • Клавиатуру Маркированные списки Все компьютеры имеют три основных блока: circle <UL type=circle> <LI>Монитор</LI> <LI>Системный блок</LI> <LI>Клавиатуру</LI> </UL> Все компьютеры имеют три основных блока: o Монитор o Системный блок o Клавиатуру Маркированные списки Все компьютеры имеют три основных блока: square <UL type=square> <LI>Монитор</LI> <LI>Системный блок</LI> <LI>Клавиатуру</LI> </UL> Все компьютеры имеют три основных блока: Монитор Системный блок Клавиатуру Маркированные списки Все компьютеры имеют три основных блока: <UL> <LI>Монитор</LI> <LI type=circle>Системный блок</LI> <LI type=square>Клавиатуру</LI> </UL> Все компьютеры имеют три основных блока: • Монитор o Системный блок Клавиатуру Задание 5 Графика Вставка изображения <IMG src=имя картинки> <IMG src=tiger.jpg> Файл картинки находится в одной папке с HTMLфайлом Вставка изображения <IMG src=имя картинки> <IMG src=“Images/tiger.jpg”> Файл картинки находится в папке Images Вставка изображения <IMG src=имя картинки> <IMG src=“Images/tiger.jpg”> Файл картинки НЕ НАЙДЕН! Размеры изображения <IMG src=“имя картинки” width=A height=B> Если задан только один параметр, то размер меняется пропорционально. Height = 615 Width = 400 Размеры изображения <IMG src=“Images/tiger.jpg” width=100> Размеры изображения <IMG src=“Images/tiger.jpg” width=100 height=500> <IMG src=“Images/tiger.jpg” width=500 height=100> Размеры изображения <IMG src=“Images/tiger.jpg” width=100%> <IMG src=“Images/tiger.jpg” width=100% height=100%> При изменении размера окна браузера, изменяется только ширина картинки. При изменении размера окна браузера, изменяется ширина и высота картинки. Подпись изображения <IMG src=“имя картинки” alt=подпись> <IMG src=“Images/tiger.jpg” alt=“Это Тигра”> Это Тигра Обтекание графики текстом <IMG src=“имя картинки” align=…> <IMG src=“Images/tiger.jpg” align=left> Это веселый и энергичный персонаж из фильма “Вини и его друзья”. Его зовут Тигра. Он любит прыгать, играть и танцевать. По прыжкам в высоту ему нет равных. Словно в его хвосте кто-то установил пружину. Это веселый и энергичный персонаж из фильма “Вини и его друзья”. Его зовут Тигра. Он любит прыгать, играть и танцевать. По прыжкам в высоту ему нет равных. Словно в его хвосте кто-то установил пружину. Отступы <IMG src=“имя картинки” align=… hspace= … vspace= …> <IMG src=“Images/tiger.jpg” align=left hspace=20 vspace=20> Это веселый и энергичный персонаж Отступ из по Отступ по фильма “Вини и его друзья”. вертикали горизонтали Его зовут Тигра. Он любит прыгать, играть и танцевать. По прыжкам в высоту ему нет равных. Словно в его хвосте кто-то установил пружину. Это веселый и энергичный персонаж из фильма “Вини и его друзья”. Его зовут Тигра. Он любит прыгать, играть и танцевать. По прыжкам в высоту ему нет равных. Словно в его хвосте кто-то установил пружину. Выравнивание по вертикали <IMG src=“имя картинки” align=…> Absbottom Baseline Жил-был - румяный бок. Bottom Absmiddle Жил-был - румяный бок. Middle Texttop Жил-был - румяный бок. Top Изображение в рамке <IMG src=“имя картинки” border=…> <IMG src=“Images/tiger.jpg” border=1> <IMG src=“Images/tiger.jpg” border=6> Задание 6 Гиперссылки Что такое гиперссылка? Гиперссылка (hyperlink) указатель внутри гипертекстового документа, указывающий на другой документ (связывает с другим документом). Точка входа <A href=“адрес перехода”>текст-ссылка</A> Anchor - якорь Новости вы можете посмотреть на <a href=“http://www.minuspk.ru”>сайте колледжа</a>. Новости вы можете посмотреть на сайте колледжа. Закладки <A name=“begin”> <A href=“#a1”> ссылка метка <A name=“a1”> <A name=“end”> </A> Задание 7 Этапы подготовки и решения задач на ЭВМ На ЭВМ могут решаться задачи различного характера, например: научно-инженерные; разработки системного программного обеспечения; обучения; управления производственными процессами и т. д. В процессе подготовки и решения на ЭВМ научно -инженерных задач можно выделить следующие этапы: постановка задачи; математическое описание задачи; выбор и обоснование метода решения; алгоритмизация вычислительного процесса; составление программы; отладка программы; решение задачи на ЭВМ и анализ результатов. В задачах другого класса некоторые этапы могут отсутствовать, например, в задачах разработки системного программного обеспечения отсутствует математическое описание. Перечисленные этапы связаны друг с другом. Ссылка на e-mail <A href=“mailto:адрес”>текст-ссылка</A> Написать письмо можно <a href=“mailto: [email protected]”> здесь</a> Ссылка на e-mail <A href=“mailto:адрес1;адрес2 ?subject=тема письма&amp;body=текст письма”> текст-ссылка</A> <a href="mailto:[email protected] ?subject=Пробное_письмо&amp;body= Привет!"> Задание 8 Отправить письмо можно здесь. адрес своей эл. почты Письмо от Петровой Анны Практическая работа выполнена на компьютере N6. Ссылки - картинки <A href=“адрес ссылки”><img src=“имя картинки”></A> Адрес ссылки Отключение рамки картинки <a href="http://ru.wikipedia.org"><img border=0 width=100 src="books.jpg"></a> Задание размера картинки Имя (адрес) картинки Ссылки - картинки <A href=“адрес ссылки”><img src=“имя картинки”></A> <a href="http://ru.wikipedia.org"><img border=0 width=100 alt=“Википедия” src="books.jpg"></a> Всплывающая надпись Задание 9 Пиктограмма 1 Карты изображений (image map) КАРТА Изображение Область ссылки Карты изображений (image map) <MAP name “map1”> <AREA параметры_области1 href=“ссылка1” alt=“пояснение1”> <AREA параметры_области2 href=“ссылка2” alt=“пояснение2”> …………………………………………………………………………… </MAP> Имя наложенной карты <IMG src=“office.jpg” usemap=#map1 border=0> Имя изображения Карты изображений (image map) <AREA shape=форма coords=“параметры области”> ФОРМА: rect (прямоугольник) circ (окружность) poly (многоугольник) Карты изображений (image map) КООРДИНАТЫ и РАЗМЕРЫ ОКРУЖНОСТИ 10 coords=“10,20,40” 20 радиус = 40 Карты изображений (image map) КООРДИНАТЫ и РАЗМЕРЫ ПРЯМОУГОЛЬНИКА 10 20 50 70 coords=“10,20,70,50” Карты изображений (image map) КООРДИНАТЫ и РАЗМЕРЫ МНОГОУГОЛЬНИКА 50 30 coords=“50,30,55,30,60,40,45,40,50,30” Задание 10 1. Найти в Интернет или изготовить самостоятельно изображение. 2. Создать HTML-документ для отображения в браузере картинки с 3-мя областями-ссылками (прямоугольник, окружность, многоугольник). Таблицы Строки и столбцы Таблица <TABLE border=1> Строка <TR> <TD> Первая строка,первый столбец </TD> <TD> Первая строка,второй столбец </TD> </TR> Столбец <TR> <TD> Вторая строка,первый столбец </TD> <TD> Вторая строка,второй столбец </TD> </TR> </TABLE> Рамки Рамки Рамки bordercolor=код цвета Внутренние отступы cellspacing=число отступ между внутренней и внешней рамками cellpadding=число отступ между текстом и внутренней рамкой Внутренние отступы Горизонтальное выравнивание align=center align=right align=left (по центру) (по прав. краю) (по лев. краю) Вертикальное выравнивание valign= middle (по середине) valign=top (по верхн. краю) valign=bottom (по нижн. краю) > Размер ячеек 75% Width (ширина) Height (высота) 25% Размер ячеек Width (ширина) Height (высота) 100 250 точек точек Задание 11 Фон таблицы и ячеек заливка сплошным цветом Цвет фона всей таблицы <TABLE border=1 bgcolor=yellow> <TR> <TD bgcolor=blue> текст1 </TD> <TD bgcolor=red> текст2 </TD> </TR> Цвет фона ячейки </TABLE> Фон таблицы и ячеек заливка готовым рисунком Имя файла рисунка <TABLE border=1 background=“pic1.jpg”> <TR> <TD background=“pic2.jpg”> текст1 </TD> <TD> текст2 </TD> </TR> </TABLE> pic1.jpg pic2.jpg Цвет текста в таблице <TABLE border=1 background=“pic1.jpg”> <TR> <TD background=“pic2.jpg”> <B><FONT color=white> текст1 </FONT></B> </TD> <TD> текст2 </TD> </TR> </TABLE> Задание 12 20 Файл pic1.jpg Файл pic1.jpg Слияние ячеек таблицы <TABLE border=1> <TR> <TD rowspan=2 > Большая ячейка</TD> <TD> Обычная ячейка</TD> </TR> <TR> <TD> Обычная ячейка</TD> </TR> </TABLE> Слияние ячеек таблицы <TABLE border=1> <TR> <TD colspan=2 > Широкая ячейка</TD> </TR> <TR> <TD> Обычная ячейка</TD> <TD> Обычная ячейка</TD> </TR> </TABLE> Задание 13
