Методические разработки практических работ по информатике по темам "Язык разметки 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. Для созданных ранее абзацев задайте выравнивание по ширине (для первого абзаца) и по правому краю (для второго).
Умение правильно оформлять CSS код важно для каждого веб дизайнера. Этот урок рассчитан на новичков, которые делают только первые шаги.
Вступление
При работе с CSS необходимо быть предельно внимательным. При написании кода следует соблюдать предельную концентрацию.
В данном уроке будет показан пример, как создать простую HTML страницу используя блочную верстку (без использования таблиц). А также научимся выносить стили в отдельную таблицу стилей.
Шаг №1 - Разметка и использование тегов
Разметка HTML всегда идет перед стилями. Нет смысла приступать к CSS без полностью готового HTML.
HTML - гипертекстовый язык разметки, иными словами HTML описывает структуру текстовой информации страницы. Прежде чем мы начнем применять стили CSS, нам необходимо научиться применять элементы структуры.
При строительстве разметки мы используем "теги", которые окружены угловыми скобками. Теги используются для определения чего-либо на странице. CSS применяется позже для определения места (в браузере) вывода содержания того или иного тега.
Самыми простыми тегами на странице являются:
Больше всего тегов и контента используется внутри тега .
Очень важный тег для разделения и определения структуры - тег . Используя данный тег, можно разделить содержание на ячейки. Внутри данного тега Вы можете использовать и прочие теги для определения контента (например, ссылки, текст, изображения), которые потом можно красиво оформить с помощью CSS.
Используйте любой редактор изображений для того, чтобы нарисовать следующий эскиз:
Код для данного шаблона должен выглядеть так:
Как Вы видите, у тегов div есть ID. Это понадобится нам для оформления каждой ячейки. ID используется для маркировки тега и придания ему уникального стиля. В то время как “class” используется для повторяющихся элементов дизайна.
Также, в примере используется еще один div “wrapper”, которые как бы "обертывает" все остальные теги. Это нам пригодится позже для позиционирования нашей странички.
В таблице стилей мы определяем элементы дизайна страницы. Можно создать как внутреннюю таблицу стилей, так и внешнюю. В данном уроке будет использована внешняя.
Если Вы просмотрите Вашу страницу в браузере сейчас - ничего не появится. Все потому что мы не придали нашим тегам никакого цвета и формы. И поскольку наш CSS будет внешним, первым делом Вам необходимо убедиться в том, что на странице есть ссылка на таблицу стилей.
Добавьте следующий код между :
Шаг №3 - Создание CSS
Синтаксис CSS состоит из селектора, свойства и значения. Селектор - это тег, который необходимо оформить в дизайне, свойство - тип атрибута, который Вы хотите добавить, значение - количественное измерение свойства.
Селектор, кроме тега body, записывается в CSS начиная с “#” или “.”. “#” определяет ID, а "." (точка) определяет class селектора. Внутри селектора может находиться множество свойств и все они должны быть обрамлены { }.
#selector {
property:value;
property:value;
property:value;
}
Нам необходимо оформить следующие теги с помощью
CSS:
* body
* wrapper
* header
* navigation
* menu
* content
* footer
Свойства и возможные значение в CSS:
Свойство "background" (фоновое изображение) может задавать изображение или цвет, или и то и другое. Для показа изображения, значение должно состоять из пути к изображению. Для определения цвета используется шестнадцатеричный код.
Свойство "color" используется для определения цвета селектора. Значения записываются в виде шестнадцатеричного кода (пример: #FFFFFF для белого).
Свойство "font-family" позволяет определить шрифт, который будет использоваться. Нормой является включение как минимум 3-х типов шрифтов. Это делается на случай, если браузер не может отобразить первый шрифт, будет использоваться второй и т.д. (пример: Trebuchet MS, Arial, Times New Roman)
Свойство "font-size" определяет размер шрифта и имеет значение в пикселях.
Свойство "margin" используется для определения позиции селектора. Значения задают расстояние сторон селектора до края окна браузера в следующем порядке: top, left, bottom, right. Если нам необходимо разместить страницу по центру, мы пишем "0px auto 0px". Указание всех четырех сторон не является обязательным.
Свойство "width" задает желаемую ширину в пикселях любого селектора.
Свойство "height" - высота в пикселях.
Свойство "float" позволяет нам позиционировать элементы внутри селекторов, в большинстве случаев справа или слева.
Для создания CSS файла откройте свой любимый текстовый редактор и сохраните новый документ как style.css в папке с страницами сайта. Добавьте следующий код:
Body {
background: #f3f2f3;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
}
#wrapper {
background: #FFFFFF;
margin: 60px auto;
width: 900px;
height: 1024px;
}
#header {
background: #838283;
height: 200px;
width: 900px;
}
#navigation {
background: #a2a2a2;
width: 900px;
height: 20px;
}
#menu {
background: #333333;
float: left;
width: 200px;
height: 624px;
}
#content {
background: #d2d0d2;
width: 900px;
height: 624px;
}
#footer {
background: #838283;
height: 180px;
width: 900px;
}
Заключение
Вы прошли школу молодого бойца CSS и оформили все селекторы с помощью вышеуказанных свойств.
Надеюсь, урок Вам понравился! Жду отзывов и пожеланий.
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
Код страницы для задачи №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.2 |
Ячейка 2.1 | Ячейка 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 и CSS7.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. В ней описываются основы 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 еще не придумали, да и врядли они появятся. Язык разметки 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 теги, необходимые для оформления документа и обеспечения его функционала (формы). Приведу таблицу наиболее используемых тегов и вкратце опишу каждый. Вы можете сразу выполнять приведенные примеры в редакторе.
Мы рассмотрели далеко не все теги, да это и не нужно на данном этапе. Главное - понять основную идею HTML, научиться использовать представленные выше теги, а потом двигаться дальше.
Обратите внимание на то, что все названия в подключаемых файлах должны писаться латинскими символами, без пробелов.
Например, не:
Это необходимо для большей совместимости содержимого страницы. К тому-же, стандарты написания HTML кода, диктуют.
Итак, теперь мы знаем некоторые основы HTML : какая структура должна быть у типового HTML документа, знаем некоторые наиболее ходовые теги, пора приступить к самому вкусному - а именно, печенькам.
Практическое задание по HTML версткеЕсли вы еще не скачали архив с примерами, сделайте это . Для примера, можете подглядывать в файл example.html, который также находился в архиве.
На этом урок по основам HTML окончен, в следующем уроке "Основы CSS " мы научимся управлять стилями элементов документа, познакомимся ближе с каскадными таблицами стилей, научимся использовать классы стилей и сделаем нашу верстку красивой и красочной.
До новых встреч, друзья!