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

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

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

Итак, откройте Блокнот (стандартный от windows). Сейчас Вам предстоит познакомиться с тегами, которые и составляют основу премудрости.

Теги – это заключенные в треугольные скобки английские слова. Они обрамляют содержание, будь то текст или картинка.

Заключающий тег отличается от начального присутствием значка “/”. В самом начале нам нужно обозначить начало и конец страницы тегами <html> </html>, а уже потом внутри них производить дальнейшее наполнение.

В первоначальном виде страница имеет вид:

<html>
<!-- Сам документ -->
</html>

Далее делим документ на “голову” и “тело” соответствующими тегами. В голове, которая, как и положено, находится поверх тела, содержится информация о html документе (его название, мета-теги). Ну а тело вмещает в себя весь контент. Вот, что мы получим:

<html>
<head>
<!-- Информация о HTML-документе -->
</head>

<body>
<!-- Содержание страницы -->
</body>
</html>

Теперь там, где у нас “Информация о HTML-документе”, вставляем название страницы, обрамив его тегами <title> </title>. Под названием нужно указать мета-тег, определяющий кодировку страницы. Выглядит он так: <meta http-equiv=”content-type” content=”text/html; charset=windows-1251″/>

Если Вы используете CSS, то его тоже нужно подключить (<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen”>)

После всех этих манипуляций под тегом <html> мы имеем следующую картинку нашей “головы”:

<head>
<title>Название сайта</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251"/>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
	</head>

Теперь можно переходить к телу. Разметим изображение прямо после тега <body>: <img src=”photo.jpg” align=”left”>. Здесь photo обозначает название Вашего изображения, а align – обтекание текста. В данном случае текст будет слева от картинки.

Чтобы добавить текст, используем теги <p> </p>, что означает абзацы. Между ними пишем текст.

Сохраните свой файл. По традиции ему дают имя index.html. Заполнив контентом страницу, Вы можете оформить ее с помощью стиля CSS. В новом файле пишем код:

body {
	background-color: #FFFFFF; /* Цвет фона */
	font-family: Arial, Sans-Serif; /* Тип шрифта */
	color: #333333; /* Цвет текста */
	font-size: 11px; /* Размер текста в пикселях */
}

Сохраните этот файл с разрешением .css. Теперь откройте первый файл в браузере и посмотрите, что получилось.

Данная инструкция скорее описывает процесс создания элементарной html-странички, чем полноценного сайта. Но без этих основ вы не сможете понять дальше принципы построения веб-ресурсов.

То, как сверстать html сайт и разместить его под доменным именем вряд ли уместиться в одну или даже две статьи. Но к счастью, в интернете существует масса профессионалов, которые размещают свои уроки, на которые можно подписаться и продолжить знакомство с языком html.

Это видео даст дополнительные сведения о том, как сделать простой сайт: