Занятие 1. HTML.

Для написания сайтов и web-приложений необходимо прежде всего изучить основы, т.е. HTML — стандартный язык разметки документов в интернете, который нам понадобится для вывода результатов выполнения web-приложения в браузер. Конечно можно писать приложения и без HTML, но в этом случае в браузере мы увидим простой текс и не сможем отправить информацию обратно на сервер.

Структура HTML-документа

Любой документ на языке HTML представляет собой набор элементов, причем начало и конец каждого элемента обозначается специальными пометками — тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных. В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства. Атрибуты указываются в открывающем теге.

Пример простого HTML-документа:

<html>
<head>
<title>
Заголовок странички
</title>
</head>
<body>
<strong>Привет мир!</strong>
<br /> - Пустой элемент
<a href="http://comp-gluk.ru">Элемент-гиперссылка с атрибутом href</a>
</body>
</html>

Описание тегов и атрибутов HTML можно посмотреть на сайте http://html.manual.ru.

Заголовок HTML-документа

Заголовок страницы указывается между тегами <title> и </title>, которые находятся в элементе <head> </head>.

Пример: пустая страница с заголовком «Привет мир!»:

<html>
<head>
<title>
Привет мир!
</title>
</head>
<body>
</body>
</html>

Тело HTML-документа

Начинается с тега <body> и завершается </body>. Идет сразу после </head>. В нем содержится вся отображаемая информация в окне браузера, и поэтому большинство тегов пишутся междуи.

Пример: страница с заголовком «Привет мир!» и надписью «Привет-привет!»:

<html>
<head>
<title>
Привет мир!
</title>
</head>
<body>
<h1>Привет-привет</h1>
</body>
</html>

Гиперссылки

Гиперссылки используются для перехода между HTML-документами или внутри одного документа и размещается в элементе <body>.

Общий вид гиперссылки:

<a href="filename" target="_self">название ссылки</a>
  • Атрибут HREF задает значение адреса документа, на который указывает ссылка.
  • filename — имя файла или адрес Internet, на который необходимо перейти.
  • название ссылки — название гипертекстовой ссылки, которое будет отображаться в браузере, то есть показываться тем, кто открыл HTML-документ.
  • TARGET — задает значение окна или фрейма, в котором будет открыт документ, на который указывает ссылка. Возможные значения атрибута:
    • _top — открытие документа в текущем окне
    • _blank — открытие документа в новом окне
    • _self — открытие документа в текущем фрейме
    • _parent — открытие документа в родительском фрейме.

filename может быть абсолютным или относительным:

Относительные ссылки

Относительные ссылки указывают путь относительно текущего HTML-документа и поэтому очень полезны, т.к. документ можно будет правильно отобразить из любого местоположения.

Пример относительной ссылки:

<a href="index.php" target="_self">главная страница</a>

Абсолютные ссылки

Абсолютные ссылки должны начинаться с указания протокола (обычно http://) и содержать имя сайта, т.е. указываеют полный (абсолютный) путь к файлу или HTML-документу. При перемещении документа с абсолютными ссылками он скоре всего будет отображаться неправильно.

Пример абсолютной ссылки:

<a href="http://comp-gluk.ru/index.php" target="_self">главная страница</a>

Изображения

Изображения вставляются с помощью элемента <img>, который размещается в элементе <body>.

Вид <img>:

<img src="img.jpg" alt="Картинка 100x100" />
  • src — указывает на путь к картинке
  • alt — указывает текст отображаемый в случае если картинку загрузить не удалось

Таблицы

Для разметки таблицы используется элемент <table>, который размещается в элементе <body>.

Пример таблицы:

<TABLE BORDER="1" CELLSPACING="0">
<CAPTION> Улов багов в винде </CAPTION>
<TH> Год </TH>
<TH> Улов </TH>
<TR>
<TD> 1997 </TD>
<TD> 214 </TD>
</TR>
<TR>
<TD> 1998 </TD>
<TD> 216 </TD>
</TR>
<TR>
<TD> 1999 </TD>
<TD> 207 </TD>
</TR>
</TABLE>
  • TABLE — создание таблицы. Параметры тега:
    • BORDER — толщина разделительных линий в таблице
    • CELLSPACING — расстояние между клетками
  • CAPTION — заголовок таблицы (этот тег необязателен)
  • TR — строка таблицы
  • TH — заголовок столбца таблицы (этот тег необязателен)
  • TD — ячейка таблицы
  • height — высота таблицы
  • width — ширина таблицы
Запись опубликована в рубрике web, Программирование, Уроки с метками , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *