Практические задания_все_и html5_1



Практические задания

Задание 1_HTML

Цель: Изучение возможностей структурирования и форматирования текста.

Откройте программу «HomeSite» и создайте в ней новый html-файл.

Обратите внимание на составные части html-файла и на отсутствие пробелов в обозначении примечаний.

<html>

<head>

<title>

<style type=»text/css«>

<body>

body>

html>

Сохраните файл в специально созданной папке на своем носителе, обратите внимание на расширение созданного файла (html).

Введите заглавие документа, пользуясь элементом <title> в части <head>и два заголовка первого и второго уровня <h1> и <h2> в части <body>.

Введите абзац текста, состоящий из 2-3х строк, и скопируйте его трижды, пользуясь элементом <p>.

Для форматирования текста:

Установите цвет текста (#663333) и фона (#FFFFCC) или другие цвета из безопасной палитры в элементе <body>, применяя встроенный стиль с помощью атрибута style=”color: #663333; backgroundcolor: #FFFFCC элемента <body>.

В первом абзаце установите шрифт Courier размером 14pt, применяя встроенный стиль с помощью атрибута<p style=”fontfamily: Courier; fontsize:14pt>textp> и просмотрите результат в браузере.

Во втором абзаце установите аналогично шрифт Verdana размером 18pt произвольного цвета и просмотрите результат в браузере. Атрибут style в элементе будет выглядеть следующим образом: <p style=”fontfamily:Verdana; fontsize:18pt; color:red>textp>

В третьем абзаце аналогично установите для абзаца шрифт Garamond размером 20pt произвольного цвета и просмотрите результат в браузере.

Добавьте строку текста, содержащую сведения о студенте, выполняющем данное задание (ФИО, адрес, E-mail) и разделите текст на три строки, пользуясь элементом <br>. Просмотрите результат в браузере.

Используйте средства выравнивания текста.

Первый абзац выровняйте по ширине, пользуясь атрибутом align=«justify«. Просмотрите результат в браузере.

Второй и третий абзацы заключите в контейнерный элемент <div> и выровняйте по центру, применив встроенный стиль с помощью атрибута style и стилевого свойства textalign со значением center. <div style=”textalign:center>второй и третий абзацыdiv>.Просмотрите результат в браузере.

Предъявите результат преподавателю.

Задание 2_HTML

Цель: Изучение средств связывания страниц (гиперссылок).

Часть 1. Средства связывания страниц в HTML.

Научитесь формировать пути в относительных URL.

Создайте два файла index.html и image.gif и папку Main. Файл index.html должен содержать гиперссылку на файл image.gif, которая видоизменяется в зависимости от расположения файлов. Три варианта расположения файлов представлены на рисунках 2.1 (а, б, в).

Рис.2.1.а

Рис.2.1.б

Проверьте работоспособность гиперссылок.

Научитесь пользоваться внутренними ссылками.

В файле index.html введите заголовок «Глава 1» и несколько абзацев текста (пользуясь копированием, увеличьте документ до двух – трех экранов).

В конце документа установите ссылку <a href=»#Гл1«>В начало главыa>

Заголовок «Глава 1» сделайте именованным элементом привязки (якорем)<a name=»Гл1«><h1>Глава1h1>a>

Проверьте работоспособность ссылки.

Создайте в графическом редакторе или позаимствуйте в Интернете изображение стрелки, ведущей вверх (например, ) и используйте изображение как изображение – ссылку. Расположите изображение стрелки дважды: внизу страницы и в середине текста.В этом случае ссылка будет иметь вид:<a href=«#Гл1«><img src=«uparrow.gif» alt=«Вернуться в начало» width=20 height=25> a>

Проверьте работоспособность ссылок.

Рис.2.1.в

Научитесь использовать почтовую ссылку.

3.1.Создайте в конце документа index.html ссылку на свой почтовый адрес и проверьте ее работоспособность. Ссылка должна иметь вид<a href=mailto: user@serverаписать письмо to usera>

4.Предъявите работу преподавателю.

Часть 2. Использование CSS для оформления гиперссылок.

Создайте в папке Main четыре файла index.html, 1.html, 2.html и 3.html.

В файле index.html создайте список ссылок на 1.html, 2.html и 3.html.

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

Объявите стили ссылок с помощью внедрения в разделе <style>…style> части <head>, пользуясь псевдоклассами:a: link {color:black;textdecoration:none}a:visited {color:#00ff00}a:hover {color:#ff0000;fontsize:16pt;textdecoration:underline}a:active{color:#0000ff}

Проверьте работу ссылок и их оформление и предъявите задание преподавателю.

Задание 3_HTML

Цель: использование таблиц для структурирования информации и создания макетов страницы.

1. Создайте html документы, позволяющие построить таблицы, приведенные на рисунках 3.1-3.4.

Рис.3.1

Рис.3.2

Рис.3.3.

Рис.3.4.

2. Создайте HTML документ, в котором таблица используется для макетирования страницы так, как показано на рис.3.5 и 3.6.

Рис.3.5

Рис.3.6

3. Создайте HTML документ, позволяющий построить таблицу, приведенную на рис.3.7, пользуясь графическими изображениями из папки Images.

Рис. 3.7.

Задание 4_HTML

Цель: изучение способов выравнивания графических изображений на странице.

Подготовьте небольшое графическое изображение 5050 px или воспользуйтесь файлом ducky.gif.

Создайте HTML документ align_имя_1.html, позволяющий поместить в абзац текста изображение ducky.gif<p>Данный абзац текста содержит маленькую <img src= ducky.gif alt=ducky width=50 height=50>графическую вставку внутри текста.

Просмотрите результат в браузере.

Трижды скопируйте данный абзац и используйте три типа выравнивания изображения, находящегося в тексте, относительно базовой линии строки в каждом абзаце: alignbottom«; aligntop«; alignmiddle«.

Просмотрите результат в браузере.

Используйте выравнивание графического изображения, расположенного вне текста. Для этого создайте конструкцию<p><img src= ducky.gif alt=ducky width=50 height=50 alignright«>В рассматриваемом примере изображение выравнивается по правому краю страницы и находится справа от текста. Текст при этом обтекает изображение, так как это имело место в текстовом процессоре Word, когда изображение не находилось в тексте, а было расположено в своем слое.p>

Просмотрите результат в браузере.

Скопируйте фрагмент html документа и примените выравнивание по левому краю. Измените соответственно текст.

Примените атрибуты установки промежутков между текстом и изображением. Поместите изображение внутрь текста абзаца и увеличьте текст. Затем примените атрибуты изображения vspace=10 и hspace=20.

Просмотрите результат в браузере.

Используйте разделитель строк <br>11.1. Создайте следующие фрагменты html текста и объедините в документ align_имя_2.html<p><img src= ducky.gif alt=ducky width=50 height=50>первая строка<br>вторая строка<br>третья строка11.2. Просмотрите результат в браузере. Обратите внимание на то, что изображение является частью текста.

11.3.Добавьте фрагмент<p><img src= ducky.gif alt=ducky width=50 height=50 alignleft«>первая строка<br>вторая строка<br>третья строка11.4. Просмотрите результат в браузере.11.5. Добавьте фрагмент, в котором к элементу <br> добавляется атрибут clearleft«, позволяющий прервать текст и расположить его ниже изображения<p><img src= ducky.gif alt=ducky width=50 height=50 alignleft«>первая строка<br>вторая строка<br clearleft«>третья строка11.6. Просмотрите результат в браузере.

11.7.Добавьте фрагмент с атрибутом элемента <br> clearright» и атрибутами alignright» элементов <p> и <img> 11.8. Просмотрите результат в браузере.

11.9. Добавьте фрагмент, содержащий конструкцию clearall» следующего содержания:<p aligncenter«>

<img src= ducky.gif alt=ducky width=50 height=50 alignright«><img src= ducky.gif alt=ducky width=50 height=50 alignleft«>первая строка<br>вторая строка<br clearall«>третья строка11.10. Просмотрите результат в браузере.

Задание 5_HTML

Цель: Знакомство с построением форм.

Создайте формы, приведенные на рис.5.1 и 5.2, пользуясь методическими и справочными материалами.

Рис.5.1

Рис.5.2

Используйте атрибут required для полей второй формы, обязательных для заполнения: ФИО, E-mail, Данные карты и Адрес и проверьте его функционирование.

Предъявите созданный файл преподавателю.

Задание 6_HTML

Цель: Знакомство с семантической разметкой HTML5.

Создайте html – страницу, приведенную на рис. 6.1.

Рис. 6.1

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

Заголовок блога

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

В боковую секцию (section) внесите текст HTML:

Создайте файл таблицы стилей style.css и присоедините его к документу HTML:

body {

width: 960px;

margin: 15px auto;

font-family:Verdana, sans-serif;

p {

margin: 0 0 20px 0;

{

p, li {

line-height: 20px;

{

header#page_header{

width: 100%

}

header#page_header nav ul, #page_footer nav ul {

list-style:none;

margin: 0;

paddin: 0;

}

#page_header nav ul li, footer#page_footer nav ul li{

margin: 0 20px 0 0;

paddin: 0;

display: inline;}

section#posts{

float: left;

width: 74%;}

section#posts aside{

float:right;

width: 35%;

margin-left: 5%;

font-size: 20px;

line-height: 40px;}

section#sidebar{

float: left;

width: 25%}

footer#page_footer{

clear: both;

width: 100%;

display: block;

text-align: center;}

Практические задания

Задание 1_CSS

Цель: Знакомство со способами применения стилей в документе HTML. Использование классов и группирования.

Познакомьтесь с возможностью встраивания стиля в документ HTML. Cоздайте HTML-документ, используя в качестве содержимого текст примеров 1-3. Просмотрите полученные результаты в браузере.

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

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

Познакомьтесь с использованием селектора ID в объявлении стиля в документе HTML. Cоздайте HTML-документ, используя в качестве содержимого текст примера 8. Измените объявление стиля. Просмотрите полученные результаты в браузере.

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

Познакомьтесь с использованием связывания стиля в документе HTML. Cоздайте HTML -документ и файл my_style.css, используя в качестве образца тексты примера раздела 3.3. Просмотрите полученные результаты в браузере.

Предъявите полученные результаты преподавателю.

Задание 2_CSS

Цель: Знакомство с текстовыми свойствами, установкой цвета и фона, параметрами шрифта и свойствами блочной модели, с использованием плавающей модели размещения элементов.

1. Познакомьтесь с использованием текстовых свойств CSS. Cоздайте HTML-документ, используя в качестве содержимого текст примера 12. Просмотрите полученные результаты в браузере.

1.1. Измените class1, применив собственные установки текстовых свойств для форматирования абзацев. Просмотрите полученные результаты в браузере.

2. Познакомьтесь с использованием установок цвета и фона. Cоздайте HTML-документы, используя в качестве содержимого тексты примеров 13_1 и 13_2. Просмотрите полученные результаты в браузере.

2.1. Установите фоновое изображение в примере 13_2 в нижнем правом углу страницы и просмотрите результаты.

3. Познакомьтесь с использованием текстовых свойств на примере использования псевдоклассов для оформления гиперссылок (пример 9) и псевдоэлементов для оформления первой буквы (пример 10) и первой строки абзаца (пример 11).

4. Познакомьтесь с параметрами шрифтов. Cоздайте HTML-документ, используя в качестве содержимого текст примера 14. Просмотрите полученные результаты..

4.1. Измените класс р1, применив высоту символов small и шрифт семейства serif. Просмотрите полученные результаты в браузере.

4.2. Установите шрифт семейства sans serif и примените к нему различную толщину символов (font-weight). Просмотрите полученные результаты в браузере.

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

5.1. Измените свойства форматирования абзаца: примените пунктирную рамку зеленого цвета толщиной 15 пикселов и установите произвольные значения полей (margin) и промежутков (padding). Просмотрите полученные результаты в браузере.

5.2. Добавьте поля слева и справа по 30 пикселов для элемента <body> и дополните страницу заголовком и рисунком. Установите для рисунка такую же рамку как для абзаца. Просмотрите полученные результаты в браузере.

6. Познакомьтесь с использованием плавающей модели размещения элементов.

6.1. Cоздайте HTML-документ, используя в качестве содержимого текст примера 16_1, использующий плавающее изображение. Просмотрите полученные результаты в браузере.

6.2. Примените для второго абзаца свойство clear со значением right и проанализируйте полученный результат.

6.3. Cоздайте HTML-документы, используя в качестве содержимого тексты примеров 16_2 и 16_3, использующие плавающие абзацы. Просмотрите полученные результаты в браузере.

6.4. Измените свойства цитаты, переместив ее вправо и просмотрите полученные результаты.



Страницы: 1 | 2 | Весь текст




map