Мы будем добавлять на ваш сайт новую информацию, как ту, которую дадите нам вы, так и ту, которая необходима исходя из логики развития проекта.
Колдовство над тегами
Мы начинаем разбирать тот код, который использовали в прошлой статье, параллельно изучая, что же мы делаем и какую информацию браузеру передаем. <html>
Этими тегами начинается и заканчивается наш документ. Этот тег говорит браузеру, что документ, который он открывает – документ html, а не, допустим, документа того же блокнота. <html>
В голове у нас информация о том, как называется страница, а в теле – таблица с текстом. Разбираемся подробнее. Если вы читаете все статьи данного раздела подряд, то Блокнот с кодом вашей странички у вас так и остался открыт. Если же нет – кликайте правой кнопкой по ярлыку вашей страницы на рабочем столе и выбирайте – открыть с помощью Блокнота.
<head>
Попробуйте поменять слова «Ваша первая страничка» на что-нибудь другое. ФАЙЛ – СОХРАНИТЬ. Теперь кликайте на ярлык вашей страницы (нажмите F5, если она у вас открыта). Вверху браузера вы увидите текст, который вы написали между тегами <title> и </title>. Из этого делаем логичный вывод – этот текст формирует заголовок браузера или «тайтл» - говорит название нашего документа, характеризует его. Ближе к телу. Как мы уже сказали выше, в теле у нас – таблица. Давайте посмотрим, как делается таблица в html. Вспоминаем матрешку.
Вот так выглядит элементарная таблица, состоящая из одной строки и одного столбца – то есть одной ячейки. Браузеру говорит о том, что здесь начинается и заканчивается строка – тег <tr> и </tr>. Браузеру говорит о том, что здесь начинается и заканчивается ячейка – тег <td> и </td>. Посмотрите внимательней – это же классическая матрешка, не так ли На месте многоточия должно быть содержимое таблицы. У таблицы в нашем примере две строки и два столбца. Поэтому матрешка-таблица содержит внутри две матрешки-строки, а в каждой из матрешек-строк - по две матрешки-ячейки, формирующие столбцы.
Обратите внимание – сколько ячеек у нас в первой строке таблицы – столько же должно быть ячеек и во второй строке – чтобы у нас формировались столбики. Для того, чтобы браузер растянул ячейку на два столбца нужно задать ячейке специальный параметр, но это уже гораздо сложнее – и это вы сможете сами изучить, если захотите. Контент-менеджеру такие тонкости знать не обязательно. Колдуем? Конечно, колдуем. Для начала посмотрим на наш исходный код.
Превратим таблицу из двух столбцов сначала в таблицу из трех столбцов, а потом в таблицу из трех строк, в новые ячейки добавьте произвольный текст. Попробуйте сами.
<head>
<body>
<tr>
<tr>
</table>
</html> Второй код – три строки:
<head>
<body>
<tr>
<tr>
<tr>
</table>
</html> Можно задать фон для таблицы – с помощью параметра bgcolor и ширину в процентах от экрана – параметром width. Попробуйте изменить исходный код на <table border="1" cellspacing="10" cellpadding="10" width="50%" bgcolor="green"> Попробуйте поменять цвет фона таблицы, используя цвета: аqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. В следующей статье мы уже начнем колдовать над содержимым страницы, а именно - изображением. Назад в раздел |