Курс по html урок Вступительный Существует три основных браузера ie, Firefox, Opera

Вид материалаУрок

Содержание


Заголовок 1 уровня
Подобный материал:
Курс по HTML


Урок 1. Вступительный

Существует три основных браузера IE, Firefox, Opera

В языке HTML знание 20% тегов позволяет создать 80% кода


Урок 2. Изучаем основы, создаем каркас страницы

Тег (tag) это служебная информация языка HTML которая заключена в угловые скобки < >.

Любой сайт HTML должен начинаться с тега Doctype>. Ниже представлены различные варианты его синтаксиса

Строгий синтаксис HTML.

Переходный синтаксис HTML.

В HTML-документе применяются фреймы.


Шаблон сайта.





Заголовок сайта




















ok.ru/html/ - сайт с описание всех тегов и параметров

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

Остались вопросы
  • Как выбирать ключевые слова? Сколько их можно делать? Какие в начале – более популярные или неважно?
  • Как писать описание?
  • Как можно автоматически генерировать тег с датой модификации

Кроме того, на сайте ссылка скрыта можно зарегистрировать сайт в яндексе.

ссылка скрыта Регистрация в каталоге Яндекса.

ссылка скрыта faq по ключевым словам.

ссылка скрыта статистика сайта

ссылка скрыта - реклама моего сайта

ссылка скрыта - реклама на моем сайте

ссылка скрыта советы вебмастеру


Урок 3. Продолжаем движение. Учимся работать с текстом.

Теги бывают парные и непарные.

Парные закрываются с помощью тега

У тега могут быть параметры.

Синтаксис <имятега имяпараметра1=”значение параметра1” имяпараметра1=”значение параметра1”>текст

Так нужно выделять каждый абзац.

Текст абзаца


Существует шесть уровней для заголовков, от самого большого, до самого маленького.

Заголовок 1 уровня



Заголовок 6 уровня



Поставить выравнивание абзаца (или заголовка или чего-нибудь еще)

Для этого нужно добавить к тегу параметр align

- выравнивание абзаца по центру

Aling=”center|left|right|justify”

Justify – по обоим сторонам

По умолчанию align=”left”


Если нужно вставить разрыв строки внутри абзаца, то используем непарный тег



Если в каком-то месте не нужны разрывы строки (например, неразрывный пробел), то ставится парный тег


Урок 4. Работаем со списками

Списки бывают нумерованные и ненумерованные.

Весь нумерованный список заключается в парный тег (контейнер)
, а ненумерованный -


Элементы списка заключаются в парный тег


  • Таким образом, оформление списка выглядит так



    1. Элемент списка1


    2. Элемент списка2


    3. Элемент списка3




    Для нумерованного списка можно менять стиль отображения чисел. Для этого у
      используется параметр type="A | a | I | i | 1". Это заглавные латинские буквы, строчные латинские буквы, заглавные римские цифры, строчные римские цифры, арабские цифры.

      По умолчанию type=”1”


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


      Для ненумерованного списка параметр type устанавливает вид маркера списка.
        ...
      . Маркеры могут принимать один из трех видов: круг, окружность и квадрат. По умолчанию – disk.


      У тега
    1. есть те же два параметра type и value, где value выполняет роль start, дальнейшие элементы списка продолжат его.


      Урок 5. Учимся работать с внешним видом текста

      Парный тег представляет собой контейнер для изменения характеристик шрифта – цвет, шрифт, гарнитура.

      Параметры

      color Устанавливает цвет текста.

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

      size Задает размер шрифта в условных единицах.


      Парный тег . Выделяет текст жирным

      Парный тег Выделяет текст курсивом

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


      Урок 6. Работаем с изображениями и логическими тегами

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

      Параметры

      align Задает выравнивание содержимого тега
      .

      title Добавляет всплывающую подсказку к содержимому.


      Что бы вставить изображение используется непарный тег



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

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

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

      Для изменения размеров изображения средствами HTML предусмотрены параметры height и width. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится тег . В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width="100%" означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного параметра width или height сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.

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

      Для любого изображения можно задать невидимые отступы по горизонтали и вертикали с помощью параметров hspace и vspace. Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не «наезжал» плотно на изображение, необходимо вокруг него добавить пустое пространство.

      Параметр border обозначает ширину рамки. Имеет смысл ставить =”0”. Иначе, когда этот рисунок ставится как ссылка, то он оказывается в синей рамке, что некрасиво.


      Тег
      - рисует горизонтальную полосу во весь экран.

      Параметр width – ширина линии в пикселях или процентах

      Парамерт color – её цвет


      Урок 7. Работаем с фундаментом гипертекста – ссылками.

      Ссылки делаются с помощью парного тега

      Праметр href задает адрес документа куда делается ссылка.

      текстссылки

      Возможна ссылка в определенное место документа. Для этого в нужном документе в том месте (в том теге, ссылка делается на тег), куда мы хотим сделать ссылку необходимо добавить параметр id. Например,

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

      Что бы ссылка открылась в новом окне, то используем атрибут target=”_blank”. Если в текущем (это вариант по умолчанию), то target=”_self”.

      Ссылка на почту ссылка скрыта