- •Практические работы по html и css
- •1. Html–документ. Абзацы, разрывы строк, выравнивание
- •1 Структура html-документа
- •2 Выравнивание абзацев. Старый стиль
- •3 Использование языка css
- •Результат практической работы
- •2. Заголовки. Теги strong, em, span
- •Результат практической работы
- •3. Подключение внешней таблицы стилей. Отступы и обтекание
- •4. Тег Div. Вставка в html-документ изображений, их свойства и оформление
- •5. Создание и оформление гипертекстовых ссылок
- •Примерный результат практической работы
- •6. Создание шаблона сайта
- •7. Оформление таблиц с помощью css
- •Ответ к заданиям Задание 1.
- •Задание 2.
- •8. Упражнение на использование верхнего и нижнего регистров
- •9. Списки
- •Пример результата практической работы
Практические работы по html и css
Методические разработки практических работ по информатике по темам "Язык разметки 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, которые вложены друг в друга следующим образом:
<html>
<head>
…
</head>
<body>
…
</body>
</html>
Задание 1. Создайте файл и задайте ему структуру, которая приведена выше. Сохраните его.
В контейнере headобычно присутствует контейнерtitle, содержимое которого отображается в заголовке окна документа.
Задание 2. Добавьте в документ контейнер title:
<title>ЭВМ – электронно-вычислительная машина</title>
Сохраните файл и откройте в браузере. Найдите введенное вами содержание title.
Содержимое body отображается в окне браузера.
С помощью тега-контейнера pразмечают абзацы. Одиночный тегbrпозволяет перейти на новую строку без создания нового абзаца, т.е. создает разрыв строки.
Задание 3. Добавьте в контейнер bodyследующее содержимое:
<p>Появление персональных компьютеров в начале семидесятых годов(параллельно с постепенной эволюцией крупных ЭВМ)сейчас расценивают как революционный переворот. Масштабы его влияния на человеческое общество сравнивают с последствиями от изобретения книгопечатания.</p>
<p>В мире уже сейчас имеются миллионы и миллиарды ЭВМ.<br/>Их число продолжает неуклонно расти!</p>
Сохраните. Обновите документ в браузере. Отметьте, сколько абзацев вы видите, где находится разрыв строки.
2 Выравнивание абзацев. Старый стиль
Выравнивание абзацев определяется значениями left(по левому краю),right(по правому),center(по центру) иjustify(по ширине). Эти значения могут быть присвоены свойствуalign(выравнивание), которое допустимо для многих тегов.
Так, например, выравнивание абзаца по центру можно задать так: <p align="center"> …
Задание 4. Для созданных ранее абзацев задайте выравнивание по ширине (для первого абзаца) и по правому краю (для второго).