Код на шаблон за страница. Со широка рамка. Изборни ознаки во 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++е во папката ЦД/област.
2. Отворете Notepad++. Проверете дали е поставено ANSI кодирањето, за да го направите ова во менито во ставката Кодирање, поставете ја позицијата Кодирај во ANSI.
3. Внесете го кодот од списокот на Слика 2 во Notepad++.
Кодот во списокот на Слика 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_ru.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
- spisok_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(од англиски SourCe - извор). Тоа го одредува патот до графичка датотека, чија слика треба да се прикаже на веб-страницата.
За да вметнете слика, користете ја командата 
На пример: "
image1.jpg"
alt="Слика" />
!}
Атрибутот 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 . Сликата се наоѓа надвор од folder_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 страница во Notepad. Пример вреден за внимание, едноставност кој е навистина достапен за секого.
општ опис
HTML-датотеката е една страница од страницата, иако ова може да се расправа, но фактот дека една датотека сочинува една страница е јасен за почеток.
HTML-датотеката започнува со заглавие DOCTYPE, што покажува дека типот на датотека е HTML. Сите елементи на страницата (ознаки) се означени во аголни загради. Секој пар ("<» и «>") вклучува една HTML ознака. Обично HTML таговите доаѓаат во парови, односно за секоја „ознака“ има „/tag“. И двете се затворени во аголни загради. Постојат единечни ознаки, од кои најпопуларна е „br/“ - премин кон следната линија.
Најголемата ознака во датотеката е самиот HTML, кој содржи само две ознаки: HEAD и BODY. Во првиот, се прават различни описи, се наведуваат врски до други датотеки потребни на страницата, кои може да се присутни PHP скриптии JavaScript. Вториот ја снима содржината на страницата. Исто така во форма на ознаки и скрипти.
Едноставна HTML страница
Пример за создавање на таква страница е даден подолу во статијата. Ајде да го погледнеме внимателно.
ГЛАВА дел
Главна цел - општ описстраници и општи скрипти, иако второто е прилично релативен концепт. Вообичаено, овде се придава значајно значење само на две работи:
За прикажување на содржината на страницата, содржината на овој дел е само индиректно важна, бидејќи покажува: некаде во други датотеки има правила CSS за ознаки и скрипти на други јазици.
HTML-страница има онаа што се прикажува кога посетителот ќе го помести глувчето до јазичето каде што е отворена страницата. Ова важна точка, бидејќи ја прави страницата значително попристапна, полесна за кажување, потпишана со читлив текст.
МЕТА ознаките се важни во програмирањето на Интернет воопшто, но кога треба да креирате HTML страница во Notepad, не е препорачливо да го натрупувате примерот со непотребни конструкции.
Ако треба да се пристапи кон скриптирање откако ќе се воспостави познавање на HTML, тогаш треба веднаш да се разгледаат Каскадни листови со стилови. CSS-датотеките содржат, особено, правила за дизајн HTML ознаки.
ТЕЛО дел
Всушност, примерот HTML страница е делот BODY. Ова е местото каде што се содржани сите информации, целата содржина на страницата на страницата. Сите информации се претставени во форма на ознаки и скрипти, на пример вметнување JavaScript код или делови од PHP програми.
Важно е да се разбере дека примерот на веб-страница HTML во прелистувач и истиот пример во уредувач на текст, особено Notepad, не се иста работа. Во првиот случај, имаме готов 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 нуди опис на табели и форми. Овие елементи се многу барани во „секојдневната градба на веб-страници“.
Опис на табелата: ознаки ТАБЕЛА, ТР, ТД
Користејќи ја ознаката 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 и ќе научиме како да креираме едноставни ВЕБ страници.
Да почнеме со најважното, да погледнеме како функционира Светската мрежа- Интернет. За да произведувате веб-страници, креирате датотеки напишани во HTML и ги ставате на веб-сервер. После ова, секој прелистувач инсталиран на уред со пристап до Интернет, било да е тоа компјутер, телефон или таблет, може да ги пронајде вашите веб-страници.
Веб сервер- ова е обичен компјутер со посебен софтверсо пристап до Интернет. Постојано слуша барања од прелистувачи за веб-страници, слики, аудио и видео датотеки. Откако доби барање за еден од овие ресурси, серверот го бара и го испраќа до прелистувачот.
Прелистувач- Ова специјална програма, наменет за прелистување веб-локации, на пример Internet Explorer. Користејќи прелистувач, прелистувате веб-локации со кликнување на врски. Секое такво кликнување предизвикува прелистувачот да поднесе барање за HTML страницата до веб-серверот, да добие одговор и да ја прикаже страницата во неговиот прозорец. Кога се прикажува страницата, јазикот HTML почнува да работи; тој му кажува на прелистувачот сè за структурата и содржината на веб-страницата. Користење на команди - ознаки, HTML му кажува на прелистувачот каде почнуваат параграфите на текстот, кој дел од текстот е наслов и каде да се вметнуваат табели, па дури и слики. И ознаките се зборови во аголни загради, на пример
,
