Урок "Простий сайт - таблична верстка"

Урок "Простий сайт - таблична верстка" - завдання 1, 2

Post on 31 березня 2018

by Super User

in Уроки HTML

Завдання 1 і 2 для уроку "Простий сайт - таблична верстка"

Завдання 1.

1. Запустити HTML-редактор Notepad++

2. Створити новий документ, зберегти його з іменем index1.html

3. Набрати код:
<

4. Зберегти код і переглянути результат у Сhrome

Результат:

Завдання 2.

(щоб виконати, дивіться у статтю "Шпаргалка HTML" http://it-shkola.in.ua/uroky-html/99-shparhalka-po-html )

1. Запустити HTML-редактор Notepad++

2. Створити новий документ, зберегти його з іменем index2.html

3. Створити основу html

4. Вказати мову сторінки - українська (підказка: <html lang="uk">)

5. Вказати кодування сторінки UTF-8 між тегами <head></head> (підказка: <meta charset="utf-8">)

6. Вказати заголовок сторінки Кінотеатр онлайн (підказка: <title>Кінотеатр онлайн</title>)

7. Вказати фон сторінки #FFD700 (підказка: <body bgcolor="#FFD700">)

8. Між тегами <body></body> створити таблицю. Для цього набрати такий код:

<table border="1">

<tr>

<td colspan="2">

1

</td>

</tr>

<tr>

<td>

2

</td>

<td>

3

</td>

</tr>

<tr>

<td colspan="2">

4

</td>

</tr>

<tr>

<td colspan="2">

5

</td>

</tr>

</table>

9. Змінити налаштування таблиці:
1) замінити код <table border="1"> на код <table width="80%" align="center" bgcolor="white" cellspacing="0" border="0">
2) для комірки "1" вказати вирівнювання по центру і фон #FFA500 (замість <td colspan="2"> вказати <td colspan="2" align="center" bgcolor="#FFA500">)

3) замість 1 вставити код:

4) замість 2 вставити код:

<img src="http://goo.gl/jWTzjp" width="30%">
5) комірку "3" вирівняти по центру (замість <td> вказати <td align="center">)
6) замість 3 набрати код:
<font size="+5" face="Arial">Кінотеатр онлайн</font>
7) замість 4 набрати код:

<p>Головна</p>

<p>

<img src="http://goo.gl/sPqwE5" width="150px" style="float:left;">

01.04.18<br>

Шерлок Гномс<br>

Гномео та Джульєтта переїжджають до Лондона.

<br clear="all">

</p>

8) для комірки "5" вказати вирівнювання по центру і фон #FFA500 (замість <td colspan="2"> вказати <td colspan="2" align="center" bgcolor="#FFA500">)

9) замість 5 набрати код:
<font color="#fff">by My name © 2018</font>
10. Зберегти код і переглянути його у Chrome
Результат: