Polytech-soft.com

ПК журнал
12 просмотров
Рейтинг статьи
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 пикселей вокруг них

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

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

Читать еще:  Синтаксис языка html

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

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

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

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

Сохранить этот документ под любым именем с расширением . 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 формах

ГЛАВА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+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

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

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

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

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

Ссылка на основную публикацию
Adblock
detector