- •Базовые тэги html. Создание простейшего сайта
- •Между этими строками внесите теги:
- •2. Самостоятельная работа
- •Лабораторная работа № 2 Форматирование текста: физическое и логическое
- •2. Самостоятельная работа
- •Лабораторная работа № 3 Использование объектов
- •2. Самостоятельная работа
- •Лабораторная работа № 4 Работа с графикой
- •Лабораторная работа № 5 Работа с таблицами
- •2. Самостоятельная работа
- •Лабораторная работа № 6 Фреймы и формы
- •2. Самостоятельная работа
- •2. Самостоятельная работа
- •Лабораторная работа № 7 Каскадные таблицы стилей
- •Параметры линии:
- •Способы подключения стилей к web-странице
- •2. Самостоятельная работа и содержание отчета
- •Лабораторная работа № 8 Свойства элементов
- •Изучаем Html
- •Лабораторная работа № 9 Навигационные карты. Map. Как сделать часть картинки ссылкой Цель: Изучить тэг Map, тэг Area,
- •Лабораторная работа № 11 Ссылка внутри документа, якоря, anchor. Цель: изучить атрибуты name, id.
2. Самостоятельная работа
Задание: создайте сайт со своими анкетными данными.
Название страницы «Анкета», название файла «lab_1».
Примерный перечень вопросов:
- Ф.И.О.
- Дата рождения
- Какую школу закончили?
- Хобби, увлечения?
- Расставьте по мере значимости для Вас, четыре фигуры: треугольник, круг, прямоугольник,
квадрат.
Используйте для оформления своего сайта атрибуты тега <body>.
Прокомментируйте текст кода своего сайта.
//Примечание: чтобы открыть для изменения HTML-страницу из броузера, щелкните в любом месте страницы правой кнопкой мыши и выберите из контекстного меню команду «Просмотр HTML – кода».
Лабораторная работа № 2 Форматирование текста: физическое и логическое
Цель: освоить теги html, синтаксис языка
Результат обучения: Студент должен уметь форматировать текст html – документа
Ход работы
Форматирование это разбиение текста на абзацы, выделение заголовков, изменение написания букв текста, вставка оформления, использование специальных символов в тексте.
Абзац-текст, отделённый от остального текста промежуточной строкой.
В языке HTML имеется специальный тег, указывающий броузеру на то, что в данном месте текста должен начинаться абзац:
<P>
можно закончить данный тег закрывающим тегом
</P>
Пример: создадим сайт со примеротворением Пушкина.
Откройте блокнот
Внесите теги HTML-документа:
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
сохраните документ в свою папку под именем INF_2.Html
между тегами <title> и </title> внесите
Второе занятие
Это строка будет отображена в строке заголовка сайта.
Откройте тег <P>, после тега <body>. Внесите текст примеротворения Пушкина
У лукоморья дуб зелёный,
златая цепь на дубе том.
И днём и ночью кот учёный
Всё ходит по цепи кругом…
Закройте тег</P>.
Сохраните документ и проверьте результат.
//Примечание: для быстрого просмотра результатов изменений в сайте сохраните документ, переключитесь на окно Web-страницы и нажмите кнопку «обновить»
Обратите внимание на то, что текст расположен в одну строку, хотя текст был набран в столбик. Чтобы обеспечить расположение текста на разных строках можно использовать тег <BR>, том месте, где строка должна закончиться.
Откройте тег <P> и внесите текст
А.С.Пушкин
Закройте тег</P>.
Тег <P> имеет атрибут Align, который может принимать значения:
Left
Right
Center
Напоминаем: почти все теги в языке разметки Web-страниц имеют некоторые параметры, которые принято называть атрибутами. Они предназначены для модифицирования параметров документа, а их значение принято заключать в кавычки. Атрибуты пишутся внутри тега
В строке <P>А.С.Пушкин</P>
Вставьте атрибут Align=”Right” , получится
<p Align="Right" >А.С.Пушкин</P>
В строке <P >У лукоморья дуб зелёный,
Вставьте атрибут Align=”Center” :
<P Align=”Center” >У лукоморья дуб зелёный,
Сохраните документ и проверьте результат.
Действие тега Align=”Center” можно заменить самостоятельным тегом <Center>.
Например:
<P > <CENTER>У лукоморья дуб зелёный, <BR>
златая цепь на дубе том. <BR>
И днём и ночью кот учёный <BR>
Всё ходит по цепи кругом… <BR></CENTER>
Создание заголовков
Заголовок – это текст, являющийся началом раздела в документе.
Заголовок выставляется тегами от <H1> до <H6>, цифра указывает на величину букв заголовка.
После тега <body> вставьте следующий текст:
<H1>Примеротворение</H1>
Сохраните документ и проверьте результат.
Для форматирования шрифта используются следующие теги:
<B> </B>-полужирное начертание
<I> </I>-наклонное начертание
<TT> </TT>-моноширное начертание (телетайп)
<U> </U>-подчеркнутое начертание
<SUP> </SUP>-верхний индекс
<SUB> </SUB>-нижний индекс
<STRIKE> </STRIKE>-перечеркнутый текст
<BIG> </BIG>-текст, написанный буквами большого размера.
<SMALL> </SMALL> текст, написанный буквами маленького размера.
Также, изменить написание букв можно, используя атрибуты тега <Font>, который устанавливает стиль написания букв.
Атрибуты тега <Font>
Size=”N”, где N- размер букв. Также, если ”N” указать со знаком + или - , можно установить изменение размера на ”N” по сравнению с размерами окружающих букв (можно использовать без кавычек)
Напоминаем: почти все теги в языке разметки Web-страниц имеют некоторые параметры, которые принято называть атрибутами. Они предназначены для модифицирования параметров документа, а их значение принято заключать в кавычки. Атрибуты пишутся внутри тега
Color= ”Цвет” (возможные цвета были рассмотрены на первом занятии)
Вставка специальных символов
Часто при создании специализированных сайтов возникает необходимость во вставке специальных символов, например, знак ₤ или знак авторских прав ©. В таких случаях используется символ амперсант (&) и соответствующий нужному символу код таблицы UNICOD.
Например, для вставки таких знаков как Авторские права, Зарегистрированная торговая марка и Торговая марка, следует использовать коды символов:
-
Символ
Код
Пример
Знак Авторские права
©
©
Зарегистрированная торговая марка
®
®
Торговая марка
™
TM
₤
£
Логическое форматирование текста
Кроме рассмотренных способов форматирования, также имеется так называемое логическое форматирование текста.
Логическое форматирование текста показывает намерение автора, а не сам вид текста. Другими словами, если автор хочет показать, что текст является цитатой, то он его выделяет одним стилем, а последующий текст другим стилем.
Теги логического форматирования:
<CITE>..</CITE>-контейнер для цитат. При этом текст выделяется курсивом.
<CODE>..</CODE>- контейнер для программного кода
<DEN>..</DEN>- контейнер для определений терминов
<EM>..</EM>-текст, на который должен обратить внимание посетитель сайта, так называемый контейнер акцентирования.
<KBD>..</KBD>-указывает на то, что текст, заключённый между этими тегами должен быть введён с клавиатуры.
<SAMP>..</SAMP>- контейнер для примеров чего-либо
<STRONG>..</STRONG> контейнер для текста, который необходимо выделить.
<VAR>..</VAR> контейнер для имён переменных
Тег предварительного форматирования <Pre>.
Данный тег отображает текст заключённый внутри него, так как он выглядит в исходном коде, т.е. в блокноте.
<Pre>
этот текст будет отображен в окне броузера так, как он написан здесь
</Pre>
обычно этот текст применяют в случаях, когда нужно показать текст программного кода, например написанного на языке Delphi.