Html-тэги — Ошибка при работе с html


Содержание

Работа с HTML тегами и атрибутами

Учебник HTML CSS

Практика

Продвинутый курс

Практика

Адаптив

Продвинутые вещи

Практика

Сейчас мы с вами займемся изучением основных тегов. Начнем с того, какие теги являются обязательными на странице, формируя ее структуру.

Блок . Структура простейшей страницы

Страница сайта — это обычный текстовый файл с расширением .html. Внутри этого файла и хранится текст HTML страницы вместе с тегами. Этот файл обязательно должен иметь следующие теги: тег , который должен содержать в себе текст всего сайта (все, что написано вне этого тега, браузером будет проигнорировано), а внутри него должны быть еще два тега: тег для служебного содержимого страницы и тег — для основного текста, который и виден на экране браузера.

В служебное содержимое, которое располагается внутри тега , входит много различных вещей, но пока нам нужны только две из них. Это тег , задающий название страницы, которое будет видно во вкладке браузера, и тег , который задает кодировку страницы (она ставится в атрибуте charset и обычно имеет значение utf-8, подробнее об этом в видео, которое будет ниже на пару абзацев).

Кроме того, перед тегом обычно пишется конструкция doctype, которая указывает версию языка HTML, на которой сделан сайт. Актуальная сейчас версия языка имеет номер пять и доктайп для нее должен выглядеть так — .

Итак, давайте посмотрим на основную структуру страницы (чтобы запустить это пример в браузере — скопируйте его в текстовый файл с расширением .html и откройте в браузере, если у вас проблемы с этим — посмотрите видео под примером):

Как выглядит этот пример в браузере смотрите по данной ссылке.

Думаю, после того, как вы прочитали про основную структуру страницы, у вас по-прежнему остается некоторое недопонимание, как все это выглядит на практике. Поэтому я снял специальное видео, в котором покажу вам, как сделать вашу первую HTML страницу и запустить ее в браузере (в нем я также расскажу про title страницы, про кодировки, про оформление кода). Посмотрите его и только потом переходите к дальнейшему чтению:

Тут скоро будет видео как начать: как сохранить с расширением .html, структура страницы, кодировки.

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

Блок . Абзацы

Одним из основных элементов страницы являются абзацы. Их можно сравнить с абзацами в книге — каждый абзац начинается с новой строки и имеет так называемую красную строку (это когда первая строка текста абзаца немного отступает вправо). По умолчанию красной строки нет, но ее легко сделать (об этом чуть позже).

Абзац создается с помощью тега

Так код будет выглядеть в браузере:

Это еще один абзац.

И еще один абзац.

Блок . Заголовки h1, h2, h3, h4, h5, h6

Кроме абзацев важное значение на странице имеют заголовки. Их также можно сравнить с заголовками из книги — каждая глава имеет свой заголовок (название этой главы) и разбита на параграфы, которые тоже имеют свои заголовки. Ну, а основной текст страницы располагается в абзацах.

Заголовки создаются с помощью тегов

. Они имеют разную степень важности. В заголовке h1 следует располагать название всей HTML страницы, в h2 — название блоков страницы, в h3 — название подблоков и так далее.

Все заголовки по умолчанию жирные и имеют разный размер (это можно поменять через CSS, но об этом позже). Смотрите пример:

HTML теги для работы с текстом.

Всего 6 видов заголовков — от H1 до H6. Тегу H1 соответствует самый большой заголовок, тегу H6 — самый маленький. Закрывающий тег обязателен.

align — Выравнивает заголовок в соответствии со следующими значениями:

center — По центру.

left — По левому краю.

right — По правому краю.

title — Всплывающая подсказка.

Это заголовок обрамлен тегом

и вид текста в нем.

А это уже заголовок в теге

создает новый параграф.

align — Выравнивает параграф относительно одной из сторон документа.

left — выравнивание по правому краю (По умолчанию ).

right — выравнивание по правому краю.

center — выравнивание по центру.

justify — выравнивание по ширине.

title — Всплывающая подсказка.

Контейнер выделяет текст жирным шрифтом.

Аналогичный тег — , он тоже выделяет текст жирным. Но его не рекомендуется использовать больше 1-2 раз на странице — при большом количестве тегов на странице поисковые системы могут воспринять это как спам.

title — Всплывающая подсказка.

Это простой текст.

Это текст выделенный жирным шрифтом..

Контейнер выделяет текст жирным шрифтом.

Рекомендуется использовать этот тег для выделения наиболее значимого ключевого слова (или словосочетания) для акцентирования на нем внимая посковых систем.

title — Всплывающая подсказка.

Это простой текст.

Эта страница посвящена HTML-тегам для работы с текстом. Главная мысль страницы выделена тегом .

Тег добавляет в документ горизонтальную линию.

Закрывающий тег не обязателен.

size — Устанавливает толщину линии.

width — Устанавливает ширину линии в пикселах или процентах.

noshade — Создает линию без тени.

color — Задает линии определенный цвет.

Тег
переводит текст на новую строку.

Закрывающий тег не обязателен.

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

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

Контейнер запрещает перевод строки.

Текст, заключенный между тэгами , будет в одну строку без переноса на другую. Если строка не уместится на экране,
то для ее просмотра просмотра появится полоса прокрутки.

Контейнер делает подиндекс.

Набираем формулу H20. Результат в примере.

Контейнер делает надиндекс.

Набираем формулу X 2 = 4. Результат в примере.

Контейнер выводит более крупный, чем окружающий текст.

title — Всплывающая подсказка.

Это простой текст.

Это более крупный текст.

Контейнер выводит более мелкий, чем окружающий текст.

title — Всплывающая подсказка.

Это простой текст.

Это более мелкий текст.

Контейнер выделяет текст курсивом.

Вместо него рекомендован Контейнер .

Это простой текст.

Это текст заключенный в контейнер .

Контейнер выделяет текст курсивом.

Рекомендован вместо контейнера .

Это простой текст.

Это текст заключенный в контейнер .

Тег делает текст зачеркнутым.

Закрывающий тэг обязателен. Не ркомендован для использования.

Это текст заключенный в контейнер .

Тег выделяет текст моноширинным шрифтом.

Закрывающий тэг обязателен.

Вместо него рекомендован контейнер .

Это простой текст.

Это текст заключенный в контейнер .

Тег выделяет текст моноширинным шрифтом.

Закрывающий тэг обязателен.

Рекомендован вместо контейнера .

Это простой текст.

Это текст заключенный в контейнер .

Контейнер делает текст подчеркнутым.

Не рекомендован для использования.

Это простой текст.

Это текст заключенный в контейнер .

Тег определяет цвет, размер и выводимый шрифт.

Закрывающий тег обязателен.

color — определяет цвет текста.

face — определяет гарнитуру шрифта.

size — определяет размер текста в пределах от 1 до 7, где 1 — самый мелкий шрифт. По умолчанию равен 3.

Тег заставляет текст перемещаться из стороны в сторону.

Закрывающий тег обязателен.

behavior — Определяет вид движения.

alternate — Колебательные движения налево и направо.

scroll — Перемещение текста в направлении, указанном в direction. Достигнув края экрана, надпись появляется снова с противоположной стороны.

slide — Схоже с scroll, но текст перемещается только один раз и останавливается.

direction — Определяет направление движения.

down — Движение вниз.

left — Движение справа налево (по умолчанию).

right — Движение слева направо.

up — Движение вверх.

Тег предназначен для включения в документ короткой цитаты.

Закрывающий тег обязателен.

предназначен для включения в документ длинной цитаты.

создает отступы с обеих сторон и отделяется от остального текста пустыми строками.

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

Тег используется для цитат.

Закрывающий тег обязателен. Обычно отображается курсивом.

Какой-то текст, (здесь цитата) и текст продолжается.

Контейнер применяют для выделения программного кода, отображаемого на странице.

Oтображается моноширинным шрифтом.

Таким образом отобразится текст в контейнере .

Теги форматирования текста в HTML

К тегам форматирования текста в HTML можно отнести теги изменяющие отображение выделенного фрагмента.

Список тегов форматирования текста

Тег используется для подсветки фрагмента текста.

Тег используется для создания текста верхнего индекса.

Теги устанавливающие суть содержимого

— заголовок наиболее высокого уровня,

— наименьшего. Заголовки определяют структуру текста HTML документа. Браузера обычно выделяют заголовки размером шрифта, в зависимости от уровня заголовка.

Тег указывает, что содержимое является термином. Браузеры обычно выводят содержимое тега курсивом.

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

Тег указывает, что содержимое является названием материала. Браузеры обычно отображают текст внутри курсивом.

Цукерберг рекомендует:  Мемы в… музеях

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


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

Тег указывает, что содержимое является клавиатурным вводом. Браузеры обычно отображают текст внутри тега моноширинным шрифтом.

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

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

Помечаем изменения. Теги del и ins

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

Любой документ на протяжении своей «жизни» может изменяться. С распространением динамических веб-приложений вносить изменения в HTML-документы стало проще простого.

Иногда возникает вопрос: а что же именно было изменено в документе, что было добавлено, а что удалено?

Как раз для описания изменений предназначены теги и .

  • Макет разваливается на минимальной ширине.
  • Работа с текстом в HTML (материал для начинающих). Урок 3

    2013-06-09 / Вр:21:14 / просмотров: 20736

    В уроке 2 вы пробовали самостоятельно создать свою первую, простейшую веб-страницу.
    В этом уроке вы научитесь работать с текстом, а именно, выделять текст курсивом, делать текст жирным, подчеркивать, зачеркивать, создавать заголовки для веб-страницы, менять шрифт и его размер и другое.
    Я постараюсь вас не грузить многочисленной информацией, покажу лишь основное, с чем вы будете чаще всего сталкиваться. На ранних этапах ознакомления с основами HTML, вам должно этого хватить.

    Основные теги для работы с текстом.

    — этот тег предназначен для разбивки текста на параграфы в html документе.

    Предлагаю посмотреть пример :

    Вот результат примера .

    Атрибуты в HTML.

    Что такое «тег», вы уже знаете, а вот что такое «атрибуты в html» сейчас узнаете.
    Итак.

    Атрибуты в html – это дополнение к тегу для разметки текста. Атрибуты вставляются вовнутрь тега. На примере вы все увидите:

    align=»center» > здесь текст

    P – это тег параграфа.
    align=»center» – это атрибут к тегу

    с дополнительным правилом.

    Я думаю, вы поняли, что такое атрибуты в html.

    Атрибуты «H1, H2, H3, H4, H5, H6»

    Чтобы выровнять по горизонтали заголовок, используйте атрибут «align».

    align: center | left (по умолчанию) | right

    Атрибуты «p»

    Чтобы выровнять по горизонтали заголовок, используйте атрибут «align» .

    align: center | justify | left | right

    Итог .
    Давайте объединим все примеры вместе и посмотрим результат:

    Дополнительные теги для работы с текстом.

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

    — этот тег предназначен для выделения текста или слова жирным начертанием. Или ( ).
    — этот тег предназначен для выделения текста или слова курсивом.
    — этот тег предназначен для подчеркивания текста или слова.
    — текст будет перечеркиваться.
    — текст верхнего индекса (х 2 )
    — текст для нижнего регистра (Н2О)
    — этот тег предназначен для изменения цвета, размера и стиля шрифта в тексте.
    — этот тег предназначен для вставки горизонтальной линии в текст.

    Предлагаю посмотреть пример :

    Атрибуты «font»

    font: SIZE | COLOR | FACE

    SIZE – размер текста. Значение задается от 1 до 7. Также можно задавать значения в большую или меньшую сторону с помощью символов « + » и « — ».
    COLOR – цвет текста.
    FACE – шрифт текста.

    Предлагаю посмотреть пример :

    Атрибуты «HR»

    HR: width | size | align | noshade | color

    WIDTH – длина линии. Задается размер в (px / %).
    SIZE – толщина линии (px).
    ALIGN – выравнивание линии по горизонтали. У атрибута «align» есть необходимые значения:
    left – выравнивание документа по левому краю.
    right – выравнивание документа по правому краю.
    center – выравнивание документа по центру (используется по умолчанию).
    NOSHADE –закраска линии как сплошной.
    COLOR – цвет линии (работает только в Internet Explorer).

    Теперь объединим эти примеры вместе и посмотрим результат:

    Таблица основных тегов html с примерами

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

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

    Базовые теги

    — тег для добавления комментариев в документ. Помещённые внутри него теги не интерпретируются браузером.

    — показывает браузеру тип документа, сообщает его версию и язык.

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

    — контейнер, в который помещаются метаданные документа, не видимые пользователям, но считываемые поисковыми роботами: например, или

    HTML начало

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

    Создание HTML документов

    Для того, чтобы создать HTML документ необходимо:

    1. Открыть любой текстовый редактор (например блокнот, Notepad++ и т.д.);
    2. Набрать произвольный текст и разметить его HTML тегами;
    3. Cохранить файл с расширением .htm или .html.

    Базовый документ HTML

    Ниже приведен в своей простейшей форме пример HTML-документа:

    Теперь вы можете воспользоваться кнопкой Попробуй сам, которая расположена в правом верхнем углу окна кода, для того, чтобы проверить результат этого HTML — кода, или сохраните код в HTML — файл test.html с помощью любого текстового редактора. И, наконец, откройте его с помощью веб — браузера, например Internet Explorer, Google Chrome или Firefox и т.д. Браузер должен показать следующий результат:

    HTML теги

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

    Html-тэги — Ошибка при работе с html

    Освойте бесплатно наиболее простой, быстрый и гибкий способ создавать адаптивные веб-сайты.

    Дизайн лендинга

    Создавайте дизайн любых сайтов — для себя и на заказ!

    Популярное

    • Главная
    • ->
    • Материалы
    • ->
    • 30 хороших рекомендаций при работе с HTML

    Reg.ru: домены и хостинг

    Крупнейший регистратор и хостинг-провайдер в России.

    Более 2 миллионов доменных имен на обслуживании.

    Продвижение, почта для домена, решения для бизнеса.

    Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

    Бесплатный Курс «Практика HTML5 и CSS3»

    Освойте бесплатно пошаговый видеокурс

    по основам адаптивной верстки

    на HTML5 и CSS3 с полного нуля.

    Фреймворк Bootstrap: быстрая адаптивная вёрстка

    Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

    Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

    Верстайте на заказ и получайте деньги.

    Что нужно знать для создания PHP-сайтов?

    Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.

    Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!

    Создайте свой сайт за 3 часа и 30 минут.

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

    Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).

    Изучите основы HTML и CSS менее чем за 4 часа.

    После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.

    Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.

    Бесплатный курс «Сайт на WordPress»

    Хотите освоить CMS WordPress?

    Получите уроки по дизайну и верстке сайта на WordPress.

    Научитесь работать с темами и нарезать макет.

    Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

    Хотите изучить JavaScript, но не знаете, как подступиться?

    После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.

    Развеются мифы о сложности работы с этим языком, и Вы будете готовы изучать JavaScript на более серьезном уровне.

    *Наведите курсор мыши для приостановки прокрутки.

    30 хороших рекомендаций при работе с HTML

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

    Не так давно совершенно нормально было видеть что-то вроде следующего:

    Заметьте, что опущены тэги ul/ol. Кроме того, многие оставляют незакрытыми также и тэги li. В соответствии с современными стандартами такое написание — плохая практика и ее стоит избегать. Всегда, всегда закрывайте ваши тэги. В противном случае вы на каждом шагу будете сталкиваться с ошибками валидации.

    Лучше:

    2: Объявляйте корректный тип документа (DocType)

    Когда я был несколько моложе, я участвовал в обсуждениях на форумах, посвященных CSS. Если у какого-либо участника возникала проблема, прежде чем рассматривать его ситуацию, ему необходимо было:

    1. Произвести валидацию CSS-файла. Исправить ошибки, если таковые имелись
    2. Добавить объявление типа документа (DocType)

    «DOCTYPE идет до открывающего тэга html в самом верху страницы и сообщает браузеру о том, содержит ли страница HTML, XHTML, либо смесь данных разметок для того, чтобы браузер мог корректно интерпретировать разметку страницы»

    Большинство из нас выбирают из 4 типов при создании страниц:

    Ведутся жаркие дебаты относительно того, что использовать предпочтительнее. С одной стороны, считается наилучшим вариантом использовать версию XHTML Strict. Однако, после некоторых исследований было выяснено, что большинство браузеров «откатываются» назад, к обычному HTML при интерпретации разметки. В связи с этим многие сделали выбор в пользу HTML 4.01 Strict. Основная же идея в том, что выбор любого из данных типов будет держать вас в определенных рамках. Проведите свое решение и определитесь с выбором.

    3. Никогда не используйте встроенные стили

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

    Согласен — выглядит довольно безобидно. Однако это индикатор того, что вы нарушаете хороший тон при кодировании.

    Когда вы создаете разметку страницы, ни в коем случае не думайте о стилевом оформлении. Начинайте добавлять стили только после того, как полностью закончите со структурой страницы.

    Цукерберг рекомендует:  Htmlcss - Html файл не видит css файл

    4. Помещайте все внешние файлы CSS в пределах тэга head

    С техничеcкой точки зрения стилевые файлы могут быть подключены в любом месте документа. Однако, спецификация HTML рекомендует делать это в пределах тэга head. Основной выигрыш от этого — более быстрая загрузка страницы.

    «Во время исследований в Yahoo! мы обнаружили, что перемещение стилевых файлов в секцию head HTML-документа позволяет ему загружаться быстрее. Это происходит потому, что в этом случае страница отрисовывается постепенно.» — ySlow Team

    5. Размещайте скрипты Javascript в конце страницы

    Держите в голове главную цель — заставить страницу загружаться как можно быстрее. При загрузке скрипта браузер не может продвигаться дальше, пока файл не будет загружен целиком. Следовательно, посетителю придется ждать дольше, пока он сможет увидеть страницу на экране.

    Если у вас есть JS-файлы, чье единственное предназначение — добавление определенного функционала — скажем, при нажатии какой-либо кнопки и т.п. — будьте мудрее и размещайте такие скрипты внизу страницы, прямо перед закрывающим тэгом body. В данном случае это лучшее решение.

    6. Никогда не используйте встроенный Javascript

    Другой типичной практикой не так давно было размещение JS-команд непосредственно внутри тэгов. Это часто встречалось в простых галереях фотографий. По сути атрибут onclick применятся к тэгу. Стоит ли говорить, что вы никогда не должны поступать подобным образом. Вместо этого вынесите этот код во внешний JS-файл, и используйте addEventListener/attachEvent для «прослушки» желаемого события. Или, если вы используете фреймворк jQuery, просто используйте метод click.

    7. Постоянно проводите валидацию

    Идея валидации неверно истолковывается теми, кто не понимает ее значения. На самом же деле валидация должна работать на вас, а не против вас.

    Новичкам я рекомендую использовать аддон Web Developer Toolbar для Firefox, постоянно выбирая опции Validate HTML и Validate CSS. Несмотря на то, что CSS не очень сложен в освоении, он тоже в состоянии заставить вас рвать себе волосы на голове. Как вы увидите, во многих случаях корявое отображение страницы — следствие неверной разметки. Проверяйте, проверяйте, проверяйте.

    8. Скачайте Firebug

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

    9. Используйте Firebug!

    По своему опыту скажу, что большинство людей используют не более 20% возможностей Firebug. Вы просто-таки оказываете себе медвежью услугу. Не пожалейте пару часов, чтобы порыскать по сети и найти подробное описание функционала этого аддона.

    10. Пишите тэги в нижнем регистре

    Теоретически, вы можете писать все в верхнем регистре.

    Но пожалуйста, не делайте этого. Это никуда не годится, и от этого болят глаза, не говоря уже о том, что это напоминает о функции html в Microsoft Word!

    Лучше:

    11. Используйте тэги H1 – H6

    Примечательно, что именно в этом вопросе я даю слабину. Лучше всего использовать все шесть тэгов. Я же, если честно, использую не больше 4; но я работаю над этим!:) По семантическим причинам и в связи с SEO, заставляйте себя использовать H6 вместо p там, где это уместно.


    12. Оставляйте тэг H1 для названия страницы

    Как всегда, определите, что приоритетнее для вашего сайта. Однако, по моему мнению, следует оставлять тэг H1 для заголовка статьи. Особенно актуально это с точки зрения поисковой оптимизации.

    13. Скачайте ySlow

    Команда Yahoo выпустила расширение для Firebug под названием ySlow. Когда оно активировано, происходит анализ сайта и выдается своеобразный отчет о том, какие части вашего сайта требуют улучшения. Рекомендации могут быть жестковаты, но это все для вашего же блага. Искренне рекомендую.

    14. Заключайте навигацию в ненумерованный список

    Каждый вебсайт имеет навигацию какого-либо рода. Можно, конечно обойтись чем-то вроде:

    Но я не советую использовать такой метод в связи с семантическими причинами. Наша задача — написать код настолько хорошо, насколько это возможно.

    Пусть в тэге ul содержится список элементов:

    15. Научитесь дружить с IE

    Несомненно, на каком-то этапе разработки вы обнаружите, что вы вне себя от ярости при попытке добиться нужного отображения в IE. Это реальная проблема веб-разработчиков. Когда в Twitter я читаю о том, как мой приятель борется с Internet Explorer, я улыбаюсь и думаю, «я тебя понимаю, дружище».

    Первое, что вам нужно сделать после того, как вы завершили работу над первичным CSS-файлом — это создать новый CSS-файл ie.css. После этого вы сможете подключать его только в том случае, когда это необходимо при помощи следующего кода:

    Код гласит: «Если браузер пользователя — Internet Explorer 6 или ниже, импортируй файл стилей. В противном случае, не делай ничего.» Если вам нужно включить в эту группу еще и IE7, просто замените lt (less than — больше, чем) на lte (less than оr equal to — больше, чем или равен).

    16. Выберите отличный редактор кода

    Работаете ли вы на Windows или на Mac, вы всегда можете найти множество классных редакторов кода, которые придутся по душе именно вам. Для примера приведу список некоторых из программ, которыми вы можете воспользоваться.

    Для любителей Mac:

    — Coda
    — Espresso
    — TextMate
    — Aptana
    — DreamWeaver CS4

    Для поклонников PC:

    — Notepad++
    — Aptana
    — PHP Designer
    — PSPad
    — Dreamweaver CS4

    17. Сайт готов? — Сжимаем!

    Сжимая ваши CSS и Javascript файлы, вы можете уменьшить их размер примерно на 25%. Не думайте об этом во время разработки. Однако, когда ваш сайт уже почти готов, используйте онлайн-сервисы для сжатия файлов.

    Сервисы сжатия Javascript:

    Сервисы сжатия CSS-файлов:

    18. Отсекайте лишнее!

    Вспоминая свой первый вебсайт, я не могу не удивляться. У нас, должно быть, есть природный инстинкт безопасного обертывания каждого параграфа в блок div, после чего, «для верности» этот div помещается в еще один контейнер div. Как вы уже поняли, это чрезвычайно неэффективно.

    «Когда вы завершили работу над разметкой страницы, пройдитесь по ней еще пару раз и найдите способы уменьшить количество элементов на странице. Действительно ли необходимо заключать тот список в элемент div? Полагаю, что нет.»

    19. Всем картинкам нужны атрибуты alt

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

    Плохо:

    Лучше:

    20. Допоздна.

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

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

    21. Изучайте исходный код

    Есть ли лучший способ изучения HTML, чем копирование наших героев? Изначально мы все — копипастеры. Затем, постепенно, вы начинаете вырабатывать свой стиль, свои методы. Так что посещайте те вебсайты, которые вызывают у вас уважение. Как они сделали это, как они реализовали то? Учитесь и переносите их код себе. Все мы так делали, и вам следует поступить так же. Важно понимать: вы учитесь создавать структуру страницы, но ни в коем случае не воровать дизайн!

    Заметили интересный эффект на Javascript, который вы хотите применить? Скорее всего, здесь используется какой-то плагин. Посмотрите исходный код страницы, секцию head и найдите имя подключаемого файла. Затем — Google и встраивание скрипта в ваш сайт. Примерно так!

    22. Применяйте стили ко всем элементам

    Этот совет особенно актуален в случае, если вы работаете по заказам. То, что вы не используете тэг blockquote не означает, что ваш клиент тоже этого не делает. Не используете нумерованные списки? — Опять же, не факт, что клиент не делает этого! Окажите себе услугу — создайте специальную страницу, чтобы наглядно продемонстрировать красивое стилевое оформление для каждого существующего элемента: ul, ol, p, h1-h6, blockquotes и т.д.

    23. Используйте Twitter

    В последнее время едва ли можно скрыться от повсеместного упоминания Twitter даже по телевизору. У меня нет желания слушать то, как Larry King рекламирует свой аккаунт на Twitter — который, как нетрудно догадаться, никогда им самим не обновляется. Браво помощникам! А сколько еще людей завели свои аккаунты, узнав о том, что его кумир теперь на Twitter? Потенциал данного сервиса велик.

    Изначально, идея Twitter состояла в том, чтобы писать то, «что я сейчас делаю». Хотя такое применение все еще сохраняется, Twitter получил несколько другое развитие в сети. Если веб-разработчик, которым я восхищаюсь, размещает ссылку на статью, которую он счел для себя полезной, вы не должны удивиться тому, что я также захочу ее изучить, да и вы тоже!

    24. Освойте Фотошоп

    Как только вы изучите HTML и CSS, я бы рекомендовал вам взяться за обучение Adobe Photoshop.

    1. Изучите серию «Вы ноль в Фотошоп»
    2. Потратьте несколько часов на то, чтобы освоить как можно больше горячих клавиш в Photoshop.

    25. Знайте каждый HTML тэг

    Есть много HTML-тэгов, с которыми вы практически не будете встречаться. Тем не менее, это не означает, что вам не нужно их знать! Вы знакомы с тэгом abbr? Как насчет cite? Эти два тэга также имеют полное право занять свое место в вашем наборе инструментов. Изучите их все!

    Кстати, если вы не знакомы с двумя вышеназванными тэгами:

    abbr делает как раз то, что вы и ожидали. Он обозначает аббревиатуру. «Blvd» может быть заключен в тэг abbr, так как это сокращение от слова «boulevard» (бульвар).

    cite используется в тех случаях, когда нужно сослаться на название какой-либо работы. Например, если вы ссылаетесь на эту статью со своего блога, вы можете заключить название «30 хороших рекомендаций при работе с HTML» в тэг cite. Заметьте, что его не следует использовать для ссылки на автора цитаты. Это распространенное заблуждение.

    Цукерберг рекомендует:  Онбординг как знакомить пользователей с сайтом

    26. Участвуйте в тематических сообществах

    Вы должны стараться внести свой вклад в развитие знаний о веб-разработке. Наконец-то разобрались, как сделать правильное обтекание элементов? Опубликуйте пост — поделитесь своим опытом! Всегда есть люди, у которых меньше опыта, чем у вас. Не только вы будете отдавать что-то другим — вы сами будете повышать свой уровень. Замечали когда-нибудь, что полное понимание чего-то приходит только после того, как объяснишь это «что-то» кому-то другому?

    27. Используйте «обнуление» CSS

    Еще одна тема, где разгорались дебаты не на жизнь, а на смерть. «CSS-обнуляторы»: использовать, или не использовать, вот в чем вопрос. Что касается моего личного мнения, то я на все 100% рекомендую вам создать такой файл-обнулятор. Начните с использования какого-либо уже существующего популярного варианта, вроде предложенного Eric Meyer и, затем, постепенно, в процессе обучения, доводите его под свои нужды. Если вы не сделаете этого, вы не сможете понять, откуда же у вас появился тот дополнительный отступ у элементов списка, хотя вы ничего не задавали в CSS-файле. Сэкономьте себе нервные клетки и обнулите все! Следующий пример можно взять за основу.

    28. Всех в ряд!

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

    Думайте об этом в следующем ключе: Если я спрошу вас, почему вы поместили элемент в это место, вы должны привести мне в ответ вразумительную причину.

    29. Нарежьте PSD

    Отлично, после получения твердых знаний в HTML, CSS и Фотошопе можно приступать к превращению PSD-макета в реальный сайт. Не беспокойтесь, это не настолько сложно, как можно подумать. Лучшего способа проверить ваши умения и не придумать. Если вам нужна помощь, изучите следующие видео, в которых данная процедура показана полностью:

    30. Не используйте фреймворк. Пока

    Фреймворки для Javascript и CSS — это очень хорошо. Но, пожалуйста, не используйте их, когда вы только начинаете свой путь в разработке. Хотя можно возразить, что изучение jQuery и Javascript дополняют друг друга, нельзя сказать того же о CSS-фреймворках. Я, например, использую фреймворк 960 CSS Framework. Если же вы находитесь в процессе изучения CSS, воздержитесь от использования подобных вещей — иначе вы рискуете полностью запутаться.

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

    Jeffrey Way
    По материалам www.net.tutsplus.com
    Перевод — Дмитрий Науменко

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

    Понравился материал и хотите отблагодарить?
    Просто поделитесь с друзьями и коллегами!

    Таблица основных тегов html с примерами

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

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

    Базовые теги

    — тег для добавления комментариев в документ. Помещённые внутри него теги не интерпретируются браузером.

    — показывает браузеру тип документа, сообщает его версию и язык.

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

    — контейнер, в который помещаются метаданные документа, не видимые пользователям, но считываемые поисковыми роботами: например, или

    Стандарты кодирования в HTML5

    Зачастую веб-разработчики даже не подозревают о существовании определенных стандартов кодирования в HTML. Однако в период с 2000 по 2010 годы многие веб-разработчики перешли с HTML на XHTML. При этом XHTML вынудил разработчиков писать валидный и «хорошо сформированный» код. HTML5 же, когда дело доходит до валидации кода, допускает некоторую небрежность.

    Тем не менее, единообразие по стилю облегчит другим понимание вашего HTML кода.

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

    Всегда следите, чтобы ваш код был аккуратным, чистым и хорошо сформированным.

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

    На первой строке всегда декларируйте тип документа:

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

    Имена элементов пишите маленькими буквами

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

    • Смешение больших и маленьких букв в именах тегов считается плохой практикой
    • Разработчики обычно используют маленькие буквы (как в XHTML)
    • Написание в нижнем регистре выглядит чище
    • В нижнем регистре легче писать

    Закрывайте все HTML элементы

    В HTML5 вы не обязаны закрывать все элементы (например, элемент

    ). Тем не менее, мы все же рекомендуем закрывать все HTML элементы.

    Закрывайте пустые HTML элементы

    В HTML5 закрывать или нет пустые элементы зависит от желания веб-разработчика.

    Тем не менее, закрывающая косая черта (/) ОБЯЗАТЕЛЬНА в XHTML и XML.

    Если ожидается, что к вашей веб-странице будут обращаться XML приложения, то в пустых HTML элементах лучше использовать закрывающую косую черту!

    В именах атрибутов используйте маленькие буквы

    В HTML5 при написании имен атрибутов можно смешивать большие и маленькие буквы.

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

    • Смешение больших и маленьких букв в именах атрибутов считается плохой практикой
    • Разработчики обычно используют маленькие буквы (как в XHTML)
    • Написание в нижнем регистре выглядит чище
    • В нижнем регистре легче писать

    Заключайте значения атрибутов в кавычки

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

    • Смешение больших и маленьких букв в значениях считается плохой практикой
    • Значения в кавычках легче читать
    • Вы ДОЛЖНЫ заключать в кавычки, если в значениях есть пробелы

    Атрибуты изображений

    При определении изображений всегда используйте атрибут «alt». Этот атрибут важен, когда изображение по какой-то причине не отображается.

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

    Пробелы и знак равно

    HTML5 допускает пробелы вокруг знака равно. Однако, когда пробелов нет, то такой код легче читать, и это лучше группирует сущности.

    Избегайте длинных строк кода

    При использовании HTML редактора, неудобно читать HTML код, если приходится прокручивать окно влево или вправо.

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

    Пустые строки и отступы

    Не следует без веских причин добавлять пустые строки.

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

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

    Не используйте ненужные пустые строки и отступы. Нет необходимости ставить отступ перед каждым элементом.

    Пропускать или нет и ?

    По стандарту HTML5 тег и тег могут не использоваться.

    Следующий код согласно стандарту HTML5 считается валидным:

    Однако мы не рекомендует пропускать теги и .

    Элемент — это корень документа. Это рекомендованное место для определения языка страницы:

    Декларация языка страницы важна как для специализированных приложений (например, программ чтения с экрана), так и для поисковых систем.

    Кроме этого, если не написать тег или тег , то это может сломать структуру DOM и XML приложения. А пропуск тега к тому же может привести к ошибками в старых браузерах (IE9).

    Пропускать ли тег ?

    Согласно стандарту HTML5 тег может не использоваться.

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

    Вы можете снизить сложность структуры HTML, пропустив тег :

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

    Метаданные

    Элемент является обязательным в HTML5. Заголовок страницы должен быть наполнен значением:

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

    Установка вьюпорта (окна просмотра)

    «Вьюпорт» — это видимая пользователю область веб-страницы. Эта область разница от устройства к устройству и на мобильных телефонах будет меньше, чем на экране компьютера.

    В HTML5 был введен метод, позволяющий веб-дизайнерам контролировать вьюпорт при помощи тега .

    Следует всегда использовать элемент управления вьюпортом в следующей форме на всех веб-страницах:

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

    Часть w >

    Часть initial-scale=1.0 устанавливает начальный уровень увеличения, когда страница впервые загружается браузером.

    Ниже вы можете увидеть пример веб-страницы на экране смартфона с установленным мета тегом вьюпорта и без него:

    Страница без метатега вьюпорта

    Страница с мета тегом вьюпорта

    HTML комментарии

    Короткий комментарий должен писаться на одной строке:

    Комментарии, занимающие более одной строки, должны записываться следующим образом:

    Длинные комментарии легче читать, если они имеют отступ в два пробела.

    Таблицы стилей

    Используйте простой синтаксис для подключения внешних каскадных таблиц стилей (атрибут type не нужен):

    Короткие правила могут записываться в сжатом виде в одну строку:

    Длинные правила следует записывать на нескольких строках:

    • Открывающие скобки размещайте на одной строке с селектором
    • Используйте один пробел перед открывающими скобками
    • Для отступов используйте два пробела
    • После каждой пары свойство-значение, включая последнюю, ставьте точку с запятой
    • Кавычки используйте только со значениями, содержащими пробелы
    • Закрывающие скобки пишите на новой строке без отступа
    • Старайтесь, чтобы длина записи на одной строке была не больше 80 символов

    Загрузка JavaScript в HTML

    Для загрузки внешних скриптов Javascript используйте простой синтаксис (атрибут type не нужен):

    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих