Информатика: HTML

HTML - СКРИПТА

За оние кои сакаат нешто повеќе да знаат HTML

HTML - ПРЕЗЕНТАЦИИ

Tutorial

HTML Turorial - W3Schools

HTML документите всушност претставуваат едноставни текстуални датотеки (ASCII) во кои се наоѓа текст надополнет со тагови.

Таговите кои ги користиме во HTML можеме да ги класифицираме во три основни групи:

1. Тагови што користат мета информација за Вашиот документ. Мета информацијата, на пример, насловот во почетната секција на Вашиот документ, не влијае не изгледот на документот. Таа се користи од различни Веб алатки, како на пример, машините за пребарување, кои го прегледуваат насловот за да разберат за што станува збор во Вашиот документ.

2. Тагови што ги форматираат симболите во Вашиот текст. Овие тагови не прават ништо друго, освен што го менуваат начинот на изглед на Вашиот текст, кога пребарувачот го покажува на екранот <B>, </B> и <I>, </I>

3. Тагови за врска. Овие тагови го поврзуваат корисникот со различни видови информации или со други документи

Глобален изглед на еден HTML документ.

<html>

<head>

<title>Насловот на вашата страница </title>

< /head>

< body>

Овде го поставувате вашиот html документ.

< /body>

< /html>

Елементи и Aтрибути

HTML документите целосно се изградени од HTML елементи кои, во својот најопшт облик имаат три компоненти:

пар од елементи – tag-ови, почетен и краен tag;
некои елементи атрибути во рамки на почетниот tag; и конечно,
било каква текстуална и графичка содржина помеѓу почетниот и краjниот tag.

Оттука општата форма на еден HTML елемент е

<tagname> Content goes here... </tagname> ,

доколку има атрибути

<tag attribute1=”value1” attribute2=”value2”> content to be rendered</tag>

Едноставни примери

Пример 1

< html>
< head>
< title> HTML < / title>
< /head>
< body>
< p> Eden obicen tekst < /p>
< /body>
< /html>

Пример 2

< html>
< head>
< title> Eden html primer < / title>
< body>
< h1> HTML < /h1>
< p> Vo svetot na html ov e primer za eden paragraph. Go narekuvaat I pasus . < /p>
< p> Ova e drug paragraph < /p>
< ! – Go zavrsivme nasiot prv primer -- >
< /body>
< /html>

Внесете ја содржината на овие HTML документи
Зачувајте ги како kako htm документи
Употребете некој browser за преглед на датотеките
Објаснете ги изворните кодови во примерите

Што ќе се прикаже со следниот код

< html>

< head>

< title>Mojata web strana < /title>

< /head>

< body bgcolor="&ffff00" text="#000000" >

< h1>Moja prva Web strana< /h1>

< hr>

< b>Avtor:< /b>

Vaseto ime i prezime

< /body>

< /html>

3 Што ќе се прикаже со следните кодови. Објаснете ги таговите !

<!DOCTYPE html>

<title>My First Page</title>

</head>

<h1>Hello World</h1>

<h2>Hello World</h2>

<h3>Hello World</h3>

<h4>Hello World</h4>

<h5>Hello World</h5>

<h6>Hello World</h6>

</body>

</html>

Вметнување линија

За вметнување на хоризонтална линија, што претставува наједноставниот графички елемент поддржан од HTML стандардот, се користи тагот <hr>. Овој таг вклучува повеќе атрибути преку кои се контролира изгледот на линијата:

Атрибут	Функција
size	регулирање на дебелина на линијата во точки
width	контрола на дебелината на линијата
align	порамнување на линијата
noshade	исклучување на 3-Д приказ

<hr color =" blue" width=40% size=25>

Линкови - Anchor Tag

Линковите се дефинирани со тагот <a>. Негов основен атрибут e атрибутот href, кој служи за специфизирање на адресата кон која покажува врската. Ако сакаме, на пример, да дефинираме линк до страницата дефинирана во датотеката "primer1.html", тогаш го пишуваме следново:

<a href="primer1.html">stranica na primer1</a>.

Текстот помеѓу таговите <a> и </a> се користи како натпис (наслов) за линкот.

За поврзување со страница која припаѓа на друг Веб сајт потребно е да се наведе неговата комплетна Веб адреса (позната уште како URL (униформна локација на ресурсите) адреса). Така на пример, ако сакаме да поставиме линк до сајтот на Институтот за информатика, тогаш пишуваме:

<a href="http://ednevnik.edu.mk"> elektronski dnevnik </a>

Исто така можете да ја претворите сликата во хипертекстуален линк. На пример, ако сакате со кликнување врз логото на Институтот да пристапите на почетната страница, тогаш пишуваме:

<a href="/"><img src="logoto.gif" alt="Почетна страница "></a>

Вметнување слика

За вметнување на слика во HTML документ се користи тагот <img>. Ако во истиот именик каде што се наоѓа HTML документот имаме слика, на пример, зачувана под името "slika1.jpg", тогаш истата ја вметнуваме во документот на следниов начин:

<img src="slika1.jpg" width="200" height="150">

Притоа ги специфизираме и нејзините димензии: широчина и височина.

Ако сликата не се наоѓа во спомнатиот именик, тогаш на атрибутот src мора да му ја специфизираме комплетна адреса на сликата.

Покрај атрибутот src, може да го користиме и атрибутот alt, кој дава краток опис на сликата.

<img src="slika1.jpg" width="200" height="150" alt="Слика за матурска">

Ако пак сакаме да специфизираме одредена слика, на пример логото на Yahoo, како врска (линк), тогаш тагот <img> го поставуваме меѓу таговите <a> и</a>:

<a href=”yahoo.com”><img=”yahoo.gif”>Yahoo именик</a>

Листи

Нумерирани или подредени ( numbered list или ordered list).

За креирање на подредени нумерирани листи се користи тагот <OL>. Секоја ставка во листата се дефинира со помош на <LI> таг (list item) овој таг не бара задолжителен завршен (затворен )таг)

<html>

<head>

<title>Numerirana lista</title>

</head>

<body>

<ol>

<li>Istrazuvanje

<li>Istorija na HTML

<li>Struktura na HTML

<li>Geogebra

</ol>

</body>

</html>

Дали го добивте следното :

1. Istrazuvanje

2. Istorija na HTML

3. Struktura na HTML-

4. Geogebra

Доколку наместо <ol > напишеме < ol type =”a” >, што ќе се добие ????

Ненумерирани листи или листи со точки ( bulletted list или unordered list),

Се креираат со помош на <ul>таг. Секоја ставка започнува со <li>
Креирај листа , користејќи <ul>
Што ќе се добие по реализацијата на примерот?
<ul>
<li>Првиот елемент од листата </li>
<li>Вториот елемент од листата</li>
<li>Третиот елемент од листата</li>
</ul>
Дали има потреба од задолжително користење на затворениот таг </li> ?

Кодна страна на HTML документ

Една од најважните намени на тагот e дефинирање на кодна страна на документот. Со помош на овој податок, web читачот може правилно да го протолкува кодирањето на текстот на страната.
Заради различни национални писма и нивните специфини знаци со текот на годините се развивале разни стандарди за меморирање на текст.

За дефинирање на кодна страна користиме параметар charset .

< meta charset="[kodna strana]" />

kodni strani utf-8, US-ASCII , windows-1250....

Препорака !!!! Користи utf-8 кодна страна < meta charset="utf-8" />

веб терминологија

Нови поими: веб-страница (web page), веб локација или веб сајт (web site),

хиперлинк (Hyperlink), хипертекст (Hypertext), домашна страница (Home page), навигација, публикување, хостирање, URL (Uniform Resource Locator).

Веб-страница (web pages) – документите кои ги разгледуваме на Интернет се нарекуваат веб-страници. Веб-страница е нешто како страница во книга, но таа освен текст и слики, може да содржи и анимации и други објекти.
Веб документите имаат наставка htm или html.

Веб-сајт (web site) – множеството страници кои се меѓусебно поврзани и сочинуваат целина се нарекува веб-сајт. Сајт е англиски збор и значи „место, локација“, па кога ќе речеме веб-сајт, мислиме на локација на Интернет на која се наоѓаат веб-страниците.

Домашна страница (home page) – страницата која се отвара прва кога ќе посетиш некој сајт, обично ги содржи сите линкови до другите страници на сајтот.
Домашната страница на сајтот е исто што и насловната страница во весник или содржината во некоја книга.

Хиперлинк (hyperlink) или само линк (link) - врската што овозможува движење од една до друга веб страница . Линк може да биде текст, слика или некој друг објект на веб-страницата.

вижењето меѓу страниците на некој сајт се нарекува навигација.

Публикување и хостирање
Откако ќе се направи некој сајт, за да може да биде достапен за сите корисници на Интернет тој треба да се постави, односно да се публикува на некој од серверите на Интернет. Поставувањето сајт на серверот се нарекува хостирање.

URL-адреса

Секој веб-сајт и секоја веб-страница имаат единствена адреса, наречена URL-адреса (Uniform Resource Locator). URL-адресата се состои од неколку делови.

На пример, адресата http://www.schools.edu.mk е составена од следниве делови:
http:// − име на протоколот (правилото) за пренос на податоци;
www − локација на Интернет, во случајов тоа е World WideWeb;
schools − веб-серверот е на организацијата schools;
edu − наставка за областа на дејствување, во случајов тоа е образование;
mk − код за државата, во случајов тоа е Македонија.

Вообичаени наставки за областа на дејствување (домени) се:

com (commercial) − комерцијални организации; org (organisation) − непрофитни организации; edu (education) − образовни институции; gov (government) − владини институции; mil (military) − воени институции; net (network) − мрежни компании.

Некои кодови за држави: fr − за Франција, uk − за Велика британија, us − за САД.

страна 22

https://www.mf.ukim.edu.mk/sites/default/files/files/SKRIPTA%20WEB%20DIZAJN.pdf

WWW или скратено Веб (Web) е еден од интернет-сервисите кои се користи за прикажување на веб-страници преку HTTP-протоколот.

Веб (Web) е колекција од голем број веб-локации (web site) зачувани на милиони компјутери поврзани на интернет. Секоја веб-локација се состои од една или повеќе веб-страници (web page) кои најчесто се зачувани на ист сервер и меѓусебно се поврзани преку хиперврски. Домашна или насловна страница (Home page) е почетната страница на веб-локацијата која дава информации за содржината на локацијата и овозможува поминување на други веб-страници во локацијата.

Веб-сервер (Web server) е компјутер кој е поврзан на интернет и има соодветен софтвер за испорака на содржините на веб-страниците.

Секоја веб-страница може да содржи хиперврски до други страници кои можат да бидат зачувани на ист или на друг компјутер. Со кликнување на хиперврска, корисникот поминува на друга веб-страница. Ваков концепт на страници кои содржат врски до други страници се нарекува хипертекст. Значи, веб-страница е HTML-документ кој овозможува прикажување на текст и хиперврски (hyperlinks). На веб-страница, освен текстот и хиперврските, можат да се прикажат мултимедиски елементи како што се сликите, анимациите, звукот и сл.

Хипертекст е колекција од страници документи поврзани со хиперврски (линкови) кои се вметнати во страниците. За разлика од обичниот текст кој се чита линеарно, хипертекстот се чита со следење на хиперврска.

Прелистувачот мора да го препознае и разбере форматот на веб-страницата за да може да ја прикаже нејзината содржина. За да се овозможи сите пребарувачи да ги препознаваат сите страници, веб-страниците се пишуваат во стандарден јазик кој се нарекува HTML.

Повеќето веб-локации не содржат само HTML-страници. Тие можат да содржат, на пр. документи во PDF-формат, слики, музика, видеозаписи и уште многу содржини во различни формати. Прелистувачот мора да биде во состојба да ги препознаеи правилно да ги интерпретира сите овие формати.

Посложените веб-локации содржат бази со податоци и скрипти. Тие користат веб-апликации напишани на соодветен програмски јазик (PHP, ASP, JSP…) или на некој скриптен јазик (JavaScript или VBScript).

Забелешка: Често изразот веб-страница се користи за двата поима: веб-страница (web page) и веб-локација (web site).

Структура на веб-страници

Сите веб-страници се организирани околу домашната веб-страница која функционира како влез на веб-локацијата.

Структурата на веб-страниците одредува распоред и начин на поврзување на страниците во локацијата. Притоа, страниците можат да бидат зачувани на различни сервери. Структурата на поврзаните веб-страници може да биде едноставна, но и многу сложена. Тоа, главно, зависи од намената на веб-локацијата и од содржината на веб-страниците.

Веб-страниците можат да бидат организирани на два главни начини и нивните варијанти: линеарно и хиерархиски.

Кај линеарната организација страниците се посетуваат една по друга со секвенцијален редослед. Од една страница може да се премине на следната или на претходната страница.

Кај хиерархиската организација се поаѓа од почетната страница која се наоѓа на врвот и од неа се преминува на страниците кои се на пониско ниво. Од секое ниво може да се помине само на пониско ниво.

Најчестата форма на организација е мешовитата хиерархиска структура која во основа има хиерархиска структура само што е можно преминување од секоја страница на која било друга страница.

Типови на веб-страници

Веб-страниците можат да се поделат според неколку критериуми. Според намената веб-локациите можат да бидат: лични, комерцијални, информативни, за забава, блогови, форуми, социјални мрежи итн. Според технологија на изработка тие можат да бидат: HTML, XHTML, Flash итн. Најзначајната поделба на веб-страниците е според интерактивноста со посетителите. Според оваа поделба, веб-страниците можат да бидат статички и динамички.

Статички веб-страници

Статичките веб-страници содржат HTML-код кој овозможува текстот и мултимедијалните содржини на страницата да се прикажат на одреден начин. Тие можат да имаат анимации, но немаат интеракција со посетителот – посетителот може само да ја прегледа нивната содржина. Содржината на ваквите веб-страници е непроменлива, т.е. на сите посетители им се испорачуваат исти страници кои ги подготвиле авторите. HTML-кодот е напишан пред страницата да се постави на сервер и секоја промена во содржината мора да се направи рачно.

Статичките веб-страници се наоѓаат на веб-сервер, а посетителите им пристапуваат преку нивниот прелистувач. Откако ќе го прими HTML-документот, прелистувачот ќе утврди кои уште датотеки му недостасуваат, ќе ги побара тие датотеки и содржината ќе ја испорача на посетителот. Така, на пр., се прикажуваат слики на веб-страниците.

Испорачување на статичка веб-страница

1. Авторот креира веб-страница која се состои од HTML-код и ја поставува на веб-сервер. 2. Корисникот побарува да види веб-страница (со кликнување на линк или пишување на URL- адреса). Барањето се проследува од клиентот (прелистувачот) до серверот. 3. Веб-серверот ја пронаоѓа страницата. 4. Веб-серверот ја праќа страницата до прелистувачот. 5. Прелистувачот го обработува добиениот HTML-код и прикажува форматирана страница со сите елементи (слики, линкови, табели…).

Статичките веб-страници се користат за правење на прирачници, опишување на работата на некоја организација со цел за рекламирање итн. Тие можат да се изработат и со посебни програми кои наликуваат на програмите за уредување на текст (WYSIWYG-едитори – what you see is what you get), па голем број корисници лесно можат да ги направат. Меѓутоа, проблемот настанува кога често треба да се менуваат содржините на веб-страниците или кога на една веб-локација работат повеќе автори.

Статичките веб-страници имаат URL адреси како на пр.:

http://www.pagetutor.com/html_tutor/index.html.

Кај статичките веб-страници домашната веб-страница има име index.html или index.htm.

Динамички веб-страници

Денес веб-страниците не се чуваат во форма во која се испорачуваат до посетителот. Натписите и другите податоци се чуваат во бази на податоци, а на посетителот му се испорачува HTML-документ кој го креираат програми кои работат на серверот во моментот на добивање на барањето. Ваквите веб-страници се нарекуваат динамички веб-страници.

Испорачување на динамичка веб-страница

1. Авторот креира веб-страница која се состои од наредби во некој програмски јазик и ја поставува на веб-сервер. 2. Корисникот побарува да ја види страницата. Барањето се проследува од клиентор (прелистувачот) до веб-серверот на кој се наоѓа бараната страница. 3. Веб-серверот ја пронаоѓа динамичката веб-страница. 4. Веб-серверот го извршува програмскиот код и креира HTML-код. 5. Веб-серверот преку Интернет праќа генериран HTML-код до прелистувачот. 6. На крајот прелистувачот го обработува добиениот HTML-код и ја прикажува страницата со сите лементи.

Динамичките веб-страници овозможуваат интеракција со посетителите, се собираат податоци за посетителите и за нивните интересирања, се овозможува или оневозможува пристап до одредени делови на локацијата на одредени категории на посетители, автоматски се праќаат известувања и вести на посетителите кои тоа го сакаат и сл.

За потребите на креирање на динамичките веб-страници се развиени посебни програмски скрипт јазици (на пр. PHP или ASP) и алати (на пр. CGI script, Java script, Active X). Делови на код напишани на овие јазици се вклучуваат во HTML-страница. Нивниот код се извршува на серверот и служи за поврзување со базата на податоци која исто така се наоѓа на серверот. Податоците по потреба се повикуваат од базата и според нив се креира веб-страница која се праќа до прелистувачот на посетителот.

Динамичката веб-страница се препознава по синтаксата на URL-адресата на страницата, на пр.:

http://www.ukim.edu.mk/mk_content.php?meni=41&glavno=41

http://www.youtube.com/watch?v=v4oN4DuR7YU

Во URL-адресата на динамичките веб-страници се наоѓаат знаците “?” и “=”.

Кај динамичките веб-страници адресата на домашната веб-страница е index. php. Наместо наставката .php може да се појават и наставките .asp, .jsp и др.

http://poincare.matf.bg.ac.rs/~jelenagr/4d/index.html