Приветствую тебя пользователь! Сегодня я даю советы по 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. Берегите глаза
Думайте о пользователях. Не используйте слишком яркие цвета. Хотя об этом в первую очередь должен думать веб-дизайнер))
с/у УтБ
На десерт сегодня очень интересная картинка, которую я встретил на пикабу и не смог не поделиться с Вами ;-)