Добро пожаловать в 3 часть урока! В конце части 2 я бросил вам вызов. Итак, давайте сначала исследуем решение.
Решение проблемы
Задача, которую я поставил на прошлой неделе, заключалась в том, чтобы вы добавили несколько ссылок на созданные нами страницы, чтобы пользователи могли легко перемещаться между нашими 3 страницами. У нас было три страницы — главная страница, страница ссылок и страница с изображениями.
На главной странице вы должны были добавить код, который выглядит примерно так:
<a href="links.html">Favorite Links</a> <br> <a href="pictures.html">Pictures</a> На странице ссылок у вас должно быть что-то похожее на:
<a href="index.html">Main Page</a> <br> <a href="pictures.html>Pictures</a>
И, наконец, на странице изображений вы должны были добавить код, похожий на этот:
<a href="index.html">Main Page</a> <br> <a href="links.html">Favorite Links</a>
Так что теперь, если вы загрузите любую из этих страниц в свой браузер, вы увидите, что вы (и ваши посетители!) Можете легко перемещаться между страницами.
таблицы
Все, что вы читаете, имеет структуру: от скучного списка покупок в кармане до самого свежего журнала на вашем столе. Как и эти элементы, HTML-страницы должны иметь структуру. Я уверен, что вы могли бы создать список покупок без особых проблем, но как насчет журнала? Если мы будем использовать HTML так, как задумывали его первоначальные создатели, удивительные, интенсивно использующие графику сайты, которые мы видим сегодня, были бы невозможны — все, что мы могли бы создавать, — это простые, скучные страницы.
Таблицы составляют основной макет почти каждой существующей сегодня веб-страницы. На главной странице SitePoint.com я насчитал 34 отдельные таблицы, все они встроены друг в друга. Это показывает, насколько важны таблицы как для дизайна, так и для элементов содержимого веб-страницы.
Чтобы создать таблицу, вам необходимо использовать тег <table> вместе с соответствующим тегом </ table>. Существует ряд необязательных атрибутов, которые вы можете указать в теге <table>, но они не обязательны (пока!).
Когда у вас есть тег <table>, следующий необходимый вам тег — это тег <tr>. Тег <tr> создает строку таблицы, которая может содержать одну или несколько ячеек (или столбцов) информации. Чтобы создать эти отдельные ячейки, которые могут содержать практически любой другой элемент HTML, вы можете использовать тег <td>. Вы можете сделать столько ячеек, сколько захотите, но в каждой строке таблицы должно быть столько же ячеек, сколько во всех остальных. Итак, давайте посмотрим на базовую таблицу:
<table> <tr> <td> <b>Name</b> </td> <td> <b>E-Mail Address</b> </td> <td> <b>Phone Number</b> </td> </tr> <tr> <td> Joe Bloggs </td> <td> <a href="mailto:[email protected]">[email protected]</a> </td> <td> 555 1234 </td> </tr> <tr> <td> John Smith </td> <td> <a href="mailto:[email protected]">[email protected]</a> </td> <td> 555 4321 </td> </tr> </table>
Теперь я знаю, что это выглядит сбивающим с толку, так что давайте рассмотрим это по разделам. Во-первых, у нас есть тег <table>, за которым следуют 3 отдельные строки таблицы. Давайте внимательнее посмотрим на один из этих рядов:
<tr> <td> <b>Name</b> </td> <td> <b>E-Mail Address</b> </td> <td> <b>Phone Number</b> </td> </tr>
Сначала у нас есть тег <tr>, который начинает новую строку. Затем у нас есть тег <td>, который начинает новую ячейку в этой строке. В этой ячейке может быть что угодно, но в этом случае она содержит жирный заголовок «Имя». За этим следует закрывающий тег </ td>, который завершает ячейку таблицы, готовую к другой. Тогда есть еще две ячейки, сопровождаемые концом ряда.
Этот пример создаст таблицу, подобную этой:
| имя | Адрес электронной почты | Телефонный номер |
| Джо Блоггс | [email protected] | 555 1234 |
| Джон Смит | [email protected] | 555 4321 |
Как видите, в каждой строке 3 строки и 3 столбца (или ячейки).
Размер стола
По умолчанию таблица будет достаточно большой, чтобы в нее помещались элементы, но не больше и не меньше. Вы можете изменить это значение по умолчанию, используя различные атрибуты ‘height’ и ‘width’. Вы можете указать высоту или ширину либо в пикселях, либо в процентах от окна браузера. Например:
-
<table height="500" width="247">создаст таблицу высотой 500 и шириной 247 -
<table width="100%">создаст таблицу, которая<table width="100%">экрана, но настолько высока, насколько это необходимо для содержания элементов, которые она содержит
Теперь это вызов для вас. Добавьте еще одну строку в пример таблицы, которую мы рассмотрели выше, перечисляя контактные данные другого вымышленного человека. Ответ на следующей странице.
Решение проблем таблиц
Ваша новая таблица (с еще одной строкой) должна выглядеть примерно так:
<table> <tr> <td> <b>Name</b> </td> <td> <b>E-Mail Address</b> </td> <td> <b>Phone Number</b> </td> </tr> <tr> <td> Joe Bloggs </td> <td> <a href="mailto:[email protected]">[email protected]</a> </td> <td> 555 1234 </td> </tr> <tr> <td> John Smith </td> <td> <a href="mailto:[email protected]">[email protected]</a> </td> <td> 555 4321 </td> </tr> <tr> <td> James Bond </td> <td> <a href="mailto:[email protected]">[email protected]</a> </td> <td> 857 4630 </tr> </table>
Если это не выглядит так, вернитесь на предыдущую страницу и снова посмотрите на пример одной строки, затем попробуйте добавить другую строку. Если вы правильно поняли, то молодец!
Таблицы могут включать в себя практически любой другой тег или элемент HTML, например изображения или ссылки. Давайте посмотрим на другой пример — прайс-лист магазина, который продает стулья.
<html> <head> <title>Chairs</title> </head> <body> <table width="50%" align="center"> <tr> <td> <b>Title</b> </td> <td> <b>Picture</b> </td> <td> <b>Price</b> </td> </tr> <tr> <td> Small Chair </td> <td> <img src="small.jpg" alt="small chair"> </td> <td> $39.99 </td> </tr> <tr> <td> Large Chair </td> <td> <img src="large.jpg" alt="large chair"> </td> <td> $99.99 </td> </tr> </table> </body> </html>
Для некоторой практики посмотрите на этот код и посмотрите, сможете ли вы определить, сколько у него строк и сколько ячеек в каждой строке. Как только вы это сделаете, читайте дальше …
Опять же, есть 3 ряда (строка заголовка, затем один для маленького стула и один для большого стула), и 3 ячейки (имя, изображение и цена) в каждом. Для последней практики попробуйте добавить дополнительную ячейку в каждом ряду в этом столе для размера стула. Помните, вам нужно добавить правильные теги в каждую строку, иначе это не сработает.
Заполненная таблица должна выглядеть примерно так:
<html> <head> <title>Chairs</title> </head> <body> <table width="50%" align="center"> <tr> <td> <b>Title</b> </td> <td> <b>Picture</b> </td> <td> <b>Price</b> </td> <td> <b>Size</b> </td> </tr> <tr> <td> Small Chair </td> <td> <img src="small.jpg" alt="small chair"> </td> <td> $39.99 </td> <td> 2 feet </td> </tr> <tr> <td> Large Chair </td> <td> <img src="large.jpg" alt="large chair"> </td> <td> $99.99 </td> <td> 4 feet </td> </tr> </table> </body> </html>
Отзыв читателя
Как только я готовился закончить урок, я получил письмо от Мари, которая прочитала предыдущие части урока и задала вопрос о теге <font>. Она хотела знать, где она может найти таблицу или список часто используемых шестнадцатеричных цветовых кодов. Чтобы уточнить это, вы, возможно, помните, что цвета шрифта обычно используют последовательность цифр и букв, например: <font color = «# 00000»> будет представлять черный цвет.
Хотя вы можете использовать такие названия, как «красный» или «синий» для общих цветов, для разных цветов или оттенков вам необходимо использовать эти цветовые коды. Я осмотрел диаграмму или диаграмму, и лучшее, что я смог найти, был этот . Надеюсь, это поможет ответить на ваш вопрос Мари!
Где сейчас?
Теперь, когда у вас есть базовое понимание HTML и концепций, которые его окружают, пришло время немного углубиться в эти знания. Есть много аспектов, о которых вы можете узнать — для этого я рекомендую вам посмотреть Лоуру Лемей на веб-публикацию Sams Teach Yourself Web Publishing с использованием HTML и XHTML за 21 день .
Или вы можете узнать о некоторых других языках, которые помогают сделать Интернет таким, какой он есть. Попробуйте некоторые учебные пособия по серверным языкам, которые дадут вам больше возможностей и гибкости, чем когда-либо мог дать HTML, и, вероятно, больше, чем вы думаете:
- Начало работы с ASP
- Создание веб-сайта на основе базы данных с использованием PHP и MySQL
- Программирование PERL 101
Вы также можете взглянуть на язык на стороне клиента, который позволяет создавать различные умные и полезные эффекты в браузере посетителя:
Теперь этот раздел завершает серию — надеюсь, что это было полезно для вас, и вы уже подобрали много HTML. Как вы уже, наверное, догадались, многое еще предстоит выучить, но этот урок должен дать вам базовые знания и понимание, необходимые для дальнейшего развития. Пожалуйста, посещайте форумы сообщества SitePoint с любыми вопросами или пишите мне, если у вас есть какие-либо комментарии или предложения.