Polytech-soft.com

ПК журнал
2 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Html лабораторные работы

Лабораторный практикум по HTML. Лабораторные работы №1-6, 10 класс профильный уровень.

Как организовать дистанционное обучение во время карантина?

Помогает проект «Инфоурок»

Лабораторный практикум по HTML

Профиль: Физико – математический

Учитель информатики Тарасова С. П.

Лабораторная работа №1

Тема: «Создание простейшего HTML -документа.

Цель работы: познакомиться со структурой html -документа и на основе создать свою страницу; изучить основные тэги форматирования текста и использовать их при создании страницы.

Оборудование и программное обеспечение: ПК, ОС Windows XP , Internet Explorer, текстовый редактор Блокнот.

Структура html -документа:

HTML -код страницы помещается внутрь контейнера HTML > . HTML >, заголовок страницы в контейнер HEAD > Заголовок HEAD >.

Контейнер обязательно содержит открывающий и закрывающий теги.

В разделе описания заголовка можно указать заглавие документа, для этого используется тэг TITLE > . TITLE > (имя страницы).

Весь остальной HTML -документ, включая весь текст, содержится внутри тэга BODY > содержание BODY > (содержание страницы).

TITLE > название TITLE >

Основные тэги форматирования html -документа:

Заголовок страницы задается с помощью тегов, где размер шрифта заголовка устанавливается с помощью Н1 (самый крупный) и до Н6 (самый мелкий)

Заголовок страницы целесообразно выделить самым крупным шрифтом: H 1> заголовок страницы H 1> (например, H 1> Все о компьютере H 1>)

H 1> заголовок страницы H 6> — в данном случае заголовок будет записан самым мелким шрифтом;

Если необходимо выровнять этот заголовок по правому краю, то это записывается следующим образом: H 1 ALIGN = “ RIGHT ”> Все о компьютере H 1>

Для задания параметров форматирования используется контейнер FONT >. FONT >, при этом используя различные атрибуты:

Атрибут FACE позволяет задать гарнитуру шрифта;

Атрибут SIZE – размер шрифта (может принимать иметь значение в диапазоне от 1 до 7);

Атрибут COLOR – цвет шрифта (можно задавать названием цвета (например, “ red ”, “ green ”, “ blue ” и так далее));

Например , . FONT > (шрифт размера 7, тип шрифта – Arial , цвет — голубой);

Также можно задавать начертание текста или фрагмента текста:

B > текст B > — полужирный шрифт;

I > текст I > — начало текста курсивом;

U > текст U > — подчёркивание;

Комбинированное выделение осуществляется следующим образом:

фрагмент текста Тэг-2>Тэг-1>

Например, B > U > фрагмент текста U > B > (текст полужирный и подчеркнутый);

При создании html -документов можно задавать и цвет самого фона страницы. Эта команда может задаваться только в начале HTML файла и не может быть изменена в дальнейшем. Ее параметры: BGCOLOR — определяет цвет фона документа, TEXT — задает цвет текста для всей страницы. Цвет также задается с помощью его названия ( “ red ”, “ green ”, “ blue ” );

Например, BODY BGCOLOR = “ blue ” TEXT = “ red ”> — задание цвета фона и текста (фон голубого цвета, цвет шрифта — красный)

Ненумерованный список располагается внутри контейнера UL >… UL >, а каждый элемент списка определяется также тэгом LI >. С помощью атрибута TYPE тэга UL > можно задать вид маркера списка: “ disc ” (диск),

“ square ” (квадрат), “ circle ” (окружность). Например,

(маркированный список, маркер в виде окружности)

Создать, используя только тэги структуры, текстовый html -документ. Сохранить этот документ под любым именем с расширением . htm в папке RABOCHLAB в директории HTMLLAB . Открыть документ в окне браузера и посмотреть, как он будет отформатирован.

Заголовок страницы должен быть выровнен по центру, начертание – полужирный шрифт, тип шрифта — Comic Sans MS, размер – 1, цвет шрифта – голубой, подчеркивание;

Задать цвет фона страницы – бирюзовый цвет;

Текст должен состоять из трех абзацев, один абзац должен быть выровнен по левому краю, второй – по центру, а третий – по правому краю;

Цвет текста в первом абзаце задать белым цветом, тип шрифта — Monotype Corsiva, размер – 7;

Цвет текста во втором абзаце задать розовым цветом, тип шрифта — Arial, размер – 6;

Цвет текста в первом абзаце задать желтым цветом, тип шрифта — Calibri, размер – 5;

В нижнем правом углу создать маркированный список, состоящий из трех компонентов, цвет текста задать зеленым цветом;

Все о компьютере

На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.

Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.

На этом сайте вы можете узнать много новой и полезной информации для вас.

li > b > Компьютер b > li >

Лабораторная работа №2

Тема: «Вставка изображений в html -документ»

Цель работы: изучить основные тэги для вставки изображений в html -документ и для их преобразования.

Оборудование и программное обеспечение: ПК, ОС Windows XP , Internet Explorer, текстовый редактор Блокнот.

IMG SRC = “имя файла. jpg ( gif , png )”>

Мои документы . . jpg”>

имя файла . jpg (gif, png)” ALIGN = “RIGHT”> выравнивание по правому краю

имя файла . jpg (gif, png)” ALIGN = “LEFT”> выравнивание по левому краю

IMG SRC = “ имя файла. jpg ( gif , png )” ALIGN = “ TOP ”> выравнивание текста по верхней кромке изображения

IMG SRC = “ имя файла. jpg ( gif , png )” ALIGN = “ BOTTOM ”> выравнивание текста по левой кромке изображения

IMG SRC = “ имя файла. jpg ( gif , png )” ALIGN = “ MIDDLE ”> выравнивание текста по средней кромке изображения

IMG SRC = “ имя файла. jpg ( gif , png )” BORDER = “3”> обрамление графического объекта

IMG SRC = “ имя файла. jpg ( gif , png )” HSPACE = “30” VSPACE = “30”> вставка пустой области вокруг изображения

IMG SRC = “ имя файла. jpg ( gif , png )” WIDTH = “110” HEIGHT = “220”> изменение размера изображения

EMBED SRC = “ имя файла. wav > вставка звуковых объектов

EMBED SRC = “ имя файла. wav WIDTH = “ ” HEIGHT = “ ”> атрибуты для задания размеров экранных элементов

Вставить изображение в текст:

выравнивание текста по верхнему краю рисунка

выравнивание текста по центру рисунка

выравнивание текста по нижнему краю рисунка

Использовать рамки вокруг рисунка:

рисунок без рамки

рамка 2 пикселя

рамка 5 пикселей

рамка 10 пикселей

Создать плавающие рисунки с обтекающим текстом вокруг них:

текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

Изменить размеры изображения:

Без изменения размера

Параметр height=60

Параметр w >

Не пропорциональное изменения размера: height=40 w >

Создание плавающих рисунков с обтеканием текста вокруг них и отступом в 10 и 20 пикселей вокруг них

текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

текст текст текст текст текст текст текст текст текст

текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

Вставить звук на страницу.

Сохранить этот документ под любым именем с расширением . htm в папке RABOCHLAB в директории HTMLLAB .

Лабораторная работа № 1. Знакомство с HTML

СОДЕРЖАНИЕ

ВВЕДЕНИЕ
ГЛАВА 1. HTML и CSS
1.1. Лабораторная работа № 1. Знакомство с HTML
1.2. Лабораторная работа № 2. HTML+CSS
1.3. Лабораторная работа № 3. HTML+CSS
1.4. Лабораторная работа № 4. Блоковая модель
1.5. Лабораторная работа № 5. Новые возможности в CSS3
1.6. Лабораторная работа № 6. Анимация. Создание выпадающего меню
ГЛАВА 2. JAVA SCRIPT
2.1. Лабораторная работа № 1. Арифметические, логические операторы, операторы сравнения в JavaScript.
2.2. Лабораторная работа №2. Функции. Операторы цикла. Объекты Math, Number.
2.3. Лабораторная работа №3. Встроенные объекты JavaScript
2.4. Лабораторная работа № 4. Пользовательские объекты JS. Специальные операторы
2.5. Лабораторная работа № 5. Объектная модель документа. Доступ к элементам web-страницы
2.6. Лабораторная работа № 6. Объектная модель браузера (BOM)
2.7. Лабораторная работа № 7. Работа с формами
2.8. Лабораторная работа № 8. События. Динамические эффекты на JS
2.9. Лабораторная работа № 9. Движение объектов и графика на JavaScript
2.10. Лабораторная работа № 10. Знакомство с jQuery
ГЛАВА 3. XML
3.1. Лабораторная работа № 1. Создание XML-документа
3.2. Лабораторная работа № 2. Создание валидных XML-документов
3.3. Лабораторная работа № 3. Использование XSLT
3.4. Лабораторная работа № 4. Использование сортировки с условием
Лабораторная работа № 5. Использование XML DOM
3.6. Лабораторная работа № 6. Знакомство с SVG-графикой. Рисование svg-фигур.
3.7. Лабораторная работа № 7. SVG-анимация
Глава 4. Использование возможностей HTML5
4.1. Лабораторная работа № 1. Знакомство с HTML5. Элементы video и audio. Геолокация. Элемент canvas.
4.2. Лабораторная работа № 2. Использование новых элементов и атрибутов в HTML5 формах
Читать еще:  Задания html css

ГЛАВА1. HTML И CSS

Лабораторная работа № 1. Знакомство с HTML

Цель: изучить структуру HTML документа; принципы создания списков, таблиц, гиперссылок; особенности применения тегов и

Краткая теория

HTML (Hyper Text Markup Language) – язык разметки гипертекста. Для разметки HTML документа используют теги (флаги разметки).

Тег – это определенная последовательность символов, заключенные между знаками (меньше).

Для того, чтобы создать HTML документ необходимо:

— открыть любой текстовый редактор (например, блокнот встроенный в Windows);

— набрать произвольный текст и разметить его HTML тэгами;

— сохранить файл с расширением .htm или .html.

Теперь если открыть созданный файл с помощью веб-браузера, он будет отображен как веб-страница.

Параметры документа задаются через тег . Параметры – это специальные символьные команды, которые «понимает» браузер. Тег BODY имеет следующие атрибуты:

— bgcolor – цвет фона задан по схеме RGB;

— background – фон – графический файл;

— text – цвет текста;

— link – цвет ссылки;

— alink – цвет активной ссылки;

— vlink – цвет посещенной ссылки.

Шрифт задается тегом FONT, который имеет следующие атрибуты: face – имена шрифтов, разделенные запятыми, size – размер от 1 до 7 (по умолчанию 3), color – цвет шрифта.

В HTML существуют специальные теги для заголовков: от Н1 (самого крупного) до Н6 (самого мелкого).

Списки на Web-страницах бывают маркированные (


    – начало текста списка,
    – начало каждого элемента в списке) и нумерованные (

      – начало текста списка,
      – начало каждого элемента в списке). Маркером списка может быть рисунок.

Атрибут TYPE позволяет изменить вид маркера. Значения атрибута:

Элемент

служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов

и

. Для отображения границ таблицы используется атрибут border. С помощью тэга

можно создать табличный заголовок. Текст элемента th центрируется и выделяется жирным шрифтом. С помощью атрибута colspan можно указать на сколько столбцов должна быть растянута указанная ячейка, а с помощью атрибута rowspan – на сколько строк должна быть растянута указанная ячейка.

Ссылки на Web-страницах.

Ссылки являются основой гипертекстовых документов и позволяют переходить с одной веб-страницы на другую. Реализуются с помощью тега A. Общий синтаксис создания ссылок следующий:

Атрибут href определяет URL адрес документа, на который следует перейти (например «cat.html»), а содержимое контейнера является ссылкой.

Вставка изображений.

Для добавления в HTML документ изображений используется тэг . Атрибут src тэга должен содержать адрес, по которому находится картинка, которая должна быть отображена. Например,

.

Тег предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как

,

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

Задания к лабораторной работе № 1

Задание 1. Создать HTML-документ (заголовок Моя первая страница) cо следующим содержимым:

Заголовок в центре страницы (теги h1) «Я, ФИО, изучаю HTML и CSS». Аббревиатуру HTML выделить другим цветом.

Три абзаца текста (можно своя автобиография) по 3–4 строки каждый абзац. Для каждого абзаца свой шрифт, размер, цвет (тег font). Для каждого абзаца придумать заголовок (h3), а также заголовок для всего текста (h2). Внутри каждого абзаца выделить несколько слов элементами span.

Список примерно такого вида с любым содержимым

Перед списком вставить заголовок, отражающий его содержимое (h2).

Таблица, содержащая результаты сессии. Перед таблицей вставить заголовок (h2).

ФИОИванов Иван Иванович
Свое фотоАдрес: ул.Белорусская, д.5, ком.430
1 семестр 2016/2017 уч. годаДатаПредметОценка
31.12.2016ОАиП
5.01.2017Физика
11.01.2017ОИТ
16.01.2017Математика
22.01.2017АЛОЦВМ

Задание 2. Создать еще один HTML-документ (заголовок Моя вторая страница) cо следующим содержимым:

Любой рисунок. Перед рисунком оформить заголовок (h2).

Элемент , содержащий авторский знак © и ФИО автора.

Задание 3. ФИО в заголовке на первой web-странице и в таблице сделать ссылкой на вторую страницу, а рисунок на второй странице – ссылкой на первую.

1.2. Лабораторная работа № 2. HTML+CSS

Цель: изучить основные способы подключения CSS; возможности оформления текста, шрифта, фона на web-странице; научиться использовать селекторы классов и идентификаторов.

Краткая теория

Внешнее. Самый мощный и удобный способ определения стилей и правил для сайта. Стили хранятся в отдельном файле, который может быть использован для любых веб-страниц. Для подключения таблицы связанных стилей используется тег
в заголовке страницы.

Внутреннее. Стиль определяется в самом документе и обычно располагается в заголовке веб-страницы. По своей гибкости и возможностям этот способ использования стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа. Определение стиля задается тегом

Html лабораторные работы

HTML — язык разметки гипертекста. Создание w eb -страницы

Цель : выполнив лабораторную работу, Вы научитесь

использовать теги для разметки текста,

выполнять форматирование текста,

Оборудование : компьютер, ПО: текстовый редактор, браузер.

Документ, написанный на языке HTML , представляет собой текст, в который вписаны теги ( markup tags ) или теги разметки. Теги помогают программе просмотра разобраться, как должен быть расположен текст на экране, в каком месте будут находиться рисунки, хранящиеся в совсем других файлах, и т.д. С помощью тегов формируются связи с другими web -документами и ресурсами Интернета. Текст с тегами называется исходным кодом ( Source ). Просмотреть готовый файл, написанный на HTML , можно в программах просмотра ( Microsoft Internet Explorer ). На экране просмотра теги не отображаются.

Теги – определенные последовательности символов, заключенные между знаками

 (меньше) и  (больше). Символ  обозначает начало тега, символ  обозначает конец тега. Все, что заключено между тегами, является HTML -документом.

Любой HTML -документ состоит их двух частей. Первая часть – заголовок, который находится между тегами  HEAD  и  / HEAD  . В нем содержится информация о документе, которая не выводится на экран. Название странички располагается между тегами  TITLE  и  / TITLE  и появляется в верхней части окна программы просмотра. Например,  TITLE  моя страничка  / TITLE 

Прописные или строчные буквы, используются в написание тегов, значения не имеет. Компьютер одинаково отреагирует на записи  title  и  TITLE  .

Вторая часть – тело, которое выводится на экран программой просмотра – текст, картинки, видеофрагменты и т.д. Оно заключается между тегами  BODY  и  / BODY  . Форматирующие теги бывают парными и непарными, открывающими и закрывающими. Область действия парного тега начинается с того места, где стоит открывающий тег, а кончается там, где встречается закрывающий. Признак закрывающего тега – символ /. Почти все форматирующие теги всегда следуют парами, и для открывающего тега должен существовать закрывающий.

Непарных тегов мало, например, для перехода на новую строку используется тег  br  ( Line Break ).

Закройте Блокнот. Откройте свою папку. Найдите документ в формате html , он имеет такую же пиктограмму, как и документы из Интернета. Например,

Откройте документ и посмотрите результат.

Чтобы разбить текст на параграфы поставьте тег  p  перед началом параграфа. Когда программа обнаружит этот тег, она сама вставит перед началом параграфа пустую строку.

Вместе с тегом параграфа можно задать параметры выравнивания ( align ):

r ight – по правому краю.

l eft – по левому краю.

c enter – по центру.

Тег  p align = right  обеспечивает выравнивание теста параграфа по правому краю.

