Правила вложений для тега a

Содержание
Илон Маск рекомендует:  Iis использование новых мастеров безопасности

Ссылки относительно текущего документа

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

1. Файлы располагаются в одной папке (рис. 1.4).

Необходимо сделать ссылку из исходного документа на ссылаемый. В таком случае код будет следующий.

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

2. Файлы размещаются в разных папках (рис. 1.5).

Когда исходный документ хранится в одной папке, а ссылаемый в корне сайта, то перед именем файла в адресе ссылки следует поставить две точки и слэш (/), как показано ниже.

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

3. Файлы размещаются в разных папках (рис. 1.6).

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

Аналогично обстоит дело с любым числом вложенных папок.

  1. Файлы размещаются в разных папках (рис. 1.7).

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

Заметьте, что никаких дополнительных точек и слэшей перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так.

Илон Маск рекомендует:  Создание меню с тенью

Ссылки относительно корня сайта

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

Учтите, что такая форма записи не работает на локальном компьютере, а только под управлением веб-сервера.

Виды ссылок

Любая ссылка на веб-странице может находиться в одном из следующих состояний.

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

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

Посещенная ссылка. Как только пользователь открывает документ, на который указывает ссылка, она помечается как посещенная и меняет свой цвет на фиолетовый, установленный по умолчанию.

Правила вложений для тега

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

Ошибки при использовании ссылок

10 преступлений с HTML тегами, которых лучше не совершать

В данной статье пойдет речь о том, чего не стоит делать с HTML тегами, так как это семантически неправильно.

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

Преступление № 1 — Вставка блочных элементов в инлайновые

HTML можно отображать двумя способами — блочно или инлайново. Каждый тег изначально блочный или инлайновый. Блочные элементы — слои (div) и абзацы, которые составляют структуру страницы. Инлайновые элементы должны находится внутри блочных, например якори и теги . И поэтому инлайновые элементы всегда должны находится внутри блочных, и не наоборот.

Преступление № 2 — Не использование атрибута ALT в картинках

Атрибут ALT — это обязательный элемент для всех картинок на странице. Он помогает пользователям узнать, что изображено на картинке, если она не отображается по какой-либо причине. Если картинка используется просто как элемент дизайна, тогда все равно добавляйте пустой атрибут — alt=»».

Преступление № 3 — Не использование списков там, где это необходимо

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

Преступление № 4 — Использование и для жирного и курсивного текста

Теги и делает текст жирным и курсивным, но семантически они классифицированы как презентационные теги, и поэтому лучше всего подобные эффекты делать с помощью CSS стилей font-weight и font-style. Если же в тексте есть всего несколько слов, которые следует выделить, тогда лучше использовать теги или , которые выполняют ту же функцию.

Преступление № 5 — Использование большого количества тегов

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

Преступление № 6 — Использование неправильных тегов для зачеркивания

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

Преступление № 7 — Использование инлайновых стилей

Вы же слышали это много раз — инлайновые стили это зло. Идея семантического HTML и CSS заключается в разделении структуры и стилей. Помните, всегда храните стили в таблицы стилей.

Преступление № 8 — Добавление или удаление границ в HTML

Атрибут границы лучше указывать только в таблице стилей, даже если это просто border=»0″.

Преступление № 9 — Не использование заголовков

Заголовки доступны от

и их очень удобно использовать для разделения документа на секции. Если несколько слов объясняют что будет дальше, имеет смысл использование заголовка. Выбора размера заголовка зависит от структуры документа. Главное соблюдайте баланс и используйте заголовки от 1 до 6.

Преступление № 10 — Использование или

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.line25.com
Перевел: Максим Шкурупий
Урок создан: 2 Июня 2009
Просмотров: 74697
Правила перепечатки

5 последних уроков рубрики «HTML и DHTML»

Лайфхак: наиполезнейшая функция var_export()

При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.

17 бесплатных шаблонов админок

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

30 сайтов для скачки бесплатных шаблонов почтовых писем

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

Как осуществить задержку при нажатии клавиши с помощью jQuery?

К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.

15 новых сайтов для скачивания бесплатных фото

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

HTML код ссылки: тег ..

Обязательным параметром у ссылки является только href=»URL» , т.е. адрес ссылки. Между открывающим тегом и закрывающим тегом пишется анкор ссылки, который может состоять из слов, символов, объектов (картинки и прочее).

Пример . Html код ссылки:

Преобразуется на странице в следующее:

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

Ссылки html вебмастера на профессиональном языке называют гиперссылками.

Атрибуты и свойства тега

1. Атрибут target=»параметр» , который может принимать следующие значения:

  • _blank — открывает страницу в новом окне
  • _self — загружает страницу в текущее окно
  • _parent — загружает страницу во фрейм-родитель
  • _top — отменяет все фреймы и загружает страницу в полном окне браузера

Пример с target

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

Чаще всего применяется значение _blank , поскольку он позволяет открывать страницу в новой вкладке. Это удобно для пользователя, поскольку у него остается открытой текущая страница в соседней вкладке.

2. Атрибут title=»подсказка» позволяет прописать подсказку, которая высветится при наведении курсора на ссылку. Это нужно для более точного описания ссылки. Атрибут тайтл поможет пользователю убедиться в том, что по ссылке он найдет нужную информацию, а для поисковой системы это дополнительный ключевые слова для страницы, на которую ведет ссылка.

Пример с подсказкой title

Преобразуется на странице в следующее:

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

3. Атрибут задает класс стиля для ссылки. О классах Вы уже знаете из предыдущего урока (стили в html). Для тега a стили имеют небольшие отличия. Объясню все нюансы на следующем примере.

Преобразуется на странице в следующее:

  • a.класс:visited стиль для ссылки, который пользователь уже посетил. Это позволяет пользователю не заходить на одну и ту же страницу дважды, даже если у ссылки на эту страницу будут разные анкоры.
  • a.класс:link стиль для тех ссылок, которые ещё не посещал пользователь (можно не указывать приписку «:link», поскольку a.класс — делает то же самое).
  • a.класс:hover стиль ссылки при наведении курсора. Обычно для этого стиля делают другой цвет, а также подчеркивание, чтобы дать пользователю понять, что ссылка стала активной.

4. Атрибут rel=»параметр» — определяет отношения между текущим документом и документом, на который ведет ссылка. Этот атрибут носит важное значение для поисковых машин, но браузерами никак не трактуется. Может принимать следующее значения:

4.1. nofollow — означает то, что вес по ссылке не будет передаваться (робот не будет переходить по ссылке). Например:

Визуально никаких отличий Вы не заметите, однако для поисковых систем эта ссылка не будет передавать вес. Поэтому мой совет для всех: закрывайте все внешние ссылки атрибутом rel=»nofollow» , чтобы сохранить вес на Вашем сайте.

4.2. canonical — в случае множества дублей на сайте, указывает главную страницу среди всех дублей

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

Как сделать ссылку на адрес почты

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

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

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

HTML5

Добро пожаловать на сайт html-5.ru, посвящённому языку разметки HTML5. Здесь вы можете более подробно ознакомиться с новыми тегами и технологиями появившимися в HTML5.

Синтаксис XHTML

Синтаксическая структура XHTML

XHTML — eXtensible Hypertext Markup Language расширяемый язык разметки гипертекста)

Синтаксис XHTML состоит из строгих правил написания кода, за основу синтаксиса взяты правила написания кода на языке XML.

Правила написания кода, на XHTML

  1. Имена тегов и атрибутов, должны быть записаны в нижнем регистре.
  2. Соблюдайте правильность вложения тегов.
  3. Все теги должны быть «закрыты» и парные и одиночные (например вместо
    , нужно записывать
    )
  4. Значения атрибутов, должны быть взяты в двойные кавычки.
  5. Не используйте сокращённых атрибутов.
  6. Вместо атрибута name , используйте уникальный идентификатор id , исключение: элементы формы.

Регистр в XHTML

В HTML 4 не предавали значения регистру имен тегов и атрибутов, например абзац можно было записать в таком виде:

, в XHTML имена тегов, атрибутов и их значений записываются только в нижнем регистре:

Вложенность тегов в XHTML

Нельзя вложение делать перекрестным:
пример перекрестного вложения тегов ,
здесь после тега первым должен идти закрывающий тег , а не закрывающий тег
.

Нельзя блочные теги, вкладывать внутрь строчных тегов:

пример вложения блочного тега «p», в строчный тег «i»

Соблюдайте «закрытость» тегов в XHTML

В HTML 4, некоторые парные теги можно было не закрывать, например абзац

можно было оформить лишь открывающим тегом:

В XHTML, все парные теги должны иметь закрывающий тег:

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

Использование кавычек в атрибутах значений XHTML

В HTML 4, значения атрибутов в кавычки можно было не обрамлять , в XHTML значения в атрибутах, нужно обязательно обрамлять двойными кавычками

Сокращенные атрибуты в XHTML

Вместо сокращенных атрибутов, в XHTML нужно использовать их полную версию.

Список одиночных тегов в XHTML
Список сокращённых атрибутов в XHTML

Сокращённая версия Полная версия
checked checked=»checked»
compact compact=»compact»
disabled disabled=»disabled»
ismap ismap=»ismap»
multiple multiple=»multiple»
nohref nohref=»nohref»
noresize noresize=»noresize»
noshade noshade=»noshade»
nowrap nowrap=»nowrap»
readonly readonly=»readonly»
selected selected=»selected»

Сокращенные атрибуты появишиеся в HTML5.

Список сокращённых атрибутов появившихся в HTML5

Сокращённая версия Полная версия
autofocus autofocus=»autofocus»
autoplay autoplay=»autoplay»
controls controls=»controls»
loop loop=»loop»
novalidate noval
formnovalidate formnoval
multiple multiple=»multiple»
readonly readonly=»readonly»
required required=»required»

Сокращенные атрибуты, также еще называют логическими или булевыми атрибутами, поскольку вместо их значения можно записать всё что угодно, например checked=»yes» , checked=»no» или checked=»hello» , все они аналогичны атрибуту checked=»checked» или просто checked

Правила вложений для тега

Например, имеется ссылка арбуз . Так вот, это не противоречит стандартам html ? И воспринимают ли поисковики текст внутри спана, как текст ссылки? Тоесть если какая-то разница для ссылочного между
арбуз и
арбуз

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

да и код меньше будет.

26.07.2007, 19:09 #2
26.07.2007, 19:15 #3

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

да и код меньше будет.

А смысл в том, что щас верстают мне дизайн, верстальщику поставлена задача сделать так, чтобы текст написанный на картинках так же был отображен и в html. Соответственно он предложил следующий вариант:

Семантическая верстка сайта: HTML5

Привет, уважаемые читатели блога.

Мы с вами уже не раз касались темы верстки сайта, в частности, рассматривали основы работы с html-кодом и редактирования css-стилей. Сегодня мы пойдем дальше и разберемся с тем, что такое семантическая верстка сайта, для чего она нужна и как ее применять на практике. Для понимания данной темы важно предварительно изучить хотя бы основные принципы html и css, либо же постигать новую информацию по ходу прочтения сегодняшней статьи, обращаясь за разъяснениями к более ранним статьям на моем блоге.

Семантическая верстка в HTML

Семантика в языкознании означает смысл, значение слова или речевого оборота. Мы уже встречали данный термин, когда рассматривали сбор семантического ядра для сайта. И в том контексте, и в сегодняшней статье определение «семантический» указывает на то, что в основе лежит смысл. А стало быть, семантическая верстка – это верстка, построенная на смысловой структуре. В отличие от так называемой верстки на дивах (div – html-тег), все элементы семантической верстки подчинены смысловой иерархии. И самый наглядный пример для объяснения – это использование тегов заголовков и подзаголовков h1, h2, h3 и т.д.

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

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

Когда каждому структурному элементу сайта соответствует определенный тег, код становится упорядоченным и понятным. При этом описание стилей элементов выводятся в отдельный css-файл. Для того, чтобы увидеть насколько страницы вашего сайта структурированы можно проделать простой эксперимент. Отключите на время в браузере поддержку CSS и JavaScript и посмотрите, где на вашем ресурсе названия статей, содержание, подзаголовки и т.д. Можете ли вы разобраться в структуре вашего сайта, используя только html-разметку?

Примеры семантической верстки HTML5

Еще один наглядный пример, где ясно видно отличие семантической верстки от прошлых стандартов html, — использование тега (от английского emphasis – акцент). Тег заменил тег (выделение курсивом). Для тега в файле стилей может задаваться отображение курсивом, подчеркиванием, полужирным. Но значение данного тега – именно акцентирование текста, к примеру, для выделения нового термина. Однако, в случае, когда нужно употребить цитату, в семантической верстке будет уже использоваться тег , хотя ранее оба эти элемента (и новый термин, и цитата) были бы заключены в тег (выделены курсивом).

А теперь приведем пример, как верстка дивами заменяется семантической.

Необходимо корректно вкладывать элементы друг в друга

Необходимо корректно вкладывать элементы друг в друга

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

Этот пример корректен. Однако если мы напишем так:

то нарушим требования HTML. Тем не менее эти и им подобные требования не всегда выполнялись разработчиками, и «добрые» браузеры обычно корректировали такие нарушения кода. Однако стандарт XHTML запрещает подобные нарушения. Кроме того, XHTML запрещает следующие вложения:

• тег не может содержать теги ;

• тег не может содержать теги

• тег не может содержать другие теги ;

Похожие главы из других книг

Сообщение от друга

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

Софтерра: Корректно о цвете кожи

Софтерра: Корректно о цвете кожи Автор: Алексей КлимовПарадигма обработки изображений в рассматриваемых сегодня программах iCorrect EditLab Pro и iCorrect Portrait настолько спорна, что требует вступительного слова на тему «Цвет кожи как часть выражения лица».Дело в том, что в цифровых

ИНТЕРНЕТ: Остановиться нельзя вкладывать

1.6.5. Правило простоты: необходимо проектировать простые программы и «добавлять сложность» только там, где это необходимо

1.6.5. Правило простоты: необходимо проектировать простые программы и «добавлять сложность» только там, где это необходимо Многие факторы приводят к усложнению программ (а следовательно, делают их более дорогими и более уязвимыми относительно ошибок). Программисты — это

§ 2.3 Элементы описания книги. Базовые структурные элементы

§ 2.3 Элементы описания книги. Базовые структурные элементы В самом начале любого файла книги идет признак формата XML Здесь указана сигнатура принадлежности к формату XML, его версия и кодировка файла. Для русскоязычных FictionBook это обычно windows-1251

§ 2.4 Элементы описания книги (description). Элементы первого уровня

§ 2.4 Элементы описания книги (description). Элементы первого уровня Элемент title-infoСодержит базовую информацию о книге (заголовок, информация об авторе и переводчике, аннотация, вхождение в серию и т.д.)Cинтаксис: content .Используется в элементах: descriptionВложенные

§ 2.5 Элементы описания книги (description). Элементы второго уровня

§ 2.5 Элементы описания книги (description). Элементы второго уровня Элемент genreЖанр произведения.Содержимое элемента строго фиксировано и определяется файлом FictionBookGenres.xsd, входящим в состав спецификации FictionBook.Список жанров с переводом приведен в Приложении В.Cинтаксис:

§ 2.6 Элементы описания книги (description). Элементы третьего уровня (информация об авторе)

§ 2.6 Элементы описания книги (description). Элементы третьего уровня (информация об авторе) Элемент first-nameИмя автора книги или документа, а также переводчика.Cинтаксис: текст Используется в элементах: author, translatorВложенные элементы: нетКоличество вхождений:

§ 2.8 Элементы раздела книги (section). Элементы первого уровня.

§ 2.8 Элементы раздела книги (section). Элементы первого уровня. Элемент citeЦитата. Отрывок текста из другого произведения.В FictionBook с помощью тэга cite также выделяются письма, записки, надписи, списки и еще много чего.Cинтаксис: content Используется в элементах: section,

§ 2.9 Элементы раздела книги (section). Элементы второго уровня.

§ 2.9 Элементы раздела книги (section). Элементы второго уровня. Элемент stanzaСтрофа стихотворения.Cинтаксис: stanza>content Используется в элементах: poemВложенные элементы: title, subtitle, vКоличество вхождений: одно и болееАтрибуты: нетВерсия формата: 2.0Пример: см. пример

1.6.5. Правило простоты: необходимо проектировать простые программы и «добавлять сложность» только там, где это необходимо

1.6.5. Правило простоты: необходимо проектировать простые программы и «добавлять сложность» только там, где это необходимо Многие факторы приводят к усложнению программ (а следовательно, делают их более дорогими и более уязвимыми относительно ошибок). Программисты — это

89. Корректно пишите функциональные объекты

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

Конкурсы и викторины: «Приведи друга!»

Конкурсы и викторины: «Приведи друга!» На увеличение числа друзей неплохо работают викторины и конкурсы. Кроме того, они положительно влияют и на работу со своей аудиторией на Facebook. Но не забывайте, что конкурсы – «сезонная» вещь, они не могут давать гарантированный поток

4.3.4. Преобрaзовaние событий и задач друг в друга

4.3.4. Преобрaзовaние событий и задач друг в друга Чтобы преобразовать событие в задачу, принятую к исполнению, необходимо событие из календарной ячейки перетащить мышью на панель задач. Событие останется в плане, но теперь вы будете иметь ассоциированную с ним задачу. Для

BitCoin для чайников: три друга, конфета и монета (и ещё: почему не важен обменный курс?) Евгений Золотов

BitCoin для чайников: три друга, конфета и монета (и ещё: почему не важен обменный курс?) Евгений Золотов Опубликовано 06 марта 2013 Виртуальная валюта BitCoin страдает от забавного парадокса. Пока она берёт крепость за крепостью, вторгаясь во всё новые технологические сферы и

Сколько стартапу вкладывать в брендинг? Исследование цен брендинговых агентств Кирилл Халюта, генеральный директор брендинговая компания «Freedomart»

Сколько стартапу вкладывать в брендинг? Исследование цен брендинговых агентств Кирилл Халюта, генеральный директор брендинговая компания «Freedomart» Опубликовано 13 мая 2013 В нескольких предыдущих своих публикациях я попытался рассказать стартапам

Как вставить ссылку на сайт

Как вставить ссылку на сайт

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

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

Как создать ссылку.

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

Атрибут href определяет адрес документа, на который перейдет пользователь, кликнув по ссылке. Текст ссылки по умолчанию будет синего цвета и подчеркнут.

Пример создания ссылок

В примере создаются 2 ссылки с разными текстами. При щелчке по тексту «Песики» в окне браузера откроется документ pesiki.html, а при щелчке на «Киски» — файл kiski.html.

Вид ссылок на странице

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

Так, при щелчке по ссылке в браузере Safari откроется окно с предупреждением.

Результат при открытии битой ссылки

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

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

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

Абсолютные и относительные ссылки

У ссылок могут быть заданы как абсолютные, так и относительные адреса. Абсолютные адреса это такие адреса, которые начинаются с (http://), например http://google.com. Относительные адреса — это адреса, которые указываются относительно текущего документа, например (images/pic1.jpg).

Пример использование абсолютных ссылок.

В примере ссылка вида Изучение HTML с нуля будет абсолютной и соответственно будет вести на главную страницу сайта webdiz.com.ua

Как правило абсолютные ссылки используются для обращения к файлам на другом сайте. Для обращения к файлам на своем сайте надо использовать относительные ссылки.

Ссылки относительно текущего документа

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

1. Файлы располагаются в одной папке.

Необходимо сделать ссылку из исходного документа на ссылаемый. В таком случае код будет следующий.

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

2. Файлы размещаются в разных папках.

Когда исходный документ хранится в одной папке, а ссылаемый в корне сайта, то перед именем файла в адресе ссылки следует поставить две точки и слэш (/), как показано ниже.

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

3. Файлы размещаются в разных папках.

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

Аналогично обстоит дело с любым числом вложенных папок.

4. Файлы размещаются в разных папках.

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

Заметьте, что никаких дополнительных точек и слэшей перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так.

Ссылки относительно корня сайта

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

Учтите, что такая форма записи не работает на локальном компьютере, а только под управлением веб-сервера.

Виды ссылок

Любая ссылка на веб-странице может находиться в одном из следующих состояний.

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

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

Посещенная ссылка. Как только пользователь открывает документ, на который указывает ссылка, она помечается как посещенная и меняет свой цвет на фиолетовый, установленный по умолчанию.

Правила вложений для тега

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

располагается внутри контейнера . Поскольку

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

HTML :: Вставка на страницу объектов при помощи тега

Использование тега

Атрибуты тега

Перечислим имеющиеся атрибуты элемента ’embed’:

  • src – указывает абсолютный или относительный путь к подключаемому файлу,
  • type – указывает MIME -тип подключаемого объекта,
  • width – задает ширину области просмотра,
  • height – задает высоту области просмотра.

Как видим стандартных атрибутов немного, однако для воспроизведения мультимедийных объектов, добавленных при помощи элемента ’embed’ , браузер попытается воспользоваться одним из установленных плагинов. В результате кроме официальных атрибутов элемента станут доступны и дополнительные атрибуты, которые будут работать под конкретный подключаемый плагин. Так в нашем примере №1 указан атрибут type=»application/x-shockwave-flash» , поэтому браузер сразу же попытается воспользоваться плагином флеш-плейера. Если плагин окажется доступным, браузер распознает использованные нами дополнительные атрибуты play и loop , поскольку они идут в комплекте с Adobe Flash Player . Кроме того, мы всегда сможем воспользоваться и другими дополнительными атрибутами, полный список и описание которых можно посмотреть на официальном сайте плагина здесь.

Пример №1. Использование элемента ’embed’

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

Простые правила разметки

Введение

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

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

Используйте HTML-тэги по смыслу #

Элементы для основной раскладки

  • header — шапка страницы или блока.
  • footer — подвал страницы или блока.
  • main — главная смысловая часть страницы.
  • section — разделы внутри основного контента.
  • article — отдельная статья, пост или комментарий.
  • nav — навигация, ссылки для перемещения по сайту.
  • aside — боковая колонка, дополнительный контент не входящий в main .

Элементы для содержимого

  • h1-h6 — заголовки. Обычно h1 — это название сайта. Заголовки нужно использовать в порядке иерархии, это важно для доступности.
  • ul и ol — списки, в них удобно размещать любые перечисляемые элементы.
  • button — кнопка, например, элемент управления или кнопка для отправки формы.

Для элементов без особой смысловой нагрузки можно использовать div или span .

Для разметки страницы нельзя использовать теги, предназначенные для оформления текста: например, b и i . У них есть собственные стили, которые со временем может понадобиться переопределить или сбросить — проще сразу выбрать элемент, у которого нет стилей по умолчанию. Тег p уместно использовать для блоков текста, но для других случаев лучше выбрать div .

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

Не знаете с какой стороны взяться за дело? Начните со статьи Первые шаги.

Используйте БЭМ для именования классов #

Подробно и с примерами читайте в статье Как писать классы по БЭМ?

Используйте в названиях классов простые и короткие слова #

Вот здесь приведены примеры таких слов для разных случаев.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL
26.07.2007, 19:16 #4