Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь FAQ Написать работу КАТЕГОРИИ: ТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву
Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Завдання до лабораторної роботиСодержание книги
Поиск на нашем сайте
Завдання 1. Розгляньте приклад документа з використанням атрибута style. <html> <head> <title>Untitled Document</title> <meta http-equiv=" Content-Type" content="text/html; charset= windows-1251">
</head> <body> <div style="font: Georgia, 'Times New Roman', Times, serif; color: #FF00FF; font-size: 18pt; background-color: #FFCCFF"> <table border="4" align="center" frame="rhs" > <tr style="color: #00FFFF; border-color: #0000FF; font-family: Arial; font-size: 24px; font-style: oblique; background-color: #FFCC66" > <td colspan="2" align="center">Список </td> </tr> <tr bordercolor="#0000CC" height="40"> <td прізвище </td> <td </tr> <tr style="color: #0033FF; background-color: #00FFFF; font-size: 16px; font-style: italic" align="center"> <td>Іванов</td> <td>Іван</td> </tr> </table> <cite>Петров</cite> </div> <div align="center" style=" background-color: #FFFFCC; border-color: #CCFFCC; border-style: double; font: Verdana; font-size: 20px;"> My friends<br> </div> </body> </html>
Завдання 2. Наберіть HTML-документ за допомогою кожного з редакторів, виділіть селектори типу, селектори класу, селектори id. З'ясуйте в чому різниця між використанням селекторів. Визначте область дії селекторів, де й чому не спрацювали аркуші стилів. <html> <head> <title>Untitled Document</title> <meta http-equiv=" Content-Type" content="text/html; charset= windows-1251"> <style type="text/css"> h2 {font-size: 16pt; color: #0033FF; font-family: Geneva, Arial} h2.curs {font-size: 18pt; font-style: italic; font-family: "Courier New", Courier, mono; color: #006699} h2.normal {font-size: 16pt; font-style: normal; color: #FF0000} #bgmagenta {background-color: #CC66FF; color: #FFFF00} #fishka {background-color: #CC99FF; color: #3300FF; font-family: serif; font-size: 20pt; font-style: oblique} #bgyellow {background-color: #FFFF00; color: #0000FF; font-family: Verdana, Arial} div {font-family: «serif"; font-size: 15pt; background-color: #99FFFF; color: #000000; font-style: oblique} </style> </head>
<body bgcolor="#FFCC99"> <h2>Приємно на пари з ранку приходити</h2> <h2 class="curs"> Приємно бачити добрі очі екзаменатора</h2> <h2 id="bgmagenta"> Приємно зайти в деканат після сесії</h2> <p id="bgmagenta"> Приємно не мати "хвостів", <br> бути успішним і <br id="fishka"> упевненим у завтрашньому дні</p> <h2 class="curs"> Приємно вчасно захищати лабораторні роботи...</h2><br><br> <div align="center"> Життя світле й безхмарне, коли тобі 20 років і попереду <p class="normal"> море надій, </p> <hr id="bgyellow" size="8"> усе тіло наповнене енергією й готове до <p id="bgmagenta"> здійснень, щастя, любові </p></div> <h3 class="curs"> Життя повне приємних моментів</h1> <h3 id="fishka" align="center"> Тільки варто небагато попрацювати</h3> <hr id="bgmagenta" align="center" size="5"> <hr id="bgyellow" align="center" size="5"> <h2 id="bgyellow" align="center"> Мрії прогульника</h2> <h2 class="normal"> Том 2. Повне зібрання студентських снів</h2> </body> </html> Завдання 3. Наберіть код, поданий нижче. Перевірте його. Змініть стилі, що використовують форматування шрифту й тексту.
<html> <head> <title>Untitled Document</title> <meta http-equiv=" Content-Type" content="text/html; charset= windows-1251"> <style type="text/css"> .font1 {font: oblique 300 small-caps x-large/150% "Courier New", Courier, mono; color: #0033FF; background: #FFCCCC;} #font_small {font-family: cursive; font-size: 120%; font-stretch: expanded; font-style: italic; font-weight: 600; color: #00FF00; background-color: #000066; text-align: center} pre {font-family: fantasy; font-size: x-small; font-stretch: extra-condensed; font-style: inherit; font-weight: bolder; color: #FFFF66; background- color: #333333;} .fon_text {font: sans-serif 800 150% normal; color: #000099; background- color: #CC9966; letter-spacing: 16pt; word-spacing: 16px; text-indent: 1.25cm; text-align: left; line-height: 2;} #sub {font-family: serif; font-size: 14pt; letter- spacing: 5pt; vertical-align: sub;} #sup {font-family: serif; font-size: 14pt; letter-spacing: 5pt; vertical-align: super;} </style> </head>
<body> <div class="font1"> Деякі рекомендації із суспільного поводження в різних країнах </div> <p id="font_small"> Германія </p> <pre> Треба називати титул кожного, з ким розмовляєте. Якщо титул невідомий, то можна звертатися так: "Herr Doctor!". </pre> <div class="fon_text"> Слово доктор не зарезервоване, як у нас, тільки для медиків, а вживається кожного разу при вказівці спеціальності або професії. </div> У ресторані <span id="sub"> привітають </span> усіх, хто знаходиться біля вас, навіть <span id="sup">незнайомих</span>, <br> <div class="font1">вираженням "Mahlzeit», що означає приблизно "Приємного апетиту" </div> </body> </html> Завдання 4. Створіть із запропонованого тексту HTML - документ, у якому будуть використані заголовні стилі з усіма типами селекторів і вбудовані стилі. Оформіть запропонований текст за допомогою аркушів стилів. При створенні документа використовуйте форматування блоків, тексту, шрифтів, списків, кольору й фону. Февраль 1999 Илла Они жили на планете Марс, в доме с хрустальными куполами, на берегу высохшего моря, и по утрам можно было видеть, как миссис К ест золотые плоды, растущие из хрустальных стен, или наводит чистоту, рассыпая пригоршнями магнитную пыль, которую горячий ветер уносил вместе с сором. Под вечер, когда древнее море было неподвижно и знойно, и винные деревья во дворе стояли в оцепенении, и старинный марсианский городок вдали весь уходил в себя, и никто не выходил на улицу, мистера К можно было видеть в своей комнате, где он читал металлическую книгу, перебирая пальцами выпуклые иероглифы, точно струны арфы. И книга пела под его рукой… Мистер и миссис К были еще совсем не старые. У них была чистая, смуглая кожа настоящих марсиан, глаза желтые, как золотые монеты, тихие, мелодичные голоса. Прежде они любили писать картины химическим пламенем, любили плавать в каналах, …до рассвета разговаривать под голубыми светящимися портретами в комнате для бесед. Теперь они уже не были счастливы.
Рэй Брэдбери Марсианские хроники
Контрольні питання:
Лабораторна робота №9 Мета: опанувати принципи побудови зовнішніх аркушів стилів. Вивчити стильові властивості блоків, списків та інших елементів, їх значення, навчитися використовувати стильові властивості при створенні HTML-документів.
|
||
|
Последнее изменение этой страницы: 2020-12-09; просмотров: 152; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 216.73.217.21 (0.008 с.) |