Како да си направите вебстрана?

deXterche

тадаммм
Член од
12 февруари 2006
Мислења
4.920
Поени од реакции
939
На оваа тема ќе се обидам со неколку туториали да ве научам како сами да си направите web сајт.

Најпрво ќе се запознаеме со некои основни поими за HTML јазикот.

HTML (Hyper Text Markup Language) e јазик кој се користи за пишување на web страници, кои се состојат од кодови (тагови) сместени во текстот од некој документ. Таговите најпрво пребарувачот ги чита и спрема нив ја на некој начин црта web страницата на нашиот прозорец. Таговите не се видливи додека ние пребаруваме низ web сајтот туку е видлив нивниот ефект. Секој таг започнува се отвора со < а се затвара со > и тие секогаш одат во парови, кога ќе отвориме еден таг мораме истиот и да го затвориме со но за затворање користиме />. Ние за почеток HTML код ќе пишуваме во Notepad и ќе го зачувуваме документот во .htm екстензија, index.htm

Пример


Кодот го пишуваме вака
HTML:
I love <I>Kajgana</I>
А во пребарувачот се прикажува вака:
I love Kajgana

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

На почетокот секој HTML документ започнува тагот <HTML> и во него се сместуваат следниве основни тагови <HEAD>....</HEAD> (во овој таг се сместуваат основните информации за документот, оваа ќе го разработиме во наредните туториали) па доаѓа тагот <BODY>...</BODY> во него се сместува главниот дел на програмата.

За почеток еве еден најпрост web документ, колку да го разберете тоа за што зборувавме денес:

HTML:
<HTML> 
<HEAD>
<TITLE>Ucam HTML</TITLE>
</HEAD> 
<BODY BGCOLOR=#FFCC33 TEXT=#FF6633>
<CENTER>
<B>Proud to be an Egg</B>
<p>http://www.kajgana.com
</CENTER>
</BODY>
</HTML>
Ќе забележите дека линкот не работа, тоа ќе го објаснам со наредните туторијали. Кој има прашање нака повеле.
 

KaiTekk

R&B boy
Член од
17 март 2006
Мислења
1.046
Поени од реакции
22
ако неќеш да се занимаваш со html научи dreamweaver
 

deXterche

тадаммм
Член од
12 февруари 2006
Мислења
4.920
Поени од реакции
939
Пополека, dreamweaver ќе дојде на ред, само најпрво да се запознаеме со основните тагови, за да имаме осет на тоа што го работеме во dreamweaver.
 

VIRTUAL

knowledge is power
Член од
4 мај 2006
Мислења
327
Поени од реакции
2
eve nesto i od mene

HTML:
<HTML> 
<HEAD><TITLE>HTML</TITLE></HEAD> 
 
<BODY BGCOLOR="purple" TEXT="#FFFFFF"> 
<H1>Ucenje HTML</H1> 
 
<B>Mnogu</B> zabavna rabota!!!<HR SIZE=3> 
<P ALIGN=center> 
HTML navistina e <U><I>lesen</I></U><BR>koga 
ce mu vlezes vo shtosot. 
</P> 
</BODY> 
 
</HTML>
 

Ice Eyes

Ледени плави очи
Член од
2 јуни 2006
Мислења
23
Поени од реакции
0
deXterche напиша:
На оваа тема ќе се обидам со неколку туториали да ве научам како сами да си направите web сајт.

Најпрво ќе се запознаеме со некои основни поими за HTML јазикот.

HTML (Hyper Text Markup Language) e јазик кој се користи за пишување на web страници, кои се состојат од кодови (тагови) сместени во текстот од некој документ. Таговите најпрво пребарувачот ги чита и спрема нив ја на некој начин црта web страницата на нашиот прозорец. Таговите не се видливи додека ние пребаруваме низ web сајтот туку е видлив нивниот ефект. Секој таг започнува се отвора со < а се затвара со > и тие секогаш одат во парови, кога ќе отвориме еден таг мораме истиот и да го затвориме со но за затворање користиме />. Ние за почеток HTML код ќе пишуваме во Notepad и ќе го зачувуваме документот во .htm екстензија, index.htm

Пример
Кодот го пишуваме вака
I love <I>Kajgana</I>
А во пребарувачот се прикажува вака:
I love Kajgana

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

На почетокот секој HTML документ започнува тагот <HTML> и во него се сместуваат следниве основни тагови <HEAD>....</HEAD> (во овој таг се сместуваат основните информации за документот, оваа ќе го разработиме во наредните туториали) па доаѓа тагот <BODY>...</BODY> во него се сместува главниот дел на програмата.

За почеток еве еден најпрост web документ, колку да го разберете тоа за што зборувавме денес:

<HTML>
<HEAD>
<TITLE>Ucam HTML</TITLE>
</HEAD>
<BODY BGCOLOR=#FFCC33 TEXT=#FF6633>
<CENTER>
<B>Proud to be an Egg</B>
<p>http://www.kajgana.com
</CENTER>
</BODY>
</HTML>

Ќе забележите дека линкот не работа, тоа ќе го објаснам со наредните туторијали. Кој има прашање нака повеле.
Браво за темава секоја чест - можат да научат сите почетници како можат да си направат сајт, јас имам повечко сајтови и до некаде сум навлегол во веб терминологијава само објасни им на почетниците кои не се толку искусни - каде да го напишат кодот , како да се компајлира после во htm,html , после како да се стави еден сајт во geocities , cjb или сл. зашто не можат ни да почнат.
 

deXterche

тадаммм
Член од
12 февруари 2006
Мислења
4.920
Поени од реакции
939
Прво да ве запознаам со тагот <HEAD>....</HEAD>

Овој таг како што напоменав во претходниот пост служи за внесување на основните информации околу веб сајтот.
За да ги внесеме информациите на веб сајтот мораме да вгнездеме други(нови) тагови. Јас ќе ве запознаам со тагот <TITLE>...</TITLE>. Со овој таг ние внесуваме наслов на нашиот веб документ кој ќе се гледа на најгорната лента од нашиот веб пребарувач. Исто така се вгнездува и тагот <META...>но тој веќе е за понапредни корисници и нас во моментов не не интересира.

Форматирање на текст (се е прави во тагот <BODY>)

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

Најпрво да започнеме со болдирање, то се прави на тој начин што на делот кој што сакаме да го задебелиме вметнуваме најпрвин отворацки таг <B> tuka go vnesuvame tekstot </B> и си продолжуваме со пишување со тоа што текстот кој се наѓа помеѓу овие два тагови во веб пребарувачот ќе се прикаже како задебелен. Истата процедура ја повторуваме и за накосување и за подвлекување што за разлика при накосување ставаме <I>....</I> а за подвлекување <U>...</U>. Исто така можат да се прават комбинации

Пример

HTML:
 Jas ucam <I><B><U>HTML</I></U></B>
Ќе се испечати како

Jas ucam HTML

За зголемување на текст постојат таговите <H1> до <H6> тие би изгледале вака

<H1>кајгана</H1> кајгана
<H2>кајгана</H2> кајгана
<H3>кајгана</H3> кајгана
<H4>кајгана</H4> кајгана
<H5>кајгана</H5> кајгана
<H6>кајгана</H6> кајгана

Потоа имаме

<SMALL></SMALL> - Таг за ситен текст
<BIG></BIG> - Таг за крупен текст
<SUP></SUP> - Таг за високо поставен текст
<SUB></SUB> - Таг за ниско поставен текст

И на крај имам еден од најкористните тагови <P> и <BR>кој се пишуваaт без затворачки таг и служат за префлување на ред, бидејќи ако префлиме ред само со притискање на ентер тоа нема да го препознае пребарувачот

Пример

HTML код:

HTML:
Јас поминувам <p>8 сати на кајгана форум

Пребарувачот:

Јас поминувам

8 сати на кајгана форум

HTML код:

HTML:
 Јас поминувам <br>8 сати на кајгана форум

Пребарувач:

Јас поминувам
8 сати на кајгана форум

Таг за порамнување на текст од лево е <p aligne=left>.....<p>
од десно <aligne=right>....</p> и центар <p aligne=center>....</p>
Да напоменам дека со сите тагови може да се прави комбинации.

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


 

SANCTIMONIOUS

Мејд Ин Мацедониа
Член од
21 март 2006
Мислења
1.302
Поени од реакции
9
cjb.net е преполно со вируси. Стално ми свете црнево детектотрот за вируси кога сум на веб што завршува со cjb.net
ако со ги сакате вашиот компјутер моја препорака е да не влегувате таму, или барем да влегувате ама е можно помалце
 

deXterche

тадаммм
Член од
12 февруари 2006
Мислења
4.920
Поени од реакции
939
SANCTIMONIOUS напиша:
cjb.net е преполно со вируси. Стално ми свете црнево детектотрот за вируси кога сум на веб што завршува со cjb.net
ако со ги сакате вашиот компјутер моја препорака е да не влегувате таму, или барем да влегувате ама е можно помалце
Кога тие што се заинтересирани ќе направат по еден солиден web сајт, заедно ќе најдеме некој добар сајт(сервер) за хостирање (знам неколку што нудат добри услуги бесплатно) и ќе ве научам како треба правилно да го хостирате (ќе има туториал и за тоа), но покасно за тоа, најпрво да завршиме со HTML па после ќе напишам неколку туторијали за во dreamweaver. Ако имам денес време ќе пратам уште еден.

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

deXterche

тадаммм
Член од
12 февруари 2006
Мислења
4.920
Поени од реакции
939
Стигнавме до листите
HTML подржува два типа: Подредени и неподредени

Неподредени

Неподредените листи се обично листи кои имаат точки пред секој елемент.
<UL></UL> e тагот за неподредените листи, во неговата внатрешност се вгнездуваат тагови за секој елемнет одделно <LI> е таг за означување на елемнт оделно.

HTML код:
HTML:
<UL> 
<LI> кајгана 
<LI> јајце
</UL>
Пребарувач:
  • кајгана
  • јајце
Подредени

Подредени листи се листи кај кои немаме точки туку тие се нумерирани (броевите се пишуваат автоматски).
<ОL></ОL> e тагот за подредените листи, во неговата внатрешност се вгнездуваат тагови за секој елемнет одделно <LI> е таг за означување на елемнт оделно.

HTML код:
HTML:
<ОL> 
<LI> кајгана 
<LI> јајце
</ОL>
Пребарувач:
  1. кајгана
  2. јајце
Исто така можеме листите да ги вгнездуваме

HTML код:
HTML:
<ОL>
  <LI> кајгана
  <LI> јајце
<ОL>
  <LI> кајгана
  <LI> јајце
</ОL>
<ОL>
 <LI> кајгана
  <LI> јајце
</ОL>
  <LI>кајгана
</ОL>
Пребарувач

1.кајгана
2.јајце
___1.кајгана
___2.јајце
_____1.кајгана
_____2.јајце
3.кајгана

(линиите изоставетеги)
Истиот принцип е и за неподредени само што кај нив место бројки ке има точки.

Фонт


Во HTML имаме и таг <FONT>....</FONT> што го определува изгледот на буквите.

Основни атрибуте ни се SIZE-големина(1-7), FACE-фонтот, COLOR-боја.

HTML код:
HTML:
<FONT FACE="Arial Black" COLOR="BLUE" SIZE=5>KAJGANA</FONT>
Пребарувач:
KAJGANA

И еве еден веб документ со се што сме учеле до сега:

HTML:
<HTML> 
<HEAD>
<TITLE>KAJGANA-KAKO DA SI NAPRAVITE WEB SAJT?</TITLE>
</HEAD> 
<BODY BGCOLOR=#FFCC33>
<CENTER>
<H1><FONT COLOR=#FF6633>Kajganata gi sodrzi boite</FONT></H1>
</CENTER>
<BR>
<FONT SIZE="4">
<B>Tie sto se sodrzat i na jajceto:-)</B>
</FONT>
<BR>
<UL>
<LI><FONT SIZE=2 COLOR=#FF6633 FACE="VERDANA"><B>Portokalova</B></FONT>
<LI><FONT SIZE=2 COLOR="YELLOW" FACE="VERDANA"><B>Zolta</B></FONT>
<LI><FONT SIZE=2 COLOR=#ffffff FACE="VERDANA"><B>Bela</B></FONT>
</UL>
Ova bese samo eden prost primer<br>vo naredniot tutorijal ke ve naucam kako da<br>vmetnete slika i link.<p>http://www.kajgana.com
</BODY>

</HTML>
Веб документот го хостирав за да видете како ќе изгледа, можете да го најдете на овој линк
http://dexterche.awardspace.com/kajgana.htm
 

Jane

Кајганџија
Член од
5 февруари 2006
Мислења
3.394
Поени од реакции
114
Јас мојата web страна ја хостирав овде. Дефинитивно досега еден од најдобрите сајтови за бесплатно хостирање.
Еве што нуди:

60 MB Free Hosting
▪ Host Unlimited Domains
▪ Host Unlimited WebSites
▪ Unlimited Bandwidth
▪ 1 Free FTP Account
▪ Ultra Fast Network
▪ Linux Servers ▪ 24/7 Technical Support
▪ Totally FREE - NO ADS
▪ Advanced Control Panel
▪ 1 POP3 account
▪ Web Based File Manager
▪ Host Unlimited Subdomains
▪ Instant Account Activation

Но најважното нешто е дека нема никакви реклами или pop-up прозорци кои навистина замараат или пак вируси и тројанци. Затоа јас го одбрав ова за хостирање и ви го препорачувам на сите што сакате бесплатен хостинг за страна која зафаќа не повеќе од 60 мегабајти.
http://50webs.com/
 
Член од
6 јули 2005
Мислења
2.982
Поени од реакции
9
Ќе ве молам да не забегувате со постовите односно да не брзате со крајот (каде, што, како ќе биде хостирано итн.) и да ја расипете добрата тема на Декстерче. Значи оставете се нека оди пополека од самиот старт за да научат почетниците од корен како се прави едноставна вебстрана. Кој сака да му помогне на Декстерче во он-лајн учењето на форумов слободно нека помогне, а не да му одмагате.
 

KaiTekk

R&B boy
Член од
17 март 2006
Мислења
1.046
Поени од реакции
22
декстерче дај кажи и за најновите XHTML стандарди и за UTF-8 и ASCII декорирање на веб страниците.
 

deXterche

тадаммм
Член од
12 февруари 2006
Мислења
4.920
Поени од реакции
939
Абе KaiTekk кај си се забрзал толку, па има почетници овде и оваа тема е наменета токму за нив. Негледаш ги пишам најосновните тагови. Сакам да го сватат сите web програмирањето. Ако толку имаш желба да пишиш за то слободно, само ќе ја нарушиме смислата на темава
 

deXterche

тадаммм
Член од
12 февруари 2006
Мислења
4.920
Поени од реакции
939
ОК, ја направивме веб страната, но сепак фали нешто. Секако погодувате дека немаме слики. Е па дојде и тој туторијал. Исклучете MSN, mIRC..и да се фатиме за работа.:star:

Нашата web страна би изгледала многу сиромашна доколку не би можеле да вметнеме некоја слика или анимација. Но доколку web сајтот изобилува со слики ќе ни претставува проблем неговата тежина. Доколку сакаме да имаме добар web сајт, убав за око но и лесен за нашата интерент конекција треба да најдеме некој компромис помеѓу неговиот дизајн но и тежината на сликите. Постојат повеќе формати на слики, кои се делат во две категории: компресирани (jpeg, gif…) и некомпресирани (BMP). Доколку на нашиот web сајт ставиме слика во BMP формат која тежи 1MB за до го прочитаме ќе ни треба сигурно едни добри 30 секунди што значи премногу. Доколку истата слика ја копресираме во JPEG формат нејзината големина драстично ке се намали за некојси 50-70% што значи дека и нашата web страна ќе биде многу полесна за вчитување. Се би било ОК ако останеме само на сликите, но сакаме да вметнеми и едно знаме кое ќе се вее додека го прегледуваме сајтот. Е тука веќе е проблем, да најдеме добра анимација но тоа да не се одрази пак ќе речам на тежината на сајтот. Најпознат формат за анимации е GIF, работат на принцип да повеќе слики автоматски се менуваат што изгледа како сликата да оживела. Подолу во текстот ќе се задржам на анимациите подетално. А сега малце за сликите:

Сликите се внесуваат многу едноставно. Тагот <IMG> се користи за вметнување на графички елемент(во случајов слики).Треба да пазиме за тоа што при вметнување на одредена слика треба да задоволиме одредени параметри, а тоа се: изворот на сликата SRC овде ја внесуваме точната локација на сликата пр. SRC="slika.jpg", втор важен момент се димензиите на сликита, за нив користиме WIDTH и HEIGHT и им задаваме димензии. Еве како би требало да изгледа сето тоа:

HTML:
  <IMG SRC="http://forum.kajgana.com/images/misc/kajgana_silver.jpg" HEIGHT=100 WIDTH=100>
Значи:
WIDTH – ширина на слика
HEIGHT – висина на слика
Единица мерка: пиксел

Исто така имаме и порамнување на слика тоа со прави со ALIGN атрибутот со можни вредности за порамнување LEFT и RIGHT.

HTML:
  <IMG SRC="slika.jpg" WIDTH=32 HEIGHT=32 ALIGN=RIGHT>
Сликата во пребарувачот ќе биде десно порамнета:







За да ја порамниме централно сликата или текстот, го користиме тагот <CENTER>
HTML:
 <CENTER><IMG SRC="slika.jpg" WIDTH=32 HEIGHT=32 ALIGN=RIGHT></CENTER>

Исто така ALIGN атрибут има дополнителни можни вредности TOP, BOTTOM и CENTER, овие служат за порамнување на текстот.

HTML:
    <IMG SRC="slika.jpg" WIDTH=32 ALIGN=BOTTOM>
Кајгана текстот е долу!

Кајгана текстот е долу!

Исто така добро е во случај ако не ви се прочита сликата на местот нејзино да стои алтернативен текст. Тоа се прави со ALT

HTML:
  <IMG SRC="slika.jpg" WIDTH=108 ALT="kajgana logo">
На местото од сликата ќе стои прецратно квадратче и ќе пишува kajgana logo.

Е па ајде да повториме, еве еден код со пример за користење на сликите.


HTML:
<HTML>  
  <HEAD>
<TITLE>Sliki</TITLE> 
  </HEAD>  
  <BODY BGCOLOR="#FFFFFF" TEXT="#000000"> 
   <CENTER> 
   <IMG SRC="http://forum.kajgana.com/images/misc/kajgana_silver.jpg" WIDTH=200 HEIGHT=146  
   ALIGN=TOP ALT="kajgana logo">Ajde zaedno da matime<B>jajca!</B> 
   </CENTER> 
  </BODY>
 
  </HTML>
 

deXterche

тадаммм
Член од
12 февруари 2006
Мислења
4.920
Поени од реакции
939
Има заинтересираност за темава да продолжам со туторијали? Бидејќи не е лесно да се среди еден туторијал со слики со примери.
 
На врв Bottom