Основы HTML

HTML (произносится как «Эйч Ти Эм Эль») представляет собой язык разметки документов, предназначенных для просмотра в браузере. Посредством этого языка мы указываем (размечаем), как будет выглядеть страница, где станет располагаться текстовое поле, изображение или иной элемент.HTML & CSS

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

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

Основы HTML

Написание кода HTML носит название «верстки». Для написания можно открыть любой текстовый редактор (например, простейший Блокнот, Word или более продвинутый – Sublime Text). Рассмотрим, из каких тегов формируется данный код.

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

Первый тег – <html>, является парным. Он ставится в самом начале и дает понять компьютеру, что это html-страница. Самый последний тег на странице – </html>.

Далее идут парные теги <head> </head> и <body> </body>. Знающие английский смогут провести аналогию страницы с человеком: head – голова, body – тело.

Между открывающим и закрывающим тегами <head> ставятся <title> </title>. Если вы напишете между тегами тайтл текст, он станет показываться в названии страницы браузера. Также между <head> </head> прописывается тег <META>, указывающий особенности страницы (ключевые слова, язык и т. д.).

Теги <body> </body> заключают в себе само содержание (контент) страницы – текст, изображения, музыка, видео, ссылки и прочее.

Теперь создадим интернет-страницу. Откройте текстовый редактор и скопируйте в него нижеприведенный код:

<html>

<head>

<meta charset="utf-8">

<title> Основы HTML </title>

</head>

<body>

Текст (можете написать все, что угодно).

</body>

</html>

Сохраните документ с расширением .html и откройте его в любом браузере. Вы должны увидеть обычную белую страницу и написанный вами текст между тегами <body>.

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

Наиболее распространенные теги

  1. Заголовки указываются тегами от <h1> Заголовок первого уровня </h1> до <h5> заголовок пятого уровня </h5>.
  2. Абзацы оформляются тегами <p> </p> (закрывающий можно не использовать).
  3. Для разрыва строк применяется <br> (одиночный тег).
  4. Для выделения текстом полужирным имеются парные теги <strong> или <b>, курсивом - <em> или <i>. Можно сделать текст одновременно полужирным и курсивом, однако соблюдайте принцип вложенности: <b> <i> </i> </b>.
  5. Для составления маркированного списка используются парные теги <ul>, нумерованного - <ol>. Каждый пункт списка должен заключаться в парные теги <li>.
  6. Для вставки изображения используется одиночный тег <img>. В него прописываются два атрибута: src представляет собой путь до изображения, alt – его название. Выглядит это так: <img src="(путь и название картинки).jpg" alt="Название, отображаемое при наведении на картинку мышкой">.

Итак, мы рассмотрели основные теги HTML. А чтобы делать страницы профессиональными и красочными, необходимо изучить основы CSS.

Версия для печатиВерсия для печати