Атрибут выравнивания ( Align )
Практическая работа
Средства создания и сопровождения сайта
Цель работы:
1. сформировать навыки создания шаблона web- страницы;
2. научиться создавать заголовки разного уровня;
3. овладеть технологией форматирования линий;
4. получить представление, как оформляется текст на web- странице;
5. научиться создавать маркированные, нумерованные и многоуровневые списки на web- странице.
План работы:
1. создание шаблона web- страницы.
2. создание заголовков разных уровней.
3. форматирование линий.
4. задание фона web- страницы.
5. оформление текста на web- странице.
6. использование маркированного, нумерованного и многоуровневого списков на web- странице.
7. выполнение зачетного задания.
Все представленные в работе файлы представлены в электронном приложении.
Теоретические сведения
Технология создания сайта предусматривает:
1. выбор темы сайта;
2. планирование сайта в целом;
3. планирование отдельных страниц сайта;
4. создание web- страниц и сайта с использованием программного средства;
5. тестирование сайта ( удобство навигации, целостность данных, корректность ссылок, орфография, просмотр сайта в целом);
6. публикацию сайта.
Инструментарий для создания сайта включает в себя: обычные текстовые редакторы, HTML- и WYSIWYG- редакторы.
Навигация – важнейший элемент сайта, показывающий посетителю место нахождения и место дальнейшего движения по сайту. Существуют линейная и параллельная навигации.
|
|
|
Ход выполнения работы
1. Создание шаблона web - страницы. HTML- документ ( простой текстовый файл, содержащий текст и текстовые HTML – теги) всегда должен начинаться с открывающего тега <HTML> и заканчиваться закрывающим тегом </HTML>. Внутри документа выделяют два раздела: раздел заголовков и тело документа. Раздел заголовков содержит информацию, описывающую документ в целом, и ограничивается тегами <HEAD> и </ HEAD>. Этот раздел должен включать в себя контейнер общего документа < TITLE> … </TITLE>. Содержимое web- страницы размещается в теле документа, которое ограничивается тегами <BODY> и </ BODY>.
Создайте шаблон web- страницы. Для этого выполните следующие действия:
· создайте папку Страница на Рабочем столе. Все последующие файлы сохраняйте в данной папке;
· откройте текстовый редактор Блокнот;
· напечатайте команды в текством редакторе для создания web- страницы:
<html>
<head>
<title> Заголовок web - документа </title>
</ head>
<body> содержимое web- страницы ( тело документа)
<!—Комментарии, которые не отображаются на web- странице -- >
|
|
|
</ body>
</ html>
· сохраните готовый шаблон под именем шаблон. html в папку Страница на своем компьютере;
· закройте текстовый редактор;
· просмотрите файл шаблон. html;
· откройте файл шаблон. html с помощью редактора Блокнот;
· внесите изменения : заголовок « Дизайн отделка» и в тело документа введите текст « Первая web- страница будет посвящена стилям оформления квартир”;
· сохраните получившийся файл под именем index . html в папке Страница (index . html – это стандартное имя головного документа, с которого начинается загрузка сайта);
· просмотрите результат работы в браузере.
2. Создание заголовков разных уровней. В HTML предусмотрено шесть уровней заголовков, которые задаются с помощью парных тегов <H1> …<H6> ( первый заголовок самый крупный, а остальные мельче). По умолчанию заголовки выравниваются по левому краю ( Left), также возможно выравнивание по центру ( Center) и правому краю ( Align).
· откройте файл index . html ;
· сохраните его под именем уровни. html в папку Страница;
· в файле уровни. html оформите текст в виде заголовков различных уровней:
- заголовок первого уровня ( выравнивание по центру)
< H1 Align =Center> Первая web- страница будет посвящена стилям оформления квартир ! < /H1>
|
|
|
- заголовок второго уровня ( выравнивание по левому краю)
< H2 Align = Left >Заголовок второго уровня < /H2>
- заголовок третьего уровня ( выравнивание по правому краю)
< H3 Align = Right >Заголовок третьего уровня < /H3>
- заголовок четвертого уровня ( выравнивание по центру)
< H4 Align =Center> Заголовок четвертого уровня < /H4>
- заголовок пятого уровня ( выравнивание по левому краю)
< H5 Align = Left > Заголовок пятого уровня < /H5>
- заголовок шестого уровня ( выравнивание по центру)
< H6 Align = Right >Заголовок шестого уровня < /H6>.
· сохраните изменения;
· просмотрите результат работы в браузере
3. Формирование линий. Длину, ширину, цвет и расположение горизонтальных линий ( тег <HR>) можно задавать с помощью дополнительных атрибутов.
Атрибут выравнивания ( Align )
Align=Left- выравнивание по левому краю;
Align=Center – выравнивание по центру;
Align= Right –выравнивание по правому краю.
Атрибут размера ( Size )
· Size = число высоту линии в пикселах ( [ 1;100], целые числа);
· Size = число – задает длину линии в пикселях;
· Size = число % - задает длину линии в процентах от ширины окна браузера.
Атрибут цвета ( Color ): = цвет, где в качестве значения после знака равенства пишется название цвета английскими буквами и задается числовой код оттенка ( табл.)
|
|
|
Палитра цветов
| Название | Русское название | Код |
| Aqua | #00FFFF | |
| Black | #000000 | |
| Blue | #0000FF | |
| Fuchsia | #FF00FF | |
| Gray | #808080 | |
| Green | #008000 | |
| Lime | #00FF00 | |
| Maroon | #900000 | |
| Navy | #000080 | |
| Olive | #808000 | |
| Purple | #800080 | |
| Red | #FF0000 | |
| Silver | #C0C0C0 | |
| Teal | #008080 | |
| White | #FFFFFF | |
| Yellow | #FFFF00 |
3.1 Откройте файл уровни. html и сохраните его под именем линии. html в папке Страница.
3.2 Отделите все заголовки горизонтальными линиями. Для этого выполните следующие действия:
· после заголовка первого уровня добавьте горизонтальную линию и расположите ее по центру ( высота линии – 7 пикселов, длина – 650 пикселов, цвет – желтый ) с помощью команд.
< HR Align = Center Size =7 Width = 650 Color = yellow>
· после заголовка второго уровня добавьте горизонтальную линию и расположите ее по левому краю ( высота линии – 15 пикселов, длина – 400 пикселов, цвет – малиновый) с помощью команд
< HR Align = Left Size =15 Width = 400 Color = maroon>
· после заголовка третьего уровня добавьте горизонтальную линию и расположите ее по правому краю ( высота линии – 10 пикселов, длина – 300 пикселов, цвет – лиловый) с помощью команд
< HR Align =Right Size =10 Width = 300 Color = fuchsia>
· после заголовка четвертого уровня добавьте горизонтальную линию и расположите ее по центру ( высота линии – 200 пикселов, длина – 700 пикселов, цвет – по своему выбору) ;
· после заголовка пятого уровня добавьте горизонтальную линию и расположите ее по левому краю ( высота линии – 250 пикселов, длина – 500 пикселов, цвет –по своему выбору) ;
· после заголовка шестого уровня добавьте горизонтальную линию и расположите ее по правому краю ( высота линии – 200 пикселов, длина – 500 пикселов, цвет –по своему выбору) ;
· Сохраните данные;
4. Задание фона web- страницы задается с помощью параметра Bgcolor тега < Body> в виде шестнадцатеричного числа или словесного названия оттенка, но на большинстве сайтов используются белый фон и черный текст.
4.1. Задайте для web- страницы оливковый фон с помощью команды
<Body Bgcolor=#808000> </Body>.
4.2 Измените фон сайта на серебристый.
4.3 Результат выполненной работы сохраните в файле фон. html и покажите преподавателю.
5. Оформление текста на web - странице. Обособленный абзац текста в html- документе нужно заключать в контейнер <P>….</P>.
В этом случае абзацы разделяются небольшим промежутком. Если нужно начать какой – либо текст с новой строки, то необходимо использовать в требуемом месте разрыва строки одиночный тег < BR>.
Выравнивание абзацев задается с помощью атрибута ALIGN, записываемого в составе открывающего тега абзаца <P> ( тал.2)
Теги форматирования абзацев
| Тег | Описание |
| <P> текст абзаца </P> | Перед новым абзацем автоматически добавляется небольшой отступ |
| < P Align = Left > текст </P> | Выравнивание абзаца по левому краю |
| < P Align =Right> текст </P> | Выравнивание абзаца по правому краю |
| < P Align =Center> текст </P> | Выравнивание абзаца по центру |
| < P Align =Justify> текст </P> | Выравнивание абзаца по ширине |
| Текст 1 <BR> Текст 2 | Тег разрыва строки |
| < Nobr> Текст </Nobr> | Запрет разрывов и переносов слов |
| Текст 1 <WBR> Текст 2 | Перенос строки в указанном месте |
С помощью контейнера < Font> …. </Font> можно менять такие параметры шрифта, как гарнитура ( Face, рис.6.15), размер ( size) и ( Color).
Параметр size задает размер шрифта в условных единицах ( от 1 до 7).
Атрибут Color определяет цвет текста, который можно задавать с помощью названий цветов или в шестнадцатеричном формате.
Контейнеры увеличения ( < BIG >…</ BIG >) и уменьшения (< SMALL >…</ SMALL >) размера шрифта могут быть многократно вложенными друг друга, чтобы увеличить или уменьшить текст до нужных размеров.
Контейнеры для шрифтового выделения представлены в табл.6.3
Таблица 6.3
| Тег | Описание |
| <B> Текст </B> | Полужирный |
| <STRONG> Текст </STRONG> | |
| <I> Текст </I> | Курсив |
| <EM> Текст </EM> |
| Arial, Arial Black, Arial Narrow, Book Antiqua, Bookman Old Style, Century Gothic, Gooper Black, Courier New, Elephant, Impact, Mangal, Monotype Corsiva, Times New Roman, Tahoma, Verdana |
Рис. 6.15. Примеры гарнитур шрифта
Окончание табл. 6.3
| Тег | Описание |
| <U> Текст </U> | Подчеркнутый текст |
| E=mc < SUP> 2 </SUP> | Верхний индекс |
| H < SUP> 2 </SUP>0 | Нижний индекс |
| <STRIKE> Текст </STRIKE> | Зачёркнутый текст |
| <PRE> Текст </PRE> | Обычный текст |
5.1.Откройте в Блокноте файл шаблон. html .
5.2.Сохраните файл в папке Страница под именем текст. html.
5.3.В файле текст. Html введите следующий текст: Вводим любой текст
5.4.Просмотрите результат ввода текста в браузере.
5.5.Заключите каждый абзац в контейнер абзаца, например <P> Стили в интерьере.</P>.
5.6.Заголовку « Стили в интерьере» назначьте вид заголовка первого уровня, расположенного по центру. Оформите заголовок с использованием полужирного, подчеркнутого текста и размером шрифта, равным 6, т.е.
< P Align =Center> <B> <U><Font size=6> Стили в интерьере. </Font></U></B></P>
5.7 Оформите названия стилей в интерьере полужирным шрифтом Arial и размером, равном 4.
5.8 Результат проделанной работы сравните с рис. 6.16 и покажите преподавателю.
5.9 Выполните задание № 1 и покажите преподавателю результат работы.
Задание 1.
В конце всего текста задайте размеры шрифта от 1 до 7 и примените теги шрифтового выделения.
6. Использование маркированного, нумерованного и многоуровневого списков на web - странице. Набор элементов ( абзацев) со специально выбранным символом - маркером ( круг по умолчанию, окружность, квадрат) – представляет собой маркированный список. Данный список задается с помощью контейнера
Дата добавления: 2020-12-22; просмотров: 53; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!