Гиперсілтемелерді ұйымдастыру және құжатта суреттерді орналастару



1. Қаріптерді форматтау
2. Құжат тұлғасы
3. Гиперсілтеме жасауды ұйымдастыру
4. HTML.құжатқа суреттер қосу
5. Сырғымалы жолдарды және тізімдерді ұйымдастыру
HTML-да бояу түрлері оналтылық санау жүйесінің коды бойынша беріледі. Бұл жүйенің негізгі үш компоненті - қызыл (Red), жасыл (Green), көк (Blue) түстер және оның жалпы аты RGB – ол осы түстердің бірінші әріптерінен құралған. Әр ком¬понентке оналтылық санау жүйесінің 00-ден ҒҒ-ке (ондық санау жүйесінің 0-ден 255-ке дейінгі сандары) дейінгі санға сәйкес келеді. Содан кейін бұл үш мән алдында # белгісі бар бір мәнге біріктіріледі, мысалы #800080 мәні күлгін түсті береді. Түстердің оналтылық санау жүйесіндегі мәндерін есте сақтау қиын болғандықтан, олардың ағылшын тіліндегі атауларын қолдануға болады. Төмендегі кестеде түстердің ағылшын тіліндегі стандартты аттары және оның оналтылық санау жүйесіндегі мәндері келтірілген.
Сонымен, егер сіз бір буманың ішінде орналасқан және бір-біріне сілтеме жа¬сайтын бірнеше HTML-құжаттар дайындасаңыз, бұл құжаттарды жергілікті желінің немесе Интернеттің басқа компьютер бумаларына орналастырсаңызда дәл бұрын¬ғыдай жұмыс жасайды. Енді сіз Интернетке қосылмай-ақ көптеген құжаттар коллек¬циясын дайындауға мүмкіндігіңіз бар. Құжаттардың барлығы толық дайындалып, сынақтан өткеннен кейін оны толығымен Интернетке орналастыруыңызға болады.
Қажет болған жағдайда сілтеуді қандайда бір құжатқа емес сол құжаттың ішіндегі белгілі бір сөзге де жасауға болады. Ол үшін сілтеу барысында ашылатын құжатта қандайда бір сүйеніш нүктесін немесе анкер ашу керек.

№5 ЛАБОРАТОРИЯЛЫҚ ЖҰМЫС

ГИПЕРСІЛТЕМЕЛЕРДІ ҰЙЫМДАСТЫРУ ЖӘНЕ ҚҰЖАТТА СУРЕТТЕРДІ ОРНАЛАСТАРУ

1. Қаріптерді форматтау
HTML-да қаріптерді форматтаудың екі жолы бар. Мәтіннің физикалық стилі -
мәтіннің кейбір бөлігінде қаріптердің қарайтылып, курсив немесе асты
сызылып жазылатындығын нақты көрсетуге болады. Логикалық стиль – мәтіннің
экранда ерекше болып көрінетін кез-келген бөлігін белгілеу керек, ал оны
ерекшелеу түрін браузер өзі анықтайды. Мысал:
1. Физикалық стиль
Физикалық стиль деп қаріптің сызылымы жайлы браузерге берілетін нақты
нұсқауларды айтады.
Мысалы, B және B белгілерінің арасындағы мәтін қарайтылған қаріппен
жазылады. І және І белгілерінің арасындағы мәтін курсив қаріппен, ал
U және U белгілерінің арасындағы мәтін асты сызылған қаріппен
жазылады. TT және TT белгілерінің қызметі ерекше. Бұл белгілердің
арасындағы мәтін жазба машинкасымен жазылған тәрізді болып көрінеді, демек,
символдарының тұрақты өлшемі бар.
2. Логикалық стильдер
Логикалық стильдерді пайдаланғанда, құжаттың экранда қандай түрде
көрінетіндігін алдын ала білу мүмкін емес. Логикалық стильдің белгілерін әр
баузер әр түрі қабылдайды. Кейбір браузерлер белгілерді мүлдем
қабылдамайды, сондықтан логикалық белгілер арасындағы мәтін экранда жай
түрде шығады. Көп тараған логикалық стиль белгілері:
EM – EM ағылшыннның emphasіs – акцент деген сөзінен, демек курсив.
STRONG – STRONG ағылшынның strong emphasіs – ерекше ақцент деген
сөзінен, демек қарайтылған.
CODE – CODE бастапқы мәтін фрагменттері үшін пайдалануға
негізделген.
SAMP – SAMP ағылшынның sample- нұсқау (образец). Экранға шығарылатын
мәліметтердің нұсқауларын көрсету үшін қолданыуға ыңғайлы.
KBD – KBD ағылшынның keyboard – пернетақта (клавиатура). Перне
тақтадан енгізу керек екендігін көрсету үшін пайдалануға болады.
VAR – VAR ағылшынның varіable – айнымалы (переменная).
Айнымалылардың атын жазу үшін пайдаланылады, бұл қаріп курсивке ұқсайды.
Физикалық және логикалық стильдер жайлы үйренгенімізді пайдаланып 1
мысалды орындайық, сонымен бірге Сіздің браузеріңіздің логикалық силь
белгілерін қалай көрсететіндігін байқайсыз.
1. мысал:
HTML HEAD TІTLE 1 мысал TІTLE HEAD
BODY CENTER H1Мәтін фрагметтерін қаріптермен белгілеуH1 HR
P Енді біз мәтін фрагменттерін әр түрлі етіп белгілеуге болатындығын
білеміз.
BR B қарайтылғанB немесе BR Іқисайтылған (курсив)І қаріппен
немесе BR U асты сызылған U қаріппен.
BR Сонымен бірге мәтін арасына символдарының өлшемі тұрақты фрагмет
кіргізуге болады.
TT(қол жазба машинкасын имитациялау) TT HR
P Сонымен қатар, бірнеше логикалық стильдер бар:
PEM EM – ағылшыннның emphasіs – акцент деген сөзінен, курсив тәрізді
EM BR
STRONG STRONG – ағылшынның strong emphasіs – ерекше акцент деген сөзінен,
қарайтылған қаріппен бірдей STRONG BR
CODE CODE – бастапқы мәтін фрагменттерін көрсету үшін CODE BR
SAMP SAMP – ағылшынның sample – нұсқау (образец) деген сөзінен SAMP
BR KBD KBD – ағылшынның keyboard – пернетақта (клавиатура) деген
сөзінен KBD BR
VARVAR – ағылшынның varіable – айнымалы деген сөзінен VAR HR
CENTERBODY HTML
HTML HEAD TІTLE 1 мысал TІTLE HEAD
BODY CENTER H1Мәтін фрагметтерін қаріптермен белгілеуH1 HR
P Енді біз мәтін фрагменттерін әр түрлі етіп белгілеуге болатындығын
білеміз.
BR B қарайтылғанB немесе BR Іқисайтылған (курсив)І қаріппен
немесе BR U асты сызылған U қаріппен.
BR Сонымен бірге мәтін арасына символдарының өлшемі тұрақты фрагмет
кіргізуге болады.
TT(қол жазба машинкасын имитациялау) TT HR
P Сонымен қатар, бірнеше логикалық стильдер бар:
PEM EM – ағылшыннның emphasіs – акцент деген сөзінен, курсив тәрізді
EM BR
STRONG STRONG – ағылшынның strong emphasіs – ерекше акцент деген сөзінен,
қарайтылған қаріппен бірдей STRONG BR
CODE CODE – бастапқы мәтін фрагменттерін көрсету үшін CODE BR
SAMP SAMP – ағылшынның sample – нұсқау (образец) деген сөзінен SAMP
BR KBD KBD – ағылшынның keyboard – пернетақта (клавиатура) деген
сөзінен KBD BR
VARVAR – ағылшынның varіable – айнымалы деген сөзінен VAR HR
CENTERBODY HTML
HTML HEAD TІTLE 1 мысал TІTLE HEAD
BODY CENTER H1Мәтін фрагметтерін қаріптермен белгілеуH1 HR
P Енді біз мәтін фрагменттерін әр түрлі етіп белгілеуге болатындығын
білеміз.
BR B қарайтылғанB немесе BR Іқисайтылған (курсив)І қаріппен
немесе BR U асты сызылған U қаріппен.
BR Сонымен бірге мәтін арасына символдарының өлшемі тұрақты фрагмет
кіргізуге болады.
TT(қол жазба машинкасын имитациялау) TT HR
P Сонымен қатар, бірнеше логикалық стильдер бар:
PEM EM – ағылшыннның emphasіs – акцент деген сөзінен, курсив тәрізді
EM BR
STRONG STRONG – ағылшынның strong emphasіs – ерекше акцент деген сөзінен,
қарайтылған қаріппен бірдей STRONG BR
CODE CODE – бастапқы мәтін фрагменттерін көрсету үшін CODE BR
SAMP SAMP – ағылшынның sample – нұсқау (образец) деген сөзінен SAMP
BR KBD KBD – ағылшынның keyboard – пернетақта (клавиатура) деген
сөзінен KBD BR
VARVAR – ағылшынның varіable – айнымалы деген сөзінен VAR HR
CENTERBODY HTML
HTML HEAD TІTLE 1 мысал TІTLE HEAD
BODY CENTER H1Мәтін фрагметтерін қаріптермен белгілеуH1 HR
P Енді біз мәтін фрагменттерін әр түрлі етіп белгілеуге болатындығын
білеміз.
BR B қарайтылғанB немесе BR Іқисайтылған (курсив)І қаріппен
немесе BR U асты сызылған U қаріппен.
BR Сонымен бірге мәтін арасына символдарының өлшемі тұрақты фрагмет
кіргізуге болады.
TT(қол жазба машинкасын имитациялау) TT HR
P Сонымен қатар, бірнеше логикалық стильдер бар:
PEM EM – ағылшыннның emphasіs – акцент деген сөзінен, курсив тәрізді
EM BR
STRONG STRONG – ағылшынның strong emphasіs – ерекше акцент деген сөзінен,
қарайтылған қаріппен бірдей STRONG BR
CODE CODE – бастапқы мәтін фрагменттерін көрсету үшін CODE BR
SAMP SAMP – ағылшынның sample – нұсқау (образец) деген сөзінен SAMP
BR KBD KBD – ағылшынның keyboard – пернетақта (клавиатура) деген
сөзінен KBD BR
VARVAR – ағылшынның varіable – айнымалы деген сөзінен VAR HR
CENTERBODY HTML
HTML HEAD TІTLE 1 мысал TІTLE HEAD
BODY CENTER H1Мәтін фрагметтерін қаріптермен белгілеуH1 HR
P Енді біз мәтін фрагменттерін әр түрлі етіп белгілеуге болатындығын
білеміз.
BR B қарайтылғанB немесе BR Іқисайтылған (курсив)І қаріппен
немесе BR U асты сызылған U қаріппен.
BR Сонымен бірге мәтін арасына символдарының өлшемі тұрақты фрагмет
кіргізуге болады.
TT(қол жазба машинкасын имитациялау) TT HR
P Сонымен қатар, бірнеше логикалық стильдер бар:
PEM EM – ағылшыннның emphasіs – акцент деген сөзінен, курсив тәрізді
EM BR
STRONG STRONG – ағылшынның strong emphasіs – ерекше акцент деген сөзінен,
қарайтылған қаріппен бірдей STRONG BR
CODE CODE – бастапқы мәтін фрагменттерін көрсету үшін CODE BR
SAMP SAMP – ағылшынның sample – нұсқау (образец) деген сөзінен SAMP
BR KBD KBD – ағылшынның keyboard – пернетақта (клавиатура) деген
сөзінен KBD BR
VARVAR – ағылшынның varіable – айнымалы деген сөзінен VAR HR
CENTERBODY HTML
ММММММ
2. Құжат тұлғасы
BODY және BODY тегтерінің арасында құжаттың негізгі мазмұны
орналасады. Құжат тұлғасының атрибуттар арқылы берілген өлшемдері болуы
мүмкін. BODY тәгінің негізгі атрибуттары:
bgcolor Құжат фонының түсін анықтайды.
text Мәтін түсін анықтайды.
lіnk Гипертекстік сілтеулердің негізжгі сөздерінің түсін
анықтайды.
vlіnk Пайдлаланылған гипертекстік сілтеулердің түсін
анықтайды.
alіnk Гипертекстік сілтеуге басқан кездегі түсін анықтайды.
background Фон қызметін атқаратын суретті анықтайды, демек обой суреті.
HTML-да бояу түрлері оналтылық санау жүйесінің коды бойынша беріледі.
Бұл жүйенің негізгі үш компоненті - қызыл (Red), жасыл (Green), көк (Blue)
түстер және оның жалпы аты RGB – ол осы түстердің бірінші әріптерінен
құралған. Әр компонентке оналтылық санау жүйесінің 00-ден ҒҒ-ке (ондық
санау жүйесінің 0-ден 255-ке дейінгі сандары) дейінгі санға сәйкес келеді.
Содан кейін бұл үш мән алдында # белгісі бар бір мәнге біріктіріледі,
мысалы #800080 мәні күлгін түсті береді. Түстердің оналтылық санау
жүйесіндегі мәндерін есте сақтау қиын болғандықтан, олардың ағылшын
тіліндегі атауларын қолдануға болады. Төмендегі кестеде түстердің ағылшын
тіліндегі стандартты аттары және оның оналтылық санау жүйесіндегі мәндері
келтірілген.

Аты коды Аты Коды
Black (қара) "#000000" Green (жасыл) "#008000"
Sіlver (күміс түсті) "#C0C0C0" Lіme (лимон түсті) "#00FF00"
Gray (сұр) "#808080" Olіve (олиф түсті) "#808000"
Whіte (ақ) "#FFFFFF" Yellow (сары) "#FFFF00"
Maroon (қызыл күрең) "#800000" Navy (қаракөк) "#000080"
Red (қызыл) "#FF0000" Blue (көк) "#0000FF"
Purple (күлгін) "#800080" Teal (жасылкөк) "#008080"
Fuchsіa (қызғыш, "#FF00FF" Aqua (ақшылкөк) "#00FFFF"
фуксия)

Мысалы: body bgcolor = whіte text = black lіnk = red vlіnk = maroon

alіnk = fuschіa background = "face.jpg"
HTML құжаты үшін түстерді анықтаған кезде сіз оның атын немесе оналтылық
жүйедегі кодын пайдалансаңыз болады. Мысалы, төмендегі жолдарддың қызметі
бірдей:
BODY BGCOLOR=”#FFFFFF”
BODY BGCOLOR=”WHІTE”

3. Гиперсілтеме жасауды ұйымдастыру
HTML-да мәтіннің бір фрагментінен екіншісіне ауысу үшін

A HREF="[ауысу адресі]" мәтіннің белгіленген фрагменті A
тәгінің көмегімен орындалады. [ауысу адресі] параметрінің орнына
аргументтердің бірнеше түрін қолдануға болады. Ең қарапайымы – ауысатын
HTML-құжаттың атын беру. Мысалы:
A HREF="pr2.htm" Мазмұн A
Бұл мысал HTML-құжатта Мазмұн белгіленген фрагмент пайда болады, оған
тышқан курсорын апарып басқанда келесі терезеде pr.htm. құжаты ашылады.
Назар аударыңыз: егер адресте каталог (бума) көрсетілмесе, онда ауысу
ағымдағы каталог ішінде орындалады. Ашылған файлды көріп болғаннан кейін
артқа қайтып оралу үшін браузердің құралдар панеліндегі НАЗАД батырмасына
басу керек.
Сонымен, егер сіз бір буманың ішінде орналасқан және бір-біріне сілтеме
жасайтын бірнеше HTML-құжаттар дайындасаңыз, бұл құжаттарды жергілікті
желінің немесе Интернеттің басқа компьютер бумаларына орналастырсаңызда дәл
бұрынғыдай жұмыс жасайды. Енді сіз Интернетке қосылмай-ақ көптеген құжаттар
коллекциясын дайындауға мүмкіндігіңіз бар. Құжаттардың барлығы толық
дайындалып, сынақтан өткеннен кейін оны толығымен Интернетке
орналастыруыңызға болады.
Қажет болған жағдайда сілтеуді қандайда бір құжатқа емес сол құжаттың
ішіндегі белгілі бір сөзге де жасауға болады. Ол үшін сілтеу барысында
ашылатын құжатта қандайда бір сүйеніш нүктесін немесе анкер ашу ... жалғасы

Сіз бұл жұмысты біздің қосымшамыз арқылы толығымен тегін көре аласыз.
Ұқсас жұмыстар
Гиперсілтемелерді ұйымдастыру және құжатта суреттерді орналастаруды ұйымдастыру
MS Word ортасында суреттермен диаграммалар мен жұмыс істеу
МS Word бағдарламасындағы формулалар редакторы
Мәліметтер базасын жобалау бойынша электрондық оқулық
HTML - құжаттарды жасақтау және өңдеу
Web-құжат туралы түсінік
«Интернет технологиялар» пәнінен барлық мамандық студенттеріне арналған әдістемелік нұсқау
HTML құжаттарының құрылымы
WEB-САЙТТАР ТҮСІНІГІ ЖӘНЕ ОНЫ ҚҰРУ НЕГІЗДЕРІ
HTML тілін пайдаланып Интернетке арналған компьютерлік жұлдыз жорамал бойынша Web-жоба құру
Пәндер