Как устроен простейший сайт

11.10.2012

Если вам интересен этот вопрос, значит вы только начинаете изучать сайтостроение. Для начала достаточно понять, что сайт состоит в основном из набора команд и функций, которые преобразуют весь этот алгоритм в единое визуальное оформление. 

 Из чего состоит сайт?

Как правило, сайт состоит из гиперссылок, которые объединяют страницы с информацией. В интернете сайту закрепляется доменное имя, например ideashunter.ru, если написать в адресной строке это имя, то броузер автоматом перенаправит на мой сервер, а нажимая на ссылочки, будет отдана информация та или другая информация. В моем случае это обработка базы данных, но для простых примеров сайтов можно попробовать создать несколько страниц и объединить их гиперссылками, получится мини-сайт визитка или просто небольшой сайтик из нескольких страниц.
Т.е. чтобы создать свой сайт, надо научиться делать информационные странички и связывать их между собой. Картинки для сайта хранятся в отдельных файлах, которые подключаются к информационной странице.
Основные броузеры для просмотра интернет-страниц (Internet Explorer, Firefox, Opera, Google Chrome или Safari) К броузеру Opera мне не нравится, броузер не очень корректно отображает сайты, а то и вообще отказывается работать.
Итак для новой интернет-страницы требуется создать статический файл HTML (HyperText Markup Language) — в интернете главная страница сайта называется index с расширением .html, бывают и другие расширения, но для статической страницы достаточно .html разметки. Именно HTML разметка говорит броузеру, где должны находится картинки, текст и другие элементы сайта.
Если говорить о программирвании, то язык HTML очень прост, по сути, это самый простой язык программирования в мире, его можно выучить за один присест, что на данном этапе мы и сделаем.

Как сделать свой первый сайт?

И так ваш первый сайт будет начинаться с создания файла index.html. Впишите в этот документ несколько строк HTML разметки.

 

<html>

 

<head>

 

<title> Мой первый сайт</title>

 

</head>

 

<body>

 

<center> Привет интернет!</center>

 

</body>

</html>

 

Сохраните этот документ index.html, теперь это будет главная страница. Чтобы проверить, что мы сделали, откройте броузер, например Internet Explorer и во вкладке меню Файл-Открыть (Ctrl+O) откройте сохраненный файл index.html Вот так будет выглядеть простейший сайт:

Привет интернет!

Их этого примера понятно, что HTML верстка состоит из основного тега <HTML><HTML> внутри этого тега размешаются еще два тега. 1.Тег  <HEAD</HEAD> находится сверху, внутрь которого помещаются все невидимые параметры страницы. 2. Внутри тега <BODY></BODY> находится вся видимая часть страницы. 

 






Конечно, такие сайты нафиг никому не нужны, и чтобы создать действительно профессиональный сайт, надо много практики, иногда годы надо потратить, чтобы научиться делать по настоящему качественные сайты. Но с этой простой интернет-странички надо начинать.
Чтобы в страничку вставить картинку, надо указать специальный тег с параметрами картинки, например


<html>


<head>


<title> Мой первый сайт</title>


</head>


<body>


<center> <img src=”/img/kartinka.jpg” width=”300” height=”200”></center>


</body>

 

</html>




Получится вроде этого, уже интересней выглядит. Ну а после можно создать пару гиперссылок, или анимацию с программными скриптами для лучшей интерактивности и взаимодействие с пользователем. Для сайта визитки, достаточно информации и картинок, еще могу показать как делать гиперссылку на другую страницу, создайте HTML файл с другим названием, например page.html с содержимым

<html>

 

<head>


<title>Картинка</title>


</head>


<body>


<center> <img src=”/img/kartinka.jpg” width=”300” height=”200”></center>


</body>

 

</html>



Сохраните фал, потом создайте файл index.html с содержимым:


<html>


<head>


<title>Главная страница</title>


</head>


<body>


<center> <a href=”page.html”>Открыть страницу с картинкой</a> </center>


</body>

 

</html>




В итоге получится на главной страничке гиперссылка, ссылающаяся на другую страницу с картинкой, Вот с этого и начинается сайтостроение ;)

 

 



Оставить комментарий...

Добавить комментарий


Защитный код
Обновить