Основы Html на WordPress

Мы уже говорили о том, как можно создать без особых знаний сайт на популярном движке WordPress. Большая часть действий, которые вы выполняете при работе с этим движком, не требует знания внутренней структуры web-страниц, а совершаются напрямую из удобной административной панели. Но наверняка настанет момент, когда вы захотите создавать более сложные вещи и проекты, и тут уже никуда без более глубоких знаний о принципах функционирования сайтов. И начинать следует с языка гипертекстовой разметки – HTML.

Как вы наверняка знаете, для создания сложных и функциональных сайтов, нужно знать языки программирования. И первым среди них по значимости для web- мастера идет именно HTML. Практически любая страница в интернете, отображаемая в браузере – это HTML код. Если быть точным, HTML – это не язык программирования. Но его знание – первый шаг к полноценному web- программированию, в html присутствуют элементы, встречающиеся практически во всех языках программирования – тэги, атрибуты, классы и т.д. К тому же, изучить основы HTML весьма просто.

Что же можно делать при помощи HTML? Можно произвольным образом размещать на странице различные элементы – текст, картинки, ссылки, различные формы. Можно контролировать их внешний вид и создавать панели навигации и меню. Можно создавать общую структуру страницы и заниматься Web- версткой. С помощью HTML не получиться сделать страницу интерактивной (реагирующей на действия пользователя) — для этого есть языки программирования. Также не получиться создавать сайты со сложным дизайном и красивыми эффектами — для этого есть CSS. Но начинать в любом случае нужно с HTML, так как это самая основа WEB- дизайна и программирования.

Итак, HTML – это общий стандарт разметки WEB-документов в Интернете. Первая официальная версия HTML вышла в 1995 году, в настоящий момент разрабатывается уже 5-я версия. Все они имеют небольшие отличия, и документы написанные на различных версиях, могут по- разному отображаться в браузерах.

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

Теперь немного пробежимся по основным параметрам HTML.

Итак, любой HTML код состоит из тегов. Теги – это открывающиеся и закрывающиеся скобки, которыми обозначают начало и конец любого элемента страницы. Элемент может содержать в себе различную информацию, к примеру — текст, картинку, ссылку. Элементы могут содержаться в открывающихся и закрывающихся тегах — <> элемент</>, так и в обычных тэгах — <>элемент<>. В примере показаны пустые теги, хотя в тэгах всегда должно содержаться его название. В html существует довольно много различных тэгов, каждый из которых выполняет определенные функции. Самые распространенные основные теги — <p> (абзац), <div>(начало и конец блока), <br>(отступ строки), <b>(выделение жирным), <a> (ссылка), <img> (вставка картинки), <font> (шрифт) и другие. На практике постоянно встречаются довольно мало различных тегов, поэтому вы очень быстро их выучите.

Теги могут содержать внутри себя атрибуты. Атрибут – это какой-либо параметр, который мы хотим придать тегу. К примеру, рассмотрим такую строчку: <p align=”center”>абзац выравнивается по центру страницы</p>. Итак, мы заключили строчку текста в тег абзаца — <p>. Таким образом, мы хотим сделать строчку в виде абзаца. Далее, внутри первого тега, после его названия, мы прописали атрибут, который мы хотим применить к абзацу. В данном случае, мы применили атрибут align – выравнивание. И затем, мы указали значение для атрибута – сenter. Это значит, что мы выровняли абзац по центру страницы. Значение атрибута всегда указывается в скобках. Самые распространенные атрибуты – align (выравнивание), href (ссылка), src (вставка картинки), size (размер), color (цвет) и другие. Многие атрибуты являются общими для большинства тегов, но не все атрибуты подходят ко всем тегам.

Запомните общую схему создания тегов, атрибутов и параметров:

<тэг атрибут=”параметр”> элемент страницы</тэг>. Как видите, все просто.

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

Всем доброго дня. Сегодня мы продолжим изучать основы языка гипертекстовой разметки веб-страниц – Html. В предыдущем, вводном уроке мы в кратком виде рассмотрели основную конструкцию, из которых состоит html- код:

<тег атрибут = ”параметр” > элемент страницы </тег>.

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

Теги, присутствующие в обязательном порядке на всех веб-страницах:

<html> </html> — теги, с которых начинается и заканчивается html- документ

<head> </head> -теги заголовка страницы, в нем прописываются данные, которые не отображаются в основной структуре документа.

<title> </title> — обязательный тег внутри тегов head. В нем прописывается название страницы, отображающееся в веб-браузерах.

<body> </body> — теги, в которых отображается основное содержание документа и все его элементы.

У тега body имеется несколько атрибутов, которые можно использовать в своих документах. Атрибуты body: bgcolor – задает цвет фона страницы text – указывает цвет шрифта в документе link – цвет ссылок на странице

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

Зная эти теги, можно написать свою первую html страницу. Правда она будет пустой, отображаться будет только заголовок (title). В тело документа (теги body) можно вставить любой текст, и он отобразиться в браузере, если задать файлу расширение html.

Продолжим рассматривать основы html и поговорим о других наиболее важных тегах и их атрибутах.

Атрибуты, применяемые к тегу body, распространяются сразу на весь документ. Но применять теги и атрибуты можно и к отдельным частям страницы, например – к тексту. Если нужно отредактировать часть текста, то нужно воспользоваться тегом <font>. Для задачи нужных параметров нужно воспользоваться атрибутами тега.

Атрибуты тега Font: size – атрибут размера шрифта color – атрибут цвета face – тип шрифта (например, Arial).

Приведем следующий пример:

<font size=”7” color=”green” face=”Arial”> Текст размера 7 и зеленого цвета</font>.

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

Обычно, текст на странице html-документа идет не единым массивом, а разбивается на абзацы. Абзац в html делается с помощью тега <p>.Данный тег имеет лишь один атрибут – align. Он выравнивает абзац по левому и правому краю, или по центру страницы. Пример:

<p align=”center”>Абзац выравнивается по центру</p>

Теперь рассмотрим, как можно вставить в веб-страницу ссылку. Как вы уже наверное заметили, текст можно вставлять в html без всяких тегов. А вот в отношении других элементов все не так просто, нужны специальные теги. Ссылка вставляется с помощью тега <a> и атрибута href. Выглядит все это следующим образом:

<a href=”digital-fantasy.ru”>Текст, при нажатии на который, будет открываться страница, на которую поставлена ссылка</a>.

Таким образом, мы заключили фрагмент текста в ссылку.

Думаю, на сегодня достаточно, читайте следующие уроки по основам html. Удачи!

comments powered by HyperComments

Оставьте мне собщение