Практическое занятие №2.Использование CSS

Практическое занятие №1.Создание Web-страниц на языке HTML

1.Создайте папку «My_sait». 2. Откройте программу Блокнот. 3. Наберите структуру HTML-документа.

< HTML>

<HEAD>

</head>

<BODY>

…

</body>

</html>

2. Между тегами <BODY>…</body> введите информацию о России (из Википедии)

Россия, или Российская Федерация (РФ), — государство в Восточной Европе и Северной Азии. Территория России в её конституционных границах составляет 17 125 191 км.; население страны (в пределах её заявленной территории) составляет 146 745 098 чел. (2020). Занимает первое место в мире по территории, шестое — по объёму ВВП по ППС и девятое — по численности населения.

Столица — Москва. Государственный язык — русский.

Государственный строй — президентско-парламентская республика с федеративным устройством. С 31 декабря 1999 года (с перерывом в 2008—2012 годах) должность президента Российской Федерации занимает Владимир Путин. C 16 января 2020 года должность председателя Правительства РФ занимает Михаил Мишустин.

В состав Российской Федерации входят 85 субъектов, 46 из которых именуются областями, 22 — республиками, 9 — краями, 3 — городами федерального значения, 4 — автономными округами и 1 — автономной областью. Всего в стране около 157 тысяч населённых пунктов.

Россия граничит с шестнадцатью государствами (больше, чем любая другая страна в мире), а также двумя частично признанными государствами.

Россия — многонациональное государство с широким этнокультурным многообразием. Большая часть населения (около 75 %) относит себя к православию, что делает Россию страной с самым многочисленным православным населением в мире.

Россия — ядерная держава; одна из ведущих промышленных и космических держав мира; занимает 2-е место в рейтинге самых влиятельных стран мира (2019). Русский язык — язык мирового значения, один из шести официальных и рабочих языков ООН, ЮНЕСКО и других международных организаций.

Россия является постоянным членом Совета Безопасности ООН с правом вето; одна из современных великих держав мира.

После распада СССР в конце 1991 года Российская Федерация была признана международным сообществом как государство-правопреемник СССР в вопросах ядерного потенциала, внешнего долга, государственной собственности за рубежом, а также членства в Совете Безопасности ООН[25].

Россия состоит в ряде международных организаций: ООН, ОБСЕ, Совете Европы, ЕАЭС, СНГ, ОЧЭС, ОДКБ, ГКМЧП, ВОИС, ММО, ВТО, ЮНВТО, ВФП, ШОС, АТЭС, БРИКС, КООМЕТ, МОК, МЭК, ISO, EUREKA, IRENA, G20 и других

По данным Международного валютного фонда, объём ВВП по ППС за 2018 год составил 4,213 трлн долларов (29 267 долларов на человека). Денежная единица — российский рубль.

3. Сохраните файл в папке «My_sait», присвоив имя index.htm.

4. Зайдите в папку, вызовите контекстное меню на файле index.htm → открыть с помощью любого браузера.

5. Закройте браузер.

6. Откройте файл index.htm в Блокноте.

7. В строке <TITLE> введите текст: «Моя Россия».

8. Сохраните файл.

9. Просмотрите результат в браузере. Например, ваша первая страница будет выглядеть вот так:

Работа с текстом

1. Разделите текст на абзацы с помощью тегов <p>…</p>.

<p>Россия, или Российская Федерация (РФ), — государство в Восточной Европе и Северной Азии. Территория России в её конституционных границах составляет 17 125 191 км.; население страны (в пределах её заявленной территории) составляет 146 745 098 чел. (2020). Занимает первое место в мире по территории, шестое — по объёму ВВП по ППС и девятое — по численности населения.

Столица — Москва. Государственный язык — русский.</p>

<p>Государственный строй — президентско-парламентская республика с федеративным устройством. С 31 декабря 1999 года (с перерывом в 2008—2012 годах) должность президента Российской Федерации занимает Владимир Путин. C 16 января 2020 года должность председателя Правительства РФ занимает Михаил Мишустин.</p>

<p>В состав Российской Федерации входят 85 субъектов, 46 из которых именуются областями, 22 — республиками, 9 — краями, 3 — городами федерального значения, 4 — автономными округами и 1 — автономной областью. Всего в стране около 157 тысяч населённых пунктов.</p>

…….

Проверьте свою работу в браузере.

2. Добавьте перед текстом заголовок и разместите его по центру:

<h2> Моя Россия </h2> Проверьте свою работу в браузере.

3. Расположите заголовок по центру

<h2 align=center> Моя Россия </h2> Проверьте свою работу в браузере.

4. Вставьте между заголовком и текстом пустую строку: <br>. Проверьте работу в браузере.

5. Измените все слова Россия в тексте на жирный курсив.

<p><strong><em>Россия</strong></em>

Проверьте работу в браузере.

6. Измените цифру протяженности границ на красный Times New Roman размер14.

Проверьте работу в браузере.

7. Разделите перечень организаций, в которые входит Россия на список.

<ol><li> ООН,</li> <li>ОБСЕ,</li> <li>Совете Европы,</li> <li>ЕАЭС,</li> <li> СНГ,</li> <li> ОЧЭС,</li> <li> ОДКБ,</li> <li> ГКМЧП,</li> <li> ВОИС,</li> <li> ММО,</li> <li> ВТО,</li> <li> ЮНВТО,</li> <li> ВФП,</li> <li> ШОС,</li> <li> АТЭС,</li> <li> БРИКС,</li> <li> КООМЕТ,</li> <li> МОК,</li> <li> МЭК,</li> <li> ISO,</li> <li> EUREKA,</li> <li> IRENA,</li> <li> G20 </li> <li>и других</li></ol>

Проверьте работу в браузере.

8. Создайте маркированный список с перечнем краев, областей и т.д. в качестве маркера возьмите символ «квадрат»:

<ul type=square><li>46 ……… Проверьте работу в браузере.

9. Добавьте после текста таблицу:

Крупнейшие реки России

Название	Длина, км	Площадь бассейна, км²
Лена	4400	2 490 000
Иртыш	4248	1 643 000
Обь	3650	2 990 000
Волга	3530	1 360 000
Енисей	3487	2 580 000

<tr>

<caption><strong> Крупнейшие реки России </strong></caption>

<td> <em> Название </em></td>

<td> <em>Длина, км </em></td>

<td> <em> Площадь бассейна, км2 </em></td>

</tr>

<tr>

</tr>

<tr>

<td> Иртыш </td>

</tr>

<tr>

</tr>

<tr>

<td> Волга </td>

</tr>

<tr>

<td> Енисей </td>

</tr>

Проверьте сделанное в браузере.

10. Вставьте изображение карты России после заголовка. Для этого в папке My_site создайте подпапку Img, куда положите картинку с картой России map.jpg. Измените файл index.html, добавив в него код:

<br>

<br>

11. Добавьте в нумерованный список гиперссылки на некоторые организации, в которые входит Россия. Для этого текст про ООН сохраним в текстовом файле OON.doc, который разместим в подпапке Text.

Для ОБСЕ добавте гиперссылку на URL документа

Посмотрите в браузере, что получилось.

12. Разделим наше окно на 2 фрейма. В левом оставим наш текст про Россию. Для этого создадим в папке My_site 2 файла main.htm и news.htm. В файл main.htm поместим

<frame src="news.htm" scrolling="no" noresize marginwidth="0"

marginheight="0">

</frameset>

Теперь основным файлом нашего сайта будет main.htm Запустите его и посмотрите результат

13. Добавим в правый фрейм флаг, герб и гимн России.

Флаг и герб добавим с помощью <img> в файл news.htm

<div>

<p><font color=”blue” size=10> Флаг России</font></p>

</div>

<br>

<div>

<p><font color=”blue” size=10> Герб России </font></p>

</div>

<br>

<div>

Проверим в браузере.

Теперь добавим гимн. Для этого воспользуемся <embed>, но сначала в подпапку Music скачаем файл gimn.mp3 с гимном., а затем в файл news.htm добавим:

<br>

<div>

<p><font color="blue" size=10> Гимн России </font></p>

</div>

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

14. Далее нам необходимо добавить на правый фрейм форму для отправки замечаний по работе сайта на электронную почту. Для этого в файле news.htm добавим:

<div>

<p><font color="green" size=5>Ваши замечания по работе сайта Вы можете отправить разработчикам!</p>

</FORM>

</div>

Посмотрите что получилось. Кнопка «Очистить» работает, а для работы кнопки «Отправить» необходимо написать обработчик на сервере, например на PHP.

Вот, что у нас получилось:

Практическое занятие №2.Использование CSS

1. Добавить в качестве фона на страницу gif-ку с бабочками. Для этого скачаем любую Gif-файл в папку My_sait/back.gif . Так как наша страница состоит из двух фреймов, расположенных в разных файлах index.htm и news.htm, то воспользуемся css во внешнем файле. Создадим в Блокноте файл mystyle.css

body {background-image:url("gif/back.gif");}

Добавим в файлы index.htm и news.htm в тег <body> … </body>

Проверим результат.

2. В файл mystyle.css добавим форматирование заголовков h2 и параграфа

h2 {color:magenta;}

p {margin-left:20px;color:gray;}

Проверим результат.

3. В файл mystyle.css добавим форматирование списков

ul {color:#00AAAA;margin-left:60px;font-size:10pt;}

ol {color:#AAFF00;margin-left:60px;font-size:10pt;}

Проверим результат.

4. В файл mystyle.css добавим форматирование блочных элементов <div>

div

{

height:200px;

margin-left:10px;

width:300px;

}

Проверим результат.

Дата добавления: 2020-04-25; просмотров: 123; Мы поможем в написании вашей работы!

Поделиться с друзьями:

Мы поможем в написании ваших работ!