Верстка веб страниц

Общие сведения 

Сайт  - это набор страниц в формате гипертекста (например, HTML), объединенный навигацией (ссылками) в единое логическое пространство.   

Верстка сайта  – это формирование страниц сайта  с помощью специального языка, который  называется HTML (HyperText Markup Language) – язык разметки гипертекста. 

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

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

Например, переход  по ссылке есть проявление интерактивности. Среда реагирует на ваше действие.  

HTML поддерживает интерактивность на начальном уровне и для нормального ее обеспечения приходится использовать CSS, JavaScript. С помощью HTML не получится сделать практически ничего интерактивного (кроме перехода по ссылкам). Это и правильно, так как язык HTML является языком разметки текста и ничем иным. Главное, что он совместим с другими технологиями, которые обеспечивают интерактивность. Наличие форм позволяет организовать взаимодействие с сервером, JavaScript и CSS легко интегрируются с HTML.

Структура языка разметки гипертекста

 

Язык HTML состоит из двух структурных единиц: элементов и атрибутов. Атрибуты принадлежат элементам и могут принимать разные значения. Один элемент может иметь несколько атрибутов.

Примеры элементов: h1, body, table.

Примеры атрибутов: src, border, width. 

Элемент – это главная структурная единица языка HTML, на основе которой строятся теги. 

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

Примеры тегов: <h1>, <table border=”0”>, </body>. 

Один и тот  же элемент может образовывать разные теги.

Структура HTML-документа 

Рассмотрим пример:

<html>

      <head>

            <title> Первый опыт </title>

      </head>

      <body>

            Здесь помещается содержимое страницы

      </body>

</html> 

Весь документ заключен в теги <html></html>. Это обозначает что он имеет формат HTML, а не какой-либо другой. Сам документ разделен на две части.

Первая расположена  между тегами <head></head>. Содержащаяся  в ней информация является вспомогательной. В данном примере она задает заголовок страницы (между тегами <title> </title>). 

Вторая часть  находится между тегами <body></body>. Как раз она отображается в браузере.

Разделы языка HTML

  • Текст.
  • Ссылки. Необходимы для того чтобы обычный текст превращать в гипертекст.
  • Таблицы. Служат для отображения табличной информации, но кроме того используются для позиционирования блоков на странице.
  • Объекты. К ним относятся изображения, Flash-ролики и т. д.
  • Формы. Непосредственно они обеспечивают поддержку интерактивности.

Текст

Заголовки размечаются с помощью элементов <h1> - <h6> (Header). Заголовок первого уровня должен заключаться в теги <h1></h1> и т.д.

Для обозначения  абзацев используют элемент <p> (Paragraph). Закрывающий тег является необязательным.

Для обозначения  нумерованного списка предназначен элемент <ol> (Order List). Каждый пункт списка должен начинаться с элемента <li> (List Item). Вот пример простого нумерованного списка:

<ol>

      <li>Первый пункт</li>

      <li>Второй пункт</li>

      <li>Третий пункт</li>

</ol>

Для обозначения  ненумерованного списка служит элемент <ul> (Unordered List). Пункты списка также обозначаются элементом <li>:

<ul>

      <li>Первый пункт</li>

      <li>Второй пункт</li>

      <li>Третий пункт</li>

</ul>

Чтобы сделать  фрагмент текста полужирным используют элемент <b> (Bold) или <strong>.

Чтобы сделать  фрагмент текста курсивным используют элемент <i> (Italic) или <em> (Emphasis).

Чтобы вставить перевод строки используется элемент <br> (Break).

Особое место  в HTML занимают специальные символы. В таблице приведены наиболее необходимые символы.

Название  символа

Вид символа

Обозначение

Неразрывный пробел

   &nbsp;

Длинное тире

 - &mdash;

Знак  авторского права

 Ó &copy;

Амперсенд

 & &amp;

Левая кавычка

 « &laquo;

Правая  кавычка

 » &raquo;

Левый тег

 < &lt;

Правый  тег

 > &gt;

Задания для самостоятельной  верстки

1. Создайте текстовый  файл. Сохраните его с расширением  html. Откройте его в браузере. Выберите в меню браузера Вид/Исходный текст и верстайте страницу как показано на макете ниже. Периодически сохраняйте текст и обновляйте в браузере. Задайте заголовок странице «Защита файлов» 
 

Защита  файлов с помощью  пароля экранной заставки
  1. Откройте объект Экран на панели управления.
  2. На вкладке Заставка в группе Заставка выберите нужную заставку из списка.
  3. Установите флажок Защита паролем.

Примечания

  • Чтобы открыть приложение панели управления, нажмите кнопку Пуск, выберите команды Настройка и Панель управления и дважды щелкните соответствующий значок.
  • Когда флажок Защита паролем установлен, рабочая станция блокируется при активизации заставки. Для разблокирования рабочей станции при возобновлении работы необходимо ввести пароль.
  • Пароль заставки совпадает с паролем текущего пользователя.
 

2. Сверстайте еще одну страницу в соответствии с макетом, представленном ниже. Задайте заголовок странице «Харуки Мураками». 

    Харуки  Мураками. Дэнс, дэнс, дэнс 
     
     

     © Haruki Murakami 1991 «Dansu, dansu, dansu»

     Первое издание 15 декабря 1991 года.

     Перевод © Дмитрий Коваленин, 2001

            Роман 

     Перевод с японского Дмитрия Коваленина

Ссылки

Для разметки ссылок предназначен элемент <a> (Anchor). Для обозначения назначения ссылки используется атрибут href (Hipertext Reference), а в качестве его значения указывается URL (Universal Resource Identifier) – универсальный идентификатор ресурса. URL – это адрес ресурса в интернете. Именно ресурса, а не страницы, потому что ссылка может вести к файлу или картинке.

Ссылки делятся  на абсолютные и относительные.

В абсолютных ссылках  атрибут href содержит полный адрес. Обычно применяются для создания ссылок, которые ведут на внешний сайт.

В относительных  ссылках атрибут href содержит укороченный адрес, например, только имя файла. Такие ссылки будут корректно работать, если все файлы расположены в одной директории на сервере.

    Полезным  методом перемещения в пределах страницы является связывание с помощью  внутренних ссылок. Место в странице, на которое нужно перейти, помечается именованным элементом привязки, который создается таким образом:

<a name=”x”> </a>,

где x – любой набор символов. Чтобы перейти к этому месту страницы создается ссылка:

<A href=”#x”> текст или объекты </A>.

Задания для самостоятельной  верстки

  1. Свяжите две  странице, сверстанные в предыдущем задании, с помощью относительных ссылок.
  2. Добавьте в первую страницу внутреннюю ссылку.

Таблицы

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

Для создания таблицы  предназначен элемент <table>.

За основу формирования таблицы взяты строки. Для разметки строки используется элемент <tr> (Table Row). Строка может состоять из множества ячеек, каждая из которых размечается с помощью элемента <td> (Table Date).

Пример таблицы  вида:

Таблица калорийности продуктов

Название  продукта Калорийность (Ккал на 100 г)
Морская капуста, сельдерей Менее 10
 

<h2> Таблица  калорийности продуктов </h2>

<table border="1">

  <tr>

      <td> Название продукта</td>

      <td>Калорийность (Ккал на 100 г)</td>

  </tr>

  <tr>

      <td>Морская капуста, сельдерей</td>

      <td>Менее  10</td>

  </tr>

</table> 

Таблицы – это  тот случай, когда без атрибутов  не обойтись.

Атрибуты элемента <table>:

Атрибут width задает ширину таблицы. Значение можно указывать в пикселях или в процентах. Пиксели используют, когда хотят сделать ширину таблицы фиксированной: <table width=”300”>. В процентах ширину задают, если нужна гибкость, т.е. ширина таблицы будет изменяться при изменении размеров окна браузера: <table width=”50%”>.

Атрибут width можно применять и к отдельным ячейкам.

Атрибут border задает в пикселях ширину рамки таблицы. Если установить border=”0”, то рамок не будет.

Атрибут cellspacing задает расстояние между ячейками в пикселях.

Атрибут cellpadding задает отступы вокруг содержимого каждой ячейки.

Когда таблицы  используют для верстки графики, то обычно задают такие значения атрибутам:

<table cellpadding=”0”  cellspacing=”0” border=”0”>

Атрибуты элемента <td>:

Атрибут colspan объединяет ячейки в строке.

Атрибут rowspan объединяет ячейки по вертикали.

Пример:

Таблица калорийности продуктов

Низкокалорийные Название продукта Калорийность (Ккал на 100 г)
Морская капуста, сельдерей Менее 10
капуста, редька, огурцы,салат 10-20
 

<table border="1">

  <tr>

      <td colspan="3"><h4>Таблица калорийности продуктов</h4></td>

  </tr>

  <tr>

      <td rowspan="3">Низкокалорийные</td>

      <td> Название продукта</td>

      <td>Калорийность (Ккал на 100 г)</td>

  </tr>

  <tr>

      <td>Морская капуста, сельдерей</td>

      <td>Менее 10</td>

  </tr>

  <tr>

      <td>капуста, редька, огурцы, салат</td>

      <td>10-20</td>

  </tr>

</table>

Атрибут align задает выравнивание по горизонтали. Может принимать значения: left, center, right, justify.

Атрибут valign задает выравнивание по вертикали. Может принимать следующие значения: top, middle, bottom.

Задания для самостоятельной  верстки

 
  1. Сверстать таблицу:
Один
два три четыре
пять шесть
семь
 

    2. Задайте  разные значения атрибутам border, cellspacing, cellpadding.

Объекты

К объектам относятся  изображения, Flas-ролики и д.п.

Картинки размечают с помощью элемента <img> (Image). У него есть обязательный атрибут src, в котором указывается путь к файлу с изображением. При верстке практически всегда используют относительные пути.

Обычно все  картинки помещают в одну директорию.

Пример вставки  изображения:

<img src=”i/logo.gif”>

Атрибуты элемента <img>:

Атрибут alt (alternative) задает краткое описание изображения. Необходимо в тех случаях, когда в браузере отключено отображение графики. Для графических элементов, относящихся к художественному оформлению  страницы, атрибут alt следует оставлять пустым: alt=””.

При табличной  верстке следует задавать высоту и ширину картинок для ускорения  обработки таблицы браузером. Для  этого предназначены атрибуты height и width.

Часто картинку делают ссылкой и при этом вокруг нее появляется синяя рамка. Чтобы избавиться от нее, надо атрибуту border задать значение “0”.

    Для размещения на странице аудио и видео используется элемент <embed>.

    Атрибуты  элемента <embed>:

    height=”x” – высота экрана ролика в пикселях или процентах

    width=”x” - ширина экрана ролика в пикселях или процентах

    autoplay=”true / false” – если для автозапуска установлено значение true, то ролик запустится, как только страница станет доступной, если значение установлено false, то для запуска ролика пользователю необходимо будет щелкнуть на кнопке запуска на консоли.

    controller=”true / false” – дает пользователю возможность добавления управляющих элементов

    loop=”true / false / palindrome” – если требуется чтобы ролик работал циклически, то необходимо установить значение true, если требуется, чтобы ролик был прокручен один раз, а затем остановился – значение false. При значении palindrome ролик работает от начала до конца, затем в обратном порядке и т.д.

    Пример.

<EMBED src="animals.avi"  controller=false  autoplay=true loop=true>

Задания для самостоятельной  верстки

 

1. Сверстайте  фрагмент страницы по образцу.  Первая картинка является ссылкой,  для данного примера «в никуда».  Картинка в центре – произвольная, остальные создайте в графическом  редакторе. 

 

Формы

    Формы необходимы при создании динамических сайтов. В целом процесс взаимодействия посетителя с формой выглядит следующим  образом. Пользователь изменяет параметры  формы: заполняет поля, устанавливает  флажки и т.п., а затем нажимает кнопку отправки формы, после чего содержимое формы посылается на сервер. На сервере программа обрабатывает полученную информацию и выполняет некоторые действия. Результат работы программы может быть показан пользователю. 

      Элементы  форм и атрибуты 

      Существует  несколько ключевых элементов форм и ряд связанных с ними атрибутов, которые необходимо знать для создания форм.

  • <FORM>…</FORM> - дескрипторы, открывающие и закрывающие форму. Форма может иметь несколько атрибутов. Основные из них - action, который в качестве значения принимает URL для передачи на узел информации из формы, и method, принимающий значения get и post. Эти значения определяют способ передачи данных на узел.
  • <INPUT> - дескриптор создания управляющих элементов. С этим дескриптором могут использоваться следующие атрибуты:
    • type = “x” – определяет элемент управления (см. «Управляющие элементы»);
    • name = “x” – имя элемента управления;
    • value = “x” – значение элемента управления;
    • size = ”x” – ширина поля элемента управления в пикселях; для элементов text и password ширину поля определяют в символах;
    • maxlength = “x” – предельное количество символов, которое принимает элемент управления;
    • checked = “x” – отмеченный флажок (переключатель);
    • src = “x” – указатель на рисунок, используемый в качестве графической кнопки.
      • <TEXTAREA>…</TEXTAREA> - создает текстовую область. Принимает атрибуты name = “x”, rows = “x” – определяет количество строк области, cols = “x” – определяет ширину области.
      • <SELECT>…</SELECT> - этот элемент создает меню. Меню может быть выпадающим или представленным в виде списка.
      • <OPTION>…</OPTION> - определяет каждый элемент списка меню в отдельности.
 

    Управляющие элементы 

    Экранные  управляющие элементы определяют способ ввода информации. Синтаксически  элементы представляют собой значение атрибута type дескриптора <INPUT>.

    Далее перечислены  управляющие элементы.

  • text – поле ввода текста, состоящее из одной строки. Ширину поля определяет значение size.
  • password – поле, подобное полю ввода текста text. Отличие в том, что вводимые символы отображаются в виде символов *.
  • checkbox – флажок, принимающий два логических значения.
  • radio – переключатель. В отличие от флажка, из нескольких переключателей может быть выбран лишь один.
  • submit – кнопка, нажатие которой означает подтверждение выбора.
  • reset – кнопка, нажатие которой означает сброс текущих значений элементов управления и установку значений по умолчанию.
  • file – позволяет создать кнопку вызова диалогового окна выбора файла.
  • hidden – скрытый элемент управления, обычно используется для автоматического ввода дополнительных донных для передачи Web-узлу.
  • image – элемент, позволяющий вставить изображение и использовать его для подтверждения выбора или сброса вместо кнопок submit и reset.
  • button – кнопка. Для работы кнопке требуются связанные с ней сценарии.
 
 

Пример построения формы: 

<form method=GET action="glow.html"> 

<b> Введите Ваше имя: </b>

<input type="text" name="name" value="" size=20><BR><BR>

<b>Введите ваш контактный телефон:</b>

<input type="text" name="phone" value="" size=20 ><BR><BR> 

<b>Возраст:</b><BR>

18-25 <input type="checkbox" name="18-25" ><BR>

25-40 <input type="checkbox" name="25-40" ><BR><br> 

<b> Пол:</b><BR>

<input type="radio" name="button" value="мужской" >Мужской<BR>

<input type="radio" name="button" value="женский" checked>Женский<BR><br> 

<b>Город:</b>

<select name="sity"  >

<option value="Лондон" selected>Лондон

<option value="Москва">Москва

<option value="Париж">Париж

</select><BR><BR> 

<p style="position:absolute; top:250; left:250; "><b >Город:</b></p>

<select name="sity" size=3  style="position:absolute; top:250; left:300; ">

<option value="Лондон" selected>Лондон

<option value="Москва">Москва

<option value="Париж">Париж

</select><BR><BR> 

<b>Дополнительные сведения о себе:</b>

<textarea rows=4 cols=40>

</textarea><BR><BR> 

<input type="submit" name="Vvod" value="Ввод">

&nbsp &nbsp &nbsp 

<input type="reset" value="Отмена"> 

&nbsp;&nbsp;&nbsp 

<input type="button" name="Pusk" value="Пуск">

&nbsp &nbsp &nbsp 

<input type="image" src="cherpah.jpg" width=50 value=submit alt="OK">

&nbsp &nbsp &nbsp 

<button nane="submite" value="submite" type="submite">OK<img src="cherpah.jpg" width=50 alt="GO"></button> 

</form>

    Задание для самостоятельной  верстки

    Сверстать страницу с формой как показано в примере. Внести изменения на свое усмотрение.

 

Таблицы каскадных стилей (CSS) 

Спецификация CSS (Cascading Style Sheets) позволяет полностью контролировать форму представления элементов HTML-разметки. 

Синтаксис CSS 

Правило – объявление стиля для одного элемента. Структура правила (стиля): 

H1 {color: blue; font-family: Verdana;}

     

H1 селектор
{color: blue; font-family: Verdana;} блок объявления стилей
color свойство
blue значение
 
 

Способы применения стилей 

  1. Задание стилей для отдельного элемента с помощью  атрибута style.
 

       <h1 style=”font-style: italic; font-size: 10pt;”>Заголовок первого уровня</h1> 

  1. Включение таблицы стилей в документ внутри элемента <style>.
 

    <html>

       <head>

             <title>Изучение CSS</title>

             <style type=”text/css”>

                BODY {background: #FFF;}

                H1 {font: 22px Arial;}

             </style>

       </head>

       <body>

             <h1>Заголовок</h1>

       </body>

    </html> 

  1. Вынесение таблицы стилей в отдельный файл и подключение его с помощью  тега <link>.
 

    Тег <link> должен размещаться в секции <head>, например: 

    <html>

       <head>

             <title>Изучение CSS</title>

             <link rel=”stylesheet” type=”text/css” href=”style.css”>

Верстка веб страниц 📙 Реферат → 🆔 47184

Верстка веб страниц 📙 Реферат → 🆔 47184

Верстка веб страниц