Sisältö

• Askeleet
• Tapa 1: 1: HTML -sivun kirjoittaminen
• Vinkkejä
• Varoitukset
• Mitä tarvitset

HTML (Hypertext Markup Language) on ensisijainen ohjelmointikieli verkkosivujen kehittämisessä. Luotu yksinkertaiseksi ja käteväksi ohjelmointikieleksi. Suurin osa Internetin sivuista on kehitetty jollakin tämän kielen muodoista (ColdFusion, XML, XSLT). Tämän artikkelin lukemisen jälkeen voit jatkaa harjoittelua käyttämällä muita Internetin resursseja. Yritä etsiä Internetistä muita tähän aiheeseen liittyviä artikkeleita.

Askeleet

Tapa 1: 1: HTML -sivun kirjoittaminen

1. 1 Ennen kuin aloitat tutustumisen johonkin tässä esitetyistä vaiheista, katso ”Mitä tarvitset” -osio.
2. 2 Mitä sinun pitäisi tietää ennen kuin alat ymmärtää tätä ongelmaa:
3. 3 Perusteet. Oletko koskaan kuullut merkistä? Tunnistetta ympäröivät kulmasulkeet, joiden sisällä on sana. Loppulause kirjoitetaan samassa muodossa, mutta ensimmäisen kulman hakasulkeen jälkeen lisätään vinoviiva. Attribuutti on tagin valinnainen sana, jota käytetään lisäämään tietoja tunnisteeseen.
4. 4 Asiakirjan alku. Liitä mihin tahansa käyttämääsi tekstieditoriin seuraava:
   html> head> title> wikiHow / title> / head> body> Hello World / body> / html> iso> / iso>
   Tunniste on suljettava samalla tunnisteella, mutta vinoviivalla ensimmäisen kulmakannattimen jälkeen. Poikkeuksia, kuten tunnisteita, on META tai DOCTYPE.
5. 5 DOCTYPE
   • Yleensä suurin osa verkkosivuista on asetettu DOCTYPE ”. Tämä auttaa määrittämään koodauksen sekä sen, miten selaimet näkevät sen. Useimmat sivut toimivat ilman sitä, "mutta tämä on välttämätöntä, jos haluat yhdistää (ne säätelevät Internetin koodaustyyppejä ja niiden käyttöä)... DOCTYPE HTML 4.01: lle on esitetty alla:! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // FI" "http://www.w3.org/TR/html4/strict.dtd"> Tämä on yksi yleisimmistä DOCTYPE, jota käytetään Internet -sivuilla.Ensinnäkin se viittaa "html -tiedostoa" kuvaavan sivun tyyppiin, sitten korostaa koodaustyypin ja lopuksi DOCTYPE: n sijainnin, joka sen seurauksena kuvaa web -selaimen sivua.
   • On olemassa erilaisia ​​HTML -tyyppejä (eri versioita kehitetty vuosien varrella), esimerkiksi käyttämällä uusia tunnisteita tai tiettyjä tunnisteita. Jotkut tunnisteet ovat vanhentuneet (muita hyödyllisiä tunnisteita käytetään sen sijaan).
   • b> ja i> - Tämä on tällä hetkellä pakollinen tunnisteille, koska niitä käytetään tekstin muuttamiseen, mutta ei eritelmiä, minkä seurauksena muut tunnisteet tulevat korvaamaan ne. Tag vahva> on korvaava b>ja em>, korvaaja i>.
   • On tärkeää, että aiemmat tunnisteet korvataan tunnisteilla, jotka ovat enemmän kuin muotoiluja. Jos teksti käännetään, niin muotoilu, mutta myös sen merkitys pysyvät samana. Tämä on semanttisesti oikein.
   • XHTML -versiossa 2.0 b> ja i> ei käytetä, aivan kuten HTML -versiossa 3+.
6. 6 HTML "kapselointisääntö".
   • Katsotaanpa tällä hetkellä käytössä olevia tärkeimpiä tunnisteita. Sivun luomisessa käytetään yksinkertaista rakennetta. Jos tagi avattiin, sen seurauksena se pitäisi sulkea... Tämä koskee koko rakennetta. Tässä on pätevä esimerkki XHTML -asettelurakenteesta:
   • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // FI" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   • html xmlns = "http://www.w3.org/1999/xhtml">
   • pää>
   • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
   • otsikko> Hello World! / title>
   • / pää>
   • runko>
   • h1> Hei maailma! / h1>
   • / body>
   • / html>
   • Esimerkkikoodi, joka lähettää viestin Hei maailma... Tätä kutsutaan testiksi Hei maailma.
7. 7 Otsikko
   • Verkkosivun otsikko on tagin välinen sisältö pää>... Käyttäjä ei voi tarkastella tätä sisältöä (vain otsikko, joka näkyy sivun otsikossa). Tunnisteiden välinen tieto pää>, voi liittää muita tunnisteita, kuten:
     
     
     • META -tunnistetta käytetään tietoihin, jotka ovat hyödyllisiä hakukoneille ja muille apuohjelmille.
     • LINK -tunniste, joka luo linkin asiakirjojen välille, esimerkiksi tyyleille (CSS).
     • SCRIPT -tunniste, tämä sisältää melkein minkä tahansa verkkokoodauksen, jolla on mahdollisuus käyttää etäyhteyttä (toisesta asiakirjasta).
     • STYLE -tunniste, joka on pohjimmiltaan tyyli, jota voidaan soveltaa sivulle.
     • TITLE -tunniste on otsikko, joka näkyy sivusi otsikkona verkkoselaimessasi.
   • Katsotaanpa demo joistakin näistä tämän sivuston otetusta esimerkkiotsikosta (sitä on lyhennetty):
     • pää>
     • otsikko> ... / otsikko>
     • meta name = "description" content = "..." />
     • link rel = "styleheet" 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>
     • / pää>
       
       Jos et ole huomannut, yksittäiset tunnisteet on korostettu ja todelliset tiedot on poistettu. Esimerkki on melko lyhyt, ja se näyttää lähes kaikki tunnisteet, jotka löytyvät pää>paitsi HTML -kommentti (puhumme tästä yksinkertaisilla tunnisteilla).
8. 8 Yksinkertaisia ​​tunnisteita kaikkialla
   • Jatketaan eteenpäin ja katsotaan muita tunnisteita. Ole varovainen tagien kanssa ja muista peukalosääntö "Kapselointi".
     
     
     • vahva> korostaa tärkeää tekstiä.
     • pieni> pienentää tekstiä. Fonttikoko mitataan vakioyksiköinä 1-7, 3 on tekstin oletuskoko. ...
     • pre> Määrittää Rich Text -lohkon. Kuten on oikein, tällainen teksti kirjoitetaan samankokoisella fontilla ja sanojen välissä on välilyöntejä.
     • em> Näyttää tekstin lauseena.
     • del> Poistaa tekstin.
     • ins> Määrittää tekstin, joka on lisätty asiakirjaan.
     • h1> Yksi monista otsikkotunnisteista. Tämän tyyppiset tunnisteet alkavat "h" -merkillä, ja niiden määrä vaihtelee. Varmista, että suljet tunnisteen samalla numerolla.
     • p> Määrittää kappaleen.
     • ! --- ... ---> Toisin kuin muut tagit, kommentin on oltava tagin sisällä. Nämä tiedot näkyvät vain, kun koodia tarkastellaan.
     • blockquote> Näyttää lainauksen, voidaan käyttää cite> -tunnisteen kanssa.
     • Muutamat yllä olevat esimerkit eivät ole täydellinen luettelo olemassa olevista tunnisteista. Jos haluat tietää muista, käy osoitteessa.
9. 9 Luo selkeä rakenne
   • Sivut on suunniteltu säilyttämään tietoja yksinkertaisissa tunnistejoukoissa, jotta voimme jäsentää tiedot kappaleiksi. Tietokone tunnistaa tiedot; se ei tiedä kontekstista tai käsitteellisestä yhteydestä. Meidän on luotava tietokoneystävällisiä HTML-sivuja. Tämä saavutetaan käyttämällä div -tunnistetta. Se auttaa luomaan valtavan määrän sivuja. Se voidaan muotoilla CSS: llä ja on helpompaa kuin luoda suuria kooditaulukoita asettelua varten.
     • div> Tämä tagi on erityinen, koska se voidaan muotoilla ja käyttää erillisiä tietolohkoja, jotka sekä käyttäjä että tietokone voivat ymmärtää.
   • Katsotaanpa yksinkertaista HTML -asettelua, joka käyttää div -tunnistetta.
     • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // FI" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     • html xmlns = "http://www.w3.org/1999/xhtml">
     • pää>
     • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
     • otsikko> Hello World! / title>
     • / pää>
     • runko>
     • h1> Hei maailma! / h1>
     • div id = "contentOne">
     • p> Tämä on tekstiä div # contentOne. / p>
     • div>
     • p> Kappale osiossa div # contentOne / p>
     • / div>
     • / div>
     • / body>
     • / html>
   • Div> -tunnisteiden käyttäminen auttaa tyylien löytämisessä ja muokkaamisessa CSS: n ja Javascriptin kanssa työskenneltäessä. HTML käyttää eri koodausta CSS -tyylien ja Javascriptin kanssa luodakseen paremman ja reagoivamman käyttökokemuksen.

Vinkkejä

• Kun olet lukenut tämän artikkelin, älä lopeta ja ajattele, että olet oppinut kaiken mitä sinun tarvitsee tietää. Aina on jotain opittavaa, etenkin tässä tekniikassa.
• Opi, ymmärrä ja kirjoita koodi.
• Huomaa, että joissakin tunnisteissa käytetään vain>. Para ja br ovat esimerkkejä. Muut tunnisteet, jotka on avattu painikkeella>, on suljettava edelleen. Esimerkiksi "div> / div>".
• Ihmiset odottavat uusia löytöjä, joten keksi uudelleen, suunnittele tai koodaa.
• Kun olet oppinut paljon, kokeile palvelimen ohjelmoinnin oppimista.
• Opi työskentelemään CSS: n ja Javascriptin kanssa.

Varoitukset

• Muista, että HTML: ssä on kyse sisällön muokkaamisesta. Tämä tarkoittaa, että HTML -koodia käytetään vain sisällön tallentamiseen tunnistetussa muodossa. Muut muutokset on tehtävä käyttämällä muita tekniikoita, kuten CSS. Se tarkoittaa myös "semanttisesti oikein" tekemistävaikka muut eivät sitä myönnäkään. Muut ohjelmointikielet auttavat luomaan verkkosivuja (CSS, Javascript ja XML). HTML on sisällönrakentaja.

Mitä tarvitset

• Tekstieditori, joka tukee ANSI -koodausta
• Verkkoselain, kuten Internet Explorer tai Mozilla Firefox
• (Valinnainen) wysiwyg- tai wykiwyg -HTML -editori, kuten Adobe Dreamweaver, Aptana Studio tai Microsoft Expression Web