Kako stvoriti HTML stranicu

Autor: Florence Bailey
Datum Stvaranja: 20 Ožujak 2021
Datum Ažuriranja: 1 Srpanj 2024
Anonim
Kako napraviti website (osnove html-a)
Video: Kako napraviti website (osnove html-a)

Sadržaj

HTML (Hypertext Markup Language) je primarni programski jezik za razvoj web stranica. Stvoren kao jednostavan i prikladan programski jezik. Većina stranica na Internetu razvijena je pomoću jednog od oblika ovog jezika (ColdFusion, XML, XSLT). Nakon što pročitate ovaj članak, možete nastaviti obuku koristeći druge izvore na Internetu. Pokušajte pretražiti internetom druge članke vezane za ovu temu.

Koraci

Metoda 1 od 1: Pisanje HTML stranice

  1. 1 Prije nego što se počnete upoznavati s jednim od ovdje navedenih koraka, pogledajte odjeljak "Što će vam trebati".
  2. 2 Ono što biste trebali znati prije nego što počnete razumjeti ovaj problem:
  3. 3 Osnove. Jeste li ikada čuli za oznaku? Oznaka je okružena kutnim zagradama, a riječ je unutra. Završna oznaka napisana je u istom obliku, ali s kosom crtom iza prve kutne zagrade. Atribut je izborna riječ u oznaci koja se koristi za dodavanje pojedinosti oznaci.
  4. 4 Početak dokumenta. U bilo koji uređivač teksta koji koristite zalijepite sljedeće:
    html> glava> naslov> wikiHow / naslov> / glava> tijelo> Pozdrav Svijet / tijelo> / html> veliko> / veliko>
    Oznaka mora biti zatvorena istom oznakom, ali kosom crtom iza prve kutne zagrade. Postoje iznimke poput oznaka META ili DOKTIP.
  5. 5 DOKTIP
    • Obično je većina web stranica postavljena DOKTIP ”. To pomaže odrediti kodiranje, kao i način na koji će ga web preglednici percipirati. Većina stranica funkcionirat će bez toga, "ali to je potrebno ako želite upariti (Oni reguliraju vrste kodiranja na Internetu i njihovu upotrebu)... DOCTYPE za HTML 4.01 prikazan je u nastavku :! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // HR" "http://www.w3.org/TR/html4/strict.dtd"> Ovo je jedan od najčešćih DOCTYPE se koristi na stranicama diljem interneta.Prvo, ukazuje na vrstu stranice koja opisuje "html", zatim ističe vrstu kodiranja, i na kraju, mjesto DOCTYPE -a, što kao rezultat opisuje stranicu za web -preglednik.
    • Postoje različite vrste HTML -a (različite se verzije razvijaju godinama), na primjer pomoću novih oznaka ili određenih oznaka. Neke su oznake zastarjele (umjesto njih se koriste druge korisnije oznake).
    • b> i ja> - to je ono što se trenutno nameće oznakama, jer se koriste za pretvaranje teksta, ali ne i specifikacije, pa ih druge oznake dolaze zamijeniti. Označiti jaka> je zamjena za b>, i em>, zamjena za ja>.
    • Važno je da se prethodne oznake zamijene oznakama koje su više od oblikovanja. Ako je tekst preveden, ne samo oblikovanje, već i njegovo značenje ostaje isto. Ovo je semantički ispravno.
    • U XHTML verziji 2.0 b> i ja> ne koristi se, baš kao ni u HTML verziji 3+.
  6. 6 HTML "Pravilo enkapsulacije".
    • Pogledajmo važnije oznake koje se trenutno koriste. Tijekom izrade stranice koristi se jednostavna struktura. Ako je oznaka otvorena, kao rezultat toga, treba ga zatvoriti... To se odnosi na cijelu strukturu. Evo valjanog primjera XHTML strukture izgleda:
    • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // HR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    • html xmlns = "http://www.w3.org/1999/xhtml">
    • glava>
    • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
    • naslov> Zdravo Svijete! / naslov>
    • / glava>
    • tijelo>
    • h1> Zdravo Svijete! / h1>
    • / tijelo>
    • / html>
    • Uzorak koda koji izdaje poruku Pozdrav svijete... To se zove test Pozdrav svijete.
  7. 7 Naslov
    • Naslov web stranice je sadržaj između oznake glava>... Ovaj sadržaj korisnik ne može vidjeti (samo naslov koji je prikazan u naslovu stranice). Podaci između oznaka glava>, može priložiti druge oznake, kao što su:

      • META oznaka koristi se za informacije koje su korisne tražilicama i drugim uslužnim programima.
      • Oznaka LINK koja stvara vezu između dokumenata, na primjer za Stilove (CSS).
      • SCRIPT oznaka, to uključuje gotovo svako web kodiranje, s mogućnošću daljinskog pristupa (iz drugog dokumenta).
      • Oznaka STYLE, koja je u biti stil koji se može primijeniti na stranicu.
      • Oznaka TITLE je naslov koji se pojavljuje kao naslov stranice u vašem web pregledniku.
    • Pogledajmo demo neke od njih u primjeru zaglavlja preuzetog s ove web stranice (skraćeno):
      • glava>
      • naslov> ... / naslov>
      • meta name = "description" content = "..." />
      • link rel = "stylesheet" type = "text / css" href = "..." />
      • meta http-equiv = "content-type" content = "text / html; charset = UTF-8" />
      • style type = "text / css" media = "all"> ... / style>
      • script type = "text / javascript" src = "..."> / script>
      • / glava>

        U slučaju da niste primijetili, pojedinačne su oznake istaknute, a stvarni podaci uklonjeni. Primjer je prilično kratak i prikazuje gotovo svaku oznaku koja se može pronaći u glava>osim HTML komentara (O tome ćemo govoriti u jednostavnim oznakama).
  8. 8 Jednostavne oznake posvuda
    • Idemo dalje i vidjeti ostale oznake. Budite oprezni s označavanjem i zapamtite pravilo "Inkapsulacija".

      • jako> Naglašava važan tekst.
      • small> Smanjuje tekst. Veličina fonta mjeri se u standardnim jedinicama od 1 do 7, 3 je zadana veličina teksta. ...
      • pre> Definira blok obogaćenog teksta. Kako je točno, takav se tekst upisuje fontom iste veličine i sa svim razmacima između riječi.
      • em> Prikazuje tekst kao izraz.
      • del> Brisanje teksta.
      • ins> Definira tekst koji je umetnut u dokument.
      • h1> Jedna od mnogih oznaka zaglavlja. Oznake ove vrste počinju s 'h', s razlikom u broju. Oznaku s istim brojem obavezno zatvorite.
      • p> Definira odlomak.
      • ! --- ... ---> Za razliku od drugih oznaka, komentar mora biti unutar same oznake. Ove informacije su vidljive samo kada se pregleda kôd.
      • blockquote> Prikazuje citat, može se koristiti s oznakom cite>.
      • Nekoliko gornjih primjera nisu potpuni popis postojećih oznaka. Posjetite da biste saznali o drugima.
  9. 9 Stvaranje jasne strukture
    • Stranice su dizajnirane za držanje podataka u jednostavnim skupovima oznaka tako da možemo raščlaniti podatke u odlomke. Računalo prepoznaje podatke; ne zna za kontekst ili konceptualnu vezu. Moramo stvoriti HTML stranice prilagođene računalu. To se postiže upotrebom oznake div. Pomaže u stvaranju ogromnog broja stranica. Može se oblikovati pomoću CSS -a i lakše je od stvaranja velikih tablica koda za izgled.
      • div> Ova oznaka je posebna jer se može oblikovati i koristiti zasebne blokove informacija koje razumiju i korisnik i računalo.
    • Pogledajmo jednostavan HTML izgled koji koristi oznaku div.
      • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // HR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      • html xmlns = "http://www.w3.org/1999/xhtml">
      • glava>
      • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
      • naslov> Zdravo Svijete! / naslov>
      • / glava>
      • tijelo>
      • h1> Zdravo Svijete! / h1>
      • div id = "contentOne">
      • p> Ovo je neki tekst u div # contentOne. / p>
      • div>
      • p> Odlomak u pododsjeku div # contentOne / p>
      • / div>
      • / div>
      • / tijelo>
      • / html>
    • Korištenje div> tagova pomaže u pronalaženju i mijenjanju stilova tijekom rada s CSS -om i Javascript -om. HTML će koristiti različito kodiranje za rad sa CSS stilovima i Javascriptom za stvaranje boljeg i osjetljivijeg korisničkog iskustva.

Savjeti

  • Nakon što pročitate ovaj članak, nemojte stati i pomisliti da ste naučili sve što trebate znati. Uvijek se ima što naučiti, posebno u ovoj tehnologiji.
  • Naučiti, razumjeti i napisati kôd.
  • Imajte na umu da neke oznake koriste samo>. Para i br su neki primjeri. Ostale oznake otvorene s> potrebno je dodatno zatvoriti. Na primjer, "div> / div>".
  • Ljudi očekuju nova otkrića pa ih izmislite, osmislite ili kodirajte.
  • Nakon što ste puno naučili, pokušajte naučiti programiranje poslužitelja.
  • Naučite raditi s CSS -om, kao i s Javascriptom.

Upozorenja

  • Upamtite, HTML je samo uređivanje sadržaja. To znači da se HTML koristi samo za pohranu sadržaja u prepoznatom formatu. Druge promjene moraju se izvršiti pomoću drugih tehnologija, poput CSS -a. To također znači činiti „semantički ispravnočak i ako drugi to ne priznaju. Drugi programski jezici pomažu u izgradnji web stranica (CSS, Javascript i XML). HTML je konstruktor sadržaja.

Što trebaš

  • Uređivač teksta koji podržava ANSI kodiranje
  • Web preglednik kao što je Internet Explorer ili Mozilla Firefox
  • (Izborno) wysiwyg ili wykiwyg HTML uređivač, poput Adobe Dreamweavera, Aptana Studia ili Microsoft Expression Weba