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

21.06.2020

Курс «Создание Web-страниц средствами языка HTM L »

Тема 1. Начальные сведения о языке HTML

Назначение языка HTML

Web -страницы – это специальные файлы, написанные на языке HTML (Hyper Text Markup Language – язык разметки гипертекста) . Под разметкой понимается вставка в текст специальных кодов (тегов), определяющих то, как итоговый гипертекстовый документ должен отображаться специальной программой - броузером.

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

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

Язык HTML появился одновременно со службой Worl d Wide Web и развивался вместе с ней. Он является основой Worl d Wide Web и одновременно причиной ее широчайшей популярности.

HTML - файл

HTML - файл – текстовый файл, имеющий расширение .htm или . html Web -страница хранится в виде HTML - файла. Для создания HTML - файла могут использоваться как простые текстовые редакторы, такие как Блокнот или Word Pad , так и редакторы Web.

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

Документ HTML состоит из основного документа и тегов разметки, которые являются наборами обычных символов.

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

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

    Сам текст документа располагается в теле документа . Тело документа располагается между тегами и BODY >. На практике определить место положения этих основных тегов можно и при их отсутствии. Поэтому, если теги, и , а также соответствующие им закрывающие теги опущены, то программа - броузер может сама определить то место, где они должны были находиться. Но всё-таки при создании Web-страниц опускать эти теги не рекомендуется.

Простейший правильный документ HTML.

< HEAD >

< TITLE >Заголовок документа TITLE >

HEAD >

< BODY >

BODY >

Теги HTML

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

Тег – инструкция броузеру, указывающая способ отображения текста. Все теги начинаются с символа «меньше» (<) и заканчиваются символом «больше» (>). Пару этих символов иногда называют угловыми скобками. После открывающей угловой скобки идет ключевое слово , определяющее тег.

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

Существует два типа тегов – парные и непарные.

Парные теги – открывающие и закрывающие, аналогичные круглым скобкам алгебраического выражения. Они влияют на текст с того места, где употреблены, до того места, где указан признак окончания их действия (закрывающие теги начинаются с символа косой черты (/).

Например, < HTML > HTML >, < P > P >, H 3>

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

Например,
, ,

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

Пример.

Пример создания таблицы

Из примера видно, что страничка использует кодировку W indows-1251 - наиболее распространенную на сегодняшний день, достаточно лишь каждый раз вставлять этот тэг в таком виде на свою страничку; автор страницы – Иванов Иван; страница посвящена животным.

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

Атрибуты тегов

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

Атрибуты – это дополнительные ключевые слова, отделенные от ключевого слова тега и друг от друга пробелами.

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

    символов английского алфавита;

  • промежутков времени;

    дефисов (-).

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

    символов английского алфавита (A - Z , a - z )

    цифр (0 - 9 )

    промежутков времени

    дефисов (- )

Таким образом, WIDTH=80 и ALIGN=CENTER - разрешенное сокращение для WIDTH="80" и ALIGN="CENTER" .
Закрывающие теги не содержат атрибутов.

Примеры. FONT >

Комментарии

Подобно тому, как во всех языках программирования есть возможность внесения в программу комментариев (текстовых строк, не являющихся частью программы), есть она и в языке HTML. Начинается комментарий со специального тега. Комментарий может включать в себя любые символы, кроме символа “больше” (>), и, таким образом, не может включать в себя теги.

Принцип наследования тегов

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

<начало 2-го тега>

текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

<начало 3-го тега>
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

<Конец 3-го тега>

<Конец 2-го тега>

<Конец 1-го тега>

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

Также следует заметить, что некоторые атрибуты вложенных тегов могут воздействовать и на вышестоящие, "старшие" теги. Например, это типично для таблиц, вложенных одна в другую.
Если у внутренней таблицы размер задан 100 , то у внешней не может быть размера меньше 100 пикселов + толщина рамки. Таким образом, вложенная таблица как бы "распирает" ту, в которую она вложена. При этом, даже если у нее не задан размер, а количество текста в ней значительно, она будет распирать "старшую" таблицу на такой размер, который необходим для отображения соответствующего количества строк текста. Это называется "обратная связь".

Практическая работа № 1

«Создание простейшей Web -страницы»

Цель: научиться создавать Web -страницы в текстовом редакторе Блокнот.

Указания к выполнению

    Наберите в нём структуру HTML -документа, которая приведена ниже:

О братьях наших меньших.

Здесь будет размещено содержание Web-страницы

    Сохраните файл, присвоив ему имя index .htm .

    Откройте созданный файл. Вы увидите, как выглядит созданный вами файл в окне браузера.

    Закройте браузер.

    Вернитесь к сохранённому в Блокноте файлу.

Внесите в него следующие изменения: вместо слов «Здесь будет размещено содержание Web -страницы», наберите следующие:Это моя первая страничка .

В строке < TITLE > укажите: «Домашняя страничка (ваше имя и фамилия)».

    Сохраните файл как page 2.htm .

    Просмотрите результат в браузере, при необходимости отредактируйте файл при помощи Блокнота.

Тема 2. Теги HTML

Теги физического и логического форматирования текста

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

Рассмотрим более подробно стандартные элементы языка HTML, позволяющие форматировать текст.

Шрифт - это таблицы замены кода видимым изображением.
Каждая клавиша вашей клавиатуры дает определенный код, распознаваемый ОС (операционной системой, в большинстве случаев это Windows или Linux/Unix).
Таким образом, выбрав определенный шрифт, система заменяет полученный с клавиатуры код на сопоставленное в таблице символов шрифта изображение буквы или значка. Каждый шрифт - это файл. Файл, содержащий изображения букв, цифр и символов, назначаемых на каждую кнопку. Установить шрифт - означает включить в систему файл с дополнительными таблицами сопоставления. В системах MS Windows обычно используется несколько шрифтов, поставляемых вместе с системой - это:

Arial

Ариал

Courier New

Курьер Нью

Comic Sans

Комик Санс

Times New Roman

Таймс Нью Роман

Verdana

Вердана

Каждый из этих шрифтов уместен в своем дизайне и стиле. Наиболее распространен - Ариал. Все эти шрифты есть у 90% всех посетителей вашей будущей странички. Каждый шрифт - это самостоятельный файл в папке Windows/fonts/ *.ttf. Как в HTML придать шрифту тот или иной вид?
< FONT >… FONT > определение типа, размера и цвета шрифта . Все эти характеристики определяются при помощи соответствующих атрибутов.

Абсолютный размер шрифта задается атрибутом si ze (размер) . Этот атрибут может принимать значения от 1 до 7, при этом шрифт 1-го размера - самый маленький, а 7-го – самый большой.
Примеры.

текст размера 1
текст размера 2
текст размера 3
текст размера 4
текст размера 5

текст размера 6
текст размера 7

Тише едешь – дальше будешьONT >.
В дизайне обычно используются первые четыре размера. Все, что выше, дурной тон и признак дилетантства, ибо занимает слишком много места и трудно читается. Правда, и большим размерам находится применение. Например, седьмым размером можно писать буквицу (первую букву начала главы): Т екст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.
Кроме прочего, мы можем выбрать и сам шрифт, используемый для отображения текста. Делается это атрибутом face (вид).

Примеры. Это шрифт arial размером 3 ONT >
текст FONT >
Как видим, э ти два атрибута - размер и вид шрифта, - можно расположить в любой последовательности в теге :
Можно также использовать атрибут color (цвет). Название цвета задается либо числом, написанным в шестнадцатеричной системе, например, co lor=”#ff 0000”, либо просто его названием, написанным на английском языке, например, color =”red ”.Примеры. Это шрифт синего цвета FONT >
Это шрифт arial размером 3, цвет синий FONT >
Шрифт так же может быть: наклонный (курсив), жирный, подчеркнутый, перечеркнутый, надстрочный, подстрочный, а также сочетающий в себе несколько указанных видов. Достигается это, соответственно, тегами:
< I > текст I >
< B >текст B >
< U > текст U >
< S > текст S >
< SUP > текст SUP >
< SUB > текст SUB >,
а также их сочетанием, например, <U > текст U >B >
Форматирование абзаца. В большинстве обычных документов основными функциональными разделами являются заголовки и абзацы. Web -документы не являются исключением. Для обозначения обычных абзацев в языке HTML используют тег

…P > (Paragraph ). Причем, можно использовать только начальный тег, так как следующий элемент

обозначает не только начало следующего абзаца, но и конец предыдущего. В тех случаях, когда по смыслу необходимо обозначить завершение абзаца, можно использовать и конечный тег.
Вместе с тегом абзаца можно использовать и атрибут align (выравнивание) :
align =”left ” – выравнивание по левому краю;
align =”right ” - выравнивание по правому краю;
align =”center ” - выравнивание по центру.
Пример.

Глава 1P >

АнимацияP >

стр. 3P >

В языке HTML нет средств для создания абзацного отступа (”красной строки”), поэтому для удобочитаемости текста между абзацами броузер обычно вводит пустую строку. Если нужно осуществить переход на новую строку без создания абзаца, используется одиночный тег
. В месте его размещения строка заканчивается, а оставшийся текст печатается с новой строки. Этот тег удобно использовать, чтобы, например, писать стихи в столбик:
Уронили мишку на пол,
Оторвали мишке лапу,
Все равно его не брошу,
Потому, что он хороший.
На экране браузера мы увидим стандартным образом написанное четверостишие.

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

Выравнивание

align = “left”

align = “ center”

align = “ right ”

align = “ justify ”

Толщина и длина линии в пикселях.

Size = 3(ширина в пикселях)

width= 300 (длина в пикселях)

width= 100% (длина в процентах)

Цвет линии

color =”red ”

Язык HTML поддерживает шесть уровней внутренних заголовков документа. Они помечаются тегами от

…

до
…
.
Заголовок первого уровня самый крупный, а шестого уровня – самый мелкий. Для заголовков можно использовать атрибуты выравнивания влево, по центру, вправо.
Пример. Самый большой заголовок
Самый маленький заголовок

Домашние животные

Логическое форматирование текста . В данном пункте мы рассмотрим теги, по своему эффекту очень напоминающие теги, задающие размер, цвет и начертание шрифта. Однако принципиальное различие заключается в том, что эти теги действительно описывают реальные свойства текста. Это означает, что текст может по разному отображаться в разных браузерах, но какой-то эффект гарантирован даже в том случае, когда по какой-то причине нет возможности применить шрифтовые эффекты. Все эти теги парные и воздействуют на текст, заключенный между открывающим и закрывающим тегами. Закрывающий тег обязателен.
Тег … используется для цитат, названий книг. Обычно изображается курсивом.
Так как язык HTML был создан людьми, связанными с компьютерами, целая группа тегов предназначена для представления текстов компьютерных программ и результатов взаимодействия пользователя с ними.
Тег < CODE >… CODE > указывает на исходный текст компьютерной программы, обычно отображается моноширинным шрифтом (чаще всего шрифт Courier), то есть шрифтом с фиксированным размером.
Тег < KBD >… KBD > оформляет текст, который должен быть (или был) введен с помощью клавиатуры, обычно отображается моноширинным полужирным шрифтом. От английского keyboard - клавиатура
Пример.

Для запуска Windows наберите: win .
Код :
Для запуска Windows наберите: win
Тег … отмечает текст как образец (sample). Используется для отметки текста, выдаваемого программами. Отображается моноширинным шрифтом.
Пример.
Это обычный текст
Тег … используется для выделения переменных в листинге программы. Обычно такой текст отображается курсивом. От английского var iable – переменная.
Пример .
A , B , C
Код:
 A , B , C var >

Тег < EM >… EM > используется для выделения элементов текста (обычно курсивом).
Тег < STRONG >… STRONG > используется для более сильного выделения элементов текста (полужирным шрифтом).
Пример.
Это обычный текст
А это уже текст с использованием тега .
Так как здесь используется смысловое выделение вместо оформительского, рекомендуется использовать эти теги вместо тегов и < B >.

Практическая работа № 2

“Форматирование текста на Web-странице”

Цель: научиться форматировать шрифт и текст на Web -странице.

Указания к выполнению

    В элементе < TITLE > укажите название странички “П/р № 2”.

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

Домашние животные

(заголовок H 1)

(выравнивание по центру)

Собаки

(заголовок H 2)

(выравнивание по центру)

Сторожевые

(выравнивание слева, полужирный шрифт)

Охотничьи

(выравнивание справа, полужирный шрифт)

Дрессировка

(выравнивание по центру, полужирный курсив)

Клубы Выставки Площадки

(выравнивание по центру, размер шрифта 10, цвет шрифта красный, шрифт Arial )

Стихотворение

(цвет шрифта синий, размер шрифта 6, выравнивание по центру)

По жизни я скромен,

Оваций не надо,

Но как же я классно

Смотрюсь у снаряда!

(выравнивание по левому краю, размер шрифта 6)

Создание списков

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

Теги создания ненумерованного списка:

< LI > UL >
Тег
  • является своеобразным обрамлением списка. Он позволяет отделять один список от другого. Тег
  • обозначает каждый из пунктов.

    Пример.


      Пункт 1 списка
      Пункт 2 списка
      Пункт 3 списка

    Вид на экране:

      Пункт 1 списка

      Пункт 2 списка

      Пункт 3 списка

    Теги создания нумерованного списка: < O L> < LI > OL >


    Нумерованные списки. Структура нумерованного списка похожа на структуру ненумерованного списка. Только для обрамления используется тег

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

    Пример.


      Пункт 1 списка
      Пункт 2 списка
      Пункт 3 списка
      O L>

      Вид на экране:

        Пункт 1 списка

        Пункт 2 списка

        Пункт 3 списка

      Способ нумерации задается при помощи атрибута type . В таблице приведены все способы нумерации:

      Вид нумерации

      Практическая работа № 3

      «Создание нумерованных и ненумерованных списков»

      Цель : научиться создавать списки на Web –страницах.

      Указания к выполнению :

      1 . Создайте новую Web –страницу в редакторе Блокнот.

      2 . В элементе укажите названия странички «П/р № 3».</p> <p><b>3 </b>. Отформатируйте следующий текст согласно указаниям (даны в скобках курсивом), как показано на рисунке:</p> <p>Солнце должно быть: </p> <p><i>(Шрифт размером 8, красного цвета, </i></p> <p><i>выравнивание по центру) </i></p> <p>1. Теплым.</p> <p>2. Круглым.</p> <p>3. Желтым.</p> <p>Снег должен быть: </p> <p><i>(Шрифт размером 6, синего цвета, </i></p> <p><i>выравнивание по центру) </i></p> <p>В. Холодным.</p> <p>С. Пушистым.</p> <p><i>(Шрифт обоих списков черный, размер 3). </i></p> <p><i><b>Гиперссылки<br></b> </i><i><u>Виды гиперссылок. </u> </i><i> </i><b>< </b><b>A </b> <b>>… </b><b>A </b> <b>> </b> создание гипертекстовой ссылки.<br>В этом теге обязателен атрибут <b>href </b> <b>. </b>Его значением является адрес URL, на который указывает ссылка. Текст ссылки размещают между тегами <b>< </b><b>A </b> <b>>… </b><b>A </b> <b>>. </b>При отображении документа в браузере текст ссылки обычно подчеркивается и изображается синим цветом. Щелчок на ссылке приводит к переходу по заданному адресу URL.</p> <p>Можно выделить несколько видов гиперссылок.</p> <ul><p>Внешние (связывают Web-страницу с документами, не принадлежащими данному Web-узлу).</p><p>Внутренние (связывают документы внутри одного и того же Web-узла).</p> </ul><p><i><u>Абсолютный путь. </u> </i><i> </i>Если гиперссылка внешняя, то указывается полный URL документа, называемый еще <i>абсолютным путем. <br>Пример. </i> <A href =”<u><span>http </u> </span><u>:// </u> <u><span>www </u> </span><u>. </u> <u><span>microsoft </u> </span><u>. </u> <u><span>com </u> </span> ”>Microsoft A ><br>Основное неудобство абсолютного пути заключается в том, что при переносе файлов на другой сервер в Интернете требуется менять все гиперссылки.</p> <p><i><u>Относительный путь. </u> </i><i> </i>Если гиперссылка внутренняя, то <b>указывается только та часть </b><b>URL </b> <b>, которая отличается у двух связываемых документов (</b>так называемый<i>относительный путь </i><b>), </b> например, если два документа находятся в одной папке, то достаточно указать имя файла, на который указывает гиперссылка. <br>Если документы находятся в разных папках, то сначала указывается имя папки, затем имя файла, на который указывает гиперссылка.</p> <p><i>Примеры. </i> <A href =”my .htm ”>Моя личная страницаA ><br> <A href =”sport /run .html ”>Бег на длинные дистанцииA ><br>Использовать внутренние ссылки удобнее, так как в этом случае при переносе Web -узла на другой сервер не требуется вносить изменения в отдельные документы.</p> <p><i><u>Якоря. </u> </i><i> </i>Гипертекстовые ссылки могут указывать на определенное место внутри страницы, если в нужное место предварительно вставить <i>якорь </i>. Якорь также использует теги <A > и A >, но вместо атрибута href для него обязательным является атрибут <b>name </b> . Значением этого атрибута является <i>имя якоря. </i>Оно может состоять только из латинских букв, цифр и не должно содержать пробелов. <br>Для ссылки на установленный якорь надо указать имя якоря в конце адреса URL после имени документа, отделив его символом «#».</p> <p><i><u>Указание почтового адреса в гиперссылке </u> </i>. Когда гиперссылка используется для указания адреса электронной почты, ее выбор обеспечивает не переход к новому документу, а запуск почтовой программы на компьютере для отправки сообщения указанному адресату. Обычно такую ссылку размещают в конце страницы для обеспечения связи с Web-мастером или автором страницы, например, <A href =”mailto :vebmaster @mail .ru >Иванов АлексейA ></p> <p><i>Пример.<br></i><HTML ><br> <HEAD ><br> <TITLE >Ссылки и якоряTITLE ><br>HEAD ><br><BODY ><br> Новые версии стандартных программ операционной системы свежие драйверы можно найти на Web -узле компании<br> <A href =”<u><span>http </u> </span><u>:// </u> <u><span>www </u> </span><u>. </u> <u><span>microsoft </u> </span><u>. </u> <u><span>com </u> </span> ”>Microsoft A ><br> <P >А теперь можно перейти к <A href =”my .htm ”>моей личной страницеA ><br></p><p>О том, как связаться с автором, рассказано в <br> <A href =”#address ”>конце этой страницы<br><i> </i>Здесь располагается основное содержание страницы<br><i> </i><a>address”>Адрес электронной почтыA ><br>BODY ><br>HTML ></a></p> <p><b>Практическая работа № 4 </b> </p> <p><b>«Создание гиперссылок» </b> </p> <p><b>Задание 1. </b> Создание простейшей гиперссылки.</p> <p><b>Цель: </b> научиться связывать два HTML –документа с помощью гиперссылок.</p> <p><b>Указания к выполнению: </b> </p> <ul><p>Создайте две Web –страницы в редакторе Блокнот. Одну назовите page 1.htm , вторую page 2.htm . Обе странички сохраните в одной папке под названием site . Обратите внимание, что названия папки и страничек должны быть на английском языке и начинаться со строчной буквы.</p><p>В элементе <title > укажите названия странички «П/р № 4. Задание 1».</p> </ul><p>На страницу 2 </p> <p>На страницу 1 </p> <ul><p>Откройте в браузере первую страничку и убедитесь, что обе гиперссылки работают правильно.</p> </ul><p><b>Задание 2. </b> Создание гиперссылок.</p> <p><b>Цель: </b> научиться связывать три HTML –документа с помощью гиперссылок.</p> <p>Выполнить второе задание вы можете, если успешно справились с Заданием 1.</p> <ul><p>Создайте третью страничку page 3.htm .</p><p>На страничке page 3.htm создайте гиперссылки для перехода на странички page 1.htm и page 2.htm .</p><p>На страничках page 1.htm и page 2.htm добавьте гиперссылку для перехода на страничку page 3.htm .</p><p>Откройте в браузере первую страничку и убедитесь, что теперь можно перейти с любой странички на любую другую из трех созданных.</p> </ul><p><b>Задание 3. </b> Цвет гиперссылок<b>. </b> </p> <p><b>Цель: </b> научиться определять цвет гиперссылок.</p> <p>Выполнить задание вы можете, если успешно справились с Заданием 2.</p> <ul><p>На страничках page 1.htm , page 2.htm и page 3.htm в тэге <body > определите цвет гиперссылок:</p> </ul><ul><p>Откройте в браузере первую страничку и, переходя по ссылкам со странички на страничку, убедитесь, что цвет гиперссылок задан верно.</p> </ul><p><i><b>Рисунки на </b> </i><i><b>Web </b> </i> <i><b>-странице. </b> </i></p> <p>Иллюстрации (рисунки, фотографии) играют важнейшую роль в оформлении Web -страниц. Сами рисунки хранятся в отдельных файлах вне документа HTML , но отображаются браузером внутри. Для этого служит одиночный тег <b>< </b><b>IMG </b> <b>>. </b>Обязательным атрибутом этого тега является атрибут <b>src </b> , значением которого является путь к файлу с рисунком или фотографией,</p> <p>Если картинка лежит в той же папке, что и Web -страница, то путь представляет собой просто имя файла, например: <img src='/yazyk-ispolzuemyi-dlya-sozdaniya-veb-stranic-yazyki-programmirovaniya-i.html' loading=lazy>. Если картинка лежит в другой папке, то эту папку надо указать, например: <img src='/yazyk-ispolzuemyi-dlya-sozdaniya-veb-stranic-yazyki-programmirovaniya-i.html' loading=lazy>. Если картинка лежит на другом сайте, то путь прописывается полностью: <br><img src='https://i2.wp.com/homepage.ru/my/my.jpg' loading=lazy>.</p> <p>В теге <img src='/yazyk-ispolzuemyi-dlya-sozdaniya-veb-stranic-yazyki-programmirovaniya-i.html' loading=lazy> можно также использовать такие атрибуты, как:<br><b>height </b> <b>, </b><b>width </b> – задают высоту и ширину области, в которой демонстрируется рисунок. Если задан только один из этих атрибутов, то второй размер устанавливается в соответствующей пропорции. Но нужно помнить, что масштабирование ухудшает качество изображения. Размер рисунка измеряется в пикселях или в процентах, например: <img src='/yazyk-ispolzuemyi-dlya-sozdaniya-veb-stranic-yazyki-programmirovaniya-i.html' loading=lazy>, <b>border </b> <b> – </b>задаёт толщину рамки вокруг картинки (в пикселях). Этот атрибут можно не задавать, так как, по умолчанию, рамка вокруг картинки есть всегда. Но, если вы хотите её убрать, то <u>выставляйте значение атрибута border равным нулю, <br></u><b>bordercolor </b> – задаёт цвет рамки вокруг картинки, например:<br>< IMG src="picture.gif" border="3" bordercolor="#CC0000"> <br>В нашем примере цвет рамки задан красным, ну, и, естественно, что атрибут border (толщина рамки) не должен равняться нулю, если вы хотите видеть рамку вокруг картинки,<br><b>align – </b>выравнивание картинки относительно других объектов:<br> картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа,<br> картинка - справа, текст - слева.</p> <p>Текст может располагаться также внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3):<br>(1) - <br>(2) - <br>(3) - </p> <p><b>vspace </b><span> - задает расстояние между текстом и рисунком (по вертикали):<br>,<br></span><b>hspace </b> <span>- задает расстояние между текстом и рисунком (по горизонтали): </p> <p>< imgsrc=" pr1. png" hspace<span>="30"><br>Расстояние задается в пикселях. </p> <p>С помощью тега <img src='/yazyk-ispolzuemyi-dlya-sozdaniya-veb-stranic-yazyki-programmirovaniya-i.html' loading=lazy> можно использовать изображения в гиперссылках, вставлять картинки в таблицы, решать задачи дизайна…</p> <p><b>Практическая работа № 5 </b> </p> <p><b>«Использование рисунка в качестве гиперссылки» </b> </p> <p><b>Цель </b>: научиться использовать рисунок в качестве гиперссылки.</p> <ul><p>На страничках page 1.htm , page 2.htm и page 3.htm вместо текстовых гиперссылок используйте рисунки. Для этого:</p> </ul><ul><p>откройте папку, указанную учителем (в папке находятся файлы с изображением цветных кнопок), вставьте на первую страничку изображение голубой кнопки и создайте гиперссылку для перехода на вторую страницу:</p> </ul> <ul><p>Самостоятельно вставьте изображение оранжевой кнопки для перехода с первой страницы на третью;</p><p>Задайте бордюр обоих изображений равным 2;</p> </ul><ul><p>Откройте в браузере первую страничку и, переходя по ссылкам со странички на страничку, убедитесь, что кнопки работают верно.</p><p>Самостоятельно вставьте изображения кнопок на страницы page 2.htm и page 3.htm и задайте соответствующие гиперссылки.</p><p>Откройте в браузере первую страничку и, переходя по ссылкам со странички на страничку, убедитесь, что кнопки на всех страничках работают верно.</p> </ul><p><i><u>Альтернативный текст. </u> </i> </span><i> </i> Web<span>-страница может отображаться браузером, не имеющим средств для показа изображений. Пользователи часто отключают показ рисунков, чтобы ускорить прием документа. И в том и в другом случае желательно дать возможность узнать, что же изображено на картинке, если ее нельзя увидеть. Для этой цели используют альтернативный текст, который задается в теге < </span>IMG> атрибутом <b>alt </b><b> (или </b> <b>title </b><b>), </b> <span>этот атрибут выводит текст в месте расположения картинки во время её загрузки. Например: </p> <p><img src='/yazyk-ispolzuemyi-dlya-sozdaniya-veb-stranic-yazyki-programmirovaniya-i.html' loading=lazy></p> <p><i><u>Использование рисунка в качестве фона </u> </i>. Если вы хотите использовать рисунок в качестве фона странички (“обоев”), то в теге <BODY > используем этот атрибут с указанием адреса картинки. Например:</p> <p><BODY background =”boss3.gif” >.</p> <p><i><b>Фреймы </b> </i></p> <p><i><u>Размещение нескольких документов на одной Web-странице. </u> </i>Язык HTML позволяет разбить окно программы броузера на несколько частей и в каждой из них отобразить отдельный документ. Такие области называются <i>фреймами. </i><b> <br></b>Чем отличается структура документа HTML , содержащего фреймы, от обычного документа HTML ? Такой документ не содержит раздела «тела» документа и не содержит какого-либо текста вообще. Вместо этого он содержит описание фреймов и названия документов, загружаемых в отдельные области. <b><br>< </b><b>FRAMESET </b> <b>>… </b><b>FRAMESET </b> <b>> </b>тегописания фреймов.<b><br></b>Между тегами <b>< </b>FRAMESET >…FRAMESET > содержится описание размеров и порядка размещения областей в окне броузера, а также задаются документы, которые должны загружаться в каждую из этих областей.<br>Тег <FRAMESET > должен содержать обязательный атрибут <b>cols </b> или <b>rows, </b>определяющий способ разбиения окна. Значения этих атрибутов определяют высоту (или ширину) областей окна. Их задают через запятую в пикселах или в процентах. В качестве последнего параметра можно использовать символ «звездочка» (*). Под такой фрейм выделяется все свободное пространство.<br>При использовании атрибута cols окно делится на области вертикальными линиями, а при использовании атрибута rows – горизонтальными, например, <br><FRAMESET rows =”45%,30%,25%”>, <FRAMESET cols =”40%,30%,30%”><br>Если заданы оба этих атрибута, в окне создается сетка из подобластей, например,<br><i> </i><frameset rows =30%,30%,30%><br> <frame src =name .htm ><br> <frame src =sun .htm ><br><frameset cols =50%,*><br> <frame src =cat 1.htm ><br> <frame src =cat 2.htm ><br>frameset ><br>В результате экран делится на четыре подобласти: две горизонтальных и две вертикальных. Причем, именно третье значение атрибута <i>rows </i>позволяет отвести на экране место под вертикальную подобласть.</p> <p><b>< </b><b>FRAM </b> <b>E> - </b>одиночныйтег, вложенный в тег <FRAMESET >, должен содержать обязательный атрибут <b>src </b> <b>, </b>определяющий документ, который будет загружен в отдельную область, например, <FRAME src =”doc 3.htm ”><br><i>Пример.<br></i> <html ><br> <head ><br> <meta http -eguiv ="Content -Type " content ="text /html ;charset =windows -1251"> <meta name ="Author " content ="Ivanov Ivan "><br> <meta name ="Keywords " content ="Животные, собаки, клубы"><br>head ><br><title >Страница с навигационной панельюtitle ><br> <frameset cols =25%,*><br> <frame src =19_1.htm ><br> <frame src =19_2.htm ><br>frameset ><br>html ><br>А </p> <p><img src='https://i0.wp.com/ds03.infourok.ru/uploads/ex/08a8/00002fb7-1e40425c/hello_html_m27ce16d6.jpg' align="bottom" width="100%" loading=lazy></p> <p><i><u>Качество документов HTML. </u> </i></p> <p>Творческий характер создания документов HTML сродни програм­мированию, так что при этом возможны ошибки, которые могут привести к трудностям или даже полной невозможности прочитать созданный документ в Интернете. Кроме того, огромное разно­образие компьютеров, подключенных к Интернету, приводит к тому, что заранее невозможно предсказать, как именно будет выглядеть документ на экране конкретного пользователя.</p> <p>Web-страницы предназначаются для широкой аудитории, так что при подготовке документов HTML следует иметь в виду эти осо­бенности. Чтобы создать хороший документ HTML, следует при­держиваться ряда достаточно простых правил.</p> <p>3. Для того чтобы документ HTML был доступен самой широкой аудитории, следует «отставать на один шаг» от последних дости­жений в развитии языка HTML. Последние нововведения не всегда сразу реализуются в браузерах, а новым версиям требу­ется время на то, чтобы достичь большинства пользователей. Документы с использованием самых свежих новшеств доступны лишь ограниченной аудитории.</p> <p>4. Ошибка, которую часто делают новички, состоит в злоупотреб­лении элементами оформления, особенно разнообразными цветами и шрифтами. Такая страница в лучшем случае будет выглядеть кричащей. В худшем случае, текст вообще нельзя будет прочесть на компьютерах с нестандартной цветовой схе­мой или при отсутствии необходимых шрифтов.</p> <p>5. Не следует злоупотреблять графическими изображениями и мультимедийными файлами. При изобилии таких объектов загрузка страницы может затянуться и читатель может утратить к ней интерес еще до того, как получит возможность что-то прочесть.</p> <p>6. Так как создание документов HTML сродни программированию, процесс поиска и исправления ошибок, известный в программирование как отладка, необходим и при создании Web-страницы. Большинство, если не все сделанные ошибки можно обнару­жить еще до того, как страница станет доступна посторонним читателям. В число ошибок, которые надо исправлять, входят также грамматические ошибки и опечатки.</p> <p>7. Фреймы - очень мощное, но и очень опасное средство оформления Web-страниц. С помощью фреймов создано гораз­до больше неудачных Web-страниц, чем удачных. Единственный критерий грамотности применения фреймов - удобство поль­зователя. Если благодаря фреймам страница становится во много раз красивее, но чуть-чуть менее удобной, от фреймов надо отказываться не задумываясь. Ничего, кроме раздражения, у читателей она не вызовет.</p> <p>8. Люди ценят заботу и внимание. Размещение самой важной информации в верхней части страницы позволяет им с пользой проводить время, в течение которого происходит загрузка доку­мента Сопровождение иллюстраций альтернативным текстом не стоит больших трудов, но высоко ценится. Наличие большо­го количества полезных гиперссылок на странице не только помогает людям плодотворно путешествовать по просторам Интернета, но и побуждает их раз за разом возвращаться на страницу, предоставившую им такую возможность.</p> <p><b>Практическая работа № 6<br>«Размещение нескольких документов на одной Web-странице» </b> </p> <p><b>Цель: </b> научиться создавать фреймы в текстовом редакторе Блокнот.<br><b>Указания к выполнению: </b></p> <ul><p>Откройте текстовый редактор Блокнот.</p><p>Создайте новую Web-страницу, которая в браузере должна выглядеть следующим образом:</p> </ul><p><img src='https://i1.wp.com/ds03.infourok.ru/uploads/ex/08a8/00002fb7-1e40425c/hello_html_25dae440.png' align="bottom" width="100%" loading=lazy></p> <ul><p>В элементе укажите название странички «П/р №6».</p><p>Просмотрите созданную Web-страницу в окне браузера.</p><p><br>Внесите в него следующие изменения: в атрибуте <i>rows </i>измените два первых значения, <i> </i>уберите третье значение.</p><p>Сохраните изменения.</p><p>Просмотрите результат в браузере. Что изменилось?</p><p>Отмените изменения, вернитесь к исходному состоянию Web-страницы.</p><p>Просмотрите Web-страницу в окне браузера.</p> </ul><h6>Тема 3. Графика на Web -странице</h6> <p><i><b>Элементы теории компьютерной графики </b> </i></p> <p><i><u>Цветовая модель. </u> </i></p> <p>Изображение может быть чёрно-белым, полутоновым (оттенки одного цвета) и цветным. Однако, цветное изображение в зависимости от его назначения может быть в разной цветовой палитре. Палитра RGB используется в мониторах компьютеров, т.е. для изображений которые будут просматриваться на мониторе. Палитра CMYK используется при создании изображений, предназначенных для вывода на печать.</p> <p>Наиболее распространённая цветовая модель называется RGB Red – красный, Green – зелёный, Blue – синий) по названиям трёх базовых цветов, используемых в ней для образования всех прочих. Цветовую модель RGB обычно иллюстрируют картинкой в виде трёх пересекающихся кружков. В центре пересечения эти три цвета в сумме дают белый цвет. Попарное пересечение смежных кружков даёт дополнительные цвета: жёлтый, голубой, пурпурный.</p> <p>В модели RGB присутствует три канала – красный, зелёный и синий, то есть RGB – трёхканальная цветовая модель.</p> <p>Каждый из трёх цветовых компонентов RGB может принимать одно из 256 значений – от максимальной интенсивности(255,2555,255 - белый) до нулевой интенсивности (0,0,0 – чёрный), т.е. абсолютно любой цвет и оттенок цвета можно получить сочетанием красного, зелёного и синего цветов в различных пропорциях</p> <p>Для того чтобы создать гармоничную цветовую композицию, необходимо знать характеристики цвета. Таких характеристик естественно много, мы рассмотрим лишь основные.</p> <p><i><u>Характеристики цвета </u> </i></p> <p>Одна из цветовых схем характеризует естественные свойства любого оттенка, - это схема HSV (тон, насыщенность, яркость)</p> <p>Hue тон – одна из точек цветового круга, максимально яркая и насыщенная.</p> <p>Saturation насыщенность – соотношение основного цвета и такого же по яркости серого.</p> <p>Value яркость – общая яркость цвета (крайние позиции – чёрный и максимально яркий тоновый)</p> <p><b>Практическая работа № 6 </b> </p> <p><b>«Работа с цветовой моделью RGB» </b> </p> <p><i><b>Задание 1. Определение цвета в формате </b> </i><i><b>RGB </b> </i> </p> <p><b>Цель </b>: научиться определять цвет в формате RGB .</p> <p><b>Указания к выполнению: </b></p> <ul><p>Запустите графический редактор Paint (Пуск – Программы – Стандартные)</p><p>Определите, какой цвет записан в модели RGB и заполните таблицу:</p> </ul><p>Для этого выполните команду Палитра – Изменить палитру. В диалоговом окне Изменение палитры щёлкните на кнопке Определить цвет, введите числовые значения для цветов в текстовые поля внизу от цветового поля. Допустимый диапазон для каждого блока от 0 до 255, при этом 0 соответствует самому тёмному, а 255- самому светлому.</p> <p><i><b>Задание 2. Смешение цветов разной интенсивности в графическом редакторе </b> </i> Paint </p> <p><b>Цель </b>: научиться работать с цветом разной интенсивности в простейшем графическом редакторе.</p> <p><b>Указания к выполнению: </b></p> <ul><p>Определите, какой цвет будет получен в результате смешения двух цветов максимальной интенсивности (255):</p> </ul><ul><p>красного и зеленого;</p><p>зеленого и синего;</p><p>красного и синего.</p> </ul><ul><p>Определите, какой цвет будет получен в результате смешения двух цветов половинной интенсивности (127):</p> </ul><ul><p>красного и зеленого;</p><p>зеленого и синего;</p><p>красного и синего.</p> </ul><p>зеленый и синий</p> <p>красный и синий</p> <p>максимальная интенсивность</p> <p>половинная интенсивность</p> <p><i><b>Задание 3. Рисование заданным цветом в графическом редакторе </b> </i><i><b>Paint </b> </i> <i><b>. </b> </i></p> <p><b>Цель </b>: научиться определять цвет.</p> <p><b>Указания к применению: </b></p> <ul><p>В новом файле нарисуйте следующие геометрические фигуры, заданного цвета:</p> </ul><ul><p>Квадрат (205, 44, 100);</p><p>Прямоугольник (0, 230, 69);</p><p>Круг (30, 30, 30);</p><p>Овал (200, 100, 20);</p><p>Треугольник (10, 10, 10);</p><p>Трапеция (50, 50, 250).</p> </ul><p><i><u>Цветовые схемы </u> </i></p> <p>Зная особенности восприятия каждого цвета и цветовых сочетаний, можно построить целый ряд готовых схем. Каждая из этих схем, будучи воплощённой в жизнь, звучит по своему, вносит определённое настроение в композицию.</p> <p>Если мы хотим добиться гармоничного сочетания цветов, то можно взять несколько близлежащих, расположенных один за другим на цветовом круге. Например жёлтый и желто-зеленый.</p> <p>Для создания контраста выбирают цвета противоположные, расположенные напротив друг друга. Такие цвета называются дополняющими. Применённые рядом, они делают друг друга ярче и живее. Пары жёлтый – фиолетовый, пурпурный – зелёный – примеры дополняющих цветов.</p> <p>Кроме использования цветов, расположенных рядом друг с другом, можно попробовать использовать одни и те же цвета, но разной степени насыщенности.</p> <p>Однако самый надёжный и неисчерпаемый источник цветовых схем – природа. Человек является её частью, и ничто так не радует его глаз, как гармония естественной нежности и красоты.</p> <p>Престижные цвета: золото, серебро, тёмно-серый, чёрный. Их задача – передать солидность, уверенность, стабильность, и высокую стоимость.</p> <p>Пастельные цвета: нежные, бежевые, розовые, голубоватые – женственные, мягкие, расслабляющие.</p> <p>«Здоровые» цвета: из американской психологии – чистота, здоровье, уверенность, семья (жёлто-зелёная гамма с добавлением чёрного цвета).</p> <p>Природные цвета: близкие к естественным органическим, природным компонентам.</p> <p>«Растяжки» как вариант использования цвета – это обычно тональные оттенки одного цвета и как акцент – более активный цвет</p> <p>Лучше придерживаться проверенного временем рецепта: пользоваться минимумом цветов, но сами цвета при этом подбирать по возможности контрастные. Основное требование к паре цветов для фона и текста – достаточный контраст между ними, необходимыми для комфортного чтения.</p> <p><i><u>Безопасная палитра. </u> </i></p> <p>Нельзя забывать, что создатель Web -страницы не имеет ни малейшего понятия о том, на какой модели компьютера, и под управлением каких программ будет просматриваться его произведение. Он не уверен, не превратится ли его «зелёная ёлка» в красную или оранжевую на экранах пользователей.</p> <p>Поэтому все популярные программы для просмотра Web -страниц (броузеры) заранее настроены на некоторую одну фиксированную палитру. В этой палитре не 256 цветов, а лишь 216. Это связано с тем, что не все компьютеры могут воспроизводить 256 цветов.</p> <p>Такая фиксированная палитра, жёстко определяющая индексы для кодирования 216 цветов, называется безопасной палитрой.</p> <p><i><u>Растровая графика </u> </i></p> <p>Основой растрового представления графики является пиксел (точка) с указанием её цвета. При описании, например, красного эллипса на белом фоне приходится указывать цвет каждой точки, как эллипса, так и фона. Изображение представляется в виде большого количества точек – чем их больше, тем визуально качественнее изображение и больше размер файла.</p> <p>Растровое представление обычно используют для изображения фотографического типа с большим количеством деталей или оттенков. Масштабирование таких картинок в любую сторону обычно ухудшает качество.</p> <p><i><u>Векторная графика </u> </i></p> <p>Векторное представление заключается в описании элементов изображения математическими кривыми с указанием их цветов и заполненности. Красный эллипс на белом фоне будет описан всего двумя математическими формулами – прямоугольника и эллипса соответствующих цветов, размеров и местоположения. Очевидно, что такое описание займёт значительно меньше места, чем в случае с растровой графикой. Ещё одно преимущество – качественное масштабирование в любую сторону.</p> <p>Выбор растрового или векторного формата зависит от целей и задач работы с изображением. Если нужна фотографическая точность цветопередачи, то предпочтительнее растр. Логотипы, схемы, элементы оформления удобнее представить в векторном формате.</p> <p><i><u>Форматы графических файлов для Интернета </u> </i></p> <p>GIF и JPEG – это два наиболее популярных графических формата, которые фактически стали стандартами для использования на WWW .</p> <p>Фотографии лучше всего сохранять в формате JPEG , а иллюстрации в формате GIF </p> <p><i><u>Оптимизация графики. </u> </i></p> <p>Для Web -страниц очень важным является вопрос размера фотографии.</p> <p>Самый первый этап оптимизации – выделение в фотографии главного с отбрасыванием всего остального и акцентирование на иллюстрируемом элементе. Это достигается при помощи операции кадрирования и нахождения наиболее выразительной части, передающей смысл фотографии. После этой операции уже можно оптимизировать изображение для достижения наименьшего размера. Но с размерами фотографий нужно придерживаться определенного компромисса – не делать их слишком мелкими. И не делать их слишком огромными. Обычно фотография имеет размер 250 х 300 пикселов и занимает порядка 6-10 Кбайт. Это не значит, что все фотографии должны иметь такие же размеры, но площадь фотографии должна быть ей эквивалентна. Так, например, файл размером 45,93 Кбайта при скорости загрузки 28,8 Кбита в секунду будет загружаться в браузер 17 секунд.</p> <h4>Практическая работа № 8</h4> <p><b>«Размещение графики на Web-странице» </b> </p> <p><i><b>Задание 1. Оформление цветом </b> </i><i><b>Web </b> </i> <i><b>-страницы. </b> </i></p> <p><b>Цель: </b> научиться создавать цветной фон Web -страницы, использовать шрифт различного цвета и размещать горизонтальные линии на страницы.</p> <p><b>Указания к выполнению: </b></p> <ul><p>Создайте новую Web -страницу в редакторе Блокнот.</p><p>В элементе <title > укажите название странички «П/р № 8. Задание 1».</p><p>В начальном элементе <body > используйте соответствующий атрибут, чтобы сделать цвет фона странички черным.</p><p>Сделайте надпись белым цветом «Спокойной ночи». Выровняйте ее по середине страницы. Размер шрифта 12.</p><p>Вставьте горизонтальную линию красного цвета.</p><p>Сделайте надпись желтого цвета «Приятных сновидений». Выровняйте ее по середине страницы. Размер шрифта 8.</p><p>Вставьте горизонтальную линию синего цвета толщиной 10 пикселов, длиной 50% от ширины экрана, и выровняйте ее по центру.</p> </ul><p><i><b>Задание 2. Размещение графики на Web-странице. </b> </i></p> <p><b>Цель </b>: научиться размещать графические изображения на Web -странице.</p> <p><b>Указания к выполнению: </b></p> <ul><p>Создайте новую Web -страницу в редакторе Блокнот.</p><p>В элементе <title > укажите название странички «П/р № 8. Задание 2».</p><p>Если в тэге <body > не указывать цвет странички, то по умолчанию фон будет белым.</p><p>Разместите на страничке рисунок футбольного меча. Файл с именем soccer .gif находится в папке, указанной учителем. Для размещения изображения вам потребуется указать путь к файлу в элементе <img src='/yazyk-ispolzuemyi-dlya-sozdaniya-veb-stranic-yazyki-programmirovaniya-i.html' loading=lazy>. Чтобы упростить описание пути к этому графическому файлу, скопируйте этот файл в ту же папку, в которой будет сохранена Web -страничка. Тогда элемент будет выглядеть следующим образом:</p> </ul><p>Если файл не находится в одной папке с Web -страничкой, то необходимо указать относительный путь к этому файлу.</p> <ul><p>Сделайте подпись к рисунку «Футбольный мяч» с помощью атрибута alt (title ).</p><p>Создайте рамку вокруг рисунка шириной 2 пиксела.</p><p>Над рисунком поместите заголовок «Мир футбола» самого большого размера и выровняйте его по центру страницы.</p> </ul><p><b>Тема 4. Теги HTML. Таблицы </b></p> <p><i><b>C </b> </i> <i><b>оздание и форматирование таблиц<br></b> </i><i><u>Задание строки и ячейки таблицы. </u> </i>Таблица – это один из наиболее удобных способов представления больших объемов данных. Язык HTML имеет богатейшие возможности по созданию разных видов таблиц.<br>При создании таблиц используется принцип вложения: внутри основного элемента таблицы</p>TR > - тег, задающий строку таблицы. Конечный тег можно не использовать, так как строка заканчивается там, где начинается следующая строка. <br>…TD > - тег, задающий ячейку таблицы. Конечный тег также можно не использовать.<br>Внутри ячеек могут содержаться любые данные и любые теги HTML, допустимые в теле документа. Например, ячейка таблицы может содержать вложенную таблицу или рисунок. Броузеры автоматически вычисляют размеры ячеек и всей таблицы, хотя эти свойства частично можно задать и при помощи атрибутов.<br><i>Пример (таблица, состоящая из двух строк и столбцов).<br></i><TABLE ><br>ГосударствоСтолица<br>РоссияМосква<br>ФранцияПариж<br>TABLE ><br>Вот как это выглядит на экране: <p>Номер телефона</p> <p>Петрова А.И.</p> <p>Смирнов В.П.</p> <p><i><u>Задание ширины рамки таблицы. </u> </i> С помощью атрибута <b>border </b>можно задаватьширину рамки таблицы в пикселях, например: <br><TABLE bor der=”2”><br>Можно сделать грани таблицы невидимыми, для этого ширину рамки таблицы нужно задать равной 0, например, <TABLE width =”300” bgcolor =”#00cc 99” bor der=”0”></p> <p><i><u>Задание ширины и высоты таблицы </u> </i><i>. </i>Ширину и высоту таблицы можно задавать точно в пикселях или в процентном отношении к ширине страницы в окне броузера. Существуют стандартные атрибуты:<br><b>width </b> – ширина;<br><b>height </b> – высота.<br>Например, если нам нужно задать таблицу определенного размера, например, шириной в 500 пикселей, то мы укажем:<br><TABLE width =”500” bor der=”1”><br>Если мы хотим получить таблицу на всю ширину экрана, не заботясь при этом, какое разрешение монитора у того, кто будет просматривать нашу Web-страницу, то мы зададим ширину страницы, как 100%.<br><TABLE width =”100%”bor der=”1 ”><br>Вот как это выглядит на экране:</p> <p>Номер телефона</p> <p>Петрова А.И.</p> <p>Смирнов В.П.</p> <p>Если нам при этом необходима большая высота строк, например, 300 пикселей, то мы укажем еще один атрибут:<br><TABLE width=”100%” height=”300” bor der=”1”><br><i><u>Задание цвета фона и цвета ячеек таблицы </u> </i><i>. </i>Для всей таблицы может быть задан цвет фона, для этого существует атрибут <b>bgcolor </b>. Значением этого атрибута может быть либо английское слово, например, red, либо шестнадцатеричный код, например, #FF0000.<br>Например, если в созданной нами самой первой таблице нужно задать серебристый фон, то мы укажем: <TABLE bgcolor=#c0c0c0></p> <p>Вот как это выглядит на экране:</p> <p>Номер телефона</p> <p>Петрова А.И.</p> <p>Смирнов В.П.</p> <p>Можно задавать отдельно цвет ячеек таблицы. В этом случае атрибут bgcolor помещается внутри элемента</p><p>Например, <br><TABLE width=500 border =1><br>ГосударствоСтолица<br>Gold>РоссияYellow>Москва<br>Maroon>ФранцияOrange>Париж<br>TABLE > </p><p>Вот как это выглядит на экране:</p> <p><i><u>Выравнивание данных в ячейках таблицы.<br></u> </i>C уществует набор атрибутов, предназначенных для выравнивания данных в ячейках таблицы. Атрибут <b>align </b> позволяет выравнивать данные в ячейках по горизонтали. Он принимает следующие значения:<br>Left – выравнивание влево;<i><u><br></u> </i>Right – выравнивание вправо;<br>Center - выравнивание по центру.<br>Атрибут <b>valign </b> позволяет выравнивать текст по вертикали. Значения могут быть следующие:<br>Top – выравнивание по верхнему краю ячейки;<br>Middle – выравнивание по центру;<br>Baseline – выравнивание по первой строке<br><i>Пример.<br></i><TABLE width =100% border =1 align =center ><br> <TR ><br> <TD ><B >Выравнивание по горизонталиB >TD ><br></p><p>По центру <br>left> По левому краю <br> По правому краю <br> <TR ><br> <TD ><B >Выравнивание по вертикалиB >TD ><br>valign=top > По верхнему краю TD ><br> <TD valign =middle > По центру TD ><br> <TD valign =baseline > По нижнему краю TD ><br>TR ><br>TABLE ><br>В результате мы получим следующую таблицу: <b>Выравнивание по горизонтали </b> </p><p>По центру</p> <p>По левому краю</p> <p>По правому краю</p> <p><b>Выравнивание по <br>вертикали </b></p> <p>По верхнему краю</p> <p>По центру</p> <p>По нижнему краю</p> <p><b><br>< </b><b>table </b> <b>width </b> <b>=500 </b><b>border </b> <b>=3> </b></p> <p> <b>Успеваемость </b> </p> <b>N <b>п </b><b>/ </b> <b>п </b> </b><b><b>Фамилия </b> </b><b><b>Школа </b> </b><b><b>Класс </b> </b><p><b> <span><b>Практическая работа № 9<br>«Создание и форматирование таблицы» </b> </span> </b></p><p><b><b>Цель: </b> научиться создавать и форматировать простые таблицы в текстовом редакторе Блокнот.<br><b>Указания к выполнению: </b> </b></p><p><b>Создайте новую Web-страницу, которая в броузере должна выглядеть следующим образом: </b></p><b>Фамилия </b><p><b>Номер телефона </b></p><p><b>Петрова А.И. </b></p><p><b>31-74-16 </b></p><p><b>Смирнов В.П. </b></p><p><b>46-29-89 </b></p><p><b> Цвет фона таблицы - серебристый, ширина рамки таблицы – 1. </b></p><p><b>В элементе укажите название странички «П/р №14». </b></p><p><b>Просмотрите созданную Web-страницу в окне броузера. </b></p><p><b>Вернитесь к сохраненному в Блокноте файлу.<br>Внесите в него изменения так, чтобы Web-страница в броузере выглядела следующим образом: </b></p><p><b> Телефонный справочник </b></p> <b> Фамилия </b><p><b> Номер телефона </b></p><p><b>Петрова А.И. </b></p><p><b>31-74-16 </b></p><p><b>Смирнов В.П. </b></p><p><b>46-29-89 </b></p> <p>Цвет фона ячеек первой строки – светло-зеленый, цвет фона ячеек остальных строк – серебристый, ширина рамки таблицы – 5. </p><p><b>Просмотрите Web-страницу в окне броузера. </b></p><p><b>Сохраните изменения. </b></p><p><b><i><u><b>Объединение строк или столбцов в ячейке </b> </u> </i><i>. </i> </b></p><p><b>При построении сложных таблиц бывает необходимо объединить (слить) в одной ячейке несколько строк или столбцов. Для этого существуют атрибуты: <b>colspan - у </b>казывает количество столбцов, объединенных в одной ячейке (по умолчанию=1), <b>rowspan - у </b>казывает количество строк, объединенных в одной ячейке (по умолчанию=1). <i>Примеры: </i> </b></p><b>1 </b><p> <b>1 </b></p><p>Все отличие такого построения таблиц заключается в появлении параметра <b>rowspan="2", </b>цифра в которой, соответствует количеству "подстрок", т.е. буквально то, сколько строк слилось в ячейке. Если в симметричной таблице мы читаем слева-направо, то тут происходит то же самое, только почему же в коде впереди ячейки с двойкой стоит ячейка с цифрой три? Все очень просто - <i>буквально </i> код для первой строки расшифровывается как "ячейка, содержащая данное 1", "ячейка, содержащая данное 3, состоящая из ДВУХ подстрок", код для второй строки расшифровывается как "ячейка, содержащая данное 2". <u>Как видим, физически ячейка 3 принадлежит к ПЕРВОЙ строке! </u></p> <p>Если же у нас существуют ячейки, совмещенные по горизонтали, то вместо тега <b>rowspan </b> используется тег <b>colspan </b>, естетсвенно, в той ячейке, которая занимает площадь нескольких столбцов). <i>Например: </i><i> </i> </p> <table width="684" border="0"><tr valign="top"><td width="80"> </td> <td width="79"> </td> </tr></table><table width="200" border="1"><tr align="center"><td colspan="2">1 </td> </tr><tr align="center"><td>2 </td><td>3 </td> </tr></table><p><b>Практическая работа № 10<br>«Объединение строк или столбцов в ячейках таблицы» </b> </p> <p><b>Цель: </b> <span> научиться создавать сложные таблицы в текстовом редакторе Блокнот.<br></span><span><b>Указания к выполнению: </b> </p> <ul><p>Откройте текстовый редактор Блокнот. </p><p>Создайте новую Web-страницу, которая в браузере должна выглядеть следующим образом: </p> </ul><p>Успеваемость </p> п/п <p>Фамилия </p> <p>Школа </p> <p>Класс </p> <p>Оценки по химии </p> <p>1 п/г </p> <p>2 п/г </p> <p><b>Иванов </b> </p> <p><b>Петров </b> </p> <p><b>Сидоров </b> </p> <p>Цвет фона первой строки таблицы - аквамарин, ширина таблицы – 500, ширина рамки таблицы – 3. </p> <ul><p>В элементе укажите название странички «П/р №10». </p><p>Просмотрите созданную Web-страницу в окне браузера. </p><p>Вернитесь к сохраненному в Блокноте файлу.<br></span><br></p> </ul><p><i><u>Разметка Web-страницы при помощи таблицы. </u> </i> Разметку Web-страницы удобно производить с использованием таблицы. Возможны различные варианты разметки. Рассмотрим некоторые из них. <br><b>Первый вариант. </b> Разметка страницы производится с использованием страницы шириной на весь экран, независимо от того, каково разрешение экрана (width =”1000%”). В данном случае удобно создать таблицу, состоящую из двух строк и двух столбцов. Верхняя строка будет отведена под заголовок странички, левый столбец будет отведен под меню Web-сайта. При такой разметке страничка всегда будет занимать весь экран, не зависимо от того, какое разрешение экрана стоит у посетителя (рис. 4.12).</p> <p><img src='https://i1.wp.com/ds03.infourok.ru/uploads/ex/08a8/00002fb7-1e40425c/hello_html_m775cb074.png' align="bottom" width="100%" loading=lazy></p> <p><b>Рис. 4.12. </b> </span><span>Пример разметки </span><span>Web </span><span>-страницы. Первый вариант </p> <p>К недостаткам такой разметки можно отнести "плавучесть" содержимого страницы, т. е. при уменьшении разрешения экрана содержимое должно поместиться в более узкие рамки, следовательно текст "сползает" вниз. Чтобы этого не происходило, нужно выбрать фиксированный размер таб­лицы, тогда при любом разрешении экрана таблица будет выглядеть неиз­менной.</p> <p><b>Второй вариант. </b> Разметка страницы производится с использованием таблицы шириной 760 пикселов, выровненной по центру экрана. При этом посетитель, у которого разрешение экрана равно 800x600 пикселов, будет видеть страничку шириной практически во весь экран, а посети­тель, у которого разрешение монитора равно 1024x768 и выше, будет ви­деть таблицу шириной 760 пикселов по центру экрана и белые поля по бокам от нее.</p> <p>В данном случае удобно создать таблицу, состоящую из трех строк и одного столбца. Верхняя строка будет отведена под заголовок странички, вторая строка будет отведена под меню Web-сайта, а третья строка непосредственно под содержание сайта (рис. 4.13).</p> <p><img src='https://i2.wp.com/ds03.infourok.ru/uploads/ex/08a8/00002fb7-1e40425c/hello_html_20004b1a.png' align="bottom" width="100%" loading=lazy></p> <p><b>Рис. 4.13. </b> </span><span>Пример разметки </span><span>Web </span><span>-страницы. Второй вариант </p> <p>Если необходимо разместить внутри текста странички какие-либо иллюстра­ции, фотографии и пр., то в этом случае также используются таблицы. В приведенном ниже примере во вторую ячейку второй строки вставлена таб­лица, состоящая из двух строк и трех столбцов. В первую и в третью ячейки первой строки вставлены рисунки, а во вторую ячейку первой строки -название страницы. Во все ячейки второй строки введен текст (рис. 4.14).</p> <p><b>Рис. 4.14. </b> </span><span>Пример разметки </span><span>Web </span><span>-страницы. Третий вариант </p> <br clear="left"><br><img src='https://i0.wp.com/ds03.infourok.ru/uploads/ex/08a8/00002fb7-1e40425c/hello_html_m32b43cfb.png' align="bottom" width="100%" loading=lazy><h6>Тема 5 . Итоговая работа «Создание Web-сайта на заданную тему в ТР «Блокнот»</h6> <p>Учащиеся дома разрабатывают и оформляют на бумаге в виде творческой работы проект Web-сайта, а затем на уроке реализовывают его средствами языка HTML .</p> <p>_____________________________________________________________________________</p> <p>Курс разработан на основе книги И. Смирновой "Начала Web-дизайна".</p> <p>Перед тем, как мы начнём наше путешествие по урокам создания сайтов на HTML и CSS, важно понимать различия между двумя языками, синтаксис каждого языка и некоторую основную терминологию.</p><h2>Что такое HTML и CSS?</h2><p>HTML (HyperText Markup Language, язык разметки гипертекста) задаёт структуру содержимого и его смысл, определяя такой контент как, к примеру, заголовки, абзацы или изображения. CSS (Cascading Style Sheets) или каскадные таблицы стилей - это язык презентаций созданный для оформления внешнего вида контента, использующий, например, шрифты или цвета.</p><p>Эти два языка - HTML и CSS независимы друг от друга и должны таковыми и оставаться. CSS не должен быть написан внутри HTML-документа и наоборот. Как правило, HTML всегда будет представлять содержимое, а CSS всегда будет определять его оформление.</p><p>При таком понимании разницы между HTML и CSS давайте погрузимся в HTML более подробно.</p><h2>Основные термины HTML</h2><p>Перед началом работы с HTML вы, вероятно, столкнётесь с новыми и часто странными терминами. Со временем вы ознакомитесь со всеми ними подробнее, но сейчас вы должны начать с трёх основных терминов HTML - элементы, теги и атрибуты.</p><h3>Элементы</h3><p>Элементы указывают, как определять структуру и содержимое объектов на странице. Некоторые из часто используемых элементов включают в себя несколько уровней заголовков (определены как элементы с <h1> до <h6> ) и абзацев (определены как <p> ); в список можно включить элементы <a> , <div> , , <span><strong> и <em> и многие другие.</p><p>Элементы идентифицируются с помощью угловых скобок <>, окружающих имя элемента. Таким образом, элемент будет выглядеть так:</p><h3>Теги</h3><p>Добавление угловые скобок < и > вокруг элемента создаёт то, что известно как тег. Теги наиболее часто встречаются в парах открывающих и закрывающих тегов.</p><p>Открывающий тег отмечает начало элемента. Он состоит из символа <, затем идёт имя элемента и завершается символом >; например, <div> .</p><p>Закрывающий тег отмечает конец элемента. Он состоит из символа < с последующей косой чертой и именем элемента и завершается символом >; например, </div> .</p><p>Содержимое, которое находится между открывающим и закрывающим тегами, является содержимым этого элемента. Ссылка, к примеру, будет иметь открывающий тег <a> и закрывающий тег </a> . Что находится между этими двумя тегами будет содержимым ссылки.</p><p>Так, теги ссылок будут выглядеть примерно так:</p><p> <a>...</a> </p><h3>Атрибуты</h3><p>Атрибуты являются свойствами, применяемыми для предоставления дополнительной информации об элементе. Наиболее распространённые атрибуты включают в себя атрибут id , который идентифицирует элемент; атрибут class , который классифицирует элемент; атрибут src , который определяет источник встраиваемого содержимого; и атрибут href , который указывает ссылку на связанный ресурс.</p><p>Атрибуты определяются в открывающем теге после имени элемента. В общем, атрибуты включают в себя имя и значение. Формат для этих атрибутов состоит из имени атрибута со знаком равенства за ним, а затем в кавычках идёт значение атрибута. Например, элемент <a> с атрибутом href будет выглядеть следующим образом:</p><p> Shay Howe </p><h3>Демонстрация основных терминов HTML</h3><p>Данный код будет отображать текст «Shay Howe» на веб-странице и при щелчке на этот текст ведёт пользователя на http://shayhowe.com. Элемент ссылки объявлен с помощью открывающего тега <a> и закрывающего тега </a> охватывающих текст, а также атрибута и значения адреса ссылки объявленной через href="http://shayhowe.com" в открывающем теге.</p><p>Рис. 1.01. Синтаксис HTML в виде схемы включает элемент, атрибут и тег</p><p>Теперь, когда вы знаете что такое элементы HTML, теги и атрибуты, давайте взглянем воедино на нашу первую веб-страницу. Если что-то выглядит здесь новым, не беспокойтесь - мы расшифруем всё по ходу.</p><h2>Настройка структуры документа HTML</h2><p>HTML-документы представляют собой простые текстовые документы, сохранённые с расширением.html, а не.txt. Чтобы начать писать HTML вначале нужен текстовый редактор, который вам удобен в использовании. К сожалению, сюда не входит Microsoft Word или Pages, поскольку это сложные редакторы. Двумя наиболее популярными текстовыми редакторами для написания HTML и CSS являются Dreamweaver и Sublime Text. Бесплатные альтернативы также Notepad++ для Windows и TextWrangler для Mac.</p><p>Все HTML-документы содержат обязательную структуру, которая включает следующие декларации и элементы: <!DOCTYPE html> , <html> , <head> и <body> .</p><p>Объявление типа документа или <!DOCTYPE html> находится в самом начале HTML-документа и сообщает браузерам, какая версия HTML применяется. Поскольку мы будем использовать последнюю версию HTML, наш тип документа будет просто <!DOCTYPE html> . После этого идёт элемент <html> означающий начало документа.</p><p>Внутри <html> элемент <head> определяет верхнюю часть документа, включая разные метаданные (сопроводительная информация о странице). Содержимое внутри элемента <head> не отображается на самой веб-странице. Вместо этого он может включать название документа (который отображается в строке заголовка окна браузера), ссылки на любые внешние файлы или любые другие полезные метаданные.</p><p>Всё видимое содержимое веб-страницы будет находиться в элементе <body> . Структура типичного HTML-документа выглядит следующим образом:</p><p> <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Привет, мир!

      Привет, мир!

      Это веб-страница.

      Демонстрация структуры HTML-документа

      Этот код показывает документ, начиная с объявления типа документа, , затем сразу идёт элемент . Внутри идут элементы и . Элемент содержит кодировку страницы через тег и название документа через элемент . Элемент <body> включает в себя заголовок через элемент <h1> и абзац текста через <р> . Поскольку и заголовок и абзац вложены в элемент <body> , они видны на веб-странице.</p><p>Когда элемент находится внутри другого элемента, известный также как вложенный, хорошей идеей будет добавить к нему отступ, чтобы сохранить структуру документа хорошо организованной и читабельной. В предыдущем коде оба элемента <head> и <body> вложены и сдвинуты внутри элемента <html> . Структура отступов для элементов продолжается с новыми добавленными элементами внутри <head> и <body> .</p><h3>Самозакрывающиеся элементы</h3><p>В предыдущем примере элемент <meta> был единственным тегом, который не включал закрывающий тег. Не переживайте, это было сделано намеренно. Не все элементы состоят из открывающих и закрывающих тегов. Некоторые элементы просто получают содержимое или поведение через атрибуты в пределах одного тега. <meta> является одним из таких элементов. Содержимое элемента <meta> в примере присваивается с помощью атрибута charset и значения. К другим типичным самозакрывающимся элементам относятся:</p><ul><li><br> </li><li><embed> </li><li><hr> </li><li><img> </li><li><input> </li><li><li><meta> </li><li><param> </li><li><source> </li><li><wbr> </li> </ul><p>Приведённая структура, сделанная с помощью объявления типа документа <!DOCTYPE html> и элементов <html> , <head> и <body> , является довольно распространённой. Мы хотим сохранить эту структуру документа удобной, поскольку будем часто её применять при создании новых HTML-документов.</p><h3>Валидация кода</h3><p>Независимо от того, насколько аккуратно мы пишем наш код, ошибки неизбежны. К счастью, при написании HTML и CSS у нас есть валидаторы для проверки нашей работы. W3C предлагает валидаторы HTML и CSS , которые сканируют код на ошибки. Проверка нашего кода не только помогает правильно отображать его во всех браузерах, но и помогает обучению передовому опыту при написании кода.</p><h2>На практике</h2><p>В качестве веб-дизайнеров и фронтенд-разработчиков мы можем позволить себе роскошь посещать ряд замечательных конференций, посвящённых нашему ремеслу. Мы собираемся организовать собственную конференцию Styles Conference и создать для неё сайт на протяжении следующих уроков. Вот так!</p><br><img src='https://i0.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy><p>Давайте переключимся немного, отойдя от HTML и взглянем на CSS. Помните, HTML определяет содержимое и структуру наших веб-страниц, в то время как CSS определяет их визуальный стиль и внешний вид.</p><h2>Основные термины CSS</h2><p>В дополнение к терминам HTML есть и несколько основных терминов CSS, с которыми вам нужно будет ознакомиться. Эти термины включают селекторы, свойства и значения. Как и с терминологией HTML, чем больше вы работаете с CSS, тем больше эти термины становятся вашей второй натурой.</p><h3>Селекторы</h3><p>При добавлении элементов на веб-страницу они могут быть оформлены с помощью CSS. Селектор определяет, на какой именно элемент или элементы в HTML нацелиться и применить к ним стили (такие как цвет, размер и положение). Селекторы могут включать в себя комбинацию различных показателей для выбора уникальных элементов, в зависимости от того, насколько конкретными мы желаем быть. Например, мы хотим выбрать каждый абзац на странице или выбрать только один конкретный абзац.</p><p>Селекторы, как правило, связаны со значением атрибута, вроде значения id или class или именем элемента, вроде <h1> или <р> .</p><p>В CSS селекторы сочетаются с фигурными скобками {}, которые охватывают стили, применяемые к выбранному элементу. Этот селектор нацелен на все элементы <span><p>P { ... } </p><h3>Свойства</h3><p>Как только элемент выбран, свойство определяет стили, которые будут к нему применены. Имена свойств идут после селектора, внутри фигурных скобок {} и непосредственно перед двоеточием. Существует множество свойств, которые мы можем использовать, такие как background , color , font-size , height и width и другие часто добавляемые свойства. В следующем коде мы определяем свойства color и font-size , применяемые ко всем элементам <span><p>P { color: ...; font-size: ...; } </p><h3>Значения</h3><p>Пока мы только выбрали элемент через селектор и определили, какой стиль через свойства мы хотели бы к нему применить. Теперь мы можем задать поведение этого свойства через значение. Значения могут быть определены как текст между двоеточием и точкой с запятой. Ниже мы выбираем все элементы <p >И устанавливаем значение свойства color как orange , а значение свойства font-size как 16 пикселей.</p><p>P { color: orange; font-size: 16px; } </p><p>Для проверки, в CSS наш набор правил начинается с селектора, затем сразу же идут фигурные скобки. В этих фигурных скобках располагаются объявления, состоящие из пар свойств и значений. Каждое объявление начинается со свойства, за которым следует двоеточие, значение свойства и, наконец, точка с запятой.</p><p>Распространённой практикой является сдвиг пары свойств и значений внутри фигурных скобок. Как и с HTML, отступы помогают держать наш код организованным и понятным.</p><p><img src='https://i1.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy></p><p>Рис. 1.03. Структура синтаксиса CSS включает селектор, свойства и значения</p><p>Знание нескольких основных терминов и общего синтаксиса CSS - это отличный старт, но у нас есть еще несколько пунктов для изучения, прежде чем мы прыгнем в глубину. В частности, мы должны внимательнее рассмотреть, как селекторы работают в CSS.</p><h2>Работа с селекторами</h2><p>Селекторы, как уже упоминалось ранее, указывают, какие элементы HTML будут стилизованы. Важно полностью понимать как использовать селекторы и как они действуют. Первым шагом должно стать знакомство с различными типами селекторов. Мы начнём с самых основных селекторов: селекторы типа, классы и идентификаторы.</p><h3>Селекторы типа</h3><p>Селекторы типа нацелены на элементы по их типу. Например, если мы хотим ориентироваться на все элементы <div> мы должны использовать селектор div . Следующий код показывает селектор типа для элементов <div> , а также соответствующий HTML.</p><p>Div { ... } </p><p> <div>...</div> <div>...</div> </p><h3>Классы</h3><p>Классы позволяют выбрать элемент на основе значения атрибута class . Селекторы классов немного более конкретны, чем селекторы типа, так как они выбирают определённую группу элементов, а не все элементы одного типа.</p><p>Классы позволяют применять одинаковые стили сразу к разным элементам, используя то же значение атрибута class для нескольких элементов.</p><p>В CSS классы обозначаются с точкой впереди, за которой следует значение атрибута класса. Ниже селектор класса выбирает все элементы, содержащие значение awesome атрибута class , включая элементы <div> и <span><p>Awesome { ... } </p><p> <div class="awesome">...</div> </p><h3>Идентификаторы</h3><p>Идентификаторы ещё точнее, чем классы, так как они нацелены только на один уникальный элемент за раз. Подобно тому, как селекторы классов используют значение атрибута class , идентификаторы используют значение атрибута id в качестве селектора.</p><p>Независимо от типа отображаемого элемента, значение атрибута id может быть использовано только один раз на странице. Если id присутствуют, то они должны быть зарезервированы для важных элементов.</p><p>В CSS идентификаторы обозначаются с символом решётки впереди, после чего идёт значение атрибута id . Здесь идентификатор выберет только элемент, содержащий атрибут id со значением shayhowe .</p><p> #shayhowe { ... } </p><p> <div id="shayhowe">...</div> </p><h3>Дополнительные селекторы</h3><p>Селекторы чрезвычайно мощная штука и описанные выше относятся к наиболее распространённым селекторам, которые нам попадаются. Эти селекторы только начало. Существует много продвинутых селекторов и они легко доступны. Когда освоитесь с ними, не бойтесь посмотреть и некоторые более прогрессивные.</p><p>Ладно, начинаем собирать всё вместе. Мы добавляем элементы на страницу внутри нашего HTML, затем можем выбрать эти элементы и применить к ним стили с помощью CSS. Теперь давайте соединим точки между HTML и CSS, чтобы эти два языка работали вместе.</p><h2>Подключение CSS</h2><p>Чтобы заставить наш CSS говорить с нашим HTML мы должны указать на CSS-файл из HTML. Хорошей практикой является включение всех наших стилей в одном внешнем файле, на который есть указатель внутри элемента <head> нашего HTML-документа. Использование одного внешнего CSS позволяет нам применять одни и те же стили по всему сайту и быстро вносить в него изменения.</p><h3>Другие варианты добавления CSS</h3><p>Другие варианты подключения CSS включают в себя использование внутренних и встроенных стилей. Вы можете встретить эти варианты в реальности, но они, как правило, не одобряются, так как делают обновление сайтов громоздким и неповоротливым.</p><p>Для создания нашей внешней таблицы стилей мы снова хотим использовать выбранный текстовый редактор, чтобы создать новый текстовый файл с расширением.css. Наш CSS-файл должен быть сохранён в той же папке или подпапке, где находится и наш HTML-файл.</p><p>Внутри элемента <head> применяется элемент <link> , который определяет отношения между HTML и CSS-файлами. Поскольку мы связываем с CSS, то используем атрибут rel со значением stylesheet для указания их отношений. Кроме того, атрибут href применяется для указания местоположения или пути к CSS-файлу.</p><p>В следующем примере HTML-документа элемент <head> указывает на внешний стилевой файл.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>Чтобы CSS отображался правильно, значение пути атрибута href должно напрямую совпадать с тем, где сохранён CSS-файл. В предыдущем примере файл main.css хранится в том же месте, что и HTML-файл, известном также как корневая папка.</p><p>Если CSS-файл располагается в подпапке, то значение атрибута href должно, соответственно, соотноситься с этим путём. Например, если наш файл main.css был сохранён в подпапке с именем stylesheets, то значеним атрибута href будет stylesheets/main.css . Здесь используется косая черта (или слэш), чтобы указать перемещение в подпапку.</p><p>На данный момент наши страницы начинают оживать, медленно, но верно. Мы пока не вникали в CSS слишком глубоко, но вы, возможно, заметили, что у некоторых элементов есть стили, которые мы не объявляли в нашем CSS. Это браузер навязывает свои собственные предпочтительные стили для этих элементов. К счастью, мы можем переписать эти стили достаточно легко, что мы и сделаем дальше с помощью сброса CSS.</p><h2>Использование сброса CSS</h2><p>Каждый браузер имеет свои собственные стили по умолчанию для различных элементов. То, как Google Chrome отображает заголовки, абзацы, списки и так далее, может отличаться от того, как это делает Internet Explorer. Для обеспечения совместимости с разными браузерами стал широко использоваться сброс CSS.</p><p>Сброс CSS берёт все основные элементы HTML с заданным стилем и обеспечивает единый стиль для всех браузеров. Эти сбросы обычно включают в себя удаление размеров, отступов, полей или дополнительные стили понижающие эти значения. Поскольку каскадирование CSS работает сверху вниз (скоро об этом узнаете) - наш сброс должен быть в самом верху нашего стиля. Это гарантирует, что эти стили прочитаются первыми и все разные браузеры станут работать с общей точки отсчёта.</p><p>Есть куча разных сбросов CSS доступных для применения, у всех них есть свои сильные стороны. Один из самых популярных от Эрика Мейера , его сброс CSS адаптирован для включения новых элементов HTML5.</p><p>Если вы чувствуете себя немного авантюристом, есть также Normalize.css , созданный Николасом Галлахером. Normalize.css фокусируется не на использовании жёсткого сброса для всех основных элементов, но вместо этого на установлении общих стилей для этих элементов. Это требует более глубокого понимания CSS, а также знания того, что вы хотели бы получить от стилей.</p><h3>Кроссбраузерность и тестирование</h3><p>Как упоминалось ранее, разные браузеры отображают элементы по-своему. Важно признать значение кроссбраузерности и тестирования. Сайты не должны выглядеть исключительно одинаково во всех браузерах, но должны быть близки. Какие браузеры вы хотите поддерживать и в какой степени - это решение вы должны будете сделать на основе того, что лучше для вашего сайта.</p><p>Существует несколько вещей, на которые следует обращать внимание при написании CSS. Хорошей новостью является то, что это всё по силам и нужно немного терпения чтобы это освоить.</p><h2>На практике</h2><p>Вернёмся назад, где мы в последний раз остановились на нашем сайте конференции и посмотрим, как мы можем добавить немного CSS.</p><ol><li>Внутри нашей папки styles-conference давайте создадим новую папку с именем assets. В ней мы будет хранить все ресурсы для нашего веб-сайта, такие как стили, изображения, видео и т. д. Для наших стилей пойдём дальше и добавим ещё одну папку stylesheets внутри папки assets.</li><li>Используя текстовый редактор создадим новый файл с именем main.css и сохраним его в папке stylesheets, которую мы только что создали.</li><p>Просматривая файл index.html в браузере мы можем видеть, что элементы <h1> и <p>Уже содержат стиль по умолчанию. В частности, у них задан уникальный размер шрифта и пространство вокруг них. Используя сброс Эрика Мейера мы можем смягчить эти стили, что позволит каждому из них начинать с одинаковой базы. Для этого загляните на его сайт , скопируйте код и вставьте его в верхней части нашего файла main.css.</p><p> /* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; }</p><li>Наш файл main.css начинает принимать форму, так что подключим его к файлу index.html. Откройте index.html в текстовом редакторе и добавьте элемент <link> в <head> , сразу после элемента <title> .</li><li>Поскольку мы указываем на стили через элемент <link> добавьте атрибут rel со значением stylesheet .</li><p>Мы также включим ссылку на наш файл main.css используя атрибут href . Помните, наш файл main.css сохранён в папке stylesheets, который находится внутри папки assets. Таким образом, значение атрибута href , который является путём к нашему файлу main.css, должно быть assets/stylesheets/main.css .</p><p> <head> <meta charset="utf-8"> <title>Styles Conference

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

    Рис. 1.04. Наш сайт Styles Conference со сбросом CSS

    Демонстрация и исходный код

    Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

    Резюме

    Итак, всё хорошо! Мы сделали несколько больших шагов в этом уроке.

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

    Напомним, что мы рассмотрели следующее:

    • Разница между HTML и CSS.
    • Знакомство с элементами HTML, тегами и атрибутами.
    • Настройка структуры вашей первой веб-страницы.
    • Знакомство с селекторами CSS, свойствами и значениями.
    • Работа с селекторами CSS.
    • Указатель на CSS из HTML.
    • Важность CSS сброса.

    Теперь давайте поближе рассмотрим HTML и познакомимся немного с семантикой.

    Ресурсы и ссылки

    • Common HTML terms via Scripting Master
    • CSS Terms & Definitions via Impressive Webs
    • CSS Tools: Reset CSS via Eric Meyer

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

    Какие языки нужно знать, чтобы создавать сайты?

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

    • серверная платформа;
    • серверное ПО;
    • наличие опыта в создании сайтов;
    • выбранная база данных.

    Наиболее популярные языки

Сайты Популярность
(уникальные посетители в месяц) 		Front-end
(Клиентский) 		Back-end
(Серверный) 		База данных
Google.com 1,600,000,000 C, C++, Go, Java, Python BigTable, MariaDB
Facebook.com 1,100,000,000 Hack, PHP (HHVM), Python, C++, Java, Erlang, D, Xhp,Haskell MariaDB, MySQL,HBase Cassandra
YouTube.com 1,100,000,000 C, C++, Python, Java, Go Vitess, BigTable, MariaDB
Yahoo 750,000,000 PHP MySQL, PostgreSQL,VB.NET
Amazon.com 500,000,000 Java, C++, Perl Oracle Database
Wikipedia.org 475,000,000 PHP, Hack MySQL, MariaDB
Twitter.com 290,000,000 C++, Java, Scala, Ruby MySQL
Bing 285,000,000 ASP.NET Microsoft SQL Server
eBay.com 285,000,000 Java, JavaScript, Scala Oracle Database
MSN.com 280,000,000 ASP.NET Microsoft SQL Server
Microsoft 270,000,000 ASP.NET Microsoft SQL Server
Linkedin.com 260,000,000 Java, JavaScript, Scala Voldemort
Pinterest 250,000,000 Django, Erlang MySQL, Redis
WordPress.com 240,000,000 PHP, JavaScript (Node.js) MariaDB, MySQL

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

Python. На русском его часто называют «питон». Это высокоуровневый язык, используемый для общих задач, чаще всего — для выполнения задач сервером. Его ориентир — повышение производительности программиста и читаемости кода. При помощи языка можно выполнять резервное копирование многих парадигм программирования. Питон отлично работает на серверах Windows и Linux.

Ruby. На русском часто его называют «руби». Это динамический, рефлективный и высокоуровневый язык для ООП (объектно-ориентированного программирования). Он дает возможность реализовать многопоточность на любой ОС, отличается строгой типизацией динамического вида, и обладает рядом других опций. По характеристикам синтаксиса Руби ближе всего к аналогам Eiffel и Perl. Кроме того, отдельные детали позаимствованы из Python.

ASP. Этот язык разработан корпорацией Microsoft. С использованием этой технологии можно разрабатывать приложения для www.asp. Платформы для работы языка следующие: Internet Information Server (IIS) и Windows NT. ASP довольно сложно назвать непосредственно языком, это скорее технология для подсоединения программы к интернет-странице. Все достоинства ASP — в простом скриптовом языке и возможностях применения сторонних СОМ-элементов.

JavaScript. Принцип «яваскрипт» немного отличается от прочих языков программирования. Его главное отличие состоит в прямом подключении к HTML-файлу. Сценарий, созданный на базе JavaScript, обрабатывается интерпретатором, который встроен в браузер. Этот язык используется для большого спектра задач: создание динамических страниц (контент на них может меняться по загрузки документа);

Решение местных задач; проверка правильности заполнения форм до их отправления на сервер.

Большие возможности языка объясняются его популярностью. Так, с помощью JavaScript можно:

  • изменять содержимое страницы: дописывать или убирать текст, менять стили и теги;
  • реагировать на какие-то события (например, на щелчок мыши) и выполнять заданную функцию;
  • отображать сообщения, ставить и считывать cookies, проверять правильность введенных данных;
  • загружать новые данные без перезагрузки документа, и пр.

Perl. Первое время этот язык использовался для соединения программ, которые выполняли разные задачи, в единый сценарий для решения целого комплекса задач: обработки текста, администрирования и пр. Сегодня же Перл используется в основном для разработки приложений CGI. Он помогает администрировать сервера и прочие системы. Благодаря простоте и скорости написания сценария на Перле, его адаптировали ко всем популярным платформам, включая Mac и Windows. Perl имеет открытый исходный код, абсолютно бесплатный.

Нужно ли много знаний?

Базовые знания по программированию вcе приобретают на уроках информатики в школе. Работать на начальном уровне с Паскаль и Делфи приходилось фактически каждому. Но другие, более сложные языки программирования, требуют другого, более комплексного и серьезного подхода. Первое, что нужно для успешного программиста — математический, логический склад ума и желание совершенствоваться в своем деле. При этом не стоит пытаться выучить сразу все языки. Лучше хорошо освоить один, чем иметь отрывочные знания о пяти языках. Все языки имеют схожие принципы, они все строятся на логике действий, поэтому со временем, с каждым новым языком учить его все проще. Копировать или менять чужой код могут многие, но писать свой код, стать настоящим «художником» способен далеко не каждый.

2.7.1. Создание web-страницы в редакторе FrontPage 2003

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

Язык разметки HTML позволяет форматировать текст веб страницы, размещать на ней графические объекты, рисунки, вставлять звукозапись и различные мультимедийные элементы, а так же скрипты (JavaScript, VBScript), создавать гипертекстовые ссылки.

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

Затем следуют теги , (тело веб-страницы), между этими тегами размещается содержание или контент страницы.

Например, если в редакторе Блокнот или Notepad++ ввести текст, размеченный тегами:


Обучение в интернет


Этот сайт посвящен дистанционному обучению информатике, телекоммуникациям и электронному бизнесу


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


Рис. 1.

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

WWW-страницы могут быть:

  • статическими;
  • динамическими;
  • интерактивные.

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

Динамические веб-страницы - это веб-страницы, сгенерированные или сформированные (созданные) в процессе исполнения запроса пользователя. Эти страницы пишутся на языке PHP, ASP и т.д. и имеют соответственно расширения.php, .aspx. Динамические страницы создаются так называемым движком (Content Managment System – Система Управления Контентом) или специальной программой на сервере, которая по запросам пользователей формирует веб-страницу из данных хранящихся на сервере в базе данных.

Интерактивные веб-страницы - это веб-страницы, которые включают в себя формы (созданные на языках PHP, JavaScript и VBScript и т.д.), с помощью этих форм происходит обмен данными между пользователем и сервером.

Web-страницы создаются с помощью различных html-редакторов: Microsoft FrontPage, Macromedia Dreamweaver, TinyMCE WYSIWYG Editor, FCKeditor, и т.д.

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

Алгоритм создания веб-страниц в редакторе FrontPage 2003 детально изложен на страничке

Вам скорей всего уже известно, что основным языком Internet-а является язык гипертекстовой разметки HTML (HyperText Markup Language) . В этой статье мы узнаем базовые понятия HTML и научимся создавать простейшие WEB-страницы.

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

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

Браузер — это специальная программа, предназначенная для просмотра веб-сайтов, например Internet Explorer. При помощи браузера вы бродите по сайтам, щелкая по ссылкам.

Любой такой щелчок заставляет браузер сделать запрос на html-страницу web-серверу, получить ответ и отобразить страницу в своем окне. Именно при отображении страницы начинает работать язык HTML, он сообщает браузеру все о структуре и содержимом web-страницы.

С помощью команд — тегов , HTML указывает браузеру, где начинаются абзацы текста, какая часть текста является заголовком и указывает куда вставлять таблицы, и даже картинки. А теги это слова в угловых скобках, например «p», «h1», «table» .

Срочно нужен интернет-магазин, а времени на изучение HTML, CSS, PHP и других технологий нет. Тогда просто можете арендовать интернет магазин с полностью реализованным функционалом и оптимизацией под поисковые системы.

Язык HTML и его теги

Первая версия языка HTML появилась еще в 1992 году. На момент 2013 года разрабатывается спецификация новой версии HTML под номером 5. Разработкой данной спецификации занимается организация World Wide Web Consortium, или сокращенно W3C.

Организация W3C занимается разработкой и других Web-стандартов. Ознакомится с этими стандартами вы можете на их сайте www.w3.org . Кстати, Многие Web-браузеры уже поддерживают некоторые возможности HTML 5.

Предлагаю начать изучение языка HTML сразу с примера. Поэтому давайте создадим нашу первую Web-страничку. Для создания WEB-страниц подойдет любой текстовый редактор.

Я предлагаю для начала воспользоваться встроенным в Windows Блокнотом (Notepad) (вообще в дальнейшем для редактирования html-кода я советую использовать ). Найти его можно: «Пуск — Все программы — Стандартные — Блокнот». Давайте создадим страничку об автомобилях. Итак, откроем Блокнот и наберем в нем текст:

Далее сохраним созданную web-страницу в файл с именем index.html. При этом в диалоговом окне сохранения файла необходимо задать кодировку UTF-8 и заключить имя файла в кавычки, иначе Блокнот добавит к нему расширение txt, и наш файл получит имя index.htm.txt:

Теперь осталось открыть созданный файл в браузере и посмотреть на результат. Для этого можно воспользоваться поставляемым в составе Windows браузером Microsoft Internet Explorer, либо любым другим установленным на вашем компьютере браузером, щелкнув два раза мышкой по файлу index.html или перетаскиванием файла на значок браузера. Открываем и видим примерно такой результат:

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

Что такое тег?

Теперь поговорим подробнее о структуре страницы. Рассмотрим фрагмент:

Здесь мы видим текст, который отображается на странице как заголовок, заключенный в тег «h1». Что же такое тег в html языке?

Тег HTML — это обычные слова и символы, заключенные в угловые скобки, например «h1», «p», «body». Так тег «h1» является открывающим тегом, тег «/h1» закрывающим тегом, а текст между ними называется содержимым тега.

Также тег «h1» и тег «/h1» называются парными тегами. Вместе открывающий тег плюс содержимое плюс закрывающий тег образуют элемент html-документа. Бывают еще элементы состоящие из одного открывающего тега:

Так парный тег «h1» определяет элемент заголовка первого уровня. Всего существует шесть уровней заголовков, это элементы «h1» — «h6».

Элементы бывают блочные и строчные (текстовые). Блочные элементы осуществляют структурное форматирование страницы. Блочные элементы всегда отображаются на странице с новой строки и имеют отступ от соседних элементов. Строчные элементы осуществляют непосредственное форматирование текста или логическое форматирование. Элемент h1 является блочным элементом.

Далее идет , который создает на HTML-странице абзац. Содержимое данного тега станет текстом этого абзаца. Элемент «p» также является блочным элементом и как мы видим он начинается с новой строки и между заголовком h1 и абзацем есть отступ.

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

Данный тег «strong» вложен внутрь содержимого тега «p». Это значит, что содержимое тега strong будет отображаться как часть абзаца. Такие вложенные теги называются дочерними , а теги в которые вложены другие теги называются родительскими . Таким образом, тег «strong» является дочерним, а тег «p» — родительским. Такая вложенность тегов встречается в HTML сплошь и рядом.

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

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

Вы могли заметить, что открывающий тег «h1» кроме названия содержит еще какой-то текст: align="center". Это атрибут тега , который задает его параметры. Каждый атрибут имеет имя, после которого идет знак =, и далее идет его значение взятое в кавычки:

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

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

Структура WEB — страницы. Основные html теги.

Для корректного отображения страницы в браузере, в html-коде обязательно наличие следующих парных тегов: html, head и body .

Во-первых весь ваш html-код должен быть заключен в теги «html» и «/html». Они сообщают браузеру, что страница содержит html-код.

Кроме этого в коде страницы должны быть разделы заголовка и тела документа. Раздел заголовка, или его еще называют шапка, состоит из парного тега «head» и его содержимого. В этом разделе помещают сведения о параметрах страницы, не отображаемые на экране и нужные только браузеру. В нашем примере раздел заголовка такой:

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

Подводя итог вышесказанному, любая html-страница имеет следующую структуру:

Метаданные html страницы

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

Прежде всего, это тег «title», который задает название WEB-страницы. Это название отображается в заголовке окна WEB-браузера. Кроме того содержимое тега «title» используется поисковиками для указания ссылки на данный документ в результатах поиска по ключевым словам. Поэтому старайтесь задавать интересный заголовок, содержащий ключевые слова, чтобы привлечь больше посетителей.

Следующий метатег «meta» сообщает браузеру кодировку нашего документа. В данном случае мы создали нашу web-страницу в кодировке utf-8. Информацию о кодировке мы передали браузеру с помощью атрибута «content» тега «meta».

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

Тип HTML документа (doctype)

Осталось рассмотреть один тег нашей первой WEB-страницы, который находится в самом начале html-кода: «!doctype html». Данный тег задает версию языка HTML, на котором написана страница, и его версию.

Он необходим, чтобы браузер понимал согласно какому стандарту отображать веб-страницу. , и они различаются в зависимости от версии языка, на котором написан html-код. Так, наш тег !doctype html указывает на версию языка HTML5.

Итак, подведем итоги:

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

2. HTML — это язык , который используется для создания web-страниц. HTML — это аббревиатура HyperText Markup Language (язык гипертекстовой разметки).

3. WEB-страницы состоят из html-тегов и их содержимого. Теги состоят из символов и имени внутри них. Имена тегов можно писать как прописными(большими), так и строчными(маленькими) буквами. Между символами и именами тегов, а также внутри имен тегов не допускаются пробелы и переносы строк. Теги бывают парные и одиночные , а также теги могут быть вложенными друг в друга.

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



Похожие статьи
Типы
  • Роутеры
  • Жесткие диски
  • Не включается
  • Принтеры
  • Тормозит
  • Зависает
  • Вирусы
  • Планшеты
Популярные статьи
Новые статьи