Пособия по html. Пособия по html

Рисунки.

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

Путь к файлу

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

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

делается это так:

Где foto.jpg это название Вашей фотографии в данном случае, так как фото лежит рядом с html документом, путь к ней мы не указываем.

Да, помните, тег не требует закрывающего тега!

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

— Такая запись подразумевает, что в директории где расположен наш html документ есть папка myfoto в которой расположен файл foto.jpg
— Значит рядом с документом расположена папка myfoto, в ней еще одна папка с названием graphics, и уже в ней нужная нам фотография foto.jpg которую нужно выложить для всеобщего обозрения.
— А это значит, что фото размещено на уровень выше от документа
— Так соответственно на два уровня выше, сколько поставите../ настолько и поднимитесь.

Так же можно указывая место фотографии, ссылаться на тот или иной интернет ресурс

Ну что, давайте попробуем выложить фото.

Привет мир.


Меня зовут Карлсон! Я в меру упитанный мужчина — это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю вареньё. С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!

Справочник тегов HTML

названия тегов краткое описание тегов
Предназначен для создания ссылок (гипертекста).

Атрибуты:
name — Присваивает имя элементу.
href — Присваивает адрес ресурса, к которому ведет ссылка.
для создания ссылки вызова почтовой программы href=»mailto:e-mail»
title— Всплывающая подсказка

Синтаксис:
открыть страницу
ссылка на сайт
открыть почтовую программу
присвоить имя
перейти к закладке

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

Атрибуты:
title— всплывающая подсказка

Синтаксис:
Иванов Иван Иванович

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

Атрибуты:
alt — альтернативный текст для области изображения
title— всплывающая подсказка
href — указывает путь к открываемому документу
shape — форма области рисунка которая будет служить ссылкой. Может иметь одно из трёх значений:

  • rect — прямоугольная область
  • poly — область представляет собой некий многоугольник
  • circle — область заданная окружностью
  • coords — координаты области
    nohref — область без ссылки на другой документ
    target — указывает в каком окне следует открывать документ.

    • _blank — открыть в новом окне
    • _self — открыть в текущем окне (по умолчанию)
    • _parent — открыть документ в фрейме-родителе, если фреймов нет, то работает как _self.
    • _top — отменяет фреймы и загружает документ в полном окне браузера, если фреймов нет, то как _self.
    • Синтаксис:

      не требует закрывающего тега

      Делает текст полужирным. Аналогичен тегу

      Атрибуты:
      title— Всплывающая подсказка

      Синтаксис:
      этот текст будет полужирным

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

      Упер казак репу

      Внедряет в документ звуковой файл. Файл проигрывается в качестве фоновой музыки.

      Не требует закрывающего тега.

      Делает текст крупным.

      Синтаксис:
      этот текст будет крупным

      «Тело» документа указывает содержание видимой части документа.

      Атрибуты:
      bgcolor — задаёт цвет фона документа.
      background — указывает адрес рисунка делая его фоном документа.
      text — цвет текста документа.
      link — цвет ссылок.
      vlink — цвет посещённых ссылок.
      alink — цвет нажатой, активной ссылки.
      bgproperties=»fixed» — делает рисунок фон фиксированным.(фоновое изображение не прокручивается при нажатии PageDown)

      Синтаксис:

      содержание видимой части документа

      HTML формы

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

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

      Основные теги, используемые для создания HTML форм, — это тег

      Тег – это основа всего мира форм. Он может быть десяти видов:

      • — стандартное текстовое поле. Также здесь может присутствовать атрибут value, который определяет текст по умолчанию, заданный в текстовом поле.
      • — то же текстовое поле, однако вводимые пользователем символы будут скрыты.
      • — создает поле выключателей (checkbox) или флажков, которые пользователь может либо включить, либо отключить. Также здесь можно использовать атрибут checked, который используется в формате и который задает начальное состояние флажка «включен».
      • — создает поле переключателей, которые очень похожи на флажки, однако в этом случае пользователь может выбрать только один объект в группе переключателей. Здесь также можно использовать атрибут checked, который задается аналогичным образом, как и в случае с флажками.
      • — создает поле ввода, которое показывает файлы на вашем компьютере подобно тому, как вы открываете или сохраняете документы в большинстве программ. Оно позволяет пользователям загружать файлы на сервер.
      • — создает кнопку отправки данных формы программе-обработчику. Можно самому задавать текст, который будет отображаться на кнопке отправки (то же самое можно сделать и с типами button и reset – см.ниже). Это делается при помощи атрибута value, например, .
      • — создает специальную кнопку отправки, в качестве которой будет использоваться активное изображение. При этом серверу кроме данных формы еще отправляются и координаты (x, y) нажатия мыши на изображение. Также необходимо указывать атрибут src, который играет ту же роль, что и в теге .
      • — создает кнопку, которая без дополнительного кода ничего не будет делать.
      • — создает кнопку, которая при нажатии на нее возвращает все поля формы к значениям по умолчанию.
      • — создает поле, которое не отображается в окне браузера. Оно используется для передачи различной вспомогательной информации, например, имени страницы, на которой находится пользователь, или электронный адрес, куда должна пересылаться форма.

      Обратите внимание, что тег закрывает сам себя при помощи конструкции «/>».

      При отправке данных формы посылается выбранный элемент списка.

      Аналогично атрибуту checked в флажках и переключателях тег

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

      Форма может иметь, например, следующий вид. (Внимание: форма не будет работать до тех пор, пока не будет реализован скрипт «contactus.php», указанный в атрибуте action тега

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

      Учебник HTML для начинающих

      Данный учебник — это учебник начального уровня, и он не требует наличия каких-либо предварительных знаний ни в области HTML, ни в области CSS. Он поможет вам не только изучить основы языка гипертекстовой разметки документа, но и узнать о некоторых дополнительных механизмах функционирования HTML, которые не сложны по своей сути, но которые помогут полнее понять HTML и в полной мере воспользоваться возможностями HTML. Данный учебник основываются на использовании стандартов HTML 4.01 (XHTML 1.0+).

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

      Если посмотреть на другие учебники, то вы заметите, что в некоторых из них упоминаются вещи, которых этот электронный учебник HTML для начинающих не содержит. Это обусловлено тем, что одни методы уже устарели, другие — из разряда нестандартных, а третьи вообще являются просто плохой практикой программирования. А если с самого начала приучить себя к хорошему стилю, то можно добиться гораздо лучших результатов. Кроме этого, когда материал данного пособия вы усвоите, то можно перейти на следующий этап. Для этого будут весьма полезны материалы из разделов учебника CSS начального уровня. Следует сказать, что последний — учебник по каскадным таблицам стилей — весьма важен, поскольку без таблиц стилей CSS гипертекстовый документ имеет весьма непрезентабельный вид.

      Введение в HTML

      Быстрый старт

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

      В примере 1.1 приведен несложный пример такого кода.

      Пример 1.1. Первая веб-страница

      Чтобы посмотреть результат примера в действии, проделайте следующие шаги.

      1. В Windows откройте программу Блокнот ( Пуск > Выполнить > набрать «notepad» или Пуск > Программы > Стандартные > Блокнот ).

      2. Наберите или скопируйте код в Блокноте (рис. 1.1).

      Рис. 1.1. Вид HTML-кода в программе Блокнот

      3. Сохраните готовый документ ( Файл > Сохранить как. ) под именем c:\www\example11.html , при этом обязательно поставьте в диалоговом окне сохранения тип файла: Все файлы и кодировку UTF-8 (рис. 1.2). Обратите внимание, что расширение у файла должно быть именно html.

      Рис. 1.2. Параметры сохранения файла в Блокноте

      4. Запустите браузер Internet Explorer ( Пуск > Выполнить > набрать «iexplore» или Пуск > Программы > Internet Explorer ).

      5. В браузере выберите пункт меню Файл > Открыть и укажите путь к вашему файлу.

      6. Если все сделано правильно, то в браузере вы увидите результат, как показано на рис. 1.3.

      Рис. 1.3. Вид веб-страницы в окне браузера

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

      Структура HTML-кода

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

      Пример 4.1. Исходный код веб-страницы

      Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example41.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O) . В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1.

      Рис. 4.1. Результат выполнения примера

      Далее разберем отдельные строки нашего кода.

      Элемент предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .

      Существует несколько видов , они различаются в зависимости от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные типы документов с их описанием.

      Табл. 4.1. Допустимые DTD

      DOCTYPE Описание
      HTML 4.01
      Строгий синтаксис HTML.
      Переходный синтаксис HTML.
      В HTML-документе применяются фреймы.
      HTML 5
      В этой версии HTML только один доктайп.
      XHTML 1.0
      Строгий синтаксис XHTML.
      Переходный синтаксис XHTML.
      Документ написан на XHTML и содержит фреймы.
      XHTML 1.1
      Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам.

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

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

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

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

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

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

      Тег является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.

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

      Рис. 4.2. Вид заголовка в браузере

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

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

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

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

      представляет собой наиболее важный заголовок первого уровня, а тег

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

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

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

      определяет абзац (параграф) текста. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.

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

      Коротко о стандартах

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

      Разделение содержимого и представления

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

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

      Такая философия, прежде всего, подразумевает, что в коде HTML не должно быть ничего, определяющего стиль документа. Теги вроде и атрибуты вроде bgcolor должны быть исключены. Даже атрибут border в теге вставки изображения по стандартам XHTML 1.1 считается неприемлемым. Это вовсе не проблема, — нет такого стиля, который можно было бы сделать средствами HTML, и который нельзя было бы сделать, и сделать лучше, средствами CSS.

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

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

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

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

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

      Во всех документах должны присутствовать элементы , , и . Также веб-страница должна начинаться с декларации типа документа.

      Тело документа (элемент ) должен начинаться с тега

      Атрибуты

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

      Усеченные атрибуты (такие как ) запрещены. Усеченным атрибутам нужно присваивать то же значение, что и имя усеченного атрибута (например, ).

      Атрибут name теперь вне закона (за исключением элементов форм) и должен быть заменен атрибутом id.

      Атрибут target также больше не используется. Ну и бог с ним. Все равно от него было больше неудобств, чем пользы.

      Атрибут alt в теге теперь обязателен.

      Доступность

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

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

      Читайте так же:  Как подать на развод в лнр. Как подать на развод в лнр

Добавить комментарий

Ваш адрес электронной почты не будет опубликован.