Тәжірибелік жұмыс 3

Құжатқа суреті қою.
<img src="my.jpg"> 
my.jpg орнына суреттің кез келген атауын қоюға болады (me.gif, main.png). Сілтеме - барлық тырнақшаға арасында орналасқан (суретке жол). Мысалда сіздің құжатыңыз жатқан жерде, суретте  сол каталогта (папкада) жатыр деп айтылған. Егер сурет директории астында жатса (сіздің негзгі папканысда жатқан), онда оған сілтіме былай көрсетулі тиіс: 
<img src="my/my.jpg"> 
Егер сурет жоғары деңгейде, ал құжат дириктории астында болса, онда оған сілтіме былай жазылады: 
<img src="../my.jpg"> 
Сурет басқа сайтта болса, онда жол толығымен белгіленген: 
<img src="http://www.homepage.ru/my/my.jpg"> 

Мысал:

<html>
<head>
<title> Менің алғашқы қадамым </title>
</head>
<body text="#336699" bgcolor="#000000">
<div align="center">
<H3>Сәлеметсізбе, бұл менің бірінші бетім.</H3>
<br>
<font color="#CC0000"> Хош келдіңіз!</font> :) </div>
<p align="justify">
<img src="primtocodephoto.gif"> 

 

Мен жақында ғана виртуалды өмірімен танысуды бастадым, бірақта маған бұрынғы дәстүр бойынша жаңа виртуальды достар мен таныстар табу үшін өзімнің парақшамды құрғым келді, менің фотосуреттерімді көрсін, мен туралы хабарлы болсын, қонақ кітапшасында мен туралы сөз жасын деп ойым болды. Мүмкін жай ғана кездейсоқ келуші кенеттен менімен танысқысы келіп, <b> менімен виртуалды дос болғысы келер?:) </b>

</p> 
</body>
</html>

 

Мәтінді суреттің қасына қою.

align атрибуты ,  түзетуге жауапты. align атрибуты суреттерде де бар: 
<img src="pr1.png" align="left"> 
Сурет экранның сол жағына тіркелсе, мәтін оң жағында болуды блдіреді. Керсінше жасау үшін  (сурет оң жақта, мәтін сол жақта) right деп жазу керек: 
<img src="pr1.png" align="right"> 
Мәтін суреттің астыңғы жағында орналасуы мүмкін (әдетте) - (1), ортасында- (2), және үстінде - (3):
(1) - <img src="pr1.png" align="bottom">
(2) - <img src="pr1.png" align="middle">
(3) - <img src="pr1.png" align="top">
атрибуты үшін <img> тэгіне бірнеше басқа атрибуттар енгізуге болады: 
(1) - <img src="pr1.png" vspace="10">
(2) - <img src="pr1.png" hspace="30">
(3) - <img src="pr1.png" alt="менің фотосуретім
(4) - <img src="pr1.png" width="100">
(5) - <img src="pr1.png" height="200">
(6) - <img src="pr1.png" border="5">

(1) – vspace атрибуты – сурет пен мәтін арасындағы қашықтықты белгілейді  (тікелей). Қашықтық пиксельде көрсетіледі.
(2) - hspace атрибуты – ол да сурет пен мәтін арасындағы қашықтықты белгілейді, бірақта көлденең. Қашықтық пиксельде көрсетіледі.

(3) - alt атрибуты – қысқаша суреттің сипаттамасы. alt параметрін белгілемесен, сипаттамасы жазылмайды. 

(4) width атрибуты – суреттің ені. Әдетте, бұл суреттің нақты еніне тең болады (негізінен оны жіңішке немесе жалпақтауға болады). 
(5) - height атрибуты – суреттің биіктігі. width арқылы (height) суреттің биіктігін белгілемеуге болады.
(6) –border  атрибуты – сурет айналасының жиектемесі. Белгілемеуге де болады. Әдетте сурет айналасында жиектеме арқашанда болады. Ал егер алып тастағыңыз келсе, онда border атрибутын қойып, нолге теңестіру керек. 
Сурет үшін келесі атрибутты енгізіңіз: 
<img src="pr1.png" align="left" hspace="30" vspace="5" alt="менің фотосуретім"> 

<html>
<head>
<title> Менің алғашқы қадамым </title>
</head>
<body text="#336699" bgcolor="#000000">
<div align="center">
<H3>Сәлеметсізбе, бұл менің бірінші бетім.</H3>
<br>
<font color="#CC0000"> Хош келдіңіз!</font> :) </div>
<p align="justify">
<img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="менің фотосуретім"> Мен жақында ғана виртуалды өмірімен танысуды бастадым, бірақта маған бұрынғы дәстүр бойынша жаңа виртуальды достар мен таныстар табу үшін өзімнің парақшамды құрғым келді, менің фотосуреттерімді көрсін, мен туралы хабарлы болсын, қонақ кітапшасында мен туралы сөз жасын деп ойым болды. <br><br> Мүмкін жай ғана кездейсоқ келуші кенеттен менімен танысқысы келіп, <b> менімен виртуалды дос болғысы келер?:) </b>

</b><br><br> фотосуретте мен көрсетілгенмін. Сурет сапасы өкінішке орай, өте жақсы емес, сондықтан ол анық емес болып табылады және менің бетімнің ерекшеліктері сәл проблемалы көрініп тұр. Бірақ жаман емес екенім көрініп тұр:) <br><br> Егер сенде солай ойласан, кездесіп, бр шайханада кофе ішсек, қалай қарайсын?:) Кім біледі, мүмкін өмірде жақсы дос болып кетерміз:)
</p> 
</body>
</html>


Өзіңіздің мысалда басқа атрибуттарды және олардың мәндерін алмастырыңыз: атрибуттар үшін әртүрлі мәңдерді пиксель түрнде белгілеңіз.
Экранның ортасына суретті қою (оң жақ, сол жақ).

Суретті құжаттың фонығып жасаңдар

<body text="#336699" bgcolor="#000000" background="ваш_фон.jpg"> background атрибуты  фондық сурет қайда жатқаның емес, мысалда сол директорияда (папка), яғни құжат жатқан жерде екенін көрсетеді.
Мәтін бір объектіні айналады (мысалы, суретті): 

<img src="clearpri.gif" align="left">
Ал менің балаларым мен немерелерім менің даңқыма ие болады. Үлкен кезекте тұрмай, шұжық сатып алады. Пісріп, көбректеп тәрелкеге салады. Менің аяғыма әкеледі. 

<br clear="left">
"Жей ғой, ұлы бабамыз!" Мен көкке оларға сүйшпеншілікпен қараймын: "Өздерің шұжықты жендер. Бейбітшілікте бақытты өмір сүріңдер."

clear атрибутында  брнеше мағынасы бар - all, left, right. 
All – мәтін объектісін жазылуын аяқайды. Left - мәтін объектісін жазылуын аяқайды, сол жақ бетке түзету. Right - мәтін объектісін жазылуын аяқайды, оң жақ бетке түзету
Мысалда  clear="left" көрсетілген, яғни біздің сурет сол жақ бетке қарай тұр