Что можно вставлять в таблицы?

 

Теоретически - всё: текст, ссылки и изображения... НО таблицы предназначаются для вывода табличных данных(т. е. данных, которые изначально представляются в виде столбцов и рядов), поэтому избегайте вставки данных в таблицы только потому, что вы хотите разместить их рядом друг с другом.

 

Несколько лет назад Internet - таблицы часто использовались для распределения содержимого на странице. Однако сегодня для этого есть более эффективный способ - CSS. Но об этом позже.

 

Теперь примените ваши знания на практике и создайте пять таблиц различных размеров, с разными атрибутами и содержимым.

 

 

2. Ещё о таблицах

 

Если вы уже можете создавать таблицы, то уже абсолютно ничто в HTML не может смутить вас.

 

При создании таблиц используются два атрибута: colspan и rowspan.

 

Colspan - сокращение от " column span/охват столбцов". Colspan используется в тэге < td> для специфицирования того, сколько столбцов охватывает данная ячейка:

 

Пример 1:

 

< table border=" 1" >

< tr>

< td colspan=" 3" > Cell 1< /td>

< /tr>

< tr>

< td> Cell 2< /td>

< td> Cell 3< /td>

< td> Cell 4< /td>

< /tr>

< /table>

 

будет выглядеть в браузере:

Cell 1
Cell 2	Cell 3	Cell 4

 

Установка colspan " 3", заставляет ячейку в первом ряду охватывать три столбца. Если установим colspan " 2", ячейка охватит только два столбца, и понадобится вставить дополнительные ячейки в первый ряд, чтобы ячейки ровно распределились на два ряда.

 

Пример 2:

 

< table border=" 1" >

< tr>

< td colspan=" 2" > Cell 1< /td>

< td> Cell 2< /td>

< /tr>

< tr>

< td> Cell 3< /td>

< td> Cell 4< /td>

< td> Cell 5< /td>

< /tr>

< /table>

 

будет выглядеть в браузере:

Cell 1	Cell 2
Cell 3	Cell 4	Cell 5

 

Как вы уже могли догадаться, rowspan специфицирует, сколько рядов охватывает данная ячейка:

Пример 3:

 

< table border=" 1" >

< tr>

< td rowspan=" 3" > Cell 1< /td>

< td> Cell 2< /td>

< /tr>

< tr>

< td> Cell 3< /td>

< /tr>

< tr>

< td> Cell 4< /td>

< /tr>

< /table>

 

будет выглядеть в браузере:

Cell 1	Cell 2
Cell 3
Cell 4

 

 

В этом примере rowspan имеет значение " 3" в ячейке Cell 1. Это указывает, что ячейка должна охватывать три ряда (свой собственный ряд плюс ещё два). Cell 1 и Cell 2 при этом остаются в одном ряду, а Cell 3 и Cell 4 образуют отдельные ряды.

 

Примечание. Неплохо будет нарисовать таблицу на бумаге до начала работы в HTML.

 

Создайте пару таблиц с использованием colspan и rowspan.

 

Лабораторная работа №5

Внешний вид (CSS). Публикация страниц. Web-стандарты и проверка.

Внешний вид (CSS)

 

Для того, чтобы придать страницам достойный их содержания вид, необходимо использовать Cascading Style Sheets (CSS)/каскадные таблицы стилей.

 

CSS это лучшая половина HTML. Но, в плане кодирования, их статус различается: HTML заботится об общем выводе информации (её структуре), в то время как CSS производит тонкую настройку внешнего вида (layout).

 

Как показано в лабораторной работе №2, CSS может добавляться атрибутом style. Например, можно установить тип и размер шрифта параграфа:

 

Пример 1:

 

< p style=" font-size: 20px; " > Это напечатано размером 20< /p>

< p style=" font-family: courier; " > Это напечатано шрифтом Courier< /p>

< p style=" font-size: 20px; font-family: courier" > Это напечатано шрифтом Courier размером 20< /p>

 

будет выглядеть в браузере:

Это напечатано размером 20

Это напечатано шрифтом Courier

Это напечатано шрифтом Courier размером 20

 

В этом примере использован атрибут style для специфицирования типа шрифта (командой font-family) и размер шрифта (командой font-size). Обратите внимание, как в последнем параграфе одновременно установлен тип и размер с разделением параметров точкой с запятой.

 

Одной из привлекательных особенностей CSS является возможность управлять внешним видом страниц централизованно. Вместо использования style в каждом тэге, можно указать браузеру как должен выглядеть текст на странице только один раз:

Пример 2:

 

< html>

 

< head>

< title> My first CSS page< /title>

 

< style type=" text/css" >

h1 {font-size: 30px; font-family: arial}

h2 {font-size: 15px; font-family: courier}

p {font-size: 8px; font-family: times new roman}

< /style>

 

< /head>

 

< body>

< h1> My first CSS page< /h1>

< h2> Welcome to my first CSS page< /h2>

< p> Here you can see how CSS works < /p>

< /body>

 

< /html>

 

В этом примере правила CSS вставлены в раздел head и применяются ко всей странице. Для этого используется тэг < style type=" text/css" >, который даёт соответствующее указание браузеру: заголовки на странице будут выведены шрифтом Arial размера 30px. Все подзаголовки - Courier размера 15. А весь текст в обычных параграфах будет шрифтом Times New Roman размера 8.

 

Можно также указывать правила CSS в отдельном документе. Тогда можно применять CSS уже ко всем страницам. Это очень важное качество, если вам понадобится изменить тип или размер шрифта для большого web-сайта с тысячами страниц.

 

Что ещё можно сделать с помощью CSS?

 

CSS может намного больше, чем просто изменение типа и размера шрифта. Например, можно устанавливать цвет и фон. Вот несколько примеров для экспериментирования:

 

< p style=" color: green; " > Зелёный текст< /p>

< h1 style=" background-color: blue; " > Заголовок на синем фоне< h1>

< body style=" background-image: XXX; " >

 

Попробуйте вставить эти примеры в вашу страницу, как показано выше.

 

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

 

Пример 3:

 

< p style=" padding: 25px; border: 1px solid red; " > Мне нравится CSS< /p>

 

Попробуйте сделать сами.

 

С помощью свойства float элемент будет появляться свправа или слева. Это иллюстрирует следующий пример:

 

Пример 4:

 

< img src=" bill.jpg" alt=" Bill Gates" style= " float: left; " /> < p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...< /p>

 

будет выглядеть в браузере:

 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...

 

 

В этом примере один элемент (изображение) находится слева, а другой элемент (текст) заполняет остальное.

 

С помощью свойства position вы можете поместить элемент точно в нужном месте на странице:

 

Пример 5:

 

< img src=" bill.jpg" alt=" Bill Gates" style=" position: absolute; bottom: 50px; right: 10px; " />

 

В этом примере изображение помещается на 50 пикселов снизу и на 10 пикселов справа в окне браузера. Но вы можете поместить его так же в любом другом месте. Попробуйте.

 

CSS не выучить за 10 минут. Этот урок - лишь краткое введение.

 

Публикация страниц

 

До сих пор только вы имели возможность просматривать ваши страницы.

 

Для показа web-сайта в Internet вы должны иметь пространство на сервере и бесплатную FTP-программу.

 

Если у вас есть доступ к Internet, у вас, возможно, уже есть немного места для вашего web-сайта. Ваше пространство на сервере может называться примерно так - http: //home.provider.com/~usernumber. Но сначала вы должны активировать его. Прочтите об этом в документации вашего Internet-провайдера или на его справочных страницах.

 

Другая возможность получить некоторое пространство в Internet - настроить учётную запись e-mail (на, например, Hotmail), тогда вы сможете зарегистрировать свободное пространство в Internet. Такой сервис имеют несколько компаний, среди них - AngelFire (щёлкните " Sign Up" и выберите free membership) - регистрация займёт всего несколько минут.

 

Для доступа на сервер вам необходимо знать " Host Name" (Например, ftp.angelfire.com) и иметь своё username и password.

 

Для доступа на сервер и выгрузки на него ваших страниц вам понадобится также программа, работающая по протоколу FTP. Возможно, у вас её ещё нет, но можно загрузить её бесплатно.

 

Имеется множество FTP-программ. Одна из лучших - FileZilla, абсолютно бесплатная. Можно скачать FileZilla с filezilla.sourceforge.net.

 

 

Как выгружать страницы.

 

Ниже идет описание того, как выгружать страницы на бесплатную учётную запись/account на AngelFire с помощью FileZilla. Но эта процедура применима, в большей или меньшей степени, для всех провайдеров и FTP-программ.

 

Откройте FTP-программу после того, как подключитесь к Internet. Вставьте " Host Name" (" ftp.angelfire.com" ниже " Address" ), имя пользователя (ниже " User" ) и пароль (ниже " Password" ) и щёлкните " Connect". У вас теперь имеется доступ к этому серверу. В одной части программы вы видите содержимое вашего компьютера (" Local Site" ), а в другой - содержимое сервера (" Remote Site" ):

 

Найдите ваши HTML-документы и изображения на вашем компьютере (в " Local site" ) и перешлите их на сервер (" Remote site" ) дважды щёлкнув на них. Теперь их видит весь мир! (Например, по адресу http: //www.angelfire.com/folk/htmlnet/page1.htm).

 

Назовите одну из страниц " index.htm" (или " index.html" ), и она автоматически станет стартовой страницей. т. е., если вы введёте http: //www.angelfire.com/folk/htmlnet (без указания имени файла), откроется http: //www.angelfire.com/folk/htmlnet/index.htm.

 

Для длительной работы неплохо приобрести собственный домен (www.ваше-имя.com) и избавиться от длинного адреса, предоставляемого Internet-провайдером бесплатного сервиса. Можете купить домен, к примеру, на Speednames или NetworkSolutions.

 

Web-стандарты и проверка

 

HTML можно кодировать несколькими способами. Браузеры также могут читать HTML по-разному. Можно сказать, что в HTML есть много диалектов. Поэтому сайты выглядят по-разному в различных браузерах.

 

Почти с момента зарождения Internet начались попытки выработать общий HTML-стандарт на World Wide Web Consortium (W3C), который основал Tim Berners-Lee.

 

В старину - когда за браузеры надо было заплатить - Netscape был основным браузером. Существовали HTML-стандарты.0 и 3.2. Но на рынке, на 90% занятом Netscape не было необходимости в общих стандартах. Кроме того, Netscape изобретал собственные странные элементы, которые не работали на других браузерах.

 

Многие годы Microsoft почти игнорировал Internet. Затем началось соревнование с Netscape, и появился новый браузер. Первые версии нового браузера Microsoft'а - Internet Explorer - поддерживали HTML-стандарты не лучше, чем Netscape. Но Microsoft решил распространять свой браузер бесплатно (это всегда приветствуется), и Internet Explorer вскоре стал самым популярным браузером.

 

Начиная с версий 4 и 5, Microsoft всё более и более поддерживал HTML-стандарты от W3C. Netscape не занимался разработкой новых версий и продолжал выпускать устаревшую версию 4.

 

Сегодня HTML-стандарты называются 4.01 и XHTML. Теперь уже Internet Explorer занимает свыше 90% рынка. В Internet Explorer тоже есть свои необычные элементы, но он также поддерживает и W3C HTML-стандарты. Так же делают и другие браузеры, такие как Mozilla, Opera и Netscape.

 

Итак, если вы кодируете HTML, придерживаясь стандартов W3C, вы делаете web-сайты, которые читаются всеми браузерами - сейчас и в будущем. То, что вы изучили, это новая и более строгая версия HTML, которая называется XHTML.

 

При наличии различных разновидностей HTML вы должны сообщать браузеру, на каком " диалекте" HTML говорите вы, в нашем случае - XHTML. Для этого используйте Document Type Definition/определение типа документа. DTD всегда записывается в самом начале документа:

 

Пример 1:

 

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN" " http: //www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

< html xmlns=" http: //www.w3.org/1999/xhtml" lang=" en" >

 

< head>

< title> Title< /title>

< /head>

 

< body>

< p> text text< /p>

< /body>

 

< /html>

 

Помимо Document Type Definition (первая строка в примере), которое сообщает браузеру, что вы пишете на языке XHTML, вы должны вставить также дополнительную информацию в тэг html с помощью атрибутов xmlns и lang.

 

xmlns, это сокращение от " XML-Name-Space", всегда должен иметь значение http: //www.w3.org/1999/xhtml. Это всё, что нужно знать. Но, если вы интересуетесь сложными вопросами, можете прочесть о namespaces на W3C web-сайте.

 

В атрибуте lang вы указываете, на каком языке написан документ. Для этого используется стандарт ISO 639, в котором перечислены коды всех языков мира. В предыдущем примере установлен English (" en" ).

 

С помощью DTD браузер точно знает, как он должен читать и отображать ваш HTML. Используйте этот образец как шаблон для ваших будущих HTML-документов.

 

DTD также имеет важное значение при проверке ваших страниц.

 

Проверка!

 

Вставьте DTD в ваши страницы - и ваш HTML всегда можно будет проверить на наличие ошибок с помощью бесплатного проверщика W3C's free validator.

 

Чтобы протестировать эту возможность, создайте страницу и поместите её в Internet. Теперь перейдите на validator.w3.org, введите адрес (URL) вашей страницы и проверьте её. Если ваш HTML корректен, вы получите congratulations message. В ином случае - сообщение об ошибках с точным указанием того, что и где сделано неправильно. Сделайте специально несколько ошибок и посмотрите, что получится.

 

Этот validator полезен не только для выявления ошибок. Некоторые браузеры пытаются автоматически исправлять ошибки кодировщиков и отображают страницу так, как она должна выглядеть (по их " усмотрению" ). При этом вы можете никогда не увидеть ошибок в своём браузер. Однако браузеры корректируют ошибки по-разному или могут вообще не показать страницу. Проверщик-validator помогает выявить ошибки, о наличии которых вы, может быть, и не подозревали.

 

Всегда проверяйте ваши страницы для обеспечения их корректности.

 

Последние замечания

 

Вы много узнали и способны теперь создавать собственные web-сайты! Однако то, чему вы научились, это только основы. Но вы заложили хороший фундамент, на котором можно начинать строительство.

 

В заключение несколько важных требований.

· Необходимо следить за порядком и структурой ваших HTML-документов. Публикуя хорошо упорядоченные документы, вы не только демонстрируете другим уровень своего мастерства владения HTML, но и облегчаете себе работу.

 

· Соблюдайте стандарты и проверяйте ваши страницы: всегда пишите на чистом XHTML, используйте DTD и проверяйте ваши страницы с помощью проверщика validator.w3c.org.

 

· Делайте страницы содержательными. Помните, что HTML позволяет показывать вашу информацию в Internet, поэтому позаботьтесь, чтобы эта информация была презентабельной. Страницы могут быть очень приятными на вид, но большинство людей ищет в Internet информацию.

 

· Не перегружайте страницы изображениями, которые вы нашли в Internet. Это замедляет загрузку страниц и мешает посетителям. Страницы, требующие для загрузки более 20 секунд, теряют до 50% посетителей.

 

· Не забудьте добавить ваш сайт в поисковые машины/директории, чтобы не только члены вашей семьи могли найти ваши страницы в сети. На первых страницах всех поисковых машин вы найдёте ссылки на новые страницы (самые известные машины - Google, см. также DMOZ, Yahoo, AltaVista, AlltheWeb и Lycos).

 

· В этом учебнике вы научились использовать Notepad, простой в использовании редактор, но, возможно, вы захотите использовать более профессиональные программы, имеющие больше возможностей. Обзор таких программ есть на Download.com.

 

Как узнать больше.

 

Прежде всего, не прекращайте работать и экспериментировать. Изучайте web-сайты других людей и, если найдёте что-то интересное, посмотрите, как это сделано, через меню " View Source/Просмотр исходного кода" (меню " View" и " Source" вашего браузера).

 

Ищите в Internet примеры и статьи о HTML. Есть множество web-сайтов о HTML. Читайте и задавайте вопросы на форумах в Internet. Два хороших места - Newsgroups и Experts Exchange. Там вы можете спросить совета у настоящего эксперта и многому научиться.

 

 

⇐ Предыдущая1234

Поделиться: