Основы HTML для начинающих

21/10/2015 комментария3 Настройка Wordpress

Привет! В сегодняшней статье я постараюсь прописать самую основную и полезную информацию для тех, кто пытается разобраться с языком гипертекстовой разметки HTML. Мы выясним его назначение, в обзоре будут описаны основные тэги и команды языка HTML и принципы работы с ним. Из статьи вы узнаете для чего и как использовать HTML на практике при работе с блогом или сайтом.

Содержание:

Что такое HTML и для чего он нужен?
Основы html верстки веб-страницы: структура и компоненты
Использование HTML для WordPress-блога

Основные цели и задачи HTML

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

HTML – это язык гипертекстовой разметки веб-страницы, который позволяет задать ее структуру, обозначить для браузера ее основные элементы. Так, для примера, заключая текст страницы в те или иные html-теги, можно оформить абзацы, списки, таблицы. Т.е. с помощью html мы даем понять браузеру, а он, соответственно, отобразит для пользователя заданную нами структуру страницы.

HTML является инструментом, так называемой, front-end разработки сайта. Что это означает? Наверняка вы уже не раз слышали, что есть такие понятия в среде создания сайтов, как front-end и back-end. Так вот, к front-end-разработке (внешний интерфейс) относятся инструменты и языки, которые отвечают за отображение сайта непосредственно для пользователя. Происходит отображение при помощи разных браузеров (Internet Explorer, Opera, Mozilla, Chrome и т.д.). Читайте о том, какой браузер самый лучший. Браузеры хорошо понимают HTML и CSS и преобразовывают полученную информацию в понятный для пользователя вид.

Back-end разработка основана на серверных языках, например, PHP. С помощью кода PHP данные сайта распознаются сервером, а далее передаются браузеру после преобразования кода специальным интерпретатором. Т.е. браузер так или иначе получает сайт в виде HTML разметки и CSS стилей. Посмотреть исходный код сайта можно, к примеру, в Firebug. Из исходного кода не всегда можно определить, на каком языке программирования написан сайт, но коды стилей CSS и теги HTML вы увидите независимо от этого.

С чего начать изучение HTML?

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

Самая новая версия языка HTML, возможности которой выходят далеко за рамки только разметки структуры текста – это HTML5. Кроме того, по сравнению с HTML4, в последней версии появилось много новых тегов, изменилась семантика.

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

Для создания html-документа будем использовать удобный редактор Notepad++.

Первое, что необходимо объявить — это тип документа со ссылкой на соответствующий ему раздел W3C:

1 2	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">

А теперь составим простую страницу index.html с последующими комментариями:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Название страницы </title>
<style type="text/css">
   .blok1 {
    background: #fc0; 
   }
   .blok2 {
    padding: 2px; 
    border: 2px dotted maroon; 
    color: navy; 
   }
 </style>
 </head>
 <body>
 <h1>Заголовок №1 страницы </h1>
 <div class="blok1"> 
Первый блок страницы с абзаца.
 
Вторая строка блока с абзаца
  </div>
<h2>Подзаголовок 2</h2>
<div class="blok2"> Второй блок страницы </div>
</body>
</html>

В итоге в браузере отображается такая страница при открытии данного файла index.html:

Разберем его составные части подробнее.

Каркас документа это теги: html, head, body. Причем в тег html заключены все остальные:

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

Соответственно тег html объявляет об открытии для чтения и закрытии html-документа (<html> — открывающий тег, </html> — закрывающий тег).

Head – это «голова» документа, в нее включена информация, которая не будет отображаться в теле документа. Соответственно body – «тело» документа, или его видимая часть.

В head мы указываем кодировку (charset=utf-8) и title страницы. Далее для приведенного варианта мы подключаем стили с помощью тега <style> непосредственно в самом html документе. Если же, как в случае с Вордпресс, используется внешний файл стилей style.css, он подключается другим способом. Например, так:

1
2
3

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

Или так:

<head>
  <style type="text/css" media="all">
    @import url(style.css);
  </style>
</head>

В нашем случае мы прописываем стили для блоков blok1 и blok2. Блоки эти мы создали внутри тегов body с помощью тегов <div>, для которых задали соответствующий класс (class=”blok1”). Таким образом, мы связали имя класса с его стилевым оформлением.

Как видим на скриншоте, первый блок blok1 имеет желтую заливку, а blok2 заключен в рамку, а цвет его текста синий. Все это мы задали с помощью стилей css, подключенных с помощью html-тега style.

Обратите внимание на конструкцию: <style type="text/css"> и запомните терминологию. Здесь style – это тег, type – атрибут, значение которого — text/css.

Также в <div class="blok1">: div – тег, class – атрибут, blok1 – значение.

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

Например, распространенный атрибут align, который задает выравнивание текстового блога, может употребляться для тегов h1, p и многих других, который предполагают наличие текста. Его значениями могут быть left, right, center и т.д.

Теги h1,h2 и далее h3,h4 задают заголовки разных уровней в тексте.

Тег <p> - определяет текстовый абзац.

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

Как можно использовать HTML для WordPress блога?

Во-первых, часто именно из сверстанных с помощью html и css макетов сайта, создаются новые уникальные шаблоны WordPress. Правда, для создания своего шаблона вам все же потребуется хотя бы минимальное знание PHP, чтобы преобразовать статическую страницу в динамическую.

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

Кроме того, с помощью HTML и CSS вы можете добавлять на свой блог дополнительные функциональные элементы.

Также можно править разметку текста в html-редакторе, если не получается отредактировать текст в визуальном редакторе. Вот пример того, как вставить html-код в запись на WordPress-блоге:

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

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

До новых встреч!

P.S. На прошедших выходных была на очередном фестивале YogArt. Йожились, пели мантры и слушали нашу любимую Карелию. Послушайте, может и вы влюбитесь в эту группу:

«Предыдущая

(2 оценок, среднее: 4,50 из 5)

Загрузка...

Нравится

Массовая замена ссылок в WordPress

Как откатить WordPress до старой версии

Личный кабинет WordPress

Tredon.ru:

22/10/2015 в 13:14

Нам в школе немного только о нём рассказывали)))

Ответить
GetSocial:

22/10/2015 в 15:33

Я бы порекомендовала посмотреть видео-уроки по HTML, благо, на ютубе их предостаточно, например у Попова.

Ответить
Erenbur:

23/10/2015 в 18:55

Аня, посоветуй пожалуйста адекватную книгу по HTML5. Простенькую, где все понятно описано.

Ответить