Primjer HTML stranice i osnovnih načela izrade

Izmišljeni su mnogi jezici, ali je HTML jezik jedan od najvažnijih i najtraženijih jezika. To uključuje mnoge druge ključne inicijative u programiranju. Mnogo je dostupno kada znanje označnog jezika bude prisutno u umu razvojnog programera - HyperText Markup Language (HTML).

U biti, u HTML-u nema ništa komplicirano, a za nekoliko minuta, svima koji su najudaljeniji od programiranja i internet osobe, izvodit će stvaranje HTML stranice u bilježnici. Primjer koji zaslužuje pažnju je jednostavnost, koja je stvarno dostupna svima.

Opći opis

HTML datoteka je jedna stranica stranice, iako se to može tvrditi, no činjenica da je jedna datoteka jedna stranica je razumljivo za početak.

HTML datoteka počinje s DOCTYPE zaglavljem, što znači da je vrsta datoteke HTML. Svi elementi stranice (oznake) prikazani su u kutnim zagradama. Svaki par ("<" i ">") sadrži jednu HTML oznaku. Tipično, HTML oznake su uparene, tj. Postoji "/ oznaka" za svaku "oznaku". Obje su zatvorene u kutnim zagradama. Postoje pojedinačne oznake od kojih je najpopularnija "br /" prijelaz na sljedeći redak.

Najveća oznaka u datoteci je sam HTML, što uključuje samo dvije oznake: HEAD i BODY. U prvom se obliku izrađuju različiti opisi, navedeni su linkovi na druge stranice, PHP i JavaScript skripte mogu biti prisutni. U drugom se sadržava sadržaj stranice. Također u obliku oznaka i skripti.

Jednostavna HTML stranica

Primjer stvaranja takve stranice naveden je u nastavku u članku. Pažljivo razmotrite.

Odjeljak HEAD

Glavna svrha HEAD oznake je opći opis stranice i zajedničkih skripti, iako je potonji relativno relativan koncept. Obično ovdje postoje samo dvije stvari:

• Ključne riječi i opis stranice;
• Veze na druge datoteke (* .css i * .js).

Da bi se prikazao sadržaj stranice, sadržaj ovog odjeljka ima samo neizravno značenje, jer ukazuje: negdje u drugim datotekama postoje CSS pravila za oznake i skripte drugih jezika.

HTML stranica ima naslov (TITLE) koji se prikazuje kada posjetitelj dovede miš na karticu na kojoj je stranica otvorena. Ovo je važna stvar, jer čini stranicu znatno više prikladno, lakše reći, potpisanu s čitljivim tekstom.

META oznake su važne u programiranju Interneta uopće, ali kada želite stvoriti HTML stranicu u bilježnici, nepoželjno je nametati primjer s redundantnim konstruktima.

Posebnu pozornost treba posvetiti linkovima LINK i SCRIPT. Prvi put ukazuje na mjesto gdje stoji CSS stilski stil, drugi na mjesto JavaScript datoteke. Može biti mnogo takvih referenci.

Ako bi trebalo pristupiti scenarijima kada se učvrsti znanje o HTML-u, odmah se treba obratiti pozornost na kaskadne stilske listove. U CSS datotekama postoje, osobito, pravila za izradu HTML oznaka.

Odjeljak BODY

Zapravo, primjer HTML stranice je BODY particija. Ovdje se nalaze sve informacije, sav sadržaj stranice stranice. Sve informacije prikazane su u obliku oznaka i skripti, na primjer umetanjem JavaScript koda ili dijelova PHP programa.

Važno je shvatiti da je primjer HTML web stranice u pregledniku i isti primjer u uređivaču teksta, osobito notepad, daleko od istog. U prvom slučaju imamo gotovi HTML tekst, u kojem su sve skripte izvršene. Na primjer, PHP je ispunio svoj dio i generirao potrebne oznake umjesto svog koda na pravim mjestima. JavaScript je također ispunio svoju misiju, iako još uvijek postoji zaseban razgovor o tome.

HTML je oznaka, a ne skripta. Konačno, preglednik prikazuje samo sadržaj stranice, samo njezine oznake. Tu nema PHP koda.

JavaScript je na posebnom mjestu, zabrinutost je služiti stranicama ne samo u trenutku učitavanja (preopterećenja), već i kada je stranica u posjetiteljevom pregledniku, a korisnik ga proučava.

U nastavku je naveden jednostavan primjer HTML koda stranice (samo odjeljak BODY).

A u pregledniku posjetitelja izgleda slično kao u nastavku.

Kôd nije odredio kako izgledaju stavke preglednika. Svi vidljivi dizajn su u CSS pravilima. U tom je slučaju datoteka Mcss / scPhpWordRW.css, koja je navedena (vidi prvi primjer HTML stranice).

Za razliku od HTML-a, tema CSS je jednostavnija, postoje vrlo pristupačna pravila i njihov broj je mali, kada primjer izrade HTML stranice ne zahtijeva ništa drugo osim notepada. Sve je dostupno za trenutačno svladavanje:

