Набор текстовых файлов презентация

Содержание

Сайт – набор текстовых файлов (каждый из которых соответствует странице сайта) Набор текстовых файлов в формате HTML

Слайд 1HTML
express.courses.dp.ua

Слайд 2Сайт – набор текстовых файлов (каждый из которых соответствует странице сайта)
Набор

текстовых файлов в формате HTML

Слайд 3Зачем нужен
HTML?

Слайд 4Зачем нужен HTML?
HTML задумывался как средство переноса научной документации в электронный

вид

Слайд 5Зачем нужен HTML?
Никакой структуры, сложно разобраться, что к чему.
Удобная для человека

структура документа.


Слайд 6Зачем нужен HTML?
Структура появилась, но всё равно воспринимать текс сложно…

Слайд 7
Это заголовок (название)

Это аннотация

А это пошли параграфы
Зачем нужен HTML?
Чтобы браузер мог

отобразить текст «по человечески» ему нужны подсказки

Слайд 8Зачем нужен HTML?
Но подсказки должны сами быть частью текстового файлов.
Подсказками для

браузера выступают теги.

Слайд 9HTML (HyperText Markup Language) – язык разметки текста, по сути структурирует

(определяет структуру текста) и выполняет роль контейнера для текста (данных, информации).

Данные + Метаданные

Page title

Текст + Как текст отобразить

Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.

Слайд 10HTML-документ

уточняют задачи тега, теги могут быть без атрибутов);

Текстовые данные (содержимое, контент).

состоит из:

Теги могут быть парными и одиночными;

Слайд 11Блокнот
Текстовый редактор

Слайд 12Notepad++
Текстовый редактор

Слайд 13Первый HTML-документ
Сохраните как *.html, и нажмите Ctrl+Shift+Alt+R

Слайд 14Структура
HTML-документа

Слайд 15Структура HTML документа

Слайд 16Древовидная структура HTML-документа
Структура HTML документа

Слайд 17Древовидная структура HTML-документа
Структура HTML документа

Слайд 18Объявление типа документа

Слайд 19
Служебная / «невидимая» часть документа

Слайд 21
Содержимое / контент документа

Слайд 22Строчные и блочные теги
(Inline & Block)
Все теги в относятся к

одной из двух категорий

Слайд 23Строчные и Блочные теги






Слайд 24Блочные (Block)
, …, …
Строчные (Inline)
, , , , , …

Слайд 25Строчные и блочные теги
Блочным называется элемент, который отображается на веб-странице в

виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки.

Строчные элементы можно вставлять в блочные.

Строчными называются такие элементы документа, которые являются непосредственной частью строки.

Слайд 26Строчные и блочные теги
Блочные теги применяют когда необходимо сделать абцаз (или

занять прямоугольную область).

Строчные элементы можно вставлять в блочные.

Строчными теги применяют когда в абзаце часть строк необходимо выделить особым образом.

Слайд 27Строчные и блочные теги
Подготовьте такой документ, чтобы не набирать текс воспользуйтесь

текстом-«рыбой» для заполнения тегов.

Для этого нам пригодиться сайт-генератор Loren Ipsum текста: http://uk.lipsum.com/

Слайд 28Строчные и блочные теги
Добавляем тегов и смотрим, что происходит

Слайд 29Строчные и блочные теги
Блочные теги требуют выделения для себя прямоугольной области

на странице.

Строчные элементы работают с той областью страницы которую занимает строка (внутри этого самого строчного элемента).



Слайд 30Строчные и блочные теги
«Подкрасим» элементы для наглядности

Слайд 31Строчные и блочные теги
«Подкрасим» элементы для наглядности

Слайд 32Тег для изображений

src=""
width=""
height=""
alt=""

Слайд 33Тег для ссылки

href=""
target=""
rel=""

Слайд 34Изображения & ссылки
Сохраните как *.html, и нажмите Ctrl+Shift+Alt+R
Случайное изображение:
https://source.unsplash.com/random/800x600

Слайд 35Изображения & ссылки

Слайд 36Размещение элементов на странице
?!?
Что даст такая разметка?

Слайд 37Размещение элементов на странице

Вывод: независимо от того сколько у вас пробелов

(или табуляций) в тексте документа и переносов строк, браузер отобразит их как один пробел. И некоторые теги создают перенос строки….

Слайд 38О кодировке

Слайд 39HTML документ и кодировка


Проблемы с кодировкой…

Слайд 40

https://ru.wikipedia.org/wiki/Шестнадцатеричная_система_счисления
Кодировка

Слайд 41


Кодировка

Слайд 42KOI-8r
cp1251
В разных таблицах расширяющих ASCII кирилическими символами, эти самые кирилические символы

стоят на различных позициях.

Суть проблемы

Слайд 43KOI-8-r, cp1251,… => 1 байт = 256 различных символов. Даже 2

языковых набора влезают с трудом.

Unicode (UTF-8, UTF-16….)=> От 1 до 6 байт – триллионы символов. Все языковые наборы.

ASCII

UTF-8

Unicode как решение проблемы…

Слайд 44
…и сохранять файлы в кодировке UTF-8.

Чтобы

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

Слайд 45Будет полезным

Слайд 46www.w3.org
World Wide Web Consortium (W3C)

Слайд 47https://webref.ru/html
Если уровень английского языка не позволяет…

Слайд 48«Изучаем HTML и CSS». Эрик Фримен, Элизабет Фримен.

Слайд 49http://www.w3schools.com/html/
Тренажер по HTML

Слайд 50Домашнее задание

Слайд 51Узнать, что такое спецсимволы HTML зачем нужны, как правильно использовать:
http://www.google.com
Узнать, что

делают следующие теги: , ,
,
,