Изучение HTML

Изучение HTML

В данной статье вы узнаете, как использовать HTML для написания своего первого веб-сайта! В статье будут приведены наглядные примеры для лучшего понимания. Сразу оговоримся, что статья изначально рассчитана на тех, кто только начинает изучать HTML. Кроме того, обещаем, что по окончании прочтения статьи вы гарантированно создадите свой первый сайт.

HTML расшифровывается как HyperText Markup Language, то есть язык для упорядочивания текста.

В отличие от программных языков (JavaScript, PHP и т. п.), которые используют сценарии, чтобы совершать действия на сайтах, язык упорядочивания (HTML) использует теги для разметки содержимого веб-сайтов.

Начинаем изучение HTML с нуля

Как английский язык состоит из букв A, B, C и т. д., так и HTML-язык состоит из своеобразных "букв": <p>, <hr/>, <h1> и т. д. Такие своеобразные "буквы" языка HTML среди веб-мастеров называются тегами.

Ниже приведен пример HTML-тега.

<u>Теги <u></u>По краям этого текста создают подчеркивание.</u>

HTML-теги в паре со стилями языка CSS быстро и качественно позволяют делать интернет-сайты.

Место HTML среди других языков

Как известно, хороший веб-сайт строится как минимум на 5 языках.

Современный интернет-сайт строится на языках:

  1. HTML (структура и упорядочивание).
  2. CSS (стилевое наполнение).
  3. JavaScript (действия в браузере).
  4. PHP (действия на сервере).
  5. SQL (хранение данных).

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

Тег <html>

За многолетнюю историю с момента создания HTML-язык претерпел изменения. На данный момент большинство интернет-сайтов переходят на последнюю версию языка - HTML5. Но даже в версии HTML5 основы языка остались неизменными.

Структуру HTML-страницы можно сравнить с сэндвичем. Как сэндвич имеет два ломтика хлеба, так и HTML-документ имеет открывающий и закрывающий HTML-теги.

Эти теги, как и хлеб в сэндвиче, окружают все, что внутри.

<html>   ...   </html>

Тег <head>

Продолжая изучение HTML, вы обязательно должны познакомиться с тегом <head>. Непосредственно внутри материнского тега <html> находится все содержимое сайта, в том числе и тег <head>. Данный тег обязателен и содержит все настройки страницы сайта, для которой написан. Эти настройки не видны посетителям сайта, их видят только браузеры (Google Chrome, Mozilla Firefox и так далее).

Блок с настройками веб-страницы содержит все "неотображаемые" элементы, которые помогают браузеру правильно отображать ваш сайт в Интернете.

<html>   <head>...</head>   </html>

Все опции, которые можно настроить внутри тега <head>, мы рассмотрим, но чуть позже - когда придет время.

Тег <body>

Тег <body> так же, как и тег <head>, находится внутри тега <html>.

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

Заголовки, параграфы, таблицы, картинки и ссылки - это только малая часть тех элементов, которые могут содержаться внутри тега <body>.

Базовая структура HTML-документа:

<html>   <head>...</head>   <body>...</body>   </html>

Ваш первый сайт

Теперь вы знаете, что при помощи HTML-языка можно создавать сайты и что для этого используются основные теги:

  • <html>. Очерчивает границы веб-страницы.
  • <head>. Содержит настройки отображения веб-страницы в браузере.
  • <body>. Содержит все элементы веб-страниц (картинки, видео, текст и так далее), которые вы хотите показать посетителям сайта.

О других тегах, таких как <header>, <nav>, <section>, мы поговорим совсем скоро.

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

Известно, что мобильные операторы ("МТС", "МегаФон" и так далее) предоставляют нам мобильные услуги. Точно так же услуги по созданию и управлению сайтами нам предоставляют хостинг-операторы. Для создания своего веб-сайта перейдите на сайт любого бесплатного хостинг-оператора.

К проверенным хостинг-операторам относятся BEGET или REG, к примеру. Вы можете выбрать любого.

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

Современная структура сайта

Теперь, когда у вас есть свой сайт, ознакомьтесь с тем, какие теги содержит в себе тег <body> и как они упорядочивают информацию на сайтах.

Структура современного сайта

На картинке выше схематично представлена структура, которая пришла с появлением последней версии HTML-языка - HTML5. Вместе с HTML5 пришли не просто новые теги, но и смысл построения веб-сайтов. Все теги, которые вы видите на картинке, содержатся внутри основного тега <body>. Данные теги помогают вам "очертить" структуру вашего сайта и придать ей смысл.

Например, внутри тегов <header>...</header> удобно разместить заголовок сайта (теги <h1></h1>) и описание сайта (теги <p></p>).

Внутри тегов <nav> </nav> удобно разместить меню (ссылки) сайта (тег <a></a>).

Внутри тегов <section> </section> удобно разместить любой большой блок информации, связанной по смыслу. Это может быть несколько статей, каждая из которых "обернута" в теги <article></article>, или фотографии (тег <img src="">), или таблицы (теги <table></table>) и многое другое.

Внутри тегов <aside> </aside> удобно разместить любую информацию, неподходящую по смыслу к <section> </section>.

Внутри тегов <footer> </footer> принято размещать дополнительную информацию типа контактных данных, дополнительных разделов сайта и так далее.

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

Итак, когда вы откроете на сайте вашего хостинг-оператора файловый менеджер и найдете документ с названием index.php, смело пишите в нем, как с чистого листа, структуру вашего сайта.

<html>     <head>   <meta charset="utf-8"/>   <title>Мой первый сайт</title>   </head>     <body>   <header>  <h1>Заголовок страницы</h1>  <p>Описание страницы</p>  </header>     <nav>  <center><a href="">Ссылка №1</a> | <a href="">Ссылка №2</a> | <a href="">Ссылка №3</a></center>  </nav>     <section>  <h2>Заголовок некой статьи</h2>  <div>Это блок, который содержит любую информацию, а при помощи CSS вы можете раскрасить этот блок, да и весь сайт со всем его содержимым так, как вам будет угодно.</div>  </section>    <footer>&copy; Все права защищены</footer>   </body>    </html>

Помните, мы говорили, что в <head> указываются различные настройки для сайта? Ну так вот:

  1. При помощи <meta charset="utf-8"/> мы показываем браузерам, что на сайте могут быть и русские, и английские символы (иначе при открытии сайта вы узрите страшные кракозябры).
  2. <title></title> служит для указания названия страницы, которое отобразится во вкладке браузера и в поисковой системе ("Яндекс", Google и им подобные).

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

Принимайте поздравления! Вы только что создали свою первую веб-страницу на собственном веб-сайте! Дальше будет интересней!

HTML: основы для начинающих
HTML – язык разметки гипертекста, который сделал интернет таким, каким мы его знаем и любим. Именно благодаря этому замечательному инструменту сайты выглядят красиво и современно, а также обеспечивается удобство их использования.
далее
Веб-программисты: описание профессии, преимущества и недостатки
Веб-программист – это одна из самых высокооплачиваемых, популярных и востребованных на рынке труда профессий. Подразумевает создание и разработку технической части интерактивных приложений и динамических интернет-сайтов.
далее
Веб-дизайн: с чего начать обучение новичку?
С развитием коммерческой сферы в интернете появилось много новых профессий. Пока все эти специальности не начали преподавать в университетах, спрос на хороших специалистов велик. Многие хотят узнать, с чего начать веб-дизайн: его базовые темы, ...
далее
Узнаем как научиться делать сайты? Создание сайта с нуля ...
Как научиться делать сайты? Создание сайта с нуля самостоятельно – пошаговая инструкция. Что нужно сделать изначально. Как подготовиться к созданию собственного проекта и что для этого потребуется. Какую выгоду может принести свой сайт.
далее
Node.js для начинающих: краткое описание, руководство, особенности
Node.js — это среда выполнения JavaScript, встроенная в версию движка JS V8 от Chrome. Платформа Node.js для начинающих использует управляемую событиями, не блокирующую модель ввода-вывода, которая делает ее легкой и эффективной. Пакетная экосистема Node.js является самой большой экосистемой библиотек с открытым исходным кодом в мире.
далее
Node.js для начинающих: краткое описание, руководство, особенности
Основы CSS: разметка страниц
Создание сайтов – это работа не для людей со слабыми нервами. Помимо знаний нужно обладать креативным мышлением, задатками перфекциониста и филигранной точностью при разметке страницы. CSS в этом вопросе просто незаменим. И знать его основы необходимо каждому вебмастеру.
далее
Основы CSS: разметка страниц
Кнопка html: использование, изготовление
Кнопка html для сайта выполняет различные задачи: от простого перенаправления пользователей, до сложного отправления полученных данных из формы, для последующей обработки. Как сделать кнопку в html для сайта, интересно только тем, у кого есть желание делать сайты самостоятельно, а не использовать готовые системы управления.
далее
Кнопка html: использование, изготовление
Пример страницы HTML и основные принципы создания
HTML - это базовое знание, фундамент, на котором создаются даже самые простые сайты. Без минимально необходимых представлений о языке гипертекста - HTML - работа не представляется возможной.
далее
Пример страницы HTML и основные принципы создания
HTML-команды для создания сайтов
Список HTML-команд очень большой. Но основных не так много. Для того чтобы начать писать код, вам нужен редактор. Можно использовать "Блокнот". Рекомендуется использовать Notepad++.
далее
HTML-команды для создания сайтов