Практические работы по css для студентов. Комплекс лабораторно-практических заданий "Язык HTML"
Практические работы по 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.
Выравнивание текста по горизонтали.
Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому краю, правому краю, по центру или по ширине. Для установки выравнивания текста обычно используется тег абзаца
с атрибутом align, который определяет способ выравнивания. Атрибут align может принимать значения: left, right, center, justify выравнивание по левому краю, правому краю, по центру и ширине соответственно.1. Внесите изменения в файл RASP.HTML
Учебный файл HTML
Расписание
занятий на среду.
3. Сохраните текст с внесенными изменениями в файле rasp.html.
4. Откройте документ rasp.html двойным щелчком мыши, и проверьте результат.
Сделайте Web-страницу по следующему образцу.
В скобочках указан цвет текста. Обязательно должно присутствовать выравнивание текста.
Файлу дайте название biscuit.html
Задачи по основам 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. Задания .
Умение правильно оформлять CSS код важно для каждого веб дизайнера. Этот урок рассчитан на новичков, которые делают только первые шаги.
Вступление
При работе с CSS необходимо быть предельно внимательным. При написании кода следует соблюдать предельную концентрацию.
В данном уроке будет показан пример, как создать простую HTML страницу используя блочную верстку (без использования таблиц). А также научимся выносить стили в отдельную таблицу стилей.
Шаг №1 - Разметка и использование тегов
Разметка HTML всегда идет перед стилями. Нет смысла приступать к CSS без полностью готового HTML.
HTML - гипертекстовый язык разметки, иными словами HTML описывает структуру текстовой информации страницы. Прежде чем мы начнем применять стили 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 и оформили все селекторы с помощью вышеуказанных свойств.
Надеюсь, урок Вам понравился! Жду отзывов и пожеланий.
Загрузка...
