Лабораторная по 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+CSS)

Модуль 1. Введение и основные понятия

Модуль 2. Анатомия страницы

Модуль 3. Гиперссылки

Модуль 4. CSS. Каскадные таблицы стилей: основные свойства

Модуль 5. Использование изображений на странице

Модуль 6. Структурирование информации при помощи списков

Модуль 7. Представление табличных данных при помощи таблицы

Модуль 8. Встраивание внешних данных при помощи фрейма

Модуль 9. Передача пользовательских данных при помощи формы

Модуль 11. Дополнительные возможности HTML и CSS

Модуль 12. Мета-информация на странице

Модуль 13. Выбор хостинга и поддержка сайта

Модуль 14. Что дальше?

Модуль 15. Верстка сайта по psd макету

Модуль 16. Bootstrap

Описание

Модуль 1. Введение и основные понятия

Как это работает? Что такое web-сервер, web-сайт, web-страница

Цели и задачи языка HTML

Базовые элементы разметки:

Лабораторная работа по теме

Модуль 2. Анатомия страницы

Понимаем, как мы пишем: синтаксис HTML

Элементы форматирования текста

Понимаем, что мы пишем: семантика элементов

Структурные элементы разметки

Лабораторные работы по теме

Модуль 3. Гиперссылки

Понятие гиперссылок в WWW

Внешние и внутренние гиперссылки

Типы адресов в WWW

Дополнительные атрибуты гиперссылок

Лабораторная работа по теме

Модуль 4. CSS. Каскадные таблицы стилей: основные свойства

Основные понятия CSS

Способы определения стилей

Каскадирование и наследование

Единицы измерения в CSS

Основные типы селекторов

Псевдоклассы и псевдоэлементы

Свойства цвета и фона

Лабораторные работы по теме

Модуль 5. Использование изображений на странице

Типы изображений используемые в WWW

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

Атрибуты элемента img

Лабораторная работа по теме

Модуль 6. Структурирование информации при помощи списков

CSS свойства для списков

Лабораторная работа по теме

Модуль 7. Представление табличных данных при помощи таблицы

Основные элементы таблицы

CSS свойства элементов таблиц

Объединение ячеек таблицы

Дополнительные элементы таблицы

Лабораторная работа по теме

Модуль 8. Встраивание внешних данных при помощи фрейма

Фреймы и гиперссылки

Лабораторная работа по теме

Модуль 9. Передача пользовательских данных при помощи формы

Что такое веб-формы?

Элемент form и его атрибуты

Элементы формы: текстовые поля и кнопки

Элементы формы: элементы выбора

Дополнительные атрибуты элементов формы

Лабораторная работа по теме

Модуль 10. Использование CSS для макетирования

Оформление границ элемента

Внутренние отступы элемента

Наружные отступы элемента

Лабораторные работы по теме

Модуль 11. Дополнительные возможности HTML и CSS

Практическая работа для закрепления изученных тем

Стили для различных типов носителей

Встраивание аудио- и видео-файлов

Лабораторные работы по теме

Модуль 12. Мета-информация на странице

Элемент meta и его атрибуты

Мета-информация для роботов

Эмуляция заголовков ответа сервера

Модуль 13. Выбор хостинга и поддержка сайта

Доступ к ftp-серверу через проводник Windows

Модуль 14. Что дальше?

Обзор HTML5 API

Тонкая настройка сайта на стороне сервера

Динамические элементы на странице

Динамическое создание контента на сервере

Современные способы предоставления информации

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

Загрузка...

Лабораторная по html Ссылка на основную публикацию

Похожие публикации

• 
  Задания html css

wpDiscuz

Adblock
detector