11 класс

Задание к Уроку 2 "Вставка графики, звука и видео в HTML документ" 28.01.2016. Пройдите по ссылке РИСУНКИ

Оформите свой HTML документ рисунком по теме стихотворения, выбранного на прошлом уроке.

Задание к Уроку 1 "Форматирование текста в HTML документе" 15.01.2016

Создайте HTML документ и отформатируйте текст  по образцу. Выберите и копируйте любое из предложенных заданий.

Задание 1.

Автор неизвестен 

Бонсай

Урезана крона. Бонсай.

А я к облакам хочу…

Корябай когтями, кусай -

Корнями взмахну, полечу!

В глазах нарисованных - высь,

И в шёлковых крыльях - восход.

Восточного ветра мысль -

Поэма солёных вод.

И с пением сакур в саду

Мой шёпот тебя манил

И звал на мою беду

Он пару воздушных крыл.

Задание 2

Василий Лепилов

Космическая сказка

(фрагмент)

Окрашен космос в чёрный цвет,

Поскольку атмосферы нет,

Ни ночи нет, ни дня.

Здесь нет земной голубизны,

Здесь виды странны и чудны:

И звёзды сразу все видны,

И Солнце, и Луна.

На севере звезда видна,

И называется она

Полярною звездой.

Она надёжный друг людей,

И две Медведицы при ней

Среди космических огней

Всё ходят чередой.

Невдалеке притих Дракон.

Косится на Медведиц он,

Жует концы усов.

И долго наблюдал Орёл,

Как тощий Волк куда-то брёл

И стороною обошёл

Созвездье Гончих Псов.

Спокойно спал небесный Лев,

Раскрыв свой страшный львиный зев

(Со львами не шути!)

Кит к Андромеде подплывал,

Пегас стремительно скакал,

И гордо Лебедь пролетал

По Млечному Пути.

Задание 3.

Драгоценные камни

Камень Иоанна, нежный изумруд,

Драгоценный камень ангелов небесных, -

Перед теми двери Рая отомкнут,

Кто тебя полюбит в помыслах чудесных, -

Цвет расцветшей жизни, светлый изумруд!

Твердая опора запредельных тронов,

Яшма, талисман апостола Петра, -

Храм, где все мы можем отдохнуть от стонов

В час когда приходит трудная пора, -

Яшма, украшенье запредельных тронов!

Камень огневой неверного Фомы,

Яркий хризолит оттенка золотого, -

Ты маяк сознанья над прибоем тьмы,

Чрез тебя мы в Боге убедимся снова, -

Хризолит прекрасный мудрого Фомы!

Символы престолов, временно забытых,

Гиацинт, агат и дымный аметист, -

После заблуждений, сердцем пережитых,

К небу возвратится тот, кто сердцем чист, -

Легкий мрак престолов, временно забытых!

Радость высших духов, огненный рубин,

Цвета красной крови, цвета страстной жизни, -

Между драгоценных камней властелин,

Ты нам обещаешь жизнь в иной отчизне, -

Камень высших духов, огненный рубин!

Бальмонт Константин

Задание 4

Речные рыбы

Вот стайка рыбок замерла,

У мелочи одна наука –

Сверкнув глазами, приплыла…

Скорее в тину! Это - … (щука).

Под корягою лежит,

В летний жаркий полдень спит.

Любитель родников, глубин,

Изворотливый… (налим).

Золотая чешуя, красны плавники,

Бабочек, кузнечиков кушает с тоски.

Разоделся, словно князь,

Хороша ты, рыба… (язь)!

Краснопёр, полосат, гроза любой реки,

В страхе разбегаются от него мальки.

Ох, не любит котелок

Этот шустрый … (окунёк).

Любит в тине он копаться

И личинками питаться,

Чмокать в ряске по ночам

И клевать по вечерам.

Нипочём рыбешке грязь,

А зовут его… (карась).

Ползёт по дну, грозит клешнями.

Спасайся, мелочь и червяк!

По норам прячется за пнями.

Варёный – красный. Это… (рак).

Вл. Лактионов

Задание 5

Повелитель драконов

Ты знаешь, что я повелитель драконов,

Что я говорю на древнейшем наречье,

Что я не боюсь ни когтей заострённых,

Ни взгляда, ни даже... с драконами встречи?

Хочешь, на клич мой призывный и долгий

Выйдет, посветит глазом блестящим -

Хитрый, проворный, гибкий и чёрный -

Но всё равно, как ни странно, не страшный.

Я ему слово скажу по-драконьи,

Я его нежно поглажу по спинке,

Миску поставлю на подоконник -

Надо ж кормиться чем-то скотинке.

Мяса наевшись, он песню исполнит

На своём древнем драконьем наречье -

Так он поёт повелителям только,

Кто не боится с драконами встречи.

Те, кто услышат хоть раз эту песню,

Будут теплом и уютом согреты

Песни на древнем драконьем наречье...

Песенкой кошки, съевшей котлету.

15.05.2002

Дополнительный материал!!!

Стили оформления:

Поработав над несколькими страницами, ты уже понял, что процесс создания страницы (кроме собственно её придумывания и подбора информации) можно разделить на два этапа: формирование структуры страницы (вёрстка) и её оформление. При работе над сложными страницами в профессиональных командах этими процессами занимаются разные люди. Как это может выглядеть, если использовать только язык HTML? Сначала корректировщик сверстал страницу, вставив на неё текст и разметив его нужными тегами. После этого по все тегам «проходит» дизайнер и добавляет нужные атрибуты и теги… И опять появляется желание где-то в отдельном, но едином для всех страниц месте указать правила оформления тех или иных тегов или блоков веб-страницы.

И, наконец, некоторые возможности нам просто недоступны. Мы не можем указать отступ абзаца или его первой строки (сформировать так называемую красную строку). Мы не можем обвести рамкой какой-то  фрагмент текста, а рамке рисунка не можем задать цвет. Мы не можем размещать объекты страниц там, где нам хотелось бы, например, разместить текст столбцами или создать врезку – фрагмент текста, который обтекается основным текстом. Все эти «не можем» привели к разработке ещё одного «языка», языка оформления веб-страниц, а точнее, языка создания стиля страницы: Cascading Style Sheets, CSS, или Каскадные таблицы стилей.

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

СТИЛЕВОЕ ПРАВИЛО

Такое «оформительское указание» достигается с помощью стилевых правил.

Каждый элемент веб-страницы имеет некоторые явные или неявные свойства. Например, у текста это цвет, гарнитура, размер шрифта, его расположение на строке (нормальное, верхний или нижний индекс), высота строки, разрядка символов, цвет фона, начертание. Стилевое правило позволяет изменить все эти свойства независимо от ого, поддерживаются они html-атрибутами или нет.

Стилевое правило выглядит следующим образом:

Селектор {свойство1: значение1; свойство2: значение2;…}

Здесь селектор – это обозначение блока страницы, к которому будут применяться описанные правила. Пара свойство: значение называется стилевым определение.

Какие  же бывают селекторы?

СЕЛЕКТОРЫ

Селектор – тег указывает имя тега, к которому будет применяться стилевое правило. Например, чтобы все заголовки <H3> выровненными по центру и приобрели тёмно-красный цвет, используется следующее правило:

H3 {color#880000; text-align: center;}

Не правда ли, стилевое правило очень похоже на описание атрибутов, только вместо знака = ставится двоеточие, да разделяются определения не пробелом, а символом ; (точка с запятой).

·         Селектор-группа. Если одно стилевое правило применяется к нескольким тегам, эти теги можно перечислять через запятые:

H1, H2, H3 {color:#880000;}

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

TD  A  {color: #880000}

·         Селектор-класс. Если необходимо определить свойства блока, которому не соспоставлен ни один тег, для блока задают класс. Так, если мы хотим левую половину страницы оформить чёрным по белому, а правую – белым по чёрному, мы можем создать два класса:

.left {

   color:#000000;

   background-color:#FFFFFF;}

.right {

color:#FFFFFF;

background-color:#FFFFFF;}

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

<DIV class=”left”> первый блок</DIV>

<DIV class=”right”> второй блок</DIV>

·         Селектор –псевдокласс. Псевдоклассы описывают некоторые состояния элементов страницы. Самым ярким представителем  элементов, которые могут находится в различных состояниях, являются гиперссылки – кроме обычного состояния, гиперссылка может быть посещённой (та, на которой посетитель уже побывал), активной ( в тот момент, когда посетитель нажал гиперссылку), наведённой( в тот момент, когда на гиперссылку наведён указатель мыши). Вот эти состояния и описываются псвдоклассами:

·         A:link – обычная;

·         A:visited – посещённая;

·         A:active – активная;

·         A:hover – наведённая.

Пусть, например, все гиперссылки не будут подчёркиваться, посещённая будет выводится желтым цветом на зелёном фоне, а наведённая – зелёным на жёлтом. Тогда стилевые правила запишутся так:

A { text –decoration: none;

}

A: visited {color: #FFFF00;

                    background-color: #008800;

}

A: hover { color: #008800;

                    background-color: #FFFF00;

}

Задание 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. Для созданных ранее абзацев задайте выравнивание по ширине (для первого абзаца) и по правому краю (для второго).

3 Использование языка CSS

Абзацы правильнее выравнивать с помощью CSS (языка описания внешнего вида HTML-документа). Для этого в отдельном файле или контейнере head определяют стили оформления для различных элементов. Например, раздел head может содержать такой контейнер style:

<style type="text/css"> 
 .rt {text-align:right;}
 .jtf {text-align:justify;}
</style>

Далее следует указать желаемые стили для абзацев. Точка говорит о том, что мы имеем дело с классом. Следовательно, в теге p должно быть записано, например, так:
<p class="rt">…

Задание 5. Удалите ранее добавленный атрибут align у абзацев. Выровняйте абзацы, используя язык CSS

Результат практической работы

<html>
 
<head>
 
<title>ЭВМ – электронно-вычислительная машина</title>
 
<style type="text/css">
 .rt {text-align:right;}
 .jtf {text-align:justify;}
</style>
 
</head>
 
<body>
<p class="jtf">Появление персональных компьютеров в начале семидесятых годов (параллельно с постепенной эволюцией крупных ЭВМ) сейчас расценивают как революционный переворот. Масштабы его влияния на человеческое общество сравнивают с последствиями от изобретения книгопечатания.</p>
<p class="rt">В мире уже сейчас имеются миллионы и миллиарды ЭВМ. <br/>Их число продолжает неуклонно расти!</p>
</body>
 
<html>

 задания из материалов сайта http://inf1.info

Задание 2. "Вставка графических объектов в HTML-документ".

Загрузите ссылки в адресную строку и скопируйте текст и рисунок. Отформатируйте текст, вставьте в него рисунок. Не забудьте чтобы все выглядело красиво и читабельно!!!
https://sites.google.com/site/wegotoschool28/%D1%8F%D0%B1%D0%BB%D0%BE%D0%BD%D1%8F.txt?attredirects=0&d=1
https://sites.google.com/site/wegotoschool28/ranetka.jpg?attredirects=0&d=1

Задание 1. "Форматирование HTML-документа"

Скопируйте ссылку в адресную строку браузера  и просмотрите веб-страницу
https://docs.google.com/viewer?a=v&pid=sites&srcid=ZGVmYXVsdGRvbWFpbnx3ZWdvdG9zY2hvb2wyOHxneDoxZjRlYTAzOGQ1YzZlNGVi
 Создайте страницу по образцу, без добавления картинки. Текст можете скопировать из файла
https://sites.google.com/site/wegotoschool28/%D1%82%D0%B5%D0%BA%D1%81%D1%82.txt?attredirects=0&d=1