Студопедия

Главная страница Случайная страница

Разделы сайта

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






Чек-бокс






< input type=«checkbox»/> элементі чек-боксты білдіріп, дұ рыс белгісін қ оятын кішкене тө ртбұ рыш алаң. Біздің мысалда кө лік тү рін белгілеу керек. Ө зің ізде кө ліктің қ айсы тү рі болса, соның тұ сына дұ рыс белгісін қ оясыз.

< html>

< head>

< title> Чек-бокс< /title>

< /head>

< body>

< form action=««>

< input type=«checkbox» name=«vehicle» value=«Bike»/> Менде велосипед

бар< br />

< input type=«checkbox» name=«vehicle» value=«Car»/> Менде машина бар

< /form>

< /body>

< /html>

< /html>

Сурет 55. Чек-бокс

 

Радио-тү йме

< input type=«radio»/> элементі чек-бокс сияқ ты белгілейміз, бірақ дө ң гелек формада болады. Чек-бокста бірнеше нұ сқ аны белгілеуге болады, ал радио-тү ймеде болса, тек ғ ана біреуі таң далады. Біздің мысалда ер не ə йел. Адам бə рібір екеуінің біріне жатады.

< html>

< head>

< title> Радио-тү йме< /title>

< /head>

< body>

< form action=««>

< input type=«radio» name=«sex» value=«male»/> Ер< br />

< input type=«radio» name=«sex» value=«female»/> Ə йел

< /form>

< /body>

< /html>

Сурет 56. Радио-тү йме

 

Ашылушы тізім

< select name=«cars»> элементі тө мен қ арай ашылушы тізімін білдіреді. Біздің мысалда тізімдегі машиналардың бірін таң дауғ а болады.

< html>

< head>

< title> Ашылушы тізім< /title>

< /head>

< body>

< form action=««>

< select name=«cars»>

< option value=«volvo»> Волво< /option>

< option value=«saab»> Сааб< /option>

< option value=«fiat»> Фиат< /option>

< option value=«audi»> Ауди< /option>

< /select>

< /form>

< /body>

< /html>

Сурет 57. Ашылушытізім

 

Ө згертілмейтін мə тін алаң ы

< textarea rows=«10» cols=«30»> элементі ені – 30 пиксель, алұ зындығ ы 10 пиксель болатын ө згертілмейтін мə тін алаң ын веб-бетте шығ арады.

< html>

< head>

< title> Мə тін алаң ы< /title>

< /head>

< body>

< p> Бұ л ө згертілмейтін мə тін алаң ы.< /p>

< textarea rows=«10» cols=«30»>

Жайлауда қ ойлар жайылып жү р.

< /textarea>

< /body>

< /html>

Сурет 58. Ө згертілмейтін мə тін алаң ы

 

Тү йме

< input type=«button» value=«Сə лем!»> элементі басылатын тү ймені білдіріп, сол тү йменің аты “Сə лем! ” болады.

< html>

< head>

< title> Тү йме< /title>

< /head>

< body>

< form action=««>

< input type=«button» value=«Сə лем!»>

< /form>

< /body>

< /html>

Сурет 59. Тү йме

Жеке мə лімет

< input type=«button» value=«Сə лем!»> элементі басылатын тү ймені білдіріп, сол тү йменің аты “Сə лем! ” болады.

< html>

< head>

< title> Жеке мə лімет< /title>

< /head>

< form>

< form action=««>

< fieldset>

< legend> Жеке мə лімет: < /legend>

Аты: < input type=«text» size=«30»/> < br />

Э-пошта: < input type=«text» size=«30»/> < br />

Туғ анкү ні: < input type=«text» size=«10»/>

< /fieldset>

< /form>

< /body>

< /html>

Сурет 60. Жекемə лімет

Дә ріс 11. HTML тіліндегі фреймдер

Жоспар:

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

- Қ арапайымдылық;

- Жылдамдық;

- Орналасуы.

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

- «Бетбелгіге» қ осуғ а келмейді;

- Барлық браузерлер мен ү йлесе бермейді;

- Іздеу жү йелерінің индексациясына ілінбейді.

Фреймдер бірнеше *.html қ ұ жаттарды браузердің бетінде бір уақ ытта кө рсетуге мү мкіндік береді. Олар браузерді бір-біріне жақ ын орналасқ ан бө лімдерге бө леді. Сол ə р бө лімде жеке веб-беттер кө рсетіледі. Қ азіргі таң да фреймдердің қ олданылуы сирек жағ дай болғ анымен, олардың артық шылық тары мен кемшіліктерін қ арастырып ө тейік:

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

Қ арапайымдылық

Фреймдерді қ олдану арқ ылы веб-бетті оң ай жолмен бө лімдерге бө луге болады. Мысалы, сол жақ тағ ы бө лім навигация ү шін, ал оң жақ тағ ы бө лім негізгі контент ү шін.

Жылдамдық

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

Орналасуы

Фреймдер ақ параттарды орналастырудың ерекше жолын ұ сынады: егер фреймдібраузердің тө менгібө лігінеорналастыратынболсақ, бұ лбө лікбарлық жағ дайдабірдейкө рініп, ешқ ашанө зорнынө згертпейді.

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

«Бетбелгіге» қ осуғ а келмейді

Ішкі сайт бө ліктерін “бетбелгіге” қ осуғ а келмейді, ө йткені фреймдер сайттың адресін жасырады. Мысалы, сайт ‘site.com’ адресі бойынша орналасты делік. Егер веб-беттегі басқ а сілтемелерге ө тетін болсақ, URL ө згермейді.

Барлық браузерлер мен ү йлесе бермейді

Қ азіргі кө п браузерлер фреймдерді қ олданатын сайттарды қ олдағ анымен, кейбір браузерлер оны кө рсетпейді. Сол себепті ə рқ ашан сайттың ‘noframes’ нұ сқ асын жасауғ а тура келеді.

Іздеу жү йелерінің индексациясына ілінбейді

Іздеу жү йелері фреймдерді қ олданғ ан сайттар мен жаман жұ мыс жасайды, ө йткені веб-бетте орналасқ ан негізгі контентте басқ а қ ұ жаттарғ а сілтемелер жоқ.

Айтакету қ ажет, жоғ арыда айтылғ ан кемшіліктердің алдын алуғ а болады. Ол ү шін қ осымша скриптерді қ олдануғ а тура келеді.

< FRAMESET> – қ ұ рылым

< FRAMESET> веб-беттегі фреймдердің қ ұ рылымын анық тап береді.

Мысалы, сол жақ тағ ы бө лім навигация ү шін, ал оң жақ тағ ы бө лім негізгі контент ү шін.

 

Сурет 61. Frameset бет

 

< html>

< head>

< title> Frameset бет< /title>

< /head>

< frameset cols = «25%, *»>

< frame src =«frame_left.html» />

< frame src =«frame_right.html» />

< /frameset>

< /html>

Бұ л мысалда < FRAMESET> тегінің қ олданысы бесінші жолдан басталып сегізінші жолда аяқ талады. Байқ асаң ыз, бұ л тег < BODY> тегінің орнына жазылғ ан жə не қ осымша ‘cols’ атрибутын қ олданып, оғ ан ‘25%, *’мə ні берілген. Демек веб-бет екі бағ анғ а (columns) бө лінген жə не біріншісінің ені терезенің тө рттен бір бө лігіндей болса, қ алғ аны екінші бө ліктің алатын орны. Енді < FRAMESET> қ ұ рылымының ішіндегі екі фреймді қ арастырайық. Жоғ арыда айтылғ андай, ə р фрейм жеке веб-бетті кө рсетеді.

Бұ л жағ дайда да бірінші фрейм ‘frame_left.html’ қ ұ жатын кө рсетсе, екінші фрейм ‘frame_right.html’ дербес веб-бетті кө рсетіп тұ р.

 

Сурет 62. Ə рфреймнің жекевеб-беттікө рсетуі

 

Егер ‘cols’ атрибутының мə нін ‘50%, *’ мə ніне ө згертсек, онда екі қ ұ жат терезенің тең дей бө лігінде бағ ана болып орналасады.

Сурет 63. cols’ атрибутының мə ні ‘50%, * болғ анда

 

Енді қ ұ жаттардың жол бойынша орналастырылуын қ арастырайық. Ол ү шін ‘cols’ атрибутының орнына ‘rows’ атрибутын жазайық.

Сурет 64. ‘rows’ атрибуты

 

< html>

< head>

< title> Frameset бет< /title>

< /head>

< frameset rows = «50%, *»>

< frame src =«frame_left.html» />

< frame src =«frame_right.html» />

< /frameset>

< /html>

Демек, екі қ ұ жат жол (row) бойынша браузер терезесінде орналасты. Ү шінші қ ұ жатты қ осып кө рейік.

 

Сурет 65. Жол (row) бойынша браузер терезесіне ү шінші қ ұ жатты қ осу

 

 

< html>

< head>

< title> Frameset бет< /title>

< /head>

< frameset rows = «20%, *, 10%»>

< frame src =«header.html» />

< frame src =«content.html» />

< frame src =«footer.html» />

< /frameset>

< /html>

Бұ л жерде < FRAMESET> ү ш фреймнен тұ рады. Жə не де оның қ ұ рылымы жол бойынша бірінші фрейм браузер терезесінің 20%-ын, екіншісі70%-ын жə не ү шіншісі 10%-ын алатындай орналасқ ан.

Тапсырманы кішкене кү рделендіре тү сейік: негізгі контентті тағ ы екі бө лікке бө лейік.

Сурет 66. Негізгі контентті тағ ы екі бө лікке бө лу

 

< html>

< head>

< title> Frameset бет< /title>

< /head>

< frameset rows = «20%, *, 10%»>

< frame src =«header.html» />

< frameset cols = «*, 20%»>

< frame src =«content.html» />

< frame src =«right_sidebar.html» />

< /frameset>

< frame src =«footer.html» />

< /frameset>

< /html>

Ол ү шін кірістірілген (вложенный) қ ұ рылымды пайдаландық. Яғ ни, < FRAMESET> -тің ішінде тағ ы бір< FRAMESET> -ті жаздық. Ал ол ө з кезегінде ортаң ғ ы бө лікті 60% да 40%-дай болатын екі бө лікке бө лді.

Сонымен, чат жү йесі веб-бетін жоғ арғ ы бө лік, негізгі хат мұ рағ аты бө лігі, қ олданушылар тізімі бө лігі жə не тө менгі хат жазу бө лігі етіп орналастырдық. Осы тө рт бө лікке сə йкес тө рт қ ұ жатты кө релік:

Сурет 67. Чат жү йесінің бө ліктеріне сə йкес қ ұ жаттар

Бұ л қ ұ жаттарғ а қ арап, қ ай қ ұ жат қ ай бө лікте орналасатынын білуге болады. Мысалы, ‘header.html’ жоғ арғ ы, ал ‘right_sidebar.html’ оң жақ бө лікте тұ ратыны анық. Демек, ə р қ ұ жатқ а ат бергенде оның негізгі қ ызметіне байланыстырып қ ойғ ан абзал.

Келесі мысалдарда чат жү йесінің кейбір жерлерін ө згертіп кө рейік.

1. < FRAMESET> -тің ‘border’ атрибутын нө лге тең естіріп, фреймдердің арасындағ ы шекараларды жасырдық.

Сурет 68. ‘border’ атрибутыннө лгетең Frameset беті

 

2. «noresize» атрибуты арқ ылы фреймдердің ө лшемін ө згертуге тыйым салдық.

< html>

< head>

< title> Frameset бет< /title>

< /head>

< frameset rows = «20%, *, 10%» border=«0»>

< frame src =«header.html» noresize />

< frameset cols = «*, 20%»>

< frame src =«content.html» noresize />

< frame src =«right_sidebar.html» noresize />

< /frameset>

< frame src =«footer.html» noresize />

< /frameset>

< /html>

3. scrolling=«yes» атрибуты арқ ылы хат мұ рағ аты мен қ олданушылар тізімін, егер де мə тін кө лемі ө те кө п болса, оң жақ та пайда болғ ан» прокруткалар» арқ ылы кө ре аламыз.

Сурет 69. scrolling атрибуты

 

Жылжымалы (плавающие) фреймдерді қ арастырмасақ, фреймдер туралы ə ң гіме толық болмайды. Жылжымалы фреймдерде п веб-беттің кез келген жеріне қ оюғ а болатын фреймдерді айтамыз. Егерде жай фреймдердің нақ ты орналасу орындары болатын болса, жылжымалы фреймдерді кез келген жерге орналастырааламыз. Жылжымалы фрейм < iframe> тегі арқ ылы анық талады.

Сурет 70. Жылжымалы фрейм

 

< html>

< head>

< title> iFrame< /title>

< /head>

< body>

< iframe src=«content.html» width=«300» height=«150»> < /iframe>

< /body>

< /html>

Тура осылай жылжымалы фреймдерді веб-беттің кезкелген жеріне орналастыруғ а болады.

 

Дә ріс 12. HTML тіліндегі модуль

Жоспар:

- Уеб сайтқ ұ ру;

- Алғ ашқ ы бетпен танысу;

- Уеб беттің бө ліктерімен танысу.

 

Бұ л бетте кө ріп тұ рғ аның ыз қ арапайым сайттың алғ ашқ ы беті. Бұ л сайт қ андай бө ліктерден тұ ратынын айта кететін болсақ. Ең бірінші жоғ арыда тұ ратын жоғ арғ ы фрейм (frame). Одан кейін ортаң ғ ы, негізгі фрейм. Оның ө зі ү ш бө ліктен тұ рады. Бірінші – меню, екінші – контент, ү шінші – related, ә ртү рлі жаң алық, хабарландыру тұ ратын бө лім. Ең тө менде футер (footer), онда компанияның мекен-жайы, телфоны жазылады.

Енді сайттың кодымен, беттерімен танысайық.

Негізгі index.html бетінқ арайық. Бірінші тұ рғ ан DOCTYPE HTML PUBLIC –HTML-дің қ ай версияда жазылғ анын білдіреді. < html>, < head> тегтерімен таныспыз. < meta charset=”utf-8”> кодировкасын дұ рыстауды білдіреді. < title> тегі тақ ырыпты білдіреді.

Одан кейін < frameset> жоғ ары бө лікке 100, ал тө менгі бө лікке 80, ал ортаң ғ ы бө лікке кішірейіп-ү лкейіп, ө згеріп тұ рушы ө лшемге ие.

TopNav деген TopNavigation деген жоғ арғ ы бө ліктегі фрейм.

Кейін ү ш бө ліктен тұ рушы FRAMESET. Екі шетіндегі 200 ө лшемге ие, ал ортаң ғ ысы соғ ан сә йкес ө згеріп тұ рады.

Frameborder, border – шекараларының нолге тең екенін білдірсе, framespacing жан-жағ ында ашық орын қ алмайтыны білдіреді.

Menu фреймі “menu_1.html” деген уеб беттен тұ рады, marginheight, marginwidth жоғ ары жә не шет жағ ына ешқ андай ашық орын болмауын білдіреді.

Сондай-ақ, content, related жә не Footer деген бө лімдері де сол сияқ ты.

Енді басқ а уеб беттерді қ арайық. Content.html беті мынадай Алматы жайлы мә ліметтен тұ рады. Осы content сияқ ты уеб беттер ашып, басқ а да қ алаларды салуғ а болады. Мысалы: Астана, Атырау, Шымкент сияқ ты бұ кіл Қ азақ станның қ алаларын салып қ оюғ а болады. Бізде бұ л сілтемелер жұ мыс істемейді себебі оларды толық тыру ү шін кө птеген уеб беттер ашу керек.

Сабақ кү рделі болмауы ү шін тек қ ана бір мысал, Алматы қ аласын келтірдік.

Ортаң ғ ы бө лікте Астана шығ уы ү шін Астананы басып, Шымкентті басқ анда ортада Шымкент шығ ып тұ ратындай немесе басқ ада қ алаларды басқ анда солар ауысып шығ ып тұ ратындай етіп жасауғ а болады.

Ал оң жақ та хабарландыру. Сайтты туристік компанияныкі деп алатын болсақ, компанияғ а қ атысты жаң алық тар шығ арып қ оюғ а болады.

Footer компанияның байланыс ақ параттарын қ амтиды. Енді content.html ішін қ арасақ, жаң а ғ ана айтқ анымыздай Алматы жайлы ақ парат, кодта бізге таныс емес body-ге CSS стилін қ осылғ ан. < style type=”text/css”> жазып, CSS-ті бө лек жазбай, HTML тілдің ішінде қ арауғ а болады. Бұ нда:

Font-family: Verdana, Arial, Sans-Serif шрифттің тү рін білдіреді.

Font-size шрифттің ө лшемін білдіреді.

Margin мә тіннің жан-жағ ындағ ы ашық тұ ратын орынды білдіреді.

Background-color фонның тү сін білдіреді.

Map.jpg деп қ ойғ анымыз, мына map.jpg деп аталушы суретті контент бө ліміне фон ретінде қ ойғ анбыз.Сондай-ақ, Алматы тақ ырыбы жә не оның мә тіні.

Одан тысқ ары footer бетінде де алдың ғ ы CSS код сияқ ты. Мына жерде екі абзацта байланыс ақ параттары жазылғ ан.

Menu_1.html бетін ашсақ, CSS кодты жә не Қ алалар деген тақ ырыпты кө реміз.

Сілтеме жұ мыс істету ү шін басқ а уеб беттерге сілтеме қ оюғ а болады.

Бұ л Related.html беті. Ә зірге ешқ андай хабарландыру, жаң алық жоқ.

Жаң алық болса, осында салуғ а болады.

Top_nav.html бетін ашып, Қ азақ стан қ алалары жайлы мә ліметтерді кө ре аламыз.

Жалпы, сайтты фреймдермен жасайтын болсақ, осындай бө лімдерден тұ рады.

Дизайнын ө зің іздің талғ амың ызғ а қ арай жасапалуың ызғ а болады.

Қ орытынды

Бұ л сабақ қ орытынды болғ андық тан уеб сайт қ ұ руды ү йрендік. Оның алғ ашқ ы бетіне, оның қ андай бө ліктерден тұ ратыны жайлы шолу жасадық. Осымен HTML сабағ ын аяқ таймыз.

 


3. ЗЕРТХАНАЛЫҚ САБАҚ ТАР

Зертханалық жұ мыс №1

Тақ ырыбы: Қ ұ рал-жабдық тары. Негізгі тү сініктері

Ә дістемелік нұ сқ ау:

Электрондық беттерді сақ тау ү шін дискіге жеке папка қ ұ р (реті):

D: \Бірінші қ адам\
Енді блакнотты (notepad) ашамыз да келесі мә тінді кө шіреміз:
< html>
< head>
< title> Менің бірінші қ адамым < /title>

< /head>
< body>
Салем, Бұ л менің бірінші парағ ым..
< br>
Қ ош келдің із!:)
< /body>
< /html> (прим.)

Енді осы документке *.html (прим.) ат беріп сақ таймыз.

D: \бірінші қ адамдар\index.html

Енді Internet Explore терезесін ашамыз (блокнотты жаппаң ыз, ол бізге ә лі керек болады).

Файл - Ашу - Обзор батырмасы - Біздің документ (index.html).

егер біз *.html документімізге ө згеріс енгізетін болсақ (блокнотта), онда оны Internet Explorer-да кө ру ү шін, IE (Internet Explorer) терезесінде ОБНОВИТЬ кнопкасын басуды ұ мытпау керек. Егер ө згеріс байқ алмаса, онда сіз кездейсоқ жерден қ ате жібердің із немесе документті сақ тауды ұ мытып кеттің із.

Енді қ арайық, бізде қ андай ө згеріс болды жә не ол қ алай болғ анына назар аударайық.

 

< html>
< head>
< title> Менің бірінші қ адамым < /title>
< /head>
< body>
Сә лем, бұ л менің бірінші парағ ым.
< br>
Қ ош келдің із!:)
< /body>
< /html> (прим.)

 

Біріншіден, біз осы оқ ып жатқ ан хтмл (html) тілін мең геруіміз керек мең геруіміз керек. Екіншіден, Html тілі программалау тілі емес екенін мең геруіміз керек (прим.), он предназначен для разметки текстовых документов (яғ ни, мә тінді форматтау ү шін). Яғ ни, сіздің енгізген мә тінің із қ андай тү рде ө згергенін меткалар анық тайды (tags или тэг).

Тэгке мысал: < br> (мә тінді келесі жолғ а жазу, Enterсияқ ты). Попробуйте между тэгами Body его понатыкать - посмотрите, что получится:)

Яғ ни, барлық < жә не > арасындағ ылар - бұ л тэг. < > жақ шасына алынбағ ан мә тін, броузерде кө рінеді.

Кө ріп отырғ анымыздай мысалда тегтар ө те кө п жә не олар ә ртү рлі. Суретке назар аударың ыз, ол бұ л жерде жай ғ ана емес, ол бізге міндетті тэгтерді кө рсетеді.

< html>

Бұ л тег документті ашу керек. егер ашатын тег болса, онда жабушы тег та болады:

< /html>

Осылай ү немі ү нсіз келісім бойынша. < br> сияқ ты кейбір тегтер жабушы тегті қ ажет етпейді. Бірақ документіміз бен суретімізге қ айта ораламыз.

< html>
< head>
< title> Менің алғ ашқ ы қ адамым < /title>
< /head>
< body>

Сә лем, бұ л менің бірінші парағ ым.
< br>
Қ ош келдің із!:)
< /body>
< /html> (прим.)


< head> < /head> - Документтің басы
< body> < /body> - Документтің денесі

