HTML — hyper text markuplanguage
или, по-русски, языкразметки гипертекста — никакой на самом деле не язык программирования, а наборинструкций для программы-просмотрщика (броузера). Чтобы писать страничкинепосредственно в html-коде вам потребуется обычный текстовый редактор или, чтоудобнее, такая программа, как, например, HomeSite или Arachnophilia (ни в коем случае не Microsoft FrontPage или Netscape Composer — эти программы в первую очередь сделаны для опосредованного,«визуального» создания страничек, то есть в них с собственноhtml-кодом вы можете вовсе не иметь дело; но они могут не все, допускаюткучу бесящих издержек и создают огромное количество лишних участков кода).
Ещё раз: хтмл — не язык программирования. Имея «словарик»,хтмл-код можно читать, как относительно связныйтекст. И ещё одно: «делание» страничек требует минимальныхсистематических знаний по хтмл-у, не надо запоминатьвсё, что написано в многочисленных руководствах по хтмл-у.Решайте задачи по мере их возникновения.
Поехали
Язык хтмлсостоит из т.н. «тэгов». (TAG — бирка, метка). Большая часть тэговсостоит как бы из двух частей, между которыми содержится текст, который увидитпосетитель странички, свойства этого текста описываются этим тэгом. В первойчасти содержится само «имя» тэга и, если это нужно, некоторыепараметры. Вторая часть содержит только имя тэга с предваряющей его косойчертой. Например: Такаяконструкция сигнализирует броузеру, что кпоследующему содержанию странички этот тэг (в нашем случае тэг "") уже не относится.
Некоторым тэгамзакрывающая часть не нужна, например, тэгу ,который указывает броузеру, что следующий за ним текст следует начать выводить с новой строки.
Пример:
Стишок
Однажды, в студенуюзимнюю пору
Сижу за решеткой, втемнице сырой.
Гляжу, поднимаетсямедленно в гору
Вскормленный в неволеорел молодой.
И шествуя важно, вспокойствии чинном,
Мой верный товарищ, махаякрылом,
В больших сапогах, вполушубке овчинном,
Кровавую пищу клюет подокном!
Разбор примера:
- указывает броузеру, что файл, который к нему попал- не просто текстовый, а документ html.
В пределах тэга ...указывается, в основном, служебная информация, о ней — при необходимости,позже. Единственное, что следует отметить, это находящийся в этих пределах тэг...- В нём указывается «Заголовок» странички, который выводится в синейполосе вверху окна броузера.
В пределах тэга ...находится как раз то, что будет собственно в окне броузера.«Перевод» примера:
Стишок
Однажды, в студенуюзимнюю пору
Сижу за решеткой, втемнице сырой.
Гляжу, поднимаетсямедленно в гору
Вскормленный в неволеорел молодой.
И шествуя важно, вспокойствии чинном,
Мой верный товарищ, махаякрылом,
В больших сапогах, вполушубке овчинном,
Кровавую пищу клюет подокном!
Если скопироватьсодержимое примера в отдельный файл, назвать этот фал«как_нибудь.htm» и открыть этот файл в броузере,вы увидите ваш стишок, записанный в одну строку. Дело в том, что хтмл не воспринимает символ перевода каретки на новуюстроку. Кроме того, он не воспринимает более одного пробела, поэтому не важно,сколько пробелов между словами было в исходном тексте — на экране броузера останется только один. О том, что нужно делать,когда нужно больше пробелов, будет сказано ниже.
Чтобы разбить текст настроки, нужно в конце каждой строки поставить тэг (о нём мы уже вскользь упоминали). Вот так:
Стишок
Однажды, в студенуюзимнюю пору
Сижу за решеткой, втемнице сырой.
Гляжу, поднимаетсямедленно в гору
Вскормленный в неволеорел молодой.
И шествуя важно, вспокойствии чинном,
Мой верный товарищ, махаякрылом,
В больших сапогах, вполушубке овчинном,
Кровавую пищу клюет подокном!
Теперь ваш стишоквыглядит уже более привычно для глаза.
Попробуем усложнитьзадачу. Заствим вывести текст белым шрифтом на черномфоне. Задать цвет шрифта можно несколькими способами: первый, который мырассмотрим вначале, сделает белым весь текст на страничке (если для отдельногоблока текста не указано иного — этот случай рассмотрим вторым). Есть ещё одинспособ — использовать css, но об этом позже.
Оба примера, которые мысобираемся привести, требуют от нас использования т.н. параметров тэгов.
ПАРАМЕТРЫ ТЭГОВ
Это такие инструкции,которые сами по себе тэгами не являются и отдельно не используются, а описываютсвойства содержимого (например, текста или картинки) какого-то тэга. Например,чтобы сделать весь текст на страничке белым необходимо к тэгу body добавить параметр text=«white». Делается это так:
Стишок
Однажды, в студенуюзимнюю пору
Сижу за решеткой, втемнице сырой.
Гляжу, поднимаетсямедленно в гору
Вскормленный в неволеорел молодой.
И шествуя важно, в спокойствиичинном,
Мой верный товарищ, махаякрылом,
В больших сапогах, вполушубке овчинном,
Кровавую пищу клюет подокном!
Если открыть такуюстраничку, то скорее всего вы не увидите ничего — т.к.белые буквы сольются с фоном. Сделаем фон черным:
Стишок
Однажды, в студенуюзимнюю пору
Сижу за решеткой, втемнице сырой.
Гляжу, поднимаетсямедленно в гору
Вскормленный в неволеорел молодой.
И шествуя важно, вспокойствии чинном,
Мой верный товарищ, махаякрылом,
В больших сапогах, вполушубке овчинном,
Кровавую пищу клюет подокном!
Договоримся называть тучасть параметра тэга, которая пишется без кавычек и обозначает, что собственномы хотим изменить (например bgcolorили text) — собственно параметром, а то, что мы пишемв кавычках имея в виду то, каким образом мы хотим изменить параметр — значениемпараметра. Легко догадаться, что поменяв в примере black и white на, например red, blue, gray,yellow вы измените цвета фона или текста. Можетепоупражняться.
А что, если нужно задатьопределённые свойства не всему тексту на страничке, а только отдельному куску(второй пример)? Это тоже можно сделать несколькими способами.
Например, изменитьсвойства шрифта. Для нужно сделать так:
кусоктекста, который мы изменяем
Это для начала. Теперьнужно дописать к тэгу необходимыепараметры, например:
размер size (значения: 14pt — «четырнадцатый» — выможете ввести любое число, +1 — увеличить на 1 пункт, -1 — уменьшить на 1пункт)
цвет color(значения: black, white, red, green, blueи т.д. или шестнадцатеричный код цвета — как его указывать и откуда братьрасскажу ниже)
Вывести текст курсивомможно так: текст
i — от слова italic(так легче запомнить)
Жирный шрифт:текст
Теперь пример:
Стишок
Однажды, в студенуюзимнюю пору
Сижу за решеткой, в темнице сырой.
Гляжу, поднимается медленно в гору
Вскормленный в неволе орел молодой.
И шествуя важно, вспокойствии чинном,
Мой верныйтоварищ, махая крылом,
В больших сапогах, вполушубке овчинном,
Кровавую пищу клюет подокном!
Обратите внимание начетвёртую и шестую строчки: в окне браузера онивыглядят одинаково, а если вы взглянете на код, то увидите, что тэги, которыеих описывают, расположены в разном порядке (но они тоже одинаковы). Вывод:порядок — не важен. Он может быть важен для вас — чтобы не запутаться.
Теперь ошестнадцатеричных кодах цветов. Понятно, что всю гамму оттенков не опишешьсловами red, green, blue и т.д. Чтобы задать произвольный цвет (не важно, чему- фону, тексту, бортику таблицы или чему-то ещё) нужно использовать несловесное обозначение, а упомянутый код.
Шестнадцатеричный кодцвета легко узнать почти в любой графической программе. Например, в Photoshop достаточно один раз щелкнуть на образце текущегоцвета внизу панели инструментов, вызвав диалог выбора цвета. Параметры,обозначенные буквами “R”, “G” и “B” («red», «green» и «blue» соответственно)вы, переведя их в шестнадцатеричную систему (делается на калькуляторе, дляособых фанатов – можно и вручную), можете использовать как параметр для тэга,записав их в таком же порядке и предварив символом “#”. Вот такнапример:
Последние версии Фотошопа делают всё сами и в окошкевыбора цвета указывается готовый код выбранного цвета.
ВЫРАВНИВАНИЕ ТЕКСТА
Обычно текст на страничкерасположен кусками, каждый кусок — абзац. В хтмл-еабзац (paragraph) выглядит так: текст абзаца
Можно задать свойствавсему тексту абзаца, с помощью следующих параметров:
выравнивание align (значения: left — по левомукраю, right — по правому, center- по центру, justify — по ширине)
Также параметрывыравнивания можно задать для ячейки таблицы, содержащей выравниваемый текст(см. ниже).
ССЫЛКИ
Чтобы сделать ссылку,пользуемся тэгом :
Яндекс
Доступные параметры:
target — указывает, где будет открыватьсястраничка, на которуюю ты ссылаешься (значения:"_blank" — в новом окне, при использованиифреймов (расскажу ниже) параметру можно присвоить значение имя соответствующегофрейма)
Пример:
Яндекс
КАРТИНКИ
Вставляя картинку, делаемтак:
параметру src, как ты понимаешь, нужно присвоить значение — путь ккартинке...
Есть ещё параметр alt (alternative text), которому присваивается значение — текст, которыйбудет выводиться при наведении курсора на картинку.
Параметр border может принимать числовые значенияначиная с нуля. Обозначает толщину «бортика» вокруг картинки, когдаона используется как ссылка.
Пример:
ТАБЛИЦЫ
Это один из основныхваших инструментов, как дизайнера, безних вы сможете сделать очень-очень мало. Один простой пример. Допустим, вамнеобходимо поместить строку текста (или картинку) в центр окна броузера. С помощью таблицы это делается так (в примерможно пока не вникать, а просто посмотреть):
Вася
Сдесь был Вася!
Попробуйте сделатьэто без таблиц. Не выйдет.
Разберём пример.Суть в том, что мы сделали таблицу размером во всё окно броузерас единственной ячейкой, в центр которой мы, с помощью параметров выравнивания,заданных ячейке, поместили строку текста. Вот перевод примера:
Вася
Сдесьбыл Вася!
Совет: здесь или вдругих примерах вы можете, чтобы понять, как это работает, убрать какой-нибудьпараметр тэга и посмотреть, что изменится.
Сделаем теперьтаблицу с четырьмя ячейками:
Вася
Первая
Вторая
Третья
Четвёртая
Перевожу:
Вася
Первая
Вторая
Третья
Четвёртая
Как видите, всёдовольно однообразно.
Параметры, которые можноуказывать для тэга table (т.е. те, которые будутотноситься ко всей таблице):
bgcolor — цвет фона (какие значения можетпринимать такой параметр, мы уже обсуждали чуть выше)
border — толщина «бортика»(значения: числовые, в т.ч. нуль)
bordercolor — цвет «бортика» (какуказывать цвета мы уже обсуждали)
width — ширина таблицы (можно указывать числом — тогда вы получите таблицусоответствующей ширины в пикселях, или в процентах от ширины окна броузера (как в первойтабличке «Здесь был вася»)
height — высота таблицы (аналогично ширине)
Есть и другие параметры,например
lightbordercolor
darkbordercolor — эти принимают различные цветовыезначения. Попробуй, и ты поймёшь, для чего они нужны (это второстепенныепараметры)
Пример:
Вася
Первая
Вторая
Третья
Четвёртая
Ширина таблицы впримере указана в абсолютных числах — 400 пикселей, а высота — в процентах.Поэтому при изменении размеров окна броузера высотатаблицы будет изменяться.
Теперь опараметрах, которые используются с тэгом td иизменяют, соответственно, свойства отдельной ячейки таблицы:
bgcolor — цвет фона (всё так же, как длятаблицы в целом)
width — ширина ячейки (можно указывать числом — тогда вы получите ячейку соответствующейширины в пикселях, или в процентах от ширины окна броузера (как в первойтабличке «Здесь был вася»)
height — высота ячейки (аналогично ширине)
align — выравнивание в ячейке (значения: left — по левому краю, right — поправому, center — по центру)
valign — выравнивание по высоте (Vertical ALIGN) (значения: top — по верхнему краю, bottom — по «дну», middle — посередине)
Пример:
Вася
Первая
Вторая
Третья
Четвёртая
Обратите внимание:ячейки таблицы связаны между собой — при изменении высоты одной ячейки меняетсявысота всех, расположенных с нею в одной строке, при изменении ширины меняетсяширина ячеек, расположенных в одном столбце.
Снова усложнимзадачу. Сделаем таблицу из четырёх колонок с заголовком.
Вася
ЗАГОЛОВОК
Первая
Вторая
Третья
Четвёртая
Обратите вниманиена параметр colspan в ячейки с заголовком: он-то ипозволяет этой ячейке занять два столбца.
Аналогично действуем и создавая ячейку на две строки:
Вася
ЗАГОЛОВОК
двухстрочная ячейка
Первая
вторая
Напоследокразговора о таблицах один небольшой пример их использования. Допустим, у васесть картинка, разделённая на четыре части (разные файлы), каждая из которыхслужит ссылкой. Ваша задача сделать так, чтобы исходная (выглядящая целой)картинка оказалась в центре окна броузера. Будемдействовать поэтапно.
Создаём таблицу размеромво всё окно броузера (указывая ширину и высоту как100%) с четырьмя ячейками и в каждую из ячеек помещаем соответствующий кусоккартинки. Выравнивание в ячейках организуем так, чтобы картинка«собралась» в центре. Итак:
Вася
Обратите внимание,что параметр border для всех кусков картинки взятнулевой — иначе каждая будет окружена противным голубым венчиком.
Высота первой ячейки (а,следовательно, и первой строки) указанная как 65% указана для того, чтобыкартинка действительно собралась в центре окна. Если этот параметр убрать, тоиз-за разного размера картинок результирующее изображение окажется ниже центра.Значение 65% подобрано методом тыка.
Всё бы ничего, нопри просмотре примера видим, что куски картинки разделены, не сливаются вединое изображение. Это можно преодолеть, используя два не описанных ранеепараметра тэга table, описывающих расстояния междуячейками таблицы — cellspacing и cellpadding(точнее, между ячейками в строке и между строками). Естественно, параметр border тоже надо приравнять нулю.
Пример:
Вася
Теперь всё впорядке! В качестве последнего штриха, сделаю ссылки хотя бы чуть-чутьосмысленными и опишу каждый кусок картинки с помощью параметра alt:
Вася
К словусказать, обратите внимание, каким образом мы добились в примере наличия кавычекв пределах параметра alt. Поскольку кавычки — символ,используемый в html-коде, возникают определённые трудности с его использованиемв «смысловой» части сайта. Попробуйте вместо "поставить в примере обычные кавычки — вы увидите, возникнет ошибка.
Чтобы избежать подобныхошибок, для каждого из символов, использующихся в html имеется соответствующий«заменитель», который используется, когда необходимо отобразить такойсимвол на экране броузера. Так, например, чтобывывести на экран символ "