Web-технологии в ДО



	Модуль 3. HTML

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

О border: pамка, придает изображению четкость и улучшает внешний вид страницы. Используя атрибут обрамления, вы должны указать толщину линий рамки в пикселях. Толщина должна быть на столько сбалансированной, чтобы рамка оставалась отчетливо видимой и вместе с тем не привлекала к себе особого внимания.

Ступенька 12. Основные параметры тега IMG

Кроме параметра align у тега <img> существует еще несколько параметров:

<img src="pr1.gif" vspace="10"> vspace - задает расстояние между текстом и рисунком по вертикали. Расстояние задается в пикселях . В нашем примере расстояние равно 10 пикселям.
<img src="pr1.gif" hspace="30"> hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам).
<img src="pr1.gif" alt="моя фотография">alt - краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд выскочит описание картинки. В нашем случае это будет фраза - "моя фотография". Если параметр alt не задавать, описания не будет. Но умные люди говорят, что описание картинкам задавать следует (особенно, если это кнопки), т.к. есть особенные люди, которые бродят по интернету с отключенной графикой. Без alt им не будет видно на что жать, т.к. картинка не отображается, а при заданном alt, можно увидеть надпись, для чего она (картинка) предназначалась.
<img src="pr1.gif" width="100"> width - ширина самой картинки в пикселях. Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже или ширине прибегая к помощи графических редакторов).
<img src="pr1.gif" height="200">height - высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать. Правда, умные люди говорят, что размеры картинок следует задавать, для тех же особенных людей с отключенной графикой... <img src="pr1.gif" border="5"> рамка вокруг самой картинки (в пикселях). Задавать ее или нет - вопрос философский.

Наглядно на нашей страничке:

<img src="img/pr1.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография">

Картинка будет прижата к левому краю экрана, текст будет обтекать ее справа, расстояние до текста по горизонтали - 30 пикселей, по вертикали - 5 пикселей (чтобы красиво все смотрелось), ну, и если вы наведете на картинку курсор, то выскочит надпись - "моя фотография".

<html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#000000"> <center> <H3>Здравствуйте, это моя первая страница.</H3> Добро пожаловать!</center> <img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография" width="168" height="221"> Принципиальная особенность дистанционного обучения состоит в том, что вуз, гарантирующий качество образования в соответствии с государственными образовательными стандартами, и студенты разделены здесь в гораздо большей степени, чем при классической форме заочного обучения. При этой системе обучения нет традиционных сессий, обучение проводится, как правило, по индивидуальному учебному плану. Это то, на чем мне хотелось заострить внимание как автору странички На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Если вы хотите познакомиться поближе, то можете связаться со мной по электронной почте </body> </html>
Что получилось

Теперь попробуйте подставлять и другие параметры в пример, задавать разные значения - это поможет лучше усвоить, все-таки тема большая и уже не такая простая.