U ovom 'hands-on' modul ćemo zgradi naše prve web stranice ni u kojem trenutku. Mi samo trebate brzo pokriti par bodova unaprijed kako bi se dobili noge naše na terenu.
Tri su načina na koje možete izgraditi web-stranicu
1. Koristi unaprijed napravio predložak: Što je Web dizajn predložak?
A web dizajn predloška je već napravljena website design template koji se može prilagoditi tako da odražava Vaše tvrtke branding. Website Design predlošci mogu se naći u različitim oblicima kao što su Photoshop i HTML. Mnogo puta, te su kompatibilne s predlošcima HTML editori poput GoLive, FrontPage i Dreamweaver.
Web stranica predložaka može biti vrlo korisno, jer se može koristiti od strane iskusnog web dizajnera u "skok-start" izradu web stranicu. Oni su također način za ljude da se odlično izgleda web stranice brzo, s malo ili bez znanja o HTML i web dizajna.
2. Koristite HTML editora kao Dreamweaver ili FrontPage:
HTML editori čine zgrade prohtjeti web stranice (do određene mjere) stvaranja dokumenta u Microsoft Word ... to je prilično jednostavno. Ali downside je da ti propadne određenu količinu kontrole onoga što ste radili u nekim slučajevima i postali ovisni o programu.
3. Hand-kod u HTML uređivač teksta kao što je Notepad:
To znači da ste tip u HTML kod sebe. Taj je pristup ćemo koristiti ovdje, jer to je najbrži način kako bi naučili kako izgraditi web stranice, a ona je arguably najbolji način, jer imate najviše kontrole nad ono što radite.
Ok, sada kada znamo prednosti ručno kodiranje web stranica, let's skočiti u samo goli minimum teorije, tada ćemo graditi naš prvi web stranice!
Što su HTML oznake?
HTML tagovi su posebno formatirani tekst koji stvara 'markere' za web preglednik za čitanje i interpretaciju. Ovi 'markeri' reći web pregledniku što i kako stvari prikazati na web stranici. Tagovi su smješteni u i oko teksta i slika (tekst i slika su neke od "stvari") koji je vaš žele imati se pojavljuju na Vašim web stranicama.
HTML je cijela gomila tagovi (isto kao i cijela abeceda ima hrpa slova) da je web dizajner može koristiti za izgradnju web stranice. Kao što je spomenuto gore, oznake su specifične strukture, tako da kada se preglednik čitanje HTML stranicu, to zna i oznake iz normalnog teksta.
Tagovi su najčešće riječi ili kratica riječi smještene između angled zagradama. Tako na primjer: da podebljam tekst, HTML ima 'podebljan' oznaku koja izgleda ovako:
<b> Ovaj tekst će biti podebljane </ b>
Druga često korištena oznaka je stavka tag:
<p>
Ovo je paragraf teksta.
</ p>
Vi svibanj imati primjećen taj HTML tagovi dolaze u paru, HTML ima i početni tag (<tag name>) i zatvaranja tag (</ naziv oznake>). Jedina razlika između otvaranja i zatvaranja tagova je da je zatvaranje tag sadrži dodatni kosa crta.
PRIMJER neke HTML oznake koji bi mogli napraviti stvari jasnije:
Stvara <b> tekst podebljano </ b>
Stvara <i> tekst kurzivan </ i>
Pokazuje <h1> preglednik da je ovaj tekst je vrlo važno - preglednik obično čini ovaj tekst stvarno velik </ H1>
<table> Stvara HTML tablice - pomislimo tablicu </ table>
Nadam se da možete vidjeti uzorak na popisu gore.
HTML oznake ne samo za postavljanje i oblikovanje teksta, HTML oznake mogu se koristiti kao i druge stvari kao što su: animacije, video, flash, audio, pa čak i multimedijalne programe.
HTML code Uspoređivanje i kreira web stranicu
Počnimo s vrlo jednostavne web stranice kako bi je se tako lako da razumijete. Prvi omogućava pogled na završnoj stranici: uzorak web stranica
Sada kad smo vidjeli što je stranica izgleda, dozvoljava 'pogledati na HTML kôd koji se koriste za kreiranje web stranice.
Što trebate učiniti sada je uzeti malo vremena i usporedite HTML stranicu i stranicu s kodom koji se koristi za kreiranje web stranice. Obavijest oznake gdje su i što rade.
Neki Teorija: Struktura HTML stranicu
HTML stranici je podijeljena u dva glavna dijela:
1. Glava
Glava (<head>) poglavlje sadrži temeljne informacije o stranici koja ne bi se prikazivati u web-stranicu (osim za naslov stranice). To se, međutim, imati na koji način utjecati na web stranice koja se prikazuje.
2. Tijelo
Tijelo (<body>) odjeljku: ovo poglavlje sadrži sve stvari koje se pojavljuje na web stranici stvarni se događa kada netko dolazi zajedno sa svojih web preglednika. Radi se o stvarnim tekst, slike, flash filmove, i tako dalje da će ljudi vidjeti. To, naravno, znači da se oznake koriste za formatu su sve ove stvari se previše ...
Primijetit ćete da su oba glava i tijelo dijelovi web stranice su označene u HTML stranicu s njihovim tags: (<head> </ head>) i (<body> </ body>).
Ako je tijelo tag stvara tijelo HTML stranicu, a glava tag stvara glavu HTML stranici, kako se kreirati HTML stranicu i sama? Vi pogoditi ga koristiti HTML tags:
<html> </ html>
The 'majka svih oznake' je HTML (<html>) tag, a on kao i svi tagovi moraju imati početni tag (<html>) i kraj tag (</ html>). Razlika između početne i završne oznake je kosa crta (/), ali ga je već znao da.
Svaka web stranica mora započeti i završiti HTML oznaka, inače u web pregledniku (programima poput Internet Explorera) neće se moći prikazati stranicu. Također moraju imati glavu i tijelo oznake oznake. Svi ostali su tagovi opcionalno.
Tako se rodila kosti HTML stranica mora imati ove oznake i na taj redoslijed:
<html>
<head>
Naslov <title> vaše stranice </ title>
</ head>
<body>
</ body>
</ html>
Vrijeme je za izgradnju svoje prve ruke HTML stranicu
Bih mogao ići na više teorije i poslati vas na pola spavaju (vjerujte mi); umjesto vas sada će zapravo i svoje prve web stranice! Jedan od najboljih načina da saznate nesto je stvarno to učiniti, tako da ne morate brinuti ako su stvari malo maglovita za tebe upravo sada, kako smo izgraditi web-stranicu, stvari će se početi razvedravati.
Korak 1: Ajmo napisati neke HTML code
Otvoriti uređivač teksta kao što je Notepad na Windows i ovaj tip (ili: Napomena: Evo PDF koji pokazuje kako stvoriti HTML dokumenata na MAC):
<html>
<head>
Vaš <title> prve ruke kodirano stranice! </ title>
</ head>
<body>
Ručna <h2> kodiranje web stranica je jednostavno! </ H2>
<p>
Htjela bih zahvaliti svima koji su pomogli mi tip ove stranice.
</ p>
</ body>
</ html>
2. korak: Spremite datoteku kao HTML dokument
Spremi HTML datoteku (spremili na radnu površinu tako ćete biti sigurni da ste ga pronaći!) Korištenjem Vašeg teksta urednika "Spremi kao" funkcija i ime datoteke webPage.html.
Možete odabrati bilo koji naziv koji želite, kao čeznuti kao te slijedite ove četiri pravila:
1. Web stranica imena ne može imati razmake u njima: 'stranica.html web' je dobar, ali ne 'webPage.html' je perfecto.
2. Ime je bilo do kraja. Html ili. Htm; okončavajući po imenu datoteke ovaj način Vam se govori da je ovo računalo na web stranici i da treba koristiti web stranicu čitač / preglednik kako biste ga vidjeli.
3. Ne koristite smiješno simbola kao što su: $% ^ & na stranici imena. Stick standardne slova i brojeve.
4. U Notepad, molimo spremite datoteku kao UTF-8.
MAC OSX Bilješke: Kako izraditi HTML dokument s MAC OSX (PDF)
Korak 3: Marvel na posao i vidjeli svoju stranicu
Trebali biste biti u mogućnosti da sada samo dva puta kliknite na stranici ili otvorite ga s Vašom web pregledniku da odete na svoj "File" izbornika, a zatim odaberite "Open File" i odaberite Vašu stranicu.
Trebali biste biti u mogućnosti da biste vidjeli svoju stranicu u svim svojim slavu! Ok, ne previše slave, ali to je bio vaš prvi ručno kodiran nakon svih strana! Ako ne vidite ništa, a zatim usporedite ono što ste upisali s originalnim dadoh vama i samo ići preko procesa ponovno. Dobit ćete ga ako dajte sebi priliku!
Ako niste sigurni što ste stvorili, ako se gleda kao što to treba da, možete provjeriti ovdje konačni stranicu i usporedite ih sa svoje vlastite.
