Как HyperText Markup Language. HTML - это не язык программирования, это язык разметки сайта.
Все браузеры умеют преобразовывать эту разметку в удобный вид для пользователя.
В этом языке используются специальные команды, называемые тегами. У каждого тега своя функция. Существует огромное количество тегов. В идеале нужно выучить все. Но для начинающего разработчика базовых знаний вполне достаточно.
Основные команды HTMLСписок HTML-команд очень большой. Но основных не так много. Для того чтобы начать писать код, вам нужен редактор. Можно использовать "Блокнот". Рекомендуется использовать Notepad++. Он выглядит вот так.
Преимущество в том, что в специальных редакторах теги подсвечиваются определенным цветом, в зависимости от категории. Команды для создания сайта HTML в блокноте или любой другой программе одни и те же. Язык используется везде одинаковый. Среда разработки - это лишь инструмент.
В языке HTML есть закрывающиеся и незакрывающиеся теги. Также в этом языке существует понятие вложенности. Каждый объект в коде - это элемент. У элемента есть открывающий тег, закрывающий и содержимое. Более того, у тега есть свои дополнительные атрибуты со своими значениями.
На рисунке видно два тега и . Запомните, что открывающий и закрывающий пишутся одинаково, но отличаются только "/". Если тег не закрыть, то обработчик будет всё остальное считать продолжением именно этого элемента. Это очень важно. Особенно в ссылках. Их мы рассмотрим немного дальше.
Тег обязательный. Его всегда нужно писать. А вот закрывать не обязательно. По стандартам надо, но если не закрыть, работать всё равно будет.
Эти HTML-команды являются каркасом для страницы. Они обязательны. Они также закрываются.
Название тегов соответствует смыслу. Head - голова. В этом разделе указывается служебная и важная информация, которую не видно. Раздел body - тело документа. Здесь содержимое, которое отображается пользователю. Старайтесь закрывать теги сразу, чтобы потом не было путаницы.
В служебном разделе указывается:
- заголовок документа;
- файлы стилей;
- файлы скриптов;
- мета-теги;
- указания для поисковых систем;
- указания для роботов;
- любая другая информация, которая может использоваться программистами, но не пользователям.
Файл стилей подключается вот так:
Файл скриптов следующим образом:
У текста обязательно должен быть заголовок. Его указываем вот так:
Заголовок страницы
Этот текст будет отображаться в названии вкладки браузера. Также этот заголовок выводится в результате выдачи поисковой системы.
Теги для оформления текстаТекст нужно размещать в теге абзаца. Он обозначается как . Для текста также можно использовать Строка.
Оформлять текст можно, как и в "Ворде":
- курсив
- жирный текст
- перечеркнутый текст
- подчеркнутый текст
Текст можно оформлять стилями. Их мы рассмотрим в конце, после обзора других элементов.
Использование заголовковЕсть и другие важные HTML-команды. Для создания сайтов обязательно используют заголовки. Они указываются при помощи тега Заголовок первого уровня. Существуют уровни от 1 до 6. Важно понимать, что в заголовках должна быть вложенность.
Пример на рисунке.
Имейте в виду, что рекомендуется использовать только один заголовок h1. При этом он должен совпадать с тегом . Разумеется, вы можете указать 200 заголовков h1, но тогда к вам будут применены санкции со стороны поисковых систем.
Использование изображенийИзображения являются неотъемлемой частью веб-страниц. На примере показано, как можно вставить какую-нибудь фотографию.
Как видите, на примере детально показано, что и как называется.
Использование ссылокЕсли вы учите HTML-команды, то знать тег-ссылки вы просто обязаны. Это один из главнейших элементов, который составляет
В примере, указанном выше, видно, что вместо текста ссылки указана картинка. То есть можно ставить как текст, так и картинку.
Использование таблицТаблицы используются также очень часто. Изначально они предназначались для представления информации в удобном виде. Но затем верстальщики их использовали для размещения различных элементов страницы.
Таблица создается следующим образом:
Текст ячейки
Текст ячейки
Текст ячейки
Текст ячейки
Атрибут width указывает ширину таблицы. Она может быть в процентах или пикселях. Border указывает толщину рамки.
Структура указывается следующим образом. Тег tr является строкой. Тег td ячейкой. А всё вместе - это таблица.
Таблицу можно выравнивать. Для этого используется атрибут align, который может принимать три значения: Left, Center, Right. Пример использования указан ниже.
Эти HTML-команды (ширина и выравнивание) подходят и для других элементов. Толщина рамки также указывается у изображений.
Использование списковИспользуя HTML-команды, можно создать различные виды списков. Практически точно так же, как и в редакторе Word.
В языке Html существуют упорядоченные и неупорядоченные Пример такого списка.
Результат будет такой:
- Первое
- Второе
- Третье
Тип списка | Код в языке HTML |
В виде круга | |
В виде окружности | |
С квадратными маркерами |
Упорядоченные списки создаются точно так же, но только вместо
- , используем тег .
- "1" - арабские числа 1, 2, 3 ...
- "A" - заглавные буквы A, B, C ...
- "a" - строчные буквы a, b, c ...
- "I" - большие римские числа I, II, III ...
- "i" - маленькие римские числа i, ii, iii ...
- Команды в HTML называются тегами. Начинаем набирать документ с тега - название языка. Естественно, закончить документ надо будет командой . Обращаю Ваше внимание на то, что HTML - двойная команда, ее надо закрывать с помощью / , но только В САМОМ КОНЦЕ документа, иначе все, что написано после нее просто не будет воспринято.
- Следующим номером идет - то есть голова документа.
- За словом идет информация, которая будет появляться на самой верхней строчке экрана. Естественно, это должна быть какая-то приятная вещь. Или, на худой конец, информационная. Например, название документа. Она может включать до 40 символов, считая пробелы. - команда, которую надо обязательно закрывать. Для этого используется /.
- таких строк в документе может быть много, они используются, в основном, для обеспечения работы поисковых систем. Этот тег одинарный, закрывать его не нужно.
Совет от Викуси:
Набирать можно в любом текстовом редакторе, хоть в том же ворде, или notepad, но!!! запоминать как TextOnly, при этом ручками проставляя вместо расширения txt -> htm. Это я экспериментально выяснила. Я сейчас делаю так (это наиболее удобно). Вхожу в Internet Explorer (ты, наверное, тоже через него в интернет лазаешь?), но в режиме работы offline (то есть не в сети). Вхожу в меню wiew (Вид) в строку source (в виде HTML). Там открывается файл в Notepad (Блокнот). Его я не трогаю, а открываю новый. В нем все и набираю ручками (команды), сохраняю так, как написала выше. А потом через Internet Explorer просматриваю, что получилось (сразу будет в том виде, в каком надо). Чтобы открыть файл для просмотра, надо в меню File (Файл) выбрать Open (Открыть), а там браузером выбрать нужный файл. - Далее идет тeг со словами body bgcolor (определяет цвет фона),link (цвет ссылок), vlink (цвет использованных ссылок), alink (цвет активных ссылок). #ffffff белый цвет, #000000 черный цвет, #808080 нейтральный серый цвет, #0000ee ярко-синий цвет, как правило используемый для маркировки гипертекстовых ссылок, #551a8b тускло-синий цвет, как правило используемый для отработавших ссылок, #ff0000 красный цвет, удобный для обозначения активных ссылок, #c0c0c0 серебристый цвет, #800080 пурпурный цвет, #008000 зеленый цвет, #00ff00 лимонный цвет (лайм), #808000 оливковый цвет. #ffff00 желтый цвет, #0000ff голубой цвет. Для начала достаточно?
Определители цветов стоят практически в любой графической программе (типа Фотошопа). Цвет определяется шестью знаками - от 0 до f. Первые два символа отвечают за красный цвет, третий и четвертый - за зеленый, а два последние - за синий цвет. Чем "старше" символ, тем интенсивнее цвет.
Еще коды цветов можно посмотреть - Видоизменяем предыдущую строку с помощью команды BACKGROUND. risunok1.jpg можно использовать готовый, а можно нарисовать самим, например в Paint. (Пуск-Программы-Стандартные-Paint). Рисунок (пока разбираем примеры) лучше сохранить в той же самой папке, что и Домашняя страничка. Иначе придется указать весь путь до него.
- С помощью этой строки Вы вставите картинку foto1.gif по левому краю (ALIGN=LEFT), высота картинки (HEIGHT) будет 103 пикселя, ширина (WIDTH) 446 пикселей, ширина окантовки (BORDER) 10 пикселей. Если эти параметры не указать, то картинка будет такой, какая она и есть - не увеличенная и не уменьшенная, и размещаться будет без окантовки по левому краю. Если надо разместить картинку справа, пишем RIGHT вместо LEFT.
Совет от Викуси:
Чтобы привести гигантский размер отсканированной фотографии к нормальному виду надо поискать где-нибудь в программе что-нибудь типа Image size - и там поменять разрешение где-нибудь до 72 пикселей на дюйм. А в фотошопе элементарно этот размер меняется. - Слово "Александра" появится в вашем документе подчеркнутым, цвета, определенного для линков, и при нажатии на него Вы переместитесь на страничку под именем sasha в папке (директории) sasha. Как видите, команду A HREF надо закрывать с помощью /А.
- Как видите, ничего сложного. Все почти так же, как и в предыдущем примере. Слово center подразумевает расположение Вашего почтового адреса по центру. Если Вы не хотите, чтобы все дальнейшее располагалось по центру, этот тег нужно закрыть с помощью /.
- В результате ввода этой строки получится слово "однажды", написанное курсивом, "в студеную" - жирным курсивом, "зимнюю" - просто жирным шрифтом, "пору" - обычным шрифтом.
Однажды в студеную зимнюю пору...
Итак, для жирного шрифта используем , для курсива - , для их отмены и .Размещаем страничку на сервере .
-
Next
-
rootshell
-
Next
-
-
-
rootshell
Здесь также можно задать тип вывода списка:
Стандартно выводятся арабские цифры.
Поскольку это нумерованные списки, у них есть атрибут start, в котором указывается начальное значение списка. Например, можно выводить список начиная с 10-го или 20-го числа.
Использование стилейHTML-команды для сайта весьма разнообразны, но все они подчиняются стилям. Стили можно указывать в виде файла в разделе head: или прописать сразу готовый стиль.
Обратите внимание, что между этими определениями стилей есть разница. Файл стилей можно указывать во всех страницах сайта. Как только вы внесете в него изменения, то это обновление коснется всего сайта в целом. Если вы укажете стили на конкретной странице, то изменения и использование этих классов будет только внутри этого файла. За пределы него ваши настройки не выйдут.
Представьте, что у вас 20 страниц HTML и вы решили сделать заголовок на 2 пикселя больше. Если у вас всё в файле стилей, то правку внести нужно только там. Если везде индивидуально, то обновлять придется все 20 страниц.
Указывать только для одной страницы можно следующим образом.
Здравствуйте, уважаемые читатели блога. С этой статьи мы начнем изучать основы языка HTML.
Вам скорей всего уже известно, что основным языком Internet-а является язык гипертекстовой разметки HTML (HyperText Markup Language) . В этой статье мы узнаем базовые понятия HTML и научимся создавать простейшие WEB-страницы.
Начнем с самого главного, рассмотрим как работает сама всемирная паутина — Internet . Для получения веб-страниц, вы создаете файлы, написанные на языке HTML, и помещаете их на веб-сервер. После этого любой браузер установленный на устройстве с доступом в Интернет, будь то компьютер, телефон или планшет, может отыскать ваши веб-страницы.
Веб-сервер — это обычный компьютер со специальным программным обеспечением, имеющий доступ в Интернет. Он непрерывно ожидает запросов от браузеров на веб-страницы, изображения, аудио- и видео-файлы. Получив запрос на один из таких ресурсов, сервер ищет его и высылает браузеру.
Браузер — это специальная программа, предназначенная для просмотра веб-сайтов, например Internet Explorer. При помощи браузера вы бродите по сайтам, щелкая по ссылкам. Любой такой щелчок заставляет браузер сделать запрос на html-страницу web-серверу, получить ответ и отобразить страницу в своем окне. Именно при отображении страницы начинает работать язык HTML, он сообщает браузеру все о структуре и содержимом web-страницы. С помощью команд — тегов , HTML указывает браузеру, где начинаются абзацы текста, какая часть текста является заголовком и указывает куда вставлять таблицы, и даже картинки. А теги это слова в угловых скобках, например
, ,
| 1 2 |
А теперь составим простую страницу index.html с последующими комментариями:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | Название страницы Заголовок №1 страницы Подзаголовок 2 Второй блок страницы |
Название страницы .blok1 { background: #fc0; } .blok2 { padding: 2px; border: 2px dotted maroon; color: navy; } Заголовок №1 страницы Первый блок страницы с абзаца. Вторая строка блока с абзаца Подзаголовок 2 Второй блок страницы
В итоге в браузере отображается такая страница при открытии данного файла index.html:
Разберем его составные части подробнее.
Каркас документа это теги: html, head, body. Причем в тег html заключены все остальные:
| 1 2 3 4 5 6 |
Соответственно тег html объявляет об открытии для чтения и закрытии html-документа ( — открывающий тег, — закрывающий тег).
Head – это «голова» документа, в нее включена информация, которая не будет отображаться в теле документа. Соответственно body – «тело» документа, или его видимая часть.
В head мы указываем кодировку (charset=utf-8) и title страницы. Далее для приведенного варианта мы подключаем стили с помощью тега непосредственно в самом html документе. Если же, как в случае с Вордпресс, используется внешний файл стилей style.css, он подключается другим способом. Например, так:
@import url(style.css);
В нашем случае мы прописываем стили для блоков blok1 и blok2. Блоки эти мы создали внутри тегов body с помощью тегов , для которых задали соответствующий класс (class=”blok1”). Таким образом, мы связали имя класса с его стилевым оформлением.
Как видим на скриншоте, первый блок blok1 имеет желтую заливку, а blok2 заключен в рамку, а цвет его текста синий. Все это мы задали с помощью стилей css, подключенных с помощью html-тега style.
Обратите внимание на конструкцию: и запомните терминологию. Здесь style – это тег, type – атрибут, значение которого — text/css.
Также в : div – тег, class – атрибут, blok1 – значение.
Таким образом, для каждого тега можно задавать определенные атрибуты, ему свойственные.
Например, распространенный атрибут align, который задает выравнивание текстового блога, может употребляться для тегов h1, p и многих других, который предполагают наличие текста. Его значениями могут быть left, right, center и т.д.
Тег
Определяет текстовый абзац.
Вот мы и разобрались с тегами и атрибутами, которые были использованы для нашего сегодняшнего примера. Тегов существует великое множество, но для начала работы в html важно понимать логику их использования, структуру документа и основные алгоритмы его создания.
Как можно использовать HTML для WordPress блога?Во-первых, часто именно из сверстанных с помощью html и css макетов сайта, создаются новые уникальные шаблоны WordPress. Правда, для создания своего шаблона вам все же потребуется хотя бы минимальное знание PHP, чтобы преобразовать статическую страницу в динамическую.
Во-вторых, в статье про приводился пример того, как можно уникализировать бесплатный шаблон Вордпресс.
Кроме того, с помощью HTML и CSS вы можете добавлять на свой блог дополнительные функциональные элементы.
Также можно править разметку текста в html-редакторе, если не получается отредактировать текст в визуальном редакторе. Вот пример того, как вставить html-код в запись на WordPress-блоге:
Мы разобрали основные элементы и структуру страницы HTML, на примерах вы увидели, как использовать самые основные теги.
Надеюсь, данный обзор поможет начинающим разработчикам понять необходимый набор алгоритмов по изучению и применению языка гипертекстовой разметки, а также даст понимание того, с чего начать изучение HTML.
До новых встреч!
P.S. На прошедших выходных была на очередном фестивале YogArt. Йожились, пели мантры и слушали нашу любимую Карелию. Послушайте, может и вы влюбитесь в эту группу:
Все начинается с головы.Вас приветствует Мама_дома!
Устанавливаем цвет фона; цвет, размер и форму букв основного текста и ссылок.
Фон можно заменить картинкой.
Вставляем картинки и фотографии.
Александра
Вставляем свой собственный почтовый адрес.
Email: [email protected]
Изменяем шрифт.
Однажды в студеную зимнюю пору...
Совет от Викуси:
Дают место под странички бесплатно на www.hotmail.ru - 16Mb и пока без баннеров.
Ольга Павлова: Но там надумаешься каким образом свои файлы на их сервер положить. И объяснить они сами как следует не могут. Нужна программа-клиент, FAR например. Поэтому всем рекламирую narod.ru , там все очень просто.
Совет от Викуси:
Раньше я странички в FrontPage делала, но все люди, сведущие в web-дизайне, меня ногами за это били, так как, вроде, глючная программа, так что теперь и не знаю, какую программу лучше посоветовать. Я сейчас вообще просто по образу и подобию сразу теги "словами" пишу.
Совет от Кати С. :
Хочу согласиться с Викусей, что сейчас почему-то все FrontPage ругают, так что, я теперь сама решила поискать что-то другое...Может, рискну занятся Flash-ем, там говорят, море возможностей! И ещё есть очень хороший редактор, называется Allaire Home Site. А насчет размещения странички, то могу посоветовать www.ussr.to, или www.az.ru там теперь дают аж по 30Мб!!! И картинки грузятся намного быстрее, чем на narod.ru. И мне кажется, удобнее размещать и редактировать. Хотя это, вообще-то на любителя...
Таблицы
Одним из важнейших элементов HTML- документа являются таблицы. Как правило, они используются для того, чтобы располагать объекты в требуемых местах. Этот сайт создан с помощью таблиц.
Таблица открывается тегом
Заготовка таблицы будет выглядеть так:
Команда TABLE поддерживает следующие атрибуты (далее все рассмотрено на примерах):
ALIGN - задает выравнивание текста по горизонтали и может принимать значения: BLEEDLEFT (вплотную налево), LEFT (лево) CENTER (по центру) RIGHT (вправо).
BACKGROUND - Значением атрибута служит файл, задающий фоновое изображение для таблицы. Работает не во всех браузерах.
BGCOLOR - Задает цвет фона таблицы. Работает не во всех браузерах.
BORDER - Задает ширину окантовки таблицы в пикселях. Если значение атрибута равно нулю, окантовка становится невидимой.
CELLPADDING - Задает ширину пустого пространства (в пикселях) между содержимым таблицы и ее окантовкой.
CELLSPACING - Задает интервал между ячейками таблицы (в пикселях)
HSPACE - Задает размер пустого пространства в пикселях справа и слева от таблицы.
VSPACE - Задает размер пустого пространства в пикселях над и под таблицей.
WIDTH - Задает ширину таблицы
HEIGHT - Задает высоту таблицы в пикселях или в процентах от ширины окна.
Теперь создадим внутреннюю структуру таблицы. Горизонтальная табличная строка задается тегами
Команда
BACKGROUND;
BGCOLOR;
BORDER;
VALIGN - Задает выравнивание текста по вертикали
и может принимать значения: TOP (по верхней части) MIDDLE (по средней части) BOTTOM (по нижней части) BASELINE (по базовой линии).
Команда
ALIGN: BLEEDLEFT (вплотную налево), LEFT (лево) CENTER (по центру) RIGHT (вправо).
BACKGROUND, BGCOLOR,
COLSPAN - Ячейка таблицы раздвигается на количество столбцов, указанных в значении атрибута .
NOWARP - Отключает автоматическое распределение по ячейке. Будет отображаться лишь та часть текста, которая умещается в ячейке по длине.
ROWSPAN - Ячейка таблицы раздвигается на количество строк, указанных в значении атрибута .
VALIGN ,WIDTH .
Простейшая таблица три на три ячейки в HTML выглядит следующим образом:
| мы принудительно растянем ячейку таблицы таким образом, чтобы она соответствовала двум находящимся под (над) ней, как видно в приведенном ниже примере:
|