Ovo pokazuje kako je opis scLogo_vDoc jednostavno opisan, a ovaj je opis takav da u normalnom stanju oznaka prikazuje sliku vDoc-logo.png i kada je miš iznad nje, prikazuje se vDoc-logo-h.png.

Struktura HTML opisa

Jezik ne podrazumijeva nikakvu strukturu, a koncept sintakse ovdje je vrlo relativan. Nema varijabli, ali ima mnogo mogućnosti. Osnovna osnova hiperteksta jest da postoji element (oznaka) koji nužno ima ime.

Ime, u slučaju parove, sastoji se od pravog naziva (tagName) i kutnih zagrada ("<" + tagName + ">"), ako je početak oznake i " Njezin kraj.

Primjer HTML stranice koji opisuje atribute nalazi se ispod u tekstu.

Oznaka može imati atribute, a zatim se dodaju nakon razmaka nakon naziva oznake prije zatvaranja kutnog zagrada ">". Atributi, ako imaju oznaku, napisani su samo na početku oznake. Sadržaj oznake je ono što je između početka oznake i njegovog kraja.

Opći sadržaj HTML opisa

HTML vam omogućuje da opišete blok i stavke retka. Prvi zauzimaju određeno područje u prozoru preglednika, može se postaviti apsolutno, to jest, na pravom mjestu u području zaslona HTML stranice i imati određenu veličinu.

Elementovi niza obično se prikazuju u jednoj niti, to jest, kako je naznačeno u datoteci stranice, i prikazuju se. Na stranici učitavanja može se utjecati na prikaz ukupnog protoka. Na bilo koji način može utjecati na položaj, vidljivost i druga svojstva blokskih elemenata pomoću JavaScript koda.

Osim jednostavnih elemenata, HTML nudi opis tablica i oblika. Ti su elementi jako traženi u "svakodnevnoj gradnji web stranica".

Opis tablice: oznake TABLICA, TR, TD

Pomoću tablice TABLE možete stvoriti tablicu, odrediti broj redaka TR, a u svakom retku broj TD stanica. Za razliku od uobičajene tablične organizacije, zbog osobitosti HTML obilježavanja, tablična organizacija je ograničena na ovu deklaraciju, stoga ako programer želi imati pravokutnu tablicu u kojoj je broj stupaca u svim redcima isti, tada mora sam slijediti.

Osnovni položaj HTML-a: učiniti sve što je naznačeno, ali ništa što nije razumljivo. U nekim slučajevima broj stupaca u svakom retku tablice nije toliko važan, ali ako trebate kombinirati ćelije okomito ili vodoravno, morat ćete sve pažljivo računati.

Primjer HTML stranice koji opisuje jednostavnu tablicu jasno je prikazan u članku.

Evo tablice s veličinom od tri retka po tri stupca, s naslovom TH-stupca koji se koristi umjesto TD oznake u prvom retku. Ne postoje posebne razlike između ove dvije oznake, ali možete koristiti prvo mjesto za razlikovanje prvog reda tablice, a u CSS-u TH možete dodati svoj stil, što ga razlikuje od drugih TD-ova.

Opis forme: FORM, INPUT oznake

Obrasci su najviše traženi dio HTML oznaka. Pomoću obrasca možete prenijeti podatke. Zapravo, sama stranica je izlaz informacija, ali oblik je njegov unos.

Primjer HTML stranice s jednostavnim opisom obrasca:

Varijante upotrebe oblika mnogo su veće, ali glavne mogućnosti su sljedeće. Možete navesti polja za unos, dodijeliti im dizajn i korisnike za analizu korisničkog unosa. Možete odrediti skriveno polje i poslati pozadinske podatke sa stranice. Možete odrediti gumbe za prijenos informacija, klikom na koji pokreće prijenos informacija.

Korištenje HTML-a

Poznavanje jezika hiperteksta neophodan je uvjet za bilo koju specijalizaciju u području internetskog programiranja, ali ako trebate pisati programe u PHP-u ili JavaScript-u, onda morate savršeno znati HTML + CSS.

PHP jezik je označen u prethodnom primjeru. PHP se pokreće na poslužitelju pa je stranica s ovim obrascem letjela s poslužitelja u preglednik s ispunjenim poljima. Konkretno, funkcija TestOnBlur, spomenuta u INPUT tagu (onblur handler), primila je sve parametre kao tekstualna polja.

U pregledniku JavaScript funkcionira i kako bi gumb za slanje ispravno funkcionirao natrag na poslužitelj, to jest dizajn: onclick = jQuery ('# to'). Val ('cart'), morate imati ideju ne samo o tome što je jQuery, Ali i ono što je #to, val, cart. Preciznije, trebate znati glavne HTML oznake i opća pravila za primjenu CSS stilova na njih.

To je prilično dovoljno da brzo podigne svoje kvalifikacije za bilo koju specijalizaciju u području internetskog programiranja.