Веб программирование

Изучение HTML и CSS. Урок 1. Для чего нужен HTML? Структура HTML

 
 

Всем привет! Многие наверное много слышали о расширении .html, но наверняка вы знаете только лишь что это расширение веб-страницы. Но что же такое HTML? HTML-язык разметки веб-страниц. То есть в коде HTML заложена структура страницы, где что находится, а веб-браузер отображает это так, как описывается в HTML. Сам HTML тоже текст, поэтому как код его можно открыть в любом текстовом редакторе(например в блокноте). 
Теперь рассмотрим структуру HTML. 


<html>
<head> 
</head>
<body>
</body>
</html>

Итак в HTML есть теги-области, для обозначения различных типов. Ключевые слова тегов хранятся внутри знаков < и > и пишутся первыми. После названия тега идут не обязательные атрибуты(свойства). Кроме одиночных тегов, теги могут хранить в себе текст(либо другие вложенные теги) внутри открывающего тега(перед) и закрывающего(после). Разница только в знаке "/" после "<" перед закрывающим тегом. Рассмотрим некоторые теги:

  • HTML-Главный тег
  • HEAD-Этот тег не отображает информацию на странице, но может быть полезен для поисковиков, также в нём находится тег заголовка страницы(title).
  • BODY-Тег предназначенный для отображения текста и других визуальных тегов в нём.
  • P-Тег абзаца. Напомню что в HTML весь текст отображается в строчку-это позволяет писать код и в строчку и в список, но для текста это минус. Поэтому заключая абзацы в тег P, он автоматически разделяется по абзацам.
  • H1, H2, H3, H4, H5, H6-Теги заголовка(чем больше цифра, тем меньше заголовок). Он отличается полужирным крупным шрифтом и даёт ключевые слова для поисковиков.
  • PRE-текст в этом теге отображается так, как написан в коде(учитываются переносы строк в коде, размер шрифта в коде и шрифт).
  • SPAN-тег, никак не влияющий на отображение текста, служит для задания определённому тексту оформления с помощью атрибутов.

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

Для поддержки русского языка нужно в теге meta внутри head указать атрибут charset со значением "utf-8".

Итак, вот небольшой пример кода HTML с заголовком "MySite", выводящего Заголовок H1 "Мой первый сайт" и несколько абзацев.


<html>
<head> 
<meta charset="utf-8"> 
<title>MySite</title> 
</head>
<body>
<h1> Мой первый сайт</h1>
<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац</p>
</body>
</html>

Есть вопросы? Спроси на нашем форуме!!
Нет комментариев

Оставлять комментарии можно только зарегистрированным




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