HTML Essentials Cheat Sheet: oznake, atributi i više

Izrada web stranica počinje s HTML-om. Uljepšati ih i učiniti interaktivnim dolazi kasnije. Ali da biste počeli stvarati funkcionalne statičke web stranice, potrebno vam je razumijevanje HTML-a. (Želite li brzi uvod u ovaj označni jezik? Pročitajte naše HTML FAQ.)

Kao dio učenja jezika, postoji dugačak popis elemenata koje trebate dodati u svoj HTML vokabular. I ovaj zadatak se na prvu može činiti zastrašujućim, zbog čega smo smislili sljedeću varalicu. Omogućuje vam jednostavan način za otkrivanje/razumijevanje/pozivanje HTML elemenata kad god vam zatrebaju.

Cheat sheet pokriva oznake i atribute za strukturiranje web stranica, oblikovanje teksta, dodavanje obrazaca, slika, popisa, poveznica i tablica. Također uključuje oznake koje su uvedene u HTML5 i HTML kodove za često korištene posebne znakove.

BESPLATNO PREUZIMANJE: Ovaj cheat sheet dostupan je kao a PDF koji se može preuzeti od našeg partnera za distribuciju, TradePub. Morat ćete ispuniti kratki obrazac da biste mu pristupili samo prvi put. preuzimanje datoteka HTML Essentials Cheat Sheet.

HTML Essentials Cheat Sheet

... ... ... ... ...

...

Prečac	Akcijski
Osnovne oznake
...	Prva i posljednja oznaka HTML dokumenta. Sve ostale oznake nalaze se između ovih oznaka otvaranja i zatvaranja.
...	Određuje prikupljanje metapodataka za dokument.
	Opisuje naslov stranice i prikazuje se u naslovnoj traci preglednika.
...	Uključuje sav sadržaj koji će biti prikazan na web stranici.
Informacije o dokumentu
Spominje osnovni URL i sve relativne veze na dokument.
Za dodatne informacije o stranici poput autora, datuma objave itd.
Veze na vanjske elemente poput stilskih tablica.
	Sadrži informacije o stilu dokumenta kao što je CSS (kaskadni listovi stilova).
	Sadrži veze na vanjske skripte.
Oblikovanje teksta
... ILI ...	Podebljava tekst.
...	Ispisuje tekst u kurzivu i podebljava ga.
...	Tekst je kurziv, ali ne podebljan.
...	Precrtan tekst.
...	Citira autora citata.
...	Označava izbrisani dio teksta.
...	Prikazuje odjeljak koji je umetnut u sadržaj.
...	Za prikaz citata. Često se koristi s označiti.
...	Za kraće citate.
...	Za kratice i pune oblike.
...	Određuje podatke za kontakt.
...	Za definicije.
...	Za isječke koda.
...	Za pisanje indeksa
...	Za pisanje superskripta.
...	Za smanjenje veličine teksta i označavanje suvišnih informacija u HTML5.
Struktura dokumenta
...	Različite razine naslova. H1 je najveći, a H6 najmanji.
...	Za podjelu sadržaja u blokove.
...	Uključuje umetnute elemente, poput slike, ikone, emotikona, bez uništavanja oblikovanja stranice.
...	Sadrži običan tekst.
	Stvara novu liniju.
	Crta horizontalnu traku za prikaz kraja odjeljka.
Popisi
...	Za naručeni popis artikala.
...	Za neuređeni popis stavki.
...	Za pojedinačne stavke na popisu.
...	Popis stavki s definicijama.
...	Definicija jednog pojma u skladu sa sadržajem tijela.
...	Opis za definirani pojam.
Linkovi
...	Sidrena oznaka za hiperveze.
...	Oznaka za povezivanje s adresama e-pošte.
...	Sidrena oznaka za popis brojeva kontakata.
...	Oznaka sidra za povezivanje na drugi dio iste stranice.
...	Prelazi na div odjeljak web-stranice. (Varijacija gornje oznake)
Slike
	Za prikaz slikovnih datoteka.
Atributi za označiti
src=”url”	Veza na izvorni put slike.
alt=”tekst”	Tekst koji se prikazuje kada se mišem pređe preko slike.
visina=” ”	Visina slike u pikselima ili postocima.
širina=” ”	Širina slike u pikselima ili postocima.
poravnati=” ”	Relativno poravnanje slike na stranici.
granica=” ”	Debljina obruba slike.
	Veza na kartu na koju se može kliknuti.
	Naziv slike karte.
Područje slike slikovne karte.
Atributi za označiti
oblik=” "	Oblik područja slike.
koordinate=” ”	Koordinate područja slike karte.
Obrasci
...	Roditeljska oznaka za HTML obrazac.
Atributi za označiti
action=”url”	URL na koji se šalju podaci obrasca.
metoda=” ”	Određuje protokol za podnošenje obrasca (POST ili GET).
enctype=” ”	Shema kodiranja podataka za POST podneske.
samodovršavanje	Određuje je li automatsko dovršavanje obrasca uključeno ili isključeno.
novalidate	Određuje treba li obrazac biti valjan prije slanja.
accept-charsets	Određuje kodiranje znakova za slanje obrasca.
cilj	Pokazuje gdje će se prikazati odgovor na podnošenje obrasca.
...	Grupira povezane elemente u obliku/
...	Određuje što korisnik treba unijeti u svako polje obrasca.
...	Naslov za element skupa polja.
Određuje koju vrstu unosa treba uzeti od korisnika.
Atributi za označiti
tip=””	Određuje vrstu unosa (tekst, datumi, lozinka).
ime=””	Određuje naziv polja za unos.
vrijednost=””	Određuje vrijednost u polju za unos.
veličina=””	Postavlja broj znakova za polje za unos.
maksimalna duljina=””	Postavlja ograničenje dopuštenih znakova za unos.
potreban	Polje za unos čini obveznim.
širina=””	Postavlja širinu polja za unos u pikselima.
visina=””	Postavlja visinu polja za unos u pikselima.
rezervirano mjesto=””	Opisuje očekivanu vrijednost polja.
uzorak=””	Određuje regularni izraz koji se može koristiti za traženje uzoraka u tekstu korisnika.
min=””	Minimalna dopuštena vrijednost za ulazni element.
max=””	Maksimalna dopuštena vrijednost za ulazni element.
onemogućeno	Onemogućuje ulazni element.
...	Za hvatanje dužih nizova podataka od korisnika.
...	Određuje popis opcija koje korisnik može birati.
Atributi za označiti
ime=””	Određuje naziv za padajući popis.
veličina=””	Broj opcija koje se daju korisniku.
višestruko	Određuje može li korisnik odabrati više opcija s popisa.
potreban	Određuje je li odabir opcije/e neophodan za podnošenje obrasca.
autofokus	Određuje da padajući popis automatski dolazi u fokus nakon učitavanja stranice.
...	Definira stavke na padajućem popisu.
vrijednost=””	Prikazuje tekst za bilo koju opciju.
odabran	Postavlja zadanu opciju koja se prikazuje.
...	Oznaka za stvaranje gumba za slanje obrasca.
Objekti i iFramovi
	Opisuje ugrađenu vrstu datoteke.
Atributi za
visina=””	Visina objekta.
širina=””	Širina objekta.
tip=””	Vrsta medija koji objekt sadrži.
	Inline okvir za ugrađivanje vanjskih informacija.
ime=””	Naziv iFramea.
src=””	Izvorni URL za sadržaj unutar okvira.
srcdoc=””	HTML sadržaj unutar okvira.
visina=””	Visina iFramea.
širina=” ”	Širina iFramea.
Dodaje dodatne parametre za prilagodbu iFramea.
...	Ugrađuje vanjsku aplikaciju ili dodatak.
Atributi za
visina=” “	Postavlja visinu ugradnje.
širina=” “	Postavlja širinu ugradnje.
tip=””	Vrsta ili format ugradnje.
src=””	Izvorni put ugrađene datoteke.
Tablice
...	Definira sav sadržaj za tablicu.
Opis tablice.
Zaglavlja za svaki stupac u tablici.
Definira podatke tijela za tablicu.
Opisuje sadržaj za podnožje tablice.
Sadržaj za jedan red.
	...	Podaci u jednoj stavci zaglavlja.
	...	Sadržaj unutar jedne ćelije tablice.
Grupira stupce za oblikovanje.
Jedna kolona informacija.
HTML5 nove oznake
...	Određuje zaglavlje web stranice.
	Određuje podnožje web stranice.
...	Označava glavni sadržaj web stranice.
...	Određuje članak.
	Određuje sadržaj bočne trake stranice.
...	Određuje određeni odjeljak na web stranici.
...	Za opis dodatnih informacija.
...	Koristi se kao naslov za gornju oznaku. Uvijek je vidljiv korisniku.
...	Stvara dijaloški okvir.
...	Koristi se za uključivanje grafikona i slika.
	Opisuje a element.
...	Ističe određeni dio teksta.
	Skup navigacijskih veza na web stranici.
...	Određena stavka s popisa ili izbornika.
...	Mjeri podatke unutar zadanog raspona.
...	Postavlja traku napretka i prati napredak.
...	Prikazuje tekst koji ne podržava Ruby bilješke.
...	Prikazuje detalje znakova tipografije istočne Azije.
...	Ruby napomena za istočnoazijsku tipografiju.
...	Identificira vrijeme i datum.
Prijelom reda unutar sadržaja.
¹HTML5 znakovni objekti
" ILI "	Navodnici
< ILI &lt ;	Znak manje od (
> ILI &gt ;	Znak veće od (>)
ILI &nbsp ;	Prostor bez prekida
© ILI &copy ;	Simbol autorskog prava
™ ILI &ucirc ;	Simbol zaštitnog znaka
@ ILI &Uuml ;	simbol "at" (@)
& ILI &amp ;	Simbol ampersanda (&)
• ILI &ouml ;	Mali metak
¹Zanemari razmak ispred točke-zareze dok upisujete HTML znak.

Izradite web stranicu za praktično iskustvo

Nakon što ste shvatili osnove HTML koda i imaju radno znanje o CSS-u i JavaScriptu, okušajte se u izradi web stranice Kako napraviti web stranicu: za početnikeDanas ću vas voditi kroz proces izrade kompletne web stranice od nule. Ne brinite ako ovo zvuči teško. Vodit ću vas kroz to na svakom koraku. Čitaj više . Također, svakako sačuvajte naše CSS3 svojstva cheat sheet The Essential CSS3 Properties Cheat SheetOvladajte osnovnom CSS sintaksom pomoću naše šifre CSS3 svojstava. Čitaj više i JavaScript cheat sheet Ultimate JavaScript Cheat SheetNabavite brzo osvježenje o JavaScript elementima uz ovaj cheat sheet. Čitaj više za buduću upotrebu!