Ај да учиме xHTML

[sojic]

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

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

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

 

[A^1^T^E^A^M]

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

 

[sojic]

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

 

[sojic]

Историја на 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_]

Напред Далибор

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

 

[sojic]

Што е 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)

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

<!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).

 <!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 ги вклучува сите елементи и атрибути.

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

XHTML 1.0 Frameset Оваа декларација вклучува сè претходно, плус рамки.

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

Документот мора да биде правилно структуриран

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


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

<html>
  <head>…</head>
  <body>…</body>
</html>

Елемент што содржи поделементи (деца, анг. child) се вика родител (анг. parent).

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

Во поранешните верзии на HTML одредени елементи немаа потреба да се затворат (слика <img>, линија <hr>, нов ред <br>). Во xHTML и елементите што немаат потреба да бидат затворени мора да се затворат.
Неправилно

<p>Параграф
<p>Друг параграф 
<hr>
<br>
<img src=’pat/do/slika.jpg’ width=400 height=200>

Правилно

<p>Параграф</p>
<p>Друг параграф</p> 
<hr />
<br />
<img src="pat/do/slika.jpg" width="400" height="200" />

Елементите мора да бидат исправно вгнездени

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

<p>Пример за <b>здебелен <a href="#">линк</p></b></a>

Правилно

<p>Пример за <b>здебелен <a href="#">линк</a></b></p>

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

Во постарите верзии на HTML не беше важно користењето на големи и мали букви во елементите.
Неправилно

<BODY bgColor=#fff>

Правилно

<bodybgcolor="#fff">

Вредностите на атрибутите мора да бидат во дупли наводници "

Во поранешните верзии на HTML вредностите на атрибутите мошеа да бидат без наводници, во единечни ‘ или дупли " наводници.
Неправилно

<p align=center>
      <p align=‘center’>

Правилно

<p align="center">

Не е дозволна минимизација на атрибутите

Неправилно

<input type="checkbox" name="checkbox" value="checkbox" checked disabled>

Правилно

<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]

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]

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]

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

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

P.S. Има многу ученици кои обожаваат историја

 

[sojic]

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

 

[Andrijeski]

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

Неверувам дека може да постои успешен вебмастер кој незнае англиски.
Би препорачал секому, пред да почне да учи HTML (или паралелно) да научи Англиски јазик. Во суштина, таговите се англиски зборчиња или кратенки од англиски зборови.

 

[sojic]

Основни концепти за изработка на WEB страна

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

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

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

На почетокот правиме концепт од кои логички целини би се состоела страната. Најчесто тоа се:

• Заглавље (header)
• Мени (navigation)
• Содржина (content) и
• Подножје (footer)

Да почнеме!

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

index.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, а потоа пробајте обратно. Што ќе се случи?

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

 

[D]

Nice work sojic. :nerd:

 

[sojic]

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


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

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

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

Како ќе ги решиме овие проблеми?
За вториот случај (кога менито е повисоко од содржината), се случува подножјето (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;
}

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

 

[DimitarMK]

bravo,bravo prodolzete..

 

[kapkavino]

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 .

 

[sojic]

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

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

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

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

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) ќе „учитуваш“ страна, со тоа што тамо ќе има нешто у стилу:

<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]

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]

решение:
Во 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">

Продолжи само така.

 

[Delicon]

Ќе може ли да објасниш малце подетално што значи 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">

Продолжи само така.

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">

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

 

[MARTIN_MKD]

Што стана со овие лекции?
Дали завршија или ќе продолжат?

 

[goodboy]

e a ke moze toj a1 team da pise poraka treba nesto da go prasam za edna lekcija

 

[Commie]

e a ke moze toj a1 team da pise poraka treba nesto da go prasam za edna lekcija

goodboy a1 team е баниран од форумот. Поздрав :bye1:

 

[goodboy]

znam znam ama kako moze da go najdam?

 

[Избришан член 1074]

a1team1 =>toa mu e Skype