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

Каксоздать

сайт

Что необходимо

— Доменное имя

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

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



— Хостинг



— Хостинг

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

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

Source

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

Source


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

Source


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

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

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

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

— Не индексируется поисковыми системами

— Сайт долго грузится

— Некорректно работает на мобильных устройствах

— Не имеет распространенных систем управления

Почему?

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

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

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">

Вопросы?

United Design

uniteddesign.ru

http://uniteddesign.ru/

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

Technology

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