Итак, мы разобрались с обязательными тегами html-документа. Теперь настало время более подробно изучить остальные.
Создание сайта:
Этот раздел посвящен людям, которые решили изучить основы HTML и самостоятельно создать свой сайт. Новичку, решившему узнать о том, как создать сайт бесплатно, самому. Все эти знания я сам применял при работе над этим сайтом.
Закончив изучать эту часть моего сайта, вы получите тот минимум знаний, который позволит вам создать свой сайт. Позволит создать при условии, что вы имеете на это желание и терпение. Лично я, обладая этими знаниями, начал создавать этот сайт.
Помочь же вам в этом нелегком деле смогут некоторые программы для создания сайта и книги по вебдизайну. Но запомните сразу: ни одна программа не придумает и не создаст сайт за вас. Она может лишь помочь и облегчить вам эту задачу. А достижение цели под названием «создание своего сайта» зависит от прямоты ваших рук и наличия серого вещества в голове.
Еще одна немаловажная, на мой взгляд, вещь — это наличие литературы, в которой рассмотрены основы HTML, а также более подробно освещены общие проблемы того, как создать свой сайт самому, как им владеть и развивать дальше. Я скомпоновал основной материал этих источников в более или менее сжатый вариант и выложил здесь. Для более досконального изучения основ HTML рекомендую пользоваться различными источниками. Если что-то не понятно в одном, то всегда можно посмотреть и сравнить в другом.
И последний совет, основанный уже исключительно на моем собственном опыте. Я не знаю, какой сайт создать у вас в планах, но если он потребует капиталовложений (покупка домена или платного хостинга, либо еще что-нибудь), то имеет смысл начать зарабатывать деньги на эти расходы параллельно с изучением основ создания сайта. Времени на это уходит не так чтобы много, а к тому моменту, когда вы сможете создать сайт самостоятельно, у вас уже будут деньги на то, чтобы купить домен и на качественный хостинг. Но это ваше дело (может вы и так обеспечен деньгами), но помимо возможности заработать, эти способы еще дают некоторое представление об обратной стороне Интернета. А это какой-никакой опыт, причем собственный.
|
|
|
Если говорить проще, то HTML это набор тегов (управляющих слов), которые позволяют представить обычный текст в форматированном виде. Например, выделить его жирным, или курсивом и т.д. Но представить так текст можно только в специальных программах — браузерах. Они отображают только отформатированный текст и скрывают теги HTML, которые применялись для форматирования. Чтобы вам было понятней о чем я говорю, щелкните правой кнопкой мыши по этой странице и в открывшемся меню выбери пункт «Исходный код». Перед вами откроется эта страница в своем реальном виде.
|
|
|
Создавать код HTML можно как в обычных текстовых редакторах, так и использовать специальные программы, так называемые визуальные редакторы. Визуальные редакторы отличаются от текстовых тем, что заточены под набор кода HTML, CSS, JavaScript, PHP и др., т.е. под web-программирование. Кроме того, они позволяют сразу же просмотреть плоды своих трудов во встроенном браузере и подсвечивают некоторые ошибки в набранном коде. Рекомендую набирать весь код руками, визуальные редакторы же значительно облегчают этот процесс. Лично я пользуюсь Macromedia Dreamweaver 8.
Теперь перейдем непосредственно к тегам HTML.
Начнем со строения html-страницы.
Обязательные теги HTML-страницы:
< HTML >
< HEAD >
< /HEAD >
< BODY >
< /BODY >
< /HTML >
Все теги парные (есть открывающий тег и закрывающий), в HTML почти все теги такие. Отличаются открывающий тег от закрывающего тем, что перед закрывающим стоит косая черта /. Набирать имена тегов можно как заглавными буквами, так и прописными, разницы нет никакой, т.е. записи вида < HTML > и < html > для браузера различий не имеют и интерпретируются одинаково. Теперь поговорим о том, что эти теги означают.
|
|
|
Обязательные теги < HTML > и < /HTML > показывают браузерам и другим программам для просмотра гипертекстовых страниц, что они как раз и имеют дело с гипертекстовым документом. Любой html документ должен начинаться с < HTML> и заканчиваться < /HTML>, т.е. между этими тегами находится весь код HTML.
Между тегами < HEAD> и < /HEAD> находится заголовок документа. В нем хранится информация об html-странице. Вообще, данные теги не являются обязательными, т.е. без них html-документ будет нормально отображаться браузерами, но даже, если вы не планируешь использовать область заголовка, то напишите хотя бы просто < HEAD> < /HEAD>. Это нужно для совместимости между различными версиями программ. Все символы, находящиеся между этими тегами, никак не отображаются браузером (за исключением информации между тегами < TITLE> < /TITLE>, где расположено название html -документа, выводимое в верхней панели браузера), но могут оказывать большое влияние на вид html-страницы, ее жизнь в Интернете и ранжирование поисковыми системами.
Основное содержимое html-документа располагается между тегами < BODY> и < /BODY>. Здесь находится все, что мы видим, когда открываем html -страницу: текст, графику, меню, кнопочки и т.д. Это основное «тело» страницы.
|
|
|
Все остальные теги, использующиеся при создании html-документа, находятся между этими обязательными тегами. Практически все теги HTML имеют различные атрибуты или параметры, которые позволяют отобразить информацию именно так, как задумал разработчик. Например, если вы напишите:
< BODY bgcolor="#00FF00" >< /BODY >
то фон всей страницы будет зелёным. Здесь тег < BODY> — это собственно тег, bgcolor — его атрибут, а "#00 FF 00" — значение атрибута. У тега может быть несколько атрибутов. Все атрибуты тега и их значения указываются в открывающем теге (тот, который без косой черты).
Итак, мы разобрались с обязательными тегами html-документа. Теперь настало время более подробно изучить остальные.
Сначала я предлагаю рассмотреть теги, относящиеся к «телу» html-документа (< BODY>< /BODY>), а уж затем переходить к остальным. Тем более, что в «теле» html-страницы и содержится информация, нужная посетителю вашего сайта. А создать или найти ее гораздо сложнее, чем создать код будущего сайта.
Атрибуты тега BODY:
| Все атрибуты тега BODY оказывают свое влияние на объекты, находящиеся между тегами < BODY> и < /BODY>, т.е. на все элементы html-страницы. Это означает, что по умолчанию браузер будет выводить html-страницу так, как это прописано или не прописано в теге BODY. Если в каком-либо месте html-документа нужно отобразить текст, фон или другой элемент иначе, то это нужно прописать в значениях атрибутов соответствующего тега html. Я расскажу об основных атрибутах тега BODY. Итак, наиболее часто используемые атрибуты тега BODY: bgcolor — цвет фона html-страницы. По умолчанию браузер заполняет фон сплошным цветом (в настройках по дефолту — белым) или в зависимости от настроек пользователя этого браузера. Допустим, если вам нужен html-документ с черным фоном, то нужно написать так: < BODY bgcolor="#000000">< /BODY> Здесь нужно коротко сказать о способах представления цвета в HTML. Цвета в HTML можно задать либо именем цвета из предопределенного списка, либо шестнадцатеричным (hex) значением выбранного цвета. В предопределенном списке содержится 140 цветов и все они соответствуют так называемой Web-палитре. Использование цветов из этой палитры гарантирует их одинаковое воспроизведение всеми браузерами. В hex-значении цвета используется модель RGB: первые две цифры задают яркость красной (Red), вторые две цифры — зеленой (Green), а последние две цифры — синей (Blue) составляющей цвета. Для того, чтобы использовать цвета, не входящие в Web-палитру, нужно знать их hex-значение. С представлением цвета в HTML разобрались, теперь продолжим разговор об атрибутах тега BODY: background — позволяет задать в качестве фона html-страницы картинку. Допустим есть картинка logo.jpg, расположенная по адресу http://internetzarabotoc.front.ru/images/logo.jpg. Для того, чтобы сделать ее фоном html-страницы нужно записать так: < BODY background=" http://internetzarabotoc.front.ru/images/logo.jpg">< /BODY> Обычно в качестве фона используется небольшой и простой рисунок, так называемая текстура, который многократно выводится на экран, заполняя все окно. Поскольку размер такого изображения небольшой, то создание фона происходит очень быстро. Думаю с этим атрибутом все понятно, перейдем к следующим: text — устанавливает цвет текста html-документа. Например, сделаем текст зеленым: < BODY text="#008000">< /BODY> Следующие атрибуты относятся к представлению вида ссылок на странице: link — цвет еще неиспользованной (непросмотренной) ссылки (по умолчанию синий). vlink — цвет уже использованной (просмотренной) ссылки. alink — цвет гиперссылок при нажатии. Допустим, нам нужно, чтобы цвет еще неиспользованных ссылок был красным (#FF0000), а уже нажатых — синим (#0000FF). Сделать это можно так: < BODY link="#FF0000" vlink="#0000FF">< /BODY> Думаю, вы уже заметили, что атрибутов в теге может быть как один, так и несколько сразу. А может и ни одного, в этом случае браузер будет использовать настройки по умолчанию. В следующем примере мы создадим html-страницу с черным фоном, зеленым текстом, неиспользованные ссылки — красные, а посещенные — синие. Всё это можно создать так: < HTML> < HEAD> < /HEAD> < BODY bgcolor="#000000" text="#008000" link="#FF0000" vlink="#0000FF"> < /BODY> < /HTML> Наберите этот html-код в любом текстовом или визуальном редакторе. Между тегами < BODY> и < /BODY> вставьте любой текст, сохраните этот файл под любым именем, но обязательно с расширением html. А затем откройте его в браузере и наслаждайся открывшейся вам картиной. Помимо собственных атрибутов (атрибуты, которые используются только в этом теге) в теге BODY можно применять атрибуты и других тегов. О них вы узнаете позже. Пока же советую поэкспериментировать с полученными знаниями. Только на практике вы увидите результаты этих знаний и поймёте, как это работает. И только поняв и запомнив, как атрибуты тега BODY используются для создания html-страницы, переходите к следующей главе, в которой мы поговорим о форматировании текста в HTML. | ||||||||
| Теги для форматирования текста в HTML: | ||||||||
Основным способом подачи информации на большинстве сайтов является текст. Это означает, что создать свой сайт можно при умении, как минимум - читать, а как максимум — писать. Если вы последовали моим рекомендациям в предыдущей части и поэкспериментировали с цветом фона, текста и т.д., то уже должны знать, что простой, не отформатированный текст можно добавить в html-страницу, просто поместив его между тегами < BODY> и < /BODY>. Но такой текст не всегда удовлетворяет задумке создателя сайта и возникает необходимость какую-то часть текста выделить или применить форматирование текста для подчеркивания смыслового наполнения. Самое главное тут соблюдать меру и следить за тем, чтобы все было уместно и по делу. Ну что же, рассмотрим наиболее часто используемые теги для форматирования текста и их атрибуты.
Здесь нужно коротко упомянуть о том, что такое текст в «электронном» виде. Я скажу лишь о том, как связаны форматирование текста в html и редактирование этого текста в текстовых редакторах. Допустим, вы набрали текст в редакторе, произвели его форматирование: выделили какие-то слова жирным или курсивом, либо сделали с текстом что-то еще, затем скопировали его и вставили в код html. Открываете htmlM-страницу в браузере, а всё ваше форматирование куда-то исчезло. Происходит это потому, что текстовый редактор для форматирования текста применяет свои спецсимволы, которые вы по умолчанию не видите. В окне редактора вы видите только текст, а на самом деле там есть еще управляющие спецсимволы, с помощью которых редактор «понимает», как ему отображать тот или иной кусок текста. Вообще-то существует способ перенести текст из редактора в html -код в исходном виде. И раз уж об этом зашла речь, то форматирование текста и начнем изучать с этого тега.
Самыми популярными тегами для форматирования текста являются:
< strong>< /strong > — используется для выделения текста полужирным.
< em>< /em>— используется для получения курсивного текста.
< U>< /U> — позволит подчеркнуть текст.
< STRIKE>< /STRIKE> — делает текст перечеркнутым.
< SUB>< /SUB> — предназначен для выделения подстрочного текста (нижний индекс). Этот тег может быть полезен для записи химических формул: H2O.
< SUP>< /SUP> — нужен для выделения надстрочного текста (верхнего индекса). Например, для записи возведения в степень: (a+b)2.
Все эти теги для форматирования текста можно использовать как по одному, так и несколько вместе.
Расположить блоки текста (абзацы) на html -странице можно с помощью тега < P>. Этот тег приводит к вставке одной пустой строки и размещает находящийся за ним видимый элемент html -страницы в следующей строке.
Использовать закрывающий тег < /P > не обязательно, т.к. браузер считает, что начало следующего абзаца означает конец предыдущего. У этого тега есть необязательный атрибут align с возможными значениями center, left, right и justify, который выравнивает текст абзаца по центру, по левому краю, по правому краю и одновременно по двум краям соответственно. Например, html -код
< p align="center"> текст < /p>
разместит текст по центру.
Если нужно обеспечить переход на новую строку без вставки пустой строки, то используется тег < BR>. У < BR> нет закрывающего тега. Вы уже наверное догадались, что для вставки нескольких пустых строк, нужно записать тег < BR> несколько раз подряд.
Визуально разделить части текста можно еще при помощи тега < HR>. Этот тег создает на странице разделительную полосу. Тег HR имеет следующие атрибуты:
size — толщина полосы;
width — ширина полосы;
align — выравнивание;
color — цвет полосы;
noshade — атрибут, не имеющий значений. Если указан, то создается сплошная черная полоса без тени.
Например, html -код:
< hr align="center" size="5" color="#000000">
в браузере примет вид:
Ширину и толщину можно указывать как в пикселях (тогда величина будет постоянной), так и в процентах (тогда величина будет меняться в зависимости от разрешения экрана).
Для задания названий разделов и подразделов используются теги заголовков. Существуют шесть уровней заголовков и обозначаются они так: < H1>< /H1>, < H2>< /H2>, < H3>< /H3>, < H4>< /H4>, < H5>< /H5>, < H6>< /H6>.
Заголовки выделяются полужирным шрифтом и отделяются от остального текста пустой строкой. Самый крупный заголовок < H1>< /H1>, а самый маленький < H6>< /H6>.
Теги заголовков имеют атрибуты:
align — выравнивание на странице, как вы уже знаете;
title — всплывающая подсказка, которая появляется при наведении мыши на заголовок.
Для форматирования непосредственно шрифтов, в HTML есть тег < FONT>< /FONT>. У этого тега существуют следующие атрибуты:
color — цвет шрифта;
face — гарнитура шрифта;
size — размер шрифта. Может быть задан абсолютным (от 1 до 6) либо относительным значением (от +1 до +6 и от -1 до -6). По умолчанию размер шрифта 3. Если указать < font size="+1">< /font>, то текст, размещенный между тегами < font> и < /font>, будет отображаться увеличенным на 1 по сравнению с другим текстом. Аналогично и с -1, только уменьшенным на 1.
Создать список в HTML можно с помощью тегов < OL>< /OL> и < UL>< /UL>. В первом случае создается упорядоченный (нумерованный) список, во втором неупорядоченный (маркированный). Каждый элемент списка выделяется тегом < LI>< /LI>. Браузер отображает элементы списка с новой строки в виде столбца с отступом и маркерами. Вид маркера определяется атрибутом type. В нумерованном (упорядоченном < OL>) списке маркеры (значения атрибута type) такие:
1 — нумерация арабскими цифрами (по умолчанию);
A — большими латинскими буквами по алфавиту;
a— маленькими латинскими буквами;
I — большими римскими цифрами;
i — маленькими римскими цифрами.
Например, HTML-код:
< ol type="a">< li>Первый.< /li> < li>Второй.< /li>< /ol>
браузер покажет так:
| ||||||||
| Теги HTML для вставки изображений: | ||||||||
Сейчас трудно представить себе сайт, на страницах которого не содержались бы картинки и графика. Изображения делают сайт более привлекательным и непохожим на другие ресурсы, но главное тут — чувство меры. Переизбыток графики вызовет утяжеление html-страницы и, соответственно, увеличит время ее загрузки. Кроме того, наличие большого числа изображений будет отвлекать посетителей от главного содержимого сайта (если, конечно, графика не является главным содержимым сайта). Так что, соблюдайте меру, используйте картинки только там, где это нужно.
В разделе Атрибуты тега BODY я уже рассказывал о том, как графика может использоваться в качестве фона html-документа, сейчас же поговорим о том, как графика используется в «верхнем слое» html-страницы.
Для вставки картинок в HTML используется тег < IMG> с обязательным атрибутом SRC. Этот атрибут указывает браузеру путь к файлу изображения. Т.е. для вставки картинки с названием logo.jpg в определенное место html-страницы (при условии, что и страница, и картинка расположены в одной папке (каталоге)) нужно в этом месте вставить следующий html-код:
< img src="logo.jpg">
Если графика и страница расположены в разных каталогах, то нужно указать путь к изображению относительно страницы. Например, если html-страница лежит в каталоге site, в этом же каталоге расположен подкаталог images, в котором и находится наша картинка logo.jpg, то для ее вставки нужно написать так:
< img src="images/logo.jpg">
Помимо обязательного атрибута src у тега IMG есть еще несколько необязательных атрибутов. Рассмотрим их подробнее:
width — ширина изображения в пикселях или процентах;
height — высота изображения в пикселях или процентах.
Если используются эти атрибуты, то браузер сначала выделит место под графику, подготовит макет документа, отобразит текст и только затем загрузит изображение. При этом он поместит картинку в прямоугольник выделенного размера, даже если реальные ширина и высота больше (сожмет) или меньше (растянет). В случае, когда эти атрибуты не используются, браузер будет грузить картинку сразу, а вывод идущих за ней текста и остальных элементов задержится. Ширину и высоту изображений можно указывать как в пикселях (при этом размер картинки будет постоянным вне зависимости от разрешения экрана), так и в процентах (размер картинки будет зависеть от разрешения экрана пользователя). Например:
< img src="logo.jpg" height="20">
или
< img src="logo.jpg" height="5%">
В случае, если пользователь в настройках браузера отключил показ изображений, то можно вместо картинки вывести альтернативный текст, который бы объяснил, что за графика здесь должна быть. Достигается это путем применения атрибута alt:
< img src="logo.jpg" alt="Логотип сайта internetzarabotoc.front.ru>
В этом случае браузер зарезервирует место на странице под картинку, но вместо самой картинки покажет текст, который вы напишите в значении атрибута alt (повторю, если пользователь отключил показ графики. Если нет, то картинка скроет собой альтернативный текст).
С помощью уже знакомого вам атрибута align можно управлять выравниванием изображений относительно других элементов html-страницы. У атрибута align есть несколько значений, но нас больше всего на данный момент интересуют два:
left — графика располагается у левого края страницы, а текст и другие элементы обтекают изображение справа;
right — графика располагается у правого края страницы, а текст и другие элементы обтекают изображение слева.
Например, HTML-код
< img src="http://internetzarabotoc.front.ru/%F4%E0%E9%EB%FB/logo.jpg" align="left">Это мой аватар.
браузер покажет так:
 Это мой аватар.
,а этот HTML-код:
< img src="http://internetzarabotoc.front.ru/%F4%E0%E9%EB%FB/logo.jpg" align="right">Это мой аватар.
будет выглядеть вот так:
Это мой аватар.
Для прекращения обтекания текстом изображения можно использовать тег < BR> (знакомый нам из прошлого раздела Форматирование текста в HTML). У тега BR есть атрибут clear, который может принимать три значения:
left — прекращение обтекание текстом изображений, выровненных по левому краю;
right — прекращение обтекание текстом изображений, выровненных по правому краю;
all — прекращение обтекание текстом изображений, выровненных и по левому, и по правому краю.
По умолчанию графика встраивается в страницу почти вплотную к тексту и другим элементам. Если такое отображение не устраивает, то можно задать пустые поля вокруг картинки. Делается это с помощью следующих атрибутов тега IMG:
vspace — создает верхнее и нижнее поля;
hspace — создает боковые поля (слева и справа).
Значения этих атрибутов указывается в пикселях. Например, если мы немного дополним предыдущий пример:
< img src="http://internetzarabotoc.front.ru/%F4%E0%E9%EB%FB/logo.jpg" align="left" vspace="5" hspace="10">Это мой аватар.
,то получим следующее:
Это мой аватар.
Вокруг изображений можно создать черную рамку с помощью атрибута border. Значение этого атрибута указывается в пикселях и определяет толщину рамки. Например, HTML-код:
< img src="http://internetzarabotoc.front.ru/%F4%E0%E9%EB%FB/logo.jpg" border="5">
в браузере выглядит так:
На этом раздел о тегах HTML, которые нужны для добавления картинок на страницы сайта можно считать завершенным. В следующем разделе поговорим о том, как создаются ссылки в HTML и о том, как сделать их графическими гиперссылками.
| ||||||||
| Теги HTML для создания гиперссылок: | ||||||||
Главным признаком HTML-документа является наличие в нем гиперссылок (или просто ссылок) на другие документы, сайты, файлы, картинки и т.д. Именно возможность добавлять в страницы ссылки на объекты вне нее и сделала Интернет столь популярным и удобным для использования. Поэтому при создании своего сайта не забывайте про магию ссылок.
Между собой ссылки различаются на внешние и внутренние, а также на текстовые и графические. Внешние ссылки ведут за «пределы» html-страницы, внутренние на различные части этой же страницы. Текстовые ссылки представляют из себя текст, а графические, в качестве объекта, по которому нужно щелкнуть для перехода, содержат какое-либо изображение. Все эти разновидности ссылок создаются в HTML с помощью тега < A>< /A> (сокращение от англ. anchor — якорь). Рассмотрим его поподробнее.
Для создания ссылки на другой документ (внешняя ссылка) служит атрибут тега < A> href. В качестве значения этот атрибут принимает URL-адрес документа или имя файла, если файл расположен в этом же каталоге, в противном случае нужно указывать полный путь. Текст ссылки (его еще называют анкором) может быть как обычным текстом (текстовая ссылка), так и графическим изображением (графическая ссылка). Графическая ссылка создается вставкой тега IMG между тегами < A> и < /A>. В общем, синтаксис создания ссылки выглядит так:
< a href="URL-адрес или имя файла">текст ссылки< /a>
Например, чтобы создать текстовую ссылку на главную страницу этого сайта, нужно написать следующий HTML-код:
< a href=" http://internetzarabotoc.front.ru/">Главная.< /a>
В браузере это будет выглядеть так: Главная.
Цвет текста ссылок можно изменить с помощью атрибутов тега BODY. Вообще, к тексту ссылок можно применять все те же атрибуты форматирования, что и к основному тексту страницы, т.е. выделять жирным, курсивом, использовать заголовки и т.д.
Чтобы создать графическую ссылку, как я уже сказал выше, нужно вместо текста ссылки воспользоваться тегом IMG. Пример этой ссылки выглядит так:
< a href=" http://internetzarabotoc.front.ru/">< img src="http://internetzarabotoc.front.ru/%F4%E0%E9%EB%FB/%E3%EB%E0%E2%ED%E0%FF.jpg">< /a>
А браузер покажет: 
Текстовые и графические ссылки можно комбинировать. Если написать:
< a href=" http://internetzarabotoc.front.ru/">< img src="http://internetzarabotoc.front.ru/%F4%E0%E9%EB%FB/%E3%EB%E0%E2%ED%E0%FF.jpg">< br>Главная страница< /a>
,то ссылкой будет как картинка, так и текст «Главная страница»:
Главная страница
Опять-таки по умолчанию браузер при переходе по ссылке открывает страницу в этом же окне. Чтобы изменить это используется атрибут тега < A> target. Он имеет следующие значения:
_blank — открывает страницу в новом окне;
_parent — загружает ссылку в родительском окне;
_self — по умолчанию. Открывает ссылку в этом же окне.
Это не все значения атрибута target, но это самые основные. Пример использования этого атрибута:
< a href=" http://internetzarabotoc.front.ru/" target="_blank">Главная страница< /a>
В теге < A> можно также использовать атрибут title. С его помощью можно создать всплывающую при наведении мыши на ссылку подсказку
< a href=" http://internetzarabotoc.front.ru/" title="Перейти на главную страницу">Главная.< /a> а браузер покажет: Главная.
Внутренние ссылки создаются по тому же принципу, что и внешние. Только в значении атрибута href указывается якорь ссылки. Якорь создается атрибутом name:
< a name="имя якоря">текст< /a>
Имя якоря задается произвольно. Тут стоит сказать, что не все браузеры понимают русские имена якорей, поэтому рекомендую использовать латиницу. Текст между тегами < A> и < /A> для создания якоря не обязателен и чаще всего не указывается. HTML-код внутренней ссылки будет выглядеть так:
< a href="#zagolovok">К заголовку< /a>
,а в браузере так: К заголовку
Сам якорь находится рядом с заголовком этой страницы, туда вы и попадёте, если щелкните по ссылке. Якорь, как вы и сами, наверное, догадались, имеет вид:
< a name="zagolovok">< /a>
Это все, что я могу вам рассказать о создании ссылок в HTML. И этот раздел можно объявлять законченным. Рекомендую еще раз пробежаться по предыдущим разделам, а затем создать полноценную HTML-страницу, посвященную чему душе угодно. После чего выложить ее на какой-нибудь бесплатный хостинг (конечно, если у вас есть платный хостинг, то на него) и уже полноценно полюбоваться на свой первый сайт. В общем почувствовать себя владельцем сайта. А затем, переходить к следующему разделу, в котором я расскажу вам о создании таблиц в HTML.
| ||||||||
| Создание таблиц в HTML: | ||||||||
В HTML таблицы применяются не только привычным нам образом (как набор данных, распределенных по строкам и столбцам), но и для удобства размещения информации на html-странице. Проще говоря, можно представить всю html-страницу в виде таблицы и, например, поместить меню в ее левый столбец, основную информацию в средний столбец, а дополнительные ссылки в правый столбец. Количество столбцов и строк выбирается только вами и может быть любым.
Сама таблица в HTML задается тегами < TABLE> и < /TABLE>, строки таблицы (помещаются между тегами < TABLE> и < /TABLE>) тегами < TR> и < /TR>, а столбцы таблицы (помещаются между тегами < TR> и < /TR>) тегами < TD> и < /TD>.
Например, создадим таблицу, состоящую из одной строки и двух столбцов. HTML-код будет выглядеть так:
< table>
< tr>
< td>Первая ячейка< /td>
< td>Вторая ячейка< /td>
< /tr>
< /table>
Этот код можно записать и так:
< table>< tr>< td>Первая ячейка< /td>< td>Вторая ячейка< /td>< /tr>< /table>
Но обычно строк и столбцов в таблице много и при такой записи вы будете постоянно путаться, поэтому поначалу рекомендую использовать первый способ. А в браузере этот HTML-код будет выглядеть так:
По умолчанию таблица представляется в браузере без рамок. Чтобы рамки были видны, используется уже знакомый вам по предыдущим разделам атрибут border: < table border="1"> < tr> < td>Первая ячейка< /td> < td>Вторая ячейка< /td> < /tr> < /table> И тогда браузер покажет:
Значение атрибута border влияет только на внешнюю рамку, рамки между ячейками изменять нельзя. Их можно либо показывать, либо нет. Например, если изменить значение атрибута border с 1 на 10, то мы получим:.
Чтобы изменить расстояние между соседними ячейками используется атрибут cellspacing. Для наглядности усложним таблицу: сделаем две строки по три столбца и применим атрибут cellspacing: < table border="5" cellspacing="10"> < tr> < td>Первая ячейка< /td>< td>Вторая ячейка< /td>< td>Третья ячейка< /td> < /tr> < tr> < td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>< td>Шестая ячейка< /td> < /tr> < /table> Браузер покажет:
 Мы поможем в написании ваших работ! |