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

[Jane]

Има заинтересираност, само мислам дека да се учат таговите е непотребно. Денес никој не програмира во notepad. Сите програмираат со некој програм како dreamweaver или слично. А за него не требаат да се знаат таговите. Нормално нема да ни наштети да го знаеме HTML јазикот но не вреди да се мачиме за џабе. Во dreamweaver сите функции се дадени готови и само ние ги вметнуваме кај што сакаме.

 

[deXterche]

хммм...како ќе направиш кавалитетен веб сајт ако незнаеш ни дека воопшто постојат тагови и дека веб програмирањето се темели на HTML. Ова што го пишувам се само НАЈОСНОВНИТЕ тагови, ги има премногу. Ова е колку да ја сватите суштината. Утре задутре ќе сакаш да направиш веб сајт, арно ама тоа што го сакаш не е изводливо со dreamweaver, ќе мора да засукаш ракави и сам да го искуцаш кодот. Ако, јас ќе довршам со туторијалите за HTML можда ќе му се најдат на некој да не ја оставам темава на сред пат, а ако сакате толку dreamweaver дај средите некој туторијал или дајте предлог, исто така можеме и некоја JAVA скрипта да разработиме.

 

[Jane]

Епа тогаш може да завршиме со основите на HTML и да продолжиме во истава тема со Dreamweaver. Имам некои туториали за Dreamweaver што ги имам симнато од интернет. Само сега во недела ке идам на одмор и нема да можам да и посветам големо внимание на темава. Кога ќе се вратам ќе ја средиме темава.

 

[vardarce]

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

 

[ronson]

честитки за вежбите.
јас сум вистински лаик во дизјнирање на веб страници и мислам дека оваа е доста корисно за мене и би сакал да продолжи понатака, веќе почнав да ги вежбам примерите во notetab light иако е тешко сепак е интересно се надевам дека ќе дојдеме до завршниот производ.
само уште нешто како да ги задржам изработените примери, дали треба да отворам фолдер и таму да ги праќам?

 

[procurer]

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

Не мора да отвориш нов фолдер па таму да ги прајкаш, може да ги снимаш каде сакаш, па може и во фолдер. А за да ги снимаш кликнуваш на менито File и на подменито Save As, потоа внесуваш име и наогаш локација каде сакаш да снимаш.

 

[deXterche]

честитки за вежбите.
јас сум вистински лаик во дизјнирање на веб страници и мислам дека оваа е доста корисно за мене и би сакал да продолжи понатака, веќе почнав да ги вежбам примерите во notetab light иако е тешко сепак е интересно се надевам дека ќе дојдеме до завршниот производ.
само уште нешто како да ги задржам изработените примери, дали треба да отворам фолдер и таму да ги праќам?

Во првиот туториал објаснав како ќе ги снимаме документите. Најдобро е да си отвориш на desкtop еден фолдер каде ќе ги ставаш сите вежби. Документите пишувани во notepad ќе ги крстиме пример prv.html и така натака нејважна е екстензијтат (да завршуваат на .html)

 

[deXterche]

Полека дојдовме и до линковите. Сите знаеме дека главната функција на WEB-от е неговата можност за поврзување на тековната страница или сајт со било која друга што се наоѓа на WEB, но можно е и поврзување и со други сервиси кои ги нуди Интернетот, на пример e-mail. Кога не би постоеле линковите не е можно да се замисли еден web сајт.

За да се направи линк се користи тагот <A></A>

Целата содржина која се наоѓа оградена со овој таг ќе ја има функцијата за линк.
Главни атрибути:
HREF – ја означува целната адреса кон која води линкот

NAME – го означува името на линкот

TARGET – го означува прозорецот во кој ќе се отвори адресата кон која води линкот *

Текстуални линкови
Пример:

<A HREF="http://www.google.com">Линк кон Google</A>

Во пребарувачот ќе изгледа вака:
Линк кон Google
Вообичаено кај пребарувачите линковите се подвлечени.

Релативни и апсолутни линкови

Релативни линкови:

 <A HREF="prva.htm">Прва</A>

 <A HREF="прва.htm#voved">Вовед</A>

Апсолутни линкови:

 <A HREF="http://www.kajgana.com">Kajgana</A>

Слики-линкови
Пример:

 <A HREF="http://www.kajgana.com">
<IMG SRC="slika.jpg" WIDTH=40 BORDER=0>
</A>

Слики-мапи. Toа е метода за креирање на повеќе линкови од една слика т.е. поставување на дел од слика да биде линк.
Ограничувањето на дел од слика се врши со избор на правоаголник со координати на пиксели.

Слики-мапи

Синтакса:

 <MAP NAME="[име]">
<AREA HREF="[линк1]" SHAPE="[облик]" COORDS="[x11],[y11],[x12],[y12]">
<AREA HREF="[линк2]" SHAPE="[облик]" COORDS="[x21],[y21],[x22],[y22]">

...

 </MAP>
<IMG SRC="[слика]" USEMAP="#[име]">

E-mail линкови
За креирање на линк кој го отвора E-mail програмот на корисникот со пополнета адреса на примач се користат линковите.

Пример:

 <A HREF="mailto:dexterche@hotmail.com">Пиши му на deXterche!</A>

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

BTW...дајте да видам што сте научиле постирајте еден код

 

[gale_vlae]

ке може и јава скрипти да објасниш

 

[deXterche]

ке може и јава скрипти да објасниш

Ќе биде...само малце покасно

 

[Hypnotic]

Има заинтересираност, само мислам дека да се учат таговите е непотребно. Денес никој не програмира во notepad. Сите програмираат со некој програм како dreamweaver или слично. А за него не требаат да се знаат таговите. Нормално нема да ни наштети да го знаеме HTML јазикот но не вреди да се мачиме за џабе. Во dreamweaver сите функции се дадени готови и само ние ги вметнуваме кај што сакаме.

Тука грешиш. Доста веб програмери кодот го пишуваат во обичен текст едитор како notepad или некој со syntax highlight, како notepad++. И јас лично повеќе го користам notepad++ отколку dreamweaver, оти така имам поголема контрола и ми е посреден кодот, а кога работев со dreamweaver ми генерираше вишок код кој слободно може да се изостави во повеќето случаи.
WYSIWYG едиторите се добри единствено ако сакаш да си создадеш страна без да се мачиш да учиш HTML.

 

[Овердрајв]

Тука грешиш. Доста веб програмери кодот го пишуваат во обичен текст едитор како notepad или некој со syntax highlight, како notepad++. И јас лично повеќе го користам notepad++ отколку dreamweaver, оти така имам поголема контрола и ми е посреден кодот, а кога работев со dreamweaver ми генерираше вишок код кој слободно може да се изостави во повеќето случаи.
WYSIWYG едиторите се добри единствено ако сакаш да си создадеш страна без да се мачиш да учиш HTML.

И си во право, и не си (=
И јас користев до пред некое време notepad (обичен), па ми го посочија notepad++, ама никогаш не престанав да работам со Dreamweaver. Едноставно многу побрзо оди куцањето на PHP и HTML код со таква помош (=

 

[ScarFace]

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

 

[deXterche]

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

Ќе се обидам до вечер да завршам со HTML уште рамки, табели и форми мислам останаа, па ќе почнeме со Dreamweaver. Tака да кој е заинтересиран нека го инсталира, jас во туториалте ќе користам Macromedia Dreamweaver MX 2004.

 

[deXterche]

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

Табелите имаат две намени:
-Приказ на табеларни информации
-Контрола на распоред на HTML елементи
Од кои второво игра огромна улога во дизајнирање на еден веб сајт.

<TABLE>…</TABLE> - таг за означување на табела
<TR>…</TR> - таг за означување на ред во табелата
<TD>...</TD> - таг за означување на ќелија во редица.

Организацијата на табелата се одвива со дефинирање на табела како низа од вгнездени редици.
Организацијата на редицата се одвива како низа од вгнездени ќелии.

Еве како би изгледал еден код за табела MxN

<TABLE> 
   <TR> 
   <TD>…</TD> 
   … 
   <TD>…</TD> 
   </TR> 
   … 
   <TR> 
   <TD>…</TD> 
   … 
   <TD>…</TD> 
   </TR> 
  </TABLE>

Еве табела 2x3

<TABLE> 
   <TR> 
   <TD>…</TD> 
   <TD>…</TD> 
   <TD>…</TD> 
   </TR> 
   <TR> 
   <TD>…</TD> 
   <TD>…</TD> 
   <TD>…</TD> 
   </TR> 
  </TABLE>

<TABLE></TABLE> - таг
Атрибути:
BORDER – ја означува дебелината на линиите на табелата
BORDERCOLOR – определува боја на линиите на табелата
BACKGROUND – определува слика која ќе биде позадина на табелата
BGCOLOR – ја определува бојата на позадината
ALIGN – порамнување на табелата во однос на страницата
CELLPADDING – го дефинира празниот простор во ќелиите
CELLSPACING – го дефинира празниот простор меѓу ќелиите
WIDTH – ја дефинира ширината на табелата

<TR></TR> - таг
Атрибути:
ALIGN – претпоставена вредност за хоризонтално порамнување на содржината на секоја ќелија од редицата (LEFT, CENTER и RIGHT) VALIGN - претпоставена вредност за вертикално порамнување на содржината на секоја ќелија од редицата (TOP, BOTTOM и MIDDLE)
BGCOLOR – претпоставен вредност за бојата на позадината на целата редица
HEIGHT – висина на редица

<TD></TD> - таг
Атрибути:
ALIGN –хоризонтално порамнување на ќелија (LEFT, CENTER и RIGHT)
VALIGN - вертикално порамнување на ќелија (TOP, BOTTOM и MIDDLE)
BGCOLOR – боја на позадината на ќелијата
WIDTH – ширина на ќелијата

Дополнителни атрибути на тагот <TD></TD>
COLSPAN – број на колони кои се составуваат
ROWSPAN – број на редици кои се составуваат

Пример:

<TD COLSPAN=2></TD>

- две составени колони (во тековната редица)

Малце сум зафатен во последно време но ќе се обидам да ви постирам уште два туториали еден за рамки и еден за форми. Ако има некој заинтересиран нека постира.