Создание сайта на JavaScript с нуля

Самый простой сайт представляет собой текстовый документ, в котором контент оформлен соответствующим образом с помощью тегов HTML. К примеру, если под сайтом мы понимаем страницу, содержащую всего одно слово «Hello!», то оно должно находиться между тегами <html><body>…</body></html>, там где три точки. Но таких простых задач на практике не встречается. Слово, даже если оно одно, нам захочется написать по-русски, а уже это потребует использования метатегов с кодировкой символов. Появится и желание донести что-то до посетителей, выделить каким-то образом, придать странице уникальное лицо. А это означает, что потребуется использовать стили. Самый простой и естественный способ осуществления этого — создание отдельного файла с расширением .CSS. В нём будут находиться указания на отдельные теги и свойства оформления блоков HTML. Если и этого покажется мало, захочется умения сайта динамически реагировать на действия пользователя или придания ему какой-то интерактивности, то придётся заняться программированием. Чаще всего для этой цели используется скриптовый язык JavaScript.

Определения упомянутых понятий

HTML — язык гипертекстовой разметки. Языком программирования не является, используется для вёрстки страниц. Состоит из тегов, указывающих на отдельные блоки контента, создающих ссылки, линейки, списки, заголовки и всё то, что находится на страницах.

CSS — каскадные таблицы стилей, которые представляют собой описание свойств блоков, заданных HTML. К ним относится всё то, что связано с визуальным представлением — ширина, высота, стиль начертания букв, цвет и т. п.

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

Создание сайта с нуля на HTML, CSS и JavaScript – это базовые навыки, которыми должен обладать каждый вебмастер.

Применение для создания самого простого сайта

Создадим любой каталог и поместим в него файл index.html со следующим содержанием:

 

<html>

<head>

<title>Заголовок нашей страницы</title>

<meta charset=»utf-8″>

<meta name=»description» content=»Наша первая страница»>

</head>

<body>

Привет! Это наш самый простой сайт.

</body>

</html>

Все используемые теги HTML парные, а косая черта обозначает закрытие тега. Тег <head> помещается внутрь тега <html>. Он имеет служебное значение. В нём находится тег <title>, который определяет заголовок страницы в браузере. Две тега meta задают кодировку символов и описание страницы для поисковых систем. Ниже находится тег <body>, отмечающий начало и завершения контента страницы.

Добавим файл со стилями

Внутри нашего каталога создадим один подкаталог и назовём его CSS. В него разместим файл main.css. В нём будут находиться стили оформления:

body, html {

margin: 0px;

padding: 0px;

}

Свойство margin убирает все отступы для сторон элементов снаружи, а padding внутри. Но пока нам не так уж и важно содержимое. Эти строчки добавлены просто для того, чтобы файл не был пустым. Они позволят нам познакомиться с синтаксисом CSS и понять его роль.

Чтобы стили стали актуальными для нашего сайта нужно привязать их в файле index.html. Для этого внутри секции <head> добавим одну строку <link href=’css/main.css’ rel=’stylesheet’ type=’text/css’>.

Сделаем пример более полноценным

В нашем примере основной контент никак не размечен, поэтому при открытии файла браузером он будет находиться в верхнем левом углу. Чтобы придать тексту какую-то разметку поместим его внутрь тега <div>, с указанием класса class=»mytext». Код должен получить вот такой вид <div class=»mytext»>Привет! Это наш самый простой сайт.</div>.

Зачем нам класс? Его мы сможем описать в файле со стилями. Для этого поместим в нём соответствующие коды:

.mytext {

width: 100%;

height: 360px;

background: gray;

font-size: 25px;

padding-top: 220px;

text-align: center;

}

Слово с точкой в начале .mytext указывает на класс, заданный для блока с контентом. Поэтому всё описание свойств стилей относится именно к нему. Рассмотрим каждый параметр:

  • width — ширина в процентах от ширины экрана;
  • height — высота блока;
  • background — цветовой фон блока, мы сделали его серым;
  • font-size — размер шрифта;
  • padding-top — отступ от верхнего края блока внутрь;
  • text-align — выравнивание текста относительно краёв блока.

Теперь текст нашего сайта оказался в центре, а сам блок приобрёл фон.

Используем JavaScript и добавим динамики

Наша задача — создать на странице любое динамическое изменение чего либо. Попробуем подсчитать, сколько времени осталось до нового года и используем для этого JavaScript. Конечно, сама сущность программирования на этом языке от этого понятной стать не может. Но мы установим принцип оживления страниц и узнаем, как это делается не практике.

Вклеим до тега <body> вот такой код:

<script type=»text/javascript»>

timeend= new Date();

timeend= new Date(timeend.getYear()>1900?(timeend.getYear()+1):(timeend.getYear()+1901),0,1);

function time() {

today = new Date();

today = Math.floor((timeend-today)/1000);

tsec=today%60; today=Math.floor(today/60); if(tsec<10)tsec=’0’+tsec;

tmin=today%60; today=Math.floor(today/60); if(tmin<10)tmin=’0’+tmin;

thour=today%24; today=Math.floor(today/24);

timestr=today +» дней «+ thour+» часов «+tmin+» минут «+tsec+» секунд»;

document.getElementById(‘t’).innerHTML=timestr;

window.setTimeout(«time()»,1000);

}

</script>

А в тег <body> нужно добавить параметр <body onload=»time()»>.

В том месте страницы, где мы хотим увидеть динамический отсчёт времени, которое осталось до нового года, вставим:

<h1>Обратный отсчет времени</h1>

<p>До нового года осталось <span id=»t» style=»font-size:20px»></span></p>.

Таким образом нам удалось получить пример сайта, представляющий собой результат использования HTML, CSS и  JavaScript. Всё то, что находится между тегами <script type=»text/javascript»> и </script> это код, написанный на языке JavaScript. На страницу результат работы программы попал благодаря строке document.getElementById(‘t’).innerHTML=timestr. Параметр ‘t’ в ней выполняет роль указателя на id=»t» универсального тега <span>.

Создание сайта на JavaScript с нуля целиком потребовало бы использования дополнительных средств, к примеру, платформы Node.js, да ещё и какого-то фреймворка.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Заполните поле
Заполните поле
Пожалуйста, введите корректный адрес email.