Kako napraviti web stranicu, 2. dio, kompletnu stranicu izrađenu od 0 u HTML-u, CSS-u s galerijom slika - video tutorial

Ovaj tutorial opisuje lokaciju pomoću HTML-a i CSS-a, koja obuhvaća sve faze: razvoj web stranica,
stvaranja računa na besplatni hosting i konačno upload datoteka našu web stranicu na taj hosting, besplatni hosting je brz postupak stavljanja web stranice naše online u roku od nekoliko minuta, nedostatak ove metode je da ćemo imati neki oglasi prikazuju u svim vremenima na vrhu (header gore).

Svatko tko želi otvoriti web stranice, trebate znati HTML i CSS, ne treba biti stručnjak u HTML-u (Hyper Text MArkupe Language), ali neke informacije o kodu apsolutno su ključne za razumijevanje načina na koji ove stvari funkcioniraju.

Čak i ako ste izgraditi jednom mjestu, i dalje morati da nemaju pojma o tome što se događa kroz te datoteke će zahtijevati periodične korekcije grešaka ili postizanju promjena.

Mnogi ljudi bježe od koda, mnogi uspoređuju hijeroglife, to uopće nije tako, neko je jednom rekao: "KOD JE POEZIJA", bio je u pravu, kad vidite da se iz niza redaka koda nešto rađa, osjećate se divno, gradite virtualni svijet samo s tipkovnicom i mišem

Dugo smo koristili aplikacije koje su napravile softverske kompanije, radili smo samo rad s računalom, vrijeme je da se programiramo, u stvari to nije programski jezik, to je "označni jezik", ali mi ćemo se odnositi na to je poput programskog jezika, jer zvuči prilično čudno "označni jezik", HTML je jedan od najlakših programskih jezika (markup) koji se danas koriste. HTML vidimo na bilo kojem web mjestu, mnogi softveri imaju oni su komponente HTML-a, ovaj programski jezik je svuda, vrijeme je da ga naučite.

Prvi put može biti manje zastrašujuće, ali ako ste pažljivi nego odmah ćete shvatiti da nije sve to tako teško su jednostavne i lijepe stvari, mi stvaramo nešto s rukama, to je najvažnija stvar.

Mi ćemo naučiti osnove, a onda smo saznali kako unijeti tekst na web-stranici, onda ćemo organizirati i da će boja teksta, koristimo stranica stila CSS (Cascading Style Sheets), s kojim ćemo staviti sve elemente stranice HTML na sve, tako da će mjesto na našim web stranicama je napravljen da izgleda kao jedan komad.

Vi ćete naučiti jednostavne tehnike, osnovni HTML i CSS, iako su osnovne stvari u HTML i CSS, stvorit će se pregled ugodan.

Za ovaj tutorial si se moraju naoružati s pažnjom i strpljenjem, ovaj tutorial nije nešto što možemo si priuštiti da nose na malo, ako pomičite nekoliko sekundi možete propustiti nešto veoma važno, a što će se vidjeti nakon toga više nema smisla, koncentracija informacija je izuzetno visoka i zato vas molim da se vrlo, vrlo oprezni.

Nakon što je ovaj udžbenik, čak i intenzivnom tečaju rekao bih, od vas će imati bolju ideju što HTML i CSS, možete kontrolirati kod dobro i da u potpunosti razumiju HTML dokumenta, osjećaj da HTML nije samo niz heroglife će se trošiti, znate što je to kada pogledate HTML ili CSS jedan.

Mi ćemo naučiti o oznakama (oznake), ovdje imamo neke primjere oznaka (tagova) koje možete koristiti u HTML dokumentu, ne brinite, ne morate ih pamtiti sve, što je potrebno kako bi naučili samo osnove u prvoj tablici ostatak se može naći ovdje na stranici ili na net kad ih trebate.

Čak su stolovi naručio ove oznake, izrađeni su pomoću HTML-a.

Osnovni elementi (oznake).

Definira format datoteke Web
zaglavlje dokumenta
Tilul dokument
HTML tijelo stranica
bgcolor = boja Boja pozadine stranice
TEXT =boja Boja teksta na stranici
LINK =boja stranica u boji unvisited veza
vlink =boja Boja veze posjećene stranice
ALINK =boja Boja veze tijekom klik korisnika exacutat
POZADINA = uRL Stranica slike pozadine
stav
<Hn> <Hn> Podnaslov razini dokumenta (n = 1-6)
Specifični atributi uokvirenu teksta
size =n Veličina tekst je 1-7
FACE ="A, b" Odredite font: aAko je dostupan, ili b
COLOR =s Boja teksta: ili ime boje ili RGB vrijednosti
novi red
informacije formatiran
HTML Comenatriu
Materijal centri u stranicu
horizontalna vladar
size =x Visina Vladar u pikselima
width =x Širina Vladar u pikselima ili postocima
NOSHADE Onemogući prikaz sjena za horizontalnu vladara
align =x Usklađivanje horizontalno ravnalo na stranici (lijevo, centar, desno)
COLOR =x Boja horizontalna vladar (samo IE)
Mark tipa sidro
href =uRL hipertekst referenca
href =#name Reference na unutarnju sidro
name =ime Definicija interne sidara

Stavke na listama .

definicija Opis
Definicija tipa popis
U okviru definicije
popis značajki
<OL Ž listu (brojevima)
TIP =vrsta Brojčano. Moguće vrijednosti: A, A, ja, ja, 1
START =x Broj počeo popis naručeni
<UL Neuređen popis (označen)
TIP =oblik Oblik oznake. Moguće vrijednosti: krug, kvadrat, disk.

Elementi oblikovanja znakova .

Lijepljenje teksta podebljano
Zalijepiti tekst u kurzivu
Paste istaknuti tekst
Monospaced font teksta
citat bibliogarfica
program popis
Stil isticanje logika
Tekst tipkovnica
Ističući snažnu logiku
Program ili promjenjiva
<OSNOVNI FONT size = n> Određuje standardnu ​​veličinu fonta stranice

Elementi za okvire .

Definiranje pisanja stranicu
COLS =x Broj i relativnu veličinu stupaca
ROWS =x Broja i relativne veličine linije
border =x Određuje status "uključeno" ili "isključeno" za okvir FRAMESET (1 ili 0)
frameborder = x Određuje veličinu okvira
FRAMESPACING = x Količina prostora između dviju susjednih okvira
Definicija određenog okvira
SRC =uRL URL izvor za okvir
name =ime Naziv okvira (koristi se zajedno s TARGET = naziv kao dio oznake sidra
Pomicanje =SCRL Definiranje opcija bar derulare.Valori moguće: o (aktiviranje), isključeno (neaktivan), Automatski (automatsko)
frameborder =x Veličina granice oko okvira
marginheight =x Dodatni prostor iznad i ispod određenog okvira
marginwidth =x Suplimetar prostora lijevo i desno za određeni
Odjeljak stranica prikazuje korisnicima koji ne mogu vidjeti okvir
Okvir (samo (IE)
SRC =uRL izvor okvira
name =s Ime prozor (korisno za cilj)
height =x Ugrađeni visina okvira
width =x Ugrađeni širina okvira

Elementi za stolove .

HTML tablica
border =x granica stol
cellpadding =x Dodatni prostor unutar ćelija tablice
cellspacing =x Dodatni prostor između ćelija tablice
width =x Nametnuta širina tablice
OKVIR =vrijedan Fino podešavanje stola
PRAVILA =vrijedan Vladari u redu tablice podešavanje
borderColor = boja Specifikacije Boja obruba tablice
BORDERCOLORLIGHT = boja Upaljač boja dvije boje navedeno
BORDERCOLORDARK = boja Tamnije boje od dvije boje navedeno
align =lijevo Poravnava tablicu na lijevu marginu stranice, a tekst teče desnu stranu
align =pravo Poravnava tablicu na desnom rubu stranice i tekst teče u lijevo
hspace =x Suplimetar horizontalna prostor oko stola
vspace =x Suplimetar vertikalni prostor oko stola
COLS =x Određuje broj stupaca tablice
Definira skup definicija stupaca pomoću označavanja
<COL width =x> Definira širinu stupca u pikselima
Određuje naslov tablice
Definira tijelo stol
tablica Line
bgcolor =boja Određuje boju pozadine za cijelu liniju
align =poravnanje Cell poravnanje na trenutnoj liniji (lijevo, centar, desno)
ćelija za podatke iz tablice
bgcolor =boja Određuje boju pozadine za podatke stanica
colspan =x Broj stupaca koji pokriva trenutne podatke stanica
rowspan =x Broj linija koje se protežu trenutne podatke stanica
align =poravnanje Usklađivanje tkivo stanice date.Valori moguće: (lijevo, desno, u sredini)
VALIGN =poravnanje Okomito poravnanje materijala iz stanice date.Valori moguće: (gore, dolje, u sredini)
POZADINA =uRL Određuje pozadinsku sliku za ćeliju tablice
noWrap Nemojte dopustiti cijepanje redaka teksta unutar ćelije
align =osnovica Poravnanje podataka stanice na osnovicu od susjednog teksta
align =karakter Poravnava stupac prema određenom znaku (zadani znak je ".")
align =opravdati Poravnajte lijevi rub i desni rub teksta

Opcije za dodavanje slika.

<IMG Obilježavanje ulazne slike
SRC =uRL Izvorna datoteka grafički
alt =tekst Alternativni tekst za prikaz, ako je potrebno,
align =poravnanje Poravnavanje slike na stranici. Moguće vrijednosti: top (vrh), srednji (u sredini), na dnu (ispod), lijevo (lijevo), desno (desno)
height =x visina slike (u pikselima)
width =x širina slike
border =x Okvir oko slike kada se koristi kao hiperveza
hspace =x Dodatni prostor oko slike horizontalno (u pikselima)
vspace =x Dodatni prostor oko slike okomito (u pikselima)

Obrasci elemenata.

Aktivno HTML obrazac
AKCIJA =uRL CGI program na poslužitelju koji prima podatke
METODA =način Kako se podaci prenose na poslužitelj (GET ili POST)
<ULAZ Kamp tekst ili neki drugi unos podataka
TIP =opcija Vrsta polja za unos . Moguće vrijednosti: tekst, lozinka, potvrdni okvir, skriveni, datoteka,
Radio, podnijeti, reset, slike.
name =ime Polje simboličan naziv vrijednost
VRIJEDNOST =vrijedan Polje Sadržaj zadani tekst
checked = opcija Tipka / okvir označen je prema zadanim postavkama
size =x Broj znakova u tekstualnom polju
size =x Maksimalni dozvoljeni broj znakova
kućice grupe
name =ime Polje simboličan naziv vrijednost
size =x Broj stavki izbornika koji se prikazuju jednom (zadana = 1)
VIŠE =x Omogućuje višestruki odabir stavke izbornika
<OPCIJA Poseban izbor u polju
VRIJEDNOST =vrijedan Dobivena vrijednost ovog izbornik za odabir
Tekst Camp pojačanje na više linija
name =ime Polje simboličan naziv vrijednost
ROWS =x Broj redaka tekstualni okvir
COLS =x Broj stupaca (znakova) po liniji okvir za tekst
Podijelite logički oblik u dijelovima
Naziv povezan skup polja (fieldsets)
align =s Navedite legendu poravnanje (objašnjenja) prikazani (gore, dolje, lijevo, desno)
TabIndex =x Navedite stavke naloga kad korisnik pritisne tipku Tab
ACCESKEY =c Koja pruža specifičan ključ s tipkovni prečac povezan s određenom točkom
INVALIDITETOM Element nije aktivan, ali se prikazuje na zaslonu
samo za čitanje Element se prikazuje na ekranu, ali ne mogu se uređivati

Napredni elementi.

Specifične informacije o modelu stilova
TIP =Val Vrsta modela stila. Obično "tekst / css"
Obično uključuje skriptu JavaScript u Vašem web stranicu
JEZIK =jezik Jezik koji se koristi
DOGAĐAJ =događaj Događaj koji izaziva izvršenje određenih skripti
Za =numeobiect Naziv objekta stranica na kojoj djeluje skriptu

DOWNLOAD HTML tablice s oznakama

Ako želite posjetiti web provedena udžbenik, možete pristupiti na ovoj adresi: http://www.videotutorial.150m.com.

Preporučujem vam raspakirajte prilog i proučiti tri datoteke u HTML ili CSS datoteku koristeći Notepad ++ ili neki drugi program za uređivanje web stranice na ovaj način mogu napraviti promjene Cau može čak i napraviti bilješke tijekom njega ćete naučiti html bez tebe računa.

Želite li ugodno i dobrodošli ste na sljedećim tutoriali u ovoj seriji i izvan nje.

Preuzimanje datoteka TEST

Dan Constantin
tutorialegimp.blogspot.com
Cristian Cismaru: Sviđa mi se sve vezano za IT&C, volim dijeliti iskustva i informacije koje akumuliram svaki dan. Učim te učiti!

Pregled Komentari (333)

  • Jako lijepo, tona informacija u ovom vodiču.
    Ovaj udžbenik može nazvati infuzija HTML-a i CSS-a.
    Možda ti ne bi naučiti u nekoliko mjeseci ovdje možete naučiti u sat vremena ili tako, ja sam to sve vidjela prije nego što je objavljena i mogu reći da me se dojmilo, citiram informacije mogu stati u udžbenik.
    U jednom trenutku sam osjetio potrebu da pije vodu, iako sam samo gledao tutorial, niti želim misliti, citirajući Dan pio vodu nakon toga.
    Postoji nešto ne naučiti HTML i / ili CSS nakon ovog tutorial.

  • Aoleu, ono što pokušavam naučiti oko 3 mjeseca, izgleda da nemam vremena ...
    Hvala puno, ja sam ga gledati pažljivo!

  • Cristi-adminJako lijepo, tona informacija u ovom vodiču.
    Ovaj udžbenik može nazvati infuzija HTML-a i CSS-a.
    Možda ti ne bi naučiti u nekoliko mjeseci ovdje možete naučiti u sat vremena ili tako, ja sam to sve vidjela prije nego što je objavljena i mogu reći da me se dojmilo, citiram informacije mogu stati u udžbenik.
    U jednom trenutku sam osjetio potrebu da pije vodu, iako sam samo gledao tutorial, niti želim misliti, citirajući Dan pio vodu nakon toga.
    Postoji nešto ne naučiti HTML i / ili CSS nakon ovog tutorial.

    da, u pravu si, Cristi, ali razočarana sam jer sam mislila da ćeš uraditi tutorial :( ali svejedno bravo dan je vrlo dobar tutorial

    • Nije lijepo što ste rekli i iskreno vam kažem, ovaj se čovjek borio oko sat i pol da vas nauči kako napraviti stranicu od nule, a vi kažete da ste razočarani jer je nije napravio? Možete li zamisliti koliko je posla čovjek uložio i koliko je vremena izgubio da nas nauči osnovama html-a i css-a, razmislite prije nego što otvorite usta da vam ne bi odgovaralo da predate posao, a zatim ostavite ostale nepotrebne komentare poput razočarani ste što nije stavio, netko je drugi stvorio ovaj udžbenik, hvala vam što imate gdje učiti;)

  • kljun:
    Cristi da ste u pravu, ali ja sam razočaran jer sam vjerovao da će učiniti tutorialu ali svejedno dan Bravo vrlo dobre tutorialu

    Što mislite, da je serija o "Kako napraviti web stranicu" gotova.
    U sljedećem tutorial će biti ja.
    Zato što je sljedeći tutorial ću morati gledati ovaj tutorial je provela Dan.
    Ono što sam predstaviti se razlikuje od tutorial sam napravio aza Dan, ali informacije u njemu će biti neophodna za pravilno razumijevanje stvari.
    Nekoliko načina za objavljivanje sadržaja na webu, ali svi imaju zajednički nazivnik, HTML i CSS, bez njih ne možete ništa učiniti.

  • Cristi-admin:
    Što mislite, koji je završio seriju na "Kako napraviti web stranicu".
    U sljedećem tutorial će biti ja.
    Zato što je sljedeći tutorial ću morati gledati ovaj tutorial je provela Dan.
    Ono što sam predstaviti se razlikuje od tutorial sam napravio aza Dan, ali informacije u njemu će biti neophodna za pravilno razumijevanje stvari.
    Nekoliko načina za objavljivanje sadržaja na webu, ali svi imaju zajednički nazivnik, HTML i CSS, bez njih ne možete ništa učiniti.

    Pozdrav Cristi, doći će niz php ili JS?

  • Alex:
    Pozdrav Cristi, doći će niz php ili JS?

    Razgovaramo o svemu, ali i PHP i JS stranica veže za HTML, HTML ne može biti bez.
    PHP se više koristi za izdvajanje podataka iz baza podataka, web stranice su još uvijek u HTML-u, bez obzira govorimo li o dinamičkim web-lokacijama (php, dhtml, asp, jsp, cf) ili govorimo o statičkoj web-lokaciji koristite HTML, bez njega ne možete ništa učiniti.
    Mnogi čine veliku pogrešku "Ne želim HTML web mjesto više, želim dinamično php mjesto", velika je greška, HTML se koristi gotovo svugdje, bilo da govorimo o dinamičkim web lokacijama ili statičkim web lokacijama.
    JS (Java Script) nije isto sa JSP (Java Server Pages) koja ovisi o poslužitelju, JS stranice se koriste za određene skripte, nema potrebe za bilo koji poslužitelj skripte JS može pokrenuti u bilo kojem pregledniku, bez potrebe poslužitelj komponenta, te u ovom tutorial, Dan koristi niz scenarija JS (galerija slika), da se stvari pravovremene koristi JS, nema pune stranice sa JS, umjesto punopravni web stranice koriste Javu server Pages to je nešto drugo, iako se čini isto.
    Znam da ste započeli s proučavanjem "koda" davno, ovaj je udžbenik izvrsna pomoć, Dan je učinio izvanrednu stvar s ovim tutorijalom, ni ne znate koliko je ovaj udžbenik vrijedan, pod udžbenikom imate gotovo sve oznake ) koji se koristi u HTML-u, možete ih koristiti, pogotovo jer svaki ima opis.
    Ne dopustite da vaš ALEX, razbiti šifru, ona se temelji.
    Vjerujte mi, nedostaje ti NE za potencijalne!

  • wow puno jako dobro strukturiranih podataka tako da ih bilo tko može razumjeti. Osobno sam pogledao udžbenik samo da bih otkrio nešto novo, a kako je udžbenik napredovao zadivljen sam kako se lako može napraviti stranica, a ne previše učitana i vrlo ugodna za gledanje. Čestitam na ovom udžbeniku, ali i na svim ostalim. Radujem se sljedećoj "infuziji" (Cristijeve riječi) s informacijama.

  • To će biti uvod Dreamweaver? DC ne koristiti Dreamweaver ili u svojim tutoriali?

    Čestitke za sve tutorijale ... najjači ste;)

  • Pozdrav .. udžbenik je stvarno sjajan, ima "tona" informacija ... i ja mislim da sam morao naučiti osnovni html u naslovnoj stranici 98 radeći desetine testova uzetih iz knjiga u knjižnici, jer nisam imao neto u to vrijeme i sad mogu gledati udžbenik koji objašnjava sve što moram znati .. jasno je da sam se razvio :))) .. svidjelo mi se to što je to objašnjeno korak po korak i da su stavljeni na web stranici sve osnovne naredbe + primjer na kojem se može raditi .. jasno je da znate što radite pravi ste učitelji !!
    Ipak, veliki dio onih koji rade u web dizajnu pomoću programa koji se automatski čine narudžbe i moje pitanje je hoćeš li napraviti tutorial s takvim programom ??
    Znam da ste napravili ovaj tutorial za razumijevanje naredbi i time bolje razumijevanje programa web dizajna ... ali još uvijek sam znatiželjan vidjeti što ćete nastaviti s ovim nizom udžbenika jer se o ovoj temi puno govori, čak i ako ga neki smatraju dosadno kad su u pitanju udžbenici poput one koju je napravio Dan, što ovom prilikom čestitam na udžbeniku ...

Povezano post

Ova web stranica koristi kolačiće.