HTML za početnike | informatikakp1

Sami početak

Beležnica je zajednički tekst editor na Vindovs-baziranim računarima (obično nalaze pod programi> Pribor meniju) i Mac OS Ks računari dolaze u paketu sa TektEdit kupite bilo koji program koji vam omogućava da petljanje sa tekstom će to. Ukucajte ovo na svoj editor teksta:

This is my first web page

Sada napravite folder pod nazivom " HTML " gde god želite da sačuvate datoteke na vašem računaru i sačuvajte fajl kao " mifirstpage.html ". Budite oprezni. Važno je daekstenzija je navedeno " HTML . " - Neki tekst editor, kao što je Notepad , automatski će ga sačuvati kao inače " txt . ". Takođe je potrebno da se osigura da vaš fajl se čuva kao običan tekst. Tekt Edit, na primer, će početi nove datoteke kao "Rich tekt", koji sadrži mnogo statista za oblikovanje, po defaultu . U takvim slučajevima, idi u preferencijama i uverite se da proverite opciju format " Čist tekst " pre nego što napravite novu datoteku. Da pogledate HTML fajlova, oni čak ne moraju da budu na Internetu. Otvorite veb pregledač kao što je Chrome, Firefok, Safari ili Internet Ekplorer i u adresno polje, gde obično kucate veb adrese, tip u lokacije datoteke koju upravo spasao

( na primer , " C : \ html \ mifirstpage.html " ) i udario povratak. Alternativno, idite u File meniju pretraživača, izaberite Otvori , i potražite datoteku .Pov. Tu je. Vaš prvi veb stranica. Kako uzbudljiv. I sve je to trajalo je nekoliko otkucani reči. Mi smo ovde, rekao je da koristite osnovni tekst -editor, kao što je Notepad, ali možete biti u iskušenju da koriste namenski softverski program, kao što je Adobe Dreamveaver. Trebalo bi da budete veoma oprezni prilikom korišćenja ovih programa, naročito ako ste početnik, jer oni često bacaju u nepotrebne ili ne- standardnog koda da " pomogne " Hvala. Ako ste ozbiljni o učenju HTML, treba da pročitate kroz tutorijal kao što je ovo prvo, tako da bar imate osnovno razumevanje o tome šta se dešava. Softverski programi kao što su ovi nikada neće vam dati istu kontrolu nad veb stranice kao kodiranje rukom. Ako odlučite da koristite specijalizovani softver za uređivanje koda, preporučujemo onaj u kome ste još uvek ručno kodiranje. Oni mogu, u stvari, biti od pomoći, naročitoviše napredovala ste postali, u smislu kod sintakse i upravljanje datotekama.

Oznake, atribute i elementi

Iako su osnove HTML je običan tekst, moramomalo više da galepo i sjajna HTML dokument napraviti.

Oznake

Osnovna struktura HTML dokumenta obuhvata tagove , koji okružuju sadržaj i smisao primenjuju na njega. Promenite svoj dokument , tako da izgleda ovako :

< ! DOCTIPE html

<html>

<bodi>

Ovo je moja prva stranica

< / bodi>

< / html >

Sada sačuvajte dokument ponovo, vratite se na veb pretraživača i ponovo učitate stranicu.

Izgled stranice neće promenio uopšte, ali svrha HTML je primeniti značenje, a ne prezentacija , a ovaj primer je sada definisan neke osnovne elemente veb stranice.

Prva linija na vrhu, < ! DOCTIPE html >, jevrsta dokumenta deklaracija i omogućavapretraživač znam koji ukus HTML koju koristite ( HTML5 , u ovom slučaju ). Veoma je važno da se držimo ovo - Ako ne uradite, pretraživači će pretpostaviti da stvarno ne znam šta radite i deluju na veoma čudan način.

Da se vratim na stvar, <html> jeotvaranje oznaka koji počinje off stvari i govori brovser koji je sve između toga i < / html> zatvaranja tagHTML dokumenta. Stvari između <bodi> i </ bodi> jeglavni sadržaj dokumenta koji će se pojaviti u prozoru pregledača.

Zatvaranje oznake

< / Bodi> i < / html > stavioblizu njihovim elementima ( više o elementima u trenutku ).

Nisu sve oznake su oznake zatvaranje ovako ( <html> < / html > ) neke oznake, koje ne obmotana sadržaj će se zatvoriti . Linija - pauza oznaka , na primer , izgleda ovako : <br> -red ne držite bilo koji sadržaj takoveselo oznaka sedi po svojoj usamljenoj sebe. Mi ćemo naići ovih primera kasnije . Sve što treba da zapamtite je da treba sve oznake sa sadržajem između njih biti zatvorena , u formatu otvaranja tag → → sadržaj zatvaranja tag. To nije, strogo govoreći, uvekuslov, ali to jekonvencija koristimo u ovim uputstvima, jer je to dobra praksa da rezultira čistiji, lakše razumeti kod.

Možda naići "Self - završne oznake", pri čemuoznaka BR, na primer, će izgledati "<br /> " umesto samo " <br>". To jeostatak KSHTML, oblika HTML zasnovane na drugom jeziku za označavanje naziva KSML. HTML5 je mnogo više nego što se rashladiti KSHTML i da će biti srećan sa oba formata. Neki programeri vole jedan način, neki više voledruge. Mi bacio novčić i odlučio da se drži sa jednostavniju verziju.

Naslov stranice

Da biste dodali naslov na svoju stranicu, promenite šifru, tako da izgleda ovako :< ! DOCTIPE html >

<html>

<head>

<title> Moja prva veb stranica < / title>

< / head>

<bodi> Ovo je moja prva stranica< / bodi>

< / html >

Dodali smo dve nove elemente ovde, koje počinju sa glave tag i naslov tag ( i videti kako obe ove blizu). Elemenat glave (ono što počinje saotvaranjem <head> oznaku i završava se sa </ head > zatvaranja tag ) se pojavljuje pred tela elementa ( počevši od <bodi> i završava sa </ bodi > ) i sadrži informacije o stranici. Informacije u elementu glave ne pojavi u prozoru pregledača. Videćemo kasnije da drugim elementima mogu pojaviti unutar elementa glave, alinajvažniji od njih jenaslov element. Ako pogledate ovaj dokument u pretraživaču ( čuvanje i ponovo kao i ranije ), videćete da je" Moja prva veb stranica " će se pojaviti na kartici ili naslovnoj liniji prozora ( nestvarni platno oblast). Tekst koji ste stavili u naslov oznake između postaonaziv dokumenta ( surprise! ). Ako ste bili da dodate ovu stranicu u vaše omiljene " (ili " markera ", u zavisnosti od pregledača ), videli biste dase naslov i tamo koristi.

Paragraf

Vrati se u svoj editor teksta i dodati još jednu liniju na stranici :

< ! DOCTIPE html >

<html>

<head>

<title> Moja prva veb stranica < / title>

< / head>

<bodi> Ovo je moja prva stranica Kako uzbudljivo< / bodi>

< / html >

Pogledajte dokument u brovseru. Možda ste očekivati vaš dokument da se pojavi kao što ste ga otkucali, na dve linije, ali umesto toga trebalo bi da vidite nešto slično ovome :Ovo je moja prva veb stranica Kako uzbudljivo. To je zato što veb pregledači obično ne preuzima nikakvu obaveštenje o tome šta se postroje vaš kod je na. Ona takođe ne preuzima nikakvu obaveštenje o prostoru ( da bi dobili isti rezultat ako ukucate " Ovo je moja prva veb strana Kako uzbudljivo " ) .Ako želite da se pojavi tekst na različitim linijama , odnosno , ako tu nameru da se dva različita bloka teksta ( jer, zapamtite, HTML je oko značenja, a ne za prezentaciju) , potrebno je da se eksplicitno navede da. Promenite svoje dve linije sadržaja, tako da oni izgledaju ovako :<p> Ovo je moja prva veb stranic

< / p >

<p>

Kako uzbudljivo

< / p >P oznaka se koristi za st. Pogledajte rezultate ove. Dve linije će se sada pojaviti na dve linije jer ihpretraživač prepoznaje kao zasebne st .Razmislite o HTML sadržaja kao da jeknjiga - sa stavovima prema slučaju .isticanjeMožete istaći tekst u pasusu koristeći ih ( naglasak ) i jaka ( jak značaj). <p> Da, to zaista jeste <em>

< / em > uzbudljivo. <strong>Upozorenje: < / strong > nivo uzbuđenja može izazvati glavu da eksplodira < / p >. Tradicionalno, pretraživači će ih prikazati u kurzivu i jak u smeo podrazumevano, ali oni nisuisti kao ja i b oznake koje ( iako su tenuousli redefinisana u HTML5 ) imaju svoje poreklo u italik i bold - zapamtite - HTML nije za prezentaciju. Ako želite da naglasite nešto vizuelno ( pravljenje nešto kurzivom, na primer ), skoro sigurno želite da ga daju opšti naglasak. Ne možete govoriti u kurzivu. RedovaLinija - pauza oznaka može da se koristi na odvojenim linijama kao što je ovaj :Ovo je moja prva veb stranica <br> Kako uzbudljivo nema sadržaja uključeni u razbijanje linije tako da nema zatvaranja tag. Moglo bi se iskušenju da preko korišćenje preloma redova i br ne treba koristiti ukoliko dva bloka teksta su namenjeni da budu odvojene jedna od druge ( jer ako je to ono što želite da uradite vi verovatno želite p oznaku ).

Naslovi

Oni su H1, H2, H3, H4, H5 i H6, h1 kao svemoćni car naslovima i h6 Biti najniži pleb. Promenite kod na sledeće: <! DOCTIPE html>

<html>

<head>

<title> Moja prva veb stranica </ title>

</ head>

<bodi>

<h1> Moja prva veb stranica </ h1>

<h2> Šta je ovo </ h2>

<p> jednostavnu stranicu sastavio koristeći HTML </ p>

<h2> Zašto je ovo </ h2>

<p> biste saznali HTML </ p>

</ bodi>

</ html>

Imajte na umu da H1 tag se koristi samo jednom, kao glavni naslovom stranice. h2 na h6, međutim, može da se koristi kao često po želji, ali uvek treba koristi kako bi, kako su namenjeni. Na primer, treba da bude h4 podnaslov jedne H3, koji bi trebalo da pod-zaglavlje H2.

Листе

Neuređene liste i naredili liste rade na isti način, osim štobivši se koristi za ne- sekvencijalne liste sa listom stavki obično prethodi metaka idrugo je za sekvencijalne liste, koje su obično predstavljene inkrementalnih brojevima. Ul oznaka se koristi za definisanje neuređene liste iola oznaka se koristi za definisanje naručene liste. Unutar liste, Li oznaka se koristi za definisanje svaku stavku liste. Promenite kod nasledeće :

< ! DOCTIPE html >

<html>

<head>

<title> Moja prva veb stranica < / title>

< / head>

<bodi>

<h1> Moja prva veb stranica < / h1 >

<h2> Šta je ovo < / h2 >

<p> jednostavnu stranicu sastavio koristeći HTML < / p >

<h2> Zašto je ovo </ h2 >

<ul>

<li> biste saznali HTML < / p>

<li> Da pokaže < / p>

<li>

Zato sam pao u ljubavi sa mojim računarom i žele da joj daju neke HTML voli. < / p> < / ul >< / bodi>< / html >Ako pogledate ovo u vašem pretraživaču , videćete nabrajanja . Jednostavno promenite ul oznake na ol i videćete da će spisak postati brojevima. Liste mogu biti uključeni u listama da se formira strukturisan hijerarhiju stavki. Zamenite iznad liste šifru sasledećim :

<ul>

<li> biste saznali HTML < / p>

<li> Da pokaže <ol>

<li> Za mog šefa < / p>

<li> Mojim prijateljima < / p>

<li> Za moju mačku < / p>

<li> Za malu patku razgovora u mom mozgu < / li>

< / ol >

< / p>

<li>

Zato sam pao u ljubavi sa mojim računarom i žele da joj daju neke HTML voli. < / p>< / ul >Et voila. Lista unutar liste. A ti bi mogao staviti još jedan spisak u koji. I još u to. I tako dalje i tako dalje.

Linkovi

Sidro oznaka () se koristi da definiše vezu, ali takođe treba da dodate nešto na sidro tag -destinacije na linku .Dodajte ovo u dokumentu :

< ! DOCTIPE html >

<html>

<head>

<title> Moja prva veb stranica < / title>

< / head>

<bodi>

<h1> Moja prva veb stranica < / h1 >

<h2> Šta je ovo < / h2 >

<p> jednostavnu stranicu sastavio koristeći HTML < / p >

<h2> Zašto je ovo </ h2 >

<p> biste saznali HTML < / p >

<h2> Gde pronaći tutorijal < / h2 >

<p> <a href="http://vvv.htmldog.com"> HTML Pas < / a>

< / p >

< / bodi>

< / html >

Odredište linka je definisana u href atributu taga. Veza može biti apsolutna, kao što su " http://vvv.htmldog.com ", ili to može biti u odnosu na trenutnu stranicu. Dakle, ako, na primer, imali ste još jedan fajl koji se zove " fliingmoss.html " u istom direktorijumu onda linija koda će jednostavno biti <a href="fliingmoss.html"> čudo mahovine u letu < / a> ili tako nešto ovako. Veza ne mora da se poveže na drugu HTML datoteku, ona može povezati na bilo koju datoteku bilo gde na Internetu. Veza može takođe poslati korisniku na drugi deo iste strane na kojoj se nalaze. Možete da dodate atribut ID na bilo koji tag, na primer <h2 id="moss"> Moss </ h2 >, a zatim povezati na njega pomoću otprilike ovako: <a href="#moss"> Idi na mahovina < / a>. Izbor na ovu vezu dođite stranicu ravno do elementa sa tim ID.

Slike

Img tag se koristi da stavi sliku u HTML dokumentu i to izgleda ovako:

<img src="http://vvv.htmldog.com/badge1.gif" vidth="120" height="90" alt="HTML Dog">

Src atribut govori brovser gde da pronađe sliku. Kao oznaku, to može biti apsolutna, kao štogore primer pokazuje, ali je obično relativna. Na primer, ako kreirate svoju sliku i sačuvajte ga kao" alienpie.jpg" u direktorijumu pod nazivom" slike" ondabi broj < img src =" slike / alienpie.jpg" ... Širinu i visinu atributi su neophodni, jer ako su isključene, pretraživač će težiti da izračuna veličinu kao slike opterećenja, umesto kada se stranica učita, što znači daraspored dokumenta može skakati okolo dokstranica se učitava. Alt atribut jealternativa opis. Ovo jerazmatranje pristupačnost, pružanje značajne informacije za korisnike koji su u stanju da vidi sliku (ako su vizuelno sluhom, na primer ). Imajte na umu da, kao i br tag, jerimg elemenat ne priloži bilo koji sadržaj, nije potrebno zatvaranja tag. Izgradnja slika za veb jemalo izvan delokruga ovog sajta, ali vredi napomenuti par stvari... Najčešće korišćeni formati koji se koriste za slike su JPEG, GIF, PNG i oni su komprimovani formate, a imaju veoma različite koristi .JPEG ( izgovara" Jai - PEG " ) koristi matematički algoritam za komprimovanje slike i da će iskrivitioriginalni blago. Nižikompresija, većaveličina datoteke, alijasnijeslike. JPEG se obično koriste za slike kao što su fotografije. GIF ( izgovara se " jif " ) ne može imati više od 256 boja, ali oni održavaju boje originalne slike. Manjibroj boja koje imate na slici, donjiveličina fajla će biti. GIF takođe omogućiti bilo koji piksel na slici da bude transparentan. GIF se obično koriste za slike sa solidnim bojama, kao što su ikone ili logoa. PNG ( izgovara "ping " ) replicira boje, slično kao GIF, ali omogućava 16 miliona boja, kao i alfa transparentnost ( koji je ,prostor može da bude 50 % transparentna ). PNG se obično koriste za svestrane slike u više složenih projekata, ali oni nisu u potpunosti podržane od strane nekih starijih pregledačima. Veb je zauvek sve brži i brži, ali vi očigledno žele vaše veb stranice da preuzmete što je brže moguće. Korišćenje slike izuzetno visoke rezolucije se ne radi svoj ili vašeg korisnika propusnog opsega ( ili strpljenje ) nikakve usluge. Kompresija slike jeodličan alat i treba da uspostavi ravnotežu između kvaliteta slike i veličine slike. Većina modernih Manipulacija slikama programi omogućavaju vam da kompresuje slike i najbolji način da se shvati šta je najbolje rešenje za sebe je suđenje i greška...

Tabele

Postoji veliki broj tagova koji se koriste u tabelama, i da u potpunosti uhvati u koštac sa tim kako oni rade je verovatno najteži područje ove HTML Tutorial početnike. Kopirajte sledeći kod u telo dokumenta, a onda ćemo ići kroz šta radi svaki tag:

<table>

<tr>

<td> Red 1, ćelija 1 < / td >

<td> Red 1, 2 ćelija < / div >

<td> Red 1, ćelija 3 < / div >

< / div >

<tr>

<td> Rov 2, ćelija 1 < / td >

<td> Rov 2, ćelija 2 < / td >

<td> Rov 2, 3 ćelija < / td >

< / div >

<tr>

<td> Red 3, ćelija 1 < / td >

<td> Red 3, ćelija 2 < / td >

<td> Red 3 , ćelija 3 < / div >

< / div

<tr>

<td> Red 4, ćelija 1 < / td >

<td> Red 4, ćelija 2 < / td >

<td> Red 4, 3 ćelija < / td >

< / div >

< / table >

Element tabela definiše tabelu. Element tr definiše red tabele. Element TD definiše podataka ćeliju. To mora da bude zatvorena u tr oznake, kao što je prikazano iznad. Ako zamislite 3k4 tabelu, što je 12 ćelija, trebalo bi da postoji četiri tr elementi za definisanje redove i tri elementa td unutar svakog od redova, što je ukupno 12 TD elemenata.