Vezhbi bro 2._koriste_e_na_fundamentalnite_elementi_vo_html

Вежби по предметот Интернет Технологии

Вежби број 2. Користење на фундаменталните елементи во HTML

Содржина:Основни правила и совети за HTML кодирање ........................................................................................ 3

Користење на фундаменталните елементи во HTML .............................................................................. 4

Параграфи ............................................................................................................................. ................... 4

Групирање преку <div> тагот.............................................................................................................. 5

Заглавја (Headings) .......................................................................................................................... ........ 6

Листи ............................................................................................................................. ........................... 7

Набројани листи .................................................................................................................................. 7

Не‐набројани (bulleted) листи ............................................................................................................ 8

Дефинициски лист............................................................................................................................. .. 8

Линкови.................................................................................................................................................... 9

Текст ............................................................................................................................. ............................ 9

Специјални карактери .......................................................................................................................... 11

Слики ...................................................................................................................................................... 12

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

Со цел да постигнете поголема разбирливост на кодот, слободно користете празенпростор, индентација и нови редови, тоа нема да ви направи никаков проблем прикомпајлирањето.

Користете добро формирана структура, односно внимавајте каде ги отворате таговите икаде ги затворате.

o Пример: Следниов код е погрешен:<p>The last word is <b>bold</p></b>

Точната секвенца би била:<p>The last word is <b>bold</b></p>

Користете коментари колку што можете повеќе, тоа ќе помогне и другите да го разбераткодот, но и вие да знаете што сте сакале да постигнете.

o Пример за коментар:

Структура на HTML кодот во нај основна варијанта во треба да ја има следнава минималнаформа:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

<html>

<head><meta ... meta tags go here ... ><title>title of the page/document goes here</title><LINK rel=“stylesheet” href=“external style sheet name” type=“text/css”><style>... any document specific styles go here ...</style><script>... client-side scripts go here ...</script></head>

<body>... body of document goes here, paragraphs modified byblock elements, characters, words and sentences modified byin line elements ...</body>

</html>

Збогатете го <head> тагот со повеќе информации.o Пример за таг кој кажува дека може да користите латинично множество од

карактери:<meta http-equiv=“Content-Type” content=“text/html; charset=ISO-8859-1”>

Доколку користите кирилични букви користете го следнив таг:<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

o Пример за таг кој дефинира временска секвенца за префрлување кон друга адреса(модерен пример е прикажување на реклама во првите 5‐10 секунди, а потоапрефрлување кон побаруваниот сајт).<meta http-equiv="refresh" content="3,http://www.eurm.edu.mk/" />

o Може да дефинирате дали конкретната страна да биде кеширана, со што би сезаштитиле корисникот да не добива стари информации, во случај страната честопати да ја менува својата содржина.<meta http-equiv="pragma" content="no-cache" />

Или

<meta http-equiv=“expires” content=“0”>o Користете информации кои ќе помогнат за правилно категоризирање на вашата

веб страна: клучни зборови и опис.Пример:

<meta name=“description” content=“The latest movie news”><meta name=“keywords” content=“movie, movies, production, genre, sci fi,horror, drama, comedy, anima, manga, news, chat, bbs, discuss, review,recent”>

Користење на фундаменталните елементи во HTMLВо овој дел ќе се запознаеме со повеќето фундаментални елементи кои ќе ни помогнат дакреираме веб страна.

ПараграфиВо HTML параграфите се одделени со специјалниот таг <p>.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Параграфи</title></head>

<body><p>Oва е дел од вежба број 1</p>

<p> World Wide Web (WWW) во наједноставен случај претставува мрежа од компјутери коимеѓусебно преку Интернетот разменуваат текст, слики и мултимедијални информации.Компјутерите кои овозможуваат Веб страните да бидат достапни се наречени Веб сервери,а пак пристапот до тие веб страни може да се овозможи преку било кој компјутер на којимаме инсталирано веб пребарувач- веб клиент.</p><p> Споменатите ентитети зборуваат на заеднички јазик, наречен HyperText TransferProtocol (HTTP). Во суштина HTTP претставува множество од правила и процедури нареченипроцедури. </p>

</body></html>

Обидете се да го порамните текстот од десна страна или пак да го центрирате.

Често пати се јавува и потребата следната реченица да се напише во нов ред. За таа цел, наместода користите параграфи, можете да го користите и тагот <br />.

Понекогаш се појавува потребата текстот или одредена фраза секогаш да биде во еден ред. За таацел се користи &nbsp (nonbreaking spaces).

<p>A good example of this technique appears in the movie “12 Angry Men.”</p>

Доколку сакате одреден дел да го одделите со хоризонтална линија тогаш користете го тагот<hr />.

Групирање преку <div> таготПретходно се запознавме со параграфите и увидовме начин на форматирање на истите. Но,замислете дека сакате одредена секција да ја издвоите, односно да поставите одреденаиндентација, да ја вметнете во рамка и сл. За таа цел можете да го користите тагот <div>.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Параграфи</title></head>

<body>

<div style="border:groove"><p>Oва е дел од вежба број 1</p></div>

<div style="background:#9FF"><p> World Wide Web (WWW) во наједноставен случај претставува мрежа од компјутери коимеѓусебно преку Интернетот разменуваат текст, слики и мултимедијални информации.Компјутерите кои овозможуваат Веб страните да бидат достапни се наречени Веб сервери,а пак пристапот до тие веб страни може да се овозможи преку било кој компјутер на којимаме инсталирано веб пребарувач- веб клиент. Во моментот кога Веб серверот примаодредено барање, тој пребарува во својот систем на датотеки (file system) и враќаповратна информација. </p>

<hr />

<p> Споменатите ентитети зборуваат на заеднички јазик, наречен HyperText TransferProtocol (HTTP). Во суштина HTTP претставува множество од правила и процедури нареченипроцедури. </p>

</div>

</body>

</html>

Во пребарувачот компајлираниот код би изгледал вака:

Обидете се на првиот <div> таг да му доделите ширина од 250px.

Заглавја (Headings)HTML користи шест тагови за заглавија <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.

Пример:


<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Заглавја</title></head>

<body>

<h1>Heading Level 1</h1><h2>Heading<h3>Heading<h4>Heading<h5>Heading<h6>Heading

LevelLevelLevelLevelLevel

2</h2>3</h3>4</h4>5</h5>6</h6>

</html>

Во пребарувачот кодот би изгледал вака:

ЛистиПостојат три типа на листи: набројани листи (најчесто бројки и букви), не‐набројана листа (уштепознати како bulleted points) и дефинициски листи.

Набројани листиОвие листи како отварачки таг го користат <ol>, додека секој запис во листата го одделуваат сотагот <li>.

Пример


<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Набројани листи</title></head>

<body>

<ol><li>In Internet Explorer, open the Web page that displaysthe graphic you wish to use as wallpaper for yourdesktop.</li><li>Right-click on the image to open the context menu.</li><li>Choose Set as Background to save the image and use itas your desktop wallpaper.</li></ol>

</body>

</html>

Користи параметар typeсо цел да специфицирашза каква листа станувазбор. <ol type="A">

Не‐набројани (bulleted) листиОвие листи како отварачки таг го користат <ul>, додека секој запис во листата го одделуваат сотагот <li>.

Пример.


<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Нe-набројани листи</title></head>

<body>Постојат три типа на листи:<ul type="square"><li>набројани листи (најчесто бројки и букви), </li><li>не-набројана листа (уште познати како bulleted points) и </li><li>дефинициски листи. </li></ul>

</body>

</html>

Дефинициски листОвие листи имаат два елементи: термин и дефиниција. Овие листи како отварачки таг го користат<dl>, додека секој запис во листата го одделува со таговите <dt> <dd>.

Пример.


<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Дефинициски листи</title></head><body><dl><dt>Internet Explorer</dt><dd>Developed by Microsoft, an integral piece of Windowsproducts.</dd><dt>Mozilla</dt><dd>Developed by the Mozilla Project, an open sourcebrowser for multiple platforms.</dd><dt>Netscape</dt><dd>Developed by Netscape Communications Corporation, oneof the first graphical browsers.</dd></dl></body></html></body>

</html>

Обидете се да направите комбинација од повеќе типови на листи.

ЛинковиЛинковите се состојат од две главни компоненти:

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

За линк се користи специјалниот таг <a>.Форматот е:

<a href=“url_of_target”>descriptor_text</a>

Можете да го контролирате и појавувањето на новата страна, односно дали новата страна да бидево истиот прозорец, дали да биде во нов таб, дали да биде во нов прозорец итн.

Value Description_blank Opens the linked document in a new browser window_self Opens the linked document in the same frame as the link_parent Opens the linked document in the parent frameset_top Opens the linked document in the main browser window, replacing any and all frames presentname Opens the linked document in the window with the specified name

Пример.


<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Линкови</title></head>

<body>

<a href="http://www.eurm.edu.mk/" target="_top" title="Ова е линк кон ЕвропскиУниверзитет">Европски Универзитет</a>

</body></html>

</body>

</html>

ТекстКористењето на тагот <font> ви овозможува директно да влијаете на големината на текстот,бојата итн.

Пример.


<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Текст</title></head>

<body>

<font size="+1" color="#666600" face="Lucida Sans Unicode, Lucida Grande, sans-serif">World Wide Web (WWW) во наједноставен случај претставува мрежа од компјутери коимеѓусебно преку Интернетот разменуваат текст, слики и мултимедијални информации.</font><hr />

Компјутерите кои овозможуваат Веб страните да бидат достапни се наречени Веб сервери,а пак пристапот до тие веб страни може да се овозможи преку било кој компјутер на којимаме инсталирано

</body>

веб пребарувач- веб клиент.

</html>

</body>

</html>

Излезот би бил:

Основните тагови за нагласување на текст се: Bold, Italic и Undrline.Соодветно се користат таговите <b>, <i> и <u>.

Ова е <U>потцртано</U>, а ова е<B><I>задебелено и закосено</I></B>

Можете да користите и степен и експонент.

<p>This is normal text.</p><p>This is the 16<sup>th</sup> day of the month.</p><p>Water tanks are clearly marked as H<sub>2</sub>O.</p>

Специјални карактериСпецијалните знаци почнуваат со &, завршуваат со ;

Код Опис Код Опис

" " ° °

& & é é

< < ½ ½

> > ¼ ¼

£ £ ± ±

® ® µ µ

СликиЗа да вметнеме слика во HTML документ потребно е да го користиме <img> тагот (не постоизатворачки таг), со искористување на минимум два атрибути: alt и src.

Alt атрибутот го специфицира текстот кој стои зад сликата, додека src атрибутот посочува надестинацијата од каде се зема сликата (датотека од истиот Веб сервер или од друг Веб сервер).

Можно е и користење на други атрибути:

Height, Width, Alignment, Border итн.


<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Слики</title></head>

<body>

<p><img alt="Ова е слика за HTML" src="html.jpg" height="100" width="100" style="text-align:justify" align="left" border="2px"/>HTML is a markup language that web browsers use to interpret and compose text, imagesand other material into visual or audible web pages.</p>

</body>

</html>

Обидете се да поставите линк на сликата, односно доколку кликнете со глувчето да веоднесе на страната http://www.w3schools.com.

Business

Vezhbi bro 2._koriste_e_na_fundamentalnite_elementi_vo_html