Автор: Пользователь скрыл имя, 11 Ноября 2011 в 18:43, реферат
Точно рассказано о том как легко и просто своими руками научиться создавать сайты
Общие
сведения
Сайт - это
набор страниц в формате гипертекста (например,
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
Заголовки размечаются с помощью элементов <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 занимают специальные символы. В таблице приведены наиболее необходимые символы.
Название символа |
Вид символа |
Обозначение |
Неразрывный пробел |
| |
Длинное тире |
- | — |
Знак авторского права |
Ó | © |
Амперсенд |
& | & |
Левая кавычка |
« | « |
Правая кавычка |
» | » |
Левый тег |
< | < |
Правый тег |
> | > |
1. Создайте текстовый
файл. Сохраните его с расширением
html. Откройте его в браузере. Выберите
в меню браузера Вид/Исходный текст и верстайте
страницу как показано на макете ниже.
Периодически сохраняйте текст и обновляйте
в браузере. Задайте заголовок странице
«Защита файлов»
Защита
файлов с помощью
пароля экранной заставки
Примечания
|
2. Сверстайте еще
одну страницу в соответствии с макетом,
представленном ниже. Задайте заголовок
странице «Харуки Мураками».
Харуки
Мураками. Дэнс, дэнс,
дэнс |
Для разметки ссылок предназначен элемент <a> (Anchor). Для обозначения назначения ссылки используется атрибут href (Hipertext Reference), а в качестве его значения указывается URL (Universal Resource Identifier) – универсальный идентификатор ресурса. URL – это адрес ресурса в интернете. Именно ресурса, а не страницы, потому что ссылка может вести к файлу или картинке.
Ссылки делятся на абсолютные и относительные.
В абсолютных ссылках атрибут href содержит полный адрес. Обычно применяются для создания ссылок, которые ведут на внешний сайт.
В относительных ссылках атрибут href содержит укороченный адрес, например, только имя файла. Такие ссылки будут корректно работать, если все файлы расположены в одной директории на сервере.
Полезным методом перемещения в пределах страницы является связывание с помощью внутренних ссылок. Место в странице, на которое нужно перейти, помечается именованным элементом привязки, который создается таким образом:
<a name=”x”> </a>,
где x – любой набор символов. Чтобы перейти к этому месту страницы создается ссылка:
<A href=”#x”> текст или объекты </A>.
Таблицы значительно чаще используются для разметки страницы, чем для вывода информации в табличной форме.
Для создания таблицы предназначен элемент <table>.
За основу формирования таблицы взяты строки. Для разметки строки используется элемент <tr> (Table Row). Строка может состоять из множества ячеек, каждая из которых размечается с помощью элемента <td> (Table Date).
Пример таблицы вида:
|
<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 объединяет ячейки по вертикали.
Пример:
| ||||||||||