Sigurno ste naišli na takav koncept kao što je HTML kod. Čuli smo to od prijatelja, vidjeli u izborniku našeg preglednika itd. Ali što je to? Pokušajmo otkriti kakav je to kod i od kojih se elemenata sastoji.

Osnovne informacije

Počnimo s definicijom. HTML kod je oznaka bilo koje web stranice koja je napravljena korištenjem HTML jezika.

Ovaj kod se sastoji od oznaka, zahvaljujući kojima preglednik određuje kako određena stranica izgleda. Njegova struktura je podijeljena u dva dijela: glava - naslov dokumenta, koji sadrži naziv stranice, kao i informacije o samom dokumentu, i tijelo - tijelo dokumenta, u kojem su postavljeni parametri stranice.

Da biste stvorili koliko-toliko pristojnu web stranicu napisanu od nule, trebali biste proučiti oznake koje koristi ovaj jezik, njihove parametre i također znati HTML kodove boja.

Oznake

Oznaka je element HTML jezika. Uz njegovu pomoć možete postaviti font, boju, veličinu teksta, umetati tablice i slike u njega, oblikovati ga, kreirati naslove, poveznice, a također i obojiti stranicu.

Oznake su uvijek u uglastim zagradama -<>, i to je ono što ih razlikuje od glavnog teksta koji se prikazuje na stranici prilikom pregledavanja. Postoje dvije vrste - uparene i pojedinačne.

Uparene oznake sastoje se od početne i završne oznake, pri čemu potonja ima ravnu kosu crtu iza lijeve uglate zagrade. Na primjer: tekst.

Između dva taga nalazi se tekst, tablica, slika ili drugi element koji se prikazuje na web stranici.

Pojedinačne oznake sastoje se od jedne oznake i ne sadrže kosu crtu. Na primjer:

---

.

Oznake mogu imati parametre koji se mogu postaviti pomoću posebnih HTML kodova.

Također napominjemo da za većinu znakova: psi, zagrade, veće ili jednako, manje ili jednako i mnoge druge, postoji posebna tablica u kojoj su ispisani kodovi ovih znakova. Ovaj kod počinje znakom &, nakon kojeg može slijediti abecedna mnemonička oznaka ili znak hash s troznamenkastim kodom. Na kraju se mora staviti točka-zarez.

Glavne oznake

Shvatili smo, sada ćemo pokušati navesti glavne oznake koje mogu biti korisne, ako ne pri izradi vlastitih web stranica, onda barem pri oblikovanju tekstova.

• < body>- sadrži glavne parametre dokumenta, kao što su veze, polja i drugo;
• < p>- označava odlomak;
• < b>- podebljava tekst;
• < i>- kurziv;
• < u>- podvlači tekst;
• < s>- precrtava tekst;
• < sup>- postavlja tekst kao superskript;
• < sub>- indeks;
• < font>- postavlja parametre fonta: veličinu, font, boju;
• < div>- uz njegovu pomoć možete poravnati svoj tekst;
• < h>- oznaka zaglavlja;
• < a>- može se koristiti za postavljanje poveznica;
• < table>- pomaže pri umetanju tablica u dokument s oznakama pridruženim njima< tr>(niz) i< td>(stanica).

Samci:

• 
  - pojedinačni, premješta tekst koji slijedi na novu stranicu;

• ---

  - uz njegovu pomoć možete umetnuti vodoravnu liniju u tekst.

Vrijedno je napomenuti da se oznake obično pišu u novom retku. To je učinjeno zbog praktičnosti ne samo samog dizajnera izgleda, već i onih koji će vidjeti kodove u HTML-u.

Parametri oznake

Već smo pregledali glavne oznake koje biste željeli znati. Naravno, nismo sve nabrojali, ali i ovaj minimum može biti dovoljan za izradu vaših prvih web stranica.

Ali nije dovoljno znati samo oznake; morate proučiti i parametre koji se mogu postaviti. U ovom ćemo članku dati samo njihov kratki pregled i opisati one koje se najčešće koriste. Možete ih vidjeti otvaranjem bilo kojeg HTML koda.

Također nećemo opisivati ​​za koju je oznaku ovaj parametar prikladan, budući da se mnogi od njih koriste u većini naredbi web označavanja:

• lice - postavlja vrstu fonta;
• veličina - postavlja veličinu;
• boja - postavlja boju;
• poravnati - poravnanje;
• ime - ime;
• href - ovaj parametar određuje adresu veze;
• alt - alternativni tekst;
• širina - širina;
• visina - visina;
• background - pozadinska slika;
• bgcolor - pozadina.

Ovo nisu svi parametri; naveli smo samo one najčešće korištene i poznate.

Iza parametra se stavlja znak jednakosti, a zatim se njegova vrijednost piše pod navodnicima. Prilikom izrade web stranica i stranica savjetujemo vam da koristite posebne udžbenike ili priručnike kako biste ne samo znali osnovne parametre, već ih i ispravno postavili.

Tablica boja

Dakle, shvatili smo glavne oznake i njihove parametre, sada pogledajmo HTML kodove boja. Uz njihovu pomoć možete postaviti boju teksta, stranice ili njegovih pojedinačnih elemenata.

Webmasteri početnici trebali bi znati da postoje posebne tablice boja koje daju kodove za svaku nijansu. Postoji samo 16 osnovnih boja, koje se mogu odrediti ne samo pomoću tablice, već i jednostavnim označavanjem njihovog naziva na engleskom jeziku. Također im možete dodati riječi svjetlo i tamno, navodeći željenu nijansu.

Postoji i jedan koji ima 216 različitih vrsta edema.

Imajte na umu da je korištenje tablica mnogo praktičnije. Daju heksadecimalni kod boje. U ovom slučaju možete odmah vidjeti ovu nijansu. Svaki kod počinje znakom hash, nakon kojeg slijede tri para znakova koji karakteriziraju intenzitet crvene, zelene i plave boje.

Samo kopirajte ovaj kod i zalijepite ga u parametre oznake koja vam je potrebna.

Kako vidjeti kod stranice

Ako ste zainteresirani za izradu web stranica, tada ćete vjerojatno biti zainteresirani pogledati HTML kod stranice koja vam se sviđa ili one koju često posjećujete.

Ali kako to učiniti? Postoje dva načina, vrlo jednostavna i izravna. Prvi je otvoriti stranicu koja vam je potrebna i pritisnuti kombinaciju tipki Ctrl+U. Izvorni kod stranice pojavit će se u novom prozoru koji možete pogledati i proučiti.

Drugi način je kliknuti lijevom tipkom miša i odabrati "Izvorni kod". Ali ipak preporučujemo da koristite prvu metodu, jer je korištenje vrućih tipki puno jednostavnije i praktičnije.

Imajte na umu da ćete tijekom čitanja koda također moći vidjeti komentare na njega, napisane u oznaci "Komentar", koji izgleda ovako:. U tom slučaju sam komentar piše se iza uskličnika. Ne prikazuje se u pregledniku. I napisano je uglavnom tako da drugi programeri i web dizajneri mogu razumjeti kakav se blok informacija nalazi ispod i zašto je naveden ovaj ili onaj dio koda.

zaključke

Pisanje kodova u HTML-u nije tako teško kao što se na prvi pogled čini. Pogotovo ako ste nepretenciozni i želite kreirati jednostavne web stranice, elektroničke udžbenike temeljene na HTML-u itd. Učenje osnovnih oznaka i principa označavanja neće oduzeti puno vremena. Već par dana bit će vam dovoljno da počnete stvarati vlastite projekte.

Imajte na umu da ako odlučite naučiti ovaj označni jezik, budite oprezni. Većina problema nastaje upravo zbog nepažnje: nezatvorene uparene oznake, netočno navedeni parametri, pogreške pri upisu - sve to prijeti da će se pretvoriti u pogrešku, koju možete dugo tražiti. Ali općenito, učenje HTML označavanja stranica vrlo je zanimljivo.

Jeste li čuli za html? Ili ste možda čuli za html stranice na internetu? Zapravo je jednostavno. HTML je, jednostavno rečeno, jedan od programskih jezika, a ne najsloženiji od njih.

HTML je skraćenica za HyperText Markup Language, što se prevodi kao jezik za označavanje hiperteksta.
Sadržaj:

HTML se koristi kako bi stranice na internetu izgledale točno onako kako ih poznajete:

• lijepo dizajnirani tekstovi,
• podebljano ili kurzivom,
• samo crno ili višebojno,
• s aktivnim poveznicama na druge stranice stranice ili bloga,
• sa, video, audio i mnogim drugim zanimljivim značajkama.

U biti, html je stražnja strana stranica mnogih web stranica. Često se njihov prekrasan dizajn stvara pomoću HTML jezika za označavanje. U suprotnom, ovo se također naziva stvaranje stranica pomoću html izgleda.

Web stranice mogu se izraditi u drugim programskim jezicima, na primjer u PHP-u.

Britanski znanstvenik Tim Berners Lee razvio je HTML jezik 1986-1991 u Švicarskoj. U biti, html vam omogućuje stvaranje jednostavnih, ali lijepih dokumenata. Kasnije su html-u dodane multimedijske mogućnosti (video i sl.) i podrška za rad s hipertekstom (za kreiranje hiperveza).

Dobro poznati programi preglednika stvoreni su za rad s HTML-om, kao što su:

• Mozilla Firefox (Mozilla Firefox),
• Internet Explorer (Internet Explorer),
• Google Chrome (Google Chrome),
• Opera (Opera),
• Yandex preglednik,
• Safari i
• drugo.

U početku je glavna funkcija preglednika bila upravo interpretacija HTML koda i prikaz vizualnog rezultata na zaslonu monitora korisnika.

Što je html stranica?

Dokumenti, datoteke, stranice izrađene u html jeziku imaju nastavak .html ili .htm. Na primjer, html stranica (ili html datoteka, ili html dokument) može imati naziv poput:

• test.html,
• html,
• html ili
• naslov.html.

Strogo govoreći, test.html je naziv datoteke (ili naziv stranice), gdje

• test je naziv datoteke i
• .html je ekstenzija naziva datoteke (ili ekstenzija naziva stranice) koja se obično jednostavno naziva "ekstenzija".

Danas je riječ "format" postala češća opcija umjesto riječi "ekstenzija". Dakle, izraz “html format” znači da je datoteka (ili stranica) napisana u html jeziku i naziv takve datoteke ima nastavak html. Sredstva,

datoteka pod nazivom test.html je u html formatu.

Operativni sustav Windows prema zadanim postavkama skriva datotečne ekstenzije (odnosno formate datoteka). Programeri su to učinili "ne iz zlobe", već kako bi zaštitili korisnika od nepromišljenog mijenjanja ekstenzija datoteka. Datotečne ekstenzije možete otvoriti prema zadanim postavkama. U sustavu Windows 7 da biste to učinili:

• kliknite na gumb Start,
• otvorite Control Panel,
• pronađite opcije mape,
• otvorite karticu Pogled, pomaknite se do samog dna i
• poništite okvir pored opcije "Sakrij ekstenzije za poznate vrste datoteka",
• Pritisnite "OK".

Riža. 1. Otvorite sve ekstenzije datoteka

Ako sada podignete pogled i pogledate adresnu traku svog preglednika, vidjet ćete tamo naziv stranice koju trenutno čitate, a na kraju naziva nalazi se .html. Ovo je primjer html blog stranice koja je postavljena na Internet. Obično blog (stranica) ima mnogo html stranica. Na primjer, svaki članak na ovom blogu je zasebna html stranica.

Na Internetu postoje i jednostrane stranice koje se sastoje od samo jedne html stranice. Na primjer, moglo bi biti

• Internet posjetnica osobe ili tvrtke, odn
• stranica koja prodaje proizvod ili uslugu putem interneta.

HTML jezik se neprestano razvija i danas postoji nekoliko njegovih verzija, počevši od HTML 2.0 22. rujna 1995. godine pa sve do najnovije verzije HTML 5 28. listopada 2014. godine. HTML 5.1 planira se objaviti u rujnu 2016.

Što su HTML oznake?

HTML je jezik za označavanje dokumenata pomoću oznaka. Oznake su u trokutastim zagradama "< >" Oznake mogu biti uparene ili neuparene.

• Na primjer, oznaka "b" u trokutastim zagradama čini tekst podebljanim

tekst podebljan

Rezultat će izgledati ovako: tekst podebljan

• A oznaka "i" čini tekst kurzivom.

tekst u kurzivu

Kao rezultat dobivamo: tekst u kurzivu

• Tu je i oznaka za prekid niza “br”.
• Pomoću oznake "a href" hiperveza je istaknuta.
• Oznaka za naslov dokumenta – . Ovo je oznaka koja otvara dokument. Uparen je u smislu da zahtijeva završnu oznaku s kosom crtom.
• Nakon naslova dolazi glavni dio, koji se nalazi između uvodne oznake i završnu oznaku
  
  . Ova je oznaka, kao i oznaka za glavu, par: trebate je otvoriti i ne zaboravite je zatvoriti.

U uparenim oznakama zatvarajuća oznaka s kosom crtom je nužna jer poništava (točnije, pravilno dovršava) radnju početne oznake.

Postoji mnogo HTML oznaka, a HTML upute možete lako pronaći na internetu.

Kako napraviti html datoteku

Vrlo je jednostavno stvoriti html stranicu (ili html datoteku) na računalu i pokrenuti svoju izradu u pregledniku.

1) Otvorite Notepad (jednostavni uređivač teksta koji dolazi sa sustavom Windows). Možete ga pronaći na svom računalu tako da u traku za pretraživanje unesete upit: Notepad.

2) Kopirajte i zalijepite sljedeći tekst u Notepad:

Zdravo! Ovo je moja prva HTML stranica.

Drugi redak, hura!

3) Važna točka, bez koje html datoteka neće raditi: u Notepad spremamo datoteku strogo(!) u html formatu, kao što je prikazano na snimci zaslona. Radi jednostavnosti, datoteku možete spremiti na radnu površinu vašeg računala.

Riža. 2. Obratite pozornost na File Type i spremite datoteku u html formatu

1 na sl. 2 – Kliknite na “Desktop” da tamo spremite html datoteku.
2 na sl. 3 – Otvorite padajući izbornik nasuprot "Vrsta datoteke".
3 – U ovom izborniku odaberite “Sve datoteke”.
4 – upišite bilo koje ime (imam 001) i nakon točke obavezno (!) upišite html.
5 na sl. 2 – kliknite na “Spremi”.

4) Na radnoj površini nalazimo datoteku 001.html:

Riža. 3. Html datoteka na radnoj površini

Moj zadani preglednik je Google Chrome, tako da ikona datoteke izgleda kao ikona ovog preglednika. Ako postoji drugi zadani preglednik, datoteka 001.html imat će drugu ikonu.

Kliknemo na datoteku (slika 3) 2 puta mišem i kao rezultat vidimo našu prvu stranicu u html-u u pregledniku:

Riža. 4. Provjera kako html stranica izgleda u pregledniku

Dakle, imamo lokalnu html stranicu u smislu da je dostupna samo s vašeg lokalnog računala. Kako bi stranica bila dostupna drugima, mora biti postavljena na Internet. Točnije, mjesto koje je uvijek dostupno: 24/7/365 (24 sata dnevno, 7 dana u tjednu, tijekom cijele godine). Tada će svaki korisnik interneta moći vidjeti takvu stranicu.

Dakle, html je prilično zanimljiv jezik, a ako u budućnosti razmišljate o izradi i održavanju vlastite web stranice ili bloga, onda je poželjno poznavati barem minimalni skup oznaka koje se koriste u html jeziku.

Za pojavu HTML-a, moderni svijet ima jednog znanstvenika iz Europskog vijeća za nuklearna istraživanja (Conseil Européen pour la Recherche Nucléaire, CERN) za zahvalu. Ime ovog znanstvenika je Timothy John Berners-Lee. Prva verzija HTML-a nastala je za potrebe oblikovanja znanstvenih dokumenata. To je strukturno oblikovanje bez elemenata opisa shema boja, parametara fonta itd. Stoga je HTML izvorno omogućio isticanje naslova, odlomaka, popisa i sličnih strukturnih elemenata u tekstu. Rezultat obrade ili "igranja" HTML-a ne bi trebao ovisiti o tehničkim značajkama hardvera za njegovu vizualizaciju, jer on nije sadržavao parametre ove vizualizacije. S vremenom je ova značajka jezika za označavanje hiperteksta djelomično izgubljena.

Dakle, pojava prvih verzija HTML-a datira iz 1986. godine, a 1991. godine HTML je značajno unaprijeđen i počeo se koristiti upravo za prijenos hiperteksta širom World Wide Weba. Kažu da se svjetski poznata kratica HTML, što znači Hyper Text Markup Language, pojavila upravo u ranim 90-im godinama prošlog stoljeća. A sada kratki izlet u pedigre označnih jezika. Prva verzija hipertekstualnog označnog jezika HTML nastala je na temelju Standard Generalized Markup Language (SGML), koji se na neki način može smatrati prototipom eXtensible Markup Language. XML standard je stekao ogromnu popularnost u naše vrijeme zbog velikog broja njegovih proširenja koja se koriste u računalnoj tehnologiji. Da potpuno zbunim čitatelja, odmah ću dodati da je naknadno, na temelju XML-a, razvijen hipertekstualni označni jezik XHTML (Extensible Hypertext Markup Language), koji u biti replicira HTML. Kao rezultat toga, imamo akronime SGML, HTML, XML i XHTML, i moramo razumjeti što je što. Zapravo, sve je jednostavno: SGML nije ništa više od skupa pravila na temelju kojih se može izgraditi bilo koji označni jezik. HTML je jedan od tih jezika - SGML aplikacija. Drugim riječima, SGML definira kako elementi označavanja trebaju izgledati, a HTML definira što točno elementi trebaju biti i kako ih preglednici trebaju interpretirati. XHTML je pak primjena XML-a, a sam XML nije ništa više od pojednostavljene verzije SGML-a. , unatoč činjenici da su vrlo slični po izgledu, oni imaju značajne skrivene razlike, koje, uglavnom, leže u principu njihove obrade.

Sada se vratimo na povijest razvoja HTML-a. Dakle, do 1994. HTML se još uvijek koristio samo za strukturno označavanje podataka, iako je već uključivao oznake za označavanje teksta podebljanim ili kurzivom. Iste 1994. godine stvorena je organizacija W3C (World Wide Web Consortium) - World Wide Web Consortium, na čijem je čelu, sasvim logično, isti Tim Berners-Lee, a 1995. godine objavljena je preporuka HTML 2.0. Tvorci HTML-a već su shvatili da će se njihova zamisao s vremenom razviti iz jezika statičnog označavanja teksta u glavni alat za stvaranje dinamičkih internetskih izvora. Glavni dodatak HTML 2.0 bilo je pojavljivanje obrazaca kao dijela jezika sa skupovima korisničkih kontrola koje su se trebale koristiti za unos parametara za HTTP zahtjeve.

Nakon izdavanja druge verzije, odmah je počeo rad na sljedećoj generaciji HTML-a. Godine 1997. objavljena je preporuka HTML 3.2 koja je nadopunila označni jezik tablicama, okvirima, slikama i nekim drugim važnim oznakama. Ali najvažnije postignuće treće verzije je to što su se njeni autori ponovno vratili problemu vizualizacije označavanja u pregledniku, prisjećajući se da HTML treba samo označavati strukturu dokumenta i ne smije izravno sadržavati parametre za grafičke stilove za prikaz elemenata u preglednik. Rezultat njihova rada na HTML 3.2 bila je pojava neovisnog CSS jezika (Cascading Style Sheets) - kaskadnih stilskih listova, čiji se kod sada može povezati s HTML kodom za označavanje i na taj način prilagoditi izgled stranice.

Izdavanjem verzije 4 HTML-a 1997. godine, osoblje W3C-a oslobodilo je svoju zamisao onih nepotrebnih elemenata koji su, s pojavom CSS-a, postali zastarjeli i kompromitirali ideju o odvajanju označavanja strukture od parametrizacije prezentacije. Ali nitko ne bi blokirao novu verziju zbog takvih sitnica. Glavno postignuće preporuka HTML 4.0 bila je pojava objektnog modela stranice (Document Object Model, DOM), čijim se elementima sada može manipulirati putem skriptnih programskih jezika koje izvode preglednici. Najpopularniji takav programski jezik je JavaScript. HTML plus DOM plus JavaScript jednako je Dynamic HTML ili jednostavno DHTML, koji je označio proboj u web dizajnu. Sada elementi učitane internetske stranice mogu mijenjati svoj izgled kao odgovor na radnje korisnika, kao i dodavati nove i brisati postojeće elemente. Dana 24. prosinca 1999. objavljeno je posljednje izdanje 4. verzije jezika za označavanje hiperteksta, HTML 4.01.

HTML5 još nije dobio status službene W3C preporuke, ali već je jasno da autori HTML-a nastavljaju raditi na razvoju zahtjeva za podršku objektnog modela dokumenta i interpretaciju JavaScripta. Iako će HTML5 dobiti brojne nove oznake, većina preporuka i dalje se odnosi na ponašanje preglednika u kontekstu DHTML-a: postojat će ugrađena podrška za funkcije povuci i ispusti, mogućnost crtanja na virtualnom platnu , kontrolirati povijest pregledavanja i dijeliti poruke između stranica, spremati kontekst izvršenja i još mnogo toga. Nadamo se da će s objavljivanjem novih HTML preporuka postupno nestati problemi nedostatka kompatibilnosti s više preglednika, kada se isti JavaScript kod različito izvršava pod različitim preglednicima. Uostalom, nastavit će se tendencija definiranja zahtjeva za rad s objektnim modelom i JavaScriptom, a programeri preglednika će morati (ako žele da se koriste njihovi softverski proizvodi) slijediti te zahtjeve.

Izdavanje HTML5 planirano je za 2014. Možda će do tog vremena W3C razviti zasebne preporuke koje se odnose samo na JavaScript programiranje, a HTML će konačno ponovno postati isključivo označni jezik za strukturu dokumenta. Unatoč činjenici da je danas tek 2012., mnoge već podržavaju najpopularniji preglednici. Mnogo toga što su web dizajneri ranije morali sami raditi (isti drag-and-drop), s izdavanjem HTML5 bit će podržano na razini preglednika, a ovaj razvoj događaja ne može ne veseliti. Možemo se samo nadati da će se trend nastaviti.

vjerojatno ću krenuti od početka...

HTML jezik nije sam po sebi programski jezik. On je označni jezik za hipertekstualne dokumente. Drugim riječima, odgovoran je za raspored u dokumentu vaših tekstova, crteža, tablica... namijenjenih životu na internetu. Nemoguće ga je natjerati da izračuna koliko je dvaput dva dva, u tome nema logičnih funkcija, ali lijepo je i, što je najvažnije, lako objaviti informaciju da je dvaput dva četiri - to je lako. Taj se jezik čita pomoću vama poznatih programa, zvanih preglednici (preglednici), koji "znaju" standardne naredbe html jezika i "žvačući" ih, prikazuju dokumente na monitoru računala u obliku u kojem web master - sastavljač dokumenata – želi ih predstaviti.

Sada o naredbama - nazivaju se deskriptori, ali češće - oznake.

Vratimo se na našu prvu stranicu... pa smo napisali:

Pozdrav svijete!!!

Dakle, ovo je ono što je napisano između<…>- nazivaju se oznakama, nisu vidljive čitatelju koji gleda vašu stranicu, ali su jasno vidljive pregledniku koji naiđe na oznaku. shvaća kao signal da će sljedeći biti dokument koji treba pročitati i prikazati na monitoru u traženom obliku... a ovdje je oznaka označava da je dokument završio i da se više ništa ne traži od njega, odnosno preglednika, i može mirne savjesti.

Pa što smo napisali? i kako to preglednik čita?

Mišljenja preglednika:

- početak dokumenta.. opet ima puno posla..
- pogledajte engleski rječnik i prevedite "head"...nema problema s piljevinom u mojoj glavi!! ... evo osnovne službene informacije o dokumentu.. pa što će oni od mene?
- cijelo ime je gotovo.. možete ići dalje..
- da, i osim imena, ne držimo više nikakve gluposti u glavi..
- “Tijelo” dokumenta, sve što je dolje napisano stavlja se na javni uvid
Pozdrav svijete!!! - kako lijepo! Dosta je više!!!

- premjesti tekst u sljedeći red... mogu čak i pretpostaviti što će biti u njemu...
Moje ime je (vaše ime ovdje), ovo je moja prva stranica!- pa da, tako je.. ne mogu smisliti ništa originalnije..


- to je sve? Ne pokazati ništa drugo?
- Pa to je kraj!! Ne budite, ne prevrćite, u slučaju požara prvi izvadite!!

Otprilike ovako funkcionira čitanje naše stranice.. Kao što vidite, preglednik je prilično hirovit tip, pa mora davati jasne i precizne naredbe, inače će psovati.. i naglas.. i zato zapamtimo sljedeće stvari:

1) Potrebno je zapamtiti jednom zauvijek da postoji li uvodna oznaka <…> onda mora postojati i završna

Iako postoje iznimke, poput naše oznake
- ne zahtijeva zatvaranje jer samo kaže da se treba napisati u novom redu. Usput, pokušajte dodati još nekoliko istih prije retka "Zovem se..." i vidjet ćete da je kao rezultat toga primjetno pao.. (Pa, naravno, spremite promjene u bilježnicu i kliknite gumb "osvježi" u pregledniku)

2) Svi dokumenti moraju imati sljedeći predložak koda:

- početak dokumenta
- početak glave
- zatvaranje glave
- početak tijela


- zatvaranje tijela
- kraj dokumenta

Ove oznake su obavezne! Moraju se uvijek pisati za svaku novu stranicu i samo ovim redom! Ne pokušavaj sve okrenuti naglavačke...

3) O narudžbi:

Oznaka za otvaranje i zatvaranje prema vrsti<…> je svojevrsni spremnik, kutija u koju se mogu spremati drugi tagovi - manje kutije... pa bi po logici dokument trebao izgledati ovako:

<Тег "большой ящик">
<Тег "ящик средний">
<Тег "ящик маленький">
sadržaj

Ako napišete npr. ovako:

<Тег "большой ящик">
<Тег "ящик средний">
<Тег "ящик маленький">
sadržaj

Ispast će to smeće koje vam ne stane u glavu, ono “veliko” je već zatvoreno, a iz njega “strši” ono “malo” koje je zaključano u “sredini”, a “ sadržaj” je razasut posvuda.. Teško je čak i osobi zamisliti što se tamo govori o pregledniku.. Jasno strukturirajte kod svoje stranice, inače ništa neće raditi..

Pa, naučili smo kako napisati jednostavan tekst, početak je napravljen! u sljedećem poglavlju ću govoriti o tome što možete učiniti s njim..

Kada pišete web stranicu, stvorite mapu na bilo kojem prikladnom mjestu na tvrdom disku, nazovite je kako god želite, sve dok je jasno... spremite svoje stranice u ovu mapu, dajući im smislena imena... opcije poput aaa. html, 123.html dovest će do zabune i zabune... U ovoj fazi vam se ovaj savjet neće činiti praktičnim, ali će vam u budućnosti uvelike olakšati posao. Zamislite, na primjer, barem 20-30 takvih datoteka čija imena trebate imati na umu kako biste ih unakrsno upućivali. Prvo naruči!

Prilikom pisanja koda, savjetujem vam da se pridržavate "dobrog stila pisanja", to jest, pišite oznake na "ljestvičast" način jer je jedna oznaka ugniježđena u drugu. S vremenom ćete shvatiti da kod za čitanje napisan ovako:






Pozdrav svijete!!!

Moje ime je Carlson, ovo je moja prva stranica!





Mnogo lakše od ovoga:






Pozdrav svijete!!!

Moje ime je Carlson, ovo je moja prva stranica!





I još više od ovoga:

Pozdrav svijete!!!
Moje ime je Carlson, ovo je moja prva stranica!

Iako je to stvar navike... ipak je bolje naviknuti se pisati "čitko".

Bok svima!. Drugu lekciju ćemo posvetiti pitanju što je HTML i kako raditi s njim. U njemu ćete naučiti o značajkama najpopularnijeg web programskog jezika i jasno razumjeti njegovu glavnu bit.

Nakon što ga savladate, bit će vam lakše ići naprijed, a zatim možete lako (iako ne, i dalje ćete se morati potruditi) prihvatiti složenije jezike za izradu web stranica, na primjer PHP. Pa krenimo na posao.

Što je HTML

HTML (hypertext markup language) je hipertekstualni označni jezik u svakodnevnom životu. Standardni označni jezik za internetske dokumente na World Wide Webu. Ovo je jedan od najpopularnijih jezika za izradu web stranica. Također se smatra najlakšim za učitavanje u preglednicima.

Nema nikakvih kompliciranih trikova poput PHP-a, koji prije prikaza stranice u pregledniku prvo napravi zahtjev MySql bazi podataka, a zatim samo prikaže sadržaj korisniku. Neću ulaziti u duge verbalne uvode o tome kako je nastao, jer je dug i nezanimljiv.

Za sve ove točke pomoći će vam sjajna Wikipedia. Želimo naučiti kako brzo izraditi web stranice, zar ne? Sjajno! Onda idemo dalje i shvatimo sve zamršenosti ove web znanosti.

Osnove HTML jezika. Koncept oznake

Bez poznavanja čvrste baze ne možete stići nigdje; "materijalni dio" ("temelj" bilo kojeg predmeta) još nije otkazan. I nećemo odstupiti od tradicije i pravila.

Osnove HTML jezika su oznake, ili da budemo precizniji, skup oznaka. Označavaju se ovako<тег>. Oznake su uvijek uparene i prikazane su ovako

<тег>.

< тег> < / тег> .

Svaki od njih obavlja strogo definiranu funkciju za prikaz u preglednicima.

Neki prikazuju sliku na ekranu, drugi poveznicu, treći su odgovorni za paragrafe, treći prave tablicu i tako dalje. Unutar njih možemo napisati bilo koji tekst. Volim ih zvati kontejnerima, radi jasnoće, da tako kažem. Ali postoje i pojedinačni, proučit ćemo ih u sljedećim lekcijama.

I također shvatite jednu važnu točku. Ovaj jezik koristi Paretovo načelo, odnosno, kao u bilo kojem području života, aktivnosti ili bilo gdje drugdje, postoji pravilo 80/20.

Što to znači? To nam govori da 20% (u našem slučaju to je html) jezika obavlja 80% posla. Logika je da nije potrebno naučiti sve oznake, jer se mnoge od njih jednostavno ne koriste ili se koriste vrlo rijetko. Stoga se u našim lekcijama usredotočujemo na one najčešće i najvažnije. I napravio si sjajan posao s ovim!

Struktura HTML dokumenta

Struktura bilo kojeg html dokumenta izgleda ovako:

< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> < html > < head > < meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" > < title >Neimenovani dokument< / title > < / head > < body > < / body > < / html >

Sada ćemo detaljnije opisati svaku točku:

Što je Doctype i njegova značenja

Element doctype koristi se za označavanje vrste naše web stranice. Ovo je takozvana “deklaracija o vrsti dokumenta” ili deklaracija o vrsti dokumenta.

Ova bi se oznaka uvijek trebala pojaviti prva na svakoj stranici. To je ključna komponenta web stranica koje tvrde da su u skladu sa standardima: bez njega vaš kôd neće proći validator.

Validator web dokumenata je računalni program koji provjerava usklađenost dokumenta, toka podataka ili dijela koda s određenim formatom te provjerava sintaktičku ispravnost dokumenta ili datoteke (prema Wikipediji).

Postoji nekoliko Doctype vrijednosti:

1. Strog
2. Prijelazni
3. Skup okvira (s okvirima)

Ja koristim drugu opciju. Najprikladniji je za rad jer ne ograničava programera. To je zbunjujuće za čitatelja, pa koja je razlika između njih i koji je najbolji za korištenje?

Objasnit ću razliku između njih. Prijelazna verzija nije striktno u skladu sa standardima W3C provjere valjanosti (ili na ruskom, verifikacija), tj. preglednik će prikazati sadržaj web dokumenta na isti način, čak i ako sadrži zastarjele, nepreporučene i druge nestandardne varijacije koda . Ali stroga verzija strogo se pridržava svih standarda, odnosno, u praksi, ako ste zaboravili staviti odgovarajući simbol negdje u kodu (na primjer, kosu crtu /), tada ćete prilikom provjere dobiti upozorenje.

Ovako izgleda web dokument koji koristi striktnu verziju:

< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> < html xmlns = "http://www.w3.org/1999/xhtml"> < head > < title >Strogo poštivanje jezičnih standarda< / title > < meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / > < / head > < body > < p > . . . < / p > < / body > < / html >

Savjetujem vam da koristite drugu opciju i ne brinite, jer je najprikladnija. Sada ćemo pogledati ostale komponente naše stranice.

- ili “head” tag, sadrži najvažnije oznake koje pregledniku objašnjavaju što treba učiniti na stranici i koje mehanizme pokrenuti. Definira web dokument i njegov sadržaj. Često sadrži razne skripte koje pokreću razne značajke na stranici, a tu je i važan "spremnik" za SEO promociju - oznaka