Что такое язык HTML и для чего он нужен

Здравствуйте уважаемые начинающие веб-мастера. Начинаем изучать языки программирования.

И начнём мы их изучать с html.

Сразу скажу, что в конце курса Вы уже сможете самостоятельно написать сайт на чистом html, и выложить его в интернет. Но я всё же порекомендую не торопиться, и после html, познакомиться с css.

Тогда и сайт Вы сделаете покруче, и сможете исправлять внешний вид сайта, созданного на готовой CMS(система управления контентом).

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

Просто непонятное всегда пугает, но я вам обещаю, что после первых же занятий, пройдут все страхи.

Учиться мы будем при помощи редактора Notepad++, который Вам нужно установить на свой компьютер.

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

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

НТМL (HyperText Markup Language) дословно — язык разметки гипертекста. С помощью его создаются веб-страницы.

И если, совокупность просто страниц, объединённых одной тематикой, в нашем понимании — книга, или даже, лучше сказать, толстый журнал, то совокупность веб-страниц объединённых одним доменным именем — это и есть сайт.

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

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

Код html состоит из следующих элементов:

1. Теги.

2. Атрибуты тегов.

3. Значения атрибутов.

Давайте рассмотрим их по порядку.

Тег html — это основной элемент кода. Пишется он так:

<html></html>

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

Между этими двумя частями, пишется весь остальной код страницы, которая будет отображаться на экране.

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

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

Например, если поставить в угловых скобках букву h1, то на экране выведется текст в виде заголовка.

<h1>Здравствуйте<h1>

То есть шрифт слова «Здравствуйте», будет крупнее и жирнее остального текста.

Если в угловые скобки поставить букву p, то текст заключённый в тег, будет выведен в виде абзаца.

<p>Здравствуйте</p>

То есть, шрифт будет обычный, но всё, что написано после этого тега, будет начинаться с новой строки.

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

Более подробно, каждый из них, мы рассмотрим по ходу этого курса

Следующие — это атрибуты тегов. Часто используемых, тоже не более десятка. А в последнее время и того меньше, так как все функции атрибутов перенесены в css.

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

Атрибут — это дополнительная команда. Пишется он в открывающей части тега. Например, захочется вам сделать заголовок цветным, тогда в открывающую часть тега h1, нужно вставить атрибут color

<h1 color></h1>

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

Это указание и будет значением атрибута. Выглядит оно так:

<h1 color="#FF000D"></h1>

Это красный цвет.

Точно так же, но при помощи других атрибутов, можно задавать размер текста, отступы, выравнивания, и много чего ещё.

Всё это мы рассмотрим далее по ходу курса, подробно и наглядно.

А сейчас делаем вывод из всего вышесказанного:

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

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

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

Полный список тегов и атрибутов html, если кому то интересно, можно посмотреть здесь: W3.org.

Хотя, если вы не собираетесь профессионально заниматься программированием, будет достаточно знать несколько (около десятка) основных тегов и несколько же атрибутов.

Ну, и всё, пожалуй. Мало? А больше пока и не надо. Остальное будем узнавать в процессе обучения на конкретных примерах.

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

Неужели не осталось вопросов? Спросить

Перемена

Только сядешь за учёбу — так обязательно какая-то падла разбудит!!!

В школе учитель говорит ученикам:
— Кто из вас окончательно считает себя тупицей? Встаньте.
После долгой паузы поднимается один ученик:
— Так ты считаешь себя тупицей?
— Ну не совсем, но как — то неловко, что вы стоите один.

Как сделать иконку для сайта — favicon < < < В раздел > > > Комментарии

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

10 комментариев на «Что такое язык HTML и для чего он нужен»

  1. Бахтияр говорит:

    Прекрасно!Все очень понятно.Спасибо.

  2. stariс говорит:

    Эт очень хорошо, что всё понятно, тёзка. На днях начну публиковать процесс изучения javascript и jQery. Заглядывай.

  3. Сергей говорит:

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

  4. Сергей. говорит:

    Очень хорошо что есть такие люди как Вы большое спасибо вам за подробный рассказ. Буду учить язык HTML и css что бы переделать сайт. Сейчас пытаюсь сделать новый сайт на WordPress . Потому что этот уже устарел, технологии двигаются вперед. Но столько всего не понятного, с вашими объяснениями становится что то понятно.

  5. Татьяна говорит:

    Очень познавательное содержание статьи. Спасибо. Теперь понятно стало что такое HTML/

  6. stariс говорит:

    Юрий — это мой папа. Я же Сергей. Конечно заходите и спрашивайте. Вообще-то я предполагал, что Вы с html и scc давно знакомы. Уж больно сайт у Вас хороший.

  7. Людмила говорит:

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

  8. stariс говорит:

    Так-так, прогресс налицо — применили спецсимволы в комментариях. Всё OK.
    На клавиатуре конечно же угловые скобки, но их можно использовать и как знаки больше или меньше.
    Вы ведь сейчас на своём сайте работаете только в визуальном режиме редактора. В нём можно писать так как есть. Хочешь — как скобки, хочешь — как знак больше-меньше.
    А вот в режиме «Текст», они уже будут только скобками, и обозначать тег.
    В Notepad они тоже, только скобки. А больше-меньше пишется спецсимволом.
    Кеш в Chrome чистится так: Вверху экрана справа, три чёрные, жирные полоски, щёлкаете по ним, откроется меню, выбираете «Настройки», когда откроются, в самом низу будет «Показать дополнительные настройки», щелкаете по этой надписи, находите «Личные данные», а в них «Очистить историю», щёлкаете по «Очистить историю», откроется диалоговое окно, в строчке «Удалить указанные ниже элементы», выбираете «За всё время», затем ставите галочку в чекбоксе «Изображения и другие файлы сохранённые в кеше», в других чекбоксах галочек быть не должно, если есть то снимите, затем «Очистить историю». И всё.

  9. Марина говорит:

    доброго-предоброго Вам дня.
    читаю, вот, очень интересно. но …Вы мне только скажите, то, что на клавиатуре >< это угловая скобка или это знак больше и меньше?
    а браузер у меня — хром. подскажите насчёт, как почистить кэш.
    спасибо

  10. ddfghfhfh говорит:

    Познавательно

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *