Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях
Рубрика:Основы HTML

Как написать сайт на html: введение в создание одностраничника для новичков

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

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

А смогу ли я заниматься веб-разработкой?

Очень многие люди в начале своего пути изучения языков программирования, библиотек, паттернов и других технологий задают себе эти вопросы: «А смогу ли я? А стоит ли вообще начинать?».

Что такое web-сайт

Здесь я могу сказать только одно, пока не попробуете – не поймете. В добавок к этому в IT-сфере одну попытку нельзя назвать полноценной. Эта область знаний очень обширна и относительно новая. С каждым годом она пополняется новыми технологиями, открытиями и алгоритмами. Поэтому не бойтесь начать и пытаться программировать, пробовать что-то новое!

Безусловно, IT-сфера требует от ее представителей множество знаний, умений и логического мышления. Однако все это достижимо, если работать и стараться. К тому же не все отрасли являются тяжелыми для изучения. Как, например, сайтостроение.

Зная только основы html – языка гипертекстовой разметки, и css – каскадных стилевых таблиц – можно создать приличный лендинг (одностраничный сайт, который обычно используют как визитку, портфолио и т.д.), информационные сервисы, новостные ресурсы и т.д.

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

Основы языка гипертекстовой разметки

Основы html и css

Для тех, кто не знает, html – это язык разметки гипертекста. Он включает в себя определенные элементы управления – теги, благодаря которым и производится разметка страниц. Так, с их помощью создаются абзацы и заголовки, изображения и ссылки, блоки объектов, кнопки и множество других элементов.

На сегодняшний день существует и обновленная спецификация, новая платформа – html5.

Каждый документ с кодом на html имеет расширение .html или .htm и включает в себя базовый каркас, т.е. минимальный стандартный текст, который всегда присутствует при создании веб-приложения. Он выглядит следующим образом:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset=utf-8">
  <title>Базовый каркас</title>
 </head>
 <body>
<!--Так выглядит комментарий-->	
<!--В этой части документа будет располагаться вся разметка страницы-->
 </body>
</html>

Все существующие теги для лучшего понимания общей картины можно приблизительно поделить на 8 групп:

  • Теги обязательного верхнего уровня;
  • Теги, необходимые для заголовков;
  • Блочные единицы;
  • Строчные единицы;
  • Универсальные элементы;
  • Теги табличных представлений;
  • Разнообразные виды списков;
  • Фреймы.

Для того, чтобы окончательно понять, что к чему, ниже я прикрепил таблицу с описанием основных тегов.

Верхний уровень

Это обязательные теги, без которых веб-страница не пройдет валидацию и может некорректно отображаться в браузерах.
<html></html> Включает в себя все последующие элементы и контент. Указывает, что данный файл является html-документом.
<head></head> Содержит информацию, которая в дальнейшем не отображается в теле документа, но является важной для работы программы и поисковых роботов.
<body></body> Определяет видимую часть тела файла. В эту часть вносится основная разметка веб-сайта.
Заголовок документа

Определяют название страницы и хранят информацию для поисковых роботов и других аналогичных программ браузера
<title></title> Отвечает за наименование документа.
<meta> Хранит в себе информацию для поисковых систем.
Блочные единицы
Занимают доступную ширину отображаемой страницы и всегда начинаются с новой строки
<div> Универсальный элемент. Используется для разметки блоков текста, группы объектов и создания отдельных частей страниц (блочная верстка).
<h1>,...,<h6> Парные теги заголовков.
<p> Используется для создания абзацев.
Списки
<ol></ol> Создает нумерованный перечень.
<li></li> Определяет пункты списка.
<ul></ul> Создает ненумерованный перечень.
Таблица
<table></table> Задает таблицу
<tr></tr> Определяет строку таблицы
<th></th> Определяет шапку страницы
<td></td> Определяет ячейки таблицы
Строчные единицы


Это теги, которые могут входить в состав других элементов языка разметки
<a> С его помощью создаются анкоры (ссылки).
<b></b> Задает жирное начертание текста.
<i></I> Создает курсивный шрифт.
<img> Элемент, предназначенный для отображения изображений и гиф-анимаций.

Вот вы и познакомились с основными тегами языка, с помощью которых уже можно сверстать что-то приличное. Однако разметка поможет вам только правильно разместить контент, а вот для красивого оформления вам понадобятся знания css.

Что еще нужно для создания сайтов?

Как я уже оговорился, вам понадобятся знания каскадных таблиц стилей, т.е. css. Данный инструмент содержит в себе свойства и их различные значения. Благодаря ему можно редактировать виды шрифтов, задавать цветовую палитру, красиво оформлять, выравнивать и указывать размеры блокам, медиафайлам, создавать анимации и многое другое.

Стили можно подгружать с отдельного файла (обычно его называют style.css), прописывая в элементе <head> ссылку подключения вида:

<link rel="stylesheet" href="style.css" />

Также можно внедрять css прямо в html-текст. Как думаете каким образом? Правильно, через тег. Для этого стоит в том же хедере прописать парный элемент <style></style> и в него вписать свойства со значениями.

Помимо уже описанных двух механизмов иногда требуется подключать такой язык, как JavaScript и его библиотеку jQuery. Они увеличивают возможности программы, позволяя обрабатывать запросы, формы регистрации и входа в аккаунт. Также их используют для программирования определенной логики приложений, обработки неких событий, формирования корзины покупок и т.д.

Это уже более сложные инструменты управления программой. А пока вам стоит изучить первые два.

В чем же можно писать код?

Редакторы для написания кода

На самом деле для простых примеров или при отсутствии специальных визуальных редакторов, можно воспользоваться обычными текстовыми. Скажу вам даже больше. Программировать можно и в «Блокноте». Просто под конец работы документ стоит сохранить в определенной кодировке и с указанным выше расширением. Если вам интересно, как это делается, то найдите на моем блоге статью о редакторах кода.

Более профессиональными и удобными программами считаются Notepad++, Sublime Text 3. Это популярные продукты для редактирования и проверки кода, которые обладают рядом преимуществ:

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

Однако здесь стоит выделить Sublime Text 3, так как это не все его возможности.

Sublime Text 3 очень мощный кроссплатформенный текстовый редактор, который поддерживает всевозможные плагины на языке программирования Python.

Помимо этого, продукт различает и поддерживает множество языков, что не свойственно для редакторов. К ним относятся: C-подобные, перечисленные выше, Java, всевозможные веб-языки, SQL, Haskell, R, Ruby, MATLAB, D и другие.

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

Результат нужно увидеть своими глазами

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример лендинга</title>
  <style>
body { 
  padding:0;
  margin: 0;
  background: url(http://kvest-spb.com/img/kvest-minastirit/photo00.jpg) repeat-y scroll;
background-size: cover;
}
     header{  	
background: url(http://img0.cfstatic.com/wallpapers/e6cbeca78c026a3bd1f64be1b27541c8_large.jpeg) top center no-repeat fixed;
  background-size: cover;
border-bottom: 9px double #FFFFF0;
  padding: 45px;
text-align: center;
 color: #FFFFF0;
font-size: 27px;
text-shadow: 0 0 9px #F0FFFF;
font-family: cursive;
}
.content, footer{
background-color: rgba(24, 16, 20, 0.9);
width: 80%;
margin: 0 10% 0 10%;
font-size: 18px;
color: 	#F0FFFF;
text-align: center;
}
.content > h1  {
padding: 13px;
text-shadow: 0 0 9px #F0FFFF;
text-decoration: underline;
}
 
 
img {
float: left;
}
.photo {
 display: inline-block;
}
footer {
margin-top: 15px;
color: #F0FFFF;
bottom: 0;
}
footer >h2 {
text-shadow: 0 0 9px #F0FFFF;
}
 
  </style>
 </head>
    <body>
       <header><h1>Квест-комнаты от компании "Mystery"</h1></header>
       <div class="content">
        <h1>Вы попадете в мир тайн, где только ваши способности помогут вам выбраться из ловушек!</h1>
         <h3>Закажите игру в одной из квест-комнат и станьте детективами, распутайте все головоломки и раскройте дело.</h3>
         <div class="photo">
            <img src="http://www.izolyatsiya.com.ua/images/qv-page/kh/kh-karantin-r.png" >
<h4>"Изоляция" приведет вас в постапокалиптический мир, где люди живут в бункерах и спасаются от мутантов. Найдите вакцину от мутации и выберетесь из комнаты.</h4>
</div> 
<div class="photo">            
<img src="http://www.izolyatsiya.com.ua/images/qv-page/kh/kh-1408-r.png" >
<h4>Комната по мотивам известной истории ужасов.</h4>
</div> 
<div class="photo"> 
            <img src="http://www.izolyatsiya.com.ua/images/qv-page/kh/kh-sklep-r.png" >
<h4>Вы проснулись после летаргического сна и вам необходимо выбраться из "Склепа".</h4>
    </div>     
       </div>
 
       <footer>
<h2>Бронируйте время игры с 10:00 до 19:00. Мы работаем по ПН - ПТ.</h2>
<h3>Телефоны: 
<br/>+xxxxxxxxxxxxxx
<br/>+xxxxxxxxxxxxxx
</h3>
Copyright Научная ассоциация
</footer>
    </body>
</html>

===========================

1
 

Чтобы узнать больше всего полезного в области верстки, подписывайтесь на мой блог и читайте публикации. Не забывайте делиться ссылками на интересные статьи с друзьями. Желаю удачи в обучении! Пока-пока!

С уважением, Роман Чуешов


Прочитано: 37 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o:
  • Денис

    Сейчас в школах на уроках информатики есть уроки, посвящённые самостоятельному написанию веб-страничек. Повезло современным ученикам.

    11.03.2017 в 06:54
    • Роман

      Интересно, я и не знал. Денис, а ты откуда знаешь?

      13.03.2017 в 13:21
    • Денис

      Приятельница работала в школе учителем информатики. Заходил к ней, сидел в лаборантской, дети меня на уроке не видели. Тема урока была создание сайта на html. В конце урока каждый из детей создал одностраничник, сдал задание, и получил д/з — создать сайт на html об одном из членов семьи.

      03.04.2017 в 23:41
      • Роман

        Интересно что было дальше...???))

        06.04.2017 в 00:10
    • Денис

      Не знаю, что дальше было. Наверно, кто то сделал домашку, т.е. сайт-одностраничник, кто то не сделал. Всё как обычно. Кто хочет, тот учится. Сейчас информатику изучают по пол-класса, около 12 человек, и у каждого есть комп с монитором.

      07.04.2017 в 12:50
      • Роман

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

        10.04.2017 в 21:58
    • Денис

      Согласен полностью! Но это касается не только программирования. Во взрослой жизни многое из школьного материала может пригодится.

      26.04.2017 в 19:23
  • Денис

    Чего удивляться сайту на html, в 9 классе начинают проходить изучение основ программирования, если в школе углублённые занятия, то изучают Visual Basic — любимый язык Билла Гейтса. Сейчас шарп вроде. Visual Basic шарп. Кто как учится, сами знаете. И память конечно. Я таблицу умножения подзабываю, а если бы проходил создание одностраничника на html, на сто раз бы уже забыл.

    03.04.2017 в 23:43
    • Роман

      Лучше бы Яве или С# учили — это востребованные языки. Ну или php на край.

      06.04.2017 в 00:12
    • Денис

      Нет, учат сначала Visual Basic, это происки Майкрософта))) Учебники ими разработаны, наглядный материал, компилятор предоставляют. К тому же считается лёгким к изучению ЯВУ.

      06.04.2017 в 01:34