ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 30.11.2023
Просмотров: 17
Скачиваний: 2
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
2
Введение в HTML
• Каждый DNS сервер хранит данные
(таблицу соответствия всех известных текстовых доменных имен цифровым IP-адресам);
• DNS сервера разбиты на несколько уровней,
каждый из которых регулярно (примерно 2 раза в сутки)
получает обновление от DNS-сервера старшего уровня;
• DNS сервера самого старшего уровня получают данные от
Registars,
которые за плату хранят информацию о том, какое доменное имя принадлежит какому человеку;
http://k504.khai.edu/attachments/article/333/lect1-6.pdf
3
Создание собственного сайта http://k504.khai.edu/attachments/article/333/lect1-6.pdf
• Самостоятельная организация сервера, где будут находиться веб-страницы и данные сайта. Для этого требуется выделенный ip-адрес, зарегистрированное доменное имя и компьютер, подключенный к сети Интернет.
• Заказ платного или бесплатного
хостинга
у компаний, предоставляющих такие услуги (в этом случае требуется только зарегистрированное доменное имя или же бесплатно предоставляемое некоторыми хостингами доменное имя третьего уровня).
Основные характеристики хостинга:
- Выделенный или виртуальный хостинг;
- Наличие и величина ограничений на объем трафика;
- Объем выделяемого места на диске;
- Наличие поддержки PHP (важно какая именно версия PHP установлена) и других языков программирования;
- Количество доменов, которые можно привязать к своему аккаунту на хостинге.
4
Введение в HTML
HTML (HyperText Markup Language) - это язык разметки, который представляет простые правила оформления и компактный набор структурных и семантических элементов разметки (тегов). HTML позволяет описывать способ представления логических частей документа (заголовки, абзацы, списки и т.д.) и создавать веб- страницы разной сложности.
Теги - это ключевые слова, взятые в угловые скобки (символы меньше “<” и “>”).
Например, тег
означает, что в этом месте веб-страницы нужно вставить горизонтальную линию.
Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без привязки к средствам отображения. В идеале,
гипертекстовый документ должен одинаково выглядеть на различных устройствах (монитор ПЭВМ, экран ПДА или мобильного телефона, принтер,
медиа-проектор и т.п.). Это называется кросс-браузерность.
HTML-страница представляет собой текстовый файл, который можно набрать в любом текстовом редакторе и, который имеет расширение *.html или *.htm.
5
Элементы гипертекста
HTML-документ состоит из текста, который представляет собой информационное содержимое и специальных средств языка HTML — тегов разметки, которые определяют структуру и внешний вид документа при его отображении браузером.
Структура HTML-документа довольно проста:
Описание документа начинается с указания его типа (секция DOCTYPE).
Текст документа заключается в тег . Текст документа состоит из заголовка и тела, которые выделяются соответственно тегами — контейнер заголовка документа
— название документа (то, что отображается в заголовке окна браузера)
...
8
Теги: правила использования
HTML-тег состоит из имени, за которым может следовать необязательный список атрибутов. Весь тег (вместе с атрибутами) заключается в угловые скобки
<>
:
<имя_тега [атрибуты]>
Как правило, теги являются парными и состоят из начального и конечного тегов,
между которыми и помещается информация. Имя конечного тега совпадает с именем начального, но перед именем конечного тега ставится косая черта /
(...)
. Конечные теги никогда не содержат атрибутов. Некоторые теги не имеют конечного элемента, например тег
. Регистр символов для тегов не имеет значения.
Теги могут быть вложены, при этом форматирование внутреннего тега имеет преимущество перед внешним. При использовании вложенных тегов их нужно закрывать, начиная с самого последнего и двигаясь к первому
Браузеры обычно лояльно относятся к отсутствию конечных тегов у парных элементов и более-менее правильно отображают парные элементы уровня блока (p, li и т.п.), особенно в простых веб-документах. Тем не менее,
рекомендуется следить за наличием закрывающих тегов и использовать их,
чтобы избежать ошибок при воспроизведении документа.
9
Теги: правила использования
HTML-тег состоит из имени, за которым может следовать необязательный список атрибутов. Весь тег (вместе с атрибутами) заключается в угловые скобки
<>
:
<имя_тега [атрибуты]>
Как правило, теги являются парными и состоят из начального и конечного тегов,
между которыми и помещается информация. Имя конечного тега совпадает с именем начального, но перед именем конечного тега ставится косая черта /
(...)
. Конечные теги никогда не содержат атрибутов. Некоторые теги не имеют конечного элемента, например тег
. Регистр символов для тегов не имеет значения.
Теги могут быть вложены, при этом форматирование внутреннего тега имеет преимущество перед внешним. При использовании вложенных тегов их нужно закрывать, начиная с самого последнего и двигаясь к первому
Браузеры обычно лояльно относятся к отсутствию конечных тегов у парных элементов и более-менее правильно отображают парные элементы уровня блока (p, li и т.п.), особенно в простых веб-документах. Тем не менее,
рекомендуется следить за наличием закрывающих тегов и использовать их,
чтобы избежать ошибок при воспроизведении документа.
10
Атрибуты
Атрибуты — это пары вида «свойство = значение», уточняющие представление соответствующего тега
<тег атрибут="значение">...тег>
Атрибуты указывают в начальном теге, несколько атрибутов разделяют одним или несколькими пробелами, табуляцией или символами конца строки. Значение атрибута, если таковое имеется, следует за знаком равенства, стоящим после имени атрибута. Порядок записи атрибутов в теге не важен. Если значение атрибута — одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно. Все остальные значения необходимо заключать в кавычки, особенно если они содержат несколько разделенных пробелами слов.
Атрибуты могут быть обязательными и необязательными. Необязательные атрибуты могут быть опущены, тогда для тега применяется значение этого атрибута по умолчанию. Если не указан обязательный атрибут, то содержимое тега скорее всего будет отображено неправильно.
11
Атрибуты
Порядок атрибутов в любом теге не имеет значения и на результат отображения элемента не влияет.
Поэтому теги вида
и
по своему действию равны.
12
Часто используемые атрибуты
style
="описание_стилей" — локальные стили src
="адрес" — адрес (URI) источника данных (например картинки или скрипта)
align
="left|center|right|justify" — выравнивание, по умолчанию left (по левому краю)
width
="число" — ширина элемента (в пикселях, пиках, поинтах и др.)
height
="число" — высота элемента (в пикселях, пиках, поинтах и др.)
href
="адрес" — гиперссылка, адрес (URI) на который будет выполнен переход name
="имя" — имя элемента id
="идентификатор" — уникальный (в пределах веб-страницы) идентификатор элемента size
="число" — размер элемента class
="имя_класса" — имя класса во встроенной или связанной таблице стилей title
="строка" — название элемента
13
Гиперссылки
Гиперссылка - это особым образом помеченный фрагмент веб-страницы (текст, изображение и др.), который связан с другим документом. Для указания гиперссылок используется тег .
Гиперссылки позволяют перемещаться между связанными веб-страницами.
Пример
Скачать файл
Переход по ссылкам можно выполнять как на целые документы, так и на специальным образом помеченные (именованные) фрагменты текста.
Ссылки могут быть абсолютными и относительными. Абсолютные ссылки указывают, как правило, на внешний ресурс. Для них нужно указывать полный путь:
Абсолютная ссылка
Ссылка на страницу в каталоге
Относительные ссылки, напротив, используют для перехода на внутренние страницы сайта.
Для них нужно указывать путь относительно ссылающейся страницы:
Ссылка на страницу в корневом каталоге
Ссылка на фрагмент страницы в текущем каталоге
Ссылка на страницу в подкаталоге текущего каталога
Ссылка на страницу в подкаталоге корневого каталога
Ссылка на страницу в вышележащем каталоге
14
Особенности HTML
- HTML игнорирует все переводы строки внутри веб-страницы все дополнительные
(свыше одного) пробелы между словами;
- HTML инвариантен к регистру букв в тегах
(все равно, маленькими или заглавными буквами они набраны);
- Чтобы добавить лишние пробелы,
разделение строки или другие символы,
необходимо воспользоваться специальными обозначениями, которые всегда начинаются с
&
и заканчиваются точкой с запятой.
15
Использование текстовых редакторов
16
Использование текстовых редакторов
17
Использование текстовых редакторов
18
Использование текстовых редакторов
19
Просмотр кода web-страницы
20
Просмотр кода web-страницы
21
Просмотр кода web-страницы
22
Просмотр кода web-страницы
23
Пример простого HTML документа
24
Пример простого HTML документа
25
Пример простого HTML документа
26
Пример простого HTML документа
27
Примеры применения атрибутов
bold – полужирный
- параметры шрифта
SIZE=5 – размер color=red – цвет красный
Атрибутами в данном примере являются
SIZE
и color
28
Примеры применения атрибутов
29
Примеры применения атрибутов
30
Таблицы цветов