Skoči na vsebino

IPB



Slika

Izdelovanje Spletnih Strani S Html In Css Za Začetnike


Odgovorov v temi: 31

#1 FreakDizajn

FreakDizajn

    Iznajdljivec

  • Members
  • 950 objav
  • Spol:Moški
  • Interesi:Imam rad adrenalinske športe, ko sem doma oblikujem, ob petkih pa rad hodimo ven na žurke;)

Objavljeno 11 marec 2012 - 02:47

Živjo! Predstavil vam bom HTML in CSS. Upam, da boste uživali.

S HTML in CSS-jem so že pred davnimi leti začele delovati prve spletne strani, ki res niso bile tako dobre kot v današjih časih. Tukaj boste spoznali kako se naredi spletno stran in potem popravlja s CSS-jem

Malo zgodovine ne škodi :

Tim Berners Lee je leta 1989 razvil prvi strežnik in tudi prvi HTTP naslov. Kasneje leta 1990 v CERNU razvije prvi HTTP, ki se poveže s strežnikom preko interneta.

World Wide Web Consortium (okrajš. w3c). Je bilo ustavnoljeno leta 1994 in je izvršilo ali bo koda sprejeta ali ne, da ne bi bila zmešnajva so naredili nek standard.

No, ker vem, da vas zgodovina ne zanima, bomo začeli z našim HTML-jem. Pri tem upam, da vam bom vsaj malo olajšal delo. Naj še povem, da se bo sama tema razvijala bolj počasi, zaradi šole, a se bom vseeno maximalno potrudil, da vam razložim po mojih najboljših močeh.

Kaj pomeni ?

HTML - Hyper Text Markup Language

CSS - Cascada Style Sheets

S HTML kodo normalno pišemo kot, da bi pisali text v word a zato obstajajo neka pravila, da lahko zapišeš ta text npr. za odebeljeno je znak <b> .

V HTML-ju se piše text in lahko še kakšne tabele. S CSS lahko lepo oblikujemo vpisano kodo, ki je v HTML in s tem npr. obarvamo, dodajamo fonte, velikost itd...

Objavljena slika
CSS koda tukaj je primer zgornje slike kaj vse lahko z njim narediš
Objavljena slika
in tukaj je kako bi zgledalo brez CSS-ja dolgočasno mar ne? .


Kaj rabimo za delo? Za delo rabimo samo malo volje in eno beležko. Lahko uporabljate tudi navadno beležko, a pri navadni je slaba vidljivost, ker ni pobarvano zato je bolje, da uporabite kakšno od bolj naprednih beležk kot so Notepad++, PsPad in drugi.

Link do PsPad beležke: http://www.pspad.com/

Sedaj, ko ste izbrali beležko, enkrat počasi vdihnite in izdihnite in bomo počasi začeli.

Prvo greste kamor želite in naredite novo mapo sam sem jo poimenoval z moja prva spletna stran v to mapo bomo shranjevali vse datoteke. Ko smo v tej mapi kliknemo z desno tipko na miški in potem naredi nov Text Document. Sedaj to še ponovno naredimo, da imamo dva text dokumenta. Za zdaj bomo samo enega uporabili. Bravo vsaj ni bilo težko ;).


Zlata pravila vsega:

  • Znanje ne pade kar iz neba
  • Povečaj sliko tako, da na njo klikneš
  • Veliko brskaj. Tako boste boljši (išči, sprobavaj)
  • Priporočam tudi spletno stran kot so W3schools.com, TheNewBoston in drugi.
  • Piši kode z malimi črkami, boljša preglednost.
  • Bodi pozoren na zaključevanje kod npr. <a> pomembno zaključek </a>
  • Če kaj ne veš, vprašaj.
Objavljena slika
Naredili smo Text Document

Objavljena slika
in odprli z beležko

Sedaj ste odprli beležko, odprite jo in shranite kot Index.html.

Objavljena slika
Shranite kot (Save as).

Objavljena slika
Shranili smo kot Index.html

Naredili smo "nekajjetukaj".html kodo in jo bo računalnik prepoznal, nekakšna pravila, ki se končajo s .html zato lahko sedaj začnemo pisati glavno kodo , če nebi dodali index.HTML kode nebi zaznalo. Lahko dodamo karkoli npr. pohištvo.html

Še posnetek : Glavna zgradba HTML

Glavna koda HTMLja :













<html>


<head>
<title>Pika</title>
</head>

<body>

<H1>To bo malo opisano na moji spletni strani</H1>
Hojla to sem jaz!
</body>

</html>


Zgoraj je glavna koda (obarvana rdeče) naj povem malo v tem kaj je in zakaj se uporablja:

Koda se začne v HTML-ju in potem se mora(!) tudi zaključiti, če pogledamo na spletno stran Sestavi. si vidiš spodnjo sliko, ki kaže <title> kodo. Tako si potem tvoji obiskovalci lažje zapomnejo spletno stran in jo pridejo zopet obiskati.

Objavljena slika
To naredi title (glej sliko). Kasneje bomo tudi sporobali, da dobimo malo občutka kako in kaj ;).

V sam<head> vpišeš kodo za ...CSS, meta podatke to so ključni podatki, da je spletna stran bolj ovrščena itd, a o tem bomo govorili kasneje.

Najbolj zanimiva je pa seveda <Body> ves text, ki ga boste napisali gre sem noter.


Samo besedilo, če naredite "space" se nebo spreminjalo, ker brskalnik vse znake upošteva kot enega samega, da greš v novo vrstico je posebna kodo, ki mu daste, da brskalnik misli, da je tam nek drug text. Že v naslednjih vajah bo to prikazano kako narediti.


Videoposnetek za glavno kodo : Naredimo HTML dokument


Že sam primer kaže značko "<h1> " s tem smo napisali nekaj texta in </h1>in tudi zaključili. To je zelo pomembno, da vsako med kod zaključite!. npr. <p> to je paragraph </p>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Sedaj pojdimo nazaj v beležko in odprimo svoj index.html, ki smo ga naredili. Lahko kopirate zgorjno kodo a priporočam, da napišete še enkrat, da si boste zapomnili.

Samo kodo sem napisal in dal shrani. (Shranil sem čez index.html)

Sedaj odprite z brskalnikom (Chrome, Firefox itd.. )

Objavljena slika

Takole bi pa mogla zgledati koda ko jo napišete. Rdeče obkroženo je TITLE.

Naredili smo svojo prvo HTML kodo, čestitam!.

Če znaš vsaj delno to nalogo si pripravljen iti naprej drugače probajte še malo povaditi. ;)

No, ker vemo, da je programiranje cel kup nekih pravil in tako naprej je isto pri HTML-ju, ki se jih bo potrebno naučiti, ker smo že osvojili glavne znake in kako odpreti spletno stran, da jo prikazuje bom začel s kodami, ki jih pišemo v glavno kodo body.

Naj ponovim v body se piše text in še kakšne tabele lahko naredite, ki jih kasneje s CSS-jem uredite (polepšate).

Kode, kode in še enkrat kode :

Sedaj se začne tisti strah, ko slišite koda in se sprašuješ ali bo res težko ali ne... ali bom zmogel ?.
Jaz pravim seveda, da boste, ker ste pripravljeni in vem, da zmorete. Boste videli na koncu si boste rekeli "kaj samo to?".



H1: ta značka je za naslove. Imamo naslove od H1 do H6 pri tem je H1 največja velikost črk in H6 najmanjša. (Glej spodnjo sliko)

Objavljena slika
<p> To so odstavki </p> angl. ( paragraph).

Prej sem omenjal kako narediti blank space in zakaj se uporablja, da lahko naredite presledke še dodatno uporabite : &nbsp;

In, če napišete npr. 3-krat pride takole levo izgled desno koda (glej spodnjo sliko) .


Pri tem kakor koli napišete lahko tudi v eni vrstici ti bo zmeraj šlo v novo vrstico .

Objavljena slika

----------------------------------------------

Dodajanje Povezav je skrajno lahko pri tem moraš poznati samo to kodo in dodati znotraj URL naslov imamo dva sklicevanja relativni in absolutni način.


Relativni način je sklicevanje iz datoteke.


Absolutni način je sklicevanje direkntno iz URL naslova.


Prvo se bomo sklicevali relativno.


Za ločila med imeni map uporabljamo ../


Sklic na datoteko : <a href="mapa/mapa.html"> Ta mapa</a>

Sklicevanje je bilo na mapo, ki je bila narejena še ena mapa, ki se si mogel sklicati na to mapo.


Izgled: Objavljena slika



Sedaj pa še absolutno:
<a href="http://www.racunalni...570-html-in-css"> Klikni me in greš na RN.</a>

Koda bo napisana takole : Klikni me in greš na RN. (z modro barvo). Ko boste kliknili vas bo avtomatsko preusmerilo na Računalniške Novice to velikokrat prav pride, če imate kakšen blog ali kaj podobnega in se sklicujete na druge strani.
(šumniki za enkrat še ne delajo, kasneje pokažem kako nastaviti. )
Takole naj bi zgledala koda.
Objavljena slika


<a href=" dodaj URL "> Dodaj text </a> URL- nebo viden. Vidno bo samo modro obarvana povezava Dodaj text.


---------------------------------------------------------

Naredili smo majhen korak a veliko, če hočemo narediti prelom vrstice angl. (Brake Line).

Uporablja se ta koda : <br /> , ki je ni treba zaključevati kot druge. tukaj je potrebno navesti samo, da je <br in potem />.


Zapomnite si, da se Brake line ne zaključi tako, kot drugi ampak se direktno zaključi <br />


Objavljena slika

Sedaj vidite kako izgleda. Dodaš dva preloma, ki je viden text nižje.


(Z rumeno samo ponazarja kako bi zgledalo brez preloma.)
( Rdeča številka 2= 2 preloma.)


Z Brake linom lahko narediš tudi tako, da prestaviš text nižje

npr: <p> To je koda <br/> ta bo šla nižje <br/> ta pa še nižje


Izgledalo bi takole: To je koda

ta bo šla nižje

ta pa še nižje


Še priložena slika za boljšo predstavo:


Objavljena slika



---------------------------------------------------------

Kdo še ni videl vsaj kakšno črto na kakšni spletni strani. Najbrž ste tudi že kdaj videli horizontalno črto, angl. (horizontal line).

Koda zato je: <hr />

Sama koda naredi črto spodaj ali zgoraj odvisno kam postavite kodo, če kodo postavite pred npr. <p> to je text </p> bo na vrhu, če spodaj bo spodaj.

Za boljše razumevanje sem vam priložil sliko: (Rdeče obarvan HR je na vrhu , modro obarvan spodaj.)

Objavljena slika


Sedaj poglejmo za boljšo predstavo kaj bi bilo, če <hr /> pustimo samo na vrhu. (Glej spodnjo sliko)

Tukaj se dobro vidi, da je tisti <a href ... > spodaj zato je <hr /> črta na vrhu.

Objavljena slika


---------------------------------------------------

No tudi komentar se naredi podobno kot, da bi si zapisal nekaj na list in te potem opominja, da se boš spomnil čez npr. 5 let kaj si sploh delal in je tudi zaradi preglednosti.

HTML komentar se napiše z : <!-- Znotraj tega je komentar -->

Ta komentar se nevidi na spletni strani! Vidi se samo v tvoji kodi.

Izgled komentarja:

Objavljena slika

---------------------------------------------------
Za sedaj smo spoznali:

  • Glavna koda HTML-ja
  • Title (naslov)
  • H1-H6 (naslovi oz. angl. heading)
  • Odstavke angl.(paragraphs to je <p>)
  • <a href="URL naslov"> Klikni me </a> / Spoznali smo kako dodajati povezave.
  • Prelom vrstice angl. (brake line) <br />
  • vodoravna črta angl.(horizontal line) piše se z <hr/>
  • Komentar <!--Notri je komentar-->
---------------------------------------------------


Sedaj bomo spoznali kako narediš :
  • odebeljen text
  • močan text
  • velik text
  • italiac text
  • poudarjen text
  • računalniški text
  • text spodaj in na vrhu.
---------------------------------------------------

Da naredite odebeljen text napišete <p> in znotraj tega napište <b> Ta text je odebeljen</b></p>
Takole: <p><b> Ta text je odebeljen </p> </b>

Potem imamo tukaj močan text <strong>, ki naredi da je...</strong>

Takole npr: <p><strong> Ta text je močan</strong></p>

Sedaj imam vam predstavim še te kode potem bom vam pokazal sliko kako bi moglo vse izgledati. Zato, kar brez strahu probavaj in boš videl, če si prav naredil.

Tukaj imamo še Italiac to je nekakšen ležeči text.

Takole bi se pa napisal: <p><i>Ta text je italic</i></p>.

Imamo samo še tri kode do konca tega. Zato ne obupajte ;).

Zem <em> Poudarite text

Izgled kode: <p><em>Ta text je poudarjen</em></p>

še računalniški text, ki se napiše s <code>

in sedaj res zadnja koda, ki se napiše z <sub> in druga z <sup>

<sub> : naredi, da je text spodaj
<sup> : naredi, da je text na vrhu


Na hitro kaj vse je:
  • Odebeljen text z <b>
  • Močan text z <strong>
  • Velik text <big>
  • Italic text <i>
  • Poudarjen text <em>
  • text spodaj in zgoraj <sup> in <sub> (glej spodnjo sliko za boljšo predstavo)
Zapomni si vedno zaključuj kodo !


Ste probavali, če vam deluje ?. No sedaj lahko pogledamo kako izgleda. ( spodnja slika)

Objavljena slika


Naj povem, da je teh kod res zelo veliko zato nebom druge izpostavljal, ker so manj uporabljene, če vas pa res zanimajo vse kode vam pa priporočam tale link: http://www.w3schools..._formatting.asp . A ko vadite kode pišite zmeraj v beležko samo tako se boste naučili. Ne priporočam, da pišete s tem urejavalnikom na tej spletni strani.


---------------------------------------------------

Text lahko pobarvate tudi s HTML-jem a tega ne priporočam, ker se to, da s CSS-jem lažje ampak vseeno vam bom pokazal.

HTML barvanje npr : <p> <font size="5" face="Times New Roman" color="red"> Ta text bo rdeč s Times New Roman fontom in velikostjo 5px.</p>

Px = Pixel

Font-size : Velikost Texta(5 px)
Face: Kakšen Font (Arial, Times New Roman in drugi... )
Color : Rdeča barva texta

Zaradi tehnične napake, ker se je veliko zbrisalo se oproščam!. Upam, da bo kmalu vse urejeno.

#2 fitipaldi

fitipaldi

    Govorec

  • Members
  • 2 549 objav
  • Spol:Nedoločen

Objavljeno 11 marec 2012 - 02:53

Eee, bravo! Čimveč takih! ;)

Gre pod sticky. :)

#3 DaMachk

DaMachk

    Gospod s kravato

  • Members
  • 1 446 objav
  • Spol:Moški

Objavljeno 11 marec 2012 - 11:49

Lepo, edino o CSSu nisi posebej veliko napisal ;)

#4 FreakDizajn

FreakDizajn

    Iznajdljivec

  • Members
  • 950 objav
  • Spol:Moški
  • Interesi:Imam rad adrenalinske športe, ko sem doma oblikujem, ob petkih pa rad hodimo ven na žurke;)

Objavljeno 11 marec 2012 - 12:47

Lepo, edino o CSSu nisi posebej veliko napisal ;)

Taprvo je HTML potem prideš še CSS, brez osnov nemoreš, kar s CSS-jem začeti.

#5 klop

klop

    Iznajdljivec

  • Members
  • 954 objav
  • Spol:Moški
  • Interesi:Elektronika in računalništvo

Objavljeno 25 april 2012 - 14:05

Pozdravljeni, bom kar tukaj vprašal. Upam, da mi lahko kdo pomaga. Imam težavo pri prikazovanju gumba. Na brskalniku internet explorer mi prikazuje tako kot mora ( na sredini ) pri mozilli pa mi prikazuje malce drugače. Rad pa bi da se mi pri obeh prikaže na sredini. Uporabljam pa css.

Tako bi moralo kazati:

Objavljena slika

Vendar mi kaže tako:

Objavljena slika

Moj css pa izgleda tako:

.oblika_iskanja

{

background:#FFFFFF url(search.png) no-repeat 4px 4px;
padding:4px 4px 4px 22px;
border:0px solid #CCCCCC;
width:350px;
height:28px;
vertical-align:middle;



}

.iskanje

{

cursor: pointer;
cursor: hand;
height:28px;
vertical-align:middle;

}

#6 Pentium

Pentium

    Spammer

  • Administrators
  • 3 422 objav
  • Spol:Moški
  • Kraj:Ljubljana

Objavljeno 26 april 2012 - 08:24

Ti samo firefox prikazuje narobe ali tudi chrome, opera itd?
Najbrž boš moral za ostale brskalnike malo prilagoditi, ker vsak prikazuje malo drugače...

Pa seveda upam, da si na začetku uporabil kakšen reset.css ali vsaj
* {
margin:0;
padding:0;
}

#7 Simon Hocevar

Simon Hocevar

    Sufler

  • Administrators
  • 220 objav
  • Spol:Moški

Objavljeno 26 april 2012 - 08:40

Vse pohvale FreakDeziner-ju!
HTML in CSS sta zadnje čase res veliko v uporabi...moram sledit, da me čas ne prehiti :)

#8 xfirestorm

xfirestorm

    /dev/null

  • Moderators
  • 3 783 objav
  • Spol:Moški
  • Kraj:Murska Sobota
  • Interesi:Airsoft

Objavljeno 26 april 2012 - 09:33

Kaj je .oblika_iskanja in kaj je .iskanje?

vertical-align, se ponavadi ne uporablja na tak način, ker ne ve pozicionirat znotraj block elementa. Vertical-align pozicionira samo "inline" elemente, torej recimo sliko ob tekstu, ali gumb ob tekstu.

Če imaš določeno višino tega zelenega pasu in višino gumba, lahko preprosto pozicioniraš gumb v sredino z uproabo margina.

Torej če je ta okvir okrog visok 40px, gumb pa 20px, rabiš zgoraj in spodaj 10px "placa" da bo na sredini. In gumbu daš margin-top:10px; in je to to.

#9 klop

klop

    Iznajdljivec

  • Members
  • 954 objav
  • Spol:Moški
  • Interesi:Elektronika in računalništvo

Objavljeno 26 april 2012 - 12:49

Aha hvala vsem za pomoč. Sedaj mi pa dela :) nisem dodal reseta na začetku :)

#10 FreakDizajn

FreakDizajn

    Iznajdljivec

  • Members
  • 950 objav
  • Spol:Moški
  • Interesi:Imam rad adrenalinske športe, ko sem doma oblikujem, ob petkih pa rad hodimo ven na žurke;)

Objavljeno 01 maj 2012 - 16:04

Kmalu bom začel znova pisati. Trenutno se mi neda, poleg imam pa še druge zadeve.



#11 klop

klop

    Iznajdljivec

  • Members
  • 954 objav
  • Spol:Moški
  • Interesi:Elektronika in računalništvo

Objavljeno 02 maj 2012 - 14:05

Pozdravljeni, prosil bi vas še za eno stvar. Zanima me zakaj mi v mozilli kaže pri tekstu senco pri internet explorerju pa ne. Rad bi pa naredil tako da je nebi imel sence nikjer ( uporabljam css)

Primer:

s senco ( mozilla )

Objavljena slika

ineternet explorer


Objavljena slika



Prosim za pomoč in lep pozdrav

#12 FreakDizajn

FreakDizajn

    Iznajdljivec

  • Members
  • 950 objav
  • Spol:Moški
  • Interesi:Imam rad adrenalinske športe, ko sem doma oblikujem, ob petkih pa rad hodimo ven na žurke;)

Objavljeno 02 maj 2012 - 21:29

Živjo! Najbrž delaš senco s text-shadow:10px 10px 2px #333333. Meni deluje super v Chromu in Firefoxu. Nažalost pa ne v IE.

Mogoče lahko poveš katero kodo uporabljaš ?.

Lep pozdrav

http://westciv.com/tools/shadows/ Imaš tudi tukaj dober generator, da se ne mučiš ;).

#13 klop

klop

    Iznajdljivec

  • Members
  • 954 objav
  • Spol:Moški
  • Interesi:Elektronika in računalništvo

Objavljeno 02 maj 2012 - 21:41

Aha, jaz sem mislil, da nebi imel sence ( tako da bi bilo povsod enako ). Drugače pa sem poskusil s tem ukazom text-shadow

#14 FreakDizajn

FreakDizajn

    Iznajdljivec

  • Members
  • 950 objav
  • Spol:Moški
  • Interesi:Imam rad adrenalinske športe, ko sem doma oblikujem, ob petkih pa rad hodimo ven na žurke;)

Objavljeno 02 maj 2012 - 21:43

Ti sedaj dobro deluje ?.

#15 xfirestorm

xfirestorm

    /dev/null

  • Moderators
  • 3 783 objav
  • Spol:Moški
  • Kraj:Murska Sobota
  • Interesi:Airsoft

Objavljeno 02 maj 2012 - 22:29

text-shadow je CSS3 parameter katerih pa IE ne mara preveč.
Če hočeš senco tudi v IE, potem rabiš:

filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3, Color=#99cc99);

Če pa nočeš nikjer sence pa pregled če imaš kje zapisan text-shadow v svojem CSS.

#16 klop

klop

    Iznajdljivec

  • Members
  • 954 objav
  • Spol:Moški
  • Interesi:Elektronika in računalništvo

Objavljeno 03 maj 2012 - 08:50

Lol samo res mel sem še enkrat napisan pa nisem videl, sedaj mi deluje brez senc hvala vsem za pomoč

#17 klop

klop

    Iznajdljivec

  • Members
  • 954 objav
  • Spol:Moški
  • Interesi:Elektronika in računalništvo

Objavljeno 03 maj 2012 - 14:13

Evo pa sem spet jaz. Zopet sem se znašel pri problemu. Tokrat imam težavo z opero (brskalnikom). Pri internet exploru in mozilli mi lepo prikazuje okno, pri operi pa imam zamaknjeno. Zanima pa me kako lahko naredim, da bi v css napisal ukaz, da bi veljal samo za opero. Za internet explorer sem naredil tako: margin-top:3px\9;

Hvala

#18 Pentium

Pentium

    Spammer

  • Administrators
  • 3 422 objav
  • Spol:Moški
  • Kraj:Ljubljana

Objavljeno 03 maj 2012 - 14:54

Ponavadi je dobro na začetku cssja zapisati:
* {
margin: 0;
padding: 0;
}
da ti izniči vse nastavitve cssja v določenih brskalnikih, ker ima vsak brskalnik že svoj CSS in če ti nimaš za določeno zadevo zapisane vrednosti jo prevzame od brskalnika.
S tem ti izničiš te vrednosti in zapišeš svoj CSS tako kot ti želiš in bo tvoja stran povsod enaka (v večini primerov).

#19 xfirestorm

xfirestorm

    /dev/null

  • Moderators
  • 3 783 objav
  • Spol:Moški
  • Kraj:Murska Sobota
  • Interesi:Airsoft

Objavljeno 03 maj 2012 - 16:47

Evo pa sem spet jaz. Zopet sem se znašel pri problemu. Tokrat imam težavo z opero (brskalnikom). Pri internet exploru in mozilli mi lepo prikazuje okno, pri operi pa imam zamaknjeno. Zanima pa me kako lahko naredim, da bi v css napisal ukaz, da bi veljal samo za opero. Za internet explorer sem naredil tako: margin-top:3px\9;

Hvala


CSS stili samo za določene brskalnike se lahko zapišejo samo v datoteki kje imaš HTML in ne tam kje imaš CSS. HTML ponuja neke "if" stavke ki lahko določiš posamičen browser in potem znotraj tega "if" stavka daš not CSS za določen brskalnik.

#20 klop

klop

    Iznajdljivec

  • Members
  • 954 objav
  • Spol:Moški
  • Interesi:Elektronika in računalništvo

Objavljeno 03 maj 2012 - 19:09

Sedaj sem naredil in delno deluje :) hvala. Samo ne vem zakaj v linuxu, ki ima enako naloženo firefox ne prikaže prav. Moja rešitev je pa naslednji ukaz:

<style type="text/css">
@-moz-document url-prefix() {
.oblika_iskanja
{
margin-top:6px;
}
}
</style>



Dodaj odgovor



  


0 član(ov) bere to temo

0 članov, 0 gostov, 0 anonimnih uporabnikov