Практические занятия по html5. Задания по HTML

Методические разработки практических работ по информатике по темам "Язык разметки HTML" и "Современные web-технологии" (для учащихся средних классов).

При проведении занятий с использованием данных методических разработок для создания html- и css-файлов рекомендуется использовать обычный текстовый редактор, поддерживающий подстветку синтаксиса языков HTML и CSS, а также желательно включающий возможность работы с несколькими файлами в многостраничном режиме.

Например, для Windows подойдет Notepad++ (notepad-plus-plus.org). В текстовом редакторе Notepad++ для того, чтобы выполнялся перенос длинных строк, надо в меню выбрать командуВид -> Перенос строк. Также очень хорошим текстовым редактором является Notepad2 (flos-freeware.ch/notepad2.html). Однако он не поддерживает многостраничный режим работы. Установка переноса строк в нем выполняется с помощью командыView -> Word Wrap.

1. Html–документ. Абзацы, разрывы строк, выравнивание

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

Исходный код HTML-документа состоит из тегов и содержания.

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

Любой HTML документ всегда включает контейнеры html, headиbody, которые вложены друг в друга следующим образом:

Задание 1. Создайте файл и задайте ему структуру, которая приведена выше. Сохраните его.

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

Задание 2. Добавьте в документ контейнер title:

Сохраните файл и откройте в браузере. Найдите введенное вами содержание title.

Содержимое body отображается в окне браузера.

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

Задание 3. Добавьте в контейнер bodyследующее содержимое:

Появление персональных компьютеров в начале семидесятых годов(параллельно с постепенной эволюцией крупных ЭВМ)сейчас расценивают как революционный переворот. Масштабы его влияния на человеческое общество сравнивают с последствиями от изобретения книгопечатания.

В мире уже сейчас имеются миллионы и миллиарды ЭВМ.
Их число продолжает неуклонно расти!

Сохраните. Обновите документ в браузере. Отметьте, сколько абзацев вы видите, где находится разрыв строки.

2 Выравнивание абзацев. Старый стиль

Выравнивание абзацев определяется значениями left(по левому краю),right(по правому),center(по центру) иjustify(по ширине). Эти значения могут быть присвоены свойствуalign(выравнивание), которое допустимо для многих тегов.

Так, например, выравнивание абзаца по центру можно задать так:

Задание 4. Для созданных ранее абзацев задайте выравнивание по ширине (для первого абзаца) и по правому краю (для второго).

1.1. Создайте на локальном сервере Xampp в папке htdocs тестовую папку test , в ней папки css , images и pages , а также пустую главную страницу index.html нашего тестового сайта. Затем в папке pages создайте пустую веб-страницу page_1.html , а в папке css два пустых css -файла: styles_1.css и styles_2.css . Папку test в дальнейшем не удаляйте, все упражнения мы будем выполнять в ней. В html -документах не забудьте указать кодировку utf-8 и заголовок страницы "title" . Для быстрого доступа к главной странице, создайте в браузере ее закладку. Адресный путь к странице должен иметь вид http://localhost/ test/ index.html . Показать решение.

Решение задачи №1.1

1.2. Воссоздайте код представленной на рисунке веб-страницы. Используйте внутреннюю таблицу стилей, селекторы элементов p и span , css -свойства color и width . Ширину абзаца установите в 300px . Цвета используйте red и blue . Показать решение.

Условие задачи №1.2

Решение задачи №1.2

1.3. Используйте условие второй задачи, но разместите таблицу стилей во внешнем файле styles_1.css . Для подключения внешней таблицы стилей, используйте служебный элемент "link" . Показать решение.

Текст абзаца должен быть красного цвета. А вот и нет, т.к. содержимое элемента "span" должно иметь синий цвет.

Решение задачи №1.3

1.4. Используйте условие третьей задачи, но внешнюю таблицу стилей подключите при помощи свойства @import , разместив правило в служебном элементе "style" . Показать решение.

Текст абзаца должен быть красного цвета. А вот и нет, т.к. содержимое элемента "span" должно иметь синий цвет.

Решение задачи №1.4

1.5. Используйте условие второй задачи, но разместите правило для абзаца во внешнем файле styles_1.css , а правило для элемента "span" во внешнем файле styles_2.css . Подключите один из этих файлов при помощи служебного элемента "link" , а второй при помощи свойства @import , разместив правило в служебном элементе "style" . Во всех четырех задачах результат должен быть одинаковым! Показать решение.

Текст абзаца должен быть красного цвета. А вот и нет, т.к. содержимое элемента "span" должно иметь синий цвет.

Решение задачи №1.5

1.6. Ниже представлен код html -страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Используйте селекторы идентификаторов, классов и атрибутов. Показать решение.

Синий "span".
Зеленый "span".

Код страницы для задачи №1.6

Требуемый внешний вид страницы в задаче №1.6

#p_1{ color: red; width: 300px; } .s_1{ color: blue; } span{ color: green; }

Решение задачи №1.6

1.7. Ниже представлен код html -страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Разрешается использовать в css -правилах только контекстные, дочерние и соседние селекторы. Показать решение.

Оранжевый "em"

Первая красная строчка абзаца.
Синий "span".

Код страницы для задачи №1.7

Требуемый внешний вид страницы в задаче №1.7

Решение задачи №1.7

1.8. Ниже представлен код html -страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Используйте селекторы псевдоклассов и псевдоэлементов :hover , :visited , ::first-letter . Для абзаца используйте обычный селектор элементов. Показать решение.

При наведении на меня курсора я становлюсь оранжевым.

Первая красная строчка абзаца.
Меня уже посетили.

Код страницы для задачи №1.8

Требуемый внешний вид страницы в задаче №1.8

P{ color: red; width: 300px; } em:hover{ color: orange; } p::first-letter{ color: blue; } a:visited{ color: green; }

Решение задачи №1.8

1.9. Какой из селекторов имеет большую специфичность: p em{...} или p.class{...}, #m_d{...} или em.m_cl{...}, div p#my_id span{...} или div span#s_id{...}, div>div.my_class p.red_color span:hover{...} или div p+div p.green_color span{...}. Показать решение.

Определяем специфичности и сравниваем. p em{...} em.m_cl{...}, т.к. (1,0,0)>(0,1,1); div p#my_id span{...} div.my_class p.red_color span:hover{...} > div p+div p.green_color span{...}, т.к. (0,4,4)>(0,2,5).

Решение задачи №1.9

§2. Свойства CSS для текста, шрифта, списков, таблиц и форм

2.1. Ниже представлен код html -страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width ) абзацев установите 500px , фон (background-color ), соответственно, установите желтый и фиолетовый (violet), расстояние между словами, соответственно, 3px и 12px , расстояние между отдельными буквами - 1px и 2px , высоту строк - 1.1em и 1.6em , отступ первой строки - 1% и 3% . Во втором абзаце текст нужно выровнять по правому краю. Не забудьте перечеркнуть (подчеркнуть) соответствующие строки. Сравните результат форматирования обоих абзацев. Показать решение.

Первое предложение абзаца.

Первое предложение абзаца. Второе более длинное предложение абзаца. Третье и последнее предложение абзаца.

Код страницы для задачи №2.1

Требуемый внешний вид страницы в задаче №2.1

P_1{ width: 500px; background-color: yellow; word-spacing: 3px; letter-spacing: 1px; line-height: 1.1em; text-indent: 1%; } #p_2{ text-decoration: line-through } .p_3{ width: 500px; background-color: violet; word-spacing: 12px; letter-spacing: 2px; line-height: 1.6em; text-indent: 3%; text-align: right; } #p_4{ text-decoration: underline; }

Решение задачи №2.1

2.2. Ниже представлен код html -страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width ) абзацев установите 500px , фон (background-color ), соответственно, установите желтый и фиолетовый (violet). Для первого абзаца используйте шрифт Arial , а для второго - Times New Roman . Размер шрифта в обоих абзацах установите в 1em . Используйте, где потребуется, свойства font-variant , font-weight , font-style . Сравните результат форматирования текста с результатом форматирования в задаче 2.1. Показать решение.

Первое предложение абзаца. Второе более длинное предложение абзаца. Третье и последнее предложение абзаца.

Первое предложение абзаца. Второе более длинное предложение абзаца. Третье и последнее предложение абзаца.

Код страницы для задачи №2.2

Требуемый внешний вид страницы в задаче №2.2

P_1{ width: 500px; background-color: yellow; font-family: arial; font-size: 1em; } #p_2{ font-variant: small-caps; } .p_3{ width: 500px; background-color: violet; font-family: "times new roman"; font-size: 1em; font-weight: bold; } #p_4{ font-style: italic; }

Решение задачи №2.2

2.3. Ниже представлен код html -страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width ) списков установите 500px , фон (background-color ), соответственно, установите желтый и фиолетовый (violet). Используйте, где потребуется, свойства list-style-type , list-style-position . Сравните результат форматирования обоих списков. Показать решение.

• Используем вид маркера decimal.

1. Маркеры размещаем вне списка.
2. Используем вид маркера square.

Код страницы для задачи №2.3

Требуемый внешний вид страницы в задаче №2.3

List_1 { width: 500px; background-color: yellow; list-style-type: decimal; list-style-position: outside; } .list_2{ width: 500px; background-color: violet; list-style-type: square; list-style-position: inside; }

Решение задачи №2.3

2.4. Ниже представлен код html -страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Используйте свойства caption-side , border-collapse border-spacing , empty-cells . Сравните результат форматирования обоих таблиц. Показать решение.

Код страницы для задачи №2.4

Требуемый внешний вид страницы в задаче №2.4

Table_1{ caption-side: top; border-collapse: collapse; } .table_2{ caption-side: bottom; border-collapse: separate; border-spacing: 5px; empty-cells: hide; }

Решение задачи №2.4

§3. Установка размеров, границ, отступов и полей элементов

3.1. Ниже представлен код html -страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину первого абзаца установите 400px , второго - 300px . Высоту первого абзаца установите 10vh , второго - 200px . Во втором абзаце задайте минимальный предел ширины 400px , а максимальный предел высоты 100px . Используйте свойства width , height , min-width , max-height . Обратите внимание на конечные результаты ширины и величины второго абзаца из-за применения ограничений. Показать решение.

Ширина абзаца равна 400px, высота - 10% от высоты области просмотра окна браузера.

Ширина абзаца будет 400px, т.к. width меньше min-width, а высота - 100px, т.к height превышает max-height.

Код страницы для задачи №3.1

Требуемый внешний вид страницы в задаче №3.1

P_1{ background-color: yellow; width: 400px; height: 10vh; } .p_2{ background-color: violet; min-width: 400px; max-height: 100px; width: 300px; height: 200px; }

Решение задачи №3.1

3.2. В условии задачи 3.1 представлен код html -страницы, а ниже показан внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Воспользуйтесь результатом задачи 3.1, добавив в таблицу стилей дополнительные свойства, устанавливающие соответствующие границы абзацев: border , border-top , border-bottom . Ширину всех границ установите 4px . Показать решение.

Требуемый внешний вид страницы в задаче №3.2

P_1{ background-color: yellow; width: 400px; height: 10vh; border: solid red 4px; border-top: dotted blue; border-bottom: dashed blue; } .p_2{ background-color: violet; min-width: 400px; max-height: 100px; width: 300px; height: 200px; border: solid green 4px; }

Решение задачи №3.2

3.3. В условии задачи 3.1 представлен код html -страницы, а ниже показан внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Воспользуйтесь результатом задач 3.1 и 3.2, добавив в таблицу стилей дополнительные свойства, устанавливающие скругление соответствующих углов первого абзаца и внешние границы второго абзаца: border-radius , border-bottom-right-radius , border-bottom-left-radius , outline , outline-offset . Скругление границ установите 1em , а для нижних углов переопределите на 2em . Расстояние между внутренней и внешней границами установите 2px . Ширину внешней границы установите 4px . Показать решение.

Требуемый внешний вид страницы в задаче №3.3

P_1{ background-color: yellow; width: 400px; height: 10vh; border: solid red 4px; border-top: dotted blue; border-bottom: dashed blue; border-radius: 1em; border-bottom-right-radius: 2em; border-bottom-left-radius: 2em; } .p_2{ background-color: violet; min-width: 400px; max-height: 100px; width: 300px; height: 200px; border: solid green 4px; outline: solid blue 4px; outline-offset: 2px; }

Решение задачи №3.3

3.4. В условии задачи 3.1 представлен код html -страницы, а ниже показан внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Воспользуйтесь результатом задач 3.1, 3.2 и 3.3, добавив в таблицу стилей дополнительные свойства, устанавливающие внутренние и внешние отступы абзацев: padding , padding-left , margin , margin-top . Внутренние поля в обоих абзацах установите 0.5em , а затем их внутренние левые отступы переопределите на 0.8em . Внешние отступы установите 30px , но во втором абзаце внешний отступ сверху переопределите на 50px . Сравните результаты всех четырех задач. Показать решение.

Требуемый внешний вид страницы в задаче №3.4

P_1{ background-color: yellow; width: 400px; height: 10vh; border: solid red 4px; border-top: dotted blue; border-bottom: dashed blue; border-radius: 1em; border-bottom-right-radius: 2em; border-bottom-left-radius: 2em; padding: 0.5em; padding-left: 0.8em; margin: 30px; } .p_2{ background-color: violet; min-width: 400px; max-height: 100px; width: 300px; height: 200px; border: solid green 4px; outline: solid blue 4px; outline-offset: 2px; padding: 0.5em; padding-left: 0.8em; margin: 30px; margin-top: 60px; }

Решение задачи №3.4

§4. Установка цвета и фона, использование анимации

4.1. Ниже представлен код html -страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Скопируйте изображение портфеля в папку images , которая находится в созданной нами ранее тестовой папке test на локальном сервере (если вы ее удалили, то посмотрите условие задачи №1.1 в начале задачника и создайте все заново). Текст первого абзаца должен быть красным, а фон - желтым, ширина абзаца должна быть равна 300px . Ширина второго абзаца должна быть равна 300px , фон установите фиолетовым. Также добавьте фоновое изображение, которое не должно повторяться, размеры должны составлять 20% от ширины и 40% от высоты абзаца, начальная позиция должна определяться координатами x =15px и y =15px . Под фон выделите только область содержимого абзаца. Показать решение.

Текст данного абзаца должен быть красным, а фон - желтым. Ширина абзаца должна быть 300px.

Ширина абзаца должна быть 300px, фон - фиолетовым. Изображение не должно повторяться, размеры должны быть 20% от ширины и 40% от высоты абзаца. Начальная позиция должна определяться координатами x=15px и y=15px. Под фон выделите только область содержимого абзаца.

Код страницы для задачи №4.1

Требуемый внешний вид страницы в задаче №4.1

Background_1{ color: red; background-color: yellow; } .background_2{ background-color: violet; background-image: url("http://localhost/test/images/cabinet.png"); background-repeat: no-repeat; background-position: 15px 15px; background-size: 20% 40%; background-clip: content-box; } .border_1{ padding: 15px; width: 300px; border: solid 2px green; }

Решение задачи №4.1

4.2. Ниже представлен код html -страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Текст первого абзаца должен быть черным, а фон линейно-градиентным от красного до белого цвета. Ширина абзаца должна быть 300px , а его высота - 150px . Ширина второго абзаца должна быть 300px , а его высота - 150px . Фон должен быть радиально-градиентным от зеленого до белого цвета. Градиентный эллипс должен иметь радиусы 250px и 280px , а центр располагаться в точке с координатами x =100px и y =180px . Показать решение.

Текст данного абзаца должен быть черным, а фон линейно-градиентным от красного до белого цвета. Ширина абзаца должна быть 300px, а его высота - 150px.

Ширина абзаца должна быть 300px, а его высота - 150px. Фон должен быть радиально-градиентным от зеленого до белого цвета. Градиентный эллипс должен иметь радиусы 250px и 280px, а центр располагаться в точке с координатами x=100px и y=180px.

Код страницы для задачи №4.2

Требуемый внешний вид страницы в задаче №4.2

Background_1{ color: black; background-image: linear-gradient(90deg, #ff0000, #ffffff); } .background_2{ background: radial-gradient(250px 280px at 100px 180px, #00ff00, #ffffff); } .border_1{ padding: 15px; width: 300px; height: 150px; border: solid 3px blue; }

Решение задачи №4.2

4.3. Ниже представлен код html -страницы, а также код внешней таблица стилей styles_1.css . Наберите их в Notepad++ и поэкспериментируйте, изменяя значения анимационных свойств.

Код html-страницы для задачи №4.3

Background_1{ padding: 0px; width: 450px; height: 100px; border: solid 3px red; animation-name: example_1; animation-delay: 1s; animation-duration: 4s; animation-iteration-count: infinite; animation-direction: reverse; animation-timing-function: ease-in; animation-fill-mode: backwards; } @keyframes example_1{ 0%{ background: #ff0000; height: 0px; } 100% { background: #0000ff; height: 200px; } }

Код внешней таблицы стилей для задачи №4.3

4.4. Ниже представлен код html -страницы, а также код внешней таблица стилей styles_2.css . Наберите их в Notepad++ и поэкспериментируйте, изменяя значения транзитных свойств.

Код html-страницы для задачи №4.4

Background_1{ padding: 10px; width: 100px; height: 100px; border: solid 3px blue; background-color: #ff0000; transition-property: width, background-color; transition-delay: 0.2s; transition-duration: 2s; transition-timing-function: ease-in; } p:hover{ cursor: pointer; background-color: #0000ff; width: 450px; }

Код внешней таблицы стилей для задачи №4.4

§5. Отображение элементов в документе

5.1. Ниже представлен код html -страницы, а также код внешней таблица стилей styles_2.css . Наберите их в Notepad++ . Обратите внимание на поведение абзацев при прокрутке страницы, а также на изменение внешнего вида элемента "span" при наведении на него курсора и, как следствие, изменения значения применяемого к нему свойства display .

Меняем display

position: fixed;

position: absolute;

Код html-страницы для задачи №5.1

Div_0{ padding: 10px; width: 200px; height: 200px; border: solid 3px orange; } span:hover{ cursor: pointer; display: block; } .div_1{ padding: 10px; width: 200px; height: 600px; border: solid 3px orange; background: linear-gradient(180deg, #0000ff, #ffffff); position: fixed; top: 250px; } .div_2{ padding: 10px; width: 200px; height: 100px; border: solid 3px red; background: linear-gradient(90deg, #0000ff, #ffffff); position: absolute; top: 1100px; left: 0px; }

Код внешней таблицы стилей для задачи №5.1

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

Код страницы для задачи №5.2

Требуемый внешний вид страницы в задаче №5.2

Div_1{ padding: 15px; width: 300px; height: 400px; border: dashed 5px #00ff00; position: fixed; top: 30px; left: 35px; } .div_3:hover{ cursor: pointer; opacity: 0.3; } .div_2{ padding: 5px; width: 70px; height: 50px; border: solid 2px orange; background: radial-gradient(35px 35px at 10px 10px, #00ffff, #ffffff); float: left; } .div_3{ padding: 5px; width: 70px; height: 50px; border: dotted 2px red; background: linear-gradient(45deg, #0000ff, #ffffff); float: right; }

Решение задачи №5.2

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

Код страницы для задачи №5.3

Требуемый внешний вид страницы в задаче №5.3

Div_1{ padding: 10px; width: 500px; height: 200px; border: dashed 5px #0000ff; background-color: yellow; position: absolute; top: 30px; left: 35px; } .div_2{ padding: 5px; width: 200px; height: 100px; border: solid 2px blue; float: left; overflow: scroll; } .div_3{ padding: 5px; width: 200px; height: 100px; border: dotted 2px blue; float: right; overflow: auto; }

Решение задачи №5.3

§6. @-правила. Вставка контента. Печать документа.

6.1. Ниже представлен код html -страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Для создания счетчиков тела документа и элемента "h2" используйте свойство counter-reset , а для вставки значений счетчиков свойства content и counter-increment . Показать решение.

Введение в HTML

Что такое HTML?

Отображение веб-документа браузером.

Понятие тега HTML и его синтаксис.

Форматирование текста

Блочные и строчные элементы.

Разбиение текста на абзацы. Применение заголовков.

Код страницы для задачи №6.1

Требуемый внешний вид страницы в задаче №6.1

Body{ counter-reset: parag_1; /* Создаем счетчик для тела документа */ } h2{ counter-reset: parag_2; /* Создаем счетчик для заголовка "h2" */ } /* Считаем в элементе "body" все "h2" */ /* Вставляем перед каждым "h2" контент: строка+текущее значение счетчика+строка */ h2:before{ counter-increment: parag_1 1; content: "§" counter(parag_1) ". "; } /* Считаем в элементе "h2" все "h3" */ /* Вставляем перед каждым "h3" контент: текущее значение счетчика parag_1+строка+текущее значение счетчика parag_2+строка */ h3:before{ counter-increment: parag_2 1; content: counter(parag_1) "." counter(parag_2) ". "; }

Решение задачи №6.1

§7. Практическая верстка элементов сайта на HTML и CSS

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

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

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

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

7.2.2 Используя код предыдущего примера, создайте внизу страницы кнопку "Наверх" . Боковую навигацию уберите. Если вы не смогли выполнить задание, посмотрите решение , а затем наберите код самостоятельно.

7.2.3 В учебном коде, который можно загрузить , показано создание в боковой части сайта кнопки "Наверх" , которая появляется после прокрутки страницы на указанное число, например, пикселей. Комментариев мало, но кода немного, поэтому разобраться в нем не составит особого труда. Изучите пример, а затем сверстайте его самостоятельно.

7.3.1 Создайте горизонтальное меню, показанное на рисунке. Используйте для этого список, расположив ссылки в пунктах списка. Чтобы пункты шли строкой, преобразуйте их в строчные элементы. При наведении курсора мыши на пункты меню, они должны менять цвет на черный. Загрузить решение можно . Преобразуйте меню в вертикальное. Чтобы убрать номера пунктов, используйте соответствующее свойство для маркеров списка (см. справочник CSS ).

Требуемый внешний вид меню задачи №7.3.1

7.3.2 Изучите следующий код раскрывающегося меню, после чего наберите его самостоятельно.

7.3.3 Изучите следующий код вертикального раскрывающегося многоуровневого меню, после чего наберите его самостоятельно.

7.3.4 Изучите следующий код горизонтального плавно раскрывающегося меню, после чего наберите его самостоятельно.

Верстаем учебный сайт №1

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

Верстаем учебный сайт №2

7.5.1 Для получения дополнительной практики по верстке сайтов еще один учебный пример сайта, загрузите и при помощи комментариев изучите его код, а затем, используя готовый макет и графические заготовки, сверстайте сайт самостоятельно.
Таблицу стилей для больших разрешений постарайтесь сделать сами. Если вы работаете на ноутбуке, то для моделирования больших разрешений измените в медиазапросах разрешения с 1366px , например, на 1266px , чтобы сработала таблица стилей для больших разрешений экранов. При создании таблицы стилей опирайтесь на коэффициент увеличения размеров 1.3 . А далее смотрите на результат отображения в браузере и корректируйте.
Размеры изображений можно изменить либо в графическом редакторе, либо растянуть при помощи соответствующего свойства CSS (см. пример и справочник).

Только для подписчиков

Только для подписчиков

Только для подписчиков

Только для подписчиков

Только для подписчиков

Только для подписчиков

Практические работы по HTML

Задание № 1.

Создание простейшего файла HTML

1. Создайте личную папку, куда вы будете сохранять все файлы своего сайта.

2. Нажмите правой кнопкой мыши и выберите «Создать» - «Пустой файл».

3. Введите имя файла rasp.html.

4. Нажмите правой кнопкой мыши «Открыть с помощью» - «Mousepad»

5. Наберите простейший html документ:

Учебный файл HTML

Расписание занятий на среду.

6. Сохраните документ, закройте редактор.

7. Откройте документ rasp.html двойным щелчком мыши, и проверьте результат.

Задание № 2.

Управление расположением текста на экране

1. Выполните шаг №4 из предыдущего задания, для файла rasp.html

2. Внести изменения в файл rasp.html, расположив слова Расписание, занятий, на среду на разных строках.

Пример:

Расписание

занятий

на среду.

Не удивляйтесь тому, что внешний вид вашей Web-страницы не изменился.

Задание № 3.

Управление расположением текста на экране 2

1. Выполните шаг №4 из первого задания, для файла rasp.html

2. Внести изменения в файл rasp.html:

Пример:

Расписание

занятий

на среду.

3. Сохраните текст с внесенными изменениями в файле rasp.html.

4. Откройте документ rasp.html двойным щелчком мыши, и проверьте результат.

Внешний вид строк должен поменяться. Отчего зависит изменение текста?

Задание № 4.

Форматирование текста

Тег перевода строки
отделяет строку от последующего текста или графики.

Тег абзаца

тоже отделяет строку, но еще добавляет пустую строку, которая зрительно

выделяет абзац.

Учебный файл HTML

Расписание

занятий

На среду.

3. Сохраните текст с внесенными изменениями в файле rasp.html.

4. Откройте документ rasp.html двойным щелчком мыши, и проверьте результат.

Задание № 5.

Форматирование текста

1. Внесите изменения в файл RASP.HTML

Учебный файл HTML

Расписание

занятий

на среду.

3. Сохраните текст с внесенными изменениями в файле rasp.html.

4. Откройте документ rasp.html двойным щелчком мыши, и проверьте результат.

5. Ответьте на вопрос, с помощью каких тегов задается подчеркнутый, курсив, полужирный шрифт?

Задание № 6.

Задание размеров символов Web-страницы

Существует два способа управления размером текста, отображаемого браузером:

использование стилей заголовка,

задание размера шрифта основного документа или размера текущего шрифта.

Используется шесть тегов заголовков: от

до

(тег двойной, т.е. требует закрытия).

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

1. Внесите изменения в файл RASP.HTML

Учебный файл HTML

Расписание занятий

на среду.

3. Сохраните текст с внесенными изменениями в файле rasp.html.

4. Откройте документ rasp.html двойным щелчком мыши, и проверьте результат.

5. Замените тег h1 на h2-h6, и посмотрите как меняется размер загаловка.

Задание № 7.

Установка размера текущего шрифта

Тег шрифта позволяет задавать размер текущего шрифта в отдельных местах текста в

диапазоне от 1 до 7.

Учебный файл HTML

Расписание занятий

на среду.

3. Сохраните текст с внесенными изменениями в файле rasp.html.

4. Откройте документ rasp.html двойным щелчком мыши, и проверьте результат.

5. Замените размер шрифта на другие, и посмотрите как меняется размер текста.

Задание № 8.

Установка цвета шрифта

Тег предоставляет возможности управления гарнитурой, цветом и размером текста.

Для изменения цвета шрифта можно использовать в теге атрибут COLOR=”X”. Вместо

“X” надо подставить английское название цвета в кавычках (“ ”), либо его шестнадцатеричное

значение. При задании цвета шестнадцатеричным числом необходимо представить этот цвет

разложенным на три составляющие: красную (R – Red), зелѐную (G – Green), синюю (B – blue),

каждая из которых имеет значение от 00 до FF. В этом случае мы имеем дело с так называемым

форматом RGB.

Примеры записи текста в формате RGB приведены в Таблице 1:

1
. Внесите изменения в файл RASP.HTML

Учебный файл HTML

Расписание

Занятий на среду.

3. Сохраните текст с внесенными изменениями в файле rasp.html.

4. Откройте документ rasp.html двойным щелчком мыши, и проверьте результат.

5. Поменяйте цвет на другой, и посмотрите результат работы тега font.

Задание № 9.

Выравнивание текста по горизонтали.

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

1. Внесите изменения в файл RASP.HTML

Учебный файл HTML

Расписание

занятий на среду.

3. Сохраните текст с внесенными изменениями в файле rasp.html.

4. Откройте документ rasp.html двойным щелчком мыши, и проверьте результат.

Сделайте Web-страницу по следующему образцу.

В скобочках указан цвет текста. Обязательно должно присутствовать выравнивание текста.

Файлу дайте название biscuit.html