Құжаттың HTML - HEAD бас контейнері

Жұмыс түрі: Курстық жұмыс
Тегін: Антиплагиат
Көлемі: 33 бет
Таңдаулыға:

ЖОСПАР:

Кіріспе

1. World Wide Web

1. 1. HTML-тілінің көмегімен Web-бетті қалыптастыру

1. 2. Web - беттерін құру үшін арналған құрал жабдықтар

1. 3. Гипермәтіндік белгілеу принциптері. Құжаттар құрылымы

2. HTML тегтер тобы

2. 1. HTML құжатының контейнерлері

2. 2. META

2. 3. Міндетті тегтер

2. 4. Сыңарсыз тегтер

3. Шрифтерді форматтау

4. Құжат ішінде мәтінді ұйымдастыру

5. HTML құжатынан тысқары

6. HTML құжатындағы бейнелер

7. Кестелер

8. Кестелерді беттерді безендіру үшін қолдану

9. Фреймдер

9. 1. Фреймдерге арналған тегтер мен атрибуттар

10. Формалар

11. WEB-беттегі мультимедиа

Қорытынды

Қолданылған әдебиеттер

Кіріспе

World Wide Web - Бүгінгіні күні әр түрлі ақпараттар амиллиондаған сайттардан тұратын компьютерлік желі. Қолданушылар бұл ақпаратқа WWW технологиясын қолдану арқылы мүмкіндік алады. WWW навигациясы үшін WWW шексіз кеңістігінде саяхатын жеңілдететін арнайы программалар Web броузерлер қолданылады. Барлық ақпарат WWW байттарының негізгі элементі болып келетін Web беті ретінде бейнеленеді.

Web-беттер мультимедия технологиясын қолдап, өзінде әр түрлі ақпараттар түрін біріктіреді. Олар: мәтін, графика, дыбыс, анимация және бейне. Көп жағдайда сол немесе басқа Web-беттердің желідегі жетістігі саналы және әдемі жасалуына байланыстыы.

Қолданушыылар стильді безендендірілген, анимация және графикамен тым қамтылмаған, тез жүктелетін Web-броузер терезесінде дұрыс бейнеленетін Web беттерін қолдану ұнамды.

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

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

Сондай-ақ бұл жұмыста WWW ортақ қабылдаған стандарт болып келетін Web-бетті программалау тілінің негізі - HTML-ды қарастырдым. Бұл бізге Web құрылымымен және оны дұрыс безендіру тәсілдерімен танысуға мүмкіндік береді.

World Wide Web

Internet-тің таралуы

Internet - бұл ең үлкен әлемдік компьютерлік жүйе. Қазір Internet 50 -ден астам елдерде жуықтап 150 млн. қолданушылары бар. WWW-ға негізінен Internet арқылы қол жеткізуге(доступен) болады, бірақ WWW және Internet бір мағынаны білдірмейді. WWW-ді ішкі мазмұнға келтіруге болады, яғни бұл қандайда бір білімнің абстракттік әлемі, ал Internet глобальді жүйенің сыртқы жағы болып келеді.

СУРЕТ

1-ші суретте қара түспен боялған елдерде Internet бойынша байланысы бар. Бұндай мүмкіндігі бар адамдар саны күннен-күнге көбейуде. Ақ түспен боялған елдерде локальді жүйеде e-mail бойынша жұмыс істей алады немесе мүлдем одан хабарсыз.

WWW концепциясы

Сонымен World Wide Web немесе қарапайым тілмен айтқанда WWW, Web, немесе одан да оңай 3W деген не? WWW-бұл гипермәтінде негізделген, кең таралған мультимедияның ақпараттық жүйесі . Енді осы анықтаманы рет-ретімен қарастырайық.

Кең таралған ақпараттық жүйе: ақпарат WWW сервер (server) деп аталатын керемет үлкен жиында сақталады, яғни арнайы прогаммамен қамтылған және Internet желісіне біріктірілген компьютерге орналастырылады. Желіге қосылуға мүмкіндігі бар қолданушылар осы ақпаратты клиент- программалары және WWW-құжат қарастыру прграммалары көмегімен алады. Сонымен қатар қарау программасы компьютерлік желі бойынша қажетті құжаттар бар файлды сақтайтын серверге сұраныс жібереді. Сұруға жауап ретінде сервер қарау программасына осы қажетті файлды немесе егер файл белгілі бір себептермен асқақ болса, қабыл алмағаны жайында хабар жібереді. Клиент-сервер қарым-қатынасы белгілі бір ережелер бойынша немесе, басқаша айтқанда, хаттама арқылы жүргізіледі. WWW-да қабылданған хаттама HyperText Transfer Protocol деп аталады, қысқартқанда HTTP.

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

Сонымен, Web-бетте стильденген немесе форматталған мәтін Internet-тің әртүрлі қорымен, графика және гипербайланыс болуы мүмкін. Осы барлық мүмкіндіктерді іске асыру үшін HyperText Markup Language аталатын арнайы тіл жасалды.

HTML-тілінің көмегімен Web-бетті қалыптастыру

Web - беттерін құру үшін арналған құрал жабдықтар

HTML-редакторы

Web - беттерін құру үшін әркім өзіне ыңғайлы құрал жабдық таңдайды, ол DreamWeaver, Allaire HomeSite, 1 ^st Page 2. Ал кейбіреуі жәй мәтіндік редактормен, мысалы блокнот (NotePad) қолданылады.

Мәтіндік редакторды көлемі кішкентай беттерді құру үшін қолданылады, өйткені оның теріс жақтары бар: проектілер ұсталмайды, “подсветка . . . ” мәтіні жоқ, жұмыс істеу қолайсыз.

MS Front Page басты кемшілігі, ол HTML кодын үлкен көлемде қабылдайды (қажетсіз заттар көп), сондықтан бет көлемі өте үлкен болады. Ол загрузка жұмысына кедергі келтіреді. Сонымен қатар Web-бетіндегі жұмыс бұл редакторда бір бөлек, ал броузер терезесінде мүлдем басқа (бұл әсіресе Netscape Navigator-ға тиісті) . Беттер біртүрлі қисық болады, сондықтан Web- бетін құру үшін төменде берілген пакеттерді қолдану керек.

Ең алдымен Macromedia DreamWeaver-дан бастайық. Macromedia компаниясы веб-сайтын құруға арналған программалар құрудан ең алдағы компания болып саналады.

HTML-редактордың соңғы версиясы - DreamWeaver 3 компаниясы, бұл WYSIWYG-редактор катигорясына жатады және бұл пакеттің көп қолайлы жақтары бар: ыңғайлы интерфейс, функцияны түзету және ShockWave технологиялы, FTP арқылы файлды еңгізу, SSI ұстау жіне т. б. Бұл программамен жұмыс істеу ұшін HTML білу қажет емес.

PICTURE

Бірақ DreamWeaver 3 бірнеше қадамға WYSIWYG технологиясын қолданатын басқа редакторлардан алда. Web-бетті құру кезінде біртекті жұмыстан арылтады, ол “командаларды ретпен жазу” опциясы арқылы жұмыс істейді.

Келесі редактор HomeSite 4 бетті қолдан жасау үшін, яғни HTML білетіндерге арналған. Сіз HTML кодын толық басқаруға мүмкіндік аласыз, сонымен бірге өзіңіздің беттеріңізді атақты үш броузердің (MSIE, NN, OPERA) біреуі арқылы оптимизациялауға мүмкіндік береді.

HomeSite басты екі режимнен тұрады: Edit және Design. Design режимі WYSIWYG редакторы сияқты HTML кодын беретін, сонымен қатар бөтен HTML кодын іске қосқанда, HomeSite барлығын өзіне көшіріп алады. Edit режимі толығымен бетті басқаруға мүмкіндік береді.

HomeSite-тың тағы бір ерекшелігі - ол оның DreamWeaver-мен “жапсыруы”.

HTML редакторының соңғы редакторы болып EVR Soft 1 ^st Page 2000 v2 табылады.

Гипермәтіндік белгілеу принциптері. Құжаттар құрылымы

HTML-құжатарында белгіліеу модельдерінің негізі ретінде тегтер моделі қабылдалынған. Тегтер моделі құжатты контейнерлер ретінде түсіндіріледі, мұндағы контейнерлер дің әр қайсысы тегтермен басталып, тегтермен аяқталады. Яғни HTML құжаты кәдігімгі ASCII- файлға HTML басқару кодтары (тегтері) қосылған файл болып табылады.

HTML-құжатының тегтері көбінесе қолдануға және түсінуге жеңіл. Себебі олар ағылшын тілінің көпқолданбалы сөздерінен түсінікті түрде қысқартылып және белгіленіп алынған. HTML-тегі өзінің атынан, міндетті және міндетті емес атрибуттардан тұрады. Тег мәтіні бұрышты жақшалармен қоршалады. Мысал ретінде қарапайым варианттардың бірі: <HEAD> немесе <i>. Тегтердің күрделілігі олардың атрибуттарында болып табылады. Мұндағы атрибуттар тегтердің функцияларын өзгерту үшін қолданылады (көлемін, ұзындығын, түрін және т. б. ) .

Тегтер атрибуттары оның атынан кейін жазылады және бір-бірінен бір немесе бірнеше табуляция, пробел немесе жол басына қайтару символдары арқылы ажыратылады. HTML тілінде тегтер атрибуттарын кезекпен жазуды керек етпейді. Атрибуттың мәні атрибут атынан соң жазылатын теңдік белгісінен кейін жазылады. Егер атрибут мәні бір сөз немесе сан болып келетін болса, онда оны ешбір қосымша белгілеусіз теңдік белгісінен кейін жаза беруге болады. Басқа жағдайларда атрибут мәндерін бірлік немесе екілік тырнақшаларға алып жазу керек, әсіресе егер олар пробел арқылы бөлінген бірнеше сөз болса. Атрибут мәнінің ұзындығы 1024 символға дейін рұқсат етілген. Мысалға, әсіресе HREF атрибутының мәні ретінде басқа құжаттардың адресін (URL) көрсеткенде керекті регистрді қолдану маңызды болып табылады.

Көп жағдайларда HTML тегтері бастапқы және ақырлы компоненттерден тұрады және олардың арасына мәтін және басқа да құжат элементтері орналасады. Жабушы тегтің аты бастапқы тегтің атына сәйкес болып келеді, бірақ жабушы тегтің атының алдына көлденең сызықша (/) қойылады. Мысалы, шрифт түрі <i>-курсив тегі үшін жабушы сыңары </i> түрінде болады. Жабушы тегтер үшін атрибуттар ешқашанда қойылмайды, қойылса да ол атрибут қабылданбайды. Мәні бойынша тегтер әмбебап программалау тілдерінің “begin \ end” белгілеулеріне түсінігі бойынша өте ұқсас болып келеді. Тегтер құжаттың мәтіндік интерпритациялау шартының әрекет ету ауданын анықтайды.

Ішкі тегтерді қолданғанда құжатта ерекше ұқыптылықты сақтау керек. Ішкі тегтерді соңғысынан бастап ьастапқысына қарай жауып шығу керек. Кейбір HTML тегінің жабушы тегтері болмайды, өйткені олар автономды элементтер болып табылады. Мысалы, бейнелер тегі <IMG> жабушы компонентті қажет етпейді. Автономды тегтерге тағы да <BR>- жолдарды айыру, <HR>-көлденең сызық және көрсетілетін нәтижеге әсер етпейтін, тек қана құжат туралы ақпараттар сақтайтын <META> және <BASE> сияқты тегтер жатады.

Кейбір жағдайларда жабушы тегтердіжазбаса да болады. Көптеген браузерлер құжат мәтінін өңдегенде бастапқы тегті алдыңғы тегтің жабушы тегі ретінде қабылдайды. Ең көп тараған мұндай тегтің түрі абзац тегі - <P>. өйткені оны құжаттарда жиі қолданады және оны әдетте әр абзац алдына жазады. Бір абзац біткеннен кейін келесі <P> тегі браузерге осы абзацты аяқтап жаңа абзац бастау керектігін көрсетеді.

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

2. HTML тегтер тобы

Барлық HTML тегтерін олардың қызметі мен істеу аймағына қарай келесі топтарға бөлуге болады:

Құжат құрылымын анықтаушы;
Гипермәтін блоктарын безендіру (параграфтар, тізімдер, кестелер, бейнелер) ;
Гипермәтіндік сілтемелер;
Диалог ұйымдастыратын формалар;
Программалардың шақырылуы;

Гипермәтіндік торап құрылымы гипермәтіндік сілтемелермен беріледі. Гипермәтіндік сілтемелер дегеніміз - басқа HTML құжатының немесе INTERNET ақпарат қорының адресі.

Гипермәтіндік сілтемелерді жазу үшін WWW жүйесінде арнайы форма құрылған болатын. Оның атауы - UNIVERSAL RESOURCE LOCATOR. Осыған мысал ретінде төмендегіні келтіруге болады:

Этот текст содержит <A HREF="http://polyn. net. kiae. su/altai/index. html"> гипертекстовую ссылку</A>

Жоғарыда келтірілген мысалда HTML-да якор (anchor) деп аталатын “А” тегі URL түрінде сілтемені жазу үшін “HREF” (HYPERTEXT REFERENCE) атрибутын қолданады. Бұл жоғарыда көрсетілген сілтеме “http” протоколы арқылы “polyn. net. kiae. su” серверінің “altai” директориясында орналасқан “index. html” құжатына көрсетіп тұр.

HTML-дағы гипермәтіндік сілтемелер екі түрге бөлінеді: контексті және жалпы гипермәтіндік сілтемелер. Контексті гипермәтіндік сілтемелер деп құжатқа енгізілген (ішіне енгізілген) сілтемелерді айтамыз. Ал жалпы гипермәтіндік сілтемелерге бүкіл құжатпен байланысы бар және құжаттың кез-келген бөлігін көрсету мүмкіншілігі бар сілтемелер жатады.

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

<HTML> Содержание документа </HTML>

<HTML> контейнер немесе гипермәтіндік құжаттың өзі екі енгізілген контейнерлерден тұрады: құжат басы - <HEAD> және құжат денесі - <BODY>.

Мысал ретінде қарапайым бір құжатты қарастырайық:

<HTML>

<HEAD>

<TITLE>Қарапайым құжат</TITLE>

</HEAD>

<BODY text=#ff BACKGROUND=#f0f0f0 ><H1>Пример простого документа</H1>

<HR>Формы HTML-документов

<UL>

<LI>Классическая

<LI>Фреймовая

</UL>

<HR>

</BODY>

</HTML>

1-сурет. Қарапайым құжат

2. 1. HTML құжатының контейнерлері

Құжатттың әрбір құрама бөліктерінде өзіне тән контейнерлер тобы бар. Құжаттың денесінде қоланылатын контейнерлер құжаттың тақырыбында (басында) немесе FRAMESET (фрейм) контейнерінде қолданылмайды.

Құжаттың HTML-HEAD бас контейнері

Құжат басының атрибуттары болмайды. Құжат басы тегтерінің негізгі міндеттері - бүкіл құжаттың көріну параметрлерін баяндау. Мұндай параметрлерге құжатты көрсету стилін, жалпы базалық гипермәтіндік сілтеме адресін, жалпы гипермәтіндік сілтемелерді, идентификаторды, құжат атын және т. б. жатқызуға болады. Төменде тек қана жиі кездесетін контейнерлер берілген.

TITLE

Ең жиі қолданылатын құжат басы тегі - құжат аты болып табылады. TITLE-дің жазылу тәртібі келесідей:

<ТIТLЕ> Название документа </ТIТLЕ>

TITLE тегінің құрамы құжат аты өрісінде көрсетіледі.

BASE

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

<BASE HREF="http://polyn. net. kiae. su/>

онда гипермәтіндік сілтеме түрі:

<A HREF="/altai/index. html">

келесі түрге дейін кеңейтіледі:

<A HREF=”http://polyn. net. kiae. su/altai/index. html”>

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

<IMG SRC="/gif/test. gif">

онда ол келесі адрес бойынша ізделінеді:

<IMG SRC=' http://polyn. net. kiae. su/gif/test. gif'>

BASE тегі құрамы қолданушы интерфейсімен тура көрсетілмейді.

ISINDEX

HTML құжатын басты сөздер бойынша іздеу мүмкіншілігі құжат басы ISINDEX тегімен анықталады. Бұл тег HTML тілінің алғашқы версияларында ешқандай қосымша атрибуттары болмаған. Егер сервер басты сөздер боынша сұрау істесе, онда ол автоматты түрде құжат басына ISINDEX тегін қоятын. Басты сөздер тізімін клиент құжат адресіне “?” символы болған жағдайда іздеуіш қызметін атқаратын сервер HTML тілінің жаңа версияларында сұрауыш өңдейтін программаны көрсетуге және “SEARCH ISINDEX” стандартымен бірге фразаны беріге болады:

<ISINDEX HREF= "http://polyn. net. kiae. su/cgi-bin/search" PROMPT="Enter Keywords:">

Көрсетілген мысалда HREF атрибуты сұрауыш өңдейтін программа адресін анықтайды, ал PROMPT атрибуты - шақыру мазмұнын.

2. 2. META

META тегі HTML спецификациясында жоқ конструкцияларды құжат басында анықтауға арналған. Үш атрибуты бар: NAME, CONTENT, HTTP-EQUIV. Бұл тегтің күрделілігі - бұл тег арқылы енгізілетін конструкцияны интерпретациялау үшін сервердің немесе қолданушы интерфейстің конструкцияны қолдана білу және шифрын оқи білу мүмкіншілігі болуы қажет. Мұндай жұмыс түрі үшін программа SGML конструкцияларын интерпретациялауы қажет. Бірақ ол ешбір интерфейсті программада қамтылмаған. Практика жүзінде бұл тегті тек құжаттың басына HTTP-EQUIV атрибуты арқылы анықталған HTTP ақпараттар протоколы бойынша енгізу арқылы ғана жүзеге асыруға болады. Ол келесі түрде болады:

<META HTTP-EQUIV="Keywords" CONTENT="Plasma, Nuclear Physics">

Мұндай қолданымнан соң HTTP пакетінің басына келесі қатарлар қосылады: Keywords: Plasma, Nuclear, Physics. Мысалға, бұл почта арқылы жіберу кезінде өте ыңғайлы.

META контейнерінің ең тиімді қолданылымын демонстрациялық роликтерді құру үшін пайдаланады. Мұндай жағдайда көрсетілетін беттің өзгеруі Refresh (яғни, құжат өңделу уақытында) параметрінде құрылады. Құжат басына META контейнерінің келесі түрі жазылады:

<META HTTP-EQUIV="Refresh": CONTENT=“0, URL=next. html”>

бұл құжат басында шығатын HTTP протоколының хабарламасымен бірдей болып табылады. Ол келесі түрдегідей болады:

Refresh = 0; URL=next. html <LF>

Бұл негізінен құжаттың браузер қосылғаннан кейін ауысқандығын білдіреді. Сонымен қатар жаңа құжат ретінде URL параметріндегі құжат қолданылады.

2. 3. Міндетті тегтер

Міндетті тегтер қатарына жоғарыда айтылып кеткен <HTML>, <HEAD>, <TITLE>, <P> тегтері жатады. Сонымен қатар айта кететін тегтердің бірі - <Hi> тегі (мұндағы і=1. . 6) . Бұл тег тақырыптың алты түрлі жағдайын көрсетеді. Ең бірінші түрі - ең ірісі (үлкені), ал алтыншысы, әрине, ең кішісі болып келеді. Мысал ретінде:

<html>

<head>

<title>МЫСАЛ 2</title>

</head>

</body>

</html>

2-сурет. Тақырып көлемі түрлері

2. 4. Сыңарсыз тегтер

Сыңарсыз тегтер HTML тілінің екі негізгі тәртібіне бағынбайтындар: біреулері жабушы тегтерді қажет етпейді, ал кейбіреулері (&-үлестірулері деп аталатын) тек қана кіші әріптермен жазылуы керек.

<BR>

Бұл белгі абзацты бұзбай, жаңа жолдан бастау қажет болғанда қолданылады. Әсіресе өлең шумақтарын жазғанда ыңғайлы.

<html>

<head>

<title>МЫСАЛ 3</title>

</head>

<body>

<P><b>Однажды в студеную зимнюю пору<BR>

Сижу за решеткой в темнице сырой. <BR>

Гляжу - поднимается медленно в гору<BR>

Вскормленный в неволе орел молодой. </P>

<P>И шествуя важно, в спокойствии чинном, <BR>

Мой грустный товарищ, махая крылом, <BR>

В больших сапогах, в полушубке овчинном, <BR>

Кровавую пищу клюет под окном. </P>

</body> </html>

3-сурет. Жаңа жол және абзац.

<HR>

Бұл тег көлденең сызықты сызғанда қолданылады. Тег қосымша SIZE (сызық қалыңдығын пикселмен анықтайды) және WIDTH (сызық ұзындығын пикселмен немесе экран бетіне шаққандағы пайыз бойынша анықтайды) атрибуттарын қабылдайды. Келесі мысалда кейбір сызықтар түрі көрсетілген:

<title>МЫСАЛ 4</title></head><body>

<H1>Коллекция горизонтальных линий</H1>

</body> </html>

4-сурет. Сызық түрлері

&- үлестірулері

“<” және “>” символдарын браузер HTML тегтерінің басы мен соңын көрсететіндіктен мынадай сұрақ туындайды: мұндай символдарды экранда қалай көрсетуге болады? HTML-да бұл &-үлестірулер көмегімен жасалады. Оларды тағы да символдық объектілер немесе эскейп-үлестірулер деп те атайды. “<” символын браузер мәтін арасында < (less than ағылшын сөздерінің алғашқы әріптерінен алынған) үлестіруі кездескенде көрсетеді. “>” символын > арқылы (greater than ағлшын сөздерінің алғашқы әріптері), “&” символын & арқылы, ал (“) қос тырнақшаны " арқылы экран бетінде көрсетуге болады.

Ескерту: үтір-нүкте (; ) символы міндетті түрде &-үлестірулерінен кейін қойылып отырылуы керек және бұл үлестірулер кіші әріппен жазылуы керек.

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

Түсініктемелер

Браузер <!-және --> арасына алынған мәтіндерді елемейді. Бұл белгілер ТҮСІНІКТЕМЕЛЕР жазу үшін арналған. Мысалы: