HTML (произносится как «Эйч Ти Эм Эль») представляет собой язык разметки документов, предназначенных для просмотра в браузере. Посредством этого языка мы указываем (размечаем), как будет выглядеть страница, где станет располагаться текстовое поле, изображение или иной элемент.
Существуют визуальные редакторы, которые позволяют создавать страницы 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. Далее приведем ряд простейших тегов, которыми вы будете пользоваться при создании сайта.
Наиболее распространенные теги
- Заголовки указываются тегами от <h1> Заголовок первого уровня </h1> до <h5> заголовок пятого уровня </h5>.
- Абзацы оформляются тегами <p> </p> (закрывающий можно не использовать).
- Для разрыва строк применяется <br> (одиночный тег).
- Для выделения текстом полужирным имеются парные теги <strong> или <b>, курсивом - <em> или <i>. Можно сделать текст одновременно полужирным и курсивом, однако соблюдайте принцип вложенности: <b> <i> </i> </b>.
- Для составления маркированного списка используются парные теги <ul>, нумерованного - <ol>. Каждый пункт списка должен заключаться в парные теги <li>.
- Для вставки изображения используется одиночный тег <img>. В него прописываются два атрибута: src представляет собой путь до изображения, alt – его название. Выглядит это так: <img src="(путь и название картинки).jpg" alt="Название, отображаемое при наведении на картинку мышкой">.
Итак, мы рассмотрели основные теги HTML. А чтобы делать страницы профессиональными и красочными, необходимо изучить основы CSS.
Горячие темы