< head> < /head> арасында орналасқ ан барлық тегтер қ ызметтік информация болып табылады (біздің қ ызмет ә рі қ ауіпті, ә рі қ иын, ә рі бір қ арағ анда кө рінбейді). Мысалы, < title> - Тақ ырып жолы. Ол неге керек? Откройте IE (Internet Explore)-ді біздің документ арқ ылы ашың ыз да барлық жоғ арғ ы командалық жолдарғ а назар аударың ыз (терезенің тақ ырып жолына)... Кө рдің із бе?:)

< body> < /body> аралығ ында орналасқ ан барлық тегтер- Негізгі қ ұ жаттың мазмұ ны. Келесі бірнеше баспалдақ тар осы тегпен беріледі: мә тіннің тү сін, фонын жә не мә тіннің ө лшемін ө згертуді, сурет, кесте жә не т.б туралы айтамыз.

Зертханалық жұ мыс №2

Тақ ырыбы: Мә тіннің тү сін ө згерту

Ә дістемелік нұ сқ ау:

Бұ л баспалдақ та бояуды ү йренеміз.Ең алдымен бізге палитра керек. (интернеттің барлық тү сі - онда инструкциясын оқ уды ұ мытпаң ыз, оқ уды ары жалғ астырамыз. Палитраны ө з дискің ізге сақ тап қ ойың ыз, Ол ә лі қ ажет болады.

Бұ л неге керек? Себебі, барлық тү стер мынадай жолмне жазылады.

Мысалы, ақ тү с - ffffff

Біздің парағ ымызғ а оралайық. Қ ош келдің із сө зін қ ызыл тү ске бояйық.

< font color=" #CC0000" > Қ ош келдің із!:)< /font>

Енді СС0000 орнына тү стің басқ а мә ндерін қ ойып кө рің із.

< html>
< head>
< title> Менің алғ ашқ ы қ адамым < /title>
< /head>
< body>
Салем, бұ л менің алғ ашқ ы парағ ым.
< br>
< font color=" #CC0000" > Қ ош келдің із!:) < /font>
< /body>
< /html> (прим.)

 

< font> < /font> тегі- кө пфункциялы. Онымен документтің белгілі бө лігінде мә тіннің тек тү сі ғ ана емес, сонымен бірге қ аріп ө лшемі, қ аріп тү рі (Arial) де беріледі, бірақ бұ л жайында біраздан кейін айтамыз.

Документте тү сті тағ ы қ алай беруге болады? - < body> ашушы тегті есімізге тү сірейік:

< body text=" #336699" >

 

Бұ л дегеніміз, мә тін емес, мә тіннің барлық беттері кө к тү ске боялады, яғ ни, біз < font> < /font> тегін жаздық (егер < body> -ғ а тү с бермесек, онда ол ү нсіз келісім бойынша қ ара тү ске боялады).

 

< html>
< head>
< title> Менің алғ ашқ ы қ адамым < /title>
< /head>
< body text=" #336699" >
Сә лем, бұ л менің бірінші парағ ым.
< br>
< font color=" #CC0000" > Қ ош келдің із! < /font>:)
< /body>
< /html> (прим.)

 

Мә тіннің тү сі туралы айттық, енді фоны туралы ойланайық. Ары қ адам жасаң ыз.

 

Зертханалық жұ мыс №3

Тақ ырыбы: Фонның тү сін ө згерту жә не параграфтар

Ә дістемелік нұ сқ ау:

Бұ л сабақ та документтің фонының тү сі қ алай ө згеретін білеміз, жә не этика жайлы сө з қ озғ аймыз.

Фон тү сі бізге таныс тэгте орнатылады < body>:

< body bgcolor=" #000000" >

Кө рнекілік ү шін мен қ ара тү ске жаздам, ал сіздер ө з документтерің ізді басқ а кез келген тү спен бояң ыз. (если цвет в < body> не указывать, то по умолчанию он будет белым, хотя иногда цветом по умолчанию может являться любой другой, кроме белого, поэтому лучше уж прописывайте цвет фона в body).

< html>
< head>
< title> Менің алғ ашқ ы қ адамым < /title>
< /head>
< body text=" #336699" bgcolor=" #000000" >
Сә леметсіз бе, бұ л менің алғ ашқ ы бетім.
< br>
< font color=" #CC0000" > Қ ош келдің із! < /font>:)
< /body>
< /html> (прим.)

 

Назар аударың ыз: Біз бір уақ ытта < body> тегінде; документтің текст тү сін де, фон тү сін де.

< body text=" #336699 bgcolor=" #000000" >

Берілген дең гейдің теориялық бө лімін осымен біттік, енді тү стер жайлы айтайық.

Мен сені, қ адірлі досым қ атты ашық тү стерді қ олданбауың ды сұ раймын. (сары, қ ызыл, ашық жасыл). Неге? Жай ғ ана ө з достарың мен таныстарың ның кө зі аясаң! Сонымен қ оса, ө з бетің де ө те кө п тү с қ олданғ ан да дұ рыс емес, ол оның мағ ынасын тү сінуге кедергі келтіреді.

Мысалы: Ашық қ ызғ ылт тү сті джинсы мен Kiss me жазуы бар ашық жасыл тү сті топик киген қ ыз ә рине сенің назарың ды аудартады, бірақ кө пке емес?:).

Наза аудару туралы, келесі бө лімге кө шіп, келесі дең гейге барайық!

Бұ л бө лімде параграф туралы айтамыз. Параграфтар мына тэгтермен енгізіледі:

< p> < /p>

Параграфтар кө мегімен тексті ценртде орналастыруғ а болады:

< p align=" center" > текст< /p>

Параграфтар кө мегімен тексті сол жақ тан тү зулеуге болады:


< p align=" left" > текст< /p>

Немесе документтің оң жағ ынан:

< p align=" right" > текст< /p>

Енді біздің документімізге параграфтарды енгізіп кө рейік, не шығ ады (мысалымызғ а мен центрге қ ою параграфын қ ойдым (center) тексті центрлеу параметрімен, параграфқ а басқ а Left немесе Right мә ндері бар параметрлерді қ ойып кө рің із).

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

Документке параграфтарды қ оймаса, ол ә рдайым сол жақ тан тү зуленетіні байқ аң ыз. Сонымен қ оса параграфқ а енді тэгі керек жоқ екенін естерің ізде ұ стаң ыз < br> сө зді тасымалдау ү шін, тасымалдау ү нсіз қ ойылатын болғ андық тан. Бұ л тасымалдау бізге керек емес болғ анда ше? Альтернативті тэг бар < p align=" center" >:

< center> текст< /center>

< html>
< head>
< title> Менің алғ ашқ ы қ адамым < /title>
< /head>
< body text=" #336699" bgcolor=" #000000" >
< center>
Сә леметсіз бе, бұ л менің алғ ашқ ы бетім
< br>
< font color=" #CC0000" > Қ ош келдің із! < /font>:) < /center>
< /body>
< /html> (прим.)

Егерде < p> тэгінде тө ртінші атрибуты болмаса бә рі де тамаша болар еді, біз келесі дең гейге оң ай ө туші едік:

< p align=" justify" > текст< /p>

Бұ л параграф атрибуты менің сү йікті атрибутым, ол тексті екі шеті бойынша тү зулейді, бә рі де жинақ ы жә не ә демі бола қ алады.

< html>
< head>
< title> Менің алғ ашқ ы бетім < /title>
< /head>
< body text=" #336699" bgcolor=" #000000" >
< center>
Сә леметсіз бе, бұ л менің алғ ашқ ы бетім.
< br>
< font color=" #CC0000" > Қ ош келдің із! < /font>:) < /center>
< p align=" justify" >
Мен жақ ында ғ ана виртуалды ө мірмен таныса бастадым, алайда мағ ан бұ рынғ ы салт бойынша ө зімнің жаң а виртуалды достарым мен таныстарым ү шін, олар менің фотобейнемді кө ре алу ү шін, мен туралы оқ ып, менің қ онақ кітабыма аз ғ ана жол жаза алу ү шін ү й бетімді қ ұ растырғ ым келді. Мү мкін кездейсоқ адам да менімен танысқ ысы келер, содан соң менде тағ ы бір виртуалды дос пайда болады?:)
< /p>
< /body>
< /html> (прим.)

 

Мен мұ нда сіз ү шін текст кіріспесін қ ұ рап қ ойдым (сіз, ә рине ө зің іздікін қ ұ раң ыз).Енді мысалды ө з документің ізге қ ойып менің justify-ні не ү шін ұ нататынымды кө рің із:)

Зертханалық жұ мыс №4

Тақ ырыбы: Тақ ырып жә не ә ріптер ө лшемі

Ә дістемелік нұ сқ ау:

 

Бұ л бө лімде біз тексті тақ ырып кө мегімен ерекшелеуді ү йренеміз жә не тағ ы бір функция тэгін білеміз < font> < /font>.

Сонымен, біз тексті аздап форматтай аламыз, бірақ біздің документімізді кө рің ізші. Мағ ан " Сә леметсізбе, бұ л менің алғ ашқ ы бетім" фразасы оны ерекшелеуді талап ететін сияқ ты.Ол ү шін мына тақ ырыптарды қ олдануғ а болады:

< H1> текст < /H1>

< H2> текст < /H2>

< H3> текст < /H3>

< H4> текст < /H4>

< H5> текст < /H5>

< H6> текст < /H6>

Бә рін бірақ демонстрациялау ү шін ә демілік жайлы ұ мытуғ а тура келді. Бірақ соның арқ асында тақ ырыптардың 6 дең гей бар екені жә не ә р ө лшемнің ә ріптері бар екені, жә не бізде параграфтармен сияқ ты жағ дай туып тұ рғ аны бә ріне анық кө рініп тұ р. (жолды тасымалдау қ ажеттігі). Иә, тақ ырып қ арайтылып кө рсетіледі, бұ л оның тағ ы бір қ асиеті, ө те ың ғ айлы:)

Мен мысалғ а ү шінші дең гейлі тақ ырыпты алдым < H3> < /H3> (менің сү йікті ө лшемім:). Не шық қ анын қ араң ызшы.

< html>
< head>
< title> Менің алғ ашқ ы қ адамым < /title>
< /head>
< body text=" #336699" bgcolor=" #000000" >
< center>
< H3> Сә леметсізбе, бұ л менің алғ ашқ ы бетім. < /H3>
< br>
< font color=" #CC0000" > Қ ош келдің із! < /font>:) < /center>
< p align=" justify" >
Мен жақ ында ғ ана виртуалды ө мірмен таныса бастадым, алайда мағ ан бұ рынғ ы салт бойынша ө зімнің жаң а виртуалды достарым мен таныстарым ү шін, олар менің фотобейнемді кө ре алу ү шін, мен туралы оқ ып, менің қ онақ кітабыма аз ғ ана жол жаза алу ү шін ү й бетімді қ ұ растырғ ым келді. Мү мкін кездейсоқ адам да менімен танысқ ысы келер, содан соң менде тағ ы бір виртуалды дос пайда болады?:)
< /p>
< /body>
< /html> (прим.)

 

Тақ ырыптар текстің шағ ын бө лігін ерекшелеуге арналғ ан (жолдар, фразалар), БІРАҚ, егер сіз текстің ү лкен фрагментін немесе бір сө зді ғ ана тасымалсыз ерекшелегің із келсе, онда қ айтіп істеу керек? Тақ ырыптармен бұ лай бола алмайды, сондық тан тэгін есің ізге тү сірің із < font> < /font>:
< font size=" +4" > текст < /font>
< font size=" +3" > текст < /font>
< font size=" +2" > текст < /font>
< font size=" +1" > текст < /font>
< font size=" +0" > текст < /font>
< font size=" -1" > текст < /font>
< font size=" -2" > текст < /font>

Тағ ы да ә демілік жайлы ұ мыту керек:) Сонымен, size параметрі шрифт ө лшемін береді, бірақ, тақ ырыптардан айырмашылығ ы, текст қ ара шрифтпен ерекшеленбейді (курсив туралы, қ ара шрифтпен жә не т.б туралы кейін айтамыз) жә не тасымал қ ажеттілігі жоқ.

< html>
< head>
< title> Менің алғ ашқ ы қ адамым < /title>
< /head>
< body text=" #336699" bgcolor=" #000000" >
< center>
< H3> Сә леметсізбе, бұ л менің алғ ашқ ы қ адамым.< /H3>
< br>
< font color=" #CC0000" > Қ ош келдің із! < /font>:) < /center>
< p align=" justify" >
Мен жақ ында ғ ана виртуалды ө мірмен таныса бастадым, алайда мағ ан бұ рынғ ы салт бойынша ө зімнің жаң а виртуалды достарым мен таныстарым ү шін, олар менің фотобейнемді кө ре алу ү шін, мен туралы оқ ып, менің қ онақ кітабыма аз ғ ана жол жаза алу ү шін ү й бетімді қ ұ растырғ ым келді. Мү мкін кездейсоқ адам да менімен танысқ ысы келер, содан соң менде тағ ы бір виртуалды дос пайда болады?:) < /font>
< /p>
< /body>
< /html> (прим.)

Біздің мысалымызда мен " тағ ы бір виртуалды дос? " сө зін ерекшеледім:)

Ары қ арай ө тер алдында, мен сіздерге драйвердің гигантомания атты ауруы бар екенін айтқ ым келеді. Оның симптомдары: шрифтө лшемінің ө те ү лкен болуы, жарты экранды алатын ө те ү лкен кнопкалар, барлық жағ дайда ү лкен жә не қ ара текст. Сондық тан естерің ізге саламын: стандартты size (по умолчанию) =" +0".

Зертханалық жұ мыс №5

Тақ ырыбы: Курсив, асты сызылғ ан, қ оюлатылғ ан шрифтер

Ә дістемелік нұ сқ ау:

 

Қ иғ аш, қ ою мә тін, асты сызылғ ан мә тін жә не т.с.с".

" Жол дегеніміз не

Енді қ иғ аш, жартылай қ ою, асты сызылғ ан жә не фиксирленген мә тін қ алай жазылатыны туралы айтамыз:

< b> Жартылай қ ою мә тін < /b>
< i> Қ иғ аш мә тін (курсив) < /i>
< u> Асты сызылғ ан мә тін < /u>

Мұ нда барлығ ы қ иын емес, мысалда ө здерің із кез келген сө зді ерекшелеп жазуың ызғ а болады, ал мысалда тағ ы да HTML гипермә тіндік тіл сө зі ерекшеленген:

< html>
< head>
< title> Менің алғ ашқ ы қ адамым < /title>
< /head>
< body text=" #336699" bgcolor=" #000000" >
< center>
< H3> Сә лем, бұ л менің бірінші парағ ым.< /H3>
< br>
< font color=" #CC0000" > Қ ош келдің із! < /font>:) < /center>
< p align=" justify" >
Мен жақ ында ғ ана виртуалды ө мірмен таныса бастадым, алайда мағ ан бұ рынғ ы салт бойынша ө зімнің жаң а виртуалды достарым мен таныстарым ү шін, олар менің фотобейнемді кө ре алу ү шін, мен туралы оқ ып, менің қ онақ кітабыма аз ғ ана жол жаза алу ү шін ү й бетімді қ ұ растырғ ым келді. Мү мкін кездейсоқ адам да менімен танысқ ысы келер, содан соң менде тағ ы бір < b> виртуалды дос пайда болады? < /b>
< /p>
< /body>
< /html> (прим.)

Енді фиксирленген қ аріп туралы айтамыз. Бұ л қ андай қ аріп тү рі? Бұ л қ аріп бірдей ұ зындық тағ ы символдармен жазылғ андық тан фиксирленген қ аріп деп аталады. Ал ол ү шін тэг келесідегідей:

< tt> fixed - фиксирленген қ аріп < /tt>

В наш пример я его вводить не буду (сами, если хотите), т.к. пример наш и так фиксированным шрифтом выделен.

< pre> текст (куча пробелов) текст < /pre>

< pre> и < /pre> аралығ ында орналасқ ан мә ні де фиксирленген, бірақ мұ нда ү лкен ерекшелік бар, ол тек фиксирленген емес, жә не блакнотта қ алай тердің із нақ ты тү рде бос орынғ а дейін енгізіледі, бұ л тег мү мкін пайдалы, мысалы ө лең дерді форматтағ анда, осы тегті қ олданбағ аның ыз дұ рыс.

Есің ізде ме, мә тіннің бір фрагментіне бірнеше тег қ олданылады:

< tt> < b> < i> мә тін < /i> < /b> < /tt>

Біздің мысалда мә тін фиксирленген, жартылай қ ою жә не қ иғ аш

Картинкағ а ө тпес бұ рын < font> тегінің атрибутын айтқ ым келеді:

< font face=" ARIAL" > мә тін (қ аріпArial)< /font> (прим.)

face атрибутының кө мегімен біздің мысалда Arial қ аріпін бердім.

Болды, енді сурет салуғ а кірісейік

Алдағ ы сабақ тарғ а жоспарымызды қ ұ райық: қ алай сурет салуды, графикалық редакторларды қ алай қ олдануды мен сіздерге ү йретпеймін, мен тек сіздерге Adobe Photoshop и Image Styler 1.0 қ олдануғ а кең ес беремін, яғ ни мен осы екеуін қ олданамын.

Пока мы все еще сидим, я себе позволю немного почитать тебе мой спутник нравоучения. Запомни, страница (сайт) не должна представлять из себя супер графического изыска, который весит сотни килобайт, т.к. это жестоко, ни одна живая душа не выдержит подобной пытки (грузить долго). Вот, например, эта страница, содержание которой ты тщательно изучаешь) весит в картинках не более 6 килобайт (это общий вес всех картинок, а не вес каждой).

Также я посоветую не изощряться с анимированными картинками (они отвлекают внимание от содержания странички, а анимированная картинка не к месту смотрится как золотое колье на немытой шее - нелепо).
Теперь я с чистой совестью поведаю, как вставлять картинки в документ:

< img src=" my.jpg" >

Вместо my.jpg мы можем подставить имя любой картинки (me.gif, main.png). Самое главное понять, что все расположенное между кавычками - ссылка (путь к картинке). Наш пример говорит о том, что картинка лежит в том же каталоге (директории, папке), в которой лежит и наш документ. Если картинка лежит в поддиректории то ссылка на неё будет выглядеть так:
< img src=" my/my.jpg" >

Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой:

< img src="../my.jpg" >

Если картинка лежит на другом сайте, то путь прописывается полностью:

< img src=" https://www.homepage.ru/my/my.jpg" >

Для вашего удобства кладите картинку в ту же директорию, что и документ, тогда путаницы будет меньше:)

Если у вас нет на данный момент картинки, то сохраните эту (жми на ссылку) у себя в директории с нашей страничкой. В нашем примере я использую именно ее (запомните тэг img не требует закрывающего тэга).

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

Бізде қ андай ө згеріс болғ анын қ араң ыз. Бірақ сондай ұ қ ыпты болмады. Мә тін суреттің жанына ұ қ ыпты орналасқ аны тиімді болар еді. Мұ ны қ алай орындау керектігін білу ү шін ары қ адам жасайық.


Зертханалық жұ мыс №6

Тақ ырыбы: Картинкалармен жұ мыс

Ә дістемелік нұ сқ ау:

Сонымен, біз мә тін суреттің қ асына орналасқ анын қ арастырамыз. Барлығ ы ө те оң ай. Бірнеше тегтердің параметрі бар (атрибуттары), параметр жалғ ыз да, бірнеше де болып беріледі. Мысалы, < p> - < тегінде p align=" justify" >. 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" >

align параметрінен басқ а да бірнеше параметрлер бар:

(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 параметрі - мә тін мен суреттің арақ ашық тығ ын реттейді (тігінен). Арақ ашық тық пиксельмен беріледі (pixel - бейненің минимальды бірлігі, нү кте. Мысалы, экранғ а 800х600 - 800-ге 600 нү кте рұ қ сат етілген). Біздің мысалда арақ ашық тық 10 пиксельге тең.

(2) - hspace параметрі де тоже задает расстояние между текстом и рисунком, бірақ кө лденең інен. Арақ ашық тық пикселмен беріледі. Біздің мысалда ол 30 пиксельге тең (нү ктемен).

(3) - alt параметрі - суреттің қ асқ а тү сініктемесі. Егер курсормен тү сініктемені суретке апарып, бірнеше секунд жібермей ұ стап тұ ратын болсақ (курсор), суреттің тү сініктемесі пайда болады. Біздің мысалда бұ л фраза - " менің фотосуретім". Егер alt параметрін енгізбесек, онда тү сініктеме болмайды. Бірақ ақ ылды адамдар суретке тү сініктеме бергенді дұ рыс деп санайды (ә сіресе, егер бұ л кнопка болса), alt параметрі берілмесе сурет бейнеленбейді, ал бұ л параметр енгізілгенде, суреттің бейнеленгендігі туралы тү сініктеме кө руге болады.

(4) - width параметрі - суреттің ені (пиксельмен). егер енін міндетті тү рде бермесе, онда ү нсіз келісім бойынша суреттің шынай еніне тең болады.

(5) - height параметрі - суреттің биіктігі (пиксельмен). Мұ нда да суреттің биіктігін енгізбеуге болады (height). u="u1242.91.spylog.com"; d=document; nv=navigator; na=nv.appName; p=1; bv=Math.round(parseFloat(nv.appVersion)*100); n=(na.substring(0, 2)=="Mi")? 0: 1; rn=Math.random(); z="p="+p+"&rn="+rn; y=""; y+=""; y+=""; y+=""; d.write(y); if(! n) { d.write("






© 2023 :: MyLektsii.ru :: Мои Лекции
Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав.
Копирование текстов разрешено только с указанием индексируемой ссылки на источник.