Статья: Язык разметки гипертекста
👉🏻👉🏻👉🏻 ВСЯ ИНФОРМАЦИЯ ДОСТУПНА ЗДЕСЬ ЖМИТЕ 👈🏻👈🏻👈🏻
или, по-русски, язык разметки гипертекста - никакой на самом деле не язык программирования, а набор инструкций для программы-просмотрщика (броузера). Чтобы писать странички непосредственно в html-коде вам потребуется обычный текстовый редактор или, что удобнее, такая программа, как, например, HomeSite или Arachnophilia (ни в коем случае не MicrosoftFrontPage или NetscapeComposer - эти программы в первую очередь сделаны для опосредованного, "визуального" создания страничек, то есть в них с собственно 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 (alternativetext), которому присваивается значение - текст, который будет выводиться при наведении курсора на картинку. Параметр border может принимать числовые значения начиная с нуля. Обозначает толщину "бортика" вокруг картинки, когда она используется как ссылка. Это один из основных ваших инструментов, как дизайнера,без них вы сможете сделать очень-очень мало. Один простой пример. Допустим, вам необходимо поместить строку текста (или картинку) в центр окна броузера. С помощью таблицы это делается так (в пример можно пока не вникать, а просто посмотреть): СдесьбылВася! Попробуйте сделать это без таблиц. Не выйдет. Разберём пример. Суть в том, что мы сделали таблицу размером во всё окно броузера с единственной ячейкой, в центр которой мы, с помощью параметров выравнивания, заданных ячейке, поместили строку текста. Вот перевод примера: Вася Совет: здесь или в других примерах вы можете, чтобы понять, как это работает, убрать какой-нибудь параметр тэга и посмотреть, что изменится. Сделаем теперь таблицу с четырьмя ячейками: Сдесь был Вася! Как видите, всё довольно однообразно. Параметры, которые можно указывать для тэга table (т.е. те, которые будут относиться ко всей таблице): bgcolor - цвет фона (какие значения может принимать такой параметр, мы уже обсуждали чуть выше) border - толщина "бортика" (значения: числовые, в т.ч. нуль) bordercolor - цвет "бортика" (как указывать цвета мы уже обсуждали) width - ширина таблицы (можно указывать числом - тогда вы получите таблицу соответствующей ширины в пикселях, или в процентах от ширины окна броузера (как в первой табличке "Здесь был вася") height - высота таблицы (аналогично ширине) 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 имеется соответствующий "заменитель", который используется, когда необходимо отобразить такой символ на экране броузера. Так, например, чтобы вывести на экран символ "<" нужно написать <
Название: Язык разметки гипертекста
Раздел: Рефераты по информатике, программированию
Тип: статья
Добавлен 20:18:25 06 мая 2009 Похожие работы
Просмотров: 24
Комментариев: 15
Оценило: 3 человек
Средний балл: 5
Оценка: неизвестно Скачать
Срочная помощь учащимся в написании различных работ. Бесплатные корректировки! Круглосуточная поддержка! Узнай стоимость твоей работы на сайте 64362.ru
Привет студентам) если возникают трудности с любой работой (от реферата и контрольных до диплома), можете обратиться на FAST-REFERAT.RU , я там обычно заказываю, все качественно и в срок) в любом случае попробуйте, за спрос денег не берут)
Да, но только в случае крайней необходимости.
Статья: Язык разметки гипертекста
Реферат: BioEthics Essay Research Paper BioEthicsThe issue of
Реферат На Тему Завоевание Коринфа, Аргоса И Навплии
Реферат: Московская Русь в XIV - XVI вв. Скачать бесплатно и без регистрации
Петерсон 6 Класс Контрольные Работы Скачать
Неправомерные действия в процессе банкротства
Оформление Реферата 2022
Курсовая работа: Педагогические конфликты и пути их разрешения
Реферат: Христофор Колумб 4
Сочинение Описание Внешности Брата 7 Класс
Сообщение Реферат Прыжки В Длину С Места
Введение В Интернет Реферат
Реферат: Романтизм в творчестве Пушкина. Скачать бесплатно и без регистрации
Контрольная работа по теме Технология работы, технического обслуживания и ремонта зернового комбайна 'Енисей-1200'
СТРУКТУРА И УПРАВЛЕНИЕ КАНАЛАМИ РАСПРЕДЕЛЕНИЯ
Реферат: Возвращение фараона. Скачать бесплатно и без регистрации
Психологические Новообразования Дошкольного Детства Реферат
Контрольная работа по теме Анализ состояния рынка услуг сотовой связи
Реферат: Виды бланков. Скачать бесплатно и без регистрации
Реферат: Влияние пластичных смазочных материалов с ультрадисперсным наполнителем на температурный режим подшипников качения
Реферат по теме Історія земної кори: проблеми, закономірності, роздуми
Реферат: Сестринська етика та деонтологiяРеферат: Кисты и свищи поджелудочной железыРеферат: Проектирование производственных и вспомогательных зданий текстильной и легкой промышленности
