Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Рассмотрим основные приемы создания Web-страниц на языке HTML, такие как ввод заголовков и текста документа, установка цвета текста и фона. В качестве примера будем создавать страницы для сайта Профессионального лицея № 15. Сайт обеспечит рекламу его деятельности, упростит выбор профессии, привлечет новых учащихся.
Создавать HTML-код лучше в простом текстовом редакторе, например, в программе Блокнот. Введите код, который содержится практически в каждой Web-странице и определяет структуру HTML-документа.
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Теперь введите в HTML-документ название Web-страницы и краткую информацию о Лицее.
<body bgcolor=blue text= yellow >.
<html>
<head>
<title> Профессиональный лицей № 15</title>
</head>
<body bgcolor=blue text= yellow >
Профессиональный лицей № 15
</body>
</html>
HTML-код создаваемой Web-страницы
Чтобы сохранить документ на диске, выполните следующие шаги.
Осталось просмотреть созданную Web-страницу в браузере.
Нажмите клавишу ENTER. В окне браузера появится созданная Web-страница
Обратите внимание, что текст на странице отображается желтым цветом на синем фоне.
Форматирование текста на странице позволяет красиво оформить Web-документ. В этом разделе мы рассмотрим, как устанавливать размер и начертание шрифта, выравнивать текст.
Мы будем по-разному форматировать отдельные фрагменты текста, поэтому включим в НTML-документ новое предложение.
На Web-странице могут использоваться заголовки разделов документа. Заголовки объявляются парой тегов: <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5> или <h6></h6>. Символы в заголовке имеют большую толщину и размер по сравнению с обычным текстом. Заголовок с тегом <hl> является самым крупным, а с тегом <h6> - самым мелким. Номер в названии тега указывает на уровень заголовка, что позволяет естественным образом включать в разделы документа подразделы. Необходимо отличать заголовок раздела от заголовка документа, определяемого тегом <head>.
Создадим заголовок раздела в нашем HTML-документе.
Для просмотра документа в браузере, его нужно сохранить на диске.
По умолчанию заголовок раздела выравнивается по левому краю страницы. Атрибут align позволяет выровнять заголовок по правому краю или центрировать. Значение right - данного атрибута обеспечивает выравнивание текста по правому краю, а значение center - центрирование. Давайте выровняем заголовок раздела по центру Web-страницы.
Данный элемент будет выглядеть так:
<h1 align=center> Профессиональный лицей № 15</h1>
Теперь установим наклонное начертание остального текста Web-страницы, воспользовавшись парными тегами <i></i>.
<i> Профессиональный лицей № 15 готовит профессии рабочих и служащих!</i>
Отметим, что пара тегов <b></b> позволяет установить полужирное начертание текст, пара <u></u> - подчеркнутое начертание символов.
HTML поддерживает несколько способов изменения размера шрифта. Но, мы рассмотрим наиболее удобный часто используемый способ, он заключается в использовании пары тегов <font></font>. Атрибут тега size позволяет устанавливать размеры шрифта в условных единицах от 1 до 7: значение 1 соответствует минимальному размеру шрифта величина 7 - максимальному. Другой атрибут рассматриваемого тега - face позволяет указать название шрифта, например, Arial, которым браузер будет отображать текст. Еще один атрибут - color - способен дать цвет шрифта. Значением данного атрибута являются те же значения, что и для описанных ранее атрибутов для установки цвета фона и текста.
Итак, изменим размер шрифта с помощью тега <font>.
<font size=5><i> Профессиональный лицей № 15 готовит профессии рабочих и служащих!</i></font>
Теперь выровняем данный фрагмент текста по центру с помощью тегов <center></center>.
Рисунки позволяют существенно повысить привлекательность Web-страницы, лучше передать содержание документа. В этом разделе я расскажу и покажу, как вставлять изображение в Web-документ.
Рисунки на Web-странице должны быть созданы в таком графическом формате, который поддерживается браузером. К стандартным форматам Web-графики относятся GIF, JPG и PNG. Эти форматы обеспечивают эффективное сжатие изображений и минимальный размер файлов, что значительно сокращает время загрузки из сети.
Сначала подготовим необходимые графические файлы для вставки в Web-документ.
Дело в том, что в HTML-документе должно быть указано имя графического файла или полный путь к нему. Чтобы ваша Web-страница была независима от возможных изменений на диске, все файлы, относящиеся к создаваемому Web-документу или сайту, лучше хранить в одной папке.
Для вставки изображения в Web-документ используется одиночный тег <img>. Единственный обязательный атрибут данного тега srс определяет имя вставляемого файла или его электронный адрес в Интернете. С помощью необязательного атрибута <border> можно включить отображение рамки вокруг рисунка. Значение атрибута определяет толщину рамки в пикселях.
Вставим скопированный рисунок в Web-документ.
<img src=licem.GIF border=1>
По умолчанию вставленное изображение выравнивается по левому краю страницы. Давайте отцентрируем вставленный рисунок.
<center><img src=licem.GIF></center>
Для установки фонового рисунка применяется атрибут background тега <body>. В качестве значения атрибута следует указать имя графического файла с изображением.
Установим фоновый рисунок на Web-страницу.
<body bgcolor=blue text=red background=2.GIF>
Перейдите к программе Microsoft Internet Explorer и перезагрузите файл Лицей.html. На Web-странице появится фоновый рисунок.
Обратите внимание, что имя графических файлов в HTML-документе набрано строчными буквами. Операционная система Windows не различает регистр букв в названиях файлов. Однако операционная система Unix, в которой в дальнейшем может функционировать ваш сайт или Web-страница, отличает строчные и прописные буквы, поэтому имя графического файла в теге следует указывать с соблюдением регистра.
Список является удобной формой представления данных. Например, с помощью списков полезно объединять фрагменты информации в единую структуру, описывать многошаговые процессы, представлять оглавления документов. Язык HTML поддерживает нумерованные и ненумерованные списки. В ненумерованных или маркированных списках для выделения элементов используются специальные символы, которые называют маркерами списка. В нумерованных или упорядоченных списках перед элементом отображается его порядковый номер. Рассмотрим, как создавать маркированный список на Web-странице.
<title>Здесь вы получите специальности: </title>
<h2 align=center>:</h2>
Для создания маркированного списка следует использовать пару тегов <ul></ul>, которая ограничивает список. Каждый элемент списка должен начинаться тегом <li> причем нет необходимости в закрывающем теге элемента. Давайте создадим ненумерованный список профессий. Ниже элемента <h2 align=center> Здесь вы получите специальности:</h2> введите код для списка:
<ul>
<li>Мастер по обработке цифровой информации
<li>Контролер сберегательного банка
<li> Электромонтер по ремонту и обслуживанию электрооборудования
</ul>
Полный HTML-код представлен на Рис.
Осталось сохранить документ на диске и просмотреть его в браузере.
Ссылка состоит из двух частей: указателя и адресной части. Указатель ссылки связан с ее представлением на Web-странице. Указателем ссылки может быть фрагмент текста или изображение. Указатель ссылки обычно выделяется цветом. При подведении к ссылке указатель мыши принимает вид . Адресная часть ссылки содержит имя документа, на который указывает ссылка, или его электронный адрес для загрузки из Интернета. Далее будет рассказано, как вставлять в Web-документ ссылки, представленные текстом и рисунком.
<html>
<head>
<title> Мастер по обработке цифровой информации</title>
</head>
Для вставки ссылки на другие страницы используется пара тегов <а></а>. Данный тег имеет единственный атрибут href, значением которого является адресная часть ссылки, т.е. имя документа, на который нужно сослаться, или его электронный адрес для загрузки из Интернета. Указатель ссылки располагается между открывающим <а> и закрывающим </а> тегами. Это может быть фрагмент текста или HTML-код, соответствующий рисунку.
Давайте создадим текстовую ссылку, в которой указателем будет Мастер по обработке цифровой информации на нашей Web-странице, а адресной частью - имя созданного ранее документа МОЦИ.html.
Пропишите HTML-код со ссылкой на Web-страницу МОЦИ .html <а href=МОЦИ > Мастер по обработке цифровой информации </a> . Адресная часть можно заключать в кавычки, так как некоторые браузеры могут ее некорректно обрабатывать без кавычек.
<ul>
<li><a href=МОЦИ.html>Мастер по обработке цифровой информации</a>
<li>Контролер сберегательного банка
<li> Электромонтер по ремонту и обслуживанию электрооборудования
Гиперссылка на домашнюю страницу.
Так как страница проба.html является главной страницей, она будет домашней. Чтобы создать переход с других страниц на домашнюю, необходимо с помощью тегов <br> или <p></p> внизу страницы написать слово «Домой» или «На домашнюю страницу» и с этой фразы прописать гиперссылку:
<a href=проба.html>Домой</a>
</body>
</html>
Вставка таблицы.
Таблица является особой частью HTML-документа. Ячейка таблицы может содержать в себе текст, графику или другую таблицу.
Таблица состоит из трех основных частей:
Таблица заполняется по строкам (слева направо – по строке, затем переход на следующую строку). Каждая ячейка должна быть заполнена. Для создания пустых ячеек используются пробелы.
Используя полученные ранее знания, давайте рассмотрим, как строится такая таблица…
|
Таблица 3.2. Демонстрация катаболических процессов организма |
|||
|
Чебурашка |
Крокодил Гена |
Шапокляк |
|
|
Съел, кг |
5 |
2 |
1 |
|
Выпил, л |
6 |
8 |
2 |
|
Смог, раз |
5 |
5 |
1 |
После заголовочных тегов
<html>
<head>
<title> мультяшки</title>
</head>
</html>
Прописывается тело страницы. Таблица объявляется двойным тегом-контейнером <table></table>. Тег строки прописывается <tr></tr>, тег данных <td></td>.
<body>
<table width=60% border=6 cellspacing=0 cellpadding=4>
<caption align=center>
Таблица 3.2. Демонстрация катаболических процессов организма
</caption >
<tr bgcolor=olive>
<th></th>
<th>Чебурашка</th>
<th>Крокодил Гена</th>
<th>Шапокляк</th>
</tr>
<tr align=center>
<td></td>
<td></td>
<td><img src=2.gif width=100 height=100</td>
<td></td>
</tr>
<tr align=center >
<td bgcolor=red>Съел, кг</td>
<td>5</td>
<td>2</td>
<td>1</td>
</tr>
<tr align=center>
<td>Выпил, л</td>
<td>6</td>
<td bgcolor=yellow>8</td>
<td>2</td>
</tr>
<tr align=center>
<td>Смог, раз</td>
<td>5</td>
<td>5</td>
<td>1</td>
</tr>
</table>
</body>
</html>
Тег CAPTION предназначен для создания заголовка к таблице и может размещаться только внутри контейнера TABLE, причем сразу после открывающего тега.
Параметры
align — определяет выравнивание таблицы.
background — задает фоновый рисунок в таблице.
bgcolor — цвет фона таблицы.
border — толщина рамки в пикселах.
bordercolor — цвет рамки.
cellpadding — отступ от рамки до содержимого ячейки.
cellspacing — расстояние между ячейками.
cols — число колонок в таблице.
height — высота таблицы.
rules — сообщает браузеру, где отображать границы между ячейками.
width — ширина таблицы.
Практикум.
С помощью текстового редактора Блокнот, создайте таблицу по образцу и оформите ее по желанию. Вставьте рисунки и закрасьте ячейки, сделайте обрамление.
|
Сравнительная характеристика принтеров |
|||
|
матричные |
струйные |
лазерные |
|
|
(рисунок) |
(рисунок) |
(рисунок) |
|
|
Скорость печати (стр/мин) |
1 |
8-10 |
10-20 |
|
Качество печати |
низкое |
хорошее |
Высокое |
|
Цена (у.е.) |
от 80 |
от 45 |
от 200 |
Файлы сохраните в своей папке.
Результат покажите преподавателю.
Создание форм на Web-страницах.
Для того чтобы посетители сайта могли не только просматривать информацию, но и отправлять сведения, на его страницах размещают формы.
Разместим на странице анкету, чтобы выяснить, кто и с какими целями получает и использует программы из сети Интернет, а также выясним, какую информацию они хотели бы видеть на нашем сайте.
Форма заключается в контейнер <FOPM></ FOPM>.
Текстовые поля создаются с помощью тега <INPUT> со значением атрибута TYPE=”TEXT”. Атрибут NAME является обязательным и служит для идентификации полученной информации. Значением атрибута SIZE является число символов, задающих длину поля.
<form>
Пожалуйста, введите ваше имя: <br>
<input type=text name="name" size=50><br>
e-mail:<br>
<input type=text name="e-mail" size=50><br>
</form>
Чтобы выбрать один ответ из нескольких вариантов, используются переключатели (радиокнопки). Создается такая группа с помощью тега <INPUT> с атрибутом TYPE=”RADIO”. Все элементы в группе должны иметь одинаковое значение атрибута NAME. Например NAME="GROUP”.
Обязательным атрибутом является VALUE – оно уникально для каждой радиокнопки, именно они передаются серверу.
<form>
Укажите, к какой группе пользователей вы себя относите:<br>
<input type="radio" name="group" value="schoolboy">обучающийся<br>
<input type="radio" name="group" value="student">студент<br>
<input type="radio" name="group" value="teacher">учитель<br>
</form>
Чтобы из предложенного списка выбрать несколько вариантов, используются флажки. Флажки создаются в теге <INPUT>со значением атрибута TYPE=”CHECKBOX”. Все элементы в группе должны иметь одинаковое значение атрибута NAME. Например NAME="GROUP”.
Еще одним обязательным атрибутом является VALUE, которому присваиваются значения, уникальные для каждого флажка, т.к. они передаются серверу.
<form>
Какие из сервисов Интернета вы используете наиболее часто:<br>
<input type="checkbox" name="group" value="www">WWW<br>
<input type="checkbox" name="group" value="e-mail">e-mail<br>
<input type="checkbox" name="group" value="ftp">FTP<br>
</form>
Теперь постараемся выяснить, какие браузеры предпочитают посетители сайтов. Перечень сайтов представим в виде раскрывающегося списка.
Здесь используется контейнер <SELECT></SELECT>, в котором каждый элемент списка определяется тегом <OPTION>. Выбираемый по умолчанию элемент задается при помощи атрибута SELECTED. <form>
Какой из браузеров вы предпочитаете:
<select name="browsers">
<option selected> Internet Explorer
<option> Opera
<option>Mozilla
</select><br>
<br>
</form>
Чтобы узнать, что хотел бы увидеть посетитель на сайте, можно задать текстовую область с полосой прокрутки .
Создается такая область с помощью тега <TEXTAREA> с обязательными атрибутами NAME, задающим имя области, ROWS – определяющим число строк и COLS, определяющим число символьных столбцов области.
<form>
Какую еще информацию вы хотели бы видеть на нашем сайте?
<br>
<textarea name="resume" rows=4 cols=50>
</textarea><br>
</form>
Отправка введенной в форму информации или очистка полей от уже введенной информации осуществляется с помощью кнопок.
Кнопки создаются с помощью тега <INPUT>. Для создания кнопки для отправки информации, используется атрибут TYPE=”SUBMIT”, а для очистки используется значение “RESET”. Атрибуту VALUE задаются записи на кнопке «Отправить» и «Очистить»
<form>
<input type=”submit”
value="отправить">
<input type=”reset”
value="очистить">
</form>
Заполненная форма отправляется на сервер, где обрабатывается специальной программой CGI-скриптом или автор сайта самостоятельно обрабатывает полученные данные.
Чтобы по щелчку данные передавались на сервер, параметры задаются с помощью атрибута ACTION, вложенного в контейнер <FORM></FORM>.
Например, <FORM ACTION=”URL”>< FORM>.
Задание:
Создайте WEB-страницу по заданной теме, используя все изученные возможности HTML.