Создание страничек в Интернет становится все актуальнее. Пытаются их ваять уже кому не лень. :)
Но кроме желания ваять треба еще и каких-то основ и опыта. Кто-то ставит супер-пупер крутую прогу FrontPage, но потом сам не знает, чё она там генерит ему. :) Кто-то сдирает чужие ваяния, иной раз не сумев толком переделать под себя. Кто-то генерит что-то смежное между первыми и вторыми, одним словом, прикол да и только. Вот и решил я помочь тебе разобраться в этой фене - html.
Поехали! (с) Гагарин
Что касается программ типа FrontPage - оставь их ламерам! Их делали для тех, кто не может все сделать сам. :) Если же ты будешь знать html, подобные программы несомненно тебе помогут облегчить жизнь при, например, конвертации прайс-листов в хтмл или быстром подборе нужных цветов и т.п.
Для начала тебе понадобится выучить базовые теги html и принцип построения любой html-страницы.
Любой html документ сроится по принципу Начало-Заголовок-Тело-Конец. Начало показывает тег <html>, а конец тег </html>. Кстати, феня тег это то, что заключено между < и >. Заголовок ограничивают теги <head> и </head>, а тело <body> и <body>. Заголовок обычно несет информацию для поисковых систем, некоторую официальную информацию, заголовок самой страницы и скрипты, которые выполняются до загрузки тела страницы. Тело - это все то, что отображается потом в браузере. А теги начала и конца позволяют однозначно определить страницу как html-страницу. Плюс ко всему файл должен иметь расширение htm или html. Первое пошло от систем, не поддерживающих длинных расширений, а второе от поддерживающих; в результате сейчас можно и с таким, и с таким. Используются еще расширения, к примеру, shtml и asp, но тебе это вряд ли понадобится вообще. Язык html это язык разметки, а не какой-нибудь язык программирования, поэтому он в принципе элементарен и не требует особых навыков, скорее требуется опыт создания страниц и дизайна, нежели опыт в написании кода. Код можно писать в чем угодно, лично я всегда пишу в NotePad. :) Итак, какие теги используются в html (я перечислю наиболее часто используемые и поддерживаемые всеми браузерами), некоторые даже сделал с картинками - когда не очень ломало, :) а для всех остальных в самом конце будет пример:
<title></title> - заголовок хтмл-документа
<center></center> - центровка
<a атрибуты></a> - гиперссылка (атрибут href) или якорь (атрибут name)
<br> - перенос каретки, по-нашенски переход на новую строку :)
<nobr></nobr> - по возможности разрывы не допускаются
<b></b> - заключенный текст между тегами будет жирным
<form атрибуты></form> - форма
<frame атрибуты></frame> - задается кадр
<frameset атрибуты></frameset> - задается набор кадров
<noframes></noframes> - то, что будет отображаться в браузерах, не поддерживающих кадры
<pre атрибуты></pre> - текст между тегами будет отображаться как есть (с соблюдением строк, переносов и интервалов)
<img атрибуты> - изображение детской неожиданности :)
<map атрибуты></map> - определяет чувствительную область изображения к перемещению крысы
<sub></sub> - нижний индекс (текст будет смещен вниз)
<sup></sup> - верхний индекс (текст будет смещен вверх)
<basefont атрибуты> - указывает размер шрифта для последующего текста
<font атрибуты></font> - установка размера, цвета или гарнитуры заключенного в теги текста
Пример:
<hr атрибуты> - горизонтальная линейка
Пример:
<hn атрибуты></hn> - заголовок (n от 1 до 6)
Пример:
<li атрибуты></li> - элемент списка
<ul атрибуты></ul> - неупорядоченный список элементов <li>
Пример:
<ol атрибуты></ol> - упорядоченный список элементов <li>
Пример:
<p атрибуты></p> - абзац
Пример:
<tr атрибуты></tr> - строка в таблице
<td атрибуты></td> - столбец в таблице
<table атрибуты></table> - таблица
Пример:
В принципе, как ни странно, этого набора тебе вполне хватит, чтобы наваять что-то стоящее. Хотя это далеко и не полный список тегов, я перечислил все самые основные и часто используемые. А многие фичи делаются графикой и потом просто тегами собираются и форматируются. Для примера можно что-нибудь наваять. :) Так как я не приверженец фреймов, то все сделаю с помощью таблицы, да и тебе советую делать таблицами, а не в фреймах.
Осталось придумать, что бы наваять. :) Вот что вышло:
Замечания:
- картинки мне было лениво ваять, и я просто сослался абсолютными ссылками на картинки с сайта www.xakep.ru
- чтобы твоя картинка грузилась быстрее, всегда пиши width и height в <img...>
Ну и вот, в принципе, сам код:
<html>
<head>
<title>Пример для журнала "Хакер"</title>
</head>
<body>
<center>
<font face="Arial, Helvetica" size="2">Простенький пример хакерской странички, поучающей ламеров хтмл-ю (:</font>
<br><br>
<table border="0" cellspacing="2" cellpadding=0 width="620">
<tr><td><a href="http://www.xakep.ru" target="_top"><img align="left" src="http://www.xakep.ru/x-joke/images/00003.jpg" width="400" height="287" border="0" alt="Типа мое фото :0)"></a>
<p align="justify"><h4>Если</h4> очень поднатужиться, то... не-а :) то можно сделать текст, обтекающий картинку - для этого просто в теге <img...> добавь феню align="left", тоды текст будет обтекать, :) хых, круто сказано, текст будет обтекать, :))) ну так вот, текст будет обтекать картинку справа... А чтобы он особо не был кривым, отформатируем его абзацем с недокументированным параметром align="justify". Кстати, неплохо вроде вышло. :)
Про трудную жизнь свиней, я думаю, сам сочинишь. А я щас буду плодить таблицу дальше и показывать всякие фени.</p></td></tr>
<tr><td bgcolor="#CC99CC">тексь <b>эту ячеечку</b> <u>мы</u> <i>покрасим</i> в #CC99CC цвет</td></tr>
<tr><td bgcolor="#CCCCCC">А <sub>тут</sub> <sup>мы</sup> <sub>щас</sub> <sup>бум</sup> испытывать остальные теги типа :)</td></tr>
</table>
<br><br>
<a href="http://www.xakep.ru" target="_top"><img src="http://www.xakep.ru/xakep.gif" border="0" width="88" height="31" alt="Xakep"></a><br><br>
<font face="Arial, Helvetica" size="1">© Copyright Lamer Production 2000 :)</font>
</center>
</body>
</html>
Писать этот код, как ни странно, минуты 2 от силы. На этом примере я всего лишь показал тебе элементарный хтмл. Со временем это для тебя будет так же элементарно, как выключить компьютер. Другое дело, что потом ты можешь юзать всякие другие фичи, применительные к вебу: скрипты, апплеты, динамический хтмл (DHTML) и т.п. Хотя все по мере надобности. С виду простыми тегами можно будь здоров что наваять, если еще хорошо владеть графикой. Одним словом, ваяй, фигарь и угорай! :0)
Отдельно еще рассмотрю формы и фреймы (кадры). Начнем с фреймов. Если уж прибило использовать тебя фреймы, то эта фича юзается следующим макаром. Сначала грузится файл с фреймовой структурой, в котором ты определяешь параметры каждого фрейма и то, что изначально в каждый фрейм загружается. А то, что грузится в каждый отдельный фрейм, ни что иное, как обычный хтмл-документ. Для примера создадим 3 фрейма: один вверху и два внизу. В верхний загрузим какую-нить картинку с Хакера, :) а в двух нижних подпишемся. :)
Главный хтмл-файл будет выглядеть вот так:
<html>
<head>
<title>Пример для журнала "Хакер"</title>
</head>
<frameset rows="60%, 40%">
<frame src="frame1.html" name="frame1">
<frameset cols="65%, 20%">
<frame src="frame2.html" name="frame2">
<frame src="frame3.html" name="frame3">
</frameset>
<noframes>
<font color="#FF0000"><h1>Лопух, уже весь мир перешел на браузеры новых версий! Бросай свою дремучую и качай поновее.</h1></font>
</noframes>
</frameset>
</html>
Ну и плюс коды для хтмл-ек для всех 3-х фреймов:
<html>
<head>
<title>Пример для журнала "Хакер"</title>
</head>
<body>
<center>
<table border="0" cellspacing="2" cellpadding=0 width="620">
<tr><td><a href="http://www.xakep.ru" target="_top"><img src="http://www.xakep.ru/x-joke/images/00007.jpg" width="398" height="325" border="0" alt="Типа мое фото :0)"></a></td></tr>
</table>
<br><br>
<a href="http://www.xakep.ru" target="_top"><img src="http://www.xakep.ru/xakep.gif" border="0" width="88" height="31" alt="Xakep"></a>
<br><br>
<font face="Arial, Helvetica" size="1">© Copyright Lamer Production 2000 :)</font>
</center>
</body>
</html>
<html>
<head>
<title>Пример для журнала "Хакер"</title>
</head>
<body>
<center>
<table bgcolor="#CC99CC" border="0" cellspacing="2" cellpadding=0 width="620">
<tr><td align="center"><p align="center">Чувак, ты крут как никогда, ты постиг фреймы :)</p></td></tr>
</table>
<font face="Arial, Helvetica" size="1">© Copyright Lamer Production 2000 :)</font>
</center>
</body>
</html>
<html>
<head>
<title>Пример для журнала "Хакер"</title>
</head>
<body>
<center>
<a href="http://www.xakep.ru" target="_top"><img src="http://www.xakep.ru/xakep.gif" border="0" width="88" height="31" alt="Xakep"></a>
</center>
</body>
</html>
Ну и теперь децел о формах. Удобные такие хрени, которые позволяют создавать формочки со списками чего-либо, текстовыми полями, радиокнопками и т.п. Причем потом все введенные данные можно при нажатии кнопки Submit обработать скриптом или же переслать на мыло. Остановимся на втором варианте и наваяем для примера простенькую форму, но содержащую разные элементы:
Код формы:
<html>
<head>
<title>Пример для журнала "Хакер"</title>
</head>
<body>
<p align="left">
<form name="xakep_forma" method="post" action="mailto:твое_мыло" enctype="text/plain">
<hr size="1" color="#000080" width="100%">
<font face="Arial Cyr, Arial" size="2" color="#FF0000">Чудная форма :</font>
<br>
<hr size="1" color="#000080" width="100%">
Кто там :<br>
<input type="text" name="who" size="30" value="">
<br><br>
Кликуха :<br>
<input type="text" name="nickname" size="30" value=""><br><br>
Чё нада :
<input type="radio" name="what" value="shokolad" checked>Шоколаду
<input type="radio" name="what" value="money">Денег
<input type="radio" name="what" value="girl">Девочку
<br><br>
И как?
<select name="how">
<option selected>красную
<option>зеленую
<option>в обертке
</select>
Быстро?
<input type="checkbox" name="quickly" value="yes">Угу
<br><br>
Пожелания :<br><textarea type="text" name="contact_order" cols=40 rows=5 value="">Мля</textarea>
<br><br>
<input type="submit" name="submit" value=" Послать на"><input type="reset" name="reset" value=" Очистить на"></form>
</p>
</body>
</html>
Ну что, вник? :) А это тока самые основы, дальше как в анекдоте - чем дальше в лес, тем жирнее партизанки. :) Короче, распечатай, повесь на стенку и проверяй зрение. :) Еще можно другу загнать за четвертной. :) То есть статья очень ценная, вырежи и не выбрасывай. ;)
Автор: Андрей Каролик
Источник: Спецвыпуск хакер, номер #002, стр. 002-008-1
Глоссарий
Обрантая связь
Безопасность
Веб-дизайн
Отослать другу по Email
Печать