bases_html

advertisement
Особенности разработки
и использования
интернет-ресурсов
Основы сайтостроительства
Язык HTML
Язык разметки гипертекстовых документов
HTML основан
на
совокупности
команд,
называемых тегами (от английского tag).
HTML-тег записывается в угловых скобках и
состоит из имени, за которым может следовать
список атрибутов.
Теги могут быть одиночными или парными. Парный
тег состоит из открывающего и закрывающего.
Закрывающий
тег
содержит
ту
же
последовательность букв, но им предшествует
косая черта: </тег>.
Атрибуты тегов
Атрибуты добавляются в тег для расширения или модификации
его действия.
<тег атрибут1=“значение” атрибут2=“значение”
атрибут3=“значение” ...>
Значения:
• могут быть чувствительны к регистру;
• имеют ограниченную длину в 1024 символа;
• должны заключаться в двойные или одинарные кавычки (за
исключением случаев, когда значение состоит из одного слова
или числа, только из букв (a-z), цифр (0-9), и специальных
символов (точка или дефис)).
Вложенные теги
В теги HTML могут помещаться другие HTML-теги
для осуществления воздействия нескольких
тегов на один элемент – вложение тегов.
<тег1>Пример использования
<тег2>вложенных</тег2> тегов.</тег1>
Теги не могут перекрываться! Неверно:
<тег1>Пример неверного использования
<тег2>вложенных</тег1> тегов.</тег2>
Пример использования тегов
<TABLE border=0>
<tr>
<td><IMG src="pic.gif" width =10 height=20></td>
<td><b><i>Текст</i> для примера</b></td>
</tr>
<tr>
<td>Текст</td>
<td><IMG src="pic2.gif" align=top></td>
</tr>
</TABLE>
Структура HTML-документа
Документ в формате HTML образуют три
основные части:
• строка, содержащая информацию о версии
HTML;
• заголовочная часть (определяется тегом
<head>);
• тело, непосредственно включающее
содержание документа (определяется тегом
<body> или <frameset>).
Пример простейшего
HTML-документа
<html>
<head>
<title>Простой документ</title>
</head>
<body text="#0000ff" bgcolor="#f0f0f0">
<h1>Пример простого документа</h1>
<hr>
<p>Проба пера.</p>
<p><img src="pict/book.gif" width="149" height="226"></p>
</body>
</html>
Результат отображения документа
в окне броузера
Структура сайта
Последовательная (линейная)
структура
Иерархическая (древовидная) структура
Структура системы координат
Структура сети (паутина)
Классификация вебсайтов
1. Личные страницы (Home pages).
2. Корпоративные сайты.
3. Коммерческие сайты.
4. Контент-сайты.
5. Некоммерческие сайты.
Основные этапы разработки сайта
1. Анализ.
2. Выработка концепции.
3. Проектирование.
4. Создание дизайна.
5. Подготовка информационного наполнения.
6. Создание программных компонентов (если необходимо).
7. "Верстка".
8. Отладка и тестирование.
9. Публикация.
10.Продвижение, поддержка и эволюция.
Состав команды разработчиков
1. Писатель.
2. Редактор.
3. Иллюстратор.
4. Дизайнер.
5. Верстальщик.
6. Веб-мастер.
7. Программист.
Разработка информационного
наполнения
• Краткость.
• Четкость формулировок.
• Удобочитаемость.
• Редакторская правка.
• Тестирование и отладка.
• Минимализация объема страниц.
• Главная страница – наиболее важная страница.
Специализированные
HTML-редакторы
Как правило используют технологию WYSIWYG (англ. What You
See Is What You Get – что видишь, то и получаешь).
К достоинствам относятся:
• ускорение и упрощение процесса разработки;
• автоматизация многих рутинных операций;
• позволяют осуществлять быстрое макетирование;
• могут использоваться начинающими.
Недостатки:
• не создают «чистого» кода (добавляют «фирменные» или
избыточные элементы);
• могут автоматически изменять открываемый документ;
• полностью не избавляют от знания HTML, созданные в них
документы как правило требуют ручной доводки.
Download