• Здраво и добредојдовте на форумот на IT.mk.

    Доколку сеуште не сте дел од најголемата заедница на ИТ професионалци и ентузијасти во Македонија, можете бесплатно да се - процесот нема да ви одземе повеќе од 2-3 минути, а за полесна регистрација овозможивме и регистрирање со Facebook и Steam.

Ај да учиме xHTML

Статус
Затворена за нови мислења.
  • Ја почнал/а темата
  • #1

sojic

Intern
29 април 2007
435
23
Овдека јас ќе почнам (ама нема да го довршам, мрзи ме да пишувам) да држам предавање за XHTML.

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

За почеток, оние што знаат англиски http://www.w3schools.com/xhtml/.
 

A^1^T^E^A^M

Баниран/a
18 април 2007
393
2
brmbrm.blog.com.mk
епа ајде чим толку многу се разбираш од xHTML предави... не само да дадеш линк и ајде учете... можеби некој незнае англиски и како ке учи:confused: :confused: и јас за HTML можам да ви дадам 1000 линкови за да учете, ама не е тоа работата :eek: :eek:
 
  • Ја почнал/а темата
  • #3

sojic

Intern
29 април 2007
435
23
Ќе биде бе. Само што се регистрирав, а моментално ме мрзи да куцам. За утре ќе припремам прва лекција.
 
  • Ја почнал/а темата
  • #4

sojic

Intern
29 април 2007
435
23
Историја на WWW

Интернет како мрежа постои веќе триесетина години, меѓутоа со појавата на World Wide Web (WWW) интернет станува она што го знаеме денес.

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

Затоа 1989 година Tim Berners Lee од Европската лабораторија за нуклеарна физика во Швајцарија CERN, пишува предлог за изработка на единствен хипер текстуален програм за дистрибуција на податоците помеѓу луѓето, т.е. сеуште само на научниците бидејќи 1989 година суште немало голем број на домашни компјутери и имало многу мал број на корисници ја интернет.

Крајот на 1990 година почнал да се развива и самиот проект WWW. Започува со развој на првата програма за пристап на WEB со едноставно име WWW. Овој програм работел со текстуално пребарување. Кон крајот на 1992 година, веќе постоеле 50тина опслужувачи за WWW. Набрзо е напишан и првиот прегледувач со графички приказ Viola, а напишана е и првата верзија на HTML (Hyper Text Marcup Language), толку поедноставна од денешната, но постоењето на хипер линкови за поврзување на документите овозможува лесно пребарување и сосема доволна достапност на информациите.

Почетокот на 1993 година Marc Andreessen од NCSA (National Center for Supercomputing Applications) напишал и друг таков пребарувач, наречен Mosaic. Marc 1994 година основа фирма Netscape Communications и покрај Tim Berners се смета за најзначен човек за развојот на WWW.

При крајот на 1994 година, проектот за развој на WWW го превзема Конзорциумот W3 кој заеднички го основале CERN и MIT (Massachusetts Institute of Technology).

1994 година еволуира и HTML кој во верзијата 2.0 донесува подршка за некои клучни новини како што се: формулари и обрасци. Истата година излегува и првата верзија на Netscape кој донесува една многу важна новост, прикажување на JPEG слики (другите прелистувачи биле ограничени само на GIF-ови).

1995 година Netscape излегува со верзијата 1.1 и воведува додатни новости, меѓутоа надвор од важечките стандарди за HTML јазик. Внесува свои тагови, како што се оние за позадини и таблици. Иако ова предизвика бројни расправи за исправноста на таквата постапка, Netscape-овите тагови почнуваат да владеат на мрежата.

1995 година излегуваат и Windows 95 од фирмата Microsoft која тоа време не беше свесна за важноста на интернетот па поради тоа, како додаток, исфрла слаба верзија на Internet Explorer прелистувач.

1996 година Netscape исфра верзија по верзија, на што Microsoft одговара со Internet Explorer 2.0, кој најавува создавање на уште еден моќен прелистувач, јака конкуренција на популарниот Netscape.

После неуспешни стандардизации на HTML 3.0, W3 дига раце од HTML, за после излегување на Internet Explorer 3.0, кој е много подобар од истобројната верзија на Netscape, да се врати на следењето на развојот на HTML стандардот, по што излегува HTML 3.2.

1997 година излегува четвртата верзија на HTML јазикот, а на пролет истата година, двете фирми исфрлаат свои пребарувачи со бројот 4.0.

1998 година под надзор на W3 конзорциумот, конечно излегува HTML 4.0 во три подверзии:

  • HTML 4.0 Strict наменет за употреба на Cascade Style Sheets (CSS);
  • HTML 4.0 Transitional има презентациски можности и
  • HTML 4.0 Frameset за употреба на рамки (фрејмови)

19 декември 2000 година W3 конзорциумот официјално ги издава xHTML 1.0 стандардите.
 

_BurneR_

Intern
26 април 2007
114
3
www.baltazar.com.mk
Напред Далибор

Далибор се е убаво за историјата на Www, ама мене ме знаес (Велков Димитар) и знаес дека не сум многу по историјата па затоа мислам дека првио цас многу ученици ке избегат. Пиши и нешто поинтересно.
 
  • Ја почнал/а темата
  • #6

sojic

Intern
29 април 2007
435
23
Што е XHTML?

xHTML е акроним од Extensible HyperText Markup Language. XHTML е идентичен со HTML 4.01 и ги решава проблемите што постојат во HTML 4.01.
Проблеми со HTML

HTML, како што самото име кажува, е јазик за означување (Markup).
XHTML правила

За разлика од HTML, во xHTML важат многу построги правила. Еве неколку од поважните:
  • xHTML документот мора да се опише со DTD (Document Type Definition), што претставува дефиниција за структурата на документот;
  • Документот мора да биде правилно структуриран;
  • Сите елементи мора да бидат затворени;
  • Елементите мора да бидат исправно вгнездени;
  • Сите елементи и атрибути мора да бидат со мали букви;
  • Вредностите на атрибутите мора да бидат во дупли наводници " ;
  • Не е дозволена минимизација на атрибутите;
  • Нормирање;
xHTML документот мора да се опише со DTD (Document Type Definition)

Во првиот ред на документот мора да се наоѓа:


HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
DOCTYPE не е HTML елемент и не треба да биде затворен. DTD е HTML спецификација која ги дефинира значењата на HTML елементите која web прелистувачите ја користат за исправно прикажување на страната.


Постојат три вида на xHTML декларации: Strict, Transitional, i Frameset. Најпопуларен е Transitional.
XHTML 1.0 Strict Strict DTD ги дефинира елементите и атрибутите за структурата на HTML документот без елементи и атрибути за форматирање на соржината и не содржи дефиниции за рамки (анг. frames).
HTML:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional Transitional DTD ги вклучува сите елементи и атрибути.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset Оваа декларација вклучува сè претходно, плус рамки.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Документот мора да биде правилно структуриран

Сите xHTML документи мораат да бидат правилно структуирани. Основниот елемент мора да биде <html>, а сите останати елементи мора да бидат „вгнездени“ во него.


Основна структура на xHTML документ изгледа вака:


HTML:
<html>
  <head>…</head>
  <body>…</body>
</html>
Елемент што содржи поделементи (деца, анг. child) се вика родител (анг. parent).

Сите елементи мора да бидат затворени

Во поранешните верзии на HTML одредени елементи немаа потреба да се затворат (слика <img>, линија <hr>, нов ред <br>). Во xHTML и елементите што немаат потреба да бидат затворени мора да се затворат.
Неправилно
HTML:
<p>Параграф
<p>Друг параграф 
<hr>
<br>
<img src=’pat/do/slika.jpg’ width=400 height=200>
Правилно
HTML:
<p>Параграф</p>
<p>Друг параграф</p> 
<hr />
<br />
<img src="pat/do/slika.jpg" width="400" height="200" />
Елементите мора да бидат исправно вгнездени

Како што веќе рековме, html елементите може да содржат поделементи. Исто така знаеме дека сите елементи мора да бидат затворени. Многу е битен редоследот на затворање на отворените елементи.
Елементите треба да се затвораат по обратен редослед од отворањето.
Неправилно
HTML:
<p>Пример за <b>здебелен <a href="#">линк</p></b></a>
Правилно
HTML:
<p>Пример за <b>здебелен <a href="#">линк</a></b></p>
Сите елементи и атрибути мора да бидат со мали букви

Во постарите верзии на HTML не беше важно користењето на големи и мали букви во елементите.
Неправилно
HTML:
<BODY bgColor=#fff>
Правилно
HTML:
<bodybgcolor="#fff">
Вредностите на атрибутите мора да бидат во дупли наводници "

Во поранешните верзии на HTML вредностите на атрибутите мошеа да бидат без наводници, во единечни ‘ или дупли " наводници.
Неправилно
HTML:
<p align=center>
      <p align=‘center’>
Правилно
HTML:
<p align="center">
Не е дозволна минимизација на атрибутите

Неправилно
HTML:
<input type="checkbox" name="checkbox" value="checkbox" checked disabled>
Правилно
HTML:
<input type="checkbox" name="checkbox" value="checkbox" checked="checked" disabled="disabled" />


Нормирање


Постојат елементи кои во нив не може да содржат други елементи. На пример:
  • <a> во смее не може да содржи друг <a> (нема логика линк во линк)
  • <a> во смее не може да содржи <h1>,<h2>,…<h6>
  • <input> во него не смее да содржи <h1>, <h2>…<h6>, <a>, <input>, <label>…
  • <pre> во него не смее да содржи <img>, <object>, <big>, <small>, <sub>, <sup>…
  • <form> не смее да содржи друг <form>
 

Amazonce

Intern
2 мај 2007
19
0
www.amazonce.amazon-r.com
bravo bravo za ovaa predlagam da ti otvorat poseben pod forum CSS CLASS ROOM ili nesto slicno pa da postiras lekcija po lekcija za da mozat na sekoja lekcija da davaat mislenja ... a vaka vo edna tema sve ke se izmesa... pozdrav
 

Andrijeski

Gaining Experience
1 март 2007
2,599
65
andrijeski.net
bravo bravo za ovaa predlagam da ti otvorat poseben pod forum CSS CLASS ROOM ili nesto slicno pa da postiras lekcija po lekcija za da mozat na sekoja lekcija da davaat mislenja ... a vaka vo edna tema sve ke se izmesa... pozdrav
Може секоја лекција да биде во посебна тема. Нема потреба од компликување на форумот. Сепак, кога бројот на лекции ќе стане голем и доволно квалитетен може сите да ги префрлиме во одреден дел, ама тоа подоцна. Сега засега доволна е една категорија за ова.
Ве молам ваквите предлози да ги пишувате во делот за Сугестии на форумот :) Фала унапред т.е. Благодарам однапред
 

Andrijeski

Gaining Experience
1 март 2007
2,599
65
andrijeski.net
Далибор се е убаво за историјата на Www, ама мене ме знаес (Велков Димитар) и знаес дека не сум многу по историјата па затоа мислам дека првио цас многу ученици ке избегат. Пиши и нешто поинтересно.
За да се сфати нешто, најдобро е да најпрвин да се научи неговата историја. Тебе ако не те интересира историјата и мислиш дека не ти е потребен тој дел можеш слободно да го прескокнеш.

P.S. Има многу ученици кои обожаваат историја :)
 
  • Ја почнал/а темата
  • #10

sojic

Intern
29 април 2007
435
23
утре (ваљда) ќе има нов видео туторијал „како се правеше...“
 

Andrijeski

Gaining Experience
1 март 2007
2,599
65
andrijeski.net
епа ајде чим толку многу се разбираш од xHTML предави... не само да дадеш линк и ајде учете... можеби некој незнае англиски и како ке учи:confused: :confused: и јас за HTML можам да ви дадам 1000 линкови за да учете, ама не е тоа работата :eek: :eek:
Неверувам дека може да постои успешен вебмастер кој незнае англиски.
Би препорачал секому, пред да почне да учи HTML (или паралелно) да научи Англиски јазик. Во суштина, таговите се англиски зборчиња или кратенки од англиски зборови.
 
  • Ја почнал/а темата
  • #12

sojic

Intern
29 април 2007
435
23
Основни концепти за изработка на WEB страна

Порано (до пред неколку години), а некои познати IT компании и до ден денес користат табели <table> за поставување на layout на web страна. Тоа е погрешен концепт. Денес се користи tableless дизајн.

Како да направиме tableless дизајн?

Пред да почнеме со било што, битно е да знаете да сфатите дека XHTML е јазик за означување на структура, а не јазик за форматирање. За форматирање е задолжен CSS.

На почетокот правиме концепт од кои логички целини би се состоела страната. Најчесто тоа се:
  • Заглавље (header)
  • Мени (navigation)
  • Содржина (content) и
  • Подножје (footer)
Да почнеме!

Во notepad го правиме .html фајлот:

index.html
HTML:
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
   <div id="header">
          Zaglavlje
       </div>
   <div id="navigation">
          Meni
       </div>
   <div id="content">
          Sodrzina
       </div>
   <div id="footer">
          Footer
       </div>
</body>
</html>
Може да го погледнете ова преку некој прелистувач (Mozila, IE, Opera....).

Сега ќе го „нашминкаме“:

style.css

Код:
     #header {
        height: 100px;
       border: 1px solid #f00;
    }
    
    #navigation {
       width: 100px;
       border: 1px solid #0f0; 
       float: left;
    }
    
    #content {
        border: 1px solid #00f; 
    }
    
    #footer {
       height: 30px;
       border: 1px solid #f0f; 
    }
Сега можете да пробате да додавате повеќе текст во блоковите navigation и content, со што ќе постигнете да имаат различита височина. Пробајте во navigation да има повеќе содржина отколку во content, а потоа пробајте обратно. Што ќе се случи?

Во наредната лекција ќе ги решиме проблемите што настануваат при промена на височината на овие два блока.
 
  • Ја почнал/а темата
  • #14

sojic

Intern
29 април 2007
435
23
Доколку ја имате изработено домашната задача од претходната лекција, ќе ги добиевте следниве случаи:


Кога менито и содржината се со иста височина:

Кога менито е повисоко од содржината:
Кога содржината е повисока од менито:
Како ќе ги решиме овие проблеми?
За вториот случај (кога менито е повисоко од содржината), се случува подножјето (footer-от) да продолжи десно од менито. Ние би сакале footer-от секогаш да е во „нов ред“. Ова се случува како последица на својството float: left на #navigation.

решение:
Во style.css на елементот #footer ќе додадеме clear: both, со што ќе добиеме:
Код:
#footer {
 height: 30px;
border: 1px solid #f0f; 
clear: both;
}
Следниот проблем што треба да го решиме е кога содржината е повисока од навигацијата.

решение:
Во style.css на елементот #content ќе му додадеме margin-left: 100px, со што ќе добеме:
Код:
#content {
border: 1px solid #00f; 
margin-left: 100px;
}
Го добиваме конечниот изглед (во два случаја):
 

kapkavino

Intern
13 мај 2007
43
0
www.stipfashion.com
nekoj sto se razbira vo "iframe"

Dali postoi nacin primer: edna strana so bela pozadina, vo centarot na stranata stavam iframe so width="100" i height="100", e sega sleduva prashanjeto dali mozam slika da stavam da bide vo preden plan znaci ifrejmot da bide pozadi a slikata odnapred i da pokriva samo eden del od ifrejmot bilo koj ne e tolku vazno, imam citano nesto so <div> moze da se napravi ali razlicni browseri razlicno davat, pa ako nekoj znae kako daj narode kazuvajte da ne se brlavam :).
 
  • Ја почнал/а темата
  • #17

sojic

Intern
29 април 2007
435
23
Да ставиш слика пред iframe не ќе да може.

Моја препорака (и препорака на SEO специјалисти) да не се користат фрејмови (тука спаѓа и iframe).

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

Еве како јас би го решил:

html:
HTML:
<body>
<div id="sodrzina">
</div>

<img src="slika.jpg" alt="" id="slika" width="100" height="100" />
</body>
css kod:
Код:
#slika {
   z-index: 100;
   left: 100px;
   top: 30px;
}
Нормално, css ќе си го наштелуваш како ти одговара. Важно слика „врз“ содржина се става со z-index.

Е сега....
Во некој фрејм (со големина 0) ќе „учитуваш“ страна, со тоа што тамо ќе има нешто у стилу:

HTML:
<body onload="parent.mainFrame.getElementById('sodrzina').innerHTML=document.getElementById('tekst').innerHTML">
<div id="tekst">
<p>oveka imas sodrzina koja ke se vpise vo drugiot frejm</p>

</div>
</body>
Ова е само идеја за концепт. Сега е 3 сат сабајле (или преко ноќ, како сакате). Овој код не мора да значи дека ќе работи. Го пишував директно без да го пробам.
 

kapkavino

Intern
13 мај 2007
43
0
www.stipfashion.com
se ubavo, ne sum go probal seushte ali nesto ne mi stima, ako ja pozicioniram slikata. so ke bide so slikata ako ifrejmot go pozicioniram "center" na stranata togash na monitori 15'' i 17'' slikata ke bide na razlicno mesto spored dadenata pikselaza. ok fala man sepak sto se potrudi zdravje ke pobaram nekoj reshenija po net. ako se najde.
 

staki

Intern
26 јуни 2007
147
3
решение:
Во style.css на елементот #footer ќе додадеме clear: both, со што ќе добиеме:
Код:
#footer {
 height: 30px;
border: 1px solid #f0f; 
clear: both;
}
Ќе може ли да објасниш малце подетално што значи clear: both.
Уште едно прашање. Според досегашните „лекции„ како што забележав разликата меѓу HTML и xHTML е само во првиот ред. Дали е тоа главната разлика или не сум сватил добро.

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Продолжи само така.:p
 

Delicon

Gaining Experience
10 јуни 2007
816
263
delicon.mk
Ќе може ли да објасниш малце подетално што значи clear: both.
Уште едно прашање. Според досегашните „лекции„ како што забележав разликата меѓу HTML и xHTML е само во првиот ред. Дали е тоа главната разлика или не сум сватил добро.

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Продолжи само така.:p

clear:both; значи да го прекине float-от (следењето), во овој случај од двете страни (од лево и од десно).



Како што можеш да видиш на оваа слика, менито има float:left; па затоа содржината се лепи до него, но се додека трае висината на менито. Кај што завршува менито се приметува дека содржината се изместува и продолжува од лево. Со додавање на clear:float; или во овој случај може само clear:left; се прекинува float-от и содржината продолжува надолу без да се лепи по левата страна.

* не ви препорачувам да користите height, како во овој случај height: 30px; , оставете висината да се креира динамички и во зависност од желбата на корисникот.

А разликите помеѓу HTML и XHTML можеш да ги погледнеш тука.

Разликата не е само во декларацијата:
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Декларацијата служи за дефинирање на типот на документот и за поставување на правила на истиот, по кои што дукоментот мора да биде составен.
 

hmmm

Gaining Experience
30 ноември 2007
1,242
81
hmmm's setup  
Processor & Cooler
i5 3570k @4.2GHz & CM Hyper 212+
Motherboard
AsRock Z77 Pro3
Storage
Samsung 840 EVO 120GB + WD Black 1TB
PSU
Corsair CX600
RAM
2x4GB G.Skill Sniper 1600MHz
Video card
HD4000
Case
Custom
Mouse
Gigabyte GM-M7000
Keyboard
Generic
Audio
Asus Xonar DG
Monitor
Compaq Q2159
OS
Windows 8 64bit
a1team1 =>toa mu e Skype
 
Статус
Затворена за нови мислења.

Нови мислења

Последни Теми

Статистика

Теми
43,541
Мислења
822,893
Членови
28,057
Најнов член
Iamdantes10
На врв Дно