Комплекс лабораторно-практических заданий "Язык HTML". CSS для новичков: практическое занятие

Задачи по основам HTML призваны закрепить работу с набором следующих тем: структура HTML , комментарии в HTML, основные теги , основные атрибуты HTML . .

Задачи по изображениям в HTML: вставка изображения в HTML (HTML код изображения), размер HTML изображения , выравнивание изображения … в HTML.

Задания по углубленной работе с HTML и CSS

Задания по HTML с Emmet. Быстрая верстка , команды Emmet (так называемая шпаргалка Emmet ). После выполнения задач с плагином Emmet скорость вашей верстки/разработки вырастет в разы. .

Задания по CSS-селекторам. Селекторы CSS : css селекторы классов , css селекторы атрибутов , соседние селекторы css , контекстные селекторы css, дочерние селекторы +в css , приоритет селекторов . .

Работа CSS-позиционирования важна для понимания сложной верстки. Здесь приводятся задачи на понимание и работу с: position absolute , position relative , position fixed и position static , CSS-свойств top left bottom right . .

Задания по верстке форм

Сверстайте форму аутентификации на сайте, такую же как в Twitter Bootstrap (не используя этот фреймворк). Например, как в .

Сверстайте форму диспетчера на сайте

Подключить jQuery-плагин для выбора даты/месяца из поля

Создайте чекбокс по аналогии с социальной сетью.

Создайте форму регистрации посетителя сайта

Создайте форму подобной той, что сортирует товары в Яндекс.Маркет

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

Современные возможности CSS позволяют создавать замечательные и работать с фоном раскрашивая его градиентной заливкой . Небольшой набор задач на CSS-анимацию .

Задания на медиа запросы (мобильные сайты). Создание мобильной версии сайта — важная часть умений веб-разработчиков. Задания посвящены темам: создание мобильного сайта , проверка мобильной версии сайта . .

Задания по верстке psd макета и CSS-фреймворкам. Верстка сайта на основе psd макета — важнейшая часть работы веб-верстальщика. На уроках HTML мы рассматриваем основные шаги верстки из psd в HTML. Задания .

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

Задачи по CSS p{ color: red; width: 300px; } span{ color: blue }

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

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

Задачи по CSS

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

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

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

Задачи по CSS /* Можно использовать разные записи правила */ /* @import "http://localhost/test/css/styles_1.css"; */ @import url("http://localhost/test/css/styles_1.css");

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

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

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

Задачи по CSS @import url("http://localhost/test/css/styles_1.css");

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

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

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

Задачи по CSS

Синий "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 -правилах только контекстные, дочерние и соседние селекторы. Показать решение.

Задачи по CSS Оранжевый "em"

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

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

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

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

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

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

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

Код страницы для задачи №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% . Во втором абзаце текст нужно выровнять по правому краю. Не забудьте перечеркнуть (подчеркнуть) соответствующие строки. Сравните результат форматирования обоих абзацев. Показать решение.

Задачи по CSS

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

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

Код страницы для задачи №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. Показать решение.

Задачи по CSS

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

Код страницы для задачи №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 . Сравните результат форматирования обоих списков. Показать решение.

Задачи по CSS

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

Маркеры размещаем вне списка.

Используем вид маркера 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 . Сравните результат форматирования обоих таблиц. Показать решение.

Задачи по CSS

Таблица №1

Ячейка 1.1	Ячейка 1.2
Ячейка 2.1	Ячейка 2.2

Таблица №2

Ячейка 1.1	Ячейка 1.2
	Ячейка 2.2

Код страницы для задачи №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 . Обратите внимание на конечные результаты ширины и величины второго абзаца из-за применения ограничений. Показать решение.

Задачи по CSS

Ширина абзаца равна 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 . Под фон выделите только область содержимого абзаца. Показать решение.

Задачи по CSS

Текст данного абзаца должен быть красным, а фон - желтым. Ширина абзаца должна быть 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 . Показать решение.

Задачи по CSS

Текст данного абзаца должен быть черным, а фон линейно-градиентным от красного до белого цвета. Ширина абзаца должна быть 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++ и поэкспериментируйте, изменяя значения анимационных свойств.

Задачи по CSS

Код 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 .

Задачи по CSS

Меняем 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 -страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Необходимые характеристики элементов указаны на самих рисунках. Показать решение.

Задачи по CSS Для основного div"а установлено фиксированное позиционирование, смещение сверху - 30px, слева - 35px, ширина div"а - 300px, высота div"а - 400px, внутренние отступы - 15px.

div_2 Для второго div"а ширина равна 70px, высота - 50px, градиент (35px 35px at 10px 10px, #00ffff, #ffffff), внутренние отступы - 5px, ширина границы - 2px. Плавает слева.

div_3 Для третьего div"а ширина равна 70px, высота - 50px, градиент (45deg, #0000ff, #ffffff), внутренние отступы - 5px, ширина границы - 2px. Плавает справа. При наведении курсора меняет свою прозрачность на 0.3.

Код страницы для задачи №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 -страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Необходимые характеристики элементов указаны на самих рисунках. Показать решение.

Задачи по CSS Для основного div"а установлено абсолютное позиционирование, смещение сверху - 30px, слева - 35px, ширина div"а - 500px, высота div"а - 200px, внутренние отступы - 15px.

Для второго div"а ширина равна 200px, высота - 100px, внутренние отступы - 5px, ширина границы - 2px. Плавает слева. overflow: scroll Для третьего div"а ширина равна 200px, высота - 100px, внутренние отступы - 5px, ширина границы - 2px. Плавает справа. overflow: auto

Код страницы для задачи №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 . Показать решение.

Задачи по CSS Введение в 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 (см. пример и справочник).

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

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

*Наведите курсор мыши для приостановки прокрутки.

Назад Вперед

30 хороших практик в CSS для новичков

CSS - язык, используемый в какой-то момент практически каждым разработчиком. Хотя мы порой воспринимаем его как должное, он, тем не менее, является мощным средством и имеет множество нюансов в применении, позволяющих помочь в разработке качественного дизайна (либо затруднить данный процесс). Ниже представлено 30 хороших рекомендаций, которые помогут вам писать правильный и грамотный код, избегая многих типичных ошибок.

1. Сделайте его легко читаемым

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

Заметка
При написании CSS-файлов, большинство разработчиков разделяются на две группы, две крайности.

Группа 1: Все в одну линию

SomeDiv { background: red; padding: 2em; border: 1px solid black; }

Группа 2: Каждому стилю - отдельная строка

SomeDiv { background: red; padding: 2em; border: 1px solid black; }

На самом деле обе практике вполне хороши, хотя между представителями данных групп нередки разногласия! Просто имейте в виду - выбирать нужно тот вариант, на который вам приятно смотреть. Вот и все.
Заметка

2. Сделайте его целостным

Помимо повышения читабельности кода, сделайте его более целостным. Вы должны начать разрабатывать свой "суб-язык" CSS, который позволит вам придерживаться определенного стиля именования. Есть определенное количество классов, которые я создаю практически всегда, при этом я даю им одни и те же имена каждый раз. К примеру, я использую .caption-right для выравнивания картинок по правой стороне.

Подумайте о том, будете ли вы использовать тире и нижние подчеркивания в названиях ваших классов и ID, и в каких случаях вы будете так делать. Когда вы начинаете создавать собственные стандарты для CSS, вы становитесь куда ближе к профессионалам в этом деле.

3. Начните с фреймворка

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

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

Заметка
Не соглашусь. CSS-фреймворки - незаменимая вещь, но лишь для немногих, для тех, кто хорошо умеет ими пользоваться.

"Это скорее не вопрос изобретения колеса, а вопрос понимания того, как оно работает"

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

4. Используйте обнуление

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

Вот ссылки на одни из наиболее популярных сбросов: MeyerWeb , Yahoo’s developer reset . Как вариант, вы можете придумать свой "обнулятор", взяв за основу следующий .

5. Структурируйте ваши файлы стилей по принципу "сверху вниз"

Всегда имеет смысл структурировать файл CSS так, чтобы вы могли быстро найти нужную вам часть кода. Я рекомендую использовать принцип "сверху вниз", суть которого в том, чтобы составлять файл стилей в том порядке, в котором данные стили применяются на странице. К примеру:

1. Общие классы (body, a, p, h1, и т.д.) 2. #header 3. #nav-menu 4. #main-content

Не забудьте снабдить каждую секцию комментариями!

/****** main content *********/ здесь идут стили... /****** footer *********/ здесь идут стили...

6. Группируйте элементы

Часто элементы могут иметь пересекающиеся, общие стили. Вместо того, чтобы переписывать уже имеющийся код, лучше просто сгруппируйте элементы. К примеру, ваши заголовки h1, h2 и h3 могут иметь одинаковый шрифт и цвет:

H1, h2, h3 {font-family: tahoma, color: #333}

7. Создайте сперва HTML-разметку

Многие разработчики создают CSS-файл параллельно с созданием разметки HTML. Это кажется логичным, но все же вы сможете сэкономить немало времени, если сначала разберетесь с HTML и лишь потом - со стилями. Данный подход позволяет вам представить страницу как целое, подумать о том, где какие стили применить, получая на выходе более целостный файл стилей, выполненный по принципу "сверху вниз".

8. Применяйте несколько классов к элементу, если нужно

Иногда бывает лучше применить к элементу сразу несколько классов. Предположим, у вас есть контейнер div , которому вы хотите задать float:right , и у вас уже есть класс .right в вашем файле стилей, который выравнивает все по правому краю. Вы можете просто добавить еще один класс к вашему контейнеру div :

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

Заметка
Будьте очень осторожны, используя имена вроде left и right . Представьте, что вам вдруг понадобилось выровнять контейнер по левой стороне. В этом случае вам нужно вернуться в HTML-код и изменить имя класса - и все это для того, чтобы изменить визуальное отображение на странице. Это несемантично. Запомните: HTML - для разметки, CSS - для визуального представления.

Если вам нужны правки в HTML для смены оформления страницы, вы делаете что-то не так!

9. Используйте правильный тэг Doctype

К элементам, относящимся к обоим типам можно отнести:

Span, a, strong, em, img, br, input, abbr, acronym

К блочным элементам относятся:

Div, h1...h6, p, ul, li, table, blockquote, pre, form

13. Располагайте свойства в алфавитном порядке

Применение такой системы расположения свойств позволит вам сэкономить немало времени при поиске нужного свойства.

#cotton-candy { color: #fff; float: left; font-weight: height: 200px; margin: 0; padding: 0; width: 150px; }

Заметка
Эх.., принести скорость в жертву слегка улучшенной читабельности.. Смотрите сами..
Заметка

14. Используйте CSS-компрессоры

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

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

15. Используйте общие классы

Вы скоро заметите, что есть стили, которые вы применяете снова и снова. Вместо того, чтобы добавлять этот стиль к каждому ID, вы можете создать общие классы и добавлять их к ID других классов CSS (смотрите рекомендацию №8 данной статьи).

К примеру, я заметил, что я использую float:right и float:left снова и снова в своих дизайнах. Я просто добавляю классы .left и .right в свой файл стилей и применяю его к элементам.

Left {float:left} .right {float:right} ...

Таким образом, вам не нужно постоянно писать float:left для всех элементов, к которым нужно применить данное свойство.

16. Используйте "Margin: 0 auto" для центрирования дизайна

Многие новички в CSS не понимают, почему они не могут просто использовать float: center чтобы добиться эффекта центрации для блочных элементов. Если бы все было так просто! К сожалению, нужно делать это так:

Margin: 0 auto; /* 0 - для top и bottom; auto - для left и right */

17. Не заключайте все подряд в DIV

Частенько возникает соблазн сделать что-то вроде:

Текст заголовка

Может показаться, что это достаточно удачное решение, но так вы начнете захламлять свой файл стилей. Вместо этого сделайте проще:

Header Text

И уже для тэга h1 вы можете задать любое оформление, которое вам нужно.

18. Используйте Firebug

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!

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

Для изучения урока, скачайте архив с необходимыми файлами .

HTML - это язык разметки документов . Правильное произношение - Эйч Ти Эм Эль .

Вы, наверняка, работали когда-нибудь в редакторе документов Word или подобных офисных приложениях? Наверное вы знаете, что данный вид редакторов имеет богатые возможности для редактирования текста, расположения элементов, вставки картинок и т. д.

Зачем, спросите вы, писать в статье, посвященной HTML о текстовых процессорах? А вот зачем. Если разобраться, что такое офисный редактор? Это приложение для редактирования и отображения документов.

Ключевое слово здесь - документ . То есть, мы создаем, редактируем и просматриваем документ в какой-то программе, в данном случае - в офисном редакторе. Если открыть такой документ в простом текстовом редакторе, например, в Блокноте, то мы увидим множество странных символов и знаков. Эта каша из символов непонятна человечеству, но понятна компьютерам. Благодаря этому внутреннему языку, документ Word приобретает определенную структуру и вид в самом редакторе, а документ предстает перед нами во всей своей красе с отформатированным текстом и картинками на своем месте.

HTML - это язык разметки документов для браузера . Word"ом здесь выступает браузер, а документом - HTML страничка. Это самая основа технологии HTML, понимание которой необходимо для того, чтобы не путать язык разметки веб документов с языками программирования. Название говорит за себя - с помощью HTML мы размечаем , где на странице будет показан элемент, картинка или текст, и в каком порядке они будут следовать друг за другом.

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

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

Этакий Word для HTML. Такие визуальные редакторы называются:

WYSIWYG редакторы - W hat Y ou S ee I s W hat Y ou G et. То есть, если перевести на русский: что видим, то и получаем.

Я их называю "вузивуги". Хоть это фонетически и не правильно, зато ярко свидетельствует о бессмысленности данного изобретения. Новички очень часто используют такие редакторы для создания своих первых сайтов. Конечно, это удобно - не нужно углубляться в изучение тегов, стилей оформления и прочих, на первый взгляд, неприятных и сложных вещей. Редактор сам автоматически преобразует наши действия в HTML код.

Но, как говорится, ни чего просто так не бывает. А если конкретнее - у такого подхода есть очень серьезные недостатки. Что же мешает всем подряд использовать визуальные редакторы для оформления HTML страничек? Дело в том, что сформированные таким образом страницы имеют, как правило, очень много лишнего кода, очень много ошибок с семантической точки зрения. Сейчас, конечно, нет проблем со скоростным интернет соединением и разница в размере странички в 400 кб и 100 кб не существенна для скорости, однако оптимизированный и правильно написанный HTML код избавляет от множества проблем и дает массу преимуществ, а именно:

Грамотный HTML код положительно влияет на поисковую оптимизацию, скорость сканирования поисковым роботом сайта. Сгенерированные вузивугой килобайты кода здесь не приемлемы и даже вредны;

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

простого редактирования

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

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

Повозившись немного с WYSIWYG редактором, юные HTML-гуру оставляют это бесперспективное занятие и двигаются дальше.

Структура документа HTML

Рекомендую для занятий скачать и установить редактор Sublime Text . Крайне не рекомендую использовать для HTML верстки встроенный в Windows "Блокнот", если вы не хотите сломать себе психику на ранних порах изучения HTML.

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

Давайте создадим на компьютере первоначальный шаблон - файл index.html , откроем с помощью редактора и вставим в него следующий код:

Заголовок Тело документа Обратите внимание, документы HTML имеют расширение .html .

Итак, по порядку из примера.

- тип документа (доктайп)

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

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

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

- начало документа

Первый тег, который мы встречаем после доктайпа, это .

HTML тег - структурная единица разметки HTML документа. Код HTML складывается из кирпичиков, которые именуются тегами. Каждый тег имеет свою функцию, а изучение языка разметки HTML, в конечном счете, заключается именно в изучении тегов и их свойств в документе.

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

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

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

Тег

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

содержание или другие теги

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

Тег - заголовок документа Заголовок

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

Метатег

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

Фавиконка (favicon)

Подключает к документу файл с изображением фавиконки. Фавиконка (favicon) - миниатюрный значок, отображаемый рядом с названием документа во вкладке браузера. Фавиконка - это графический файл, размером 16 x 16 (или 32 x 32) пикселей, который может иметь различные форматы, такие, как png, jpg, ico, gif. Традиционно используется формат ico. Анимированные фавиконки - это gif файлы, содержащие анимацию. Наблюдать анимированный фавикон можно, например, ВКонтакте, когда приходит новое сообщение.

CSS стили документа

Подключает к документу CSS файл со стилями оформления HTML.

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

Примечание: свойство href конструкции указывает расположение внешнего файла. В нашем примере, файл style.css и favicon.ico , находятся в той-же папке, что и файл index.html . не имеет закрывающего тега.

Тег

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

В нашем примере подключается внешний файл script.js , который находится в той-же папке, что и основной файл index.html.

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

Тело aka body

Вот здесь то и начинается все самое интересное и визуально осязаемое в HTML верстке документа.

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

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

Тег	Описание
	Тег для создания ссылок в документе. Пример: текст ссылки Атрибут href указывает документ, на который будет вести данная ссылка.
,	Делает текст курсивом или жирным (акцентируемым). Пример: текст курсивом жирный (акцентируемый) текст
, , , , ,	Заголовки документа. Всего существует 6 уровней заголовков, но на практике используются только от h1 до h4. В документе должен быть только один заголовок, выделенный тегом h1, как главный заголовок документа. Примеры: Заголовок первого уровня Заголовок второго уровня Заголовок третьего уровня ... и т. д.
,	Списки документа. Представляют собой нумерованный или маркированный список. Элементом такого списка является тег Примеры: Элемент маркированного списка 1 Элемент маркированного списка 2 Элемент нумерованного списка 1 Элемент нумерованного списка 2
	Абзац. Данный тег определяет абзац текста, отбитый от остальных абзацев. Закрывать данный тег очень желательно. Пример: Внешний вид HTML разметки во многом определяется CSS стилями. Тем не менее, некоторые веб-мастера предпочитают не использовать стили на первых этапах проекта.
	Картинка. С помощью данного тега в HTML разметку можно вставить картинку. Обязательно указывайте у всех изображений альтернативный текст - атрибут "alt". Данный тег "самозакрывающийся". Пример:
+ +	Формы и элементы ввода. Формы предназначены для ввода информации в систему на сервере. Этакая обратная связь пользователя и сайта. Например, формы используются, когда нужно отправить какое-то сообщение на сервер. Кроме того, формы могут выполнять и другие функции, но основная задача - отправка данных на сервер. Пример - простая форма отправки сообщения, в которой пользователь сайта указывает свое имя, E-mail и какой-то текст: Текст сообщения
	Определяет подстроку в строке. Применяется для определения стиля части строки посредством CSS. Один из самых часто используемых тегов. Без оформления, ни как не проявляет себя в браузере. Пример: Изучение HTML, в большинстве случаев, не вызывает ни каких сложностей у новичков.
,	Теги предназначены для вставки видео и аудио в документ. Обязателен закрывающий тег. Примеры: Параметр controls говорит нам о том, что на странице должны отображаться элементы управления медиаконтентом, как в обычном аудио/видео плеере.
	Во истину, королевский тег. Самый используемый и популярный тег в HTML разметке страницы. Это блочный элемент, предназначенн для управления блоками на сайте. Часто употребляется понятие "дивной" верстки - это значит, что все блоки на сайте сверстаны с использованием данных тегов. Может содержать другие теги . Пример: Текст во вложенном блоке Все элементы , в большинстве случаев, оформляются свойствами CSS стилей. Обязателен закрывающий тег .
	Данный тег загружает внешнюю страницу в документ. Пример:

Мы рассмотрели далеко не все теги, да это и не нужно на данном этапе. Главное - понять основную идею HTML, научиться использовать представленные выше теги, а потом двигаться дальше.

Обратите внимание на то, что все названия в подключаемых файлах должны писаться латинскими символами, без пробелов.

Например, не:

Это необходимо для большей совместимости содержимого страницы. К тому-же, стандарты написания HTML кода, диктуют.

Итак, теперь мы знаем некоторые основы HTML : какая структура должна быть у типового HTML документа, знаем некоторые наиболее ходовые теги, пора приступить к самому вкусному - а именно, печенькам.

Практическое задание по HTML верстке

Если вы еще не скачали архив с примерами, сделайте это . Для примера, можете подглядывать в файл example.html, который также находился в архиве.

Распакуйте архив и в папке с распакованными файлами создайте файл index.html. Откройте созданный файл с помощью текстового редактора Sublime Text;
Создайте первоначальную структуру документа с доктайпом, тегом , содержащим и и перейдите к редактированию содержимого тега ;
Откройте файл readme.txt и выполните соответствующие задания в созданном вами файле index.html. Для проверки результата, откройте index.html в вашем любимом браузере.

На этом урок по основам HTML окончен, в следующем уроке "Основы 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