По вашему запросу ничего не найдено :(
Убедитесь, что запрос написан правильно, или посмотрите другие
наши статьи:
Основой любого сайта является HTML. Это первое, что видят люди. Без него сайта бы не существовало.
Поэтому так важно придерживаться правильных методов написания кода. Если этого не делать, то посетители вашего сайта получат плохой пользовательский опыт.
В HTML всегда есть, чему поучиться. Причем не важно, новичок вы в программировании или опытный специалист.
В данной статье мы поговорим о лучших практиках HTML. Давайте начнем.
Лучшие практики HTML – это набор правил, помогающих создавать сайты, одинаково удобные для чтения и сопровождения.
При создании сайта на HTML необходимо придерживаться следующих принципов:
Используйте только один элемент <h1> для страницы
В HTML доступно 6 различных тегов заголовков – от <h1> до <h6>. Тегом <h1> отмечается основной заголовок (название веб-страницы), а тег <h6> используется для наименее важного заголовка.
Тег <h1> крупнее <h2>, <h2> крупнее <h3> и так до тега <h6>. Размер каждого заголовка уменьшается по степени его важности.
Очень важно не добавлять более одного элемента <h1> на странице.
Не делайте так:
<main>
<div>
<h1>Писать код – это весело?</h1>
<p>Чем больше вы пишете, тем опытнее становитесь</p>
</div>
<div>
<h1>Писать код – это весело</h1>
<p>Лучше писать код с удовольствием</p>
</div>
</main>
В примере выше мы используем тег <h1> в первом и втором блоке <div>. Такой код, конечно же, заработает, но это не самый правильный вариант оформления.
Лучше вот так:
<main>
<div>
<h1>Писать код – это весело?</h1>
<p>Чем больше вы пишете, тем опытнее становитесь</p>
</div>
<div>
<h2>Писать код – это весело</h2>
<p>Лучше писать код с удовольствием</p>
</div>
</main>
Кроме того, наличие одного элемента <h1> на странице – крайне важно для поисковой оптимизации (SEO). Через этот тег поисковики понимают, что находится на странице (главная мысль страницы).
Не забывайте про иерархию заголовков в HTML
Когда вы пользуетесь тегами заголовков, важно следовать установленной иерархии: после <h1> идет <h2>, за <h3> следует <h4> и т.д...
Не перескакивайте от <h1> к <h3>. Некоторые посетители сайта используют средства чтения с экрана. И таким пользователям бывает трудно понять содержимое вашей страницы при нарушенной иерархии элементов.
Средства чтения с экрана – это одна из специальных возможностей, помогающая людям получать доступ к цифровому содержимому (сайтам или приложениям) и взаимодействовать с ним через звуки и касания. Основные пользователи данной технологии – слабовидящие или незрячие люди.
Не делайте так:
<h1>Писать код – это весело</h1>
<h3>Лучше писать код с удовольствием</h3>
<h5>Постоянство – это ключ</h5>
Лучше вот так:
<h1>Писать код – это весело?</h1>
<h2>Чем больше вы пишете, тем опытнее становитесь</h2>
<h3>Писать код – это весело</h3>
Добавляйте подписи к изображениям через элемент figure
Добавлять подписи к изображениям рекомендуется через элемент <figure>. А чтобы все заработало, нужно прописать не только <figure>, но и <figcaption>.
Не делайте так:
<div>
<img src=“a-man-coding.jpg” alt=“Мужчина за компьютером”>
<p>Это изображение мужчины, который работает за компьютером</p>
</div>
С точки зрения кода, пример выше написан хорошо. Но лучше сделать все иначе. Если изображение не загрузилось, отображается содержимое alt, и на экране показывается текст из элемента <p>. Но посетитель, использующий средства чтения с экрана, не сможет отличить тексты в <p> и alt.
Помните: даже если ваш код работает, это еще не значит, что вы делаете все правильно.
Лучше сделать вот так:
<figure>
<img src=“a-man-coding.jpg” alt=“ Мужчина за компьютером”>
<figcaption>Это изображение мужчины, который работает за компьютером</figcaption>
</figure>
Пример выше – отличный способ, как можно добавить подписи к изображениям.
Почему важно добавлять подписи к изображениям именно так:
Поисковая оптимизация. Ваши изображения легче найти в поисковых системах.
Посетителям, использующим средства чтения с экрана, проще понять содержимое вашей страницы.
Не используйте div для шапки и подвала; для этого подходят семантические элементы
Семантические элементы HTML используются для логической разметки структуры документа на странице. Кроме того, они нужны для правильной сборки страницы.
Откажитесь от <div> в пользу семантики. Не используйте <div> для обозначения шапки и подвала страницы. Для этих целей есть семантические элементы <header> и <footer>.
Элемент <header> показывает навигацию или вводную часть страницы.
В элементе <footer> размещается информация об авторских правах или ссылки для перехода на страницы.
Не делайте так:
<div class="header">
<a href="index.html">Главная</a>
<a href="#">О нас</a>
<a href="#">Контакты</a>
</div>
<div class="footer">
<a href="index.html">Главная</a>
<a href="#">О нас</a>
<a href="#">Контакты</a>
</div>
В примере выше тег <div> используется в качестве контейнера для <header> и <footer>. Такой код будет работать, но это не самый правильный способ реализации.
Лучше вот так:
<header>
<h1></h1>
</header>
<footer>
<a href="index.html">Главная</a>
<a href="#">О нас</a>
<a href="#">Контакты</a>
</footer>
Лучше всего добавлять <footer> и <header> на страницу именно так.
Почему важно добавлять <footer> и <header> с помощью семантических элементов HTML:
Использование семантических элементов для шапки и подвалаупрощает чтение кода.
Такой способ предлагает более качественный пользовательский опыт. Посетителям, использующим средства чтения с экрана, будет проще понять содержимое страницы.
Не используйте <b> и <i> для выделения текста на странице
Теги <b> и <i> выделяют текст жирным шрифтом (b) или курсивом (i). Но не стоит ими пользоваться на сайте, поскольку оба тега не несут семантической нагрузки. Для выделения текста лучше подходит свойство CSS font-weight, либо теги <strong> и <em>.
Тегом <strong> отмечают важный текст на странице. Он выделяет текст или делает его жирным. Тег <em> подчеркивает текст или добавляет курсив (точно также, как <i>).
Не делайте так:
<p><i>Пишите код в своем собственном темпе</i><p>
<p><b>пишите код в своем собственном темпе </b><p>
В этом примере текст выделяется жирным и курсивом. Но пользователи со средствами для чтения с экрана не заметят разницы. Данные теги не несут семантического значения.
Спецификация HTML 5 рекомендует нам использовать теги <b> и <i> только в самых крайних случаях и при отсутствие альтернативных вариантов.
Лучше делайте так:
<p><strong>Пишите код в своем собственном темпе</strong><p>
<p><em>пишите код в своем собственном темпе</em><p>
Не используйте блочные элементы внутри строчных
Блочные элементы начинают новую строку на странице. По умолчанию действие этих элементов распространяется на всю строку – от ее начала до конца. Вы не сможете добавить строчные элементы внутри блочных без CSS.
К блочным элементам относятся <p>, <h1> – <h6> и <div>.
Строчные элементы действуют на небольшую часть страницы. Они не начинаются с новой строки.
К строчным элементам относятся <span>, <em> и <a>.
Вы не можете добавить блочные элементы внутри строчных.
Не делайте так:
<a href="#" >
<p>Посетите merion</p>
</a>
У вас не получится добавить <p> внутрь элемента <a>, поскольку <p> относится к блочным элементам, а <a> – к строчным.
Лучше сделать так:
<p>
Посетите <a href="wiki.merionet.ru" target="_blank">Merion</a>
для изучения IT
</p>
Это отличный пример того, как можно вложить строчные элементы внутри блочных.
Важно помнить, что:
Блочный элемент нельзя вложить внутри строчного.
Строчный элемент можно вложить внутри блочного.
Строчный и блочный элемент можно вложить внутри блочного.
Небольшое уточнение: «вложить» что-то в данном случае означает «добавить внутрь». Так что, говоря «это нельзя вложить», я имею ввиду, что вы не сможете добавить один такой элемент внутрь другого.
Надеюсь, вы запомнили 3 простых правила для вложения элементов.
Кроме того, CSS позволяет преобразовать блочные элементы в строчные. Для этого используется display: inline-block и display: inline.
А еще важно помнить простую истину: даже если ваш код работает, это еще не значит, что вы делаете все правильно.
Именно поэтому я всегда рекомендую пользоваться валидатором разметки W3C и дополнительно проверять свой код.
Этот валидатор отслеживает правильность разметки веб-документов в HTML, XHTML, SMIL, MathML и т.д.
Для проверки кода можно скопить его URL и добавить на сайт, либо загрузить сам файл HTML.
Заключение
Надеемся, что данная статья помогла вам узнать что-то новое о лучших практиках в HTML. Мы постарались включить в нее самые полезные советы, которыми можно начинать пользоваться уже сегодня.
Файл hosts в Windows, Mac или Linux сопоставляет имена хостов с IP-адресами. Редактирование файла hosts может быть полезно, если вы запускаете тесты в своей сети. Сопоставляя IP-адрес с именем сервера (или именем домена), вы можете пропустить процесс, в котором веб-браузер использует поиск сервера доменных имен (DNS) для преобразования имени домена в IP-адрес.
Из этого руководства вы узнаете, как редактировать файл hosts в Linux, Windows или Mac.
Как редактировать файл Hosts в Linux
Шаг 1: Откройте окно терминала (командная строка)
В большинстве дистрибутивов Linux терминал можно найти по пути Приложения -> Утилиты -> Терминал, или можно щелкнуть правой кнопкой мыши на рабочем столе и выбрать "Open Terminal" (Открыть терминал).
Шаг 2: Откройте файл Hosts
Чтобы открыть файл hosts в Linux, введите команду:
sudo vim /etc/hosts
Система должна запросить ваш пароль - введите его, и файл hosts должен открыться.
Шаг 3: Изменить файл
Файл hosts в Linux отформатирован таким образом, чтобы IP-адрес был первым, а имя сервера - вторым.
0.0.0.0 server.domain.com
Добавьте любые записи, которые вы хотите в конец файла. Если вы допустили ошибку или хотите, чтобы ваша операционная система проигнорировала строку, добавьте знак # в начале этой строки.
Сохраните изменеия и выходите из редактора (:wq в vim).
Шаг 4 (опциональный): Name Service
Файл hosts обходит стандартный поиск сервера доменных имен. В Linux есть еще один файл, который сообщает операционной системе, в каком порядке искать трансляции IP-адресов. Это файл nsswitch.conf. Если он настроен на просмотр DNS в первую очередь, он пропустит файл hosts и сразу перейдет к поиску DNS.
Чтобы проверить конфигурацию, введите в окне терминала:
cat /etc/nsswitch.conf
Примерно на середине должна быть запись с надписью hosts. Убедитесь, что в правом столбце в первую очередь будет слово files. Если по какой-то причине DNS указан первым, откройте файл nsswitch.conf в текстовом редакторе:
sudo vim /etc/nsswitch.conf
Для параметра hosts: измените запись так, чтобы files находились в начале записи, а dns - в конце.
Как отредактировать файл Hosts в Windows
Шаг 1: Откройте Блокнот как Администратор
Для этой операции вам потребуются права администратора.
Нажмите Пуск или кнопку Windows и введите Блокнот. Функция поиска найдет приложение «Блокнот».
Щелкните правой кнопкой мыши на приложении «Блокнот» и выберите «Запуск от имени администратора».
Должно появиться окно контроля учетных записей Windows с вопросом «Хотите ли вы, чтобы это приложение могло вносить изменения в ваше устройство?» Нажмите Да.
Шаг 2: Откройте файл Windows Hosts
В блокноте нажмите Файл -> Открыть
Перейдите к C:windowssystem32driversetc
В правом нижнем углу, чуть выше кнопки Открыть, щелкните раскрывающееся меню, чтобы изменить тип файла на Все файлы.
Выберите hosts и нажмите Открыть.
Шаг 3: Отредактируйте файл
Файл hosts дает вам краткое объяснение того, как написать новую строку. Вот краткая разбивка:
0.0.0.0 server.domain.com
Первый набор из четырех цифр - это IP-адрес, который вы мапите. Это может быть внутренний IP-адрес сервера в сети или IP-адрес веб-сайта.
Вторая часть - это имя, которое вы хотите ввести в браузере для доступа к серверу по IP-адресу, который вы только что указали.
Когда вы закончите вносить изменения, сохраните файл (Файл -> Сохранить) и выйдите.
Вы можете указать Windows игнорировать любую строку, поставив знак # в начале этой строки.
# 0.0.0.0 server.domain.com
Как редактировать файл Hosts на Mac
Шаг 1: Откройте терминал Mac
Откройте Finder и перейдите в Приложения -> Утилиты -> Терминал и введите следующее:
sudo nano /private/etc/hosts
Система должна попросить вас ввести пароль - это тот же пароль, который вы используете для входа в систему. Введите его и нажмите Enter.
Шаг 2. Редактирование файла Hosts
Тут IP-адрес идет первым, а имя сервера - вторым. Комментарии отмечены знаком #. Рассмотрим пример ниже:
0.0.0.0 server.domain.com
Сначала введите IP-адрес, на который вы хотите сослаться, пробел, а затем имя сервера (или доменное имя), которое вы хотите связать с ним.
Сохраните изменения, нажав Command + O, затем выйдите, нажав Command + X.
Настройка OSPF (Open Shortest Path First) довольна проста и чем-то похожа на протоколы маршрутизации RIP и EIGRP, то есть состоит из двух основных шагов:
включения протокола глобальной командой router ospf PROCESS_NUMBER;
выбора сетей, которые протокол будет «вещать», для чего используется команда(ы) network 255.255.255.255 0.0.0.255 AREA_NUMBER;
Как сразу заметно, в OSPF появляется указание «зоны» - area. Первая команда включения говорит сама за себя, но поясним про PROCESS_NUMBER и AREA_NUMBER – это номер процесса и номер зоны соответственно. Для установления соседства номер процесса OSPF не должен быть одинаковым, но обязательно должен совпадать номер зоны. Интерфейсы и сети указываем через обратную маску.
Видео: протокол OSPF (Open Shortest Path First) за 8 минут
Пример настройки OSPF
В нашей топологии у маршрутизаторов R1 и R2 есть напрямую подключенные подсети.
Нам нужно включить данные подсети в процесс динамической маршрутизации OSPF. Для этого нам сначала нужно включить OSPF на обоих маршрутизаторах и затем «вещать» данные сети с помощью команды network. На маршрутизаторах переходим в глобальный режим конфигурации и вводим следующие команды, в соответствии с нашей схемой:
router ospf 1
network 10.0.1.0 0.0.0.255 area 0
network 172.16.0.0 0.0.255.255 area 0
router ospf 1
network 192.168.0.0 0.0.0.255 area 0
network 172.16.0.0 0.0.255.255 area 0
Далее нам нужно проверить, заработала ли динамическая маршрутизация, и для этого используем команды show ip ospf neighbors и show ip route
Вот и все – также просто, как и настроить RIP: главное не забывать указывать одинаковый номер автономной системы. Первая команда должна показать «соседа» - на обоих маршрутизаторах убедитесь, что там указан адрес другого маршрутизатора в выводе данной команды. Вторая команда выведет таблицу маршрутизации, и, маршруты, получаемые по OSPF, будут отмечены буквой O.
Второй сценарий настройки OSPF
По первому примеру видно, что настройка OSPF довольна проста. Однако, этот протокол маршрутизации имеет довольно много разнообразных фич, которые сильно усложняют процесс настройки, но и делают OSPF очень гибким протоколом. В нашем примере мы настроим мультизонный (multiarea) OSPF с некоторыми дополнительными функциями.
В нашем примере у нас есть две зоны OSPF, area 0 и area 1. Как видно на схеме, маршрутизаторы R1 и R2 находятся в зоне 0, и R2 и R3 в зоне 1. Так как R2 соединяет две зоны, он становится ABR – Area Border Router (граничным маршрутизатором). Нашей задачей является вещание подсетей, напрямую подключенных к R1 и R3. Для этого, на R1 введем следующую команду:
router ospf 1
network 10.0.1.0 0.0.0.255 area 0
network 172.16.0.0 0.0.255.255 area 0
router-id 1.1.1.1
Мы вручную указали идентификатор маршрутизатора, и теперь процесс OSPF будет использовать данный RID при общении с другими OSPF соседями.
Так как R1 подключен только к R2, нам необходимо установить соседство с R2 и вещать напрямую подключенные сети через OSPF. Настройки на R3 выглядят такими же, как на R1, но с другим номером зоны.
router ospf 1
network 192.168.0.0 0.0.0.255 area 1
network 90.10.0.0 0.0.0.255 area 1
router-id 3.3.3.3
Теперь перейдем к настройке R2 – так как он является граничным маршрутизатором, необходимо установить соседство и с R1 и с R3. Для этого, нам необходимо настроить отдельное соседство для каждой зоны – 0 для R1 и 1 для R2.
router ospf 1
network 172.16.0.0 0.0.255.255 area 0
network 192.168.0.0 0.0.0.255 area 1
router-id 2.2.2.2
Для проверки используем команды show ip ospf neighbor и show ip route ospf на маршрутизаторах R1 и R3. Буквы IA означают, что данные маршруты находятся в разных зонах.
Так как R1 и R3 находятся в разных зонах, между ними никогда будет соседства.