Лекция · 4.4

Web-бетке сурет қою

Тек мәтіннен тұратын сайтты елестет — жалықтырады емес пе? Логотип, фото, иконка — веб-беттің «жаны». Бүгін HTML-де суретті қалай орналастыруды, оның өлшемін, орналасуын және фон ретінде қолдануды үйренеміз.

IMG тегі және src атрибуты

Тег
<img> — веб-бетке сурет қоятын ДАРА тег, <body> ішінде кез келген жерде орналаса алады.

⚠️

Маңызды: жалғыз <img> тегінің өзі ЕШТЕҢЕ көрсетпейді! Оған міндетті түрде src (source — дереккөз) атрибутын қосу керек — ол сурет файлының ҚАЙДА орналасқанын көрсетеді.

<img src="image.jpg">                        <!-- bir bumada -->
<img src="myfoto/foto.jpg">                   <!-- ishki bumada -->
<img src="../foto.jpg">                       <!-- zhogary bumada -->
<img src="http://www.site.kz/foto.jpg">      <!-- Internet URL -->

Сурет форматтары мақсатына қарай таңдалады:

Формат	Қолданылуы
JPEG	Фотосуреттер немесе мәтіні жоқ суреттер
GIF	Анимация
PNG	Иконкалар, батырмалар

©️

Авторлық құқық: басқа адамдардың суреттерін тек РҰҚСАТ алғанда немесе тегін пайдалануға арналған сайттардан алғанда ғана қолдануға болады.

IMG атрибуттары

Атрибут	Қызметі
`width`, `height`	Ені мен биіктігі (пиксель немесе %)
`alt`	Альтернативті мәтін — сурет жүктелмесе көрінеді
`title`	Меңзерді жақындатқанда шығатын қалқыма жазба
`align`	Мәтінге қатысты орналасуы (top/left/right)
`border`	Айналасындағы жиек қалыңдығы

Есеп (орта): фото мен фонды пайдалану

Берілді: Абай туралы ақпарат, фото суретпен және фон суретімен.

<body background="fon.jpg">
    <h1>bizdin maqtanyshymyz!</h1>
    <dl>
        <img src="Abai.jpg" height="300" width="200">
        <dt>Abai Qunanbaiuly (1845-1904)</dt>
        <dd>Aqyn, agartushy...</dd>
    </dl>
</body>

Түсіндірме: <img height="300" width="200"> суреттің дәл өлшемін НАҚТЫЛАЙДЫ, ал background="fon.jpg" — беттің фонын кішкентай суретпен ТОЛТЫРАДЫ.

Фондық сурет

Анықтама
Фондық сурет — браузер терезесінің өлшеміне қарамастан бірнеше рет ҚАЙТАЛАНЫП толтыратын кішкентай графикалық файл. <body background="fon.jpg"> арқылы белгіленеді.

Ал егер сурет пен мәтін қатар орналасса, кейде мәтіннің суретті «айналып өтуін» тоқтату керек болады — мұны <br clear="all"> шешеді (мәні: left, right немесе all).

🎯 ҰБТ байланысы

IMG тегінің міндетті атрибуты мен растрлық суреттер форматын білу маңызды.

<img> тегі src атрибутынсыз ЕШТЕҢЕ көрсетпейді.

JPEG — фото, GIF — анимация, PNG — иконка/батырма үшін қолданылады.

<body background="..."> — фон суретін, <img src="..."> — жеке суретті қояды.

Сабақ қорытындысы

<img> — дара тег, суретті қою үшін src атрибуты МІНДЕТТІ.
width/height — өлшем, alt — балама мәтін, title — қалқыма жазба.
JPEG (фото), GIF (анимация), PNG (иконка) — үш негізгі растрлық формат.
<body background="..."> — беттің фонын қайталанатын суретпен толтырады.