Шрифт аттары

< html>

< head>

< title> Шрифт аттары< /title>

< /head>

< body>

< p> < font face=«Times New Roman»> Times New Roman< /font> < /p>

< p> < font face=«Aharoni»> Aharoni< /font> < /p>

< p> < font face=«Arial»> Arial< /font> < /p> < p> < font face=«Algerian»> ALGERIAN< /font> < /p>

< /body>

< /html>

Шрифт таң дау ү шін тө мендегі терезедегі шрифт атауларының бірін таң дап, сол атауды font face=“осы жерде” жазу арқ ылы ө згерте аласыз. Ең бастысы шрифт атауын терезедегі сияқ ты дұ рыс жазу керек!

Сурет 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 сө зін қ ойса, мә тін сол жақ қ а қ арай жылжиды.

Дә ріс 4. ВЕБ-те графиканы қ олдану

Жоспар:

- Веб-бетке сурет қ ою;

- Сурет пен мә тіннің орналасуы;

- Фонғ а сурет қ ою.

Сайтта графиканы қ олданудың ең қ арапайым тү рі – суреттер. Сондық тан суретті веб-бетке қ ою, оның ө лшемін беру, дұ рыс орналастыру аса маң ызды.

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

Веб-бетке сурет қ ою ү шін < 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>

Бұ л код веб-бетте тө мендегідей болып кө рінеді.

Сурет 23. Веб-бетке сурет қ ою

alt атрибутынан соң қ олданылатын сө з еске салушы сө з болып, ол курсорды суретке алып барғ анда шығ ады жә не кей жағ дайғ а байланысты сурет веб-бетке шық пай қ алса, еске салдырушы жазу шығ ып, суреттің не туралы екенін еске салып тұ рады.

< html>

< head>

< meta http-equiv=«Content-Type» content=«text/html; charset=utf-8»>

< title> Сурет қ ою< /title>

< /head>

< body>

< img src=«tu.png» alt=«Қ азақ стан туы» width=«140» height=«90»>

< /body>

< /html>

Сондай-ақ, суреттің шетіне шекара қ оюғ а болады. Ол img тегінің border атрибуты арқ ылы жасалады.

< html>

< head>

< meta http-equiv=«Content-Type» content=«text/html; charset=utf-8»> < title> Сурет қ ою< /title>

< /head>

< body>

< img src=«tu.png» alt=«Қ азақ стан туы» width=«140» height=«90» border=«5px»> < /body>

< /html>

Сурет 24. Суреттің шетіндегі шекара

Егер border атрибутының мә ні 10 пиксельге тең болатын болса, ол алдың ғ ы шекарағ а қ арағ анда қ алың ырақ болады.

Сурет 25. border атрибутының мә ні 10 пиксельге тең шекара

Сурет пен мә тіннің орналасуы

align атрибутынан соң right мә ні берілсе, біздің сурет мә тіннің оң жағ ына орналасады.

< html>

< head>

< meta http-equiv=«Content-Type» content=«text/html; charset=utf-8»>

< title> Сурет қ ою< /title>

< /head>

< body>

< img src=«tu.png» alt=«Қ азақ стан туы» width=«140» height=«90» align=«right»> < p> Қ азақ стан Республикасының Мемлекеттiк туы – Қ азақ стан Республикасының мемлекеттiк рә мiздердiң бiрi.< /p>

< /body>

< /html>

Сурет 26. Сурет пен мə тіннің орналасуы

align атрибутынан соң left мә ні берілсе, біздің сурет мә тіннің сол жағ ына орналасады.

< html>

< head>

< meta http-equiv=«Content-Type» content=«text/html; charset=utf-8»>

< title> Сурет қ ою< /title>

< /head>

< body>

< img src=«tu.png» alt=«Қ азақ стан туы» width=«140» height=«90» align=«right»>

< p> Қ азақ стан Республикасының Мемлекеттiк туы – Қ азақ стан Республикасының мемлекеттiк рə мiздердiң бiрi.< /p>

< /body>

< /html>

Сурет 27. Суреттің мә тіннің сол жағ ында орналасуы

< IMG> тегінде src атрибутынан басқ а lowsrc атрибуты бар. Оның мә ні - src шығ аратын суреттен бұ рын балама сурет шығ арады. Екі тү рлі суреттің бір жерде бірдей ө лшеммен қ олдану себебі – lowsrc атрибуты кіші салмақ тағ ы суретті жылдамырақ браузерге шығ арады жә не аз пиксель орын алады. Оның жазылуы тө мендегідей: < IMG SRC=main.gif LOWSRC=low.gif>

Фонғ а сурет қ ою Веб-бетте фонғ а сурет қ ою ү шін тө мендегі кодты жазамыз. Онда body тегінің background атрибутына сол суретке баратын жол жазылады. Background сө зінің аудармасы фон дегенді білдіреді.

< html>

< head>

< meta http-equiv=«Content-Type» content=«text/html; charset=utf-8»>

< title> Сурет қ ою< /title>

< /head> < body background=«fon.jpg»>

< /body>

< /html>

Сурет 28. Фонғ а сурет қ ою

Дә ріс 5. Сурет карталар

Жоспар:

- < MAP> контейнері;

- < AREA> элементі;

- Артық шылық тары мен кемшіліктері.

Сурет карта (англ. image map, кейде cенсорлы карта немесе графикалық карта) – HTML белгілеу тілінің графикалық объектісі, ол суретпен байланысты жә не суретті басу арқ ылы белгілі бір URL-ғ а сілтеме жасалатын арнайы аймақ ты білдіреді. Сурет картасы бірнеше сілтемені бір суретте сақ тауғ а мү мкіндік береді.

Веб-бетке сурет картаны қ осу ү шін < map> тегін қ олданып, “name” атрибутына бірың ғ ай идентификатор кө рсетіледі. Оның ішіне жұ псыз < area> тегтері қ олданылып, ә рқ айсысы қ андай да бір басылатын аймақ ты білдіреді. Кейін < img> тегін картамен байланыстырып, картаның атын жазатын usemap артибуты қ осылады. Атрибуттың мә ні # белгіден басталуы керек. < img> тегінде суреттің ө лшемі анық кө рсетіледі.

< MAP> контейнері

name – сурет картасының идентификаторы. Идентификатор сондай қ ұ жаттар арасында бірың ғ ай болады.

< AREA> элементі

shape – басылатын аймақ тың формасы. Тө мендегі мә ндерді қ абылдайды: circle (шең бер), rect (тік тө ртбұ рыш), poly (бес бұ рыш).

alt – аймақ тың балама аймағ ы. Сілтемеге еске салушы мә тін ретінде қ олданылады.

coords – басылатын аймақ тың координаттары. “0, 0” мә ніне сә йкес келетін, сол жақ жоғ арғ ы бұ рыштан басталатын координаттар пиксельде ө лшенеді. Алғ ашқ ы сан x осі бойынша, яғ ни ені бойынша координат болса, екіншісін y осі, ұ зындық координаты болып есептеледі. Координат тізімі аймақ формасына байланысты:

Шең бер ү шін шең бер орайы жә не радиусы беріледі:

< AREA coords=«x, y, r»>

Тік тө ртбұ рыш ү шін – жоғ ары сол жақ тың жә не тө мен оң жақ тың координаттары беріледі:

< AREA coords=«x1, y1, x2, y2»>

Бесбұ рыш ү шін биіктік координаттары беріледі:

< AREA coords=«x1, y1, x2, y2, …, xN, yN»>

Бұ л жағ дайда аймақ тың бірінші жә не соң ғ ы нү ктесі автоматты тү рде тұ йық талады.

href – аймақ ү шін сілтеме адресін білдіреді. Жазу ережесі < а> тегіне жазғ ан сияқ ты жү зеге асырылады.

Тө менде сурет карта жасайтын код жазылып, ол суретпен байланыстырылады:

< html>

< body>

< img width=«500» height=«200» usemap=«#somemap» src=«upload.wikimedia.org/wikipedia/commons/e/e0/Figures_for_imagemap.png» > < map name=«somemap»>

< area shape=«rect» coords=«6, 7, 140, 196» href=«kk.wikipedia.org/Тіктө ртбұ рыш»>

< area shape=«circle» coords=«239, 98, 92» href=«kk.wikipedia.org/Шең бер»> < area shape=«polygon» coords=«386, 16, 344, 56, 350, 189, 385, 132, 489, 190, 496, 74» href=«kk.wikipedia.org/Кө пбұ рыш»>

< /map>

< /body>

< /html>

Нə тижесінде браузерде мынадай веб-бет пайда болады:

Сурет 29. Сурет карта

Артық шылық тары мен кемшіліктері

Артық шылық тары:

1. Карталар сілтеменің кез келген формадағ ы аймағ ын жасауғ а мү мкіндік береді. Сурет тө ртбұ рыш болғ андық тан, географиялық аймақ сияқ ты кү рделі формадағ ы графикалық сілтемелерді сурет картасыз қ олдану мү мкін емес.

2. Бір файлмен жұ мыс жасау ың ғ айлырақ.

Кемшіліктері:

1. Ә рбір бө лек аймақ ү шін балама жә не еске салушы мә тін қ оюғ а болмайды. Балама мә тін – браузерде сурет жү ктелуі ө шірілген жағ дайда мə тіндік ақ парат алуғ а қ ызмет етеді. Егер сурет кө рсетілуін ө шірсек, нә тижесінде тек бос тө ртбұ рышты кө реміз.

2. Кү рделі формадағ ы сілтеме аймағ ы HTML код салмағ ын ұ лғ айтады.

3. Сурет карталар арқ ылы ə ртү рлі эффектілер жасай алмайды. Мысалы, шағ ын анимация, жылдам жү ктелетін суреттердің жеке оң тайландырылуы жə не т.б.

Дә ріс 6. HTML тілінде тізімдер

Жоспар:

- Реттелмеген тізім;

- Реттелген тізім;

- Бас ә ріппен реттелген;

- Кіші ә ріппен реттелген;

- Рим сандарымен реттелген;

- Кіші Рим сандарымен реттелген;

- Дө ң гелек белгімен реттеу;

- Шең бер белгімен реттеу;

- Тө ртбұ рыш тә різді белгі;

- Анық тама тізімі.

Тү рлі сайттарды оқ ығ анда кө птеген мә тіндерде неше тү рлі тізімдерді кө реміз. Ендеше соларды html тілінде жазып ү йренейік.

Реттелмеген тізім

< li> < /li> тегі арасына тізімге енетін сө здерді енгізуге болады. Ал < li> < /li> тегі арасындағ ы ү ш сө зді жалпы < ul> < /ul> тегі арасына салса, тізім реттелмеген тү рде алдына дө ң гелектер қ ойылып, веб-бетте кө рінеді.

< html>

< body>

< h4> Дө ң гелек тізім: < /h4>

< ul type=> < li> Математика< /li>

< li> Тарих< /li>

< li> Қ азақ тілі< /li>

< /ul>

< /body>

< /html>

Сурет 30. Дө ң гелек тізім

Реттелген тізім

< li> < /li> тегі арасына тізімге енетін сө здерді енгізуге болады. Ал < li> < /li> тегі арасындағ ы ү ш сө зді жалпы < ol> < /ol> тегіне салса, тізім реттелген тү рде алдына реттік сандар қ ойылып, веб-бетке шығ ады.

< html>

< body>

< h4> Реттелген тізім: < /h4>

< ol> < li> Математика< /li>

< li> Тарих< /li>

< li> Қ азақ тілі< /li>

< /ol>

< /body>

< /html>

Сурет 31. Реттелген тізім

Бас ә ріппен реттелген

< li> < /li> тегі арасына тізімге енетін сө здерді енгізуге болады.

< ol> < /ol> тегінде type=«A» деп қ олданылады, тырнақ шадағ ы A бас ә рпі тізімнің бас ә ріппен реттелетінін білдіреді.

< html>

< body>

< h4> Бас ә ріппен реттелген тізім: < /h4>

< ol type=«A»>

< li> Математика< /li>

< li> Тарих< /li>

< li> Қ азақ тілі< /li>

< /ol>

< /body>

< /html>

Сурет 32. Реттелген тізім

Кіші ә ріппен реттелген

< li> < /li> тегі арасына тізімге енетін сө здерді енгізуге болады. < ol> < /ol> тегінде type=«a» деп қ олданылады, тырнақ шадағ ы a кіші ә рпі тізімнің кіші ә ріппен реттелетінін білдіреді.

< html>

< body>

< h4> Кіші ә ріппен реттелген тізім: < /h4>

< ol type=«a»>

< li> Математика< /li>

< li> Тарих< /li>

< li> Қ азақ тілі< /li>

< /ol>

< /body>

< /html>

Сурет 33. Кіші ә ріппен реттелген тізім