Код на шаблон за страница. Со широка рамка. Изборни ознаки во HTML5
Лекцијата „Како да креирате HTML страница“ е посветена на распоредот на наједноставната веб-страница. Ќе научите како правилно да зачувате HTML-датотека, да го поставите потребното кодирање за правилно прикажување на страницата HTML во прелистувачот и да поставувате текстови, списоци и слики на веб-страница.
Откако ќе ја проучувате оваа лекција, веќе ќе научите како да ја креирате првата веб-страница, како на Слика 1.
Слика 1
1. Структурата на html документот
html датотеките имаат наставка .htmили .html.
Обично ознаките се спаруваат: ознаки за почеток и крај. Почетна -<>, конечна, на пример
и
Се нарекува и ознаката за пар контејнер .
Некои ознаки немаат задолжителна ознака за пар, таквата ознака се нарекува сингл
. Таквата ознака се затвора со пишување десна коса црта пред аголната заграда за затворање, на пример
Структурата на html документот изгледа вака (слика 2).
Слика 2
Објаснувања за листата на Слика 2
Во првата линија, конструкцијата DOCTYPE значи еден од стандардите за распоред на веб-страници.
Помеѓу ознаките
и
содржи заглавие. Тоа го вклучува дизајнот
Слика 3
Снимање значи кирилично кодирање така што буквите се прикажуваат правилно во прелистувачот. Ако кодирањето не е одредено, фонтовите понекогаш може да се прикажат на следниов начин (Слика 4)
Слика 4
Истата страница по вметнувањето на кодирањето (слика 5)
Слика 5
Забелешка: наместо кодирање charset = "windows-1251"можете да користите кодирање charset=" utf -8" , што ви овозможува да креирате повеќејазични страници, бидејќи во него се присутни сите симболи што постојат во светот. Во овој случај, во Бележник++ е потребно пред распоред и зачувувањеhtml-изберете датотека од горното мени Кодирања - Кодирај во UTF -8 без БОМ (UTF-8 без BOM)
Овие информации се доволни за да се создаде првиот документ.
Вежбајте 1
1. Направете папка, именувајте ја мојоткуќа. Имињата на сите папки и датотеки мора да бидат креирани со латински мали букви, Не може да се користат руски имиња. Чувајте ги имињата кратки и значајни.
Ќе го напишеме кодот на веб-страницата во Notepad. Подобро е да не се користи Notepad што доаѓа со Windows, туку „понапреден“, како што е Notepad ++. Дистрибуција Notepad++е во папката cd/distr.
2. Отворете Notepad++. Проверете дали ANSI кодирањето е поставено, за ова, во менито во ставката Кодирања, поставете ја позицијата Кодирајте во ANSI.
3. Внесете го во Notepad++ кодот од списокот на Слика 2.
Кодот од списокот на слика 2 ќе ни служи како шаблон во иднина, така што секој пат кога не ја пишуваме структурата на html документот. Од тука копирајте ја конструкцијата DOCTYPE (нема потреба да ја меморирате и меморирате).
4. Зачувајте ја датотеката со име шаблон.htmlво папка мојата куќа, додека се на терен Тип на датотекаинсталирај Сите видови(Слика 6), инаку вашата веб-страница нема да се отвори во прелистувачот подоцна.
Слика 6
5. По зачувувањето, трчајте шема. htmlдвоен клик. Како резултат на тоа, вашата датотека ќе изгледа вака (Слика 7).
Слика 7
Ако не го добиете резултатот, како на сликата погоре, тогаш најверојатно има грешка во кодот. Еден погрешен знак е доволен и веб-страницата нема да се прикаже правилно. Повторно проверете го кодот со списокот на Слика 2.
6. Внатре во папка мојата куќакреирајте папка јавен_ html. Ова име е обично папката во која се чува страницата кога е поставена на вистински хостинг (оваа папка може да се нарече и www).
7. Зачувајте ја датотеката шема. htmlво папка јавен_ htmlпод ново име главен. html.
8. Од папка ЦД/ html_css_1отворете ја датотеката text_main.txtво Notepad++ и исто така отворете ја датотеката зачувана под името главен. html
9. Копирајте го целиот текст од датотеката text_main.txtи залепете во датотека главен. htmlнаместо фразата „Содржина на веб-страница“. Во ознака
10. Зачувајте ги промените и погледнете ја датотеката главен. htmlво прелистувачот. Ќе видите неформатиран текст. Дури и прекините на линиите што се во изворниот текст, прелистувачот не (Слика 8).
Слика 8
2. Форматирањевеб- означена страницаHTML
Овој туторијал, Како да креирате HTML страница, ги опфаќа основните ознаки што се користат за обележување на веб-страница.
Ознаките се користат за форматирање на текстот на веб-страница. Подетален список на ознаки може да се најде во папката ЦД/ДиректориумHTMLво именикот html401_en.chm(во горната ставка од менито елементи).
Ајде да погледнеме некои од ознаките.
Елементи ч 1, ч 2, ч 3, ч 4, ч 5, ч 6
Структурирањето на телото на документот се врши внатре во елементот < тело> со помош на заглавија поставени од елементите h1, h2, h3, h4, h5, h6.
Елементите на насловот се спарени, па затоа мора да имаат отвор < ч1> и затворање ч1> ознаки.
HTML има шест нивоа на заглавија: h1 (највисоко), h2, h3, h4, h5 и h6 (најдолу). Функцијата на елементите за наслов е слична на вообичаените стилови на наслови во уредувачите на текст.
Дејството на овие шест ознаки е прикажано на сликите подолу. На една слика извор(Слика 9), од друга - погледот во прелистувачот (Слика 10).
Слика 9
Слика 10
Поделба на текст во параграфи
Означете < стр> поставува почеток на параграф и вметнува празно место над параграфот - алинеја за да се оддели овој став од претходниот.
Присилно прекинување на линијата
Означете
ви овозможува да го завиткате остатокот од текстот на ставот во следниот ред. Ова е неспарена ознака и за разлика од ознаката за пасуси, не го зголемува растојанието помеѓу редовите.
Вежбајте 2
1. Форматирајте го насловот „Каталог за архитектонски дизајн“ со ознаки
и
.2. Форматирајте го насловот „Проекти за вашиот иден дом“ со ознаки
и
.3. Форматирајте ги насловите „Дизајни на куќи“ и „Куќни области“ со ознаки
и
.4. Поделете го текстот на телото во параграфи користејќи ја ознаката
Внатре во првите два параграфи, користете ја ознаката
да се прекине линија. Како резултат на тоа, вашиот код треба да изгледа вака (Слика 11).
5. Погледнете го резултатот во прелистувач.
Слика 11
Списоци со точки и нумерирани
Користејќи HTML алатки, можете да креирате какви било списоци: нумерирани (нумерички и азбучни) и означени со точки различни типовимаркери.
Означете < ул>…ул> генерира листа со точки.
Означете < ол>…ол> генерира нумерирана листа.
Одделете го елементот на списокот како во
- , како и во
- Имплементирајте го кодот прикажан на Слика 13 во нова датотека.
- Зачувајте ја датотеката во папка мојата куќапод името листа_ влож. html. Резултатот на сл. 13
- апсолутна;
- роднина.
- внесете ја папката folder_2,
- потоа внесете ја папката folder_1,
- потоа прикачете ја сликата.
- излез од папката_1,
- излез од папката_2,
- прикачи слика.
- излез од папката_1,
- излез од папката_2,
- одете во папката folder_3,
- одете во папката folder_4,
- прикачете слика pic.jpg
- излез од папката_1,
- излез од папката_2,
- излез од папката_3,
- внесете ја папката folder_4,
- прикачете слика pic.jpg.
- шаблон.html
- главен.html
- list_vlozh.html
- внатре во папкамојата куќатреба да има папкајавен_ htmlсо датотеките на идната локација
- седум примери за релативно адресирање и два примери како контрола од практична задача 14
- клучни зборови и опис на страницата;
- линкови до други датотеки (*.css и *.js).
- формирана со ознака <
ли>
.
Вежбајте 3
1. Направете нумериран список под насловот „Куќни проекти“.
2. Направете листа со точки под насловот Куќни области. Вашиот код ќе изгледа вака (Слика 12).
Слика 12
3. Погледнете ја страницата во прелистувач.
Списоците може да се вгнездуваат една во друга користејќи различни маркери.
Пример за вгнездена листа е прикажан на сл. 13
Вежбајте 4
Слика 13. Пример за вгнездена листа
Стилови на фонтови
Означете … - ви овозможува да го прикажете текстот со задебелени букви.
Означете … - ви овозможува да прикажувате текст со закосени букви.
Означете … - прикажува подвлечен текст.
На пример:
Во овој случај, текстот ќе се прикаже задебелен курзив но не подвлечено.
Во овој случај, текстот ќе биде напишан задебелени подвлечени закосени букви .
Претписи и натписи
Означете < под> и под> ви овозможува да го спуштите текстот половина линија под нормалниот текст.
Означете < sup> и sup> ви овозможува да го подигнете текстот половина ред над нормалниот текст. Текстот помеѓу овие ознаки ќе биде прикажан со помал фонт од обичниот текст.
Вежбајте 5
1. Форматирајте го името myhouse.ru со задебелени букви во првиот пасус (слика 14).
Слика 14
2. Форматирајте ја фразата „Повеќе од 95% од проектите“ во вториот пасус со подвлечен курзив (Слика 15).
Слика 15
3. Форматирајте ги натписите каде што се користат квадратни метри (Слика 16).
Слика 16
4. Зачувајте ја датотеката. Погледнете преку прелистувач. Веб-страницата треба да изгледа вака (слика 17).
Слика 17
3. Вметнете слики
Во нашата статија Како да креирате HTML страница, ќе погледнеме како да поставите слики на веб-страница.
Ознаката се користи за вметнување слики. .
Потребниот атрибут за оваа ознака е src(од англискиот извор - извор). Тоа го одредува патот до графичка датотека, чија слика треба да се прикаже на веб-страницата.
За да вметнете слика, користете ја командата 
На пример: "
image1.jpg"
alt="(!LANG:Слика" />
!}
Атрибутот alt е неопходен така што при прегледување на веб-страница во режимот на оневозможени слики, наместо сликата што недостасува, ќе има натпис што е напишан во атрибутот alt. Исто така, се препорачува секогаш да се користат алтернативни текстови, бидејќи пребарувачите ги анализираат како клучни зборови кога бараат слики.
Графичките датотеки можат да бидат во формат jpg, gif, png и нужно во моделот на бојаRGB.
Вежбајте 6
1. По списокот со области на куќи, вметнете слики од проекти за колиби на веб-страницата проект_1.jpgи проект_2.jpgод папка cd/html_css_1 . За да го направите ова, прво копирајте ги овие две слики во папката каде што се наоѓа датотеката main.html. Кодот за вметнување слики ќе изгледа вака (Слика 18).
Слика 18
2. Погледнете го резултатот во прелистувачот (Слика 19).
Слика 19
Во основа принципот на користење ознакиHTMLтреба да биде јасно. Тие се користат според истиот принцип: ако ознаката е ознака за контејнер, тогаш има ознака за отворање и затворање. Ако ознаката е единечна, тогаш нема ознака за затворање, во овој случај десната коса црта е напишана пред аголната заграда за затворање, на пример< бр/>. Без разлика дали ознаката е ознака за контејнер или единечна ознака, секогаш можете да погледнете во спецификацијатаhtml401_ru.chm во делот „елементи“.
4. Обраќање во рамките на страницата
Во нашиот прв туторијал, „Како да креирате HTML страница“, ќе ги истражиме концептите на адресирање во HTML.
Размислете за опции за адресирање кога треба да поставите слики во html датотека што може да се наоѓа во различни папки на страницата.
Постојат два вида на адресирање:
Апсолутно обраќање (со користење на имиња на компјутерски дискови) не се користи(слика 20)
Слика 20
користени релативно адресирање - адресирање во документ или збирка документи на истиот сервер. За да се повикате на датотека во рамките на страницата, треба да му кажете на прелистувачот која патека треба да ја преземе за да стигне до саканата датотека.
|
Пример 1 Сликата се наоѓа во истата папка како и HTML документот (Слика 21). Односно, сликата и HTML-датотеката се на исто ниво во датотечниот систем, а HTML документот може веднаш да ја прикачи сликата. Во овој случај, вметнувањето слика во веб-страница ќе изгледа вака.
Слика 21 Практична задача7 Имплементирајте го примерот 1 (создадете папка, датотека doc.html, сликајте каква било слика). Слика |
|
Пример 2 Слика слика. jpgе во папката папка_1 . HTML документот се наоѓа надвор од folder_1. Оние. во датотечниот систем на страницата, HTML документот се наоѓа едно ниво повисоко од сликата (Слика 22). Треба да го внесете folder_1, а потоа да прикачите слика
Слика 22 Практична задача8 Имплементирајте го примерот 2 (создадете папка, датотека doc.html, сликајте каква било слика). Сликата мора да биде вметната на веб-страницата doc.html. |
|
Пример 3 Слика слика. jpgе во папката папка_1 , кој пак е во папката папка_2 . HTML документот се наоѓа надвор од овие папки (Слика 23). Така, HTML документот е два нивоа повисок од сликата. Неопходно:
Слика 23 Практична задача9 Имплементирајте го примерот 3 (создадете папки, датотека doc.html, сликајте каква било слика). Сликата мора да биде вметната на веб-страницата doc.html. |
|
Пример 4 папка_1 . Сликата е надвор од папката_1. Оние. HTML документот е едно ниво под сликата (Слика 24). Треба да излезете од папката folder_1, а потоа да ја прикачите сликата. Излегувањето од папка е означено со конструкцијата ../ (две точки и коса црта надесно).
Слика 24 Практична задача10 Имплементирајте го примерот 4 (создадете папка, датотека doc.html, сликајте каква било слика). Сликата мора да биде вметната на веб-страницата doc.html. |
|
Пример 5 HTML документот е во папката папка_1 , кој пак се наоѓа во папката папка_2 . Сликата е надвор од овие папки. Така, HTML документот се наоѓа две нивоа пониско од сликата (Слика 25). Неопходно: Бидејќи е неопходно да се излезе двапати, тогаш изградбата ../ се повторува два пати.
Слика 25 Вежбајте 11 Имплементирајте го примерот 5 (создадете папки, датотека doc.html, сликајте каква било слика). Сликата мора да биде вметната на веб-страницата doc.html. |
|
Пример 6 (слика 26) Неопходно:
Слика 26 Вежбајте 12 Имплементирајте го примерот 6 (создадете папки, датотека doc.html, сликајте каква било слика). Слика мора да се вметне во веб-страницата doc.html. |
|
Пример 7 (слика 27) Неопходно: Бидејќи треба да излезете три пати, тогаш изградбата ../ се повторува три пати.
Слика 27 Вежбајте 13 Имплементирајте го примерот 7 (создадете папки, датотека doc.html, сликајте каква било слика). Слика мора да се вметне во веб-страницата doc.html. Така, колку пати треба да излезете, толку пати ја ставаме конструкцијата ../, а ако влеземе, ги наведуваме имињата на папките што се среќаваат на патеката. |
/
>
/
>
/
>
Вежбајте 14
1. Направете html документ и ставете слика во него, така што патеката до сликата е како што следува.
"
../../../../../../folder_1/folder_2/folder_3/image.jpg" /
>
2. Развијте ваш сопствен пример за вметнување слика во html документ за да содржи и излез од папки и внесување до папки. Примерот треба да се разликува од сите горенаведени примери.
Како резултат на оваа тема, треба да ги имате следните датотеки:
Многу јазици се измислени, но HTML е еден од посебните и најбараните јазици. Многу други клучни програмски иницијативи се поврзани со него. Многу станува достапно кога знаењето за јазикот за означување - HyperText Markup Language (HTML) е присутно во умот на развивачот.
Во суштина, нема ништо комплицирано во HTML, и за неколку минути секој човек, најоддалечен од програмирање и Интернет, ќе создаде HTML страница во бележник. Пример што заслужува внимание е едноставноста, навистина достапна за секого.
општ опис
HTML-датотеката е една страница од страницата, иако ова може да се аргументира, но фактот дека една датотека сочинува една страница е јасен за почеток.
HTML-датотеката започнува со заглавие DOCTYPE, што покажува дека типот дадена датотека- HTML. Сите елементи на страницата (ознаки) се означени во аголни загради. Секој пар ("<» и «>") вклучува една HTML ознака. Вообичаено, HTML-таговите се спаруваат, односно за секоја „ознака“ има „/tag“. И двете се затворени во аголни загради. Постојат единечни ознаки, од кои најпопуларниот „br/“ е преминот кон следната линија.
Најголемата ознака во датотеката е самиот HTML, кој содржи само две ознаки: HEAD и BODY. Во првиот, се прават различни описи, наведени се врски до други датотеки потребни на страницата, може да има PHP скриптии JavaScript. Вториот ја снима содржината на страницата. Исто така во форма на ознаки и скрипти.
Едноставна HTML страница
Пример за создавање на таква страница е даден подолу во статијата. Ајде да го разгледаме внимателно.
ГЛАВА дел
Главната цел е општ опис на страницата и вообичаените скрипти, иако второто е прилично релативен концепт. Обично, само две работи се важни овде:
За прикажување на содржината на страницата, содржината на овој дел е само индиректно релевантна, бидејќи покажува дека некаде во други датотеки има правила на CSS за ознаки и скрипти на други јазици.
HTML-страницата има која се прикажува кога посетителот го поместува глувчето над јазичето каде што е отворена страницата. тоа важна точка, бидејќи ја прави страницата многу попристапна, со други зборови, потпишана со читлив текст.
МЕТА ознаките се важни во програмирањето на Интернет воопшто, но кога треба да креирате HTML страница во бележник, непожелно е да го натрупувате примерот со непотребни конструкции.
Ако треба да се пристапи кон скриптирање откако ќе се зацврсти знаењето за HTML, тогаш треба веднаш да се разгледаат Каскадни листови со стилови. CSS-датотеките ги обезбедуваат, особено, правилата за форматирање на HTML тагови.
Оддел ТЕЛО
Всушност, примерокот HTML страница е делот BODY. Ова е местото каде што се содржани сите информации, целата содржина на страницата на страницата. Сите информации се претставени во форма на ознаки и скрипти, како што се вметнување JavaScript код или делови од PHP програми.
Важно е да се разбере дека примерот HTML веб-странициво прелистувачот и истиот пример во уредувач на текст, особено бележник, ова е далеку од истото. Во првиот случај, имаме готов HTML текст во кој се извршуваат сите скрипти. На пример, PHP го разработи својот дел и ги формираше потребните ознаки наместо неговиот код на вистинските места. JavaScript, исто така, ја исполни својата мисија, иако допрва треба да се дискутира посебно.
HTML е тагови, а не скрипти. На крајот на краиштата, прелистувачот ја прикажува само содржината на страницата, само нејзините ознаки. Таму нема PHP код.
JavaScript е во посебна позиција, неговата грижа е да ја опслужува страницата не само во моментот на вчитување (превчитување), туку и во моментите кога страницата е во прелистувачот на посетителот, а тој ја проучува.
Едноставен пример (само делот BODY) е наведен подолу.
И во прелистувачот на посетителот, изгледа вака:
Кодот не прецизираше како треба да изгледаат елементите што ги прикажува прелистувачот. Целиот видлив стајлинг е во правилата на CSS. Во овој случај, во референцираната датотека Mcss/scPhpWordRW.css (видете го примерот на првата HTML страница).
За разлика од HTML, CSS темата е поедноставна, има многу достапни правила и нивниот број е мал, кога за пример за креирање HTML страница не е потребно ништо друго освен бележник. Сè е многу достапно за инстант развој:
Ова покажува колку едноставно е опишана ознаката scLogo_vDoc, описот е таков што ознаката вообичаено ја прикажува сликата vDoc-logo.png, а кога глувчето е над, ја прикажува сликата vDoc-logo-h.png.
Структура на HTML описи
Јазикот не имплицира никаква структура и концептот на синтакса е многу релативен овде. Овде нема променливи, но има многу можности. Основната основа на хипертекстот е дека постои елемент (ознака) кој мора да има име.
Името, во случај на спарена ознака, е составено од вистинското име (tagName) и аголни загради ("<» + tagName +«>"), ако ние зборувамеза почетокот на ознаката, и "“ ако е снимен нејзиниот крај.
Пример за HTML страница која ги опишува атрибутите се наоѓа подолу во текстот.
Ознаката може да има атрибути, во тој случај тие се ставаат со празно место по името на ознаката пред аголната заграда за затворање „>“. Атрибутите, ако ознаката ги има, се пишуваат само на почетокот на ознаката. Содржината на ознаката е она што е помеѓу почетокот на ознаката и неговиот крај.
HTML ви овозможува да опишете блок и вградени елементи. Првите заземаат одредена област во прозорецот на прелистувачот, можат да бидат позиционирани апсолутно, односно на вистинското место во областа за прикажување на страницата HTML и да имаат одредена големина.
Вградените елементи обично се прикажуваат во еден тек, односно како што беа наведени во датотеката со страницата и се прикажуваат на екранот. Приказот на споделениот тек може да биде под влијание кога страницата е вчитана. На поставеноста, видливоста и другите својства на елементите на ниво на блок може да се влијае во секое време преку кодот JavaScript.
Покрај едноставните елементи, HTML нуди да опише табели и форми. Овие елементи се многу барани во „секојдневната градба на веб-страници“.
Опис на табелата: ТАБЕЛА, TR, TD ознаки
Користејќи ја ознаката TABLE, можете да креирате табела, да наведете одреден број TR редови и во секој ред одреден број TD ќелии. За разлика од вообичаената табеларна организација, поради особеностите на HTML обележувањето, табеларната организација е ограничена на оваа декларација, па ако развивачот сака да има правоаголна табела во која бројот на колони во сите редови е ист, тогаш тој мора да го следи ова сам.
Основната позиција на HTML е да прави сè што е наведено, но ништо што не е разбрано. Во некои случаи, бројот на колони во секој ред од табелата не е толку важен, но ако треба да ги споите ќелиите вертикално или хоризонтално, ќе мора да пресметате сè многу внимателно.
Пример за HTML страница која опишува едноставна табела е јасно прикажан во статијата.
Еве табела со големина од три реда по три колони, а во првиот ред наместо ознаката TD се користела ознаката TH, насловот на колоната. Овие две ознаки немаат посебна разлика, но сосема е можно да се користи првата за да се разликува првиот ред од табелата, а во CSS можете да прикачите свој стил на TH, што го разликува од другите TD.
Опис на формуларот: ознаки FORM, INPUT
Формите се најбараниот дел од HTML таговите. Формуларите може да се користат за поднесување информации. Всушност, самата страница е излез на информации, но формата е нејзиниот влез.
Пример за HTML страница која опишува едноставна форма:
Има многу повеќе опции за користење форми, но главните карактеристики се како што следува. Можете да ги наведете полињата за внесување, да им го доделите дизајнот и управувачите за парсирање на корисничкиот влез. Можете да наведете скриени полиња и да пренесувате информации за позадината од страницата. Можете да ги назначите копчињата за пренос на информации, со кликнување на кое започнува процесот на пренесување информации.
Користење на HTML
Познавањето на јазикот на хипертекстот е работа во која било специјализација во областа на програмирањето на Интернет, но ако треба да пишувате програми во PHP или JavaScript, тогаш треба совршено да знаете HTML + CSS.
Јазикот PHP беше назначен во претходниот пример. PHP работи на серверот, така што страницата со оваа форма полета од серверот до прелистувачот со пополнети полиња. Конкретно, функцијата TestOnBlur спомната во ознаката INPUT (управувач со настани onblur) ги прими сите параметри како текстуални полиња.
JavaScript работи во прелистувачот, а за да може копчето да ги испрати податоците назад до серверот да работи правилно, односно конструкцијата: onclick=jQuery("#to").val("cart"), треба да имате идеја не само за тоа што е jQuery, туку и што е #to, val, cart. Поконкретно, треба да ги знаете основните HTML тагови и општи правилапримена на CSS стилови на нив.
Ова е сосема доволно за брзо подобрување на вашите вештини во која било специјализација во областа на програмирање на Интернет.
Здраво драги читатели на блогови. Со оваа статија ќе започнеме да ги учиме основите на јазикот HTML.
Веројатно веќе знаете дека главниот јазик на Интернетот е Јазик за означување на хипертекст (HTML). Во оваа статија ќе ги научиме основните концепти на HTML и ќе научиме како да ги креираме наједноставните WEB страници.
Да почнеме со најважното, да размислиме како функционира самиот Светската мрежа- Интернет. За да добиете веб-страници, креирате датотеки напишани во HTML и ги ставате на веб-сервер. После тоа, секој прелистувач инсталиран на уред со пристап до Интернет, било да е тоа компјутер, телефон или таблет, може да ги пронајде вашите веб-страници.
Веб сервере нормален компјутер со посебен софтверсо пристап до Интернет. Постојано чека барања од прелистувачи за веб-страници, слики, аудио и видео датотеки. Откако доби барање за еден од овие ресурси, серверот го бара и го испраќа до прелистувачот.
Прелистувач- ова е специјална програма, дизајниран за преглед на веб-локации, на пример Internet Explorer. Со вашиот прелистувач, сурфате на интернет со кликнување на врски. Секое такво кликнување предизвикува прелистувачот да поднесе барање за html страницата до веб-серверот, да добие одговор и да ја прикаже страницата во неговиот прозорец. Кога се прикажува страницата, HTML-јазикот влегува во игра, тој му кажува на прелистувачот сè за структурата и содржината на веб-страницата. Со помош на команди - ознаки, HTML му кажува на прелистувачот каде почнуваат параграфите на текстот, кој дел од текстот е насловот и кажува каде да се вметнуваат табели, па дури и слики. И ознаките се зборови во аголни загради, на пример
,
