Сурет 22. Шрифт аттары
Шрифт өлшемдері
<html>
<head>
<title>HTML шрифт өлшемі</title>
</head>
<body>
<p style=«font-size:9px»>9 пиксельді әтін
</p> <p style=«font-size:12px»>12 пиксельді мәтін
</p> <p style=«font-size:15px»>15 пиксельді мәтін</p></body>
</html>
<p style=«font-size:9px»></p> тегі арқылы веб-бетте жазылатын шрифттің өлшемін пиксель өлшем бірлігінде беруге болады. Біздің style=“font-size:9px” деп берілген мысалда 9 санының орнына басқа санды қойып, мәтін шрифтінің өлшемін қалаған пиксельге өзгертуге болады.
<html>
<head>
<title>HTML шрифт өлшемі</title>
</head>
<body>
<br><font size=«3»>3 өлшемді мәтін</font><br>
<font size=«4»>4 өлшемді мәтін</font>
<br><font size=«5»>5 өлшемді мəтін</font>
<body>
</html>
<font size=«3»></font> тегі арқылы веб-бетте жазылатын шрифтің өлшемін беруге болады. Мысалы, size=«3» дегенде « « тырнақшаның ішіне қалаған өлшемді қою арқылы шрифт өлшемін өзгертуге болады.
Шрифт атауы және түсі
<html>
<head>
<title>Шрифт атауы, түсі</title>
<p style=«font-family:verdana; color:green;»>
Шрифт атауы Verdana, түсі жасыл
</p>
</html>
<body style=«font-family:verdana; color:green;»> стилі арқылы
Verdana сөзінің орнына шрифт атауын, ал green сөзінің орнына шрифт түсін немесе кодын қойып, шрифт аты мен түсін өзгертуге болады.
Мәтін түстері:
<html>
<head>
<title>Мәтін түсі</title>
</head>
<body>
<p style=«color:#ff0000»>Бұл қызыл шрифт</p>
<p style=«color:red»>Бұл да қызыл шрифт</p>
</body>
</html>
Бұл мысалда <p style=“color:#ff0000”></p> тегінде color: сөзінен соң, мәтін түсінің он алтылық санақ жүйесіндегі кодын #ff0000 қою арқылы веб- бетте қалаған түсімізді көре аламыз.
Алайда color: сөзінен соң, мəтін түсінің атын red жазу арқылы да веб-бетте таңдаған түсімізді көре аламыз.
Мəтіндер. Байланыс тізімі:
<html>
<head>
<title>Байланыс тізімі</title>
</head>
<body>
<address>
Жаңа-ой орталығы<br>
Мекен-жайы: Төле би 296<br>
Телефон: +7707 889 30 53
</address>
</body>
</html>
Байланыс тізімін веб-бетке <address></address> тегі арқылы шығаруға болады. Байланыс тізімінде мекеменің (ЖОО, компания, фирма) аты, мекен-жайы, телефоны және басқа да байланыс түрлері жазылады.
Фон түстері:
<html>
<head>
<title>Фон түсі</title>
</head>
<body> <p style=«background-color:#ffff00»>
Бұл сары фон</p> <p style=«background-color:yellow»>
Бұл да сары фон</p>
</body>
</html>
Бұл мысалда да жоғарыдағы мәтін түстеріндегі мысал сияқты фонға түс қоюдың екі тәсілі бар: 1) background-color: сөзінен соң түстің, яғни біздің мысалда сары түстің кодын қою 2) сары сөзінің ағылшынша аудармасы yellow (стандарт бойынша түстердің ағылшынша аты қолданылады) сөзін жазу.
өлемді дəйексөз (цитата)
<html>
<head>
<title>Көлемді дәйексөз</title>
</head>
<body> «Абайдың қара сөздерінен» үзінді
<blockquote>Бұл жасқа келгенше жақсы өткіздік пе, жаман өткіздік пе, әйтеуір бірталай өмірімізді өткіздік: алыстық, жұлыстық, айтыстық, тартыстық, әурешілікті көре-көре келдік.
</blockquote>
Автор: Абай Құнанбайұлы
</body>
</html>
<blockquote></blockquote> тегінен соң және оның алдында жазылған сөздер және сөйлемдер веб-беттің сол жағына жазылады, ал көлемді дәйексөздің барлығы болса, азатжолдан бастап жазылып веб-бетте көрінеді.
Қысқа дəйексөз (цитат)
<html>
<head>
<title>Қысқа дəйексөз</title>
</head>
<body>
Сұлтанмахмұт Торайғыров:
<q>Сүйемін туған тілді – анам тілін</q>
</body>
</html>
<q></q> тегі қысқа дәйексөзді веб-бетке шығаратын болғандықтан, сол тег арасында жазылған сөйлем тырнақша ішінде жазылады. Сонымен қатар сөйлемнің бір қатарға сыймай қалған бөлігі келесі қатардан азатжолмен басталмай, алдыңғы қатар сияқты веб-беттің сол жағына шығады.
Сызушы тегтер:
<html>
<head>
<title>Сызушы тегтер</title>
</head>
<body>
<p><del>Үсті сызылған</del></p> <p><ins>Асты сызылған</ins></p>
</body>
</html>
<del></del> тегі сөздердің немесе сөйлемдердің үстін сызу үшін қолданылады. <ins></ins> тегі сөздердің немесе сөйлемдердің астын сызу үшін қолданылады.
Жылжытылған мәтін:
<html>
<head>
<title>Жылжытылған мәтін</title>
<p style=«text-align:center;»> Веб-бет ортасындағы мəтін
</p>
</html>
<p style=«text-align:center;»> стилі мәтінді ортаға қарай жылжытуға көмек береді. Себебі text-align: сөзінен соң, center сөзі жазылған.
<html>
<head>
<title>Жылжытылған мәтін</title>
<p style=«text-align:left;»> Сол жақтағы мәтін</p>
<p style=«text-align:right;»>
Оң жақтағы мәтін</p>
</html>
<p style=«text-align:center;»> стилінде center сөзінен соң, right сөзін қойса, мəтін оң жаққа қарай, ал left сөзін қойса, мәтін сол жаққа қарай жылжиды.
ВЕБ-те графиканы қолдану
Сайтта графиканы қолданудың ең қарапайым түрі – суреттер. Сондықтан суретті веб-бетке қою, оның өлшемін беру, дұрыс орналастыру аса маңызды.
Веб-бетке сурет қою
Веб-бетке сурет қою үшін <img> қолданылады, оның атрибуты src графикалық файлға, яғни GIF, PNG немесе JPEG форматтағы суретке апаратын жол жазылады. Ал width атрибуты суреттің енін білдірсе, ал height атрибуты суреттің ұзындығын, биіктігін білдіреді.
<html>
<head>
<meta http-equiv=«Content-Type» content=«text/html; charset=utf-8»>
<title>Сурет қою</title>
</head>
<body>
<img src=«tu.png» width=«140» height=«90»>
</body>
</html>
Бұл код веб-бетте төмендегідей болып көрінеді.
