HTML [Урок 2] | Разработка игровых платформ
  1. Доброго времени суток. В связи с появлением спамеров, активация функций новых пользователей (Создавать темы, писать сообщения), теперь будет только после проверки администратором! Для регистрации отписываемся в лс, в вк. vk.com/tehnik777 (Пишем только с реальных страниц)
    Скрыть объявление

HTML [Урок 2]

Тема в разделе "С++/С#, HTML, PHP, JavaScript, XML...", создана пользователем Zloo, 6 ноя 2016.

Обсуждение темы HTML [Урок 2] в разделе С++/С#, HTML, PHP, JavaScript, XML... на форуме zetta-forum.ru.

  1. Zloo

    Zloo Администратор Команда форума

    Регистрация:
    31 окт 2016
    Сообщения:
    265
    Симпатии:
    158
    Баллы:
    43
    Пол:
    Мужской
    Сайт:
    https://zetta-forum.ru
    VK:
    https://vk.com/tehnik777
    HTML [Урок 2]​

    Что скрывает в себе тег body?
    Тег <body> помимо своей основной функции, также применяется для определения цветов ссылок и текста на веб-странице.
    Подобные действия в HTML 4 осуждаются и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору BODY. Однако со стилями мы познакомимся позже.

    Вот они, атрибуты, от которых нам рекомендуют отказатся, но несмотря на это, они прекрасно поддерживаются всеми браузерами:

    • alink — Устанавливает цвет активной ссылки.[/*]
    • background — Задает фоновый рисунок на веб-странице.[/*]
    • bgcolor — Цвет фона веб-страницы.[/*]
    • bgproperties — Определяет, прокручивать фон совместно с текстом или нет.[/*]
    • bottommargin — Отступ от нижнего края окна браузера до контента.[/*]
    • leftmargin — Отступ по горизонтали от левого края окна браузера до контента.[/*]
    • link — Цвет ссылок на веб-странице.[/*]
    • rightmargin — Отступ от правого края окна браузера до контента.[/*]
    • scroll — Устанавливает, отображать полосы прокрутки или нет.[/*]
    • text — Цвет текста в документе.[/*]
    • topmargin — Отступ от верхнего края окна браузера до контента.[/*]
    • vlink — Цвет посещенных ссылок.[/*]

    Код:
    <html>
<head>
<title>Мой первый сайт</title>
</head>
<body link="#ff9900" vlink="#336699" alink="#ff6699">
Привет всем! А это мой первый <a href=" http://Tyt Bash sayt/">сайт</a>. С цветными <a href="#">ссылками</a>
</body>
</html>
    Как вы заметили, цвет указывается в непревычной для вас форме, в данном примере цвет указан в шестнадцатиричном значении. На начальном этапе вместо использования таких страшных обозначений цвета (#FF9900, #336699, #FFFFFF) можно ограничится названием цвета на английском языке (black, brown, red, darkred, yellow, green, blue, white и т.д.). Однако рано или поздно вам придётся впустить в свою жизнь обозначение цветов в HEX. А может вам больше понравится CMYK или HSV.

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


    Код:
    <body background="bg.jpg" bgproperties="fixed">
    Как вы видите, применён ещё один атрибут — bgproperties, он может принимать только значение fixed, это означает, что фон будет зафиксирован, и прокручиваться будет только контент.

    Манипуляции с изображениями

    Для того чтобы вставить изображение используется тег <img>. Этот тег имеет единственный обязательный атрибут src, который определяет адрес файла с картинкой.

    Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения в некоторых браузерах отображается рамка, которую можно убрать, добавив атрибут border=″0″ в тег <img>.

    Также изображение можно маштабировать, указав в атрибутах width и height, желаемый размер. Атрибут alt содержит описание изображения, которое выводится до загрузки изображения.

    Для того чтобы задать позицию изображения (слева, справа, по центру) используется атрибут align, который может принимать пять значений: bottom, left, middle, right, top.

    • bottom — Выравнивание нижней границы изображения по окружающему тексту.[/*]
    • left — Выравнивает изображение по левому краю окна.[/*]
    • middle — Выравнивание середины изображения по базовой линии текущей строки.[/*]
    • right — Выравнивает изображение по правому краю окна.[/*]
    • top — Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.[/*]

    Вот полный список атрибутов тега <img>:

    • align — Определяет как рисунок будет выравниваться по краю и способ обтекания текстом.[/*]
    • alt — Альтернативный текст для изображения.[/*]
    • border — Толщина рамки вокруг изображения.[/*]
    • height — Высота изображения.[/*]
    • hspace — Горизонтальный отступ от изображения до окружающего контента.[/*]
    • ismap — Говорит браузеру, что картинка является серверной картой-изображением.[/*]
    • longdesc — Указывает адрес документа, где содержится аннотация к картинке.[/*]
    • src — Путь к графическому файлу.[/*]
    • vspace — Вертикальный отступ от изображения до окружающего контента.[/*]
    • width — Ширина изображения.[/*]
    • usemap — Ссылка на тег <map>, содержащий координаты для клиентской карты-изображения.[/*]
    А теперь взяглянем на код примера размещения изображения-ссылки и маштабированного изображения:

    Код:
    <html>
<head>
<title>Мой первый сайт</title>
</head>
<body link="#ff9900" vlink="#336699" alink="#ff6699">
Привет всем! А это мой первый сайт. С картинкой ссылкой:
<a href="#"><img src="emblem-symbolic-link.png" width="16" height="16" border="0" alt="картинка-ссылка"></a>
<br>
А вот это же изображение без маштабирования: <img src="emblem-symbolic-link.png" border="0" alt="картинка">
</body>
</html>
    Работа с таблицами
    Я думаю слово «таблица» вам прекрасно знакомо. Вероятно, вы сталкивались с таблицами ранее: в учебниках, в газетах, в Microsoft Word. Таблицы также присутствуют и в HTML. Они играют здесь двойную роль: с одной стороны, это теги для создания таблиц с информацией, с другой стороны таблицы могут служить для разметки страницы на сектора. Ниже приведу рисунок, чтобы всё стало ясно.


    [​IMG]

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

    Также вы можете встретить тег <th> — аналогичен тегу <td>, используется для обозначения заголовочных ячеек.

    Приведу атрибуты тега <table>, которые могут пригодится вам при создании таблицы:


    • ALIGN — Задает выравнивание таблицы по краю окна браузера. Допустимые значения: left — выравнивание таблицы по левому краю,center — по центру и right — по правому краю.[/*]
    • BGCOLOR — Устанавливает цвет фона таблицы.[/*]
    • BORDER — Устанавливает толщину рамки в пикселах. По умолчанию рамка изображается трехмерной, но если используется параметр bordercolor тега <TABLE>, то вид рамки меняется. Когда в теге <TABLE>используется параметр border без аргументов (<table border>), то браузер отображает рамку толщиной один пиксел.[/*]
    • BORDERCOLOR — Устанавливает цвет рамки таблицы. Рамка обычно рисуется как трехмерная, добавление параметров bordercolor и border к тегу <TABLE> создают однотонную линию.[/*]
    • CELLPADDING — Определяет расстояние между границей ячейки и ее содержимым. Этот параметр добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без параметра cellpadding текст в таблице «налипает» на рамку, снижая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот параметр не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.[/*]
    • CELLSPACING — Задает расстояние между внешними границами ячеек. Если установлен параметр border, толщина границы принимается в расчет и входит в общее значение.[/*]
    • HEIGHT — Устанавливает высоту таблицы. В спецификации HTML 4 этого параметра нет, однако браузеры в большинстве случаев понимают его, если он установлен у тега <TABLE>. Если высота таблицы не указана, то берется суммарное значение параметра height у тега <TD>, в противном случае высота вычисляется на основе содержимого таблицы.[/*]
    • WIDTH — Задает ширину таблицы. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в таблице находятся изображения, параметр width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого. Как и в случае с высотой, если ширина явно не указана, то она будет вычисляться на основе содержимого таблицы.[/*]

    У тега <td> также есть свои атрибуты:

    • ALIGN — Задает выравнивание содержимого ячейки по горизонтали. Возможные значения: left — выравнивание по левому краю, center — по центру и right — по правому краю.[/*]
    • BGCOLOR — Устанавливает цвет фона ячейки. Используя этот параметр совместно с атрибутом bgcolor тега <TABLE> можно получить разнообразные эффекты в таблице.[/*]
    • BORDERCOLOR — Устанавливает цвет рамки вокруг ячейки. Рамка показывается, когда установлен параметр border с ненулевым значением у тега <TABLE>.[/*]
    • COLSPAN — Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной ниже, где используется горизонтальное объединение ячеек.[/*]
    • HEIGHT — Браузер сам устанавливает высоту таблицы и ее ячеек исходя из их содержимого. Однако при использовании параметра heightвысота ячеек будет изменена. Здесь возможны два варианта. Если значение height меньше, чем содержимое ячейки, то этот параметр будет проигнорирован. В случае, когда установлена высота ячейки, превышающая ее содержимое, добавляется пустое пространство по вертикали.[/*]
    • NOWRAP — Добавление параметра nowrap к тегу <TD> заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой. Неправильное использование этого атрибута может привести к тому, что таблица будет слишком широкой и не поместится целиком на веб-страницу. Как следствие, появится горизонтальная полоса прокрутки. В любом случае, пользоваться подобной таблицей будет неудобно, из-за чего применение параметра nowrap осуждается в спецификации HTML 4.[/*]
    • ROWSPAN — Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной ниже, где применяется вертикальное объединение ячеек.[/*]
    • VALIGN — Устанавливает вертикальное выравнивание содержимого ячейки. По умолчанию контент ячейки располагается по ее вертикали в центре. Возможные значения: top — выравнивание по верхнему краю строки, middle — выравнивание по середине, bottom — выравнивание по нижнему краю, baseline — выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии.[/*]
    • WIDTH — Задает ширину ячейки. Суммарное значение ширины всех ячеек может превышать общую ширину таблицы только в том случае, если содержимое ячейки превышает указанную ширину.[/*]
    Рассмотрим первый случай, когда нам необходимо создать таблицу, в которой некоторые ячейки будут объединены:


    Код:
    <html>
<head>
<title>Мой первый сайт</title>
</head>
<body>
<table border="1" bgcolor="#F5F5F5" align="center">
<tr>
<td colspan="2" bgcolor="#FF3377" align="center" width="100">HTML</td>
<td colspan="2" bgcolor="#FF7733" align="center" width="100">CSS</td>
</tr>
<tr>
<td rowspan="2" valign="bottom" width="100">Тег</td>
<td width="100" align="center">br</td>
<td rowspan="2" valign="top" width="100">Свойство</td>
<td width="100">text-shadow</td>
</tr>
<tr>
<td width="100" align="center">hr</td>
<td width="100">text-decoration</td>
</tr>
</table>
</body>
</html>
    Второй вариант применения таблиц — это разбиение страниц на блоки. В настоящее время данный способ не очень приветствуется, в большинстве случаев — критикуется. Мнение большинства совпадает с моим. Два года я верстал с помощью таблиц и меня всё устраивало. Однако попробывав блочную вёрстку, я полностью отказался от табличной. Блочная вёрстка это совсем другой уровень, но об этом позже. Но для расширения знаний, будет полезно научиться табличной вёрстке. Да и будет с чем сравнивать в будущем.


    Код:
    <html>
<head>
<title>Мой первый сайт</title>
</head>
<body>
<table border="0">
<tr>
<td colspan="2" height="100" bgcolor="#FF3377" align="center" width="100%">Это хедер, в нём обычно находится название сайта, слоган и навигация по сайту</td>
</tr>
<tr>
<td width="80%" height="600" valign="top" bgcolor="#F5F5F5">Здесь будет содержаться основной контент</td>
<td width="20%" height="600" align="center" bgcolor="#DDDDDD">Это сайдбар, здесь обычно реклама, ссылки на другие сайты, подписка на RSS и т.д.</td>
</tr>
<tr>
<td colspan="2" height="50" width="100%" align="center" bgcolor="#AAAAAA">&copy;2011 Stafox.ru</td>
</tr>
</table>
</body>
</html>
    На этом второй урок подошел к концу.
     
    Zloo, 6 ноя 2016
    #1

Поделиться этой страницей