Тег  p align = left  обеспечивает выравнивание теста параграфа по левому краю.

Тег  p align = center  обеспечивает выравнивание теста параграфа по центру.

Еще один способ выравнивания текста

right  текст  / right 

left  текст  / left 

center  текст  / center 

Для увеличения расстояние текста от левого края или нужна «красная строка», то после тега  p  поставьте (& nbsp ;). Например,

В основном тексте не должно быть переносов.

Для выделения логических частей текста используют заголовки ( headings ). Они обозначаются прописной или строчной латинской буквой h . Цифра после буквы указывает уровень заголовка (всего их может быть шесть). Как и любой текст, заголовки можно выравнивать по левому и правому полю, по центру. Переносы в заголовках запрещены.

Задание. Объясните значение каждого из тегов в данном примере. Наберите текст.

h 1 align = center  Информационные технологии в образовании  / h 1 

h 2 align = left  Преобразование информации  / h 2 

h 3 align = right  Коммуникационные технологии  / h 3 

h4 align=center  Интернет  /h4 

h 5 align = center  Поиск информации  / h 5 

Откройте файл и убедитесь в правильности выполнения задания.

Фрагмент текста можно выделить полужирным шрифтом ( Bold ). Для этого используется открывающий тег b > и закрывающий тег b >.

Отдельные слова можно подчеркнуть ( Underline ). Для этого применяют u > и u >.

Часто для выделения используют курсив ( Italic ). Для этого служат теги i > и i >.

Можно заставить текст мигать ( Blink ), но таким выделением нужно пользоваться очень осторожно, поскольку мигающий текст трудно читается.

Если нужно выделить текст одновременно полужирным шрифтом и курсивом, то необходимо использовать следующие теги

b > i >текст i > b >

Запомните: тег, который открывался первым, закрывается последним. Теги вкладываются друг в друга.

Теги, управляющие шрифтами, имеют свои атрибуты. Можно увеличить или уменьшить размер шрифта, который измеряется в пунктах. Один пункт 0,353 мм или 1/72 дюйма. Он задается относительно размера, установленного в программе просмотра по умолчанию.

где n – число пунктов, на которое увеличивается или уменьшается размер шрифта.

Атрибут face означает название шрифта. Нужно иметь в виду, что в случае, если программа просмотра, с помощью которой посетитель будет просматривать вашу страничку в Интернет, не имеет такого шрифта, то текст будет недоступен.

«+7» color= «red» face= «Arial»> текст

для выделения логических частей текста можно использовать горизонтальную линию ( Horizontal Rule ). Она обозначается тегом hr >, закрывающий тег при этом не требуется. Перед тегом hr > и после него не нужно ставить тег p > или br >, поскольку он сам по себе является переносчиком.

br > br > br >текст

Чем больше br >, тем дальше отстоит текст от линии.

У тега hr > есть свои атрибуты, которые не являются обязательными.

align =”. ” — в кавычках обозначаем место расположения линии по правому краю ( right ), по левому краю ( left ) или по центру ( center ).

с olor= — цвет линии.

noshade — по умолчанию задается объемная линия.

size =” n ” – толщина линии, где n – толщина в пикселях.

width =” n ” или width =” n %” — где n – ширина в пикселях или процентах.

Самые часто употребляемые параметры – размер и толщина линии – задаются с помощью параметров size и width

Необходимо знать, что для экрана размером 800х600 максимальная ширина n =750. Если вы не укажите атрибут width , то линия получится во весь экран. Значение в % от свободного пространства обозначается n %.

Пример. если вы хотите, чтобы линия занимала ровно половину экрана, то ставьте 50%. В одном теге не может быть двух атрибутов width , значение атрибута указывается либо в %, либо в пикселях.

Горизонтальную линию можно нарисовать с помощью любого графического редактора, а затем вставить в html – код. Нарисуйте в отдельном файле любую линию, сохраните файл в ту же папку с расширением gif . Например, 1. gif . После этого вставьте ее в исходный код своей страницы.

Для сохранения элементов форматирования на Web -странице как и в оригинале (шрифт, размер шрифта, таблицы, размещение текста относительно границ листа и т.д.) используют парные теги PRE > и PRE >.

Задание. Создайте HTML -документ и сохраните его под именем ind 3. htl в своей папке.

Между тегами PRE > и PRE > можно вставить несколько абзацев любого текста, скопированного из текстового редактора.

При оформлении информации в HTML часто возникает необходимость оформления маркированных, нумерованных и вложенных списков.

Избегайте драматического эффекта:

По возможности избегайте пиктограммы «В процессе производства».

Используйте соответствующий язык.

Не перегружайте страницу большими изображениями.

Проверяйте ссылки на вашей странице.

В маркированном списке ( Unordered List ) каждому элементу списка соответствует маркер ( bullet ) – символ или графическое изображение. Для создания маркированного списка используют следующие теги

p > Избегайте драматического эффекта:

li > Используйте соответствующий язык.

li > Не перегружайте страницу большими изображениями.

li > Проверяйте ссылки на вашей странице.

Большая энциклопедия «Кирилл и Мефодий».

Мультимедиа энциклопедия науки и техники «От плуга до лазера 2.0».

Компьютерные фильмы-лекции ТПО «Северный очаг».

В нумерованном списке ( Ordered List ) каждому элементу предшествует его порядковый номер. Чтобы программа просмотра правильно расставила номера, нужно использовать теги разметки.

p > Мультимедиа ресурсы.

li > Большая энциклопедия «Кирилл и Мефодий».

li > Мультимедиа энциклопедия науки и техники «От плуга до лазера 2.0».

li > Компьютерные фильмы-лекции ТПО «Северный очаг».

По умолчанию программа вставляет арабские цифры (1, 2, 3, …).

Вложенные списки ( Nested lists ) сочетают в себе элементы обоих списков. Для их создания используются теги маркированного и нумерованного списков.

p > Используемые ресурсы

li > Мультимедиа ресурсы

li > Большая энциклопедия «Кирилл и Мефодий».

li > Мультимедиа энциклопедия науки и техники «От плуга до лазера 2.0».

li > Компьютерные фильмы-лекции ТПО «Северный очаг».

Необязательным атрибутом тега ul > является type , обозначающий тип маркера.

ul type =” circle ”> кружок

ul type =” disk ”> пустой кружок

ul type =” square ”> квадратик.

Необязательным атрибутом тега ol >

start =” n ” , где n – номер, с которого начинается нумерация.

type =” “ в кавычках пишутся буквы или цифры, например, А – большие буквы (А, В, С,…); а – маленькие буквы ( a , b , c , . ); I – римские цифры ( I , II , III , . ); 1 – арабские цифры (1, 2, 3, …).

Задание. Выполните страницу, текст которой будет организован с помощью списков сразу трех видов. Сохраните ее в своей папке под именем ind 4. htm .

Откройте файл ind 4. htm в программе просмотра на своем компьютере.

Попробуйте убрать ul > и ul >. В чем разница?

СОЗДАНИЕ СЛОВАРЯ ТЕРМИНОВ

Чтобы поместить на страничке словарь терминов, следует использовать тег dt >. В этом случае текст располагается без отступа от левого поля странички.

Задание. Создайте в вашей папке файл с именем ind 5. htm следующего содержания.

dd > Web -сервер. Сервер, хранящий и пересылающий HTML -документы и другие информационные ресурсы Интернет с использованием протокола HTTP . Его называют так же HTTP -сервером.

dd > «Домашняя страница». Головная, начальная страница, локальный архив. Первая страница какого-либо Web -сервера или логически связанной группы HTML документов.

Откройте и посмотрите получившуюся страницу.

Задание. Создайте свой собственный HTML -документ, в котором должны присутствовать:

Заголовки нескольких уровней, выровненные по центру, левому или правому полю.

Параграфы с текстом.

Фрагменты выделенного текста (с помощью полужирного шрифта, курсива, размера шрифта, горизонтальной линии).

Сохраните этот файл в вашей папке под именем index . htm и просмотрите его с помощью программы просмотра.

Что такое исходный код?

Какой символ обозначает начало тега? Какой символ обозначает конец тега?

Что такое парные теги? Приведите пример.

Из каких частей состоит HTML документ?

Как выделяется заголовок документа?

Как выделяется тело документа?

Какие теги позволяет создать параграф (новый абзац)?

Какие теги позволяют создавать маркированные и нумерованные списки?

Лабораторный практикум «Основы HTML»

В лабораторном практикуме рассматриваются «Основы Html». Содержит методические указания и задания лабораторных работ, а также подробно разобранные примеры и справочный материал. Данное пособие подходит как для самостоятельного изучения, так и для проведения занятий

Содержимое разработки

Министерство образования и науки Челябинской области

Государственное бюджетное образовательное учреждение
профессиональная образовательная организация

«Златоустовский техникум технологий и экономики»

ЛАБОРАТОРНЫЙ ПРАКТИКУМ «ОСНОВЫ HTML»

В лабораторном практикуме рассматриваются «Основы Html». Лабораторный практикум содержит методические указания и задания лабораторных работ, а также подробно разобранные примеры и справочный материал. Данное пособие подходит как для самостоятельного изучения, так и для проведения занятий со студентами всех специальностей.

ВВЕДЕНИЕ В ЯЗЫК HTML 7

ЛАБОРАТОРНАЯ РАБОТА №1 10

ЛАБОРАТОРНАЯ РАБОТА №2 11

ЛАБОРАТОРНАЯ РАБОТА №3 13

ЛАБОРАТОРНАЯ РАБОТА №4 14

ЛАБОРАТОРНАЯ РАБОТА №5 15

ЛАБОРАТОРНАЯ РАБОТА №6 17

ЛАБОРАТОРНАЯ РАБОТА №7 19

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ 21

ПРИЛОЖЕНИЕ 1 22

В последние два десятилетия Интернет прочно вошел в нашу жизнь. В наше время он охватывает почти все сферы жизни: культура, искусство, бизнес. Наряду с обычными музеями, библиотеками, магазинами все большую популярность во всем мире завоевывают аналогичные Интернет-ресурсы. Даже бизнес становится виртуальным: создаются Web-представительства фирм, электронные магазины и торговые площадки, электронные банки, которые дают возможность осуществлять типичные для этих сфер операции с большей скоростью. В связи с этим профессия Web-дизайнера и Web-программиста стала востребованной и у нас в России. Интернет-технологии создания указанных web ресурсов требует владения такими языками для написания серверных скриптов, как Perl, PHP, ASP, владения языком XML, а также умения создавать динамические страницы и сайты, используя скрипты VBScript и JavaScript, которые позволяют осуществлять вычисления, работу с датой и временем, изменение элементов страницы по желанию пользователя.

Perl – язык для написания CGI-скриптов (Common GateWay Interface). CGI-

скрипт – это программа, которая выполняется на Web-сервере по запросу посетителя сайта. CGI – это не язык программирования, а специальный интерфейс, с помощью которого и происходит запуск скрипта и взаимодействие с ним.

PHP-скрипт (Hypertext Preprocessor) – скрипт, написанный на языке PHP и

внедренный в HTML-документ.

ASP-скрипт(Active Server Pages) – скрипт, написанный на языке Visual Basic Scripting Edition и внедренный вHTML-документ.

Но это потом. А на первом этапе необходимо научиться создавать простыеHTML-страницы.Не стоит считать, что в этом нет необходимости. Простого HTML вполне хватит для двухстраничной коммерции, которая распространяется сейчас по всему миру. HTML позволяет создать «заготовки» страниц, а уже потом можно добавлять в них различные скрипты. XML же – это надстройка над HTML. Поэтому без изучения HTML не обойтись. Итак, HTML – HyperText MarkUp Language – язык разметки гипертекста. Гипертекст – расширенный текст, который может содержать в себе текст, иллюстрации, различные внедренные объекты и ссылки на другие ресурсы или на другиеWeb-страницы.

При передаче информации через Интернет используются как раз HTML страницы – файлы *.htm и *.html, поскольку они содержат в себе гипертекст, имеют размер меньше, чем текстовые или иные файлы и для их просмотра нужен только браузер.

HTML-документ представляет собой обычный текстовый документ с управляющими конструкциями языка HTML – тегами, которые и производят действия «форматирования» над текстовыми блоками и осуществляют вставку различных объектов в документ.

Создавать HTML-страницы можно вручную – путем самостоятельного написания тегов в текстовом редакторе или используя Web-редакторы с автоматизацией ввода нужных тегов – например, WebEdit, Arachnophilia или же используя программы, которые создают теги сами в ответ на действие пользователя на

странице – по принципу What You See Is What You Get – например, MS Word, MS Frontpage. Но они задают абсолютное форматирование и часто дописывают много лишнего кода к странице. К тому же для создания более уникальных страниц ими не обойдешься, для этого лучше писать теги HTML самому и использовать каскадные таблицы стилей.

Мы предлагаем использовать для создания Web-страниц блокнот, который входит в стандартный набор любой из операционных систем Windows и не требует предварительного изучения.

Наш практикум содержит в себе все основные разделы, необходимые для создания Web-страниц. В каждом разделе есть примеры использования тегов, показан результат действия этих тегов, а также представлены лабораторные работы. Практикум можно использовать для самостоятельного изучения технологии создания статических Web-страниц студентам любых специальностей или тем, кто хочет самостоятельно изучить основы языка HTML.

ВВЕДЕНИЕ В ЯЗЫК HTML

Автономные Web-документыиспользуют язык HTML (HypertextMarkup Language — язык разметки гипертекста). Гипертекст, то есть расширенный текст, включает дополнительные элементы: иллюстрации, ссылки, вставные объекты. Под разметкой понимается использование специальных кодов, легко отделяемых от смыслового содержания документа и используемых для реализации гипертекста. Применение этих кодов подчиняется строгим правилам, определяемым спецификацией языка HTML.

HTML -документ- это файл, содержащий обыкновенный текст со специальными командами. Такой файл может быть подготовлен в произвольном текстовом редакторе (существуют, однако, специальныепрограммы-конверторыиHTML-редакторы).

HTML -документсостоит из содержимого, то есть собственно полезной информации, и команд, задающих структуру.

Каждая команда (управляющая конструкция ) HTML -документа(тег) должна заключаться в угловые скобки — вот так: . Чаще всего в документе встречаются парные теги (открывающий и соответствующий ему закрывающий), так как браузеру необходимо знать область действия тега. Существуют и одиночные теги, однако, используются они только там, где область действия очевидна и дополнительной информации не требуется (ясно, например, что если мы встретили тег «начало абзаца» ( ), то предыдущий абзац уже закончился). В сомнительном же случае лучше перестраховаться и поставить закрывающий парный тег, иначе документ может оказаться нечитаемым. Открывающий и закрывающий теги называются одинаково и отличаются друг от друга только символом «наклонная черта» или «слэш» — «/», который ставится сразу после открывающей угловой скобки закрывающего тега. Закрытие парных тегов выполняется так, чтобы соблюдались правила вложения.

На этот текст воздействуют два тега

Кроме того, тег может включать атрибут, дающий дополнительную информацию браузеру. Например, при помощи атрибута можно попросить браузер изменить величину шрифта, ориентацию изображения по отношению к строке следующего за ним текста, поменять цвет фона документа и т. д. В парных тегах атрибуты добавляются только к открывающему тегу. Атрибуты представляют собой дополнительные ключевые слова, отделяемые от ключевого слова, определяющего тег, и от других атрибутов пробелами и размещаемые до завершающего тег символа «». Способ применения некоторых атрибутов требует указания значения атрибута. Значение атрибута отделяется от ключевого слова атрибута символом «=» (знак равенства) и заключается в кавычки.

Язык HTML в большинстве случаев совершено равнодушен к регистру, в котором набираются теги. Скажем, браузеру совершенно все равно, наберете вы тег, служащий для рисования горизонтальной линии, как или — эффект будет один и тот же.

HTML не признает никакого дополнительного форматирования текста, кроме как с помощью тегов. В результате текст, превосходно смотрящийся в текстовом редакторе, в окне браузера сольется в единую нечитаемую массу. Так, на месте нескольких пробелов будет лишь один пробел. Исчезнут все заголовки, пустые строки, деление текста на абзацы. Без HTML –тегов браузер просто игнорирует все элементы форматирования.

Определение HTML как языка разметки основывается на том, что при удалении из документа всех тегов получается текстовый документ, совершенно эквивалентный по содержанию исходному гипертекстовому документу. Таким образом, при отображении документа HTML сами теги не отображаются, но влияют на способ отображения остальной части документа.

Ссылка на основную публикацию
ВсеИнструменты 220 Вольт
Adblock
detector