Как создать сайт

Как
создать
сайт

Что необходимо
— Доменное имя

name.ru — домен второго уровня

name.net.ru — домен третьего уровня


— Хостинг


— Хостинг

— Доступ к серверу через ftp
(желательно)

Source — исходный код

Source
HTML
Разметка информации на странице

Source
HTML

CSS
Таблица стилей оформления

Source
HTML

CSS
Таблица стилей оформления

Java Script
Программирование действий на странице

Flash-технология

Сегодня используется в основном для баннеров

Flash-технология

Сегодня используется в основном для баннеров

Почему?
— Не индексируется поисковыми системами
— Сайт долго грузится
— Некорректно работает на мобильных устройствах
— Не имеет распространенных систем управления

xHTML
HTML — язык гипертекстовой разметки

xHTML — более структурированная
версия

Теги
Метки для оформления
<html> </html>
открывающий тег закрывающий тег

<br />
тег без содержания

Примеры использования

<b>Полужирный текст</b>

Полужирный текст

Примеры использования
<h1>Это заголовок</h1>
<h2>Это подзаголовок</h2>

Это заголовок
Это подзаголовок

Создать сайт
<html> — сообщает, что документ на языке HTML

<head>
служебная информация о документе
</head>

<body>
содержимое документа
</body>

</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>
</ul>
<ol>
</ol>

Атрибуты
Атрибут записывается внутри тега для указания
различных свойств объекта

<h2 style="color:#ﬀ0000;">Заголовок</h2>

Атрибут style позволяет настраивать
отображение сайта

Атрибуты
<h2 style="color:#ﬀ0000;">Заголовок</h2>

Ссылки
Ссылка также размечается при помощи тега
с одним обязательным для работы атрибутом

Ссылки
Ссылка также размечается при помощи тега
с одним обязательным для работы атрибутом

<a href="http://www.google.ru/">Google</a>
Тег Атрибут Адрес Текст ссылки

Изображения
Тег изображения чем-то похож на тег ссылки

Изображения
Тег изображения чем-то похож на тег ссылки

<img src="mersedes-benz.jpg" alt="" />
Тег Атрибут Адрес и имя Описание
изображения изображения

Таблицы
Таблицы используются для... построения таблиц

Таблицы
Таблицы используются для... построения таблиц

Раньше использовалась так называемая
«табличная верстка». Весь сайт представлял собой
одну таблицу
Сейчас используется блочная верстка

Таблицы
<table> <table> — тег, содержащий
<tr> таблицу
<td>Cell 1</td>
<tr> — ряд
<td>Cell 2</td>
</tr> <td> — ячейка
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>

Атрибуты таблицы
<table border="1"> — делает границы толщиной в 1 пиксель

<table width="30%"> — указывает ширину таблицы

<table align="right"> — указывает ориентирование текста по
горизонтали

<td valign="top"> — указывает ориентирование текста по
вертикали, работает только для ячеек

CSS
Cascading Style Sheets — каскадные таблицы стилей

Стили CSS добавляются к тегам при помощи
атрибута style

CSS
<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
Правила можно указывать для всей страницы
<head>
<title>My ﬁrst 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">

Вопросы?

United Design

uniteddesign.ru

Как создать сайт

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Как создать сайт

Similar to Как создать сайт (20)

Как создать сайт