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

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

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

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

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

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

.

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

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

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

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

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

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

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

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

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

Задание 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 сами теги не отображаются, но влияют на способ отображения остальной части документа.

Оценка статьи:

Загрузка...