Способы создания Webдокументов 1. 2. С помощью специального языка гипертекстовой разметки ( HTML – Hyper Text Markup Language) Использование специальных визуальных средств разработки, автоматизирующих процесс создания Web-документов. Разработка Webдокументов средствами MS Word.
Cоздание с помошью HTML и его расширений (ХHTML, XML) • Браузеры интерпретируют документы с этого языка и отображают на экране компьютера. • Кроме содержательной части документы HTML включают специальные управляющие конструкции – теги. В окне браузера теги не отображаются. Они служат для разметки документа ( описания его логической структуры управления формированием документа, размещением в нем гиперсылок, графических изображений и других объектов).
• При создании Web-документов с помощью языка HTML пользователю приходится вводить вручную не только содержательную часть документа, но и сами теги. Для этого ему нужно знать основные конструкции и синтаксис языка HTML или его расширений. Второй способ создания Web-документов предусматривает ввод не только содержательной части документа. Все управляющие конструкции генерируются в документе автоматически. • Основное преимущество первого способа заключается в потенциальном многообразии конструкций языка HTML, которым может воспользоваться пользователь. Этот способ не накладывает никаких ограничений на создаваемый код и позволяет создавать достаточно компактные, универсальные и качественные Web-документы. Преимуществами второго способа являются наглядность и удобство создания Webдокументов. Этот способ проще осваивать, так как он не требует знания языка HTML. Начинающим Web- разработчикам рекомендуется использовать именно этот подход.
Визуальные средства • Отображают создаваемые Web-документы в том виде, в котором они представляются в браузере, позволяя разработчику видеть все элементы создаваемого документа включая форматирование текста, графические документы и т. д. Недостатками таких средств являются ограниченность рамками поддерживаемых конкретной программой средств, отсутствие оригинальности, а также значительный объем получаемого HTML – кода, что отрицательно сказывается на скорости загрузки Web-страниц.
• Помимо обычных текстовых редакторов ASCII (например, Блокнота, встроенного в Windows) существуют коммерческие кодовые редакторы с мощными дополнительными инструментами и специальными функциями (например, мастером добавления изображений). К ним относятся Homesite – мощный HTML- редактор на основе Windows. В группе пакетов визуального редактирования выделим MS Front. Page 2003 широко используется, но для профессиональных Web-дизайнеров он не пригоден. Среди профессиональных дизайнеров популярен Macromedia Dreamweaver MX 2004 многофункциональный редактор для Macintosh и Windows. Он обладает отличной поддержкой стандартов и хорошо объединяется с серверными технологиями (PHP, ASP, Cold. Fusion и т. д. )
Основы языка HTML – не является языком программирования, по сути это система тегов, которые интерпретируются браузером. Как и у любого языка, у HTML есть грамматика и существуют правили синтаксиса и семантики. Все теги заключаются в угловые скобки, например: . Кроме отдельных тегов существуют теговые сеты (tagsets), содержащие теги открытия и теги закрытия. Тег закрытия отличается от тега открытия присутствием символа /, который добавляется перед именем тега. Например <p> -тег открытия первого абзаца, </p>- тег закрытия первого абзаца.
Элементы с текстовым содержимым (заголовки, абзацы, элементы списков) называются контейнерами. Элементы, в которым нет содержимого, являются пустыми ( разрывы строки, горизонтальный разделитель, графические изображения). Теги могут содержать дополнительные параметры атрибуты, которые имеют название и значение, например: href=“hello. html”. Значение атрибута указывается после символа = и заключается в двойные (“) или одинарные (‘) кавычки
Строение элемента HTML Теговый сет Тег открытия Тег закрытия <p class= “small”> Текст данного абзаца</p> Название Значение атрибута Текстовое содержимое
Ряд тегов HTML составляет базовую структуру любого Webдокумента • Весь код HTML-документа заключается между парой тегов <html> …</html>- в самом конце. Открывающий тег <html> помещается в самом начале документа, а закрывающий </html>- в самом конце • Элемент html – это «корень» документа. Внутри него размещаются два основных раздела HTML –документа: заголовок и тело документа.
Заголовок (head-голова) документа содержит общую информацию о текущем документе и заключается между тегом открытия <head> и тегом закрытия </head>. «Голова документа» может содержать название документа (title), метаданные (metadata), скрипты (scripts), Css (CSS -англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-ДОКУМЕНТА.
• элемент title с открывающим тегом <title> и закрывающим тегом </title> обязателен всегда. Он используется для указания названия документа. При просмотре HTML -документа название документа отображается в строке заголовка окна браузера
Тело (body) документа • содержит основной текст ( содержание) документа и заключается между тегом открытия <body> и тегом закрытия </body>. Таким образом, любой HTMLдокумент имеет следующий каркас: <html> <head><title>Заголовок</title></head> <body>Содержание документа</body> </html>
Создание абзацев • для создания абзацев используется элемент <p>. Атрибут align этого тега определяет режим выравнивания текста абзаца: значение centerвыравнивание по центру, left – по левому краю, right- по правому краю, justify-по ширине страницы. Если атрибут align опущен, текст абзаца выравнивается по левому краю. Для создания абзацного отступа «красной строки» в языке HTML не содержится средств. Абзацы документа разделяются пустой строкой при отображении на экране компьютера.
Пример создания абзацев: • • <p>Первый абзац текста</p> <p align=“right”>Второй абзац текста</p> <p align=“center”>Третий абзац текста</p> Для вставки разрыва строки используется тег . Текст, идущий после этого тега, будет располагаться с новой строки (без пропуска пустой строки)
Для создания заголовков • отдельных частей документа используются специальные элементы <Hn>, где n-число от 1 до 6, соответствующее уровню заголовку. Атрибут align этих тегов используется для указания режима выравнивания заголовков ( аналогично соответствующему атрибуту тега <p>. • При отображении документа на экране компьютера заголовки разного уровня показывают при помощи шрифтов разного размера.
Примеры заголовков 1 и 2 уровней: 1. Пример заголовка первого уровня: <h 1>Студент РГАУ-МСХА им. К. А. Тимирязева</h 1> 2. Пример заголовка второго уровня: <h 2>экономического факультета</h 2> Для задания параметров шрифта предусмотрен целый ряд тегов.
Теги, определяющие параметры шрифта • • <b> или <strong> - полужирный щрифт <i> или <em> - курсив <tt> - моноширинный шрифт <big> - крупный кегль <small> - мелкий кегль <sup> - верхний индекс <sub> - нижний индекс
Вставка горизонтальных линий • применяется для этого тег <hr>. Он позволяет отделять различные части текста друг от друга. Атрибут align используется для указания режима выравнивания. Атрибут size позволяет указать толщину линии в пикселях, атрибут width-ширину линии. Ширина линии может быть задана как в пикселях, так и в процентах относительно ширины страницы. Пример горизонтального разделителя: <hr width=“ 25%”>
Создание гиперссылки • используется элемент <a>. Атрибут href этого тега определяет URL объекта, к которому будет осуществляться переход по гиперссылке. При щелчке на гиперссылке связанный с ней объект по умолчанию отображается в том же самом окне браузера, что и исходный Web-документ. Атрибут target позволяет задать имя окна, в котором будет открыть этот объект. Пример гиперссылки: < a href=“http^//www. timacad. ru/”>Моя академия</a>
Внедрение в документ графического изображения • для внедрения в документ графического изображения используется тег <img>. Атрибут scr этого тега указывает URL (имя) файла, который должен отображаться в документе (этот атрибут является обязательным). Атрибут alt определяет альтернативный текст, который будет показан вместо изображения в случае, если файл не найден или режим отображения графики в браузере отключен
Атрибут title позволяет задать название рисунка. Атрибут align указывает режим выравнивания графического изображения: top - по верхней границе текста, midlle - по центру текста, bottom – по нижней границе текста, left – по левому краю страницы, right – по правому краю страницы. Атрибуты width и heigth задают размеры (высоту и ширину соответственно) граф. изобр. в пикселях Использование этих аврибутов желательно, так как при известных размерах изображения браузер
может выделить пространство для его отображения еще до завершения загрузки. Атрибут border определяет ширину рамки вокруг изображения в пикселях. Атрибуты hspace и vspace определяют расстояние от изображения до текста документа (отступы) по горизонтали и вертикали соответственно. Пример размещения графического изображения: <img src=“rgay. jpg” alt=“Логотип” title=“МСХА” heigth=“ 250” width=“ 380”>
Для создания списков используются несколько взаимосвязанных тегов, которые определяют тип списка, его заголовок и отдельные элементы. Тег <ul> задает маркированный список, Тег <ol> задает нумерованный список. Эти теги указывают границы списков и общие параметры форматирования. Элементы списка определяются тегами <li>.
Пример маркированного списка: <ul> <li>Первый элемент списка</li> <li>Второй элемент списка</li> <li>Третий элемент списка</li> </ul> Для организации вложенных (многоуровневых) списков сначала нужно создать внешний список, а затем включить в него внутренний список: <ol> <li>Первый элемент внешнего списка</li> <ul> <li>Первый элемент внутреннего списка</li> <li>Второй элемент внутреннего списка</li> </ul> <li>Второй элемент внешнего списка</li> </ol>
Создание таблицы • Для создания таблицы используется элемент <table>. Атрибут align указывает режим выравнивания таблицы по горизонтали. Таблица может быть выравнена по центру – center, left – по левому краю страницы, right – по правому краю страницы. • Атрибут width указывает ширину таблицы в пикселях или в процентах от ширины окна браузера. • Атрибут border определяет толщину линий, обрамляющих таблицу, в пикселях. Если линии не нужны, этот атрибут должен иметь значение 0. Атрибут cellspacing позволяет указать интервал между ячейками таблицы в пикселях. Значение атрибута cellpadding определяет отступы от содержимого до краев ячеек в пикселях.
Строки таблицы • Каждая из строк таблицы определяется тегом <tr>. Атрибут align управляет режимом выравнивания текста в ячейках строки по горизонтали. • Атрибут valign управляет режимом выравнивания текста в ячейках строки по вертикали. Выравнивание текста по верхнему краю – Top, по нижнему – bottom, посередине ячейки – middle.
Элемент ячеек таблицы • Каждой из ячеек таблицы соответствует элемент <td>. Между открывающим <td> и закрывающим </td> тегами размещаются данные, которые должны быть отражены в соответствующей ячейке таблицы. • Атрибуты align и valign этого тега имеют те же значения , что и соответствующие атрибуты тега <tr>, однако их действие распространяется только на отдельную ячейку таблицы. Атрибут width определяет ширину ячейки. Для создания ячеек, занимающих несколько строк или столбцов таблицы, используются атрибуты rowspan и colspan.
Заголовки столбцов таблицы • Для определения заголовков столбцов используется тег <th>. Этот тег должен находиться в пределах пары тегов <tr> …</tr>. Содержимое заголовков выделяется полужирным шрифтом. • Тег <caption> позволяет задать название таблицы.
Пример создания таблицы • <table><caption>Название таблицы</caption> • • • <tr><th>Заголовок столбца 1</th> <th>Заголовок столбца 2</th> <th>Заголовок столбца 3</th ></tr> <tr><td>Ячейка 1: 1</td><td>Ячейка 1: 2</td><td>Ячейка 1: 3</td></tr> <tr><td>Ячейка 2: 1</td><td>Ячейка 2: 2</td><td>Ячейка 2: 3</td></tr> </table>
Создание фреймов • Для создания фреймов используется элемент <frameset> (элемент <body> в таком документе отсутствует). При использовании фреймов окно браузера разделяется на несколько областей, в каждой из которых отображается отдельных Web-документ. Открывающий тег <frameset> обязательно должен содержать один из атрибутов: cols или rows, определяющий способ разбиения окна html-документа.
Скачать презентацию Способы создания Webдокументов 1 2 С помощью специального
Способы создания Web-документов.ppt