Что такое HTML?

Анимашки Линии



Урок1. Что такое HTML.


  • Что такое HTML.
  • HTML (HyperText Markup Language ) - язык управления программой, предназначенной для просмотра web-документов (браузером).
    Основным элементом языка HTML является тэг - последовательность символов, заключенная между уговыми скобками. Тэги бывают двух видов - открывающие и закрывающие. Закрывающие тэги отличаются прямым слэшем "/" после первой угловой скобки, например:

    <p> - тэг, открывающий абзац
    </p> - тэг, закрывающий абзац

    Некоторые тэги не имеют закрывающих тэгов, например тэг <br>, который сообщает браузеру о разрыве строки, или тэг <hr> - рисующий горизонтальную линию.
    Для некоторых тэгов закрывающие тэги не обязательны, например для тэга абзаца <p>, закрывающий тэг не обязателен, но наличие его улучшает читабельность документа и придает ему структуру.

    Тэги могут вкладываться друг в друга, например:<b><i>текст</i></b>. В этом случае важно соблюдать последовательность открытия и закрытия:
    <тэг1><тэг2><тэг3>...</закрытие тэга3></закрытие тэга2></закрытие тэга1>

    HTML-документ является обычным текстовым документом, который можно создать, просмотреть и отредактировать в текстовом редакторе.
    HTML не реагирует на регистр символов, например, тэг открывающий таблицу может быть написан так-<TABLE>, или так-<table>, или скажем так-<tAbLe>. Лишние пробелы и переносы тоже не учитываются.
    Можно написать

    <P>        Красная строка.
    Следующая строка</P>
    и все равно браузер выведет это так:

    Красная строка.Следующая строка.

    (Есть единственное исключение- тэг <PRE>, после которого браузер начинает учитывать пробелы и переносы).

  • Создание документа.
  • Итак, создадим простейший документ, который потом можно будет использовать как шаблон для разных HTML-документов. Лучше воспользуйтесь для этого специализированным редактором для работы с HTML (см. раздел HTML редактор).

    Первой строкой документа, написанного на языке HTML должна быть строка, начинающаяся декларацией
    <!DOCTYPE>. В ней браузер почерпнет информацию о том какому стандарту соответствует документ.
    Например, строка:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    скажет браузеру, что документ соответствует английскому стандарту HTML 4.0 Transitional DTD.
    Затем идут следующие строки:
    <HTML> - необязательный элемент
    <HEAD>-начало заголовка документа.

    В заголовке располагаются метаданные - информация, позволяющая задать кодовую страницу языка для правильного отображения текста браузером, ключевые слова для индексации страницы поисковыми системами, автора документа и другую информацию. Более подробно о метаданных читайте в разделе META-тэги.
    Например, следующая строка укажет браузеру, что надо использовать для вывода текста стандартную кодовую страницу для вывода кириллицы - utf-8.
    <META http-equiv="Content-Type" content="text/html; charset=utf-8">
    Следующие две строки нужны для индексации вашей страницы поисковыми системами.
    <META NAME="Description" content="краткое описание страницы">
    <META NAME="Keywords" content=" ключевые слова через запятую ">
    Следующая строка укажет язык таблицы стилей CSS.
    <META http-equiv="Content-Style-Type" content="text/css">
    Затем следуют описание стилей:
    <STYLE type="text/css">
    Зададим красный цвет ссылок.
    A:link {COLOR: red; TEXT-DECORATION: none}
    Зададим цвет посещенных ссылок.
    A:visited {COLOR: maroon; TEXT-DECORATION: none}
    Зададим цвет ссылки, при клике на ней мышью
    A:active {COLOR: fuschia TEXT-DECORATION: none}
    Зададим цвет ссылки, при наведении на нее мышью
    A:hover {COLOR: black; TEXT-DECORATION: underline}
    Зададим цвет фона документа, и параметры шрифта по умолчанию
    BODY {BACKGROUND: white; COLOR: black; FONT-FAMILY: Verdana,Arial,sans-serif; FONT-SIZE: 8pt}
    </STYLE> -завершаем таблицу стилей.
    Затем указывает титул документа - надпись, которая будет выводится в заголовке окна браузера.
    <TITLE>Моя первая страничка</TITLE>
    </HEAD>- завершаем заголовок.
    После заголовка открываем тело документа
    <BODY>
    Здесь будет содержание нашего документа.
    И наконец, завершаем тело документа и сам документ.
    </BODY>
    </HTML>

    Ваш шаблон будет выглядить так:

    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <META http-equiv="Content-Type" content="text/html; charset=utf-8">
    <META NAME="Description" content="краткое описание страницы">
    <META NAME="Keywords" content=" ключевые слова через запятую ">
    <META http-equiv="Content-Style-Type" content="text/css">
    <STYLE type="text/css">
    A:link {COLOR: red; TEXT-DECORATION: none}
    A:visited {COLOR: maroon; TEXT-DECORATION: none}
    A:active {COLOR: fuschia; TEXT-DECORATION: none}
    A:hover {COLOR: black; TEXT-DECORATION: underline}
    BODY {BACKGROUND: white; COLOR: black; FONT-FAMILY: Verdana,Arial,sans-serif; FONT-SIZE: 8pt}
    </STYLE>
    <TITLE>Моя первая страничка</TITLE>
    </HEAD>
    <BODY>
    
    </BODY>
    </HTML>
    

    Итак, шаблон создан. Теперь введите следующий текст в тело документа (внутри тэгов <BODY></BODY>
    Например:
    <P>Мой первый HTML-документ
    <A HREF="">ссылка</A></P>

    Сохраните документ например как template.html и кликните на нем мышкой. Запустится браузер, в окне которого на белом фоне, черными буквами будет выведен наш текст и красными буквами ссылка, цвет которой изменится на черный, при наведении на ней курсором.










    TV onlain
     |  Просвещение  |  Россия-К  |  ТВ ЦЕНТР  |  Россия 1  |  Первый Канал (ОРТ)  |  ОТР  | 
    EuroNews Russia  |  Russia Today  |  Телеканал НТВ  |  Пятый канал TV  |  Москва 24 TV  |  360 TV  |  РЕН TV  |  РБК  | 
    Крым 24  |  Первый крымский  |  Россия 24  |  ИТВ (КРЫМ)  |  Юнион (Донецк)  |  Новороссия ТВ  |  Луганск 24  |  МИР 24  |  Известия ТВ  | 
    Министерство Идей  |  Телеканал Твтур.ТВ  |  Телеканал Царьград  |  Калейдоскоп ТВ  |  Телеканал ТРО Союза  |  Телеканал «Союз»  |  Телеканал «СПАС»  | 
    Релакс ТВ  |  МУЗ ТВ  |  Страна FM  |  НАШЕ ТВ  |  Шансон ТВ  |  Первый HD  |  Открытый HD  |  JUCE TV  |  Fresh TV  | 
    Полезная Информация
     |  Календарь  |  Мировая пресса  |  Вебкамера на МКС  |  Мировая статистика  |  Сейсмический монитор  |  Население Земли  |  Онлайн полеты самолётов  |  Конвертер валют Мира  |  Поздравления  |  Нетрадиционная медицина  |  Погода в городах Мира.  |  Иллюзии  |  Выживание  |  Омоложение  |  Блог Артема Драгунова  |  Анимация, картинки  |  Улыбнись  |  Лунный календарь  |  Заговоры  |  Астрология, гороскопы  |  100 лучших фильмов  |  Игры  |  Очищение  |  Фильмы онлайн  | 











    На главную Сделать стартовой Добавить в избранное Написать письмо