Академия: Html, CSS для новичков, 1 неделя курса(Электронные издания)
Автор курса: Глухов А.С.
Курс: HTML, CSS для новичков
Первая неделя состоит из 6 видео-уроков, которые плавно вводят в мир HTML и CSS
1. Создаем первую web-страницу
Зачем сайту несколько web-страниц, если все можно разместить на одной большой?
Ответ заключается в том, что одна большая страница очень неудобная в использовании и необходимую информацию можно искать вечность. Например, Википедия создана из сетки сайтов, информация подается маленькими порциями. За счет гипертекста удобно переходить на другие ссылки. Маленькие сайты, которые представляют определенную компанию принято называть сайтами-визитками, а сайты, созданные для рекламы компании, называют промо-сайтами. Довольно-таки большую нишу захватили интернет магазины, для которых главное найти золотую середину: большой объем информации=красочность страницы.
В 1989 году Тим Бернерс-Ли создал язык гипертекстовой разметке, более известен своей аббревиатурой – HTML (HyperText Markup Language). До этого интернет существовал, но в нем не было переходов, ссылок, постоянно надо было заходить заново и вводить запросы. Тогда Тим Бернерс-Лии решил, что систему нужно менять и создал HTML.
Но язык гипертекстовой разметки должен был как-то считываться и подаваться. Так, появились специальные программы – браузеры.
Как же браузер считывает гипертекст? Он считывается с помощью специальных тегов:
Он считывается с помощью специальных тегов:
2. Создание страниц в Kompozer
Нужно ли помнить все теги и набирать их вручную?
Чтобы упростить задачу были придуманы визуальные HTML-редакторы.
WISIWIG (визивиг) означает «Что ты видишь, то и получишь» (What You See Is What You Get). Kompozer – это бесплатный WISIWIG HTML-редактор.
Функционал состоит из нескольких режимов:
· Дизайн; · Объединенный (дизайн+код);
· Код;
· Предварительный просмотр
· HTML теги.
Также, есть панель форматирования, которая помогает изменить, стилизовать текст, и панель компоновки (редактирует рисунки).
Чтобы изменить цвет, стиль шрифта стоит использовать язык CSS (Cascading Style Sheets). Так, с помощью атрибута style есть возможность привязать нужные стилевые описания к любому тегу.
3. Оформление web-страниц с помощью таблиц
Как рационально размещать данные на web-странице?
Сначала необходимо представить размещение элементов на странице и запланировать дизайн с помощью таблиц. Далее, создадим таблицу:
Web-страницы делятся на два типа:
· «резиновые» (ширина в процентах, место используется эффективнее)
· «фиксированные» (ширина в пикселях)
4. Иллюстрирование web-страниц
Цветных иллюстраций должно быть много и больших размеров? Или необходимо экономить место?
Чтобы создать целостный графический образ, но при этом сайт быстро грузился и не появлялась горизонтальная прокрутка стоит придерживаться таких требований к иллюстрациям:
· Не очень большой размер (до 1 МБ)
· Ограничения по ширине, чтобы картинка помещалась в окне браузера и не вылезла за рамки.
· Использования логотипов и слоганов будет плюсом
· Выбор в качестве фона бесшовных обоев – отличный выбор
· Не забывать про авторские права и Creativity Commons (иллюстрация может быть в свободном доступе, но тоже с ограничением в использовании).
5. Создание навигации
Как связать несколько web-страниц в единое целое?
Навигация позволяет «переплывать» с одной страницы на другую с помощью ссылок. Удобная навигация(меню) позволяет объединить web-страницы и сделать сайт удобным в использовании.
В сложных сайтах имеется несколько уровней навигации (меню первого, второго, третьего и других уровней).
6. Структура CSS. Встроенные и внешние стили
Можно ли избежать загромождений HTML-кода, при этом используя различные стилевые решения?
Для этого есть 3 способа оформить элементы web-страниц с помощью CSS стилей:
1) Перечислить характеристики элементов стиля в атрибуте style внутри тега.
2) CSS описывает и стандартные, и произвольные стили.
Произвольный стиль имеет свои особенности:
· До названия точка
· Только латинские буквы или цифры
· Пробелы не допускаются
Пример: .left_table
Самый полезный и выгодный совет для сообщества Голос
Курс состоит из видео-уроков и практического задания, которое помогает быстрее вникнуть и разобраться, есть шанс запомнить несколько тегов.
Личное мнение
Курс полезный, легкий в понимании. Единственный минус - это то, что примеры сайтов в видео имеют целостный образ, а в практическом задании очень далеки от идеала.