Разрабатывание сайтов на языке html, css — это и есть верстка. Тот кто разрабатывает эти сайты — это веб-разработчики. Поэтому в этой статье мы расскажем и покажем основы верстки. Это то, что нужно запомнить и руководствоваться при разметке страницы. По мере продвижения и погружения в эту тему, у Вас будут появляться все более расширенные задачи. Как прийти к этому и с чего начать. Что выбрать, вы можете прочитать в наших статьях, которые мы опубликовали уже ранее.
Чтобы расширить свои знания о теме удаленного заработка, почитайте статью как создать портфолио для фрилансера.
Что такое веб-страница
Итак начнем с самого начала — с web-страницы. Web-страница — это обычный текстовый документ, который может содержать в себе ссылки на другие документы. То есть, это могут быть тексты, графические изображения, картинки, видео и прочее. Попросту говоря это документ в электронном виде. Вот представьте напечатанную книгу, мы её листаем, читаем. Также мы можем читать книгу и в интернете, напечатанную в электронном виде. Тут все понятно. WEB -страница — это электронная страница.
Основы верстки: пример из практики
Например, мы хотим открыть пиццерию. Закупаем все необходимое для работы нашей пиццерии. К нам в пиццерию приходят люди, которые покупают её. Но доходы еще маленькие, а хочется чтобы больше покупателей обращалось за нашей продукцией. Лучше, чтобы как можно больше покупателей узнало, что мы существуем и готовим пиццу. Для этого нам нужна реклама в интернете, ведь в основном все сейчас пользуются интернетом. И для того, чтобы создать нашу страничку или сайт, нам и понадобятся основы верстки. Таким образом, мы увеличим круг людей, знающих о нашей пиццерии.
Простыми словами, что такое разметка
Итак, браузеры, которые предназначены для наших web-документов, понимают разметку страницы. Иначе говоря, если вы захотите применить переносы строк, изменить шрифт и др., то это будет игнорироваться, потому, что программа понимает только разметку. Следовательно мы должны разметить документ. Надо сказать, что весь наш документ состоит из элементов.
Большая коробка. Основы верстки
Чтобы можно было, понять что такое верстка, можно представить допустим большую коробку. А в коробке, еще коробка и еще коробка. Так же можно это сравнить еще и с матрешкой. Матрешка в матрешке. Самая большая матрешка или коробка- это самый главный элемент. Он называется html. Внутри этого документа есть две логические части. Одна часть называется head. А вторая часть называется body. Эти элементы имеют открывающий и закрывающий тэг. Это нужно запомнить. Пишется это так — <html>, <head>, <body>. То есть внутри большой коробки находиться еще две коробки. В <head> располагается служебная информация, предназначенная для того, кто будет её читать (человек, программа). Она предназначена для служебной цели. В <body> располагается вся основная информация.
Структура <html>
Структура <html> состоит из трех основных структурных элементов.
Как уже выше сказано элементы имеют открывающий и закрывающий тег — это обязательно.
<> открывающий тег;
</> закрывающий тег.
Но так же бывают теги и «одиночные», без закрывающего тега.
Разметка страницы HTML:
Элемент:
<имя_тега>содержание элемента</имя_тега> — это означает:
Открывающий тег — <имя>
Закрывающий тег (слэш после первой угловой скобки) — </имя>
Содержание элемента — содержание элемента
Пример html-структуры документа:
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
Содержание документа (его видят в браузере)
</body>
</html>
Так же можете ознакомиться со справочником по HTML. Там можно найти информацию по интересующим тегам с примерами.
Таким образом, подводя итоги, вам нужно настроиться на запоминание специфических слов и формулировок. Это как другой язык, например английский или немецкий и его нужно выучить, запомнить. С этого языка нужно начинать изучать структуру сайтов. Читайте следующие наши статьи и продолжайте изучать язык html.