Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь FAQ Написать работу КАТЕГОРИИ: АрхеологияБиология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия Экология ТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Структура HTML документа, определяемая основными тегами↑ Стр 1 из 9Следующая ⇒ Содержание книги
Похожие статьи вашей тематики
Поиск на нашем сайте
Структура HTML документа, определяемая основными тегами Посмотрим, как выглядит самая обычная интернет-страница изнутри.
Создадим на диске D папку My_first_site, впрочем, можно назвать ее как угодно. В системном меню Start или Пуск заходим в раздел Программы (All Programs), открываем папку Стандартные (Аccessories), выбираем Блокнот . Конечно же, это не единственное средство для написания кода, но на этом этапе вам нужен именно он. Пример структуры документа:
Рассмотрим HTML теги, определяющие структуру страницы
Структура HTML документа | Пишем код страницы Последовательность действий следующая: 1. Пишeм в Блокноте код HTML страницы: 2. Заходим в File ⇒ Save as (Файл ⇒ Сохранить как), находим нашу папку D\My_first_site\ ⇒ прописываем имя файла: (File name) index.html (index – это имя,.html – расширение файла) ⇒ сохраняем. 4. Открываем IE (Internet Explorer). В меню выбираем File ⇒ Open... ⇒ находим сохраненный файл ⇒ нажимаем Open ⇒ OK:
Pезультат Для дальнейшего изучения материала необходимо следующее: Открываем index.html с помощью Firefox (File ⇒ Open File... ⇒ Open). В результате мы не можем прочитать, написанный нами, текст. Устраняется данная некорректность простым включением в HTML код двух тегов с набором атрибутов, которые также являются обязательными. HTML теги, определяющие HTML заголовки HTML заголовок как самостоятельный элемент интернет-страницы. Дальше в примерах будут показаны только участки кода, но в своих экспериментах не забывайте прописывать его целиком, по шаблону из первого урока и после каждого изменения в документе обновляйте web-страницу, нажатием на в Mozilla Firefox или на в Internet Explorer, или F5.
В предыдущем уроке вы познакомились с HTML заголовком 3-го уровня – всего их 6:
Для тегов заголовков характерно следующее: чем меньше цифра, тем больше размер шрифта. Результат: HTML заголовки и их размеры Зачем в тексте заголовки думаю понятно, к тому же, они используются поисковыми машинами для анализа содержимого web-страниц.
HTML заголовок слева
HTML заголовок по центру
HTML заголовок справа Атрибуты и значения
Элементы style="" есть линейные CSS включения. Урок 6. HTML перенос слов Исходный код HTML-страницы Исходный код H2O выглядит так:
Обратите внимание на порядок открытия и закрытия тегов: одна пара вкладывается в другую, то есть тег открытый первым – закрывается последним, второй – предпоследним. Исходный код любой web-страницы открывается следующим образом: в меню браузера заходим в View ⇒ Source или Page Source Исходный код доступен только для просмотра, но не для редактирования. HTML ссылка на сайт Пример:
Атрибуты и значения
HTML ссылка может быть окрашена в любой цвет, что подробно рассматривается в курсе по CSS. Изображение в роли ссылки Следующее изображение является ссылкой наверх страницы: Код:
border="0" – отменяет границу у изображения-ссылки. Заголовок HTML таблицы Пример:
Результат:
Теги <th> </th> определяют заголовок HTML таблицы. HTML таблица по центру, с левой, с правой стороны Горизонтальное расположение HTML таблицы внутри web-страницы:
Результат: HTML таблица слева, справа, по центру страницы В примере выше показаны три отдельные таблицы, каждая из которых состоит из одной ячейки. bgcolor – HTML атрибут – определяет цвет фона. В предыдущем уроке мы использовали его CSS аналог – background-color. HTML таблица внутри ячейки другой таблицы Пример:
Результат: HTML таблица внутри ячейки другой таблицы Внутри второй ячейки находится еще одна таблица со своими атрибутами, значениями и стилями. Размеры и фон внутренней таблицы, в отличае от внешней, заданы с помошью CSS. Ненумерованные HTML списки Пример:
Результат: Теги
Определяем тип маркера для элементов ненумерованного HTML списка:
Результат: Атрибуты и значения
Определяем тип маркера для элементов ненумерованного списка:
Результат: Нумерованные HTML списки Пример:
Теги <ol> </ol> определяют нумерованные HTML списки. Результат: Пример 2:
type="A" определяет в качестве маркера нумерованного HTML списка большие буквы. Результат: Пример 3:
type="а" определяет в качестве маркера нумерованного HTML списка маленькие буквы. Результат: Пример с атрибутом start:
Результат: Атрибут start="" определяет первый символ первого пункта нумерованного HTML списка. HTML списки определений Пример:
Результат: Рассмотрим теги
Жесткая блочная верстка Итак, исходный код файла index.html:
Исходный код file.css:
Результат: жесткая блочная верстка Мы имеем 2 файла: index.html и file.css. <link rel="stylesheet" href="file.css" type="text/css" /> в секции <head> </head> файла index.html не что иное, как ссылка на отдаленный документ file.css. Атрибуты style="" со значениями – прямое включение Каскадных таблиц стилей в HTML документ, что не является оптимальным вариантом внедрения стилевых описаний – семантически правильным есть способ ввода атрибутов class="" и id="" в теги документа и последующее описание их значений (значений атрибутов class="" и id="") во внешнем файле с расширением.css — такой способ не засоряет код страницы, что очень важно для поисковых роботов. В этом демонстрационном уроке был представлен тип жесткой верстки, реализованной с помощью блоков <div> </div>. Верстка называется жесткая, потому что размеры блоков установлены в пикселях. Другой вариант – табличная верстка рассматривается в cледующем уроке. Так выглядит страница index.html без использования стилей: страница Конечно же самый элементарный дизайн можно обеспечить с помощью HTML атрибутов и значений, но в нашем самоучителе не был описан такой метод, так как это нерационально и не способствует движению вперед. Блочная верстка, жесткая или резиновая является наиболее распространенным видом верстки среди профессиональных сайтов. или примеры верстки сайта с помощью таблиц Посмотрим как верстаются web-страницы при помощи таблиц. Способ табличной верстки сайта не является рекомендуемым или семантически правильным, в отличие от того, что был показан в предыдущем уроке, где верстка осуществлялась обычными контейнерами <div> </div> со стилевыми описаниями. В современном XHTML таблицы рекомендуется использовать только для представления данных, но никак не для верстки сайта. Невзирая на это, мы все же рассмотрим такой способ как дополнение к уроку по таблицам.
Жесткая табличная верстка Пример жесткой табличной верстки сайта:
Результат: жесткая табличная верстка Отметим, что использована структура XHTML документа, о чем свидетельствует <!DOCTYPE> и открывающий тег <html>. Параграф <p class="left_col"> содержит CSS атрибут class="", значение которого – селектор описывается в секции <style type="text/css"> </style>. Дальше вспоминаем уроки по таблицам...... Указываем ширину первой и третьей ячейки среднего ряда: width:120px + padding:15px = 150px (ширина одной ячейки) — умножаем на 2, получаем 300px. Ширина среднего столбца (ячейки) = (равна) ширина таблицы (860px) - (минус) ширина левого и правого столбца (300px). Что касается высоты, то все ячейки одого ряда автоматически выравниваются по самой высокой, поэтому в стилях, в описаниях среднего ряда была указана высота только одной — крайней левой. При расчете размеров всегда нужно учитывать значения padding, margin, border. Значения этих атрибутов задаются так: padding:20px – внутреннее поле элемента по всему своему периметру равно 20-ти пикселям или так: padding:10px 0 8px 60px – верхнее внутреннее поле равно 10-ти пикселям, правое – нулю, нижнее – 8-ми пикселям и левое – 60-ти пикселям (по часовой стрелке, начиная сверху). Жесткость такой верстки заключается в том, что размеры таблицы заданы в пикселях, а не в процентах, то есть они не зависят от размера монитора или окна браузера. Резиновая табличная верстка Пример резиновой табличной верстки сайта:
Результат: резиновая табличная верстка Сравните этот код и код из предыдущего примера, и вы увидите, что было изменено значение лишь одного атрибута в теге <table>. При <table width="100%"> горизонтальный размер таблицы напрямую зависит от разрешения монитора. В нашем случае ширина первого и третьего столбцов (ячеек) среднего ряда установлена жестко, а второй столбец растягивается, обеспечивая 100% ширину таблице. Недостатком такого типа верстки сайта является непостоянная структура содержимого «резиновых» ячеек, которая изменяется в зависимости от размера окна браузера — при этом изменяется и внешний вид страницы. Подробно взаимодействие основных инструментов сайтостроения: HTML и CSS, а также все способы верстки рассматриваются в следующем разделе самоучителя, в уроке CSS верстка. Дата публикации: Ноябрь 2009 | Обновление: Ноябрь 2010 Структура HTML документа, определяемая основными тегами Посмотрим, как выглядит самая обычная интернет-страница изнутри.
Создадим на диске D папку My_first_site, впрочем, можно назвать ее как угодно. В системном меню Start или Пуск заходим в раздел Программы (All Programs), открываем папку Стандартные (Аccessories), выбираем Блокнот . Конечно же, это не единственное средство для написания кода, но на этом этапе вам нужен именно он. Пример структуры документа:
Рассмотрим HTML теги, определяющие структуру страницы
Структура HTML документа | Пишем код страницы Последовательность действий следующая: 1. Пишeм в Блокноте код HTML страницы: 2. Заходим в File ⇒ Save as (Файл ⇒ Сохранить как), находим нашу папку D\My_first_site\ ⇒ прописываем имя файла: (File name) index.html (index – это имя,.html – расширение файла) ⇒ сохраняем. 4. Открываем IE (Internet Explorer). В меню выбираем File ⇒ Open... ⇒ находим сохраненный файл ⇒ нажимаем Open ⇒ OK:
Pезультат Для дальнейшего изучения материала необходимо следующее: Открываем index.html с помощью Firefox (File ⇒ Open File... ⇒ Open). В результате мы не можем прочитать, написанный нами, текст. Устраняется данная некорректность простым включением в HTML код двух тегов с набором атрибутов, которые также являются обязательными.
|
||||||||||||||||||||||||||||||||||||||
Последнее изменение этой страницы: 2016-08-01; просмотров: 459; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.118.144.199 (0.014 с.) |