Приветствую тебя пользователь! Сегодня я даю советы по 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. Берегите глаза
Думайте о пользователях. Не используйте слишком яркие цвета. Хотя об этом в первую очередь должен думать веб-дизайнер))
с/у УтБ
На десерт сегодня очень интересная картинка, которую я встретил на пикабу и не смог не поделиться с Вами ;-)
а можно усвоить написание хтмл без специального образования.
легко. У меня не техническое образование
главное желание.
Мне понравился это изображение:) Это же и вправду так! Всегда что то не получается, когда проверяешь сайт на кроссбраузерность в Ескплорере! И еще многие думают что PHP это трудно. Наоборот намного легче чем вы можете себе представить.Лично я думаю что PHP легкий язык по сравнению с java,c++ и delphi(сравнение не совсем точный. Но я не пользовался другими языками)
В чужих руках все так просто, как возьмешся сам темный лес просто)
С HTML еще как то более или менее понятно, а вот РНР сколько пытался в нем разобраться, никак. Предлагаю автору написать статейку про РНР, хотя бы просто основные моменты указать. Буду очень благодарен, думаю не только я)))
ок, буду иметь ввиду
интиресный материал. очень хорошо расписан! читать одно удовольствие. всё сразу стало понятно.
спасибо!
Все что можно сделать без Javascript, делайте без него! – это наибольше понравилось, только без него мало что можно.
А счётчик LI почему неактивен?
недавно заметил, часть кода не правильно скопировал, сейчас должен быть активен
2Алена я Вас понимаю, чужой код – темный лес) Хотя и свой для других не светлее;-)
2Яна спасибо, рад, что Вам нравится, ждите продолжения
Самое больше ненавижу, когда приходится разбираться и переписывать чужой код, который написан весь большими буквами и в один столбик без какого либо форматирования. А бывают и такие уникалы, которые умудряются в одну строку много команд влепить.
чем меньше строк и всяких пробелов тем меньше весит сам файл, а значит будет быстрее загружаться =)
Спасибо за информацию, мне как новичку очень пригодится. Добавлю ваш блог в закладки))
А что вы думаете про оптимизацию кода WordPress? Можно ли сделать блог не таким “тяжелым”?
есть мысли, но думаю это тема отдельного поста ;-)
Если разбираешься в php то можно удалить всякие пробелы и не нужный код, это уменьшает размеры файла
конечно, меньше символов меньше вес;)
Хорошие советы! Я только начинаю писать сайты на HTML, так что пока в моей работе еще маленькие сайты, но ваши советы немного мне помогают! Буду учится дальше=))
подписывайтесь чтоб всегда быть в курсе, будет еще много чего интересного ;-)
Кстати, проверьте свой сайт на вирусы.