Справочник от Автор24
Поделись лекцией за скидку на Автор24

Код HTML

  • 👀 372 просмотра
  • 📌 320 загрузок
Выбери формат для чтения
Загружаем конспект в формате pdf
Это займет всего пару минут! А пока ты можешь прочитать работу в формате Word 👇
Конспект лекции по дисциплине «Код HTML» pdf
1. ОСНОВЫ HTML Web-страницы – это текстовые файлы, хранящие содержимое страницы и команды форматирования, называемые тегами. Правила форматирования документа регламентируется языком разметки гипертекста HTML (Hyper Text Markup Language). Код HTML интерпретируется браузером, который выводит отформатированное содержимое webстраницы на экран. Тег - ключевое слово языка HTML, которое служит для оформления различных элементов в документе. Тег записывается в треугольных скобках: <тег>. Теги бывают парными и непарными. Парные теги требуют обязательного закрывающегося тега, синтаксис которого . Непарные теги соответственно закрывающего не имеют. Текст, содержащийся между начальным и конечным тегом, отображается и размещается в соответствии со свойствами, указанными в начальном теге. Тега может иметь атрибуты, дающие дополнительные возможности описания элемента web-страницы. Синтаксис такого тега: <тег атрибут="значение" атрибут="значение" …>. 1.1. Структура документа Документ HTML требует наличия определенных тегов в определенных позициях. Структура HTML-документа: <!-- заголовок документа в браузере --> Документ на языке HTML определяется парным тегом . Он открывается в самом начале документа, а закрывается в самом конце. Заголовок документа определяется парным тегом , после которого идут теги, задающие информацию о документе. В частности, заголовок документа в браузере задается между тегами и . После тега следует тело документа. Под «телом» понимается весь набор элементов на web-странице. Это может быть текст, графика, ссылки, таблицы и др. Тег может включать множество атрибутов: 1 Атрибуты цвета в документах HTML задаются в системе RGB несколькими способами: - #RRGGBB, где каждая пара RR, GG, BB определяет наличие соответствующего цвета. Цвет получается из смешивания красного (RR), зеленого(GG) и синего(BB) цветов. Каждый пара описывается числом от 0 до FF в шестнадцатеричной системе счисления; - color соответствующий цвет на английском языке. В таблице 1 приведены основные цвета HTML. Таблица 1.1. Основные цвета Цвет Color #RRGGBB Цвет Color #RRGGBB black #000000 silver #c0c0c0 черный серебряный red #ff0000 темно-бордовый maroon #800000 красный green #008000 lime #00ff00 зеленый известь olive #808000 yellow #ffff00 оливковый желтый navy #000080 blue #0000ff темно-синий синий purple #800080 fuschia #ff00ff фиолетовый фуксия teal #008080 aqua #00ffff чирок аква gray #808080 white #ffffff серый белый В качестве значений атрибутов для числовых значений (#) используются: - десятичные числа с единицами измерения (например, 1px, 1pt, 1cm) – размер вычисляется соответственно в пикселях, пунктах, сантиметрах и т.д.; - десятичные числа (например, 5) – в этом случае в качестве единицы измерения используется пиксель (px); - проценты (10%) –размер вычисляется в процентах от охватывающего элемента. Задания для самостоятельного решения 1. Создать HTML-страницу с заголовком «Я изучаю HTML». Для этой страницы установить серый цвет фона и темно-синий цвет текста. 2. Изменить созданную страницу, установив для нее фоновый рисунок. 1.2. Описание HTML тегов 1.2.1. Комментарий Для пояснений фрагментов кода используется тег комментария . Например: 1.2.2. Форматирование фрагментов текста Форматирование текста – это средства, позволяющие менять вид текста, например, изменение размера, начертания, применение различных эффектов. Ниже приведены некоторые теги, используемые для форматирования фрагментов текста: пример - полужирное начертание (пример); пример - курсивное начертание (пример); пример - курсивное начертание (пример); пример - подчеркивание текста (пример); 2 пример - зачеркнутый текст (пример); пример - текст фиксированной ширины (пример); пример- подстрочное написание (пример); пример - надстрочное написание (пример); пример - установка различных характеристик шрифта. Последний тег имеет атрибуты, с помощью которых можно задать тип шрифта, его размер и цвет: Любые теги форматирования текста можно использовать совместно друг с другом. Например: HTML-код Страница в браузере HTML – это язык гипертекстовой разметки, который используется для создания web-страниц. HTML – это язык гипертекстовой разметки, который используется для создания webстраниц. Задания для самостоятельного решения HTML-код, для следующего фрагмента текста, 1. Написать сохранив его форматирование: Даны n точек на плоскости: (x1, y1), (x2, y2), …, (xn, yn). Найти: а) точку * (x , y*), наиболее удаленную от начала координат; б) точку (x0, y0), ближайшую к началу координат. 2. Как будет отображен в браузере следующий фрагмент HTML-кода: Вычислить сумму ряда 1x2+x4-...(-1)nx2n для заданного числа членов n и |x| < 1. Значения n и x вводятся пользователем. 1.2.3. Создание и форматирование текстового документа Средствами HTML-тегов можно получить привычную структуру текстового документа: разделить текст на абзацы, выделить разделы и подразделы, использовать различные типы списков и т.д. Абзацы текста В языке HTML для разделения текста на абзацы используется парный тег

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

выравнивание абзаца по левому краю, по центру, по правому краю и по ширине страницы соответственно. Остальные характеристики абзаца, такие как отступ первой строки, интервал между строками можно задать, используя CSS. 3 Заголовки Структуру документа, разделенного на главы, разделы, подразделы и пр., можно создать, используя заголовки разного уровня. Для описания заголовков используют шесть парных тегов:

текст

- первый уровень;

текст

- второй уровень;

текст

- третий уровень;

текст

- четвертый уровень;
текст
- пятый уровень;
текст
- шестой уровень. Например, использование данных тегов позволит создать web-страницу вида: HTML-код Страница в браузере Основы языка HTML

Основы языка HTML

Описание тегов

Форматирование документа

Список

Нумерованный список
Атрибуты списка
Описание тегов Форматирование документа Список Нумерованный список Атрибуты списка Каждый уровень заголовка имеет собственное стандартное форматирование, например, для заголовка уровня 1 определено: размер шрифта 14, полужирное начертание. Заголовки можно выровнять на странице, для этого используется атрибут align: Разделители Для перехода на следующую строку в любом месте документа используется непарный тег
. Он применяется, если нет необходимости создавать новый абзац, как, например, в следующем случае: HTML-код Страница в браузере Абзац - это...

Абзац - это...

Способы форматирования абзаца:
по центру,
по правому краю,
левому краю,
по ширине

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

Структура HTML-страницы

Структура HTML-страницы Тег имеет следующие атрибуты: 4
Списки Списки служат для упорядочивания информации однородного характера. Списки могут быть нумерованными и маркированными. Список в документе HTML состоит из парного тега, определяющего список, и тегов, отделяющих каждый элемент списка друг от друга. Нумерованный список создается парным тегом
    , который имеет следующие атрибуты:
      Отдельные элементы списка создаются с помощью парного тега
    1. . Пример использования нумерованного списка, для нумерации используются маленькие латинские буквы, список нумеруется, начиная с буквы j (так ка эта 10-я буква в латинском алфавите): HTML-код Страница в браузере
      1. element 1
      2. element 2
      3. element 3
      j. element 1 k. element 2 l. element 3 Маркированный список задается парным тегом
        , имеющим следующие атрибуты:
          Пример создания неупорядоченного списка, в котором используется квадратный маркер: HTML-код Страница в браузере
          • element 1
          • element 2
          • element 3
     element 1  element 2  element 3 5 Задания для самостоятельного решения 1. Напишите фрагмент HTML-кода для создания следующей страницы (рисунок 1.1): Рис. 1.1. Web-страница «Основы HTML» 2. Исправьте ошибки и неэффективное использование тегов в следующем HTML-коде так, чтобы получилась страница, показанная на рисунке 1.2:

    Возможности HTML