Информационный проект InfoSci >> О компьютерах >> HTML-кодинг для новичков

Вы, наверное, не раз встречали html-файлы. Ну а если вы пользуетесь Интернет, то тем более знаете, что это такое. А вы никогда не пробовали заглянуть в них, я имею ввиду открыть их с помощью блокнота? Что ж … тогда сделайте это прямо сейчас. Ну как? Вы уже влюбились в этот прекрасный язык – язык гипертекстовой разметки. Если нет, тогда я попробую помочь вам в этом. Итак приступим…

Сама структура html-файла состоит из

<head>
<title>Заголовок</title>
</head>

</html>

Группа символов <html>, <head>, <title>, <body> и другие подобные – открывающие теги или дескрипторы (кому как нравится). А </html>, </head>, </title>, </body> и другие – закрывающие.

Между ними находиться то, что они определяют. Например, между тегом <title> и закрывающим </title> находиться заголовок странички, который будет помещён в верхнюю часть окна броузера (Internet Explorer и др.) Теги <html> и </html> определяют поле, в котором непосредственно находиться сценарий гипертекстового языка. Теги <head> и </head> определяют границу «шапки» html-страницы, в которой находятся всякие информационный данные о данной странице. А между дескрипторами <body> и </body> находиться основной сценарий, который будет изображаться на экране, а точнее в окне, вашего броузера.

Допустим, что вам необходимо создать страничку, в которой будет выводиться текст «Это моя первая html-страничка!». Для этого запустим блокнот и и наберём следующий текст:

Всё! Теперь сохраняем файл как first.html и запускаем его в броузере. Получилось? Тогда идём дальше.. Теперь, допустим, нам надо сделать так, чтобы наша фраза была заглавной (выводилась крупным шрифтом). Для это используется тег <h1> и закрывающий его </h1>. Соответственно, чтобы создать подзаголовок, необходимо использовать тег <h2> и так далее. А чтобы это понять на практике создадим следующую html-страницу:

У каждого языка есть такая возможность как создание комментариев. Это своеобразные записки авторов в самом html-сценарии. Главное – это то, что комментарии не видимы в окне броузера, а видны только при открытии html-страницы в блокноте. Например, чтобы создать комментарий необходимо написать следующее

А нужны они для того, что бы было легко читать и редактировать html-сценарий после его написания.

Теперь неплохо было бы сделать фон страница, ну например, зелёным. Для этого модифицируем тег <body>:

<body bgcolor=#00FF00> Свойство 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-страницу. Пропишем:

Таким образом, в окне броузера при запуске этой страницы появится данное фото. А чтобы управлять шириной, высотой и толщиной рамки используются соответствующие свойства тега <img>: width, height и border. Например, данная запись устанавливает длину рисунка в 100 пикселей, высоту – 150 пикселей, а толщину рамки – 1 пиксель:

Чтобы разделять элементы (рисунки, таблицы, текст и прочее) html-страницы часто применяется горизонтальная прямая. Для её создания применяется тег <hr>. Он также как и <img> не имеет закрывающего дескриптора. Основные свойства – size, color и width. Size задаёт толщину прямой в пикселях, color – цвет, а width – длину. Например:

Длину прямой можно задать также с помощью процентов (100% - ширина всего окна). Данная прямая будет длинной половины экрана:

А теперь рассмотрим самое основное и самое важное в web-проектировании – создание таблиц.

Без таблиц вообще не возможно создание полноценного современно сайта. Их применение может настолько упростить структуру страницы, что обновление сайта в будущем будет простым, и не займёт у вас много времени.

Вообще, таблицы в html создаются очень просто. Само поле таблицы определяется тегами <table> и </table>. Поле строки – тегами <tr> и </tr>, а поле столбца – тегами <td> и </td>. К примеру, создадим таблицу, состоящую из одной строки и двух столбцов:

Как вы уже, наверное, догадались, свойства height и width тегов <table> и <tr> задают соответственно высоту и длину таблицы или столбца. Тег <tr> таких свойств не имеет, да они ему и не нужны.

А теперь создадим такую таблицу

Она состоит из 2-х строк и 2-х столбцов. Для этого необходимо прописать следующее:

У тега <table> имеются такие свойства как border и bgcolor, которые соответственно задают ширину рамки таблицы и цвет заливки.

Ну вот я и рассказал вам основы гипертекстового языка (html), а чтобы узнать о нём больше, читайте книжки, а лучше всего используйте визуальные редакторы (FrontPage, Dreamweaver и другие) – своеобразные визуальные компиляторы html-языка. С их помощью вы можете создать html-страницу визуально, а эти редакторы переведут её в html-код. Но это только в учебных целях, ибо профессиональные страницы желательно писать исключительно на html-коде. Какие бы хорошими вам не показались эти чудо-программы, а мусора они столько в них пихают, что… в общем учитесь всё делать собственноручно - так надёжнее.