…Although the syntax of HTML is relatively simple to learn,…there"s, still a lot of elements, attributes and…other concepts that you"re going to need to learn and keep track of.…While this course is intended to introduce you to the essentials of HTML, it"s…really not designed to teach you every single element and attribute available.…So with that in mind, I want to give you a couple of online HTML resources,…that can really help you as you begin learning HTML, and…can serve as valuable references later on, as you"re authoring your own pages.…Now we"re going to start, at the specifications themselves.…

And this is something, two documents that you should definitely have bookmarked.…So, this is the W3Cs version of HTML5.…You can see they have a latest Publisher Version.…You can go see the Editor"s Draft,…if you want to see what"s coming down, down the pipe.…And, this is pretty large.…If I scroll down, you can see that here"s just the Table of Contents.…And I"m not even going to scroll through all of them.…

Resume Transcript Auto-Scroll

Updated

3/30/2017

Released

3/16/2015

HTML is the programming language that powers the web. And like any language, once you master it, you can begin to create your own content, whether that"s simple websites or complex web applications. This course provides an in-depth look at the essentials: the syntax of HTML and best practices for writing and editing your code. Senior staff author James Williamson reviews the structure of a typical HTML document, and shows how to section pages and format your content with HTML. Plus, learn how to create links and lists, and find out how HTML works with CSS and JavaScript to create rich, engaging user experiences. So open a text editor, watch these videos, and begin learning to author HTML the right way.

Topics include:

• Why is HTML important?
• Exploring an HTML document
• Formatting content
• Displaying images
• Using nav, article, and div elements
• Linking to pages and downloadable content
• Creating lists
• Controlling styling (fonts, colors, and more)
• Writing basic scripts

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

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

Но нам этого и не нужно, ибо достаточно понимать структуру URL в ее прикладном применении.

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

Урл адреса — что это и как они влияют на индексацию сайта

Итак, давайте посмотрим что такое URL, зачем он нужен и из каких частей состоит. Как вы знаете, поисковые системы производят ни как единого целого, а как совокупность отдельных страниц. Они потом будут по различным поисковым запросам (читайте подробнее о подборе ключевых слов в Вордстате на основе .

URL и URI

Ну так вот, любой документ (вебстраница) в сети интернет имеет свой уникальный адрес URL , который расшифровывается как Uniform Resource Locator (определитель местонахождения ресурса). Он, равно как и протокол HTTP, а еще и как , был разработан и создан одним и тем же человеком — Тимом Бернерсом-Ли (отцом основателем проекта ).

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

URL адрес — это способ однозначно указать на что-то в интернете. Он используется не только для работы с сайтами () по протоколу http (еще и по ftp), но нас, конечно же, будет интересовать именно применение этого идентификатора к Web (протоколы http и https). Урл в этом случае будет выглядеть примерно так (чуть ниже я приведу общую блок-схему его построения, но пока хотелось бы начать с простого частого примера):

Https://.html

В этом примере адреса часть с «http» обозначает протокол передачи данных или же, если следовать терминологии спецификации, схему (ибо тот же не является протоколом передачи данных, в отличии от http или ftp, но тоже используется в Урл адресах)..сайт») — или же .

WWW и другие зеркала сайта, которые нужно склеить

В Web-е есть специфика обозначения доменного имени в URL адресе сайта, которое может быть с WWW или без WWW. Для того, чтобы успешно можно было , очень важно склеить эти два зеркала вашего сайта . Зачастую, склейку зеркал за вас может выполнить хостер, но это обязательно нужно будет проверить.

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

Тоже справедливо и при переезде сайта на защищенный протокол https с http — для поисковиков это будет уже другой сайт.

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

Е. «без атавизма», и если вы добавите к любому моему Урлу эту чудо-приставку, то произойдет автоматическое перенаправление на адрес «без WWW».

Https://www..html

Склеить можно не только описанные выше зеркала, но и любые другие доменные имена, принадлежащие вам. Например, если возможно различное написание латинскими буквами какого-либо известного бренда, то покупаются все возможные домены (варианты написания с ошибками, в разных доменных зонах и т.п.) и склеиваются между собой. Тогда, при обращении к сайту по любому из возможных URL адресов, будет открываться главное зеркало.

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

Откуда берутся лишние URL-адреса (дубли страниц) вашего сайта в индексе поисковиков

Но вернемся к нашим баранам. Та часть URL, которая расположена за третьим слешем (/) — в нашем примере это «papka/fail.html» — называется путем до конкретного объекта (документа или файла). В нашем случае это документ «fail.html», который лежит в каталоге «papka», который в свою очередь лежит в корневой папке (корень в Урле всегда соответствует третьему слешу слева).

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

Https://www..html?print=yes

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

К одному и тому же Урлу может добавляться вашей Cms сколько угодно много различных Get параметров и все это будет проиндексировано Яндексом и Гуглом, если вы не создадите соответствующие запреты в файле robots.txt, ссылка на статью про который приведена чуть выше. В противном случае поисковики вас могут за большое количество дублированного контента (одного и того же содержимого, доступного по разным адресам).

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

Https://сайт https://сайт/index.php

(даже по трем — еще и https://сайт/) и в любом случае откроется главная страница. Это довольно плохо, т.к. поисковики найдут у меня три разных страницы (имеющих с их точки зрения разные URL адреса), но с одинаковым содержанием, что им, ох как не нравится.

Поэтому у меня сделано так, что при вводе любого из приведенных чуть выше Урлов будет выполнено перенаправление на URL вида «https://сайт/». Делается это, как правило, с помощью 301 редиректа в файле.htaccess, либо напрямую в настройках сервера вами самими, либо вашим хостером.

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

Структура Урл адреса и перекодировка в URL-encoded

Вообще, полную блок-схему URL адреса можно представить так:

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

Http://login:pass@сайт/platniy-dostup.html

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

Ftp://login:pass@сайт:6789/samoe-nujnoe/cimus

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

Урл адреса в виде хеш-ссылок, открывающие страницу в нужном месте

Но кроме всех этих вещей, которые могут входить в состав URL, на приведенной чуть выше блок-схеме вы можете видеть так называемый якорь , который добавляется в самом конце после разделяющего символа решетки «#» (Урлы, содержащие якоря, обычно называют хеш ссылками ).

Якоря заранее проставляются внутри Html кода документа (страницы) с помощью добавление атрибута ID="метка" в нужный Html тег (абзаца, заголовка или другой подходящий), а затем, добавив название этого якоря к URL адресу страницы через символ решетки «#», вы сможете перейти не на начало этой вебстраницы, а сразу к тому месту, где был проставлен якорь (все автоматически прокрутят страницу до нужного места).

Про , и в том числе про организацию навигации на странице с помощью , читайте в этих статьях.

Какие символы можно использовать в URL адресах?

Еще стоит сказать о различных кодировках, которые используются в URL адресах. Без перекодирования в них можно использовать только ограниченное количество символов. Обычно советуют ограничиться набором из символов: ,,,[_],[-].

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

Использование каких-либо других символов (включая русские) в урлах допустимо, но при этом будет происходить перекодировка этих самых символов (URL Encoding).

Что опечаливает, так это неудобоваримый вид URL адресов с символами, например, кириллицы, которые получаются после перекодировки. Каждый символ кириллицы кодируется с помощью двух байт в , записанных в шестнадцатеричном виде и разделенных знаком процента «%». Например, такой Урл:

Https://сайт/кто на новенького/

после перекодировки станет таким:

Http//сайт/%BA%D1%82%D0%BE%20%D0%BD%D0% B0%20%D0%BD%D0%BE%D0%B2%D0%B5%D0%BD%D1%8C%D0%BA%D0 %BE%D0%B3%D0%BE

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

В связи со всем вышесказанным я бы советовал при на своих CMS не делать адреса страниц на русском , а , тем более, что по мнению многих продвиженцев так будет лучше в плане Seo оптимизации под Яндекс и Google.ru.

Относительные и абсолютные ссылки на сайте

Давайте начнем с абсолютных ссылок , т.к. в этом случае ничего особенного, сверх того, что мы уже обсудили в данной статье, говорить и не придется. Т.о. абсолютная ссылка должна соответствовать тем требованиям, которые мы предъявляем к URL адресу — должен указываться протокол передачи данных, доменное имя сайта (хоста) и путь до нужного web документа. Все.

В Html абсолютная ссылка формируется с помощью специальных тегов A (гиперссылки), т.е. для ее проставления мы просто должны будем окружить открывающим и закрывающим тегами гиперссылки нужное место в тексте документа (фразу или картинку) и прописать в открывающем теге A в атрибуте «Href» абсолютный путь до того документа, на который должен будет попасть посетитель при переходе по ней:

ПхпМайАдмин

Все очень просто.

Чем хороши относительные ссылки и как их можно получить

Однако, абсолютные гиперссылки обычно используют только в тех случаях, когда хотят сослаться на внешние сайты, а для внутренних переходов большинство вебмастеров (умных и прозорливых, не таких как я 🙂) стараются использовать относительные ссылки . И это есть несколько причин:

1. Относительные ссылки по определению более короткие и не загромождают, не утяжеляют код сайта (ведь в этом деле важна любая мелочь).
2. Кроме того, при переезде на другой домен или при смене протокола на https вам не придется менять все ссылки на сайте.
3. К тому же, некоторые конструкции интернет проекта можно будет очень быстро и безболезненно перенести на другой ресурс, не изменяя при этом внутренние относительные ссылки.

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

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

Самый простой и короткий вариант записи относительного пути (имеется в виду значения атрибута Href тега гиперссылки) получится в том случае, когда оба web документа: донор (с которого она проставляется) и акцептор (файл или web документ, на который она ведет), находятся в одной папке на сервере.

анкор

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

Как в этом случае будет выглядеть относительная ссылка? Все тоже довольно просто:

анкор

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

Теперь давайте рассмотрим противоположную ситуацию, когда внутри папки лежит сам документ донор, с которого нужно проставить относительную ссылку на документ или файл акцептор, который уже лежит на уровень выше:

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

Что такое URL адреса

Если вам понадобится подняться на два уровня вверх, то запись будет иметь вид:

Что такое Урл

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

Сложная конструкция пути

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

Создание ссылки относительно корневой папки

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

Т.о. переход на главную страницу будет выглядеть довольно просто, но экстравагантно:

анкор

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

анкор

А относительный до того же самого файла будет уже несколько короче:

Текст

Как сослаться на папку в относительном и абсолютном виде

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

анкор

А не такую:

текст

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

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

Обязательно , если обнаружите.

Кстати, обращение к главной странице сайта тоже по своей сути есть обращение к папке (корневой), и при этом будет запущен индексный файл лежащий в корне (в моем случае это index.php). Так вот, если вы обращаетесь к папке, то для снижения нагрузки на сервер лучше прописывать после доменного имени прямой слеш:

Вот оно чё, Михалыч!

Удачи вам! До скорых встреч на страницах блога сайт

Вам может быть интересно

Кодировка текста ASCII (Windows 1251, CP866, KOI8-R) и Юникод (UTF 8, 16, 32) - как исправить проблему с кракозябрами
Как я увеличил посещаемость на сайте до 300 человек в день?
Поиск Яндекса по сайту и интернет-магазину
Карта сайта Sitemap в формате xml для Яндекса и Google - как создать сайтмап в Joomla и WordPress или в онлайн генераторе

к.э.н. Лавлинский Н. Е., технический директор ООО «Метод Лаб»

Недавно опубликован новый стандарт на технологию Preload (ссылка). Основной задачей этой спецификации было обеспечить возможность тонкого управления логикой загрузки ресурсов страницы разработчиком.

Предыдущие стандарты

Идея об управлении загрузкой не нова. Ранее были разработаны несколько вариантов тегов link с атрибутами subresource , prerender и prefetch . Однако, они работали несколько иначе: с их помощью можно загружать элементы страниц или целые страницы, которые могут потребоваться при дальнейшей навигации по сайту. То есть, браузер отправлял такие запросы с низким приоритетом и в последнюю очередь. Если же нужно повысить приоритет, то решений не было.

Загрузка ресурсов с preload

Что же даёт новая спецификация? Во-первых, теперь загрузка происходит с уточнением, что загружается. Исходя из указанного типа ресурса браузером выставляется приоритет загрузки. Например:

link rel = "preload" href = "/js/script.js" as= "script" >
link rel = "preload" href = "/fonts/1.woff2" as= "font" type = "font/woff2" crossorigin>

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

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

Ускоренная загрузка шрифтов

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

Если мы укажем preload этого шрифта в коде HTML-страницы, браузер отправит запрос сразу же после разбора HTML-документа, что может быть на несколько секунд раньше, чем в обычном случае. А мы знаем, что подключаемые шрифты являются блокирующими элементами и задерживают отрисовку шрифта на странице, поэтому загрузить их нужно как можно быстрее. Особенно остро эта проблема стоит при использовании HTTP/2, когда браузер отправляет сразу множество запросов к серверу, в результате чего какие-нибудь картинки могут заполнить полосу клиента и загрузка важных ресурсов будет отложена.

Асинхронная загрузка CSS

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

Делается это следующим образом:

link rel = "preload" as= "style" href = "async_style.css" onload = "this.rel="stylesheet"" >

Загрузка JS-кода без исполнения

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

Это можно сделать с помощью следующего кода:

link rel = "preload" as= "script" href = "async_script.js" onload = "var script = document.createElement("script"); script.src = this.href; document.body.appendChild(script);" >

Мы рассмотрели основные способы использования механизма preload, но возможности на этом не ограничиваются, проводите собственные эксперименты!

Удаление вирусов