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

Главная Создать свой сайт и продвинуть его Создание сайтов Создать простой сайт своими руками с нуля (пример HTML)
2 ответ(ов) в теме
TheRumz
не в сети давно
На сайте с 14.06.2013
Участник
0
17:04

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

Форум

Документ.HTML

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

<!DOCTYPE HTML> // <!-- Обязательный элемент --><br><br><html> // <!-- Обязательный элемент --><br><br><head> // <!-- Обязательный элемент --><br><br><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> // <!-- Обязательный элемент --><br> <title>Создаем простой сайт - своими руками</title> // <!-- Заголовок --><br> <meta name="description" content="С нами Вы сможете сделать простой сайт -своими руками."> // <!-- Описание --><br> <meta name="keywords" content="Создаем сайт, Сайт."> // <!-- Ключевые слова --><br> <link href="../CSS/GL-P.css" rel="stylesheet" type="text/css"> // <!-- Привязываем CSS файл --><br><br></head> // <!-- Обязательный элемент --><br><br><body> // <!-- Обязательный элемент --><br><br><div id="GL"> // <!-- Главный DIV --><br><br> <div id="Shapka"> // <!-- DIV шапки --><br> <p>Шапка</p><br> </div> // <!-- DIV шапки --><br><br><div id="Menu-1"> // <!-- DIV меню 1 --><br> <p>Меню 1</p><br> <p>/</p><br> <p>/</p><br> <p>/</p><br> <p>/</p><br> </div> // <!-- DIV меню 1 --><br><br><div id="Center"> // <!-- DIV центра--><br> <h1>Заголовок</h1><br> <p>Новая строка</p><br> <p>перевод<br> <br>строки</p><br> <p><a href="http://www.line-site.ru/">Ссылка</a></p><br> <p><img src="../image/Fon/LB.png" width="80" height="80"></p><br> </div> // <!-- DIV центра --><br><br><div id="Menu-3"> // <!-- DIV меню 3 --><br> <p>Блок информации</p><br> <p>/</p><br> <p>/</p><br> <p>/</p><br> <p>/</p><br> </div> // <!-- DIV меню 3 --><br><br><div id="Podval"> // <!-- DIV подвала --><br> <p>Подвал</p><br> </div> // <!-- DIV подвала --><br><br></div> // <!-- Главный DIV --><br><br></body> // <!-- Обязательный элемент --><br><br></html> // <!-- Обязательный элемент -->

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

Документ.CSS

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

#GL {<br> margin-left: auto; // <!-- Центруем главный DIV --><br> margin-right: auto;// <!-- Центруем главный DIV --><br> height: 100%; // <!-- Размер DIV по вертикали --><br> width: 980px; // <!-- Размер DIV по горизонтали --><br> border: thin solid #CCC; // <!-- задаем цвет рамки Серый --><br> padding: 5px; // <!-- Отступы - внутри --><br> }<br><br>#Shapka {<br> height: 60px; // <!-- Размер DIV по вертикали --><br> width: 980px; // <!-- Размер DIV по горизонтали --><br> background-color: #999; // <!-- Цвет фона DIV --><br> }<br><br>#Menu-1 {<br> height: 200px; // <!-- Размер DIV по вертикали --><br> width: 180px; // <!-- Размер DIV по горизонтали --><br> float: left; // <!-- Прижимаем DIV к DIVу слева --><br> background-color: #999; // <!-- Цвет фона DIV --><br> margin-top: 10px; // <!-- Отступ - Сверху --><br> }<br><br>#Center {<br> float: left; // <!-- Прижимаем DIV к DIVу слева --><br> width: 560px; // <!-- Размер DIV по горизонтали --><br> margin-top: 10px; // <!-- Отступ - сверху --><br> margin-right: 10px; // <!-- Отступ - справа --><br> margin-left: 10px; // <!-- Отступ - слева--><br> }<br><br>#Menu-3 {<br> height: 200px; // <!-- Размер DIV по вертикали --><br> width: 220px; // <!-- Размер DIV по горизонтали --><br> float: left; // <!-- Прижимаем DIV к DIVу слева --><br> background-color: #999; // <!-- Цвет фона DIV --><br> margin-top: 10px; // <!-- Отступ - сверху --><br> }<br><br>#Podval {<br> clear: both; // <!-- Прижимаем DIV к низу --><br> height: 60px; // <!-- Размер DIV по вертикали --><br> width: 980px; // <!-- Размер DIV по горизонтали --><br> background-color: #999; // <!-- Цвет фона DIV --><br> }

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

Ссылка на первоисточник

Редакции сообщения
0
Stanislavovich
не в сети давно
На сайте с 19.12.2013
Участник
0
16:31

Ну что сказать тема хорошая ну есть но :- сайты на простом html это очень ну как сказать не удобно,нужен движок на php и база данных msql подключена должна быть ну а так для обучения и изучения азов сойдет автору +

Редакции сообщения
0

Ваше имя *

Ваш E-mail *

не публикуется

Текст сообщения *