IF-GROUPсоздание сайта |
Дальнейшие шаги программирования на языке HTML. Страница 1.Итак, если вы хорошо усвоили урок страницы Первые шаги программирования на языке HTML, давайте продолжим совершенствование наших навыков. Например создадим страницу такого вот вида:
Для этого напишите такую программу и, как всегда, пересохраните вашу страницу index.html: <html> <title>Моя первая цветная страница</title> <head> <meta content="text/html; charset=windows-1251" http-equiv=Content-Type> <meta name="keywords" content="сделать, создать, сайт, make site"> <meta name="description" content="Эта страница рассказывает о том, как сделать свой сайт на языке HTML"> </head> <body style='margin-top:0; margin-bottom:0; margin-left:0; margin-right:0; margin-widht:0; margin-heigth:0;'> <table width=100% height=100% cellpadding=0 cellspacing=0 border=0> <tr height=60> <td style='padding-left:10pt; background:#55CC33; font-family:Arial; text-align:left; font-size:150%; color:#FFFFFF'> <b>Эмблема</b> </td> <td width=100% style='padding-left:20pt; background:#55CC33; font-family:Arial; text-align:left; font-size:150%; color:#FFFFFF'> <i><b>Название сайта</b></i> </td> </tr> <tr> <td valign=top width=130 style='padding-top:5pt; padding-left:10pt; background:#99FF55; font-family:Arial; text-align:left; font-size:100%; color:#000000'> Оглавление сайта </td> <td valign=top style='padding-top:5pt; padding-left:10pt; background:#CCFF99; font-family:Arial; text-align:left; font-size:100%; color:#000000'> Содержание сайта </td> </tr> </table> </body> </html> Теперь немного пояснений. Вы уже заметили некоторые новые элементы. Например эта строка: <body style='margin-top:0; margin-bottom:0; margin-left:0; margin-right:0; margin-widht:0; margin-heigth:0;'> Команда style внутри тега <body> описывает стиль тела вашей страницы, а именно, что ни слева, ни справа, ни сверху, ни снизу не будет ни каких пробелов (свелой полосы). Наша страница сделана в виде таблицы и по этому надо описать и её стиль. По этому внутри тега <table> есть запись: width=100% height=100% cellpadding=0 cellspacing=0 border=0 Это означает, что по ширене и высоте эта таблица будет занимать 100% экрана вашего монитора, что между ячейками нет пробелов и нет границ. Т.е. ячейки какбы "прилеплены" вплотную друг к другу. <tr height=60> означает, что высота этой строки составляет 60 пикселов <td style='padding-left:10pt; background:#55CC33; font-family:Arial; text-align:left; font-size:150%; color:#FFFFFF'> означает, что отступ слева равен 10 пикселов, заливка ячейки имеет цвет 55CC33 в кодировке RGB (два первых знака - код красного цвета, два вторых - зелёного, два последних - синего). Текст будет написан шрифтом Arial. Текст будет прижиматься к левому краю. Размер шрифта = 150%. Цвет шрифта - FFFFFF, т.е. белый. <td valign=top> означает, что текст в этой ячейке будет прижиматься к верхней её границе. Остальное вы уже знаете. Теги <b> и </b> - жирный шрифт. Теги <i> и </i> - курсив. Теги <p> и </p> - границы абзаца. Здесь их нет. Они понадобятся позже. Ну, как? Всё понятно? Тогда пора преходить ко второй странице этого раздела. Для этого клините по соответствующей ссылке внизу. Ещё раз хочется сказать, что я здесь показываю лишь один из многих способов написания страницы с помощью языка HTML. Однако если вы хотите узнать другие способы, вскройте HTML-код любой понравившейся вам страницы и учитесь (подсматривайте), как это делают другие. Переход к страницам: 1 | 2 | 3 | |
Нашим Заказчикам:
Услуги и цены Контактная информация Начинающим WEB-програмистам:
Введение Самый простой способ Первые шаги программирования на языке HTML Дальнейшие шаги программирования на языке HTML Как разместить сайт на бесплатном сервере Книга отзывов |
