Все начинается с головы.
Вас приветствует Мама_дома!
Команды в 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 пикселей на дюйм. А в фотошопе элементарно этот размер меняется.
. Вся информация, содержащаяся внутри таблицы должна располагаться между этими тегами. В открывающем теге таблицы следует поместить атрибут BORDER, который устанавливает толщину линии
таблицы. Если BORDER=0, то линия таблицы видна не будет.
Заготовка таблицы будет выглядеть так:
Команда 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 выглядит следующим образом:
Введя эти команды в HTML документ, Вы получите на экране следующее изображение:
Помните, что таблица представляет собой элемент изображения, в принципе ничем не отличающийся от графического образа или строки текста. Ее можно располагать по центру, левой или правой кромке экрана точно так же, как и любой другой объект.
С помощью атрибута CELLPADDING можно задать размер пустого пространства между содержимым таблицы и ее окантовкой, как это видно в следующем примере:
В результате его выполнения на экране мы увидим следующее:
Как видно из примера, по умолчанию таблица принимает форму содержащихся в ней строк. Ширина каждого столбца во второй и третьей строках автоматически выставляется такой же, как и в первой строке. Такое форматирование может быть изменено с помощью атрибутов COLSPAN и ROWSPAN, которые объединяют ячейки таблицы по горизонтали и по вертикали. Написав, допустим,
мы принудительно растянем ячейку таблицы таким образом, чтобы она соответствовала двум находящимся под (над) ней, как видно в приведенном ниже примере:
После выполнения этот пример выглядит так:
Размеры таблицы определяются введенными в нее строками (или графическими образами) только в том случае, если эти размеры никак не заданы принудительно. Их можно задать, введя в тег
ширину и (или) высоту таблицы при помощи атрибутов WIDTH и HEIGHT. Значения этих атрибутов можно задавать в пикселях (при этом размеры таблицы будут определены жестко вне зависимости от размера окна просмотра), или в процентах от ширины или высоты окна просмотра. Для указания ширины или высоты в процентах следует поставить после цифрового значения атрибута знак % (например HEIGHT=25%).
Попробуем задать нашей таблице ширину 500 пикселей и высоту 200 пикселей:
На экране результат выполнения этих строк будет выглядеть так:
Теперь мы можем отформатировать расположение текста в каждой ячейке. Для этого используются атрибуты ALIGN и VALIGN. Следующий пример показывает возможности такого форматирования. Не забывайте, что значения атрибутов ALIGN и VALIGN нужно писать только большими буквами.
После выполнения этот текст выглядит так:
Вид таблицы можно модифицировать, задавая различную толщину окантовки таблицы и ее разделительных линий. Для задания толщины окантовки используется атрибут BORDER тега
, как это видно из примера:
Результат выполнения этого примера будет таким:
Разделительные линии таблицы модифицируются при помощи атрибута CELLSPACING, значением которого является толщина линии в пикселях, как это видно из примера:
При выполнении этот пример выглядит так:
HTML-теги
— основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке.
Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега.
Все HTML-элементы делятся на пять типов:
пустые элементы
— , , , , , , , ,
Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке может быть несколько тегов , так как в зависимости от используемых атрибутов они несут разную информацию.
Индикатор измерения в заданном диапазоне.
Раздел документа, содержащий навигационные ссылки по сайту.
Определяет секцию, не поддерживающую сценарий (скрипт).
Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег .
Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.
Контейнер с заголовком для группы элементов .
Определяет вариант/опцию для выбора в раскрывающемся списке , или .
Поле для вывода результата вычисления, рассчитанного с помощью скрипта.
Параграфы в тексте.
Определяет параметры для плагинов, встраиваемых с помощью элемента .
Элемент-контейнер, содержащий один элемент и ноль или несколько элементов . Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение.
Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д.
Индикатор выполнения задачи любого рода.
Определяет краткую цитату.
Контейнер для Восточно-Азиатских символов и их расшифровки.
Определяет вложенный в него текст как базовый компонент аннотации.
Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе , выводится уменьшенным шрифтом.
Отмечает вложенный в него текст как дополнительную аннотацию.
Выводит альтернативный текст в случае если браузер не поддерживает элемент .
Отображает текст, не являющийся актуальным, перечеркнутым.
Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом.
Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src .
Определяет логическую область (раздел) страницы, обычно с заголовком.
Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в .
Отображает текст шрифтом меньшего размера.
Указывает местоположение и тип альтернативных медиаресурсов для элементов , , .
Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.
Расставляет акценты в тексте, выделяя полужирным.
Подключает встраиваемые таблицы стилей.
Задает подстрочное написание символов, например, индекса элемента в химических формулах.
Создаёт видимый заголовок для тега . Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка.
Задает надстрочное написание символов.
Тег для создания таблицы.
Определяет тело таблицы.
Создает ячейку таблицы.
Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
Создает большие поля для ввода текста.
Определяет нижний колонтитул таблицы.
Создает заголовок ячейки таблицы.
Определяет заголовок таблицы.
Определяет дату/время.
Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
Создает строку таблицы.
Добавляет субтитры для элементов и .
Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
Создает маркированный список.
Выделяет переменные из программ, отображая их курсивом.
Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
Указывает браузеру возможное место разрыва длинной строки.
Таблица-шпаргалка с тегами
Для удобства пользования я сгруппировала теги по тематическим разделам, добавив значения свойства display для каждого тега. Чтобы перейти к таблице, кликните по рисунку.
Термины
Приведем некоторые термины, которые вам будут встречаться далее.
WWW
- общеизвестная аббревиатура World Wide Web, синоним Интернета.
Web
- сокращенное название World Wide Web.
Веб-страница (Web Page)
- отдельный документ (текстовый файл, подготовленный специальным образом), хранящийся в Интернете.
Веб-браузер
- программное обеспечение, необходимое для вывода на экран веб-страницы.
Сайт (site)
- набор веб-страниц, принадлежащих одному владельцу.
Домашняя страница (Home Page)
- главная (титульная) страница сайта.
URL
- унифицированный указатель ресурсов (Uniform Resource Locator), используется для указания адреса страницы в WWW.
Веб-сервер
- компьютер со специальным программым обеспечением, на котором должны помещаться веб-страницы, для того, чтобы их можно было увидеть в Интернете.
Что такое гипертекст?
Основное достоинство WWW состоит в создании гипертекстовых документов, и если вас заинтересовал какой либо пункт в таком документе, то достаточно «ткнуть» в него курсором для получения нужной информации. Также в одном документе возможно делать ссылки на другие, написанные другими авторами или даже расположенные на другом сервере. Одно из главных преимуществ WWW над другими средствами поиска и передачи информации - «многосредность». В WWW можно увидеть на одной странице одновременно текст и изображение, звук и анимацию. Очень кратко об истории гипертекста можно прочитать на сайте Артемия Лебедева.
Что такое HTML?
HTML расшифровывается как H
yper T
ext M
arkup L
anguage, т.е. язык разметки гипертекста. Это стандарт, в соответствии с которым веб-документы отображаются браузерами. Как ясно из названия, HTML - это метод разметки простого текста таким образом, чтобы браузер отображал информацию в нужном формате. Файлы, содержащие текст с html-разметкой, должны иметь расширение htm
или html
.
Команды языка HTML называются тегами (tag), они указывают, какую операцию необходимо выполнить, например, вывести на экран текст, нарисовать линию или использовать графику. Содержащиеся в тексте теги могут изменять шрифты, стили и создавать специальные эффекты. Это позволяет обеспечить интересный графический интерфейс при отображении стандартного текстового файла. Кроме изменения стиля текста, HTML также сообщает браузеру, когда некий текст на странице должен считаться гипертекстовой ссылкой, в каком месте вставить графические и специальные элементы, команды отправки почты и другие специальные возможности.
HTML не является языком программирования в полном смысле слова. У него специфический формат, который является мировым стандартом. Этот стандарт называется Document Type Definition
(Определение типа документа), или DTD.
Первым DTD-стандартом на HTML, представленным в Интернете, была версия 1.0. Затем была создана версия 2.0 для WWW, более продуманная. Сейчас стандартом является HTML версии 4.0.
Структура команд языка HTML
Команды (теги) языка HTML заключаются в угловые скобки:
- начало команды
поле действия команды
- конец команды
Стандарт языка HTML требует обязательного присутствия тега «конец команды», кроме особо оговоренных случаев.
Самой первой командой html-документа является команда , соответственно самой последней командой будет - (произносится«не html»
).
А в целом, структура html-документа имеет следующий вид:
т.е. четко выделяются два раздела: («голова») и («тело»).
ЗАМЕЧАНИЕ.
Язык HTML не чувствителен к регистру. Команды языка могут набираться как прописными так и строчными буквами, т.е. команда эквивалентна команде или . Если браузер не поддерживает команду, он ее просто игнорирует.
Самой первой строкой html-документа является служебная команда, которая позволяет броузеру идентифицировать тип документа (DOCTYPE), как документ в стандарте HTML 4.0, определенном IETF (Internet Engineering Task Force). В этой строке также указывается соответствующий DTD (Document Type Declaration - описание типа документа): документ есть PUBLIC (т.е. не зависит от системных установок) и язык документа - русский (RU).
В головной части html-документа располагается команда, выводящая название страницы в заголовок окна браузера (синяя полоса в самом верху окна):
Название страницы
Собственно текст, который должен быть в html-документе, помещается между командами и , например:
Пример HTML-текста
Добро пожаловать в HTML!
Для того, чтобы увидеть как будет выглядеть этот пример в браузере, необходимо все скопировать в Блокнот, сохранить файл под именем primer.htm
, а затем в Проводнике щелкнуть мышью по названию файла - в результате этого данный html-документ автоматически откроется в окне Internet Explorer:
Атрибуты
Команды могут иметь параметры, которые называются атрибутами
. Атрибуты модифицируют исполнение команды, ставятся сразу после названия команды, внутри угловых скобок, и имеют следующий формат:
АТРИБУТ="значение_атрибута"
Если значение_атрибута состоит из одного слова, то ставить кавычки не обязательно. Если же значение_атрибута содержит пробелы или небуквенные символы, то кавычки обязательны.
Если команда имеет несколько атрибутов, то они разделяются пробелами:
В качестве примера атрибутов рассмотрим команду , которая задает кодировку Windows для букв русского алфавита и располагается строго внутри
раздела :
Пример атрибутов
Если же команду пропустить, то возможны ситуации, когда на экране браузера вместо русских букв будут «кракозябры». А при использовании этой команды такого не произойдет!
Html-редакторы
Все html-документы записываются как обычный текст, поэтому могут быть созданы и отредактированы в любом текстовом редакторе, например, в Блокноте. Но гораздо удобнее использовать специализированные html-редакторы, например UltraEdit
(лицензионный) или Smart Web Builder
(бесплатный).
В этих редакторах все команды языка HTML отображаются одним цветом, а атрибуты команд - другим. Тогда как просто текст будет черного цвета. Благодаря этому, если в названии команды (или атрибута) будет допущена ошибка, оно отобразится черным цветом, как обычный текст.
Цвет в html-документе
Команда имеет несколько атрибутов.
Атрибут bgcolor= позволяет задать цвет фона страницы:
Эта страница имеет желтый фон.
Задание цвета можно производить двумя способами:
Заданием имени выбранного цвета.
Заданием номера цвета в виде соотношения оттенков красного, зеленого и синего (Red-Green-Blue=RGB).
RGB-номер цвета задается либо тремя двухзначными шестнадцатиричными (HEX) числами (перед номером обязательно ставится знак #), либо с помощью встроенной функции rgb(), каждый из трех аргументов которой может меняться от 0 до 255, например: rgb(153,102,255). Каждое число из интервала () определяет интенсивность соответствующего цвета.
Например, номер цвета "#FF0000"=rgb(255,0,0) соответствует красному цвету (Red), так как имеет максимальную интенсивность для красной составляющей, а зеленая и голубая составляющие имеют значения равные нулю. Аналогично, номер "#00FF00"=rgb(0,255,0) соответствует зеленому цвету (Green), а номер "#0000FF"=rgb(0,0,255) - синему (Blue).
Существуют 16 стандартных имен цветов, поддерживаемыми Windows:
Black = "#000000"
Green = "#008000"
Silver = "#C0C0C0"
Lime = "#00FF00"
Gray = "#808080"
Olive = "#808000"
White = "#FFFFFF"
Yellow = "#FFFF00"
Maroon = "#800000"
Navy = "#000080"
Red = "#FF0000"
Blue = "#0000FF"
Purple = "#800080"
Teal = "#008080"
Fuchsia = "#FF00FF"
Aqua = "#00FFFF"
Помимо этих 16 имен цветов, существует еще расширенная таблица цветов. Названия цветов из этой таблицы использовать можно, но все же надежнее задавать RGB-номер. Дело в том, что хотя задание Red-Green-Blue теоретически позволяет выводить «миллион» цветов, на самом деле все определяется видеокартой и монитором, которые использует клиент.
При создании изображения для публикации в Интернете главной проблемой является правильная передача цветов на разных типах компьютеров, мониторов и браузеров. Когда браузер не в состоянии правильным образом передать тот или иной цвет, он подбирает другой цвет или смешивает несколько соседних цветов. Иногда цвет может быть заменен на что-то совершенно неподходящее. Поэтому была разработана так называемая«безопасная» палитра цветов. При использовании цветов из этой палитры вы можете быть уверены в том, что каждый цвет будет передан правильным образом и без искажений. Любой из 216 цветов «безопасной» палитры может быть использован для графики, текста и фонов. Палитра состоит из 32 сочетаний 6 оттенков красного, зеленого и синего.
Заголовки
Язык HTML имеет шесть уровней заголовков, имеющих номера с 1 по 6 (заголовок первого уровня является заголовком самого большого размера). По сравнению с нормальным текстом, заголовки выделяются жирным шрифтом автоматически.
Синтаксис заголовков:
Самый большой заголовок, расположенный по центру
Средний по размеру заголовок, расположенный как?
Самый маленький заголовок
здесь h - собственно команда задания заголовка (Header
), а число от 1 до 6, определяет размер заголовка, align= - атрибут, задающий расположение заголовка на экране: align=left - разместить слева (принято по умолчанию, т.е. можно не указывать) align=center - разместить по центру окна align=right - разместить справа в окне браузера.
Абзацы
Команда задания абзаца
Также имеет атрибут align=, который, кроме указанных выше трех значений, может иметь еще значение justify:
устанавливающее выравнивание правого края текста на экране (как это сделано в данном тексте).
В отличие от документов, созданных в редакторе Word, в html-документах прерывания строк не существенны. Обрыв строки может происходить на любом пробеле в вашем исходном файле, при просмотре это прерывание будет проигнорировано. Например:
Глава 1
Добро пожаловать в HTML!
Здесь будет рассказано, как надо и как не надо делать веб-страницы.
Это не так сложно.
В исходном файле два предложения первого абзаца находятся на двух разных строках. Браузер игнорирует это перерывание строки и начинает новый абзац только после команды
Используя команду можно перейти на новую строку, не начиная нового абзаца (в большинстве браузеров абзацы выделяются дополнительными пустыми строками). Например, строка
Факультет на котором мы учимся
Неразрывный пробел
Поскольку браузер игнорирует перерывание строки в html-файле, где на самом деле закончится одна строка на экране и начнется другая - зависит от размера шрифта на экране у клиента. Кроме того, браузер игнорирует и любое количество пробелов между словами - все пробелы заменяются одним
. Поэтому, если требуется поставить подряд несколько пробелов, применяется так называемый символьный примитив
«неразрывный пробел», который начинается амперсандом (&) и заканчивается точкой с запятой: (сокращение от Non Break SPace
).
Символьные примитивы чувствительны к регистру: НЕЛЬЗЯ использовать &Nbsp; вместо.
Например, строка
Факультет на котором мы учимся
будет выглядеть на экране так:
Так как браузер обрывает строку на пробеле, то возможна ситуация, когда, например, инициалы останутся на одной строке, а фамилия «переедет» на другую. Чтобы этого не происходило, между инициалами и фамилией обязательно следует ставить неразрывный пробел.
В русской типографике существуют жёсткие правила расстановки символа неразрывного пробела.
Символ неразрывного пробела
(обозначим его как ) ставится в следующих случаях.
Перед тире: Это - пример т.е. тире не имеет права начинать строку, если это не начало предложения с прямой речью.
Между двумя инициалами и инициалами и фамилией: И. И. Иванов т.е. вариант совсем без пробелов: И.И.Иванов - категорически недопустим!
Между знаком номера (№) или параграфа (§) и идущими следом цифрами: № 7, § 3 и здесь вариант без пробела: №7 - типичнейшая грубейшая ошибка!
Между числом и идущей следом единицей измерения: XVIII в., 10 кг, 2000 г.
Между сокращённым обозначением и фамилией: г-н Петров
После географических сокращений: г. Новосибирск, р. Обь
Сдвиг текста
Для вывода на экран текста с небольшим сдвигом вправо (от левого края экрана), например стихов, применяются команды :
Факультет на котором мы учимся
будет выглядеть на экране так:
Cписки
Сегодня списки можно увидеть почти на каждой веб-странице. Существует несколько форматов списков, позволяющих выделить определенные фрагменты информации в стандартном тексте. В обычном абзаце текст переносится со строки на строку. Текст в списках выглядит по-другому. Пункты списка отступают от полей, отделены от остальных абзацев текста и, кроме того, маркированы или нумерованы.
При правильном использовании списки делают большие объемы информации легко читаемыми и хорошо заметными. Списки могут быть вложены друг в друга, образуя сложную структуру. Вы можете, например, использовать список для организации ссылок.
Существует три основных типа списков: маркированные (ненумерованные), нумерованные и списки определений. Они сходны в том, что все они располагают каждый пункт на новой строке, и вы можете выделить нужный текст. Главное различие перечисленных типов состоит в способе нумерации и структуре.
Маркированный список
Наиболее часто используется ненумерованный, или маркированный список. Каждый пункт такого списка начинается с миниатюрной пиктограммы.
Маркированный список задается командами (Unordered List), а пункты списка между командами - с помощью команды
(List Item).
Например, список
Системы счисления
Непозиционные
Позиционные
будет выглядеть так:
Команда задания списка
имеет атрибут type=, который устанавливает вид маркера у элементов списка:
- черный кружок (значение по умолчанию)
- светлый кружок
- квадратик
Если один список вложен в другой, то вид маркера меняется автоматически:
Системы счисления
Непозиционные
Древнеегипетская
Римская
Старославянская
Позиционные
Вавилонская
Индийская
На экране это выглядит так:
Нумерованный список
Нумерованный список очень напоминает маркированный. Единственным отличием является то, что в нумерованном списке перед каждым пунктом вместо графических маркеров автоматически помещаются последовательные номера или буквы. Благодаря этому вам не придется вручную набирать номер каждого пункта списка.
Нумерованный список задается с помощью команд (Ordered List) и . Как и в маркированном списке, каждый пункт задается командой
, например:
Системы счисления
Непозиционные
Позиционные
будет выглядеть так:
Как видите, в исходном файле номеров (1, 2) рядом с элементами списка нет.
По умолчанию списки HTML автоматически нумеруются с помощью арабских цифр - 1, 2, 3 и т. д. Вы можете задать другой способ нумерации, например буквы (прописные или строчные) или римские цифры. Чтобы изменить стандартный тип нумерации, добавьте в команду атрибут type=.
Ниже приведены пять возможных способов нумерации:
: стандартная цифровая нумерация - 1, 2, 3, ... : прописные буквы - A, B, C, D, ... : строчные буквы - a, b, c, d, ... : римские цифры - I, II, III, IV, V, ... : строчные римские цифры - i, ii, iii, iv, v, ...
Если необходимо, чтобы нумерация списка начиналась с определенного номера, надо добавить в команду еще атрибут start=, например,.
Вложенный список
Системы счисления
Непозиционные
Древнеегипетская
Римская
Старославянская
Позиционные
Вавилонская
Индийская
на экране выглядит так:
Список определений
Хотя списки определений используются не так часто, как маркированные или нумерованные списки, они также могут быть полезны в некоторых случаях. В списке определений для каждого пункта предоставляется не одна, а две строки, что может быть полезно когда вы приводите дополнительную информацию.
Списки определений выглядят несколько иначе, чем другие типы списков. Для задания собственно списка применяются команды (Definition List) и . Для описания каждого пункта списка в этом случае применяется две команды, а не одна. Команда (Definition Term) задает отдельный элемент, то есть определяемый термин, а команда (Definition Description) - остальную информацию, которая выводится на следующей строке с отступом. Вторая строка информации называется определением.
Пример списка определений:
ММФ Механико-математический факультет. ФИТ Факультет информационных технологий.
Как 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 ...
Стандартно выводятся арабские цифры.
Поскольку это нумерованные списки, у них есть атрибут start, в котором указывается начальное значение списка. Например, можно выводить список начиная с 10-го или 20-го числа.
Использование стилей
HTML-команды для сайта весьма разнообразны, но все они подчиняются стилям. Стили можно указывать в виде файла в разделе head: или прописать сразу готовый стиль.
Обратите внимание, что между этими определениями стилей есть разница. Файл стилей можно указывать во всех страницах сайта. Как только вы внесете в него изменения, то это обновление коснется всего сайта в целом. Если вы укажете стили на конкретной странице, то изменения и использование этих классов будет только внутри этого файла. За пределы него ваши настройки не выйдут.
Представьте, что у вас 20 страниц HTML и вы решили сделать заголовок на 2 пикселя больше. Если у вас всё в файле стилей, то правку внести нужно только там. Если везде индивидуально, то обновлять придется все 20 страниц.
Указывать только для одной страницы можно следующим образом.
Привет! В сегодняшней статье я постараюсь прописать самую основную и полезную информацию для тех, кто пытается разобраться с языком гипертекстовой разметки HTML. Мы выясним его назначение, в обзоре будут описаны основные тэги и команды языка HTML и принципы работы с ним. Из статьи вы узнаете для чего и как использовать HTML на практике при работе с блогом или сайтом.
Основные цели и задачи HTML
Не так давно на моем блоге был . Из него вы можете узнать, как с помощью 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 стилей. Посмотреть исходный код сайта можно, к примеру, в . Из исходного кода не всегда можно определить, на каком языке программирования написан сайт, но коды стилей CSS и теги HTML вы увидите независимо от этого.
С чего начать изучение HTML?
Если вы серьезно настроены изучать этот язык, то советую сразу скачать какую-нибудь подробную книгу с хорошими отзывами или видео-курсы. Для начала можно посмотреть вот такое видео:
Самая новая версия языка HTML, возможности которой выходят далеко за рамки только разметки структуры текста – это HTML5. Кроме того, по сравнению с HTML4, в последней версии появилось много новых тегов, изменилась семантика.
Но в данной статье мы все же рассмотрим привычную четвертую версию языка HTML и ее основные теги. Для этого разберем основную структуру страницы HTML, а также иерархию тегов. Если вы не знаете с чего начать изучение HTML, тогда приведенная ниже информация даст вам базовое понимание принципов работы с языком гипертекстовой разметки.
Для создания html-документа будем использовать удобный редактор .
Первое, что необходимо объявить — это тип документа со ссылкой на соответствующий ему раздел :
1
2
А теперь составим простую страницу index.html с последующими комментариями:
Название страницы
Заголовок №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. Йожились, пели мантры и слушали нашу любимую Карелию. Послушайте, может и вы влюбитесь в эту группу:
Разберем его составные части подробнее.
Мы разобрали основные элементы и структуру страницы HTML, на примерах вы увидели, как использовать самые основные теги.