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

HTML для новичков или как создать свою первую страничку в обычном блокноте

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

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

Приятно познакомиться, меня зовут html

HTML означает Hyper Text Markup Language, что дословно переводится как «язык гипертекстовой разметки». Стоит знать, что html нельзя назвать языком программирования, так как его основная направленность не обработка данных, а всего лишь их корректное отображение в браузере.

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

Вместе с html всегда действует css и его фреймворки – формальный язык, содержащий в себе набор параметров для изменения вида, форм, цветов, размеров и других параметров объектов. Но об этом я подробно напишу в своих других статьях, так что оставайтесь на линии. ))

Язык html был разработан в конце ХХ века британцем Тимом Бернерсом-Ли. Изначально он был создан как инструмент для форматирования документов и научных бумаг людьми, не обученными верстать или работать в специальных программах. Однако с течением времени его предназначение изменилось, впрочем, как и предназначение некоторых встроенных элементов.

Немного о «мутациях» html в html5

HTML против HTML5

Последние пару лет споры и обсуждения нового стандарта разметки достигли апогея. HTML 5 – это современная спецификация разметки, которая направлена на верстку веб-приложений, использующих такие файлы, как видео, графику, всевозможные виды анимации, аудио и другие.

Опять-таки хочу выделить одну маленькую, но весьма важную деталь. HTML 5 никак нельзя назвать продолжением старой спецификации. Несмотря на схожесть с описываемым мною до этого механизмом, это скорее новая публичная платформа, которая только, возможно, ради рекламных целей в состав своего названия включила знаменитую аббревиатуру.

Что такое теги и почему они так необходимы

Вот теперь мы ближе подошли к самому обучению, возможно начинающих верстальщиков. Итак, что же такое тег? Тег – это такая единица веб-языка, благодаря которой разработчик указывает, какой именно элемент будет использовать на своем сайте.

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

Вот так выглядит общая форма одиночного тега:

<тег1 атрибут1="значение" атрибут2="значение">, а вот такой синтаксис у контейнеров: <тег1 атрибут1="значение" атрибут2="значение">Здесь может не быть информации или же может быть введен текст</тег1>.

html теги

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

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

Для удобства я занес важные элементы в таблицу тегов, с разбором и подробным описанием каждого.

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

Это обязательные теги, без которых браузер корректно не отобразит написанную вами страничку

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

Заголовок документа

Определяют название страницы и хранят информацию для поисковых систем браузера

<title></title> Отвечает за название документа
<meta> Хранит в себе важную информацию для поисковых систем сети

Блочные единицы

Занимают доступную ширину отображаемой страницы и всегда начинаются с новой строки

<div></div> Универсальный элемент. Используется для разметки больших блоков текста и создания отдельных блоков страниц (блочная верстка)
<h1>,...,<h6> Парные теги заголовков
<p></p> Используется для создания параграфов

Списки

<ol></ol> Создает нумерованный список
<li></li> Определяет отдельную часть списка
<ul></ul> Создает ненумерованный список

Таблица

<table></table> Задает таблицу
<tr></tr> Определяет строку таблицы
<th></th> Определяет шапку страницы
<td></td> Определяет ячейки таблицы

Строчные единицы

Это теги, которые входят в состав других элементов языка

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

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

Время для примера

Для выполнения данного задания вам необходимы такие инструменты:

  • Обычный текстовый редактор;
  • Браузер

Откройте стандартную программу «Блокнот» и вставьте туда данный текст:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Document</title>
</head>
<body>
<h1>Моя первая страница</h1>
<p> Первое предложение выделим <b>жирным текстом</b>. А второе – <i>курсивом</i>.</p>
</body>
</html>

При сохранении файла обязательно укажите кодировку файла «UTF-8» в меню «Файл» — «Сохранить как» и в названии добавьте расширение .html. Теперь откройте его через любой браузер и наслаждайтесь своей первой страничкой.

Сохраняем свою первую страницу правильно

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

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

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

    Роман, отличная статья. Узнал значение кое каких тегов. У меня с кодами просто беда-печаль. Нет постоянно практики. Года два назад немного пробовал вникать, кое что получается, но быстро всё забывается. Иногда если надо что то сделать, то без помощи яндекса не получается. В арсенале есть несколько видео курсов на эту тему, но времени на них нету. :p

    29.11.2016 в 01:04
    • Роман

      Теги и разметка — это самое простое. Дальше уже сложнее немного идут стили, javascript, php и т.д.

      30.11.2016 в 22:31
  • Татьяна

    Роман, у меня такой к Вам вопрос: может ли человек, не изучавший даже в школе информатику, без помощи человека, а только по курсам изучить основы программирования? Я читаю такого плана статьи и мне кажется, что я сама никогда не разберусь даже с элементарным.

    28.04.2017 в 11:18
    • Роман

      Да, может. Но к сожалению я пока тоже не из них...)

      Однажды в интернете наткнулся на интересную статью про парня который хотел изучить java и устроиться программистом в престижную компанию.

      Так вот он начал с нуля и с помощью javarash курсов и самообучения добился результата за 5-6 месяцев. Но путь был очень не просто. Он даже с работы старой уволился и голодал, чтобы достичь своей цели. На такое не каждый способен.

      В итоге он стал профи программистом и стал заниматься любимым ремеслом.

      Поэтому было бы желание, а возможности всегда можно найти.))

      28.04.2017 в 12:28