Html уроки для начинающих – Уроки HTML учебник для начинающих

Основы HTML для начинающих

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

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

HTML — это язык разметки документов. Правильное произношение — Эйч Ти Эм Эль.

Вы, наверняка, работали когда-нибудь в редакторе документов Word или подобных офисных приложениях? Наверное вы знаете, что данный вид редакторов имеет богатые возможности для редактирования текста, расположения элементов, вставки картинок и т. д.

Зачем, спросите вы, писать в статье, посвященной HTML о текстовых процессорах? А вот зачем. Если разобраться, что такое офисный редактор? Это приложение для редактирования и отображения документов.

Ключевое слово здесь — документ

HTML — это язык разметки документов для браузера. Word’ом здесь выступает браузер, а документом — HTML страничка. Это самая основа технологии HTML, понимание которой необходимо для того, чтобы не путать язык разметки веб документов с языками программирования. Название говорит за себя — с помощью HTML мы размечаем, где на странице будет показан элемент, картинка или текст, и в каком порядке они будут следовать друг за другом.

Да, простой набор и форматирование текста в офисных приложениях не имеют ни чего общего с программированием. Но наблюдательный читатель заметит важную деталь — в текстовом процессоре мы набираем, редактируем и форматируем текст и картинки с помощью визуальных кнопочек и меню, но почему же HTML код пишется вручную? Зачем изучать так много технических деталей написания разметки для документа?

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

Этакий Word для HTML. Такие визуальные редакторы называются:

WYSIWYG редакторы — What You See Is What You Get. То есть, если перевести на русский: что видим, то и получаем.

Я их называю «вузивуги». Хоть это фонетически и не правильно, зато ярко свидетельствует о бессмысленности данного изобретения. Новички очень часто используют такие редакторы для создания своих первых сайтов. Конечно, это удобно — не нужно углубляться в изучение тегов, стилей оформления и прочих, на первый взгляд, неприятных и сложных вещей. Редактор сам автоматически преобразует наши действия в HTML код.

Но, как говорится, ни чего просто так не бывает. А если конкретнее — у такого подхода есть очень серьезные недостатки. Что же мешает всем подряд использовать визуальные редакторы для оформления HTML страничек? Дело в том, что сформированные таким образом страницы имеют, как правило, очень много лишнего кода, очень много ошибок с семантической точки зрения. Сейчас, конечно, нет проблем со скоростным интернет соединением и разница в размере странички в 400 кб и 100 кб не существенна для скорости, однако оптимизированный и правильно написанный HTML код избавляет от множества проблем и дает массу преимуществ, а именно:

• Грамотный HTML код положительно влияет на поисковую оптимизацию, скорость сканирования поисковым роботом сайта. Сгенерированные вузивугой килобайты кода здесь не приемлемы и даже вредны;
• HTML код, сгенерированный WYSIWYG редактором имеет множество семантических ошибок. То есть, теги, генерируемые таким редактором используются не по назначению, там где нужно использовать, например, списки <ul>, редактор сгенерирует нам другой, ненужный нам тег. Зависит, конечно, от редактора, но здесь имеются ввиду комплексные решения для создания сайтов, а не простого редактирования текста в текстовой области средствами WYSIWYG.
• Генерируется много лишних тегов и структура документа получается раздутой. Допустим, вы передвигаете элемент в такой программе сначала вправо, потом влево, потом по центру — от каждого действия остается след в исходном HTML коде. Редактор — это программа и он не может знать, что именно вы хотите получить в результате, он формирует тонны кода с учетом всех возможных вариантов поведения документа в браузере.
• Как правило, редакторы для визуального оформления HTML кода, быстро устаревают. А ввиду отсутствия интереса со стороны профессионалов — вообще лишаются поддержки и останавливаются в развитии. А HTML развивается. Все развивается, кроме вузивуги. Соответственно, они не могут генерировать правильный и современный код, в котором были бы задействованы новые фишки и решения.
• Поддерживать такие проекты и развивать — кара небесная. Об использовании паттернов и повторном использовании кода речи вообще быть не может.

Так что, HTML будем писать только ручками. Адекватных инструментов для визуального редактирования HTML еще не придумали, да и врядли они появятся. Язык разметки HTML прост в освоении и понимании, а средств автоматизации написания HTML кода множество, но об этом в других уроках.

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

Структура документа HTML

Рекомендую для занятий скачать и установить редактор Sublime Text. Крайне не рекомендую использовать для HTML верстки встроенный в Windows «Блокнот», если вы не хотите сломать себе психику на ранних порах изучения HTML.

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

Давайте создадим на компьютере первоначальный шаблон — файл index.html, откроем с помощью редактора и вставим в него следующий код:

<!doctype html> 
<html> 
<head> 
    <title>Заголовок</title> 
    <meta charset="UTF-8"> 
    <link rel="icon" href="favicon.ico"> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js" type="text/javascript"></script> 
</head> 
<body> 
    Тело документа 
</body> 
</html>

Итак, по порядку из примера.

<!doctype html> — тип документа (доктайп)

<!doctype html>

Данная конструкция всегда указывается в начале документа для правильного «понимания» браузером того, какая версия HTML используется при построении документа.

Ввиду того, что HTML постоянно развивается, он имеет несколько версий, как и любой программный продукт. Текущая версия HTML — пятая и приведенный в примере доктайп является актуальным.

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

<html> — начало документа

<html>

Первый тег, который мы встречаем после доктайпа, это <html>.

HTML тег — структурная единица разметки HTML документа. Код HTML складывается из кирпичиков, которые именуются тегами. Каждый тег имеет свою функцию, а изучение языка разметки HTML, в конечном счете, заключается именно в изучении тегов и их свойств в документе.

Хотелось бы отметить, что изучение HTML не такое сложное занятие, как может показаться на первый взгляд. Выучить используемые в разметке документа теги — не такая уж и большая нагрузка на мозг.

Итак, разметка документа начинается с тега <html> и заканчивается закрывающим тегом </html>. Каждый тег, который содержит в себе другие теги или элементы должен закрываться закрывающим тегом. Например, <html></html>, <p></p>, <div></div>, и т. д.

Тег <html> является обязательным, так как содержит всю структуру документа и является оболочкой для остальных элементов.

Тег <head>

<head>

Далее, мы видим тег <head>, который содержит другие, пока не понятные нам элементы. Содержит другие элементы — это значит, что элементы или теги находятся между открывающим и закрывающим тегом конструкции:

<тег> 
    содержание или другие теги 
</тег>

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

Тег <title> — заголовок документа

<title>Заголовок</title>

Заголовок <title> является обязательным тегом, содержащим текстовую метаинформацию, которая отображается в заголовке браузера или вкладки. Тег <title> должен находиться в теге <head>. Также, содержимое данного тега используется поисковыми системами для отображения документа в результатах выдачи.

Метатег <meta charset=»UTF-8″ >

<meta charset="UTF-8" >

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

Метатег — специализированный тег, предназначенный для предоставления структурированных данных о странице. Метатеги чаще всего используются в теге <head>. Метатеги не являются обязательными в структуре HTML документа.

Рекомендую во всех HTML документах изначально использовать кодировку UTF-8, как в примере выше.

Фавиконка (favicon)

<link rel="icon" href="favicon.ico" >

Подключает к документу файл с изображением фавиконки.

CSS стили документа

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

Подключает к документу CSS файл со стилями оформления HTML.

CSS — каскадные стили оформления HTML документа. У каждого тега, который находится в теге <body>, имеется набор свойств, такие как — цвет, ширина, высота, положение относительно других элементов. Все эти свойства и есть стили CSS, которые можно вынести во внешний файл. Конструкция <link> подключает внешние файлы к документу HTML, в том числе и стили CSS.

Примечание: свойство href конструкции <link > указывает расположение внешнего файла. В нашем примере, файл style.css и favicon.ico, находятся в той-же папке, что и файл index.html. <link> не имеет закрывающего тега.

Тег <script>

<script src="script.js" type="text/javascript"></script>

Тег <script> содержит код или ссылку на файл javaScript и чаще всего используется внутри тега <head>, хотя инструмент оптимизации скорости загрузки страниц от Google, рекомендует данный тег использовать в конце документа, перед закрывающим тегом </body>.

В нашем примере подключается внешний файл script.js, который находится в той-же папке, что и основной файл index.html.

Итак, друзья, мы рассмотрели основные элементы, которые используются в теге <head> чаще всего. Кроме этих элементов, для <head> есть ряд других, более специфичных и не обязательных.

</head>

Закрываем тег <head> и шагаем дальше.

Тело aka body

<body>

Вот здесь то и начинается все самое интересное и визуально осязаемое в HTML верстке документа.

Перейдем, непосредственно, к верстке видимой части страницы. Все, что мы пишем и верстаем внутри тега <body> будет отображено в браузере. Откроем наш файл index.html в браузере для того, чтобы наглядно видеть, что мы делаем в редакторе.

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

<a>

<a href="http://webdesign-master.ru">текст ссылки</a>

<em>,
<strong>

<em>текст курсивом</em>

<strong>жирный (акцентируемый) текст</strong>

<h2>,
<h3>,
<h4>,
<h5>,
<h5>,
<h6>

<h2>Заголовок первого уровня</h2> 
<h3>Заголовок второго уровня</h3> 
<h4>Заголовок третьего уровня</h4> 
... и т. д.

<ol>,
<ul>

<ul> 
    <li>Элемент маркированного списка 1</li> 
    <li>Элемент маркированного списка 2</li> 
</ul> 

<ol> 
    <li>Элемент нумерованного списка 1</li> 
    <li>Элемент нумерованного списка 2</li> 
</ol> 

<p>

<p>Внешний вид HTML разметки во многом 
определяется CSS стилями.</p> 

<p>Тем не менее, некоторые веб-мастера 
предпочитают не использовать стили на первых 
этапах проекта.</p>

<img>

<img src="путь_до_картинки.jpg" alt="Текст">

<form> 
+ <input> 
+ <textarea>

<form action="ссылка_на_скрипт_обработки_формы"> 
    <input type="text" name="name"> 
    <input type="text" name="email"> 
    <textarea name="text"> 
        Текст сообщения 
    <textarea> 
    <input type="submit" value="Написать"> 
</form>

<span>

Изучение HTML, в большинстве случаев, не вызывает
<span>ни каких сложностей</span> у новичков.

<video>,
<audio>

<video src="rolik_chuma.mp4" controls></video> 
<audio src="muzichka.mp3" controls></audio>

<div>

<div> 
	<div> 
		Текст во вложенном блоке 
	</div> 
</div>

<iframe>

<iframe src="http://rtfm.org.ru"></iframe>

Мы рассмотрели далеко не все теги, да это и не нужно на данном этапе. Главное — понять основную идею HTML, научиться использовать представленные выше теги, а потом двигаться дальше.

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

Например, не:

<video src="ролик чума.mp4" controls></video>

а:

<video src="rolik_chuma.mp4" controls></video>

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

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

Практическое задание по HTML верстке

Если вы еще не скачали архив с примерами, сделайте это. Для примера, можете подглядывать в файл example.html, который также находился в архиве.

1. Распакуйте архив и в папке с распакованными файлами создайте файл index.html. Откройте созданный файл с помощью текстового редактора Sublime Text;
2. Создайте первоначальную структуру документа с доктайпом, тегом <html>, содержащим <header> и <body> и перейдите к редактированию содержимого тега <body>;
3. Откройте файл readme.txt и выполните соответствующие задания в созданном вами файле index.html. Для проверки результата, откройте index.html в вашем любимом браузере.

На этом урок по основам HTML окончен, в следующем уроке «Основы CSS» мы научимся управлять стилями элементов документа, познакомимся ближе с каскадными таблицами стилей, научимся использовать классы стилей и сделаем нашу верстку красивой и красочной.

Премиум уроки от WebDesign Master

Другие уроки по теме «HTML и CSS»

webdesign-master.ru

Уроки HTML для начинающих, новичков и чайников

HTML — язык гипертекстовой разметки
( от англ. HyperText Markup Language — язык гипертекстовой разметки)
На языке HTML интернет-браузеру передаётся информация о том, какой текст и другие элементы (ссылки, изображения, таблицы, формы) и как нужно отображать на странице. На языке HTML верстают, а не программируют — особым образом размечают текст и объекты для публикации в интернете (где, какого цвета и тп).

Заголовки в html
Форматирование текста в html (параграфы, выравнивание, полужирный, курсив, подчёркивание, перечёркивание, текст в верхнем и нижнем индексах, разделительные черты, спецтекст)

Ссылка html — это одно из основных понятий в создании html-документов. Каждый пользователь интернета хотя бы раз ими пользовался. Каждый раз нажимая в интернете на зайти, просмотреть, прочитать, подробнее, переходя по новостям и прочее Вы пользуетесь ссылками! Страницы, по которым Вы переходите, могут находиться на абсолютно разных сайтах.

© Знак copyright ® Знак зарегистрированной торговой марки
В таблице ниже представлены наиболее популярные и часто используемые специальные символы. Достаточно вставить данную конструкцию в html код и в браузере отобразится спецсимвол.

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

tradebenefit.ru

Создаем первую html страницу.

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

Первое что мы делаем, это создаем папку на рабочем столе и даем ей название «Сайт». В этой папке будет проходить все наше дальнейшее творение.

Теперь запускаем блокнот Notepad++ который мы установили. (Если Вы этого еще не сделали, то инструкция по установке здесь). По умолчанию программа должна быть по директории /Program Files/Notepad++/, либо можно запустить через Пуск. Открыли программу и вставляем в нее следующий текст:

Далее, нажимаем в верхнем меню кнопку «Кодировки» и выбираем «Кодировать в UTF-8»

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

Теперь нужно сохранить наш файл в формате html.

Не забываем, что Notepad++, это текстовый редактор, а это значит, что на данный момент мы имеем обычный текстовый файл с набором символов. Для того чтобы наш браузер отображал созданную нами текстовую страницу как веб-страницу, нам нужно сделать из нее файл с расширением html.

Для этого нажимаем в верхнем меню кнопку «Файл», затем «Сохранить как», выбираем директорию (путь) куда будет сохранен файл, сохраним его в созданной нами папке: Рабочий стол/Сайт/, далее самое главное, выбираем нужный тип файла, в нашем случае это Hyper Text Markup Language (html).

Поздравляю Вас! Вы только что создали свою первую веб-страницу! Теперь Вы можете зайти в папку «Сайт» и запустить созданный файл. Страница откроется с помощью браузера, и Вы увидите, что вместо непонятных символов которые мы вставляли, браузер выводит на экран вполне понятную информацию.

Как это все работает, мы разберем в следующих уроках.

* Когда нам нужно будет открывать файл для редактирования, будем нажимать правой кнопкой мыши на файл и выбирать «Edit with Notepad++» (открыть с помощью Notepad++).

Вы что-то не поняли из этого урока? Спрашивайте!
— [email protected]

htmlboss.ru

Html для чайников с практическими уроками

От автора: всем привет. Все мы хотим получше разбираться в сайтостроении, чтобы заниматься интересными проектами и воплощать в жизнь свои идеи. Но что делать, если вы совсем новичок? Наш учебник html для чайников с практическими уроками поможет вам наконец совершить такой важный прорыв в сайтостроении c нулевого уровня хотя бы до базового понимания.

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

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

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

Ну а для редких тегов всегда нужно использовать словарь. Никто, ни один супер верстальщик и веб-разработчик, я думаю, не знает всех тегов наизусть. Это просто не нужно. Если тег используется тобой 1 раз в 10 лет, то зачем держать его в голове? Я думаю, это понятно.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Но такую практику я бы назвал просто этакой игрой в песочнице. Вы просто пишите разные теги, пытаетесь разобраться со всем максимально подробно, но все для чего? Должна же быть какая-то цель. Обычно html и css изучают для того, чтобы потом создавать свои веб-страницы и полноценные сайты.

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

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

Как правильно изучить язык и где брать практику?

Опять же, я говорю о легком изучении только если идти правильным путем. То есть смотреть толковые видеоуроки, где поэтапно, от простого к сложному объясняются нужные вещи. Если же вы будете смотреть уроки, которые не выстроены по такому формату, то скорее всего, большую часть материала просто не поймете.

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

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

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

Например, зачем вам прямо сейчас знать, какой тег отвечает за вывод аббревиатуры? А какой тег запрещает изменение направления текста? Вы не обязаны это знать, так как все это редко вам пригодится. Для таких случаев, как я говорил, есть справочник. Смотрим в него и решаем проблему за пару минут.

Так что в первую очередь вы должны изучить то, что вам нужно. А потом уже можете по желанию узнать историю возникновения html, невалидные сегодня теги и прочую маловажную информацию для вас.

Вопрос практики в html решается очень просто. Смотрите любой видеоурок и повторяете все действия. То есть создается, например, в уроке список – вот и вы тоже его создавайте. От вас будет приветствоваться делать что-то самому уже по окончанию видеоурока. То есть учиться не просто переписывать код за кем-то, но и думать самому.

Следующий этап

Рано или поздно придет время, когда вы уже изучили все основное, что вам нужно в html. Далее вам нужно начинать учить css. Это язык, который отвечает за оформление веб-страниц. Он связан с html, поэтому без него обойтись нельзя. У нас тоже есть курс по основам css.

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

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

Ваша финальная практика

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

webformyself.com

Основы html для начинающих. Урок 1

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

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

Структура тегов, парные и одиночные

Каждый тег заключен в специальные скобки. «<» — указывает системе, что начинается какой-то тег, а «>» — что он закончился. Например, «<h2>» или «<head>».

Для начинающих изучать основы html обозначим, что эти угольные скобки («<>») обязательны, и если их не закрыть правильным образом, данные будут отображаться некорректно. Следите за этим.

Но намного ошибки допускают, когда «не закрывают» тег.

Всё в дело в том, что теги делятся на два вида:

• парные — они состоят из двух тегов, первый из которых открывает область, а второй закрывает. При этом, последний еще имеет дополнение в написании — символ «/». Например, «<head> … </head>».. Совокупность открывающего и закрывающего тегов, а также содержимого между ними, еще называют элементом, если по нашему примеру — элемент head.
• одиночные — они не имеют закрывающей пары и влияют непосредственно на следующие после них символы или что-либо вставляют. Например, «<hr> — вставляет горизонтальную черту через всю страницу.

Как всё происходит?

Чтобы весь текст на интернет странице не шел сплошным текстом, без каких-либо отступов, абзацев, заголовков — его необходимо разбить соответствующими тегами.

Так, если нужно написать заголовок статьи — его выделяют парным тегом <h2>. То есть, пишем <h2> заголовок </h2>.

Чтобы разбить тексты на абзацы, используют тег <p>, но не забываем его закрывать.

Зачем нужны атрибуты в html

Мы уже писали, что такое атрибут, но напомним для начинающих изучать основы html («повторение мать учения»):

атрибут — это  дополнительное информация, уточнение действия тега.

С его применением, строка кода выглядит примерно так:

<тег атрибут=»значение атрибута»>.

Например, если вы хотите задать цвет абзаца (возьмем красный), нужно использовать

<p style=»color: red»>.

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

Помимо задания дополнительных параметров и различных условий, атрибуты также используют, чтобы обозначать определенные участки кода, чтобы потом их внешний вид можно было изменить с помощью CSS. Об этом читайте в отдельных статьях.

Структура html страницы

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

Структура html страницы для начинающего может показаться очень уж сложной и запутанной.

Чтобы увидеть её для любой страницы нажмите правой кнопкой мыши на любом участке страницы и выберете пункт «Посмотреть код страницы» (Google Chrome) или «Исходный код» (Opera). 

Но, на самом деле, все они имеют абсолютно идентичную базу.

Если сильно-сильно упростить, структура html страницы выглядит так:

Вот, буквально за минуту в бесплатном редакторе кода notepad++ мы набросали простейшую интернет-страницу.

Разберем её элементы

• <!DOCTYPE html> — этим тегом начинается абсолютно любой документ html формата, который и указывает именно на свой формат.
• <html> — далее будут использоваться символы присущие этому формату.
• <head> — с англ. «голова» — задаются параметры всей страницы, её верхушка, но само содержимое будет дальше;
  • <title> — не обязательный тег, он задает название страницы, которое видно в самом верху открытого браузера или, если её добавить в закладки;
• <body> — «тело» страницы. Вот здесь и находится главное содержимое страницы, её суть.

Тег <p> мы уже рассматривали (задает абзацы).

Главное при написание кода страницы html для новичков — это не совершать ошибки и очень тщательно следить, чтобы нужные теги были закрыты.

На этом заканчивается наш первый урок. Следите за обновлениями, скоро будет следующий.