Как создать сайт
DESCRIPTION
Коротко о технологии и методах создания сайтовTRANSCRIPT
Каксоздать
сайт
Что необходимо
— Доменное имя
name.ru — домен второго уровня
name.net.ru — домен третьего уровня
Что необходимо
— Доменное имя
— Хостинг
Что необходимо
— Доменное имя
— Хостинг
— Доступ к серверу через ftp(желательно)
Source — исходный код
Source
HTMLРазметка информации на странице
Source
HTMLРазметка информации на странице
CSSТаблица стилей оформления
Source
HTMLРазметка информации на странице
CSSТаблица стилей оформления
Java ScriptПрограммирование действий на странице
Flash-технология
Сегодня используется в основном для баннеров
— Не индексируется поисковыми системами
— Сайт долго грузится
— Некорректно работает на мобильных устройствах
— Не имеет распространенных систем управления
Почему?
Flash-технология
Сегодня используется в основном для баннеров
xHTML
xHTML
HTML — язык гипертекстовой разметки
xHTML — более структурированная версия
Теги
<html> </html>
<br />
Метки для оформления
открывающий тег закрывающий тег
тег без содержания
Примеры использования
<b>Полужирный текст</b>
Полужирный текст
Примеры использования
<h1>Это заголовок</h1><h2>Это подзаголовок</h2>
Это заголовокЭто подзаголовок
Создать сайт<html>
<head> </head>
<body> </body>
</html>
— сообщает, что документ на языке HTML
служебная информация о документе
содержимое документа
<head>
— Информация о документе
— Не выводится на странице
<head>
— Информация о документе
— Не выводится на странице
<title>Заголовок страницы</title>
<title>
Информация, указанная в <title>, выводится в результатах поиска в поисковых системах
<body>
— Содержит всю информацию, выводимую на странице сайта
<p>Стандартный параграф</p>
<html>
<head> <title>Очень простой сайт</title> </head> <body> <p>Содержимое страницы</p> </body> </html>
Программы
Программное обеспечение: блокнот, Dreamviewer
Расширение файлов: *.htm, *.html
Еще больше тегов
Уже известные: <html> </html><title> </title>
<body> </body><b> </b><p> </p>
<br />
<i> </i>
<small> </small>
<hr />
<ul> </ul>
<ol> </ol>
<li> </li>
— курсивное начертание
— горизонтальная черта
— ненумерованный список
— нумерованный список
— пункты списка
— уменьшенный шрифт
Еще больше тегов
Пример использования <i>Курсив</i> <br /> <small>Уменьшенный шрифт</small> <br />
<hr /> Горизонтальная линия <ul> <li>Элемент списка</li> <li>Элемент списка</li> </ul> <ol> <li>Элемент списка</li> <li>Элемент списка</li> </ol>
Атрибуты
Атрибут записывается внутри тега для указания различных свойств объекта
<h2 style="color:#ff0000;">Заголовок</h2>
Атрибут style позволяет настраиватьотображение сайта
Атрибуты
<h2 style="color:#ff0000;">Заголовок</h2>
Ссылки
Ссылка также размечается при помощи тега
с одним обязательным для работы атрибутом
Ссылки
Ссылка также размечается при помощи тега
с одним обязательным для работы атрибутом
<a href="http://www.google.ru/">Google</a>
Тег Атрибут Адрес Текст ссылки
Ссылки
Ссылка также размечается при помощи тега
с одним обязательным для работы атрибутом
Изображения
Тег изображения чем-то похож на тег ссылки
Изображения
Тег изображения чем-то похож на тег ссылки
<img src="mersedes-benz.jpg" alt="" />
Тег Атрибут Адрес и имяизображения
Описаниеизображения
Изображения
Таблицы
Таблицы используются для... построения таблиц
Таблицы
Таблицы используются для... построения таблиц
Раньше использовалась так называемая «табличная верстка». Весь сайт представлял собой
одну таблицу
Сейчас используется блочная верстка
<table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr></table>
Таблицы
<table> — тег, содержащий таблицу
<tr> — ряд
<td> — ячейка
Таблицы
Атрибуты таблицы
<table border="1">
<table width="30%">
<table align="right">
<td valign="top">
— делает границы толщиной в 1 пиксель
— указывает ширину таблицы
— указывает ориентирование текста по горизонтали
— указывает ориентирование текста по вертикали, работает только для ячеек
CSS
Cascading Style Sheets — каскадные таблицы стилей
Стили CSS добавляются к тегам при помощи атрибута style
<p style="font-size:20px;">Это напечатано размером 20</p>
<p style="font-family:courier;">Это напечатано шрифтом Courier</p>
<p style="font-size:20px; font-family:courier;">Courier размером 20</p>
CSS
CSS
Правила можно указывать для всей страницы <head> <title>My first CSS page</title> <style type="text/css"> h1 {font-size: 30px; font-family: arial} h2 {font-size: 15px; font-family: courier} p {font-size: 8px; font-family: times new roman} </style> </head>
Определение типа документа
Для страниц нужно указывать тип документа, чтобы браузер правильно распознавал язык HTML,
поскольку разновидностей языка очень много.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en">