Теперь мы можем поместить на нашу Web-страницу некоторый текст с различным выравниванием:

Здесь будут мои личные страницы!

На них Вы сможете найти: - рассказ обо мне и о моих увлечениях; - мои фотографии.

С одной из моих страниц можно будет
отправить мне электронное письмо.

3. Инструментарий для создания Web-страниц

3.1 HTML-редакторы

Каждый выбирает свой инструмент для создания Web-страниц. Это может быть MS FrontPage или Macromedia DreamWeaver, Allaire HomeSite или 1st Page. А кто-то пользуется простым текстовым редактором, например Блокнотом (Notepad).

Текстовые редакторы возможно использовать только для создания небольших страниц, так как у них есть много минусов: не поддерживаются проекты, отсутствует "подсветка" текста., в общем, работать крайне неудобно.

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

Начнем мы с популярного Macromedia DreamWeaver. Компания Macromedia считается лидером по производству программ для создания веб-сайтов, а также законодателем моды в этой области.

DreamWeaver 3.0

Но DreamWeaver на несколько шагов опережает другие редакторы, использующие технологию WYSIWYG, в первую очередь тем, что генерирует очень чистый HTML-код. DreamWeaver позволяет вам избавиться от однотипной работы при создании страниц (например, верстка текста) при помощи использования опции "запись последовательности команд" ( вы записываете последовательность производимых вами команд, потом нажимаете, например, CTRL+P, и DreamWeaver воспроизводит все в той же последовательности.

HomeSite 4.0

Следующий редактор - HomeSite 4 - для создания страниц вручную, т.е. для знатоков HTML. Вы получаете полный контроль над HTML-кодом, причем существует возможность оптимизировать свою страничку под один из трех популярных браузеров (MSIE, Google Phrome, Opera).

HomeSite содержит два основных режима: Edit и Design. Режим Design - это подобие WYSIWYG-редактора, выдающее HTML-код, причем, если вы загрузите чужой HTML-код, то HomeSite все перепишет по-своему.

Еще одна отличительная особенность HomeSite - это его "склейка" с Dreamweaver. HomeSite обладает кнопкой "Dreamweaver", а также входит в его стандартный пакет поставки. Впрочем, и DreamWeaver имеет возможность подключения HomeSite, как редактора для коректировки HTML-кода.

Одним из последних HTML-редакторов является EVR Soft 1st Page v2.

Его лозунг - "Create 1st class websites!" ("Создавайте первоклассные веб-сайты!"). Редактор содержит несколько режимов - Normal, Easy, Advanced/Expert и Hardcore, то есть вы можете выбрать свой уровень, а со временем перейти на более высокий. Еще одна особенность - довольно большая коллекция скриптов на JavaScript и DHTML. Все это довольно удобно разбито по категориям.

3.2 Графические редакторы

Создание и оптимизация графики - сложная и капризная задача. Безусловно, возможно создание Web-страницы и без использования графики - при помощи шрифтов, скриптов и таблиц стилей (CSS) - и это будет красиво и стильно. Но ведь окончательный вид документа зависит от большого числа различных факторов, таких как: ширина окна браузера, предварительные настройки браузера, принятые по умолчанию размер шрифта, его имя и цвет. К тому же не все скрипты и стили поддерживаются всеми браузерами. Если же будет использована графика, то посетитель вашей страницы увидит ее точно такой, какой сделали и видите ее вы.

Основная сложность работы с Web-графикой состоит в том, что пропускная способность каналов Интернета, в большинстве случаев, очень низкая и перед вами сразу встанут проблемы - как сделать графический файл небольшой по объему, но хорошего качества, какие программы и приемы использовать при его оптимизации.

Именно этому посвящен раздел о векторные и растровые графических редакторах, которые являются мощным инструментом обработки изображения в умелых руках.

Прежде чем рассмотреть векторные и растровые графические редакторы, следует уяснить себе, в чем состоит различие между векторным и растровым представлением изображения.

Растровая графика представляет собой сетку (растр), ячейки которой называются пикселами. Каждый пиксел в растровом изображении имеет строго определенное местоположение и цвет, следовательно любой объект представляется программой как набор окрашенных пикселов. Это значит, что пользователь, работая с растровыми изображениями, работает не над конкретными объектами, а над составляющими их группами пикселов.

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

Для изображения растровой графики всегда используется фиксированное количество пикселов, т.е. качество растрового изображения напрямую зависит от разрешающей способности оборудования. Это значит, что любое изменение изображения (поворот, увеличение и т.д.) приводит к неизменному искажению картинки и границы объектов получаются неровными.

Векторные изображения формируются на основе математически описанных фигур, называемых векторами, а вид изображения определяется параметрами векторов. Другими словами, векторная графика состоит из кривых, имеющих координаты, цвет и прочие параметры, а также замкнутых областей, заполненных определенным цветом. Границы этих областей также описываются кривыми. Файл с векторной картинкой содержит координаты и параметры кривых.

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

Графические пакеты (редакторы) тоже делятся на два типа: растровые и векторные. Давайте теперь рассмотрим наиболее популярные из них.

А) Редакторы растровой графики

Microsoft Paint- простой (или лучше сказать - простейший) редактор, входящий в стандартную поставку операционных систем Microsoft. Он обладает набором простейших функций (кисточка, карандаш, резинка и т.д.), которые позволяют создавать незамысловатые картинки. К сожалению, для обработки графики он практически не пригоден. Картинку, которую вы видете справа - это большее, на что способен этот редактор.

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

Пакет предлагает, например, средства для восстановления поврежденных изображений, ретуширования фотографий или создания самых фантастических коллажей, которые только может позволить себе наше воображение. В общем, потенциал этого пакета поистине огромен. Начиная с версии 5.5 в пакет включена программа Adobe ImageReady , предоставляющие огромные возможности по обработке графики под WEB (оптимизация изображений, создание анимированных gif, "разрезание" картинок на более мелкие и т.д.). Девиз разработчиков Adobe Photoshop - "Camera of your mind" - предполагает не только техническое совершенство, но и полную свободу творчества, на которую человек, работающий с этой программой, просто обречен.

PhotoPaint - еще один не менее известный графический редактор (из пакета Corel Draw) для обработки растровой графики, конкурирующий с Adobe Photoshop. Здесь также имеются все необходимые инструменты для обработки графики, разнообразные фильтры, текстуры. Разница лишь в удобстве работы, интерфейсе и скорости наложения фильтров - наложение происходит немного медленнее.

Painter - редактор предоставляет великолепные возможности для эмуляции реальных инструментов рисования: графит, мел, масло и т.д. Также позволяет имитировать фактуру поверхности материалов, живопись, создавать анимацию. Очень удобен для разработки фоновых рисунков или Web-страниц в стиле живописи. Пользуясь это программой чувствуешь себя настоящим художником.

Существует еще ряд редакторов (Microsoft Photo Editor, Microsoft Photo DRAW ), также позволяющих реализовать простейшие задачи, но не удовлетворяющих запросам профессионалов.

B) Редакторы векторной графики

Adobe Illustrator - пакет позволяет создавать, обрабатывать и редактировать векторную графику. По своей мощности он эквивалентен

растровому редактору Adobe Photoshop: имеет аналогичный интерфейс, позволяет подключать различные фильтры и эффекты, понимает многие графические форматы, даже такие как. cdr (Corel Draw) и. swf (Flash).

CorelDraw - безусловно, такой известный графический пакет не мог обойтись без средств для обработки векторной графики. Пакет по своей мощности практически не уступает графическим редакторам Adobe Photoshop и Adobe Illustrator. Помимо обработки векторной графики, в этом пакете существует обработчик растровой графики (Photo Paint), трассировщик изображений, редактор шрифтов, подготовки текстур и создания штрихкодов, а также огромные коллекции с изображениями (CorelGallery).

Adobe Streamline - еще один продукт фирмы Adobe, предназначенный для трассировки (перевода) растровой графики в векторную. Это небольшой, но очень полезный и мощный продукт. Особенно полезен, если вы создаете Web-страницы с использованием векторной графики, например, технологии Flash.

4. Создание сайта при помощи CMS Joomla 1.5.7

Плавно, по принципу от простого к сложному, переходим от статических страниц WWW к динамическим. Что бы это осуществить, нам понадобиться знание Web - языков PHP, Jscript, Perl, jQuery и хотя бы язык структурных запросов MySQL. Ничего страшного, всего лишь какие то пару лет и вы профи, способные делать такие многофункциональные сайты, у которых страницы генерируются на лету, в которых присутствует базы данных клиетов форумов, логины, пароли, идентификация, аутентификация, подключение анимации и много другое.

Но не обязательно обладать знаниями всех языков, что бы сделать динамический многофункциональный сайт. Мне хватило знания HTML, SCC, PHP, 3Ds Max, Photoshop и SMC Joomla.

Joomla - система управления содержимым, написанная на языках PHP и JavaScript, использующая в качестве хранилища базу данных MySQL. Является свободным программным обеспечением, распространяемым под лицензией GNU GPL.

Основные возможности:

1. Функциональность можно расширять с помощью дополнительных модулей (расширений, плагинов).

2. Модуль безопасности для многоуровневой аутентификации пользователей и администраторов.

3. Система шаблонов позволяет легко изменять внешний вид сайта.

4. Настраиваемые схемы расположения модулей, включая левый, правый и центральный блоки меню.

5. К преимуществам системы можно отнести то, что все модули, компоненты, плагины, шаблоны можно написать самому, разместить их в структурированном каталоге расширений или отредактировать существующее расширение по своему усмотрению.

Можно работать с Joomla на сервере хостера в интернете (дополнительные расходы, а так же зависит многое от скорости интернета). Я предпочитаю работать на локальном сервере. Для этого выбрала Apache/2.2.4 (Win32) mod_ssl/2.2.4 OpenSSL/0.9.8d PHP/5.2.4 Server at 127.0.0.1 Port 80.

Итак, установили локальный сервер. В директории localhost/home/www/ создаем папку, в которую помещаем саму Joomla. Хочу заметить, что под PHP5.3.1 Joomla работает не корректно. Постоянно компоненты форумов FireBoard и Kunena выдает ошибки на сайте, приходится править файл php. ini и отключать вывод об ошибках, что само действие сулит непредвиденных обстоятельств для сайта. По этому, рекомендую выбирать версию PHP 5.2.4, работа стабильная для всех плагинов, модулей и компонентов. После установки Joomla через браузер создаем в MySQL пользователя-админа и под его логином и паролем заходим на в админ панель. Далее надо выбрать шаблон для сайта. С первого взгляда покажется, что это очень легко, но капнув глубже убеждаешься, что 80% времени уходит для модернизации этого шаблона. Поэтому рекомендую выбирать максимально подходящий шаблон под нужды, не забывая о выводимых модулях. Далее подключаем весь функционал сайта: регистрацию, форум, слайд-шоу, баннеры, файлы для скачек, видео on line, аудио, редактируем, все выводимые страницы. Работаем в основном с файлом Index. php и template. css и конечно конфигурируем под себя все подключенные расширения, которых около 6000 для Joomla. Далее остается самое приятное - это дизайн сайта. При помощи растрового программы Photoshop и 3Ds Max (полнофункциональная профессиональная программная система для создания и редактирования трёхмерной графики и анимации, разработанная компанией Autodesk, содержит самые современные средства для художников и специалистов в области мультимедиа) создаем дизайн шаблона. Редактируем header, делаем нужный вид.

Вывод

В связи с быстрым развитием Web-программирования и создания множественных CMS, была облегчена работа Web-дизайнера. Теперь для создания многофункционального мощного динамического web портала достаточно освоить несколько языков программирования (если будем дописывать расширения и скрипты), умело владеть графическими и растровыми программами, немного вдохновения, инноваций и мастерства.

Литература

1. Которев Д. В, Костарев А.Ф. "PHP 5 или наиболее полное руководство в подлиннике." Петербугр 2005

2. А. Гончаров "Самоучитель HTML".

3. А. Матросов, А. Сергеев, М. Чаунин "HTML 4.0 в подлиннике"

4. Айзекс С. "Dynamic HTML"

5. Байенс Дж. "Примочки программирования в WEB"

6. Бурсов М.В. и др. "Основы работы с HTML-редактором Dreamweaver. Учебно-методическое пособие"

7. Велихов В. "Справочник по HTML 4.0"

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

Язык гипертекстовой разметки HTML был предложен Тимом Бернерсом-Ли в 1989г. К моменту создания создания HTML существовал стандарт языка разметки печатных документов - SGML (Standart Generalised Markup Language), который и был взят в качестве основы HTML . Предполагалось, что такое решение поможет использовать существующее программное обеспечение для интерпретации нового языка.

В качестве элемента гипертекстовой базы данных для HTML был выбран обычный текстовый файл, который хранится средствами файловой системы операционной Среды ЭВМ.

Таким образом, гипертекстовая база данных в концепции WWW -это набор текстовых файлов, написанных на языке HTML , который определяет:

Форму представления информации (разметка);

Структуру связей файлов между собой (гипертекстовые ссылки). Такой подход предполагает наличие еще одной компоненты

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

В 1990г. появилась нулевая версия HTML 0.

Первая версия (HTML 1.0) была направлена на представление языка как такового, где описание его возможностей носило скорее рекомендательный характер.

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

Вторая версия (HTML 2.0) фиксировала практику использования конструкций языка и явилась стандартом для построения WWW .

Версия ++ HTML ++ представляла новые возможности по представлению научной информации и таблиц, улучшения стиля компоновки текста и изображений.

Третья версия (HTML 3.0) упорядочила все нововведения и формализовала интерфейс пользователя гипертекстовой распределенной системы.

В 1996г. выпущена новая версия языка: HTML 3.2 ,включающая средства для создания таблиц, конструкции языка Java , карты-изображения (располагающиеся на машине-клиенте) и новые типы форматирования текста.

HTML - это текстовый язык, в котором инструкции по форматированию, называемые тэгами (tags), встроены в текст документа.

Процесс создания HTML - документа заключается во включении тэгов внутрь неформатированного текста, несущего информационную нагрузку.

Тэги HTML - это последовательности символов, начинающиеся знаком “меньше” (<) и заканчивающиеся знаком “больше” (>).

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

Браузеры WWW при анализе предложений HTML работают по следующим правилам:

Пробелы и другие “невидимые” символы игнорируются;

Все тэги могут быть разделены на группы: базовые тэги, тэги форматирования, структурные тэги, указатели, и т.д.;

Тэги форматирования могут быть написаны строчными и/или прописными буквами;

Большинство тэгов форматирования пишутся парами. Открывающий тэг активирует данный эффект, а закрывающий -в ыключает его. Пара тэгов иногда называется контейнером, поскольку эффект, который они включают и выключают проявляется на тексте, расположенном внутри них. Например, для того, чтобы указать, что строка должна быть напечатана жирными символами, надо написать: < B > Эта строка будет напечатана жирным текстом

Текст, находящийся внутри закрывающего тэга, всегда предваряется символом “обратная косая черта”. Среди базовых тэгов HTML исключением из этого правила являются: < BASE > (основная информация), < BR > (конец строки), < HR > (горизонтальная линейка), и < IMG > (изображение). Эти тэги существуют в единичном экземпляре.

Каждый документ HTML имеет граничные тэги: < HTML > и . Эта пара тэгов заключает в себе все другие тэги Web -страницы и все информационное содержание документа. Фактически они декларируют, что все содержимое контейнера является кодом HTML . Тэг < HTML > должен располагаться в первой строке файла, а тэг - в последней.

Каждый HTML -документ содержит заголовок документа и его тело.

Заголовок документа идентифицирует документ. Он должен идти сразу после тэга < HTML > и начинаться с < HEAD >. Заканчивается заголовок тэгом .

В заголовке документа обязательно должны присутствовать название документа и его базовый URL -адрес.

Название документа располагается между тэгами < TITLE > и . Оно используется браузером и Web -сервером. Длина названия не должна превышать 40 символов. Название документа должно быть информативным, отражать содержание документа, чтобы его можно было идентифицировать. Название встречается в строке заголовка Internet Explorer , в списках журнала (History) и “Избранных стрницах” (Favorites).

Базовый URL должен быть полным (абсолютным) и содержать протокол, адрес компьютера в Internet и имя файла. Он указывается в тэге < BASE HREF = “базовый_URL”>. Все остальные URL в документе могут указываться относительно базового. Например, если базовый URL имеет адрес: http://www.microsoft.com/products/office/word/datasheets.html и необходимо указать URL файла features . html , расположенного в каталоге / products / office / excel на том же сервере, можно указать: ../ excel / features . html , а не набирать полный адрес.

Символы. ./ указывают, что нужно перейти на один уровень каталогов вверх относительно базового адреса.

Наличие базового адреса облегчает перенос документа на другой сервер, так как если все остальные URL в документе относительные, то при переносе необходимо изменить только имя сервера в базовом URL .

Тело документа содержит весь текст, несущий информацию и все тэги HTML , используемые для форматирования текста. Тело документа начинается сразу же после заголовка и ограничивается тэгами < BODY > и .

Пример HTML -документа:

< TITLE > Название документа

< BASE HREF = “базовый_URL” >

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

Начало абзаца и конец строки

Стили заголовков

Физические стили -л огические стили

Специальные символы.

Гипертекстовые ссылки состоят из двух частей: указателя и URL . Указатель - это текст, по которому пользователь должен щелкнуть для того, чтобы куда-то переместиться. URL указывает адрес, с которого браузер будет загружать документ, когда пользователь щелкнет по указателю.

Текстовые указатели в графических браузерах обычно подчеркнуты и выделены цветом. В чисто текстовых браузерах они выделяются жирным шрифтом.

В качестве указателя может использоваться любой текст, независимо от его размеров и особенностей форматирования. Указатель может состоять из нескольких букв, слов или даже строк текста.

Формат указателя:

< A HREF = “ URL ”> текст указателя ,

где буква А в тэге < A HREF > означает указатель (anchor), а HREF -гипертекстовую ссылку (Hypertext REFerence). Все, что находится между тэгами < A HREF = “ URL ”> и является текстом указателя, который выводится на экран подчеркнутым или жирным шрифтом.

Вместе с гипертекстовыми указателями могут быть использованы другие форматирующие коды. Например:

< A HREF = “ URL ”> < I > или

< I > < A HREF = “ URL ”> Переход к более подробному изложению

HyperText Markup Language (HTML) – язык разметки гипертекста – предназначен для написания гипертекстовых документов, публикуемых в World Wide Web.

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

Существует два способа создания гипертекстовых документов. Можно воспользоваться одним из WYSIWYG HTML-редакторов (например, Microsoft FrontPage, или др.), для работы с которыми не требуется специальных знаний о внутренней структуре создаваемого документа. Этот способ позволяет создавать документы для WWW без знания языка HTML. HTML-редакторы автоматизируют создание гипертекстовых документов, избавляют от рутинной работы. Однако их возможности ограничены, они сильно увеличивают размер получаемого файла и не всегда полученный с их помощью результат соответствует ожиданиям разработчика. Но, безусловно, этот способ незаменим для новичков в деле подготовки гипертекстовых документов.

Альтернативой служит создание и разметка документа при помощи обычного редактора текста (NotePad). При этом способе в текст вручную вставляются команды языка HTML. Создавая документы таким способом, вы точно знаете, что делаете.

Как уже отмечалось, HTML-документ содержит символьную информацию. Одна ее часть - собственно текст, т. е. данные, составляющие содержимое документа. Другая – теги (markup tags), называемые такжефлагами разметки , – специальные конструкции языка HTML, используемые для разметки документа и управляющие его отображением. Именно теги языка HTML определяют, в каком виде будет представлен текст, какие его компоненты будут исполнять роль гипертекстовых ссылок, какие графические или мультимедийные объекты должны быть включены в документ. Графическая и звуковая информация, включаемая в HTML-документ, хранится в отдельных файлах. Программы просмотра HTML-документов (браузеры) интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащие HTML-документы, приняты расширения.htm или.html.

Прописные и строчные буквы при записи тегов не различаются. В большинстве случаев теги используются парами. Пара состоит из открывающего (start tag) и закрывающего (end tag) тегов. Синтаксис открывающего тега:

<имя_тега [атрибуты]>

Прямые скобки, используемые в описании синтаксиса, означают, что данный элемент может отсутствовать. Имя закрывающего тега отличается от имени открывающего лишь тем, что перед ним ставится наклонная черта:

Атрибуты тега записываются в следующем формате:

имя[="значение"]

Кавычки при задании значения аргумента не обязательны и могут быть опущены. Для некоторых атрибутов значение может не указываться. У закрывающего тега атрибутов не бывает.

Действие любого парного тега начинается с того места, где встретился открывающий тег и заканчивается при встрече соответствующего закрывающего тега. Часто пару, состоящую из открывающего и закрывающего тегов, называют контейнером , а часть текста, окаймленную открывающим и закрывающим тегом, –элементом .

Последовательность символов, составляющая текст, может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр, и специальных символов (например, +, #, $, @), за исключением следующих четырех символов, имеющих в HTML специальный смысл: < (меньше), > (больше), & (амперсенд) и " (двойная кавычка). Если необходимо включить в текст какой-либо из этих символов, то следует закодировать его особой последовательностью символов.

Структура HTML-документа

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

Закрывающий тег так же важен, как и открывающий. Если, например, документ включен в электронное письмо, тег дает команду программе просмотра прекратить интерпретацию текста, как HTML-кода.

HTML-документ состоит из двух частей: заголовок (head) и тело (body), расположенных в следующем порядке:

В HTML-документ можно включать комментарии, позволяющие скрыть часть текста от браузера. Все, что заключено между последовательностями символов , при просмотре страницы остается невидимым. Комментарии не могут быть вложенными друг в друга

Включение в документ заголовочной части не является обязательным. Задачей заголовка является представление необходимой информации для браузера и сервера HTTP. Информация, размещенная внутри заголовка документа, обычно не выводится на экран (кроме названия документа).

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

Чаще всего в заголовок документа включают парный тег , определяющий название документа. Многие программы просмотра используют его как заголовок окна, в котором выводят документ. Программы, индексирующие документы в сети Интернет, используют название для идентификации страницы. Хорошее название должно быть достаточно длинным для того, чтобы можно было корректно указать соответствующую страницу, и в то же время оно должно помещаться в заголовке окна. Название документа вписывается между открывающим и закрывающим тегами. Тело документа

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

Тег не только обозначает начало содержимого документа, но и задает его основные свойства: цвет фона, текста и многое другое. Эти свойства определяются с помощью атрибутов, которые приведены в таблице.

Тело документа

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

Цвет может быть задан названием (например, green) или шестнадцатеричным числом, определяющим цвет в модели RGB. Эта цветовая модель базируется на определении цвета как композиции трех основных оттенков цвета: красного (Red), зеленого (Green) и синего (Blue). Каждая компонента задается двузначным шестнадцатеричным числом (т. е. изменяется от 00 до FF). Затем эти значения объединяются в одно число, перед которым ставится символ # (большинство современных браузеров может распознать цвет и без указания символа #).

Ниже представлена таблица 16 стандартных цветов вместе с их шестнадцатеричными кодами.

Язык HTML предполагает, что автор документа ничего не знает о компьютере своего читателя. Читатель вправе установить любой размер окна и пользоваться любым из имеющихся у него шрифтов. Это означает, что место переноса в строке определяется только программой просмотра и установками конечного пользователя. Символы перевода строки оригинального документа игнорируются, в результате чего текст, отлично смотревшийся в окне вашего редактора, может превратиться в сплошной неудобочитаемый текст в окне программы просмотра.

Избежать этой неприятности позволяет разделение на абзацы при помощи тега <Р>.Разместите его в начало каждого абзаца, и программа просмотра отделит абзацы друг от друга пустой строкой. Использование закрывающего тега

Иногда требуется "разорвать" текст, перенеся его остаток на новую строку, при этом не выделяя нового абзаца. Для этого используется тег разрыва строки
.Он заставляет программу просмотра выводить стоящие после него символы с новой строки. В отличие от тега абзаца, тег
не добавляет пустую строку. У этого тега нет парного закрывающего тега.

Пример

Откуда к нам пришла зима,

не знаешь ты, никто не знает.

Умолкло все. Она сама

холодных губ не разжимает.

Некоторые браузеры интерпретируют несколько стоящих рядом тегов
как один тег, поэтому не стоит использовать его для вставки пустых строк.

Другим методом разделения документа на части является проведение горизонтальных линий. Они визуально подчеркивают законченность той или иной области страницы. Тег

---

позволяет провести рельефную горизонтальную линию в окне большинства программ просмотра. Этот тег не требует закрывающего тега. До и после линии автоматически вставляется пустая строка.

Хотя язык HTML включает теги для достижения различных шрифтовых эффектов (полужирный шрифт, курсив, подчеркнутый шрифт), не все браузеры их поддерживают. Однако все браузеры поддерживают тот или иной способ выделения текста. Поэтому использование логического форматирования текста в любом случае приведет к выделению программой просмотра различных частей текста и выявит структуру документа.

Название документа, задаваемое с помощью тега

Заголовок 1 уровня

Заголовок 2 уровня

Заголовок 3 уровня

Заголовок 4 уровня

Заголовок 5 уровня

Заголовок 6 уровня

Помните, что если вы забудете поставить закрывающий тег заголовка, вид страницы будет искажен: любой из тегов заголовка автоматически вставляет пустую строку до и после себя.

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

Элементы физического форматирования могут быть вложенными друг в друга, хотя конечный результат зависит от браузера. При этом нужно внимательно следить, чтобы один контейнер находился целиком в другом контейнере, например,

жирный и подчеркнутый текст

Кроме вышеперечисленных тегов в документе может использоваться тег , позволяющий непосредственно задать размер и цвет шрифта. Элемент FONTпредставляет собой контейнер, т. е. требует как открывающего, так и закрывающего тегов, и сам может использоваться внутри любого другого текстового контейнера.

После стартового тега обязательно указание атрибутов, без которых элемент не оказывает никакого влияния на текст, помещенный в контейнер.

Атрибут FACEпозволяет указать тип шрифта, которым программа просмотра выведет ваш текст (если таковым располагает пользователь). Если нужного шрифта нет, программа проигнорирует запрос и будет использовать шрифт, установленный по умолчанию.

Этот атрибут позволяет указать как один, так и несколько шрифтов (через запятую). Весь список будет просмотрен слева направо и первый из имеющихся на машине пользователя будет использован для вывода документа.

Атрибут SIZEслужит для указания размера шрифта в условных единицах от 1 до 7. Считается, что размер "нормального" шрифта соответствует числу 3. Размер может быть как абсолютной величиной (SIZE=5), так и относительной (SIZE=+2). Во втором примере текущий размер шрифта увеличивается на 2.

Атрибут COLORустанавливает цвет шрифта, который может быть задан как в формате RGB, так и указанием имени.

Пример

Текст красного цвета и

большого размера

Несмотря на то, что в состав HTML-документа входят самые различные компоненты, можно сказать, что гипертекстовые ссылки - основа WWW. Если бы Web-страницы не ссылались друг на друга, содержимое Web превратилось бы в обычный набор файлов, не связанных между собой.

Для создания гипертекстовой ссылки используется пара тегов .... Фрагмент текста, изображение или любой другой объект, расположенный между этими тегами, отображается в окне браузера как гипертекстовая ссылка. Активация такого объекта приводит к загрузке в окно браузера нового документа или к отображению другой части текущей Web-страницы. Гипертекстовая ссылка формируется с помощью выражения

фрагмент документа

HREFздесь является обязательным атрибутом, значение которого и есть URL-адрес запрашиваемого ресурса. Кавычки в задании значения атрибутаHREFне обязательны.

Текстовые указатели, т. е. фрагменты текста, являющиеся ссылками, не отличаются разнообразием внешнего вида. Обычно такой указатель представляет собой слово или слова, подчеркнутые прямой линией. Цвет указателя может регулироваться автором и установками программы просмотра.

Графические указатели, т. е. изображения-ссылки, выделяются рамкой того же цвета, что и текстовые указатели.

Пример

В настоящее время стандарты HTML поддерживают теги для списков трех различных видов: нумерованных (упорядоченных), маркированных (неупорядоченных) и списков определений. Списки и элементы списков являются блочными элементами. Это означает, что перед ними и после них автоматически добавляются пустые строки.

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

Нумерованные (упорядоченные) списки используют, когда важен порядок вывода элементов списка. Браузер автоматически вставляет номера элементов по порядку, в исходном HTML-тексте номера не печатаются. Если количество элементов списка изменится (в результате удаления или добавления новых элементов), то нумерация автоматически обновится.

Весь нумерованный список заключается между парой тегов , а каждый элемент списка расположен между тегами

(закрывающий тег может отсутствовать).

Программирование

Алгоритмизация

Проектирование

Маркированный (неупорядоченный) список используется для представления коллекции элементов, порядок вывода которых не важен. При выводе маркированных списков браузер автоматически вставляет специальные значки (маркеры), отмечающие каждый элемент списка.

Маркированный список начинается стартовым тегом

и завершается тегом

. Каждый элемент списка начинается с тега

и завершается (необязательным) тегом

.

Пример

Программирование

Алгоритмизация

Проектирование

Любой список может быть частью другого списка, вложен в другой список. Считается полезным использование сдвигов при подготовки текста исходного HTML-документа, чтобы четко представлять уровни вложенности списков.

Дирекция

Иванов И.И.

Петров К.В.

Отдел маркетинга

Варшавская Е.Л.

Самсонов Д.М.

При выводе вложенных маркированных списков браузер автоматически проставляет маркеры перед элементами, находящимися на разных уровнях вложенности.

Таблица – эффективный способ отображения статистических данных или ин­формации, которую удобнее представлять именно в таком виде. Данные таблицы хранятся в ячейках, являющихся отдельными полями, из которых состоят строки и столбцы таблицы. Надписи, которые размещаются над столбцами и описывают их содержимое, называют шапкой таблицы.

При формировании таблицы применяется несколько парных тегов.

и . Указывают на начало и конец таблицы. Все остальные теги и текст таблицы должны находиться между этими двумя тегами.

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

<ТН> и . Определяют начало и конец ячейки шапки таблицы.

и . Отмечают начало и конец ячейки данных.

Кроме того, с помощью тега , размещаемого внутри тега

можно создать заголовок таблицы.

<ТН>Имя члена клуба

<ТН>Посещал клуб книголюбов?

<ТН>Дата посещения

<ТD>Нет данных

<ТD>Николай

Наличие атрибута BORDER в теге

Eлена

Heт

Да

говорит о том, что ячейки таблицы ограничены линиями.

В результате получится таблица:

Чтобы добавить изображение, нужно в том месте веб-страницы, где оно должно появиться ввести тег . Для указания имени файла, содержащего рисунок, применяется атрибутSRC. Пример:

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

3. Язык гиппертекстов HTML

Гипертексты должны начинаться со слова и заканчиваться словом. Слова в угловых скобках в языке HTML называются тэгами, а в программировании - дескрипторами. Почти все тэги HTML парные - и, и и т.д.

Парные тэги выделяют некоторый фрагмент гипертекста - «заглавие», «тело» и т. д. Первый тэг начинает фрагмент, а второй - завершает его. В закрывающих дескрипторах перед именем ставится знак дроби / .

Общая структура гипертекстов, записанных в языке HTML:

гипертекст::= заглавие тело

заглавие::= титул

титул::= название

тело::= текст

В соответствии с правилами HTML гипертексты обязаны иметь «заглавие» и «тело». Как публикации гипертексты могут и должны содержать сведения об авторах и владельцах авторских прав (сайтов).

В заглавии гипертекста должно содержаться «название», которое браузерами отображается на самой верхней строке экрана ЭВМ. Название должно выражать главную идею публикации (страницы). Гипертекст без названия - это как статья без названия.

«Тело» гипертекста должно содержать тексты, таблицы, фотографии и иллюстрации. Отличие электронных гипертекстов от обычных бумажных текстов - включение гиперссылок, нажатие на которые вызывает загрузку новых гипертекстом.

Пример гипертекста и результат его отображения браузером на экране ЭВМ:

Гипертекст: Результат:

Результат работы браузера - загрузка и вывод на экран ЭВМ гипертекста, хранящегося на сайте по адресу, указанному в окне браузера. Если гипертекст слишком велик, то браузер выводит кнопки протяжки гипертекста справа или внизу экрана.

Размеры экранов ЭВМ имеют следующий спектр. Минимальный размер экрана - 640 х 480 пикселей. Далее стандартные размеры экранов - 800 х 600, 1024 х 768 и 1280 х 1024 пикселей. Поэтому на разных экранах гипертексты могут вы глядеть по-разному.

Общая структура гипертекстов и их отображения на экране ЭВМ:

Гипертекст: Результат:

Текстовая часть может состоять из строк и абзацев с заголовками и без заголовок, со списками, таблицами и меню.

тело::- текст

текст::= заголовок { текст } |

список { текст } |

таблица { текст } |

Заголовки в гипертекстах оформляются в следующем виде:

заголовок::=

название

заголовок::=

название

заголовок::=

название

где тэги H2, ... , h6 задают размер заголовков по отношению к основному тексту.

Абзацы в гипертекстах начинаются с дескриптора

гипертекст |

|

Переход на новую строку и абзацах указывается дескриптором . Конец абзаца р> не обязателен, но необходим при использовании параметров в дескрипторе абзаца.

Основной параметр абзацев - align - выравнивание текстов на экране ЭВМ. Выравнивание текстов производится браузерами автоматически в соответствии с размерами экрана ЭВМ:

align=center- по центру экрана:

align=left- к левому краю;

align=right - к правому краю;

align=justify - на весь экран.

Для выравнивания абзацев должен быть выбран единый общий стиль, который необходимо применять ко всем во всех гипертекстах на сайте.

Для оформления гипертекстов язык разметки HTML имеет богатый спектр шрифтов, стилей и ресурсов. Наиболее простое средство оформления - выделение слов в целях привлечения внимания читателей сайтов к отдельным частям текстов.

Для выделения слов в гипертекстах можно использовать жирный шрифт или подчеркивание с помощью следующих тэгов:

Большие символы

жирный шрифт

курсив i>

подчеркивание

перечеркивание

маленькие символы

Шрифтовое выделение в гипертекстах задается тэгом : шрифты:: = текст font>

Параметры шрифтов - их размер и тип. Размеры шрифта задаются параметром size = размер.

Размер указывается явно от 1 до 6, либо в форме увеличения +1, +2 или уменьшении - 1, - 2.

Тип шрифта задается параметром

face = шрифт

Здесь шрифт - один из стандартных шрифтов: «Times», «Courier» и т. д.

Цвет шрифта задается параметром со1ог = цвет, где цвет - цвет выделенного фрагмента гипертекста. Например - выделение текста красным цветом:

текст font >

Стандартные названия цветов в языке НТМL:

red - красный, green - зеленый, blue – синий, black-черный,

white - белый, gold - золотой, yellow-желтый и т. д.

Для оформления гипертекстов лучше всею взять за образец хорошую книгу или журнал, изданные профессиональным издательством, либо чью-то профессионально оформленную электронную книгу, газету или сайт в Интернет.

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

Фрагменты гипертекстов могут размешаться на одном и том же сайте либо на нескольких сайтах или даже на нескольких серверах. Во внешних гиперссылках указываются имена соответствующих файлов на сайте, сервере или в сети Интернет:

Общая форма внешних гиперссылок:

где «адрес» - это адрес гипертекста внутри сайта или на другом сервере сети Интернет.

Примеры внешних гиперссылок:

а)адрес сайта в Интернет:

http: // bак2.naгоd.гu

б)адрес страницы на сайте:

http: // bак2.naгоd.гu / inrogl.html.

в)адрес страницы в папке сайта;

http: // bак2.naгоd.гu / tests / test2.html.

тесты 2 а>

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

Графические файлы обычно размешаются на сайтах и отдельной папке с именем image. Загрузка иллюстраций на экраны пользовательских ЭВМ проводится браузерами с помощью операторов :

Общая форма операторов загрузки графических иллюстраций:

Расположение иллюстраций на экране ЭВМ задается параметрами выравнивания: align=left- по левому краю, align=right - по правому краю экрана. Текст при этом обтекает иллюстрации соответственно справа пли слепа.

Иллюстрации могут быть прижаты к верхнему или нижнему краю экрана, что задается параметрами: align =top - к верхнему краю, align=bottom - к нижнему краю экрана, либо выровнены по середине экрана - align = middle.

Для расположения иллюстрации па экране ЭВМ в операторе загрузки могут быть указаны их ширина и высота:

высота:= height= «высота»

ширина:= width= «длина»

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

Размеры иллюстраций обычно выбирают так, чтобы они были видны целиком даже на экранах ЭВМ с минимальным размером. Если кран ЭВМ больше, то иллюстрации будут занимать только его часть.

Гипертекстовые списки - это перечни с нумерацией или выделением элементов списков. Все элементы начинаются тэгами

. Нумерованные списки начинаются тэгом

и заканчиваются тэгом

. Ненумерованные списки ограничиваются тэгами .

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

Заключение

HTML - это язык разметки гипертекстов (hypertext markup language).

Все размещаемые файлы должны быть гипертекстами, записанными в формате HTML и имеющими идентификаторы вида.html.

Язык HTML - это язык разметки гипертекстов, хранящихся на Web-серверах и отображаемых браузерами на экранах ЭВМ. Язык HTML определяет правила описания гипертекстов и отображения их браузерами на экранах компьютеров.

На разработку языка гипертекстовой разметки существенное влияние оказали два фактора: исследования в области интерфейсов гипертекстовых систем и желание обеспечить простой и быстрый способ создания гипертекстовой базы данных, распределенной в сети.

Основные правила вложения элементов:

Элементы не должны пересекаться;

Блочные элементы могут содержать вложенные блочные и текстовые элементы;

Текстовые элементы могут содержать вложенные текстовые элементы;

Текстовые элементы не могут содержать вложенные блочные элементы.

Строго говоря, все правила языка HTML. можно рассматривать исключительно как «пожелания». Средство, используемое для отображения Web-документа, сделает все возможное, чтобы истолковать разметку наиболее разумным образом. Тем не менее, гарантию правильного воспроизведения документа дает только неукоснительное следование требованиям спецификации языка.

Список литературы

«Экономическая информатика» /Под. ред. П.В. Конюховского и Д.Н. Колесова, СПб: Питер, 2000, 560с.

Каймин В.А., «Информатика», учеб.4-е изд. М.:,2003-285с.

«Информатика», базовый курс, 2-е издание /Под. ред. С.В. Симоновича, СПб.: 2003, 640с.

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подписаться

НTML - это язык гипертекстовой разметки.

Язык используется для организации веб-страниц. Проведем аналогию. Вы покупаете газету. В ней напечатаны несколько статей. У каждой статьи есть название, в ней есть фотографии. А текст набирается несколькими колонками. Это - структура газетной страницы.

На сайте все происходит так же. Чтобы сделать правильную структуру статьи - контента - нужно использовать язык разметки текста.

Для чего нужен HTML

Язык HTML нужен, чтобы сообщить браузеру, как нужно отобразить страницу на экране.

Язык распространен повсеместно. Это универсальное средство для оформления контента на странице. Его использование возможно в любой браузере. Если писать код на языке программирования - нужно знать какие-то особенности, операторы, типы данных и так далее.

HTML состоит из набора тегов - команд, и атрибутов - свойств. Их несложно запомнить, и всегда можно найти справочные материалы.

Что такое HTML-код

Код - это команды браузеру, как следует отобразить страницу. Есть структура, которая должна соблюдаться всегда. Например, наличие только одного заголовка H1 на странице, основная информация помещается в раздели т. д.

В языке есть три инструмента.

• Тег - это команда. Она указывает непосредственно на действие. Например,
  • 
    - перенести текст на новую строку.

  • Начать новый абзац.

  • - поместить текст в начало страницы.
• Атрибуты тега - это дополнение к командам. Они позволяют настроить то действие, которое заложено в теге. Например,
  • - здесь тег указывает на то, что в текст вставляется ссылка, а атрибут href - указывает адрес линка.
• Значение атрибута - поясняет, как именно нужно видоизменить свойство.
  • - возвращаясь к этому примеру, “сайт” - это значение атрибута.

Теги бывают двух видов - парные и одиночные.

• - парный тег, открывающий и закрывающий. Они действуют на текст, помещенный между ними.

• Одиночный тег, он действует на текст, стоящий после него до следующего тега.

Структура HTML-кода на странице

Мы говорили, что структура у любого html-документа всегда одна и та же. Далее перечислим обязательные элементы.

1. ! - указывает, что в документе используется HTML.
2. ... - в этот тег помещается весь код страницы. Все, что в него не помещено, не распознается браузером и не отображается.
3. ... - парный тег, в него помещается технрическая информация, например, о кодировке документа.
   1. - это заголовок страницы, он помещается внутри раздела head. У любой страницы должен быть свое уникальное название.
   2. - это служебная информация. Она подключает к странице отдельные стили - css и т. д. Не отображается пользователю.
4. ... - тело страницы. Вся основная информация заключается в этот тег.
   1. ... - гиперссылки.
   2. - изображения.
   3. ... - жирный текст.
   4. ... - курсив.

Элементов внутри body может быть неограниченное количество.

Например, вот так выглядит часть кода страницы одной из записей нашего блога.

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

• Интернет
• Программы
• Инструкции
• Браузеры
• Windows 10
• Android
• Ios
• Связь

Последние записи

Скачать хромиум Установить браузер хромиум

На IPhone не работает Wi-Fi Включается вай фай iphone 4s

Флешка постоянно отключается и включается

Стандартный нагрузочный тест

Что делать если пропали заказы в личном кабинете на Алиэкспресс?

Популярное

Решение проблем с демонстрацией экрана в скайпе

Операционная система Tizen в Samsung Smart TV Операционная система webos в телевизорах lg

Что же такое функция в Excel?

Новости

2024-05-23 01:40:21

Программы для настройки гитары на компьютер

2024-05-22 01:37:38

Бесплатная установка на ноутбук магазина плей маркет

2024-05-22 01:37:38

Как преобразовать LAB файл в PDF файл

2024-05-22 01:37:38

Способы очистки кэша на компьютере или ноутбуке

2024-05-21 01:37:12

USB Type-C: универсальный разъем для всего

viws.ru

viws.ru - Все о современной технике. Поломки, соцсети, интернет, вирусы

© 2024 - Все права защищены

• Контакты
• О сайте
• Реклама на сайте

• Интернет
• Программы
• Инструкции
• Браузеры

• Интернет
• Программы
• Инструкции
• Браузеры