Здравствуйте, Гость ( Вход | Регистрация )

Правила | Поиск | Помощь | Участники | Репутация


  ОтветитьНовая темаНовый опрос
Создать простой сайт своими руками с нуля (пример HTML), Создать простой сайт своими руками с нуля (пример HTML)
« Предыдущая тема | Следующая тема » Версия для печати
TheRumz
18 Oct 2013, 13:41  


Сейчас вне форума
Группа: Свой человек
Сообщений: 32
Репутация: нет
Регистрация: 12 Jun 13
Живет: Москва

Создать простой сайт своими руками с нуля (пример HTML)

Пример такого сайта

Документ.HTML

Создаем файл с расширением .HTML у нас он называется site-primer.html

Код:
<!DOCTYPE HTML> // <!-- Обязательный элемент -->

<html> // <!-- Обязательный элемент -->

<head> // <!-- Обязательный элемент -->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> // <!-- Обязательный элемент -->
<title>Создаем простой сайт — своими руками</title> // <!-- Заголовок -->
<meta name="description" content="С нами Вы сможете сделать простой сайт -своими руками."> // <!-- Описание -->
<meta name="keywords" content="Создаем сайт, Сайт."> // <!-- Ключевые слова -->
<link href="../CSS/GL-P.css" rel="stylesheet" type="text/css"> // <!-- Привязываем CSS файл -->

</head> // <!-- Обязательный элемент -->

<body> // <!-- Обязательный элемент -->

<div id="GL"> // <!-- Главный DIV -->

<div id="Shapka"> // <!-- DIV шапки -->
<p>Шапка</p>
</div> // <!-- DIV шапки -->

<div id="Menu-1"> // <!-- DIV меню 1 -->
<p>Меню 1</p>
<p>/</p>
<p>/</p>
<p>/</p>
<p>/</p>
</div> // <!-- DIV меню 1 -->

<div id="Center"> // <!-- DIV центра-->
<h1>Заголовок</h1>
<p>Новая строка</p>
<p>перевод
<br>строки</p>
<p><a href="http://www.line-site.ru/">Ссылка</a></p>
<p><img src="../image/Fon/LB.png" width="80" height="80"></p>
</div> // <!-- DIV центра -->

<div id="Menu-3"> // <!-- DIV меню 3 -->
<p>Блок информации</p>
<p>/</p>
<p>/</p>
<p>/</p>
<p>/</p>
</div> // <!-- DIV меню 3 -->

<div id="Podval"> // <!-- DIV подвала -->
<p>Подвал</p>
</div> // <!-- DIV подвала -->

</div> // <!-- Главный DIV -->

</body> // <!-- Обязательный элемент -->

</html> // <!-- Обязательный элемент -->


<div id="GL"> — id="GL" привязываем к элементы CSS стиль.

Документ.CSS

Создаем файл с расширением .CSS у нас он называется GL-P.css

Код:
#GL {
margin-left: auto; // <!-- Центруем главный DIV -->
margin-right: auto;// <!-- Центруем главный DIV -->
height: 100%; // <!-- Размер DIV по вертикали -->
width: 980px; // <!-- Размер DIV по горизонтали -->
border: thin solid #CCC; // <!-- задаем цвет рамки Серый -->
padding: 5px; // <!-- Отступы — внутри -->
}

#Shapka {
height: 60px; // <!-- Размер DIV по вертикали -->
width: 980px; // <!-- Размер DIV по горизонтали -->
background-color: #999; // <!-- Цвет фона DIV -->
}

#Menu-1 {
height: 200px; // <!-- Размер DIV по вертикали -->
width: 180px; // <!-- Размер DIV по горизонтали -->
float: left; // <!-- Прижимаем DIV к DIVу слева -->
background-color: #999; // <!-- Цвет фона DIV -->
margin-top: 10px; // <!-- Отступ — Сверху -->
}

#Center {
float: left; // <!-- Прижимаем DIV к DIVу слева -->
width: 560px; // <!-- Размер DIV по горизонтали -->
margin-top: 10px; // <!-- Отступ — сверху -->
margin-right: 10px; // <!-- Отступ — справа -->
margin-left: 10px; // <!-- Отступ — слева-->
}

#Menu-3 {
height: 200px; // <!-- Размер DIV по вертикали -->
width: 220px; // <!-- Размер DIV по горизонтали -->
float: left; // <!-- Прижимаем DIV к DIVу слева -->
background-color: #999; // <!-- Цвет фона DIV -->
margin-top: 10px; // <!-- Отступ — сверху -->
}

#Podval {
clear: both; // <!-- Прижимаем DIV к низу -->
height: 60px; // <!-- Размер DIV по вертикали -->
width: 980px; // <!-- Размер DIV по горизонтали -->
background-color: #999; // <!-- Цвет фона DIV -->
}


#GL, #Shapka, #Menu-1, #Center, #Menu-3, #Podval — случайные названия, # — обязательно.

Ссылка на первоисточник
 
 
Enspire
28 Feb 2014, 12:13  


Сейчас вне форума
Группа: Свой человек
Сообщений: 55
Репутация: нет
Регистрация: 12 Oct 11


Да, это азы сайтостроения. Но если нет времени и желания со всем этим разбираться, то всегда можно воспользоваться конструкторами сайтов, которые даются при заказе хостинга. Хотя надо признать то, что хотя бы начальные знания html и css присутствовать должны.
 
 
jeys
9 Jun 2015, 15:25  


Сейчас вне форума
Группа: Свой человек
Сообщений: 27
Репутация: нет
Регистрация: 18 Feb 15


отлично написано :D
 
 
jouns
30 Jun 2015, 17:16  


Сейчас вне форума
Группа: Свой человек
Сообщений: 23
Репутация: нет
Регистрация: 26 Dec 13
Живет: Москва

Я какое то время тоже учился верстать. Пытался разбираться с CMS, хотел создать интернет-магазин. Через несколько месяцев прекратил, решил обратиться за помощью, и лучше уже тратить энергию на развитие магазина. Обращался в alp group http://www.alp.ru/ они потом и небольшую рекламу мне сделали. Весь процесс налажен, очень доволен ребятами
 
 
Таточка
26 Sep 2015, 14:42  


Сейчас вне форума
Группа: Новичок
Сообщений: 6
Репутация: нет
Регистрация: 26 Sep 15


При нажатии на ссылку выдается такая ошибка:
Not Found

The requested URL /go.php was not found on this server.
 
 
4 ответов с 18 Oct 2013, 13:41 Версия для печати

<< Назад в Верстка и дизайн
ОтветитьНовая темаНовый опрос