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

День первый. Стандарты, обязательные теги

стандарты в HTML (правила отображения)

  • <DOCTYPE html> — стандарт в HTM5 (рекомендованный)
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> – стандарт, в котором применяются теги html 4.01, html 5
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> – стандарт, в котором применяются теги html 4.01,

обязательные теги в HTM

  • <Html> – главный тег станицы
  • <head> – тег для служебной информаций
  • <title> – тег для названия страницы
  • <body> – тег для содержимого страницы

мета теги в теге <head>

  • <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> – Кодировка на сайте
  • <meta name="generaton" content="" /> – кто генерирует страницу
  • <meta name="description" content=""/> – Описание страницы
  • <meta name="keywords" content=""/> – Ключевые слова страницы

День второй. Синтаксис, заголовки, атрибуты, абзацы и переносы

Синтаксис в HTML

  • <тег> – одиночный тег
  • <тег> содержимое </тег> – парный тег
  • <тег атрибута=”содержимое атрибута ”> содержимое </тег> – парный тег с атрибутом
  • <тег1> содержимое <тег2> вложенный < /тег1> – парный тег с вложенным одиночным тегом
  • <тег1> содержимое <тег2> вложенный </тег2></тег1> – парный тег с вложенным парным тегом

Заголовки в HTML

  • Заголовок первого уровня(<h1>)

  • Заголовок второго уровня(<h2>)

  • Заголовок третьего уровня(<h3>)

  • Заголовок четвертого уровня(<h4>)

  • Заголовок пятого уровня(<h5>)
  • Заголовок шестого уровня(<h6>)

Обзацы и переноси

  • <p> – парный тег для абзацев (у этого тега есть свой отступы)
  • <br> – одиночный тег для переноса строки (у этого тега нет своих отступов)

День третий. Теги выделение текста.

В чем разница между тегом <b> и <strong>

  • <b> – парный тег для выделение текста жирным
  • <strong > – парный тег выделение текста жирным и что бы поисковая система нашла текст на сайте

В чем разница между тегом <i> и <em>

  • <i> – парный тег для выделение текста курсивам
  • <em> – парный тег выделение текста курсивам и что бы поисковая система нашла текст на сайте

Теги подчеркивание и зачеркивание

  • <u> – парный тег делает текст подчеркнутым
  • <s> – парный тег делает текст зачеркнутым

создание горизонтальной линии

<hr> – одиночный тег

    атрибуты тега <hr>

  • noshade – делает линию серой
  • size="" – задает высоту для линий
  • color="" – задает цвет линий
  • width="" – ширина линий

Теги верхнего и нижнего регистра

  • <sup> – парный тег для перевода в верхний регистр
  • <sub> – парный тег для перевода в нижний регистр

День четвертый. Списки, изображения, ссылки

Вставка нумерованных списков

  • <ol> – парный тег для нумерованных списков
  • <li> парный тег для создания маркеров,
  • атрибут type="" – тип нумерованных списков
  • атрибут reversed – нумерация наоборот
  • атрибут start="" с какой позиций начинать нумерацию
  • атрибут value="" задает номер для маркера и последующих
  1. пункт 1
  2. пункт 2
  3. пункт 3

Вставка маркированных списков

  • <ul> – парный тег для маркированных списков
  • <li> – парный тег для создания маркеров,

    атрибуты и значение для тега <ul>

  • Атрибут type="" – тип маркированных списков
  • Значение circle – маркеры в виде круга.
  • Значение disc – маркеры в виде диска ( по умолчанию )
  • Значение square – маркеры в виде квадрата
  • пункт 1
  • пункт 2
  • пункт 3

Вставка вложенных списков

  1. Пункт 1
    • Пункт 1
    • Пункт 2
    • Пункт 3
  2. Пункт 2
    • Пункт 1
    • Пункт 2
    • Пункт 3
  3. Пункт 3
    • Пункт 1
    • Пункт 2
    • Пункт 3

Тег для вставки изображения

<img> одиночный тег для вставки изображения

    Атрибуты для тега <img>

    Логотип
  • src="" – путь к изображению
  • width="" – ширина изображения
  • height="" – высота изображения
  • border="" – создание обводку
  • alt="" вместо изображения появляется текст (если изображения не существует)
  • align="right" – ставить изображения с правой стороны и делает изображения обтекаемым
  • align="left" – ставить изображения с левой стороны и делает изображения обтекаемым
  • align="middle" – делает изображения обтекаемым по середине ( текст не вес обтекает изображения)
  • align="bottom" – делает изображения обтекает в внизу ( текст не вес обтекает изображения)
  • align="top" – делает изображения обтекает вверху( текст не вес обтекает изображения)
  • hspace="" – делает вертикальный отступ от изображения
  • vspace="" – делает горизонтальный отступ от изображения

Мои шаблоны

Написать администратору

Вставка ссылок в HTML

<a> – парный тег для создания ссылок

    атрибуты для тега <a>

  • href="" – путь к ссылке
  • target="_self" – ссылка открывается в том же окне
  • target="_blank" – ссылка открывается в новом окне
  • name="gogol" – создание якорей
  • href="mailto:Электронный адрес" – При нажатия на ссылку запускается почтовый клиент пользователя

Дополнительно

  • <div> – блочный парный тег для создания блоков
  • <span> – встроенный парны тег для выделения элемента
  • <-- сам комментарии--> – создания комментариев