Самый простой сайт представляет собой текстовый документ, в котором контент оформлен соответствующим образом с помощью тегов 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, да ещё и какого-то фреймворка.