Сайт на html создать: Как создать сайт с нуля при помощи HTML

Leave a Comment / Html / By /

Как самостоятельно создать собственный сайт

После того как вы ознакомились с созданием простейшего одностраничного сайта перейдем к сайту посложнее , из пяти страниц.

Ввиду того,что мы будем создавать простой пятистраничный сайт мы рассмотрим создание сайта без CMS (без движка).Стоит заметить что для создания сайта применяются табличная или блочная верстка.В большинстве случаев для создания применяется и табличная и блочная верстка.Здесь мы будем рассматривать табличную верстку.

Во первых необходимо создать папку к примеру в «Мои документы» и назвать «htdocs».В эту папку вы должны помещать все документы связанные с созданием сайта.


<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>


Для описания страницы применяются теги.

В основном они парные,то есть один открывает тег например <html>,а другой закрывает </html>.
Напишем необходимый минимальный набор тегов.Для этого можно использовать любой текстовый редактор,сохраняющий документ в формате HTML,например «Блокнот» — стандартный редактор в Windows.При сохранении в этом редакторе в строке «тип файла» выберите — Все файлы,а в строке «имя файла» — ваше имя файла и формат-html.Примерно вот так — «site.html».

Пишем код таблицы между тегами <body> и </body>.

<html>
<head>
<title> </title>
</head>
<body>
<table Border=0>
<tr>
<td></td> <td></td> <td></td>
<tr>
<td></td> <td></td> <td></td>
<tr>
<td></td> <td></td> <td></td>
</tr>
</table>
</body>
</html>

Далее приступим к созданию таблицы. Составим таблицу, что бы разместить наши данные в тех частях страницы в которых мы хотим их видеть.Таблицы для того и служат чтобы представлять данные по всей странице.Сделаем таблицу из 3 строк <tr> и 3 столбцов <td> всего 9 ячеек.

Пишем код таблицы(здесь и далее вставляемые элементы будут выделены красным цветом.)

Контент сайта пишется в ячейке между тегами <td> и </td>


Так таблица будет выглядеть :

<html> <head>
<title> </title> </head>
<body>
<table Border=0>
<tr>
<td>1 ячейка</td> <td>2 ячейка</td> <td>3 ячейка</td>
<tr>
<td>4 ячейка</td> <td>5 ячейка</td> <td>6 ячейка</td>
<tr>
<td>7 ячейка</td> <td>8 ячейка</td> <td>9 ячейка</td>
</tr>
</table>
</body> </html>
<html>
<head>
<title> </title>
</head>
<body>
<table Border=0>

<tr bgcolor=»#B3FDB2″>
<td></td>
<td> </td>
<td></td>
</tr>

<tr bgcolor=»#D0D2FF»>
<tdheight=»8%»></td>
<td></td>
<tdheight=»8%»></td>
</tr>

<tr bgcolor=»#FFF0F0″>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

Теперь приступим к точной разметке таблицы введя теги width и height в тег <table> и <td> таблицы.


Ширину width и высоту height таблицы можно задавать в пикселях или в процентах от размера монитора.

В пикселях можно более точно установить размеры таблицы,но сейчас мы будем указывать в процентах,так как в дальнейшем не придется дополнительно описывать процедуру адаптации сайта под различное разрешение экрана у посещающих ваш сайт пользователей.

В теге <table> установим высоту и ширину=100%. В теге <td> указываем проценты от размера таблицы а также желательно сразу указать цвет строк bgcolor,чтобы таблица была видна.


Посмотрите страницу с таблицей в малом окне.Щелкните по фото ниже.


<html>
<head>
<title> </title>
</head>
<body>
<table Border=0>
<tr bgcolor=»#B3FDB2″>
<td></td>
<td> <h3>Мой сайт о дизайне</h3></td>
<td></td>
</tr>
<tr bgcolor=»#D0D2FF»> <tdheight=»8%»></td>
<td></td>
<tdheight=»8%»></td>
</tr>
<tr bgcolor=»#FFF0F0″><td></td>
<td> <h4>Мы занимаемся дизайном дома и приусадебного участка.
Мы можем спроектировать ландшафты загородного дома.</h4>
<</td>
<td></td>
</tr>
</table> </body>
</html>

Далее будем наполнять содержимым наш сайт

Напишем во 2 ячейке название страницы,сразу задайте размер шрифта <h3>Мой сайт о дизайне </h3>,
в 5 ячейке <h4> Мы занимаемся дизайном дома и приусадебного участка.

Мы можем спроектировать ландшафты загородного дома.</h4>


А теперь добавим в наш сайт картинки дизайна.Чтобы вставить картинку или фото на сайт применяется тег <img src=»имя.jpg»>.Когда будете добавлять свои картинки на сайт,замените имя картинки на своё и поместите их в папку сайта.


<html>
<head>
<title> </title>
</head>
<body>
<table>
<tr bgcolor=»#B3FDB2″>
<td><img src=»landshaft1. jpg»></td>
<td> Мой сайт о дизайне</td>
<td><img src=»landshaft2.jpg»></td>
</tr>
<tr bgcolor=»#D0D2FF»> <tdheight=»8%»></td>
<td></td>
<tdheight=»8%»></td>
</tr>
<tr bgcolor=»#FFF0F0″><td>></td>
<td>Мы занимаемся дизайном дома и приусадебного участка.
Мы можем спроектировать ландшафты загородного дома.</td>
<td></td>
</tr>
</table> </body>
</html>

Посмотрите страницу в малом окне.Щелкните по фото ниже.

<html>
<head>
<title>Создание сайта самостоятельно </title>
</head>
  <body>
<table>
<tr bgcolor=»#B3FDB2″>
<td><img src=»landshaft1.
jpg»></td>
<td> Мой сайт о дизайне</td>
<td><img src=»landshaft2.jpg»></td></tr>

<tr bgcolor=»#D0D2FF»>
<tdheight=»8%»><a href=»site5.html»> Главная</a></td>
<td><a href=»site5.html»> Садовый дизайн</a></td>
<tdheight=»8%»><a href=»site5.html»>Дизайн интерьера</a></td></tr>

<tr bgcolor=»#FFF0F0″>
<td> </td>
<td>Мы занимаемся дизайном дома и приусадебного участка. Мы можем спроектировать ландшафты загородного дома.</td>
<td> <a href=»site5.html»>Дизайн для кухни</a></td>
</tr>
</table>
</body>
</html>

Приступим к дальнейшей вставке содержимого в сайт.Придумайте название сайта и впишите его в заголовок между тегами

<title> и </title>

Заголовок сайта будет невидим в рабочей области и нужен для поисковых систем Интернета.

Седьмую ячейку отдадим под меню. Заполните ячейки содержимым сайта к примеру ,в 4 ячейке- Главная, в 5 ячейке-Садовый дизайн, в 6 ячейке-Внутренний дизайн, в 9 ячейке-Кухонный дизайн.

На 4,5,6,9 ячейку тоже создаются вторые страницы со ссылками на них

Посмотрите первую страницу в малом окне.Щелкните по фото ниже.

Смотрим первую страницу сайта на полном экране.
Осталось немного,увеличить шрифт и расположить его в середине.
В Мой сайт о дизайне добавьте размер шрифта <h4> и измените шрифт основного текста значением <h3></h3> а также разместите эти надписи по центру <center></center>

<html>
<head>
<title>Создание сайта самостоятельно </title>
</head>
< body> <table>

<tr bgcolor=»#B3FDB2″>
<td><img src=»landshaft1. jpg»></td>
<td><center> <h4> Мой сайт о дизайне</h4></center></td>
<td><img src=»landshaft2.jpg»></td>
</tr>

<tr bgcolor=»#D0D2FF»> <tdheight=»8%»><center><a href=»site1-2.html»> Главная</a></center></td>
<td><center><a href=»site5.html»>Садовый дизайн</a></center></td>
<tdheight=»8%»><center><a href=»site5.html»>Дизайн интерьера</a></center></td>
</tr>

<tr bgcolor=»#FFF0F0″><td> </td><td><center><h3>Мы занимаемся дизайном дома и приусадебного участка.
Мы можем спроектировать ландшафты загородного дома.</h3></center></td>

<td> <center><a href=»site5.html»>Дизайн для кухни</center></a></center></td>
</tr>
</table>
</body>
</html>

Посмотрите первую(главную) страницу


Вот теперь вы можете посмотреть первую(главную) страницу

Создайте вторую страницу сайта. Скопируйте минимальный набор тегов которые мы писали в самом начале создания сайта и вставьте в текстовый редактор. Сохраните его под именем site2.html в папке для файлов сайта,которую вы создали в самом начале урока.Это и будет вторая страница сайта на которую мы будем делать ссылку из первой(главной) страницы.Откройте site2.html в текстовом редакторе и напишите <h4> Я покажу вам свои фотографии </h4> а также задайте цвет <font color=»#FF0000″> </font> и размер <h3></h3>

<html>
<head>
<title> </title>
</head>
  <body font color=»#FF0000″><h3>Я покажу вам свои фотографии</h3></font>
</body>
</html>

Вставьте на страницу фотографии

<img src=»land1.jpg»>
<img src=»land2.jpg»>
Вы можете вставить свои фото,только укажите их размер в пикселях: <img src=»имя. jpg»>, а также поместите эти фото в папку с сайтом.

Это полный код вашей второй страницы
<html>
<head>
<title> </title>
</head>
  <body><h3>Я покажу вам свои фотографии</h3>
<img src=»land1.jpg»>
<img src=»land2.jpg»>
</body>
</html>

Посмотрите вторую страницу

Смотрим вторую страницу в большом окне.

Сделаем ссылку на эту страницу в первой(главной) странице.
Ссылки создаются тегом <a href=»имя страницы.html»>Ссылка</a>
Откройте первую страницу в текстовом редакторе и напишите в 7 ячейке таблицы ссылку <a href=»site2.html»>Мои фото</a>

Посмотрите полный код вашей главной страницы

<html>
<head>
<title> </title>
</head>
<body>
<table>
<tr bgcolor=»#B3FDB2″>
<td ><img src=»landshaft1. jpg»></td>
<td><center><h4>Мой сайт о дизайне</h4></center></td>
<td><img src=»landshaft2.jpg»></td>
</tr>

<tr bgcolor=»#D0D2FF»>
<tdheight=»8%»><center><a href=»site1-2.html» >Главная</a></center></td>
<td><center><a href=»site5.html» >Садовый дизайн</a> </center></td>
<tdwidth=»20%»height=»8%»><center><a href=»site5.html» >Дизайн интерьера</a></center>
</td> </tr>

<tr bgcolor=»#FFF0F0″>
<td> <a href=»site2.html» >Мои фото<a></td>
<td><center><h3>Мы занимаемся дизайном дома и приусадебного участка.
Мы можем спроектировать ландшафты загородного дома.</h3></center></td>

<td><a href=»site5.html»>Дизайн для кухни</a></center>
</td>
</tr>
</table>
</body>
</html>

Для страниц со ссылок:
Садовый дизайн (site5. html)
Дизайн интерьера (site7.html)
Дизайн для кухни (site8.html)
создаются отдельные страницы.

Вот мы и сделали сайт и вы его можете посмотреть здесь

В папке htdocs которую вы создали в начале урока должны быть файлы
tab1.html
tab3.html
landshaft1.jpg
landshaft2.jpg
site1-1.html
site1-2.html
site1-3.html
site2.html
site5.html
site7.html
site8.html
land1.jpg
land2.jpg

Важные советы

Когда будете делать свой сайт, главную или первую страницу сайта (у нас она называется site1-3.html) всегда сохраняйте под именем index.html При загрузке с сервера она будет загружаться первой, и возьмите себе за правило сразу ее так и называть, в дальнейшем вы не будете путаться при создании ссылок.

Папка, в которой будете хранить файлы для сайта должна называться htdocs. Имена папок и файлов сохраняйте с английскими буквами. Создавая сайт в одном браузере обязательно просмотрите его в других,потому что сайт созданный к примеру в OPERA может совсем по другому выглядеть к примеру в INTERNET EXPLORER

Мы рассмотрели создание самого простого сайта.Я надеюсь что вы поняли основы создания WEB-страниц.Для того что бы сделать хороший сайт,который пользовался бы успехом в Интернете, надо знать намного больше .К примеру вам надо изучить языки JavaScript,PHP,MySQL и другие ,каскадные таблицы CSS,в общем все это придет вам со временем.

Удачи!

Как создать сайт бесплатно, с нуля и самостоятельно: обзор трех конструкторов

Отправить статью или инфоповод

9 ноября 2021