8 полезных советов HTML для начинающих

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

 

1. Всегда закрывайте свои HTML теги

Каждый раз, когда вы открываете новый HTML тег <b><p>, всегда сразу прописывайте его закрывающего собрата.
Например:

  • <b>Надо стараться все делать хорошо: плохо оно само получится.</b>
  • <p>Надо стараться все делать хорошо: плохо оно само получится.</p>
  • <h2>Надо стараться все делать хорошо: плохо оно само получится.</h2>

Таким образом вы будете уверены, что страница отобразится правильно, во всех браузерах, и избежите возможных проблем при отладке. Это замечание особенно важно для таких тегов как <div><span><table><tr> и <td>.

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

Например:

  • Тег <br> используется для переноса линии
  • Тег <img> используется для вставки изображения

При использовании разметки XHTML вам придется закрывать и эти теги. Делать это очень просто, достаточно поставить / перед закрывающей скобой > — к примеру, <br/> и <img … />.

Современные редакторы кода помогут вам закрывать теги в автоматическом режиме.

 

2. Стилизуйте HTML с помощью внешних файлов CSS где это возможно

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

 

3. Используйте HTML валидатор

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

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

Можете воспользоваться бесплатными валидаторами доступными онлайн — W3C Markup Validation Service и WDG HTML Validator.

 

4. Комментируйте с умом

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

Строка, заключенная в <!—    —> не будет отображаться на странице.

 

5. Вставляйте изображения правильно

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

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

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

A) Используйте относительные ссылки, если это возможно.

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

Не понятно? Рассмотрим примеры:

Если изображение находится в той-же папке что и страница:

Если изображение находится в папке images, вложенной в туже папку что и страница:

Если картинка находится в папке images, на уровень выше страницы:

Б) Ссылайтесь на изображения относительно корня сайта

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

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

У этого способа есть и относительное неудобство, ведь он будет работать только на Веб сервере http://, на локальной копии сайта картинки отображаться не будут file://.

В) Никогда не используйте абсолютные ссылки!

Избегайте использования абсолютных ссылок всеми возможными способами. Такие ссылки обычно начинаются с http:// или file://.  Если ваша страница содержит URL с кодом вроде:

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

или:

как описано в правиле выше.

6. Указывайте ширину и высоту для изображений

Старайтесь указывать размер вашего изображения с помощью атрибутов width и height. К примеру:

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

Узнать точный размер изображения (в пикселях) можно в свойствах файла. Эти размеры стоит указать в теге <img>.

 

7. Неразрывные пробелы в HTML

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

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

с помощью неразрывного пробела этого можно достичь следующим образом:

 

8. Используйте таблицы для данных, а CSS для позиционирования

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

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

 

Надеемся вам пригодятся советы, описанные выше. Удачи в освоении сайтостроения!

 

Источник: http://www.elated.com/articles/10-html-tips-for-beginners/

Роман Головчук

Создатель и куратор InfoStarve

Читайте также:

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *