Методические разработки практических работ по информатике по темам "Язык разметки HTML" и "Современные web-технологии" (для учащихся средних классов).

При проведении занятий с использованием данных методических разработок для создания html- и css-файлов рекомендуется использовать обычный текстовый редактор, поддерживающий подстветку синтаксиса языков HTML и CSS, а также желательно включающий возможность работы с несколькими файлами в многостраничном режиме.

Например, для Windows подойдет Notepad++ (notepad-plus-plus.org). В текстовом редакторе Notepad++ для того, чтобы выполнялся перенос длинных строк, надо в меню выбрать командуВид -> Перенос строк. Также очень хорошим текстовым редактором является Notepad2 (flos-freeware.ch/notepad2.html). Однако он не поддерживает многостраничный режим работы. Установка переноса строк в нем выполняется с помощью командыView -> Word Wrap.

1. Html–документ. Абзацы, разрывы строк, выравнивание

1 Структура html-документа

Исходный код HTML-документа состоит из тегов и содержания.

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

Любой HTML документ всегда включает контейнеры html, headиbody, которые вложены друг в друга следующим образом:

Задание 1. Создайте файл и задайте ему структуру, которая приведена выше. Сохраните его.

В контейнере headобычно присутствует контейнерtitle, содержимое которого отображается в заголовке окна документа.

Задание 2. Добавьте в документ контейнер title:

Сохраните файл и откройте в браузере. Найдите введенное вами содержание title.

Содержимое body отображается в окне браузера.

С помощью тега-контейнера pразмечают абзацы. Одиночный тегbrпозволяет перейти на новую строку без создания нового абзаца, т.е. создает разрыв строки.

Задание 3. Добавьте в контейнер bodyследующее содержимое:

Появление персональных компьютеров в начале семидесятых годов(параллельно с постепенной эволюцией крупных ЭВМ)сейчас расценивают как революционный переворот. Масштабы его влияния на человеческое общество сравнивают с последствиями от изобретения книгопечатания.

В мире уже сейчас имеются миллионы и миллиарды ЭВМ.
Их число продолжает неуклонно расти!

Сохраните. Обновите документ в браузере. Отметьте, сколько абзацев вы видите, где находится разрыв строки.

2 Выравнивание абзацев. Старый стиль

Выравнивание абзацев определяется значениями left(по левому краю),right(по правому),center(по центру) иjustify(по ширине). Эти значения могут быть присвоены свойствуalign(выравнивание), которое допустимо для многих тегов.

Так, например, выравнивание абзаца по центру можно задать так:

Задание 4. Для созданных ранее абзацев задайте выравнивание по ширине (для первого абзаца) и по правому краю (для второго).

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

*Наведите курсор мыши для приостановки прокрутки.

Назад Вперед

30 хороших практик в CSS для новичков

CSS - язык, используемый в какой-то момент практически каждым разработчиком. Хотя мы порой воспринимаем его как должное, он, тем не менее, является мощным средством и имеет множество нюансов в применении, позволяющих помочь в разработке качественного дизайна (либо затруднить данный процесс). Ниже представлено 30 хороших рекомендаций, которые помогут вам писать правильный и грамотный код, избегая многих типичных ошибок.

1. Сделайте его легко читаемым

Легкая читаемость вашего CSS-файла очень важна, хотя многие недооценивают этот момент. Хорошая читаемость позволяет вам упростить работу с ним в будущем, при поддержке сайта, так как вы будете в разы быстрее находить нужные вам элементы. Также помните о том, что ваш файл может потребоваться изучить и поправить кому-то другому.

Заметка
При написании CSS-файлов, большинство разработчиков разделяются на две группы, две крайности.

Группа 1: Все в одну линию

SomeDiv { background: red; padding: 2em; border: 1px solid black; }

Группа 2: Каждому стилю - отдельная строка

SomeDiv { background: red; padding: 2em; border: 1px solid black; }

На самом деле обе практике вполне хороши, хотя между представителями данных групп нередки разногласия! Просто имейте в виду - выбирать нужно тот вариант, на который вам приятно смотреть. Вот и все.
Заметка

2. Сделайте его целостным

Помимо повышения читабельности кода, сделайте его более целостным. Вы должны начать разрабатывать свой "суб-язык" CSS, который позволит вам придерживаться определенного стиля именования. Есть определенное количество классов, которые я создаю практически всегда, при этом я даю им одни и те же имена каждый раз. К примеру, я использую .caption-right для выравнивания картинок по правой стороне.

Подумайте о том, будете ли вы использовать тире и нижние подчеркивания в названиях ваших классов и ID, и в каких случаях вы будете так делать. Когда вы начинаете создавать собственные стандарты для CSS, вы становитесь куда ближе к профессионалам в этом деле.

3. Начните с фреймворка

Многие считают, что не стоит использовать CSS-фреймворки, но я думаю, что если кто-то потратил время и сделал программу, позволяющую ускорить процесс разработки, то зачем же изобретать колесо? Я знаю, что фреймворки не должны использоваться повсеместно, но во многих случаях их использование вполне оправдано.

Многие дизайнеры создают в процессе работы свои собственные фреймворки, и это тоже отличная идея, позволяющая сохранить единообразие и целостность кода в разных проектах.

Заметка
Не соглашусь. CSS-фреймворки - незаменимая вещь, но лишь для немногих, для тех, кто хорошо умеет ими пользоваться.

"Это скорее не вопрос изобретения колеса, а вопрос понимания того, как оно работает"

Если вы только начинаете разбираться в каскадных таблицах стилей, я бы рекомендовал вам держаться подальше от различных фреймворков как минимум в течение года. Иначе вы просто сами себя запутаете. Сначала научитесь CSS, потом уже оптимизируйте свою работу с этим языком.
Заметка

4. Используйте обнуление

Большинство CSS-фреймворков имеют встроенный "обнулятор" стилей, но если вы не собираетесь его использовать, вы можете прибегнуть к другим "обнуляторам". Сброс стилей позволяет избежать многих проблем с неодинаковым отображением в разных браузерах, задавая четкие параметры для размеров шрифтов, заголовков, величины внешних и внутренних отступов и т.д. Такое "обнуление" позволяет добиться одинакового отображения во всех браузерах.

Вот ссылки на одни из наиболее популярных сбросов: MeyerWeb , Yahoo’s developer reset . Как вариант, вы можете придумать свой "обнулятор", взяв за основу следующий .

5. Структурируйте ваши файлы стилей по принципу "сверху вниз"

Всегда имеет смысл структурировать файл CSS так, чтобы вы могли быстро найти нужную вам часть кода. Я рекомендую использовать принцип "сверху вниз", суть которого в том, чтобы составлять файл стилей в том порядке, в котором данные стили применяются на странице. К примеру:

1. Общие классы (body, a, p, h1, и т.д.) 2. #header 3. #nav-menu 4. #main-content

Не забудьте снабдить каждую секцию комментариями!

/****** main content *********/ здесь идут стили... /****** footer *********/ здесь идут стили...

6. Группируйте элементы

Часто элементы могут иметь пересекающиеся, общие стили. Вместо того, чтобы переписывать уже имеющийся код, лучше просто сгруппируйте элементы. К примеру, ваши заголовки h1, h2 и h3 могут иметь одинаковый шрифт и цвет:

H1, h2, h3 {font-family: tahoma, color: #333}

7. Создайте сперва HTML-разметку

Многие разработчики создают CSS-файл параллельно с созданием разметки HTML. Это кажется логичным, но все же вы сможете сэкономить немало времени, если сначала разберетесь с HTML и лишь потом - со стилями. Данный подход позволяет вам представить страницу как целое, подумать о том, где какие стили применить, получая на выходе более целостный файл стилей, выполненный по принципу "сверху вниз".

8. Применяйте несколько классов к элементу, если нужно

Иногда бывает лучше применить к элементу сразу несколько классов. Предположим, у вас есть контейнер div , которому вы хотите задать float:right , и у вас уже есть класс .right в вашем файле стилей, который выравнивает все по правому краю. Вы можете просто добавить еще один класс к вашему контейнеру div :

Вы можете добавить столько классов, сколько вам нужно, разделяя их пробелами.

Заметка
Будьте очень осторожны, используя имена вроде left и right . Представьте, что вам вдруг понадобилось выровнять контейнер по левой стороне. В этом случае вам нужно вернуться в HTML-код и изменить имя класса - и все это для того, чтобы изменить визуальное отображение на странице. Это несемантично. Запомните: HTML - для разметки, CSS - для визуального представления.

Если вам нужны правки в HTML для смены оформления страницы, вы делаете что-то не так!

9. Используйте правильный тэг Doctype

К элементам, относящимся к обоим типам можно отнести:

Span, a, strong, em, img, br, input, abbr, acronym

К блочным элементам относятся:

Div, h1...h6, p, ul, li, table, blockquote, pre, form

13. Располагайте свойства в алфавитном порядке

Применение такой системы расположения свойств позволит вам сэкономить немало времени при поиске нужного свойства.

#cotton-candy { color: #fff; float: left; font-weight: height: 200px; margin: 0; padding: 0; width: 150px; }

Заметка
Эх.., принести скорость в жертву слегка улучшенной читабельности.. Смотрите сами..
Заметка

14. Используйте CSS-компрессоры

Сжиматели CSS помогают значительно уменьшить размера файла стилей посредством удаления лишних переводов строк и комбинирования элементов. Все это позволяет вашему сайту загружаться быстрее. CSS Optimizer и CSS Compressor - два замечательных онлайн-сервиса для выполнения таких задач.

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

15. Используйте общие классы

Вы скоро заметите, что есть стили, которые вы применяете снова и снова. Вместо того, чтобы добавлять этот стиль к каждому ID, вы можете создать общие классы и добавлять их к ID других классов CSS (смотрите рекомендацию №8 данной статьи).

К примеру, я заметил, что я использую float:right и float:left снова и снова в своих дизайнах. Я просто добавляю классы .left и .right в свой файл стилей и применяю его к элементам.

Left {float:left} .right {float:right}

Таким образом, вам не нужно постоянно писать float:left для всех элементов, к которым нужно применить данное свойство.

16. Используйте "Margin: 0 auto" для центрирования дизайна

Многие новички в CSS не понимают, почему они не могут просто использовать float: center чтобы добиться эффекта центрации для блочных элементов. Если бы все было так просто! К сожалению, нужно делать это так:

Margin: 0 auto; /* 0 - для top и bottom; auto - для left и right */

17. Не заключайте все подряд в DIV

Частенько возникает соблазн сделать что-то вроде:

Может показаться, что это достаточно удачное решение, но так вы начнете захламлять свой файл стилей. Вместо этого сделайте проще:

Header Text

И уже для тэга h1 вы можете задать любое оформление, которое вам нужно.

18. Используйте Firebug

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!

Задачи по основам HTML призваны закрепить работу с набором следующих тем: структура HTML , комментарии в HTML, основные теги , основные атрибуты HTML . .

Задачи по изображениям в HTML: вставка изображения в HTML (HTML код изображения), размер HTML изображения , выравнивание изображения … в HTML.

Задания по углубленной работе с HTML и CSS

Задания по HTML с Emmet. Быстрая верстка , команды Emmet (так называемая шпаргалка Emmet ). После выполнения задач с плагином Emmet скорость вашей верстки/разработки вырастет в разы. .

Задания по CSS-селекторам. Селекторы CSS : css селекторы классов , css селекторы атрибутов , соседние селекторы css , контекстные селекторы css, дочерние селекторы +в css , приоритет селекторов . .

Работа CSS-позиционирования важна для понимания сложной верстки. Здесь приводятся задачи на понимание и работу с: position absolute , position relative , position fixed и position static , CSS-свойств top left bottom right . .

Задания по верстке форм

1. Сверстайте форму аутентификации на сайте, такую же как в Twitter Bootstrap (не используя этот фреймворк). Например, как в .
2. Сверстайте форму диспетчера на сайте
3. Подключить jQuery-плагин для выбора даты/месяца из поля
4. Создайте чекбокс по аналогии с социальной сетью.
5. Создайте форму регистрации посетителя сайта
6. Создайте форму подобной той, что сортирует товары в Яндекс.Маркет

Одна из задач верстальщика — писать кроссбраузерный код. Код, который позволит страницам выглядеть в наибольшем количестве браузеров одинаково или максимально похоже. .

Современные возможности CSS позволяют создавать замечательные и работать с фоном раскрашивая его градиентной заливкой . Небольшой набор задач на CSS-анимацию .

Задания на медиа запросы (мобильные сайты). Создание мобильной версии сайта — важная часть умений веб-разработчиков. Задания посвящены темам: создание мобильного сайта , проверка мобильной версии сайта . .

Задания по верстке psd макета и CSS-фреймворкам. Верстка сайта на основе psd макета — важнейшая часть работы веб-верстальщика. На уроках HTML мы рассматриваем основные шаги верстки из psd в HTML. Задания .