- •В.Л. Гренков интернет технологии. Методика и практика создания web-страниц и web-сайтов
- •Москва 2014
- •. Документы html и основные теги.
- •1.2. Практические задания по теме: задания 1…10.
- •2. Освоение правил и приемов вставки рисунков рисунков и видеороликов в веб-документы
- •2.1. Атрибуты оформления текста и графики в html-документах
- •2.2. Практические задания по теме: задания 2-1…2-9
- •3. Практические приемы создания списков в веб-страницах
- •3.1. Виды списков, теги и атрибуты их оформления
- •3.2. Практические задания по теме: задания 3-1…3-11
- •4. Практические приемы создания таблиц в веб-страницах
- •4.1. Применение и оформление таблиц в html-документах.
- •4.2. Практические задания по теме: задания 1…9.
- •5. Создание гиперссылок и связывание веб-страниц
- •5.1. Оформление внешних и внутренних гиперссылок.
- •5.2. Практические задания по теме: задания 5-1…5-11.
- •6. Практические приемы создания форм в веб-страницах
- •6.1. Назначение и структура форм. Теги и атрибуты формы.
- •6.2. Практические задания по теме: задания 6-1…6-5
- •7. Применение таблиц каскадных стилей css
- •7.1. Стили,их определение и применение. Теги и атрибуты css.
- •7.2. Практические задания по теме: задания 7-1…7-8.
- •8. Обработка форм
- •8.1. Средства обработки форм. Подготовки файла обработки.
- •8.2. Практическое задание по теме.
- •Тема 9. Практика создания сайта
- •9.2. Практические задания по теме: задания 9-1…9-4.
- •Тема 10. Публикация сайта. Требования к сайту и его поддержка.
- •10.1. Особенности регистрации и поддержки сайта.
- •10.2. Практическое задание по теме.
. Документы html и основные теги.
В сети интернет информация представлена в виде так называемых веб-страниц. Их совокупность, объединенная некоторой общей идеей (тематикой), представляет собой сайт. Веб-страницы являются по большей части документами html, то есть их содержимое написано на языке гипертекстовой разметки html. Особенность этого языка в том, что любому элементу html-документа можно задать свойства гиперссылки (это могут быть отдельные слова, блоки, рисунки и т.п.). При этом щелчок мыши по его элементу, являющемуся гиперссылкой (обладающим указанным свойством), приводит к открытию в браузере другого документа, связанного с ним. Благодаря гиперссылкам, можно легко перемещаться между отдельными блоками текста, между целыми страницами внутри сайта и даже переходить от одного сайта к другому.
Для оформления html-текста, или гипертекста, используются угловые скобки с определенными символами, в целом называемые тегами. По большей части эти теги – парные. Строки текста заключаются в теги, первый тег – открывающий, второй – закрывающий. Например, тег < html> … < /html> включает в себя весь html-документ, являющийся веб-страницей. Далее идет заголовок, заключаемый в теги < title> …< / title >. Самая информативная часть веб-страницы заключается в парный тег < body> … < / body>.
Для оформления текста могут применяться теги физического форматирования и стилевые теги. Синтаксис для этих двух способов форматирования текста существенно различен, хотя выполняемые функции могут совпадать. Во всех практических заданиях данного учебного пособия предпочтение отдано стилевому методу (методу таблиц каскадных стилей CSS) как более прогрессивному, но допускается и применение тегов, относящихся к физическому форматированию. Метод CSS отличается главным образом тем, что позволяет задавать текстовый формат сразу для всего документа, а также для достаточно больших фрагментов, если стиль их оформления отличен от общего стиля.
В таблице 1.1 приведены примеры записи наиболее актуальных тегов физического форматирования и CSS, а также их атрибуты (параметры), использование которых рекомендуется для выполнения практических заданий.
Исчерпывающее описание всех известных тегов и их свойств можно найти в / 1/ и в целом ряде общедоступных интернет-источников, касающихся языка html.
Таблица 1.1. Теги и атрибуты оформления текста.
Теги физического Форматирования
|
Теги CSS |
bgcolor = blue – цвет фона |
background-color: green – цвет фона |
text =red – цвет текста |
color: #003399, color: white – цвет текста |
background= “fon.png” - адрес фонового изображения. |
background-image: url ("Ris_mio/oboi.gif")- адрес фонового изображения. |
leftmargin, righmargin, topmargin, upmargin – границы полей документа (в px) |
margin-left: 10 px, (margin-right, margin-top, margin-up) границы полей документа (в px) |
<p> … </p> – абзац |
<div> … </div> - блок текста |
<p align = left > – выравнивание по левому краю (варианты: center, right, justify) |
align = “left” text- align:left– выравнивание по левому краю |
align=top – выравнивание по верхней строке (таблицы) |
font-family:Times New Roman – вид шрифта |
<i>…</i> - наклонное начертание |
font-style:italic - наклонное начертание |
<b>…</b> - полужирное начертание |
font-weight:bold - полужирное начертание |
<u>…</u> - подчеркивание текста |
padding-left: 100px-свободное поле слева |
border =”2”- толщина рамки |
font-size:18pt - размер шрифта |
<table>… </table> - таблица |
font-size: 150% размер шрифта в %- |
<tr>… </tr> - строка таблицы |
text-indent: 50px – красная строка |
<td>… </td> - ячейка таблицы |
border-style: solid –сплошна рамка |
width=”300”– ширина рамки в таблице (таблицы,строки, ячейки) в px |
border-width- ширина рамки |
height=” 75”– высота рамки в таблице |
border-color – цвет рамки |
< h1>…< /h1>, …< h6>…< /h6> - размер (высота) шрифта |
border: 3px solid green- рамка сплошная зеленого цвета толщиной 3рх |
hspace=10 – интервал между рисунком и текстом по горизонтали |
word-spacing: 1em – межсловный интервал |
vlign=”bottom” (варианты top, left, right) - вертикальное выравнивание по нижней границе |
position:relative – относительное позиционирование содержимого страницы |
vspace=20- интервал между рисунком и текстом по вертикали |
position:absolute-абсолютное позициониро вание содержимого страницы |
< hr> - горизонтальная линия |
|
< br/> - разрыв строки |
|
< nobr> - неразрывная строка |
|
  - пробел |
|
<ol>… </ol> - маркированный список |
|
<ul>… </ul> - нумерованный список |
|
< li> - строка списка |
|
<!-- … -- > - комментарий |
|
< a href= “…” > … </a> - текстовая ссылка, href= “…”- адресная часть ссылки |
|
<img src=”Ris_mio.png”> - вставка изображения, src=”Ris_mio.png”- файл рисунка |
|
<style>… </style> - объявление стиля |
|
<form>…< /form> - объявление формы |
|
action- атрибут адреса отправки содержимого формы |
|
method - атрибут способа отправки отправки содержимого формы |
|
name – имя формы |
|
<input>- атрибут однострочного текста формы |
|
<textarea> - атрибут многострочного текста формы |
|
<select> - атрибут текста формы в виде списка |
|
textarea><select><…</textarea>…</ |
|
selectеd –атрибут выбора элемента списка формы по умолчанию. |
|
multiple – атрибут множественного выбора в списке формы |
|
p#tip1{…} – определение стиля для блока текста |
|
p id= tip1> - вызов стиля для блока текста |
|
<a href="#metka1"> приборы </a> – определение внутренней ссылки |
|
<a name=metka1></a> – точка входа по внутренней ссылке |
|