Проверка задания 8
На уроке 13 вы получили задание:
- Создать новый проектный файл "project15.html".
- Скопировать код моего проекта и текст всех блоков моего варианта.
- Назначить различные цвета, шрифты, размеры, толщину, начертание и размерность в каждом блоке.
В итоге, вы получили разнообразные варианты использования значений селекторов шрифта и цвета.
На данном занятии мы научимся создавать полноформатные html-файлы, которые будут читаться в любом широко распространённом браузере одинаково.
Для этого вспомним, что кроме Google Chrome мы часто используем Yandex, Internet Explorer, Mozilla Firefox, Microsoft Edge и Opera. Другие браузеры либо менее популярны, либо уже уже уходят в лета. Если мы откроем наш текущий проектный html-файл "project15.html", например, в Internet Explorer, то увидим примерно такую картинку:
Оказывается, наш проект нечитабелен в некоторых браузерах, хотя мы ещё ничего толком и не делали: текст представлен в виде иероглифов. Сегодня мы исправим данную проблему раз и навсегда в своей работе.
Автоматизация создания структуры html-файла
Для того, чтобы создать полноформатный html-файл в редактора Sublime Text 3, необходимо сделать ряд действий.
1. Открываем новый файл в редакторе:
2. Именуем его "project16.html" и сохраняем в нашей папке проектов:
3. Чтобы создать простейшую структуру страницы сайта, в редакторе Sublime Text достаточно начать с прописания формата файла <html>:
После выбора тега <html> в окне редактора сразу появляется базовая структура html-страницы:
Уточним теперь, что означают все появившиеся парные теги HTML:
- <head> - тег HTML, предназначенный для заголовка страницы, который мы видим в закладке браузера, и технической информации;
- <title> - тег HTML, включающий в себя сам заголовок страницы, который мы вилим в закладке браузера;
- <body> - тег HTML, который включает в себя весь контент страницы, который мы видим в окне браузера.
Пока нам этого достаточно.
4. Внутрь тега <head> прописываем тип кодировки нашего буквенного контента, чтобы любой браузер понял его и читал корректно. За это отвечает особый селектор:
- <meta> - метатег, отвечающий за предоставление значения кодировки текста внутри файла;
- charset - атрибут метатега <meta> кодировки связываемого документа.
Формат преобразования Юникода "utf-8" - распространённый стандарт кодирования символов, позволяющий более компактно хранить и передавать символы Юникода.
Следовательно, полная запись выглядит так: <meta charset="utf-8"> - и ставится выше парного тега <title>:
Стоит нам скопировать весь блок <head> из этого файла в файл "project15.html" в редакторе, как всё преобразуется в любом браузере!
Сохраняем заново наш домашний html-файл и проверяем, открыв его вновь в Internet Explorer:
5. Для комфортной и корректной работы с селекторами CSS и их значениями нам необходимо установить связь с внешним документом вроде файла со стилями или со шрифтами, т.е. неким общим каталогом, которым пользуются все дизайнеры сайтов. За это отвечает тег <link>, т.е. "ссылка". Он устанавливается также в разделе внутри тега <head>, обычно под тегом <meta>. Запись атрибутов этого тега автоматизирована в редакторе Sublime Text:
Уточним, какие именно минимальные атрибуты содержит тег <link>:
- rel - определяет отношения между текущим документом и файлом, на который делается ссылка, по молчанию на каталог стилей CSS;
- type - MIME-тип данных подключаемого файла, обычно это текст и каскад CSS для html-файлов;
- href - путь к связываемому файлу, которого у нас пока нет, поэтому значение именно этого атрибута будет всегда изначально пустым.
Теперь ваш html-файл получил минимальный набор тегов и ссылок, которые помогут ему корректно отображаться во всех основных браузерах, используемых в Интернете.
Основные разделы современной html-страницы
В 5-м поколении языка HTML появились два достаточно важных раздела основной части веб-страницы - "шапка" и "подвал":
- <header> - парный тег для отображения содержимого верхней части html-страницы, чаще всего, общей для всех страниц сайта или раздела сайта;
- <footer> - парный тег для отображения содержимого нижней части html-страницы, чаще всего, общей для всех страниц сайта или раздела сайта.
Пример расположения "header" и "footer" на странице сайта:
В "шапке" html-страницы, чаще всего, размещают какое-либо тематическое изображение, общее для всего сайта, а в "подвале" - ссылки на основные разделы сайта, авторские права и название панели администрирования с годами её размещения. Иногда, как показано в данном примере, в "подвале" сайта размещается группа гиперссылок на интернет-ресурсы по теме сайта.
Данные контейнеры располагаются внутри раздела <body>. Между "шапкой" и "подвалом" страницы располагаются различные контейнеры с тематическим контентом - словесным, символическим и иллюстративным.
Теперь вставим парные теги <header> и <footer> в наш новый проект "project16.html":
Теперь между <header> и <footer> мы можем размещать любые контейнеры и внутренние блоки контента страницы!
Практика
Задание 9.
- Создать отдельную проектную папку "Project-One".
- Внутри данной проектной папки создать папки "resume" и "img".
- Переименовать наш новый html-файл "project16.html" в "main" и поместить в папку "resume".
- Разместить на странице текст резюме, разбив его внутри на логические абзацы (<p>) и выделив в тексте отдельные подзаголовки.
Текст резюме:
Иванова Наталья Сергеевна
33 года (родилась 14 марта 1987), высшее образование, состоит в браке, есть дети
Место проживания: Москва, Преображенская площадь, д. 16.
Гражданство: Россия
Опыт работы: 10 лет и 3 месяца
Стаж:
Май 2014 – работает сейчас, 5 лет и 11 месяцев
Делопроизводитель
ООО "Мир школьников", Москва
Один из самых крупных магазинов канцелярских товаров и школьных принадлежностей в Москве (500 кв. м.). Больше 10 000 клиентов в день. 150 сотрудников и более 47 тысяч наименований
Сентябрь 2005 – январь 2010
Оператор ПК
ГБОУ школа №1076, Москва
Средняя общеобразовательная школа, педагогический коллектив 25 человек, 600 учеников
Образование:
Московский государственный гуманитарный университет имени М.А.Шолохова
Факультет: Документоведение и архивоведение
Специальность: Специалист по документообороту
Знания и навыки:
Профессиональные навыки:
Грамотная устная и письменная речь
Хорошее знание офисных программ: Word, Excel, 1С
Организаторские способности
Навыки приема входящих звонков, регистрации документов
Опыт работы с большим объемом документов - 150 ежедневно
Опыт работы в системе электронного документооборота, знание ЕМИАС
Знание стандартов делопроизводства и составления документов
Умение из большого объёма информации выделять главное
Дополнительные сведения:
Усидчивость, ответственность и внимательность позволяют мне качественно работать с документами любого объёма и содержания.
============================================================
На следующем уроке мы научимся размещать на странице тематический текст и иллюстрации.
Если вам понравилось, подписывайтесь на мой канал!
PhD Alexander G. Buychik, info@buychik.ru, +79217702472