HTML Как создать сайт при помощи HTML + CSS

kaktus · 18 Мар 2013

В оформление я не горазд

Ну чтож начнем.

ЧАСТЬ 1.

Вам надо создать папку, в папке создайте папку с названием "images", далее файл index.html, и style.css.

Далее зайдем в наш index.html он пустой пропишем

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML , похожий на HTML.

Далее пропишем

Код:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">

Далее вставим тег

Код:

<head>

В нем можно будет сделать подключение CSS.

под <head> вставим теги

Код:

<title>название</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="favicon.ico">
</head>

В этих тегах идет название сайта, подключение CSS, так же подключение иконки.

Далее вставим тег

Код:

<body>

По сути это и есть наш сайт далее начнем писать сам шаблон. Разделите ваш шаблон на части. Я разделю так.

Код:

<table><tr><td>Меню</td></tr></table>
<table><tr><td>Середина</td></tr></table>
<table><tr><td>Нижняя строка</td></tr></table>

Далее вставим тег

Код:

</body>

ЧАСТЬ 2.

Сделаем лого пропишем перед таблицами(<table>),

Код:

<img src="images/вашелого.формат картинки">

если вы хотите сделать лого посередине используйте тег

Код:

<center>

выдет что-то такое

Код:

<center><img src="images/вашелого.формат картинки"></center>

Теперь начнем основной блок где будем писать новости и тд.

Где

Код:

<table><tr><td>Середина</td></tr></table>

Пропишем так

Код:

<table><tr><td><div class="centerblock"></div></td></tr></table>

Код:

<div class="centerblock">

- это нужно для вывода правила CSS

Зайдем в style.css и пропишем следующее

Код:

centerblock {
      height: длинна фонаpx ; 
	  width: ширина фонаpx ;
      background-image: url(images/картинка.формат картинки) ;
	  background-repeat: repeat-x ;
	  float: center ;
}

Когда мы это пропишем у нас появится наш блок. Мы можем там написать ну текст будет заходить за грани так что пропишем вот так.

Код:

<table><tr><td><div class="centerblock"><p align="center" style="color:цвет; font-size:размер текстаpx">текст</p>
</div></td></tr></table>

На этом урок я закончу. В след. уроке я вам расскажу как сделать меню и нижний блок.

Переход в группу "Пользователь"

HTML Как создать сайт при помощи HTML + CSS

kaktus

Эксперт