Как раньше было сказано, что HTML является языком программирования. Он предназначен для разметки текстовых документов. HTML странички состоят из тэгов (пример: <hr> - горизонтальная линия), т.е. все, что находится между < и > называется тэгом. Все HTML документы начинаются с тэга <html> и заканчиваются тэгом </html>. Тэги бывают разными: только открывающимися и открывающимися/закрывающимися. Пример только открывающегося тэга <hr>. Пример открывающегося/закрывающегося тэга: <html></html>. Есть тэги, которые обязательны:
<html>
<head>
</head>
<body>
</body>
</html>
Для начала откроем любой блокнот. Например стандартный блокнот Windows(Пуск>Программы>Стандартные>Блокнот). Теперь напишите следующий текст в блокноте.
<html>
<head>
<title>1-ая страничка</title>
</head>
<body>
Превет!
<br>Это моя первая страничка.
</body>
</html>
Создадим на диске папку с именем HTML странички и сохраним туда наш документ. Дадим ему имя index.html. Теперь откроем Internet Explorer, заходим в меню Файл>Открыть. Нажимаем на кнопку Обзор и находим наш документ, который мы сохранили, нажимаем кнопку Открыть.
А теперь разберемся в нашей писанине.
<html>
открылся обязательный тэг, показывающий о начале HTML документа.
<head>
это обязательный тэг. Что-то вроде головы. Между этим тэгом мы пишем что-то вроде служебной информации.
<title>1-ая страничка</title>
все, что вы напишите между <title> и </title> будет отображено в заголовке окна. В данном случае там будет написано: 1-ая страничка.
</head>
закрытие тэга головы.
<body>
это обязательный тэг. Будем называть его телом. Все, что вы напишите между тэгом <body> и </body> будет отображено на вашей страничке. Весь текст, написанный в теле будет отображен в строку. Для того, чтобы текст был не в строку, а скажем каждое предложение с новой строки, то ставим тэг <br> перед или после предложения. О нем ниже.
<br>
переход на следующую строку. Тэг закрывать ненужно.
</body>
обязательный тэг. Закрытие тела.
</html>
обязательный тэг. Конец нашего документа.
Если вы измените что-нибудь в нашем *.html файле и захотите посмотреть изменения, то откройте Internet Explorer и загрузите ваше страничку. Если она у вас уже загружена, то просто нажмите F5 или на кнопку Обновить.
Установление цвета фона и текста.
Создайте новый документ и напишите там следующий текст.
<html>
<head>
<title>Установка цвета фона и текста</title>
</head>
<body text="yellow" bgcolor="black">
<font color="#CC0000">Добро пожаловать!</font>
<br>Это моя первая страничка.
</body>
</html>
Сохраняем. Открываем в Internet Explorer.
Как видите мы познакомились с новым для вас тэгом <font></font>. У этого тэга много атрибутов. Можно изменить цвет текста, размер и шрифт. На этом уроке мы рассмотрим только один - изменение цвета, а с остальными познакомимся позже.
Чтобы изменить цвет текста в тэге <font> пишем атрибут color="цвет" - <font color="#CC0000">Тут ваш текст</font>. Измените #CC0000 на свой цвет.
Разбираемся в писанине.
<html>
<head>
<title>2-ая страничка</title>
</head>
<body text="yellow" bgcolor="black">
все это нам уже известно, но вот у тэга <body> мы видим атрибут text="цвет" в данный момент text="yellow" и bgcolor="цвет" в данный момент bgcolor="black". Ппараметр text устанавливает цвет текста по всему документы, т.е. если вы укажете этот атрибут, то любой текст напечатанный в документе будет одного цвета. Если хотите изменить цвет определенного текста используйте тэг <font></font>. Атрибут bgcolor устанавливает цвет фона вашей странички.
<font color="#CC0000">Добро пожаловать!</font>
цвет текста красный.
<br>Это моя первая страничка.
текст на новой строке
</body>
</html>
Размер и шрифт текста.
Напишите следующий текст в блокноте.
<html>
<head>
<title>Размер и шрифт текста</title>
</head>
<body bgcolor="black">
<font color="#CC0000" face="Arial" size="14">Добро пожаловать!
<br>Это моя первая страничка.</font
</body>
</html>
Сохраните его.
Теперь вы знаете новые атрибуты face="название шрифта" и size="размер текста". Они пишутся в тэге <font>. Пример: <font face="Arial" size="10">Тут ваш текст</font>.
Как всегда разбираемся в писанине.
<html>
<head>
<title>3-ая страничка</title>
</head>
<body bgcolor="black">
все это мы уже знаем. Так ведь? ;)
<font color="#CC0000" face="Arial" size="14">Добро пожаловать!
<br>Это моя третья страничка.</font>
тут мы видим, что текст будет красного цвета, шрифт текста Arial и размер 14-ый.
</body>
</html>
Вот и все. Заданий пока не будет. :)
Параграфы.
Параграфы вводятся тэгом <p></p>
Центрировать текст с помощью параграфа <p align="center">Тут ваш текст</p>. Еще можно с помощью тега <center>Тут ваш текст</center>
Выравнивать по левому краю <p align="left">Тут ваш текст</p>.
Выравнивать текст по правому краю <p align="right">Тут ваш текст</p>.
Выравнивание текста по обеим краям документа <p align="justify">.
Напишите следующий текст в блокноте.
<html>
<head>
<title>Параграфы</title>
</head>
<body text="green" bgcolor="Nevy">
<p align="center"><font color="yellow" face="Arial" size="14">Добро пожаловать! Это моя третья страничка.</font></p>
<p align="left">Автор: Шляндин Роман</p>
<p align="right">Меня зовут Роман</p>
<center>Использование тэга center</center>
<p align="justify"><font color="green" size="9" face="Courier New"> <font></p>
</body>
</html>
Сохраните его.
Разбираемся.
<html>
<head>
<title>Параграфы</title>
</head>
<body text="green" bgcolor="Nevy">
<p align="center"><font color="yellow" face="Arial" size="14">Добро пожаловать! Это моя третья страничка.</font></p>
тут текст центрирован, желтого цвета
<p align="left">Автор: Шляндин Роман</p>
тут идет выравнивание по левому краю
<p align="right">Меня зовут Роман</p>
тут идет выравнивание по правому краю
<center>Использование тэга center</center>
<p align="justify"><font color="green" size="9" face="Courier New">
<font></p>
тут идет выравнивание по обеим краям документа краю
</body>
</html>
Заголовки.
Заголовки предназначены для выделения текста или для написания заголовков. Существует 6 видов заголовков.
<h1>Ваш текст</h1>
<h2>Ваш текст</h2>
<h3>Ваш текст</h3>
<h4>Ваш текст</h4>
<h5>Ваш текст</h5>
<h6>Ваш текст</h6>
Напишите следующий текст в блокноте.
<html>
<head>
<title>Пример с заголовками</title>
</head>
<body text="green" bgcolor="Nevy">
<center><h2><font color="yellow">Добро пожаловать! Это моя первая страничка.</font></h2></center>
<p align="left"><h1>Заголовок 1-ого уровня</h1></p>
<p align="justify"><h4>Здесь ваш текст**********************.********.</h4></p>
</body>
</html>
Разборка. :)
<html>
<head>
<title>Пример с заголовками</title>
</head>
<body text="green" bgcolor="Nevy">
<center><h2><font color="yellow">Добро пожаловать! Это моя первая страничка.</font></h2></center>
тут я использовая заголовок 2-ого уровня <h2></h2>
<p align="left"><h1>Заголовок 1-ого уровня</h1></p>
тут я использовая заголовок 1-ого уровня <h1></h1>
<p align="justify"><h4> Здесь ваш текст**********************.********.</h4></p>
тут я использовая заголовок 4-ого уровня <h4></h4>
</body>
</html>
Курсив, жирный текст, подчеркнутый текст.
Курсив <i>Ваш текст</i> - будет выглядеть так: курсив
Жирный текст <b>Ваш текст</b> - будет выглядеть так: жирный текст
Подчеркнутый <u>Ваш текст</u> - будет выглядеть так: подчеркнутый текст
Этими тэгами можно комбинировать. Например:
Курсив и жирный текст <i><b>Ваш текст</b></i> - будет выглядеть так: курсив и жирный текст
Ну это как вам будет угодно, а теперь напишите следующий текст в блокноте.
<html>
<head>
<title>Курсив, жирный текст, подчеркнутый текст</title>
</head>
<body text="green" bgcolor="Nevy">
<h1>Привет <b>человек</b>!</h1>
Это самый первый <u>мой статья</u> по <i><b>HTML<b></i>
<br><font color="yellow"><i>Автор: Шляндин Роман</i></font>
</body>
</html>
Разбираться с текстом мы не будет, потому что здесь все понятно.
Ссылки. Все о работе с ссылками.
Вы научитесь делать ссылки(гиперссылки). Они нужны нам для того, чтобы пользователь смог загружать другие страницы вашего сайта, картинки, другие сайты. Короче с помощью ссылки пользователь сможет гулять по вашим страничкам. А теперь рассмотрим тэг определяющий ссылку.
<a></a> - тэг ссылки
<a href="ссылка">Текст</a>
в атрибуте href пишите ссылку на страницу или сайт. Между тэгом <a> вот тут </a> пишется текст. При клике на этот текст пользователь попадет на страничку или сайт написанный вами в атрибуте href.
Ссылки бывают разные. Пример ссылок.
<a href="страничка">Ваш текст</a>
Пример: <a href="index.htm">Главная страничка</a>
Этот пример ссылки показывает, что ссылка стоит на страничку index.htm, которая находится в одной папке с этой страничкой.
<a href="имя папки/страничка">Ваш текст</a>
Пример: <a href="about/index.htm">Обо мне</a>
Этот пример ссылки показывает, что ссылка стоит на страничку index.htm в папке about, которая находится в одной папке с этой страничкой.
<a href="../страничка">Назад</a>
Пример: <a href="../08.htm">Назад</a>
Тут ссылка стоит на страничку, которая находится в папке, в которой находится попка с этой страничкой.
Разбираемся...
<a href="сайт">Ваш текст</a>
Пример: <a href="http://www.maxtorg.ru">Мой сайт</a>
Этот пример ссылки показывает, что ссылка стоит на сайт www.maxtorg.ru.
Ссылки можно открыть в новом окне. Для этого нужен атрибут target.
<a href="ссылка" target="_blank">Текст ссылки</a>
Пример: <a href="friends.html" target="_blank">Мои друзья</a>
Чтобы открыть ссылку в новом окне, как я уже говорил, нужен атрибут target который равен "_blanck"(target="_blank"). Он пишется в тэге <a target="_blank"></a>
Так же можно установить закладку. Для установления закладки нужно, в том месте, где ты хочешь поставить закладку написать:
<a name="имя закладки">Тут можете написать текст, но не обязательно</a>
Пример: <a name="top"></a>
Закладку мы поставили, а теперь нужно сделать на нее ссылку чтобы на нее попасть. Делается это следующим образом:
<a href="имя вашей закладки, на которую нужно перейти">Текст</a>
Пример: <a href="#top">Вверх</a>
Когда пишете ссылку на закладку нужно перед именем закладки поставить знак # (переключиться на английский и нажать SHIFT+3).
Картинка тоже может быть ссылкой, но об этом в другом уроке.
Еще есть ссылка на ваш почтовый ящик(e-mail). Это тоже просто.
<a href="mailto:ваш ящик">Напишите мне</a>
Пример: <a href="admin@maxtorg.ru">Напишите мне</a>
Замените admin@maxtorg.ru на ваш ящик и все. Mailto: должно быть всегда, если делаете ссылку на ящик.
Если вы делаете ссылку, то она будет синего цвета. Ссылка, по которой уже заходили будет красного цвета. Активная ссылка будет зеленого цвета. Чтобы изменить эти цвета вам нужны атрибуты тэга <body>, новые для вас: link="цвет ссылки", vlink="цвет" и alink="цвет". А пишутся они так.
<body link="цвет" vlink="цвет" alink="цвет">
<body link="#CC0000" vlink="#FFFF00" alink="#008000">
В этом примере цвет ссылки будет красный, цвет ссылки которую уже посещали будет желтый, цвет активной ссылки будет зеленый.
Итак, перейдем к примерам. Для этого вам нужно создать папку(пусть будет: мой сайт), в ней еще папку с именем about. В первой папке создайте 3 HTML документы с именем texts.html, anekdots.html, other.html. В папке about создайте HTML документ с именем index.html. Содержимое документов придумайте сами. Это вы уже умеете.
А теперь напишите следующий текст в блокноте.
<html>
<head>
<title>Ссылки. Все о работе с ссылками.</title>
</head>
<body text="yellow" bgcolor="black" link="#CC0000" vlink="#FFFF00" alink="#008000">
<center><h3>Добро пожаловать!</h3></center>
<br><font color="green" size="14">На этом сайте вы сможете прочитать
анекдоты, интересные статьи и много дрегие.</font><br>
<br><a href="anekdots.html">Аекдоты</a>
<br><a href="texts.html">Интересные статьи</a>
<br><a href="other.html">Другое</a>
<br><a href="about/index.html">Обо мне</a>
<br><a href="http://maxtorg.ru" target="_blank">Мой второй сайт</a>
<br><br>
<p align="right"><a href="mailto:admin@maxtorg.ru">Автор: Шляндин Роман</a></p>
</body>
</html>
Сохраните его в ту папку, которую вы создали(мой сайт).
Вставка картинок и их атрибуты.
А пока я вам скажу чем можно сделать картинку. Для начала вам нужны мозги, руки и можно пользоваться стандартным Microsoft Paint, но это нам не пожходит. Я вам посоветую Adobe Photoshop.
Для работы с картинками используется тэг <img>. Чтобы вставить картинку на страничку нужен атрибут src="картинка" тэга <img>.
<img src="имя картинки">
Пример: <img src="image.jpg">
Этот пример используется если картинка находится в одной папке с этой страничкой на которой мы вставляем картинку.
<img src="имя папки/имя картинки">
Пример: <img src="images/image.jpg">
Этот пример используется, если картинка находится в папке, которая находится в одной папке с этой страничкой на которой мы вставляем картинку .
<img src="../имя картинки">
Пример: <img src="../image.jpg">
Этот пример используется, если картинка находится в папке, в которой еще одна папка с этой страничкой на которой мы вставляем картинку.
Можно вставить картинку с другого сайта. Пример ниже.
<img src="сайт/имя картинки или сайт/папка/имя картинки">
Пример: <img src="http://maxtorg.ru/b2.gif или http://maxtorg.ru/ban/b2.gif">
Этот пример используется, если картинка находится на другом сайте.
А теперь напишите следующий текст в блокноте.
<html>
<head>
<title>Все о работе с картинками. Вставка картинок и их атрибуты.</title>
</head>
<body text="yellow" bgcolor="black" link="#CC0000" vlink="#FFFF00" alink="#008000">
<center><h3>Добро пожаловать!</h3></center>
<h2>Это моя фотогалерея.</h2>
<br><img src="../001.jpg">Эта фотография была сделана на военных действиях в Ираке.
</body>
</html>
Вместо нашей картинки вставьте свою. Сохраните его.
Разберем.
<html>
<head>
<title>Все о работе с картинками. Вставка картинок и их атрибуты.</title>
</head>
<body text="yellow" bgcolor="black" link="#CC0000" vlink="#FFFF00" alink="#008000">
это вы уже должны знать
<center><h3>Добро пожаловать!</h3></center>
<h2>Это моя фотогалерея.</h2>
<br><img src="../001.jpg">Эта фотография была сделана на военных действиях в Ираке.
а тут мы вставляем картинку, пишем описание к картинке, а вы уже наверно догадались, где находится картинка
</body>
</html>
Теперь поговорим о атрибутах тэга <img>. У этого тэга есть атрибуты как у тэга <p>(<p align="left/right">), но их немного больше. Вот они.
<img src="картинка" align="left">
Картинка будет слева, а текст справа.
<img src="картинка" align="right">
Картинка будет справа, а текст слева.
<img src="картинка" align="bottom">
Картинка будет внизу.
<img src="картинка" align="middle">
Картинка будет посередине.
<img src="картинка" align="top">
Картинка будет сверху.
Кроме атрибута align есть еще другие атрибуты. Вот они.
<img src="картинка" Vspace="цифра">
Этот атрибут задает расстояние по вертикали между картинкой и текстом. Расстояние в пикселях.
<img src="картинка" Hspace="цифра">
То же самое, что Vspace только Hspace задает расстояние по горизонтали.
<img src="картинка" Width="нирина">
Этот атрибут задает ширину картинки.
<img src="картинка" Height="высота">
Этот высату задает ширину картинки.
<img src="картинка" border="цифра">
Этот атрибут рисует рамку вокруг картинки.
<img src="картинка" Alt="Описание картинки">
Этот атрибут задает описание картинки. Если задать этот атрибут, то при наведении курсора на картинку и держа несколько секунд, то выйдет текст(описание) заданный атрибутом Alt.
Можно задавать сразу несколько атрибутов.
Сразу научу вас вставлять картинку как фон. Для этого у тэга <body> есть атрибут background. Чтобы вставить картинку в фон смотрите ниже.
<body background="картинка">
Пример: <body background="../002.jpg">
Картинка будет как фон странички.
Можно сделать картинку как водяной знак, т.е. при прокрутке скролбара она будет оставаться на месте, а все остальное двигаться.
Пример: <body background="../002.jpg" bgproperties="fixed">
А теперь напишите следующий текст в блокноте.
<html>
<head>
<title>Все о работе с картинками. Вставка картинок и их атрибуты.</title>
</head>
<body background="../002.jpg" bgproperties="fixed" text="yellow" bgcolor="black" link="#CC0000" vlink="#FFFF00" alink="#008000">
<center><h3>Добро пожаловать! Это моя фотогалерея.</h3></center>
<p align="justify">
<img src="../001.jpg" align="left" Hspace="5" alt="Война в Ираке" class=borderall>
<font color="green" size="5">Эта фотография была сделана на военных действиях в Ираке. Горит нефтяная скважена. Я был против войны в Ираке, но хотел посмотреть на что способны эти две стороны. </font>
</p>
<p> </p><p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p><p> </p>
</body>
</html>
Сохраните.
Разберем вместе.
<html>
<head>
<title>Все о работе с картинками. Вставка картинок и их атрибуты.</title>
</head>
<body background="../002.jpg" bgproperties="fixed" text="yellow" bgcolor="black" link="#CC0000" vlink="#FFFF00" alink="#008000">
фоном будет картинка как водяной знак, чтобы фоном было апрсто картинка удалите атрибут bgproperties="fixed".
<center><h3>Добро пожаловать! Это моя фотогалерея.</h3></center>
<p align="justify">
<img src="../001.jpg" align="left" Hspace="5" alt="Война в Ираке" class=borderall>
вставили картинку. Равняется левому краю, текст справа от картинки на расстоянии 5 пикселей, рамка 2 пикселя. При наведении на картинку мыши появится описание "Война в Ираке".
<font color="green" size="5">Эта фотография была сделана на военных действиях в Ираке. Горит нефтяная скважена. Я был против войны в Ираке, но хотел посмотреть на что способны эти две стороны. </font>
подробное описание картинки
</p>
<p> </p><p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p><p> </p>
это специально, чтобы проверить будет фоновая картинка как водяной знак или нет(использовался специальный символ . О них мы поговорим позже)
подвигайте вниз вверх
</body>
</html>
Советую вам потренироваться еще с атрибутами. Вставляйте их, изменяйте значения. Если перейдете сразу на следующий урок, то просто забудете их.
Картинки как ссылки.
Пример ниже.
<a href="war.htm"><img src="../001.jpg" Vsoace="5" align="left" Alt="Военный сайт..."></a>
Все очень просто. Просто вместо текста ставим тэг с картинкой, настраиваем все нужные атрибуты.
А теперь напишите следующий текст в блокноте.
<html>
<head>
<title>Все о работе с картинками. Картинки как ссылки.</title>
</head>
<body background="../002.jpg" bgproperties="fixed" text="yellow" bgcolor="black" link="#CC0000" vlink="#FFFF00" alink="#008000">
<center><h3>Добро пожаловать! Это моя фотогалерея.</h3></center>
<p align="justify">
<a href="../10.htm" target="_blank"><img src="../001.jpg" align="left" Hspace="5" alt="Война в Ираке" class=borderall></a>
<font color="green" size="5">Эта фотография была сделана на военных действиях в Ираке. Горит нефтяная скважена. Я был против войны в Ираке, но хотел посмотреть на что способны эти две стороны. </font>
</p>
</body>
</html>
Вместо моей картинки вставьте свою. Сохраните.
Разберем вместе.
<html>
<head>
<title>Все о работе с картинками. Картинки как ссылки.</title>
</head>
<body background="../002.jpg" bgproperties="fixed" text="yellow" bgcolor="black" link="#CC0000" vlink="#FFFF00" alink="#008000">
<center><h3>Добро пожаловать! Это моя фотогалерея.</h3></center>
<p align="justify">
<a href="../10.htm" target="_blank"><img src="../001.jpg" align="left" Hspace="5" alt="Война в Ираке" class=borderall></a>
все просто. Ставим ссылку на картинку, которая будет открывать страничку в новом окне, картинка выравнивается по левому краю, текст справа от нее на расстоянии 5 пикселей, при наведении на картинку курсора появится подсказка: Война в Ираке. Все
<font color="green" size="5">Эта фотография была сделана на военных действиях в Ираке. Горит нефтяная скважена. Я был против войны в Ираке, но хотел посмотреть на что способны эти две стороны.</font>
</p>
</body>
</html>
Специальные символы.
Они нам нужны для того, чтобы писать символы типа < > & " и пробел. А вы спросите: А почему просто не поставить < или >? А потому-то и нельзя, потому что, как мы уже знаем, символ < и > используются при написании тэгов. Если вы напишете: Я сравнил 1 < 100 > 20, то у вас < 100 > будет как тэг. И что у вас получится? Так вот для чего они и нужны. Список этих символов ниже.
< - символ <
> - символ >
- ставит пробел
" - " (кавычка)
& - & (амперсант)
Пример: <font color="#CC0000"><b><u><i>1<100>20</i></u></b></font> = 1<100>20
Запомните. Спецсимволы не пишутся в тэгах. Они как текст.
Вот такой маленький урок получился, но нужно знать(иногда).
Линии - очень просто.
Сейчас буду учить вас вставлять линии. Они задаются тэгом <hr> и его не надо закрывать. У них есть несколько атрибутов. Они нижу.
<hr align="left">
Ну эти атрибуты мы уже знаем, на линию они действуют так же, как и на текст. У линии они такие же, как у тэга <p> (left, right, center) и других.
<hr width="100%"> или <hr width="30">
Атрибут width устанавливает ширину линии. Можно задать в процентах или в пикселях.
<hr color="#CC0000">
Этот атрибут устанавливает цвет линии.
<hr size="цифра">
Этот атрибут устанавливает толщину линии.
<hr NoShade>
Если написать этот атрибут, то у линии не будет тени. Она не будет объемная.
Можно все эти атрибуты использовать вместе.
Списки, нумерация.
Есть несколько видов списков.
Для списков используется тэг <ul></ul>, а для нумерации <ol></ol>.
текст 1
текст 2
<ul>
<li type="disk">текст 1</li>
<li type="disk">текст 2</li>
</ul>
У списков так же есть атрибут type (тип) и его свойства disk, circle, square, для данного вида используется свойство disk (type="disk").
Просто меняйте значение type на disk, circle или square и вид изменится. Так же можно менять шрифт текста, размер, цвет. Это уже за вами. Вы это все умеете.
Теперь нумерация.
текст 1
текст 2
<ol>
<li type="1">текст 1</li>
<li type="1">текст 2</li>
</ol>
У тэга li в тэге ol тоже есть атрибут type, но с другими значениями - I, i, A, a, 1. В данном примере используется значение по умолчанию (type="1").
Просто заменяйте значение type на I, i, 1, A, a и вид изменится.
Создаем простую таблицу.
Иногда без таблиц даже не обойтись. Сейчас, почти все профессиональные сайты сделаны из таблиц. И мы будем учиться создавать их.
Таблица задается тэгом <table></table>.
Так же таблицы состоят из строк и столбцов. Строка таблицы задается тэгом <tr></tr>, столбец(ячейка) таблицы задается тэгом <td></td>.
Давайте создадим простую таблицу.
Для начала создадим новую страницу. Напечатайте обязательные тэги. Сохраните в файл. Назовем его table1.html. Теперь между тэгами <body> и </body> напечатайте следующий текст.
<table>
<tr>
<td bgcolor="#808080">текст</td>
<td bgcolor="#FF9900">текст</td>
<td bgcolor="#808080">текст</td>
</tr>
<tr>
<td bgcolor="#FF9900">текст</td>
<td bgcolor="#808080">текст</td>
<td bgcolor="#FF9900">текст</td>
</tr>
</table>
У вас должно получиться что-то вроде этого:
<html>
<head>
<head>
<body>
<table>
<tr>
<td bgcolor="#808080">текст</td>
<td bgcolor="#FF9900">текст</td>
<td bgcolor="#808080">текст</td>
</tr>
<tr>
<td bgcolor="#FF9900">текст</td>
<td bgcolor="#808080">текст</td>
<td bgcolor="#FF9900">текст</td>
</tr>
</table>
</body>
</html>
Поздравляю, Вы ознакомились с основными командами языка HTML.