код


Советы по написанию Html кода

Приветствую тебя пользователь! Сегодня я даю советы по html. Для того чтобы красиво верстать необходимо придерживаться определенных правил. Надеюсь мои советы Вам пригодятся. Некоторые из опыта личного, другие были высказаны такими пользователями как и Вы.

Пост будет в виде презентации, в которой я выделил основные моменты. Так что преступаем!

Смотреть презентацию лучше на весь экран

А вот Вам и текстовый вариант, кому лень смотреть ;-)

1. DOCTYPE

Не забывайте прописывать DOCTYPE! Выглядит он так:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>

порой встречаются такие элементы2. Html без css

Выносите css в отдельный файл!
Не пишите так:

<p style= ”margin-top:5px” >Текст</p>

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

3. Javascript/скрипты

Все что можно сделать без Javascript, делайте без него!

Используйте сторонние скрипты только при необходимости!

Железное правило. Хотите выпадающее меню? И нам придется использовать javascript? Как бы не так! В интернете множество изящных и простых решений. Особенно, большой функциональностью обладают html 5 и css 3

4. Регистр

Хоть и регист не влияет на html, но не стоит писать так:

<DIV CLASS=”NEWS”>текст</DIV>

или

<DIV class=”NEWS”>текст</div> 

Привыкайте к красоте кода:

<div class=”class”> текст </div>

5. Назначение тегов

Прежде чем написать, подумайте. Возможно есть теги, которые решают Вашу задачу намного проще. Например,

<p style=”font-size:1.2em”> <strong> Заголовок</strong></p>

и

<h2> Заголовок </h2>

Дают один результат.

6. Используйте возможности html тегов

Помните в Html 4 имеет 91 элемент. Проверьте сколько элементов Вы вспомните за 5 минут – пройдите тест

7. Следите за валидностью

Не пишите невалидный код, потому что Вы так хотите. Ориентируйтесь на стандарты.

Проверка html на валидность:

Проверка css на валидность:

8.Формируйте код

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

В каком коде будет проще работать?

<div id=”sidebar”>
<h3>Новость</h3>
<p>Сама новость...</p>
</div>

или

<div id=”sidebar”> <h3>Новость</h3> <p>Сама новость...</p> </div>

9. Комментирование

Подумайте о тех, кто будет разбираться в Вашем коде! Используйте комментарии:

<!-- начало сайдбара -->
<div id=”sidebar”>
<h3>Новость</h3>
<p>Сама новость...</p>
</div> <!-- конец сайдбара -->

Очень важный пункт. Только не переусердствуйте, не надо писать после каждого дива.

10. Картинки

  • Не грузите большие картинки.
  • Используйте цвета вместо картинок.
  • Прописывайте атрибут alt
  • Указывайте ширину и высоту
  • Подгружайте картинки через css (например,css sprites)

11.Ненужные файлы

  • Не оставляйте в коде лишнее.
  • Удаляйте закомментированные строки, если Вы хотите когда -то их использовать, то сохраните у себя на компьютере.
  • Удаляйте код, если его не используете!
  • Удаляйте картинки, которые не используете! Зачем Вам лишние запросы?!

13. Смысловая нагрузка

Названия классов и id необходимо давать по смыслу например, header, menu, footer, news

Чтобы понять где и что. В больших кодах это очень удобно. Представьте, что все классы и id названы по типу ghhh, privet, lol, pop, tutu и т.  д. Через месяц Вы забудите, что есть что.

14. Берегите глаза

Думайте о пользователях. Не используйте слишком яркие цвета. Хотя об этом в первую очередь должен думать веб-дизайнер))

с/у УтБ

На десерт сегодня очень интересная картинка, которую я встретил на пикабу и не смог не поделиться с Вами ;-)

что не является браузером