Kako postaviti pametne telefone i računala. Informativni portal
  • Dom
  • Zanimljiv
  • Gdje početi učiti html. Prvi koraci u kodiranju

Gdje početi učiti html. Prvi koraci u kodiranju

Ovaj dio stranice u potpunosti je posvećen dvama jezicima za izradu web stranice, odnosno HTML-u i CSS-u. Ovdje možete učiti jezike korak po korak, naučiti sve od osnova do najtežih trenutaka.

Ovaj odjeljak izgrađen je na principu postupnog proučavanja materijala, stoga se prije svakog naslova lekcije u HTML-u i CSS-u nalazi broj koji odgovara rednom broju lekcije. To je prirodno u slučaju da želite naučiti sve od samih osnova i ne praviti si nered u glavi. Ako već znate nešto o HTML-u i CSS-u, ovdje također možete pronaći znanje koje nedostaje ili produbiti ono što ste već naučili.

V ovaj odjeljak objavljene lekcije o standardima jezika HTML5 odnosno CSS3, ako postoje novije verzije ovih jezika, one će se također odraziti na nove lekcije ovog odjeljka, a to ćete sigurno saznati.



Vjerojatno je svaka osoba koja se barem jednom u životu susrela s stvaranjem web stranice sigurno čula za takav paket kao što su html i css, mogu s povjerenjem reći da ako želite sami izraditi web stranice, onda možete nemojte bez znanja o ove dvije stvari.

Nakon što ste primili opći pojmovi očito postoji dvosmislena slika o tome što je html u vašoj glavi, i mislim da to nije iznenađujuće. Vrijeme je da krenete izravno u praksu i izradite svoj prvi html dokument.

Kao i html, CSS ima svoje karakteristike, pravila i strukturu. U ovom vodiču upoznat ću vas s osnovnim pojmovima CSS jezik, o njegovoj strukturi, uređaju i mi ćemo učiniti prvi CSS tablica stylesheet i naučite kako povezati stylesheet s html dokumentom.

Selektori u CSS-u su temelj samog jezika i njihovo učenje i razumijevanje je vrlo važno, pa ću vam u ovoj lekciji reći o još nekoliko vrsta selektora i opisati njihove mogućnosti.

Vrlo važna točka u izradi web stranice je rad s tekstom, a kao što razumijete, također morate znati raditi s tekstom u html-u, te znati koje oznake postoje i kako se mogu koristiti.

Nakon što ste naučili sve html oznake za rad s tekstom, sada je vrijeme da prijeđete direktno na CSS rad s tekstom, što će značajno proširiti vaše znanje i mogućnosti.

CSS ima ogroman broj svih vrsta prikladnih i kvalitativno mijenjanih izgled svojstva i nastavljamo proučavati CSS rad s tekstom i u ovom ćemo tutorialu dublje proći u temu rada s tekstom i pogledati nova svojstva teksta.

Rad sa slikama pri izradi sa stranice, jedan od ključne točke, kao i kod izrade dizajna, također s jednostavnim izgledom ili pisanjem bilo kojeg materijala za svoju stranicu.

CSS uvelike proširuje mogućnosti rada s bilo kojim html objekti, u ovom vodiču želio bih vam detaljno reći o tim parametrima koji se mogu primijeniti na slike.

Sada je teško zamisliti osobu koja radi s internetom i ne zna što je html. Mnogi ljudi žele naučiti ovaj jezik. Čini se, što je jednostavnije - postoji zastrašujuće ogroman broj knjiga posvećenih ovoj temi. Je li html toliko složen da su mu posvećene ogromne količine?

U ovom članku želim pokušati dati osnovna znanja o ovoj temi onim ljudima koji žele naučiti layout, poslati ih u pravom smjeru. To ne znači da je ono što sam napisao nepromjenjiva istina. Samo želim novopridošlicama dati malo općih smjernica.

Za početak, želio bih voditi grubi plan ovog članka. Ako nekoga nešto ne zanima, može to sigurno preskočiti.

  • Koje oznake trebate znati
  • Kako to učiniti lijepim?

Što je html i zašto je potreban

html nije programski jezik kako mnogi misle. To je samo jezik za označavanje. Njegova je svrha definirati strukturu dokumenta. Ako vam netko kaže da je za određivanje izgleda stranice potreban html – nemojte mu vjerovati! Ova osoba je ili iz prošlosti, ili ne razumije sasvim tu temu.

html definira semantički (smisleni) raspored elemenata. Koji odlomak slijedi koji, koji je sadržaj logički povezan, a koji su potpuno različiti skupovi podataka, gdje umetnuti sliku i kamo ići klikom na ovaj link. U principu, da se sada za izgled stranice koristi samo html, teško da bi sve stranice izgledale jako drugačije. Ako netko kaže da je instalacija pozadinska slika- html zadatak - pljunuti mu u lice ne vjeruj mu.

HTML, kao i mnoge druge tehnologije povezane s webom, održava W3C. Ako želite sve znati iz prve ruke, posjetite njihovu web stranicu. Ali moram vas upozoriti: specifikacije koje je objavio W3C su savjetodavne prirode, tako da preglednici uvijek različito tumače istu stvar. html koda... To čini izgled mnogo težim nego što zapravo jest.

Trenutno je najnovija html specifikacija 4.0. također postoje, xhtml jeziku, koji je puno zahtjevniji za programera, jer sadrži strože standarde. Dakle, oznake u html-u mogu se pisati u svakom slučaju, a u xhtml-u - samo malim slovima. itd. Držim se xhtml specifikacije i opisat ću je u nastavku.

html jezik sastavlja skup oznaka. To su smjernice pregledniku koje mu govore o strukturi vašeg dokumenta. Napomena: struktura. Za izgled danas zaslužna je još jedna tehnologija - CSS, o čemu će biti riječi u nastavku. Da biste naučili html, zapravo morate naučiti skup oznaka i njihovih atributa i to je to! Možete početi stvarati testna mjesta.

Koje oznake trebate znati?

Da biste započeli, morate naučiti mali skup oznaka. Sada ću dati njihov popis, grupiran prema određenim kriterijima. (Grupiranje je moja subjektivna vizija subjekta i ne tvrdi da je apsolutno istinito)

  • Osnovno: html, glava, naslov, tijelo;
  • Strukturni: div, raspon;
  • Tekst: p, ul, ol, li, h1-h6, br, pre;
  • Tablice: stol, tr, td;
  • Linkovi: a;
  • Multimedija: img, objekt;
  • Okviri: frameset, frame, iframe;
  • Obrasci: obrazac, unos, tekstualno područje, oznaka, odabir, opcija;
  • Izborno: hr;
  • Posebno: skripta, poveznica, meta;

Kao što vidite, nema toliko oznaka. Međutim, njihovo učenje može potrajati značajno vrijeme jer mnoge od ovih oznaka mogu biti opskrbljene atributima zbog kojih se ti elementi ponašaju drugačije.

Netko bi se mogao uzrujati i reći da poznaje druge oznake koje rade. Da, doista, dao sam popis ne svih oznaka koje preglednici podržavaju. Međutim, ove oznake su osnovne, a osoba koja ih poznaje može reći da zna html. Namjerno nisam uključio u svoj popis oznake poput fontova, koje su zastarjele. Ove oznake su toliko loše da o njima nema smisla niti govoriti, jer sada postoje puno moćniji alati koji vam omogućuju kontrolu izgleda stranica i njihovih dijelova. Osobno smatram potrebnim i dovoljnim poznavati gornje oznake. Jer ostali su ili potrebni vrlo rijetko, ili uopće nisu potrebni. Stoga predlažem da počnete učiti html učenjem ovih oznaka.

Kako to učiniti lijepim?

Svatko tko pokuša stilizirati stranicu pomoću gornjih oznaka završit će s prilično skromno oblikovanom stranicom koja će biti bijela s crnim tekstom i plavim poveznicama. Netko će možda moći mijenjati pozicioniranje blokova informacija pomoću tablica i poravnanja atributa. Netko će pokušati animirati stranicu umetanjem slika. Međutim, postoji specijalni alat za prilagođavanje izgleda stranica. Ovo je CSS.

Sada gotovo nijedna stranica nije potpuna bez aplikacije CSS tehnologije... Upravo je CSS-u povjerena misija definiranja formatiranja dokumenta. Pozadine stranice, padding, poravnanje, fontovi, boje i drugo su u djelokrugu CSS-a. Stoga se sada preporuča ne koristiti oznake i atribute koji određuju izgled stranica i elemenata, već umjesto toga koristiti CSS pravila. Kako se prijaviti CSS je boljičitati u knjigama. Ali moja je poanta da ako naiđete na oznaku ili atribut koji određuje izgled elementa, razmislite 10 puta prije nego što ga upotrijebite! Bolje saznajte koje je CSS pravilo odgovorno za prikazivanje elementa na način na koji želite da se pojavi. Uz vrlo rijetke iznimke, takvo pravilo se uvijek nađe.

Koji je najbolji način za početak učenja izgleda?

Najbolje je početi s kodiranjem nakon što shvatite kako web funkcionira. Osobno bih napravio ovakav plan treninga:

  1. Načela učenja web rad i strukture klijent-poslužitelj
  2. Učenje oznaka i njihovih atributa, s praktične vježbe na njihovu primjenu
  3. Naučite CSS pravila uz praktične upute o tome kako ih primijeniti
  4. Istraživanje rasporeda tablice
  5. Izgled jednostavnog izgleda s tablicama
  6. Složen raspored sa tablicama
  7. Ispitivanje DOCTYPE direktiva
  8. Studija blok raspored(div oznaka)
  9. Izgled jednostavnog izgleda po divovima
  10. Izgled složenog izgleda diva
  11. Trikovi, trikovi, hakovi i druge mudrosti od gurua

U principu, za početnu razinu pripreme i poznavanje osnova html-a dovoljno je proći samo prvih 5 točaka. (Ova bi opcija bila idealna za web programere koji neće kodirati stranice. Poznavanje html-a trebaju samo ispisati izlaz iz skripte.)

Jednom davno sam želio napraviti svoju prvu web stranicu vezanu uz IT. S ovog područja znao sam samo vrlo jednostavne osnove HTML-a i možda sve. Ali imao sam više nego dovoljno želje i hrabrosti pa sam bez puno straha registrirao svoju prvu domenu.

Moj put u savladavanju CSS-a i HTML-a bio je dug, oko 2,5 godine, i mislim da se proces samoučenja nikada neće završiti. No, kako se sada sjećam, stvarno sam želio pronaći uporište iz kojeg bih mogao početi svladavati ovo za mene novo područje, budući da je mnogo informacija odjednom propalo i nije ih bilo lako probaviti.

Odlučan, registrirao sam svoju prvu domenu i krenuo ostvarivati ​​svoje ciljeve. Tada sam znao da većina stranica koje se nalaze na internetu radi na raznim gotovim sustavima za upravljanje materijalima, odnosno CMS-u. I moj prvi zadatak je bio pronaći CMS.

Prilikom odabira CMS-a pazio sam samo na jedno - CMS ne bi trebao biti zahtjevan za resurse poslužitelja, budući da je želja, vjerojatno, svakog početnika u ovom području, da sve troškove minimizira. Pa, razumljiva je činjenica da bi CMS trebao biti blog.

Nakon dugog surfanja po netu, naišao sam na CMS Textpattern. Nakon 2,5 godine, mogu sa sigurnošću reći da sam bio u pravu s odabirom Textpatterna. Ovo je najviše najbolji CMS za blog, koji je u javnosti.

Uz izvanredne performanse, ovaj CMS može biti smješten na gotovo svakom hostingu koji ima podršku za MySQL i PHP. Trenutno koristim jeftin hosting, a ne VPS, i na njemu ugošćujem 16 stranica. Dnevni posjet svim stranicama je otprilike 5000 jedinstvenih posjetitelja dnevno. Mislim da je ovo dobar pokazatelj izvedbe Textpatterna.

Glavni problem s kojim sam se suočio nakon instaliranja ovog CMS-a je moje apsolutno nepoznavanje osnova CSS-a. Malo po malo sam izvlačio informacije iz zajednice ruskog govornog područja, dok na kraju nisam naišao na stranicu http://htmlbook.ru. Prije ovog otkrića razmišljao sam o kupnji knjige na CSS-u, ali sada mi je čak drago što nisam imao vremena za to, jer bi to bila još jedna kupnja novog sakupljača prašine.

Na stranici HTML knjiga Našao sam puno dobro strukturiranih informacija. Za početnika, to je samo blago. Čak se i sada često obraćam ovom izvoru, jer se ne možete sjetiti svega, a ni ne trebate. Glavno ljudsko znanje je znati gdje nabaviti ono što vam treba!

Ako ste tek na samom početku svog profesionalnog života i namjeravate savladati CSS i HTML, onda vam je moj savjet: ne kupujte papirnate kopije, koje su zastarjele prije objavljivanja, već koristite WEB usluge koje ne samo da će vam spasiti novac, ali će biti izvrsna pomoć koja je uvijek pri ruci.

p.s. Uvijek se zapitam kad zalutam u neki "beginner moneymaker's blog" ili koliko je sada moderan "propaš" koji pokušava zaraditi puno novca, ali stvarno nema pojma kako to učiniti sam jedinstven dizajn za vašu stranicu i ispostavilo se da postoji hrpa beskućnika sličnih jedni drugima. Možete, naravno, platiti dizajn, ali uštedite peni po rublju, a nitko to ne može učiniti bolje od vas samih.

Odlučio sam više pažnje posvetiti početnicima koji žele steći znanja iz područja izrade web stranica. Na to me natjerao moj učitelj, koji je napravio previše grešaka u priručnicima za laboratorijski rad... Rado bih bacio pogled na resurs s kojeg je preuzeta infa o treningu i tamo ostavio par redaka svog mišljenja. Ali sada se ne radi o tome. U svom prvom predavanju govorit ću o

Koja je struktura HTML dokumenta

Označiti obavještava da počinje struktura html dokumenta, - što završava. Između oznaka većina informacija pohranjena je za preglednik i tražilice. U oznakama sadrži naslov naše stranice. Označiti označava da su daljnje informacije namijenjene korisniku, to naravno ukazuje da informacije za korisnika ponestaju.

Sad ću malo objasniti. Sve oznake ( tag - element jezika za označavanje hiperteksta) dijele se na dvije vrste "jedan" i "zatvarajući". Osim toga, oznake su zatvorene u sljedećim znakovima < i > , oni su ti koji razlikuju oznaku iz običnog teksta html... Pogledajmo neke od najjednostavnijih "single" oznaka:


- oznaka koja je odgovorna za prelamanje u novi red, na mjestu gdje je ova oznaka instalirana. Pogledajmo kod pomoću ove oznake.

Moja prva stranica Pozdrav svima!
I ovo je moja prva stranica.

Možete vidjeti rezultat.


Je oznaka koja crta vodoravnu crtu. Ova oznaka se odnosi na blok elementi, red uvijek počinje na novom redu. Ima 5 atributa:

  • align - Određuje poravnanje linije. Može se podesiti lijevo, središte, desno.
  • boja - Postavlja boju linije.
  • noshade - crta liniju bez 3D efekata.
  • veličina - Postavlja debljinu linije.
  • širina - Postavlja širinu linije.

Šifra pomoću oznake


:

Moja prva stranica Pozdrav svima!


I ovo je moja prva stranica.

Pronađen je vizualni primjer.

Još jedna "single" oznaka je . Ova oznaka koriste se za pohranu informacija namijenjenih preglednicima i tražilicama. Tražilice traže meta oznake kako bi dobile opise web-mjesta, ključne riječi i druge podatke. Dopušten je neograničen broj meta oznaka, svi moraju biti između i ... Parametri bilo koje meta oznake imaju oblik "ime = vrijednost", koji je definiran ključne riječi sadržaj, Ime ili http-ekviv... Jer meta oznake su namijenjene autima, ne prave nikakve vizualne promjene, pa ću samo dati izvor:

Ovaj redak označava da kreator stranice misli da stranica koristi UTF-8 kodiranje. Sve je postalo jednostavnije u HTML5, da biste odredili kodiranje, dovoljan je samo sljedeći redak:

Ima i drugih pojedinačne oznake (, ,
, , , ,


, , , , , , , , , ), ali s njima ću vas upoznati malo kasnije.

Sada razgovarajmo o oznakama za zatvaranje. Sam naziv "zatvarajuća oznaka" znači da oznaka zahtijeva obavezno zatvaranje. To je učinjeno kako bi se jasno ograničio dio teksta na koji oznaka djeluje.

Za ilustrativan primjer, pogledajte oznaku koji se koristi za isticanje teksta, postavlja font na podebljan. Oznake i su granice koje definiraju područje odabira teksta. Ovdje je kod u kojem je zadnji redak zaboravio zatvoriti oznaku :

Moja prva stranica Pozdrav svima! I ovo je moja prva stranica.
Pozdrav svima! I ovo je moja prva stranica.

Kao što vidite, nema ništa komplicirano, sada možete stvoriti nekoliko povezanih stranica.

Oznake za isticanje teksta

Postoji nekoliko načina za isticanje teksta na stranici. To možete učiniti pomoću stilova ili možete koristiti oznake. Nas (za sada) zanima druga opcija.

- postavlja font na podebljan.

- postavlja font u kurziv.

- dodaje podcrtavanje tekstu.

- dizajnirano da naglasi tekst. Preglednici takav tekst prikazuju kurzivom.

- precrtava tekst. Ova je oznaka uklonjena iz HTML5, preporuča se da je koristite umjesto nje

- prikazuje tekst u monoprostornom tekstu. Isključeno iz HTML5.

- prikazuje font kao superscript. Font je prikazan iznad osnovne crte teksta i smanjen u veličini.

- prikazuje font kao indeks. Istodobno, tekst se nalazi ispod osnovne crte ostalih znakova retka i smanjene veličine.

- dizajnirano da naglasi tekst. Preglednici takav tekst prikazuju podebljanim slovima.

- Smanjuje veličinu fonta za jedan u usporedbi s normalnim tekstom. U HTML-u, veličina fonta se mjeri u konvencionalnim jedinicama od 1 do 7, prosječna veličina teksta koja se koristi prema zadanim postavkama je 3. Oznaka smanjuje tekst za jednu konvencionalnu jedinicu. Ugniježđene oznake su dopuštene , u ovom će slučaju veličina fonta biti manja za 1 sa svakom ugniježđenom razinom, ali ne može biti manja od 1.

- povećava veličinu fonta za jedan u usporedbi s normalnim tekstom. U HTML-u se veličina fonta mjeri u proizvoljnim jedinicama od 1 do 7, prosječna veličina teksta koja se koristi prema zadanim postavkama je 3. Dakle, dodavanje oznake povećava tekst za jednu konvencionalnu jedinicu. Ugniježđene oznake su dopuštene , veličina fonta bit će veća sa svakom razinom.

- koristi se za isticanje citata u tekstu. Sadržaj spremnika automatski se prikazuje u navodnicima u pregledniku.

- dizajniran za isticanje dugih citata unutar dokumenta. Tekst označen ovom oznakom tradicionalno se prikazuje kao poravnati okvir s lijevim i desnim dodacima (približno 40 piksela) i odstupom na vrhu i dnu.


- definira blok unaprijed formatiranog teksta.  Takav se tekst obično prikazuje jednorazrednim fontom i sa svim razmacima između riječi.  Prema zadanim postavkama, bilo koji broj razmaka u retku u kodu prikazuje se kao jedan na web stranici.  Označiti 
Omogućuje vam da zaobiđete ovu značajku i prikažete tekst prema zahtjevu programera.

- definira tekstualni odlomak. Označiti

To je blok element, uvijek počinje u novom retku, odlomci teksta koji slijede jedan za drugim odvojeni su dopunom. Količina paddinga može se kontrolirati pomoću stilova. Ako nema završne oznake, kraj odlomka se smatra početkom sljedećeg elementa bloka.

..
..

- HTML nudi šest naslova na različitim razinama koji pokazuju relativnu važnost odjeljka nakon naslova. Dakle, oznaka

predstavlja najvažniji naslov prve razine i oznaku

služi za označavanje naslova šeste razine i najmanje je značajan. Prema zadanim postavkama, naslov prve razine prikazuje se najvećim podebljanim slovima, naslovi sljedeće razine su manje veličine. Oznake

,…,

su blok elementi, uvijek počinju u novom retku, a nakon njih ostali elementi se prikazuju u sljedećem retku. Osim toga, ispred i iza naslova dodaje se razmak. Oznaka ima atribut uskladiti, koji određuje poravnanje naslova, može biti lijevo- poravnanje naslova ulijevo, centar- centriranje, pravo- desno poravnanje, opravdati- opravdano poravnanje (i desno i lijevo). Ova vrijednost funkcionira samo za zaglavlje koje ima više od jednog retka.

- je spremnik za promjenu karakteristika fonta kao što su veličina, boja i font. Iako ovu oznaku još uvijek podržavaju svi preglednici, ona je zastarjela i preporučuje se odbacivanje u korist stilova. Oznaka ima 3 atributa: boja- postavlja boju teksta, lice- definira font, veličina- postavlja veličinu fonta u konvencionalnim jedinicama.

- označava tekst kao citat ili fusnotu drugog materijala. Ovaj odabir je koristan za promjenu stila teksta putem CSS-a, a koristan je i za odvajanje HTML koda u strukturne elemente. Preglednici obično postavljaju tekst unutar spremnika kurzivom.

- označava da je niz znakova skraćenica. Korištenje atributa titula dano je dekodiranje kratice, što omogućuje razumijevanje kratice onima koji s njom nisu upoznati. Osim toga, tražilice indeksiraju verziju s punim tekstom kratice, koja se može koristiti za poboljšanje rangiranja dokumenta.

Prema zadanim postavkama, tekst je zatvoren u spremniku podcrtano isprekidanom linijom.

Ispod je kod u kojem sam koristio sve ove oznake:

Moja prva stranica

HTML i CSS dvije su ključne tehnologije za izradu web stranica. HTML pruža strukturu stranice, CSS(vizualni i zvučni) izgled za razne uređaje. Uz grafiku i skriptiranje, HTML i CSS temelj su za izradu web stranica i web aplikacija. U nastavku saznajte više o:

Što je HTML?

HTML je jezik za opisivanje strukture web stranica. HTML daje autorima sredstva da:

Objavite online dokumente s naslovima, tekstom, tablicama, popisima, fotografijama itd.
Dohvatite online informacije putem hipertekstualnih veza, jednim klikom na gumb.
Dizajnirajte obrasce za obavljanje transakcija s udaljenim uslugama, za korištenje u traženju informacija, rezervacijama, naručivanju proizvoda itd.
Uključite proračunske tablice, videoisječke, zvučne isječke i druge aplikacije izravno u svoje dokumente.
S HTML-om, autori opisuju strukturu stranica koristeći označavanje. Elementi jezika označavaju dijelove sadržaja kao npr "Odlomak", "popis", "tablica" i tako dalje.

Što je XHTML?

XHTML je a varijanta HTML-a koji koristi sintaksu XML-a, Extensible Markup Language. XHTML ima sve iste elemente (za odlomke itd.) kao HTML varijanta, ali je sintaksa malo drugačija. Budući da je XHTML XML aplikacija, možete koristiti drugi XML alata s njim (kao što je XSLT, jezik za transformaciju XML sadržaja).

Što je CSS?

CSS je jezik za opisivanje prezentacije web stranica, uključujući boje, izgled i fontove. Omogućuje prilagodbu prezentacije različitim vrstama uređaja, kao što su veliki zasloni, mali zasloni ili pisači. CSS je neovisna HTML-a i može se koristiti s bilo kojim oznakama temeljenim na XML-u Jezik Jezik. Odvajanje HTML-a od CSS-a olakšava održavanje web-mjesta, dijeljenje stilskih tablica na stranicama i prilagođavanje stranica različitim okruženjima. To se naziva odvajanjem strukture (ili: sadržaja) od prezentacije.

Što je WebFonts?

Webfontovi je tehnologija koja ljudima omogućuje korištenje fontova na zahtjev preko weba bez potrebe za instalacijom u operacijskom sustavu. W3C ima iskustva u fontovima za preuzimanje HTML, CSS2 i SVG... Donedavno fontovi za preuzimanje nisu bili uobičajeni na webu zbog nedostatka interoperabilnog formata fontova. Napori WebFonts planiraju riješiti to kroz stvaranje otvorenog formata fonta podržanog u industriji za web (nazvan "WOFF").

Predavanje je privedeno kraju, nadam se da će vam stečena znanja biti od koristi! U sljedećem predavanju govorit ću vam o tome što oznaka pohranjuje u sebi. , naučit ćemo kako izvoditi sve vrste manipulacija sa slikama, te se upoznati s tablicama.

Prilikom pisanja ovog članka, opis nekih oznaka preuzet je odavde

Ovim ciklusom želim otvoriti niz lekcija o HTML... Ovu sam odluku donio jer bih želio pokušati naučiti kako kreirati korisničke stranice od nule. Ova misao mi je u glavi već dosta dugo. Postavilo se samo pitanje odakle početi, s HTML-om, ili izravno nastaviti s instalacijom motora i njegovom daljnjom konfiguracijom.

Ali ako počnete s učenjem motora, onda će neki od korisnika koji ne poznaju HTML biti izostavljeni. Stoga sam odlučio krenuti s osnovama i to učiniti tako da i svaki početnik može shvatiti što i kako.

Dakle, što je zapravo HTML?

Sama kratica znači N ureg T ekst M ark andp L apguage ( jezik za označavanje hiperteksta).

A onda, pojednostavljeno rečeno HTML To je poseban jezik za označavanje koji pregledniku objašnjava kako prikazati jedno ili drugo web stranica... Odnosno, kojim fontom prikazati tekst, kojim redoslijedom rasporediti elemente, koje elemente prikazati podvučeno itd. I ovisno o tome na koji element će naići preglednik, u skladu s pravilima postavljenim u samom pregledniku , ovaj će element ostati tako prikazan. Međutim, ta pravila se tada mogu promijeniti, ali o tome ću već govoriti u svojim sljedećim lekcijama koje će biti posvećene CSS.

Prvo, predlažem da razmotrimo primjer jednostavna web stranicašto može biti. Sada se ne biste trebali fokusirati na ono što znače ove ili one. oznake... Sve u svoje vrijeme, za početak, samo obratite pažnju gdje je što u kodu i kako se sve to odnosi na ono što se prikazuje u pregledniku. Razmotrimo primjer HTML dokumenta:

Naslov stranice

Jedan dan mog života

Priprema za koncert

Danas sam se rano probudio jer će biti težak dan. Uostalom, danas moram nastupiti na koncertu pred stotinjak gledatelja. A da sve bude dobro, moram ponoviti program probe.

Proba

Sve je prošlo bez problema. Nitko iz naše ekipe nije izašao iz ritma, a kako se pokazalo, svi su se uzalud brinuli.

Koncert

Svi su se odlično izveli, iako mislim da je bio trenutak kada je naš bubnjar skrenuo s tempa. No, pametno smo se izvukli iz situacije.

Prvo, morat ćete upisati ovaj tekst u neki uređivač teksta (mislim da je najprikladnije Notepad ++) i spremite datoteku kao indeks .html negdje na svom disku. Kada dvaput kliknete na spremljenu datoteku, vidjet ćete stranicu nečega poput ovoga.

Napominjemo da se same oznake ne prikazuju, već se prikazuje sam sadržaj koji se nalazi između njih. I odavde možete zaključiti da oznake djeluju kao stilski element u HTML-u.

Pogledajte izvorni kod. Kao što ste možda već primijetili, ispred riječi "Jedan" nalazi se mala udubljenje. Međutim, preglednik to nije uzeo u obzir, samo ga je nečujno progutao, kao da nikad nije postojao. Štoviše, ako pokušate staviti puno razmaka između riječi, tada će ih preglednik sve percipirati kao jedan razmak - HTML ima takvu značajku.

I evo još jednog savjeta – kada pišete HTML kod, naučite se uvlačiti one oznake koje su ugniježđene unutar drugih. Na primjer, oznake title i body su ugniježđene unutar html oznake. To znači da kada pišete ove oznake, ne zaboravite napraviti odgovarajuće uvlačenje. Obično se rade s dva razmaka, odnosno tabulatorima - to je stvar ukusa. Zašto je ovo potrebno? E sad, u tom malom djeliću dokumenta, koji sam gore naveo kao primjer, nema puno informacija, pa je tu poprilično problematično zabuniti se. Međutim, ako stranica sadrži mnogo ugniježđenih elemenata, onda neće biti lakše izgubiti se u ovom ogromnom kodu i teško shvatiti u kojem se dijelu dokumenta trenutno nalazite. Stoga je bolje da se odmah naviknete na dobar stil, onda ćete to sami razumjeti i to će vam u budućnosti poslužiti.

Također je vrijedno navesti najpotrebniji minimum oznaka koje bi trebale biti u HTML dokumentu. Govorim o ovom dijelu:

Ali čak i ako ovaj dio ne postoji, većina preglednika će zažmiriti na sve to i još uvijek prikazati vašu stranicu. Međutim, takav neozbiljan stil kodiranja, u kojem osoba preskače veliki broj oznaka, loš je oblik, pa je poželjno da svi ti elementi ipak budu na vašoj stranici. Inače, može ugroziti problem kompatibilnosti s drugim preglednicima, što kao rezultat može utjecati na izgled vaše stranice, a kao rezultat - promet.

Osim toga, možete pisati komentare u HTML dokumentu - to su isključivo servisne informacije koje su isključivo za vas. Obično su to neke važne bilješke koje vam služe kao podsjetnik ili samo nešto na što vrijedi obratiti pažnju. Preglednik ne obrađuje komentare i, što znači da ih korisnik neće vidjeti. Obično se pišu ovako:

A sada pokušajmo sami shvatiti koja je oznaka našeg primjera iznad za što odgovorna.

Označiti html znači da počinje izlaz html koda.

glava- odjeljak s servisnim informacijama. Između ostalog, postoji titula, koji je odgovoran za tekst u naslovu prozora preglednika. Ovaj odjeljak se također može tretirati kao informacija koju pregledniku želimo obavijestiti o ovoj stranici.

tijelo- počinje glavni dio dokumenta.

h 1- naslov.

h 2- titl.

str- stavak.

To je vjerojatno sve! Ako je ovo bio vaš prvi HTML dokument, čestitamo! Da, ne izgleda tako sjajno kako bismo željeli da bude. No, unatoč tome, imamo materijal na kojem već možemo raditi. A u sljedećim lekcijama sve će biti još zanimljivije, a mi ćemo se postupno doticati rada kaskadni listovi stilova (CSS).

  • < Назад

Za komentiranje morate se registrirati.

Vrhunski povezani članci