|
|
|
16 сентября 2001
|
|
Автор: Furet
|
|
|
|
|
HTML-кодинг для новичков
|
|
Вы, наверное, не раз встречали html-файлы.
Ну а если вы пользуетесь Интернет, то тем более знаете, что это такое. А вы
никогда не пробовали заглянуть в них, я имею ввиду открыть их с помощью
блокнота? Что ж … тогда сделайте это прямо сейчас. Ну как? Вы уже влюбились в
этот прекрасный язык – язык гипертекстовой разметки. Если нет, тогда я попробую
помочь вам в этом. Итак приступим…
Сама структура html-файла состоит из
Группа символов <html>,
<head>, <title>, <body> и другие подобные –
открывающие теги или дескрипторы (кому как нравится).
А </html>, </head>, </title>, </body> и другие – закрывающие.
Между ними
находиться то, что они определяют. Например, между тегом <title> и закрывающим </title> находиться
заголовок странички, который будет помещён в верхнюю часть окна броузера (Internet Explorer и др.) Теги <html> и </html> определяют поле, в
котором непосредственно находиться сценарий гипертекстового языка. Теги <head> и </head> определяют границу
«шапки» html-страницы,
в которой находятся всякие информационный данные о данной странице. А между
дескрипторами <body>
и </body>
находиться основной сценарий, который будет изображаться на экране, а точнее в
окне, вашего броузера.
Допустим, что вам необходимо создать страничку, в которой будет выводиться
текст «Это моя первая html-страничка!». Для этого запустим блокнот и и наберём следующий текст:
<html>
<head>
<title>Это моя первая html-страница</title>
</head>
<body>
Это моя первая html-страничка!
</body>
</html>
Всё! Теперь сохраняем файл как first.html и запускаем его в броузере. Получилось?
Тогда идём дальше.. Теперь, допустим, нам надо сделать так, чтобы наша фраза была
заглавной (выводилась крупным шрифтом). Для это используется тег <h1> и
закрывающий его </h1>. Соответственно, чтобы создать подзаголовок, необходимо
использовать тег <h2> и так далее. А чтобы это понять на практике
создадим следующую html-страницу:
<html>
<head>
<title>Это моя первая html-страница</title>
</head>
<body>
<h1>Заглавный текст, созданный тегом h1</h1>
<h2>Заглавный текст, созданный тегом h2</h2>
<h3>Заглавный текст, созданный тегом h3</h3>
<h4>Заглавный текст, созданный тегом h4</h4>
<h5>Заглавный текст, созданный тегом h5</h5>
<h6>Заглавный текст, созданный тегом h6</h6>
</body>
</html>
У каждого языка есть такая возможность как создание комментариев.
Это своеобразные записки авторов в самом html-сценарии. Главное –
это то, что комментарии не видимы в окне броузера, а видны только
при открытии html-страницы в блокноте. Например,
чтобы создать комментарий необходимо написать следующее
А нужны они для того, что бы было легко читать и редактировать
html-сценарий после его написания.
Теперь неплохо было бы сделать фон страница, ну например, зелёным. Для этого модифицируем тег <body>:
Свойство bgcolor тега <body> как раз и задаёт цвет фона.
Сам же цвет выражается в шестнадцатеричном формате: #000000 –
чёрный цвет; #FFFFFF – белый; #FF0000 – красный; #0000FF –
синий; #345678 – оттенок синего и т. п.
Чтобы фон страницы состоял из повторяющейся картинки, следует использовать свойство background тега <body>. К примеру, у нас есть рисунок pic.gif, который находиться в той же папке, что и наша html-страница, и которым мы хотим заполнить фон. Модифицируем тег <body>:
<body background=”pic.gif”>
Если же рисунок находиться в папке pictures, то следует записать так:
<body background=”pictures/pic.gif”>
«А как же сделать так, чтобы рисунок просто изображался в окне броузера?» - спросите вы. Очень просто! Для этого существует тег <img>, который в отличии от других тегов не имеет закрывающего дескриптора. Например, нам нужно вставить рисунок photo.jpg в html-страницу. Пропишем:
…
<body>
<img src=”photo.jpg”>
</body>
…
Таким образом, в окне броузера при запуске этой страницы появится
данное фото. А чтобы управлять шириной, высотой и толщиной рамки
используются соответствующие свойства тега <img>: width, height
и border. Например, данная запись устанавливает длину рисунка в 100
пикселей, высоту – 150 пикселей, а толщину рамки – 1 пиксель:
…
<body>
<img src=”photo.jpg” width=100 height=150 border=1>
</body>
…
Чтобы разделять элементы (рисунки, таблицы, текст и прочее) html-страницы часто
применяется горизонтальная прямая. Для её создания применяется тег <hr>.
Он также как и <img> не имеет закрывающего дескриптора. Основные свойства –
size, color и width. Size задаёт толщину прямой в пикселях, color –
цвет, а width – длину. Например:
…
<body>
<hr size=1 color=#000000 width=100>
</body>
…
Длину прямой можно задать также с помощью процентов (100% - ширина всего окна).
Данная прямая будет длинной половины экрана:
…
<body>
<hr size=1 color=#000000 width=50%>
</body>
…
А теперь рассмотрим самое основное и самое важное
в web-проектировании – создание таблиц.
Без таблиц вообще не возможно создание полноценного современно
сайта. Их применение может настолько упростить структуру страницы,
что обновление сайта в будущем будет простым, и не
займёт у вас много времени.
Вообще, таблицы в html создаются очень просто. Само поле таблицы
определяется тегами <table> и </table>. Поле строки – тегами
<tr> и </tr>, а поле столбца – тегами <td> и </td>.
К примеру, создадим таблицу, состоящую из одной строки и двух столбцов:
…
<table height=100 width=100>
<tr>
<td width=50 height=100>
Здесь содержимое первого столбца
</td>
<td width=50 height=100>
Здесь содержимое второго столбца
</td>
</tr>
</table>
…
Как вы уже, наверное, догадались, свойства
height и width тегов <table> и <tr> задают
соответственно высоту и длину таблицы или
столбца. Тег <tr> таких свойств не имеет,
да они ему и не нужны.
А теперь создадим такую таблицу
Она состоит из 2-х строк и 2-х столбцов. Для этого необходимо прописать следующее:
…
<table height=100 width=100>
<!--Начало первой строки-->
<tr>
<td height=20 width=50>
Здесь содержимое первого столбца
</td>
<td height=20 width=50>
Здесь содержимое второго столбца
</td>
</tr>
<!--Конец первой строки-->
<!--Начало второй строки-->
<tr>
<td height=20 width=50>
Здесь содержимое первого столбца
</td>
<td height=20 width=50>
Здесь содержимое второго столбца
</td>
</tr>
<!--Конец второй строки-->
</table>
…
У тега <table> имеются такие свойства как
border и bgcolor, которые соответственно задают
ширину рамки таблицы и цвет заливки.
Ну вот я и рассказал вам основы гипертекстового языка (html),
а чтобы узнать о нём больше, читайте книжки, а лучше всего
используйте визуальные редакторы (FrontPage, Dreamweaver и другие) –
своеобразные визуальные компиляторы html-языка. С их помощью вы можете
создать html-страницу визуально, а эти редакторы переведут её в html-код.
Но это только в учебных целях, ибо профессиональные страницы желательно
писать исключительно на html-коде. Какие бы хорошими вам не показались
эти чудо-программы, а мусора они столько в них пихают, что…
в общем учитесь всё делать собственноручно
- так надёжнее.
Что ещё почитать из этого раздела?
Главная >>
О компьютерах >>
HTML-кодинг для новичков
|
|
|
|
Сначала неплохо было бы определиться, а зачем создан этот язык? Для каких целей? И
почему он приобрёл такую популярность?
Язык гипертекстовой разметки (HTML)
был создан для передачи форматированных страниц через Интернет. С помощью этого
языка можно создавать прекрасные странички, которые могут включать в себя
разные шрифты, разноцветный фон, рисунок, таблицу и многое другое. Он очень
компактен, что увеличивает скорость загрузки html-страниц.
|
