Урок HTML для начинающих. Урок первый

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

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

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

Для лучшего восприятия HTML мне бы хотелось немного потревожить ваше воображение. Представьте себе человека. У него есть голова, шея, туловище и ноги. HTML, подобно человеку: также имеет «голову», «тело» и «ноги».

Под «головой» подразумевается вся служебная информация о создаваемой Web-странице. «Тело» несет в себе всю информацию документа со всеми его элементами: картинками, текстом, таблицами, формами, кнопками, графическим дизайном и т.д. «Ноги» хранят информацию об авторе и его правах, дате создания сайта, компании и т.д.

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

  • «Существует 2 вида тегов: парные и одиночные. Парные всегда имеют открывающий тег и закрывающий тег. Одиночные теги имеют только открывающий тег и не требуют закрывающего»
  • «Любой HTML-документ начинается и заканчивается специальными тегами <html> и </html>»
  • «Правила открытия и закрытия парных тегов осуществляется в следующем порядке: <p><a><strong>содержимое</strong></a></p>»
  • «Теги делятся на две группы: блочные и строчные. Блочные теги могут содержать в себе как блочные теги, так и строчные. Строчные теги могут содержать в себе только строчные теги»
  • «Основное содержимое сайта находится в пределах тегов <body> и </body>»
  • «Все теги HTML могут быть записаны как строчными и прописными буквами. Нет жесткого правила для написания тегов большими или маленькими буквами. Запись </code> или <code> будет прочитана браузером одинаково, и не будет считаться ошибкой в любом варианте. Поэтому можете записывать теги, как вам удобно: БОЛЬШИМИ или маленькими буквами»

Это самые основные правила, соблюдая которые вы избежите самых банальных ошибок. Об этих правилах «трубят» все уроки для чайников. Сейчас я покажу, как выглядит простейшая структура Web-страницы, написанная на HTML.

Основные теги HTML документа записываются следующим образом:

Итак, теперь давайте разберемся, что к чему.

  • <HTML> — начало web-документа (html-документа)
  • <HEAD> — начало блока служебной информации
  • <TITLE> — определяет заголовок, который отображается в заголовке окна браузера и отображается при выдаче в поисковых системах, как основной заголовок в виде ссылки на ваш сайт
  • </HEAD> — конец блока служебной информации
  • <BODY> — начало тела документа, т.е. всех элементов, которые будут отображены в окне браузера, как целостный сайт
  • </BODY> — конец тела документа
  • </HTML> — конец документа HTML

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

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

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

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

P.S. Ну что, понравилась статья? Дальше будет только интереснее! Поэтому смело подписывайтесь на мои обновления блога и будьте в курсе происходящего! Вас ждут интересные и полезные статьи, конкурсы, опросы и много чего интересного! Также можете порекомендовать мои уроки своим друзьям в социальных сетях, кликнув по иконкам социальных сетей, чуть ниже этого сообщения.

Понравилась статья? Поделитесь с друзьями!

0


This Post Has Been Viewed 5 Times

Автор статьи: , дата публикации

Читайте также на моем блоге:

  • Зачем нужен хостинг для сайта
  • Какой хостинг выбрать: платный или бесплатный?
  • Как выбрать хороший хостинг для сайта
  • Выбираем дешевый и качественный хостинг!
  • Конструктор сайтов Юкоз — обзор возможностей
  • Ucoz — создать сайт стало проще!
  • Перед тем как создать блог или сайт
  • Секреты размещения сайта в интернете! Разбираемся, что к чему!
  • Научиться создавать сайты очень просто! Бесплатно! Самому! Сейчас!
  • Программы необходимые каждому блогеру
Читатели оставили 3 комментария к этой статье:
  • МойХозяин, 19.04.2013 в 23:39

    Плагиат,свое не нить придумай...

  • Олег Астанин
    Олег Астанин, 19.04.2013 в 23:42

    Я писал статью с нуля. Со своих знаний. Абсолютно не пользовался ни какими дополнительными источниками информации. Я не заставляю вас читать мой блог. Все что на блоге — все мое.

  • Амир03.04.2016 в 02:30

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

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

(обязательно)

(не будет опубликовано, обязательно)

Вебсайт (если есть)

  • Получайте оповещения о выходе новых статей на Ваш E-mail. Для этого, введите Ваш E-mail и нажмите Enter.

  • Рубрики

  • Присоединяйся ко мне!

    Группа
    Вконтакте

    Канал на
    You Tube

    Я на
    Twitter