Практическая работа №№ 10-12 Створення простої Web-сторінки за допомогою мови гіпертекстової розмітки html.
Мета роботи: навчитись створювати прості Web-сторінки, редагувати та форматувати текстові елементи сторінки, працювати з об’єктами горизонтальна лінія, рядок, що рухається, оформляти малюнками та фотографіями сторінку.
Обладнання: комп’ютер типа Pentium 4, програма Блокнот, конспект лекцій.
Хід роботи:
В особистій папці створити папку "Практична робота № 6", в якій будуть зберігатися файли основної сторінки, допоміжних сторінок, файлів рисунків.
Створити основну Web-сторінку index.htm (запустити програму Блокнот і зберегти документ у власній папці, ввівши назву файлу і розширення html: ПІБ.html). Примітка при збереженні зазначати «Тип файлу → Все файли».
Для редагування Web-сторінки відкрити її за допомогою програми-браузера Internet Explorer. У вікні Internet Explorer вибрати пункт ”Вид/В виде HTML (Просмотр HTML-коду)”, відкриється вікно програми Блокнот.
У вікні програми Блокнот ввести текст та теги Web-сторінки; зберегти зміни, внесені у сторінку; обновити зображення сторінки у вікні Internet Explorer («Вид→Обновить» або клавіша F5).
Створену Web-сторінку заповнити інформацією та тегами форматування (Приклад - вигляд цієї Web-сторінки наведений на мал. 1).
Створена Web-сторінка повинна містити:
заголовок вікна Web-сторінки з записом РЕЗЮМЕ:ПІБ;
фон, заданий за допомогою кольору або малюнку;
текстові елементи, які відображають особисту інформацію, оформлені за допомогою тегів форматування абзацу та шрифту;
малюнок (наприклад, фотографію);
списки (нумерований чи маркірований);
додаткові теги за власним бажанням (наприклад, рядок, що рухається горизонтальна лінія).
Элементы языка HTML называют тегами. Для того, чтобы браузер их отличал от обычного текста, они заключаются в угловые скобки < … >. Текст, не находящийся между знаками <…>, весь виден при просмотре в браузере. Атрибуты тега следуют за именем и отделяются друг от друга одним или несколькими знаками табуляции, пробелами или символами возврата к началу строки.
Структура любой Web-страницы выглядит следующим образом:
<html>
<head>
заголовок документа
</head>
<body>
тело документа
</body>
</html>
Откройте окно программы Блокнот вашего файла и перепишите следующий текст:
<html>
<head>
<title> Резюме: Иванова Ирина Ивановна
</title>
</head>
<body>
</body>
</html>.
Служебные элементы языка HTML. <BODY>...</BODY> определяет тело документа и может содержать очень много параметров. Все элементы языка HTML, расположенные между тегами <body>...</body>, определяют непосредственное содержание документа.
Тело документа состоит из:
иерархических контейнеров и заставок;
заголовков (от Н1 до Н6);
блоков (параграфы, списки, формы, таблицы, картинки и т.п.);
горизонтальных отчеркиваний и адресов;
текста, разбитого на области действия стилей (подчеркивание, выделение, курсив);
математических описаний, графики и гипертекстовых ссылок.
Задать цвет текста в документе, и цвет фона. Если в качестве атрибутов тега ВОDY указать:
<ВОDY ВGCOLOR=#FFFFFF ТЕХТ=#0000FF
VLINK=#FF0000 LINK=#00FF00>,
то цвет фона будет белым, текст будет синим, ссылки — зелеными, а пройденные ссылки станут красными.
Зададим первую строку – заголовок.
Задать шрифт текста Arial или Courier New, выравнивание по центру, начертание – жирный, размер – 7, цвет задайте самостоятельно. С помощью тэга <P> </P> параграф текст выравнивается по левому, правому краю и по центру.
<p align="center">
<b> <font size = 7 face="Arial Black"> РЕЗЮМЕ </font> </b></p>
Создание коллекции горизонтальных линий. Горизонтальное подчеркивание (Horizontal Rule) применяется для разделения документа на части. С помощью одного лишь тега <НR> можно придать странице оригинальный вид. Атрибуты этого тега задают высоту линии в пикселях, устанавливают ширину линии в пикселях или в процентах от ширины внешнего элемента, также можно задать месторасположения с помощью тега align.
<HR Size=8 Width=100%> <BR>
Далее указываем в строке фамилия, имя отчество.
Вставка изображения, картинки. Тегом HTML, который заставляет браузер выводить изображение, является <IMG> с обязательным атрибутом SRC (SouRCe, источник). Имя файла представляет собой имя выводимого графического файла. Замыкающего тега не требуется.
<IMG SRC = "Рисунок1.jpg"Width=20% Align=middle>
Далее указываем в строках домашний адрес, телефон, электронный адрес, цель, опыт работы.
Создание списков. Списки это один из самых используемых элементов в оформлении HTML –документов. Ненумерованные списки (маркеры) <ul>...</ul>. Каждый элемент списка, дабы его отделить от остальных, ограничивается скобками <li>...</li>. можно задать разное начертание маркера с помощью атрибута type, который может принимать значение disc – черная точка, square - квадрат и circle - круг. Нумерованные списки. Ограничивающие скобки для таких списков <ol>...</ol>. Параметр type задает тип нумерации:
type=1 задает тип нумерации арабскими цифрами 1,2,3,...
type=a задает тип нумерации латинскими буквами a,b,c,...
type=A задает тип нумерации латинскими заглавными буквами A,B,C,...
type=i задает тип нумерации римскими цифрами в нижнем регистре i,ii,iii,iv,...
type=I соответственно римскими цифрами в верхнем регистре I,II,III,IV,...
Многоуровневые списки. Ограничивающими скобками списка определения являются теги <dl>...</dl>.
Пример листинга программы.
<ul>
<li> <font size = 4 face="Courier New" > педагогическая практика на 1 курсе, ясли-сад № 84</li>
<li> <font size = 4 face="Courier New" > педагогическая преддипломная практика на 5 курсе, ясли-сад № 93 </li>
</ul>
На странице установить дополнительный элемент бегущую строку.
Бегущая строка
<MARQUEE scrollAmount=2 scrollDelay=30 width="100%" bgColor=#c0c0c0>Резюме Ивановой Ирины Ивановны</MARQUEE>