Sisu

• Sammud
• 1. osa: Kuidas ma HTML-i avastasin
• Nõuanne
• Hoiatus
• Mida sa vajad

HTML (HyperText Markup Language) on veebikeelte koostamise põhikeel. See loodi lihtsa ja paindliku kodeerimiskeelena. Peaaegu kõik Interneti-veebisaidid on välja töötatud selle koodi mingil kujul (ColdFusion, XML, XSLT). HTML-i on lihtne haarata, kuid saate seda pikka aega õppida, kui olete huvitatud selle terviklikust funktsionaalsusest. Veebisaidile värvi ja lõbususe lisamiseks saate õppida CSS-i kohe, kui olete HTML-i põhilehega harjunud.

Sammud

1. osa 4: Dokumendi koostamine

1. 

   Avage lihtne tekstiredaktor. NotePad on hea võimalus ja seda saab tasuta alla laadida. HTML-i saate kirjutada enamiku tekstiredaktoritega, kuid keerukam automaatse vormindamise võimalustega tarkvara võib muuta teie HTML-lehe korraldamise keeruliseks.
   • Ärge kasutage TextEditi, kuna see salvestab faili tavaliselt vormingus, mida teie brauser ei pruugi HTML-na tunnustada.
   • Võite kasutada ka veebipõhist HTML-redaktorit. Spetsiaalsed HTML-i redigeerimisprogrammid pole algajatele soovitatavad.

2. 

   
   
   Salvestage fail veebilehena. Valige ülaosas olevast menüüst Fail → Salvesta nimega. Muutke failivorminguks "Veebileht", ".html" või ".htm". Salvestage fail sealt, kust seda hõlpsasti leiate.
   • Nendel kolmel variandil pole vahet.

3. 

   Avage fail brauseris. Topeltklõpsake faili ja see avaneb teie brauseris automaatselt tühja veebilehena. Teise võimalusena võite avada brauseri, nagu Firefox või Internet Explorer, ja seejärel kasutada dokumendi valimiseks Fail → Ava fail.
   • See veebisait pole võrgus. Seda saab vaadata ainult teie arvutis.

4. 

   
   
   Värskendage veebilehte ja vaadake tehtud muudatusi. Sisestage oma tühja dokumenti järgmine: Tere. Salvestage dokument. Värskendage oma brauseris tühja veebileht ja peaksite lehe ülaosas nägema rasvases kirjas sõna "Tere". Alati, kui soovite selle õpetuse käigus oma uut HTML-i testida, salvestage .htm-dokument ja värskendage seejärel oma brauseriakent, et näha, kuidas HTML on kompileeritud.
   • Kui näete sõnu ""ja"'' Ilmub teie brauseris, faili pole HTML-is õigesti kompileeritud. Proovige mõnda muud tekstiredaktorit või mõnda muud brauserit.

5. 

   
   
   Õppige silte. HTML-i käsud on kirjutatud "siltidena", mis annavad brauserile teada, kuidas teie veebileht kompileerida ja kuvada. Need on alati kirjutatud üksikute jutumärkide sisse ja neid ei kuvata veebisaidil, nagu kasutasite neid ülaltoodud näites:
   • on "stardikaart" või "avakaart". Kõik, mis on kirjutatud pärast seda silti, määratletakse kui "paks" (rasvane veebilehel).
   • on "lõpumärgis" või "lõpumärgend", mida saate eristada sümboliga /. See tähistab rasvase teksti lõppu. Enamiku (mitte kõigi) siltide toimimiseks on vaja lõpumärgendit, nii et lisage see kindlasti.

6. 

   Ehitage oma dokument. Kustutage kõik oma HTML-dokumendist. Alustage uuesti järgmise tekstiga täpselt nii, nagu see kirjutati (miinus täpppunktid). See HTML-kood ütleb brauserile, millist tüüpi HTML-i te kasutate, ja et kogu teie HTML paigutatakse siltide sisse. ja .

7. 

   Lisage pea (pea) ja keha sildid. HTML-dokumendid on jagatud kahte ossa. Jaotis „Ülemine” on mõeldud eriteabe, näiteks lehe pealkirja jaoks. Jaotis "body" sisaldab lehe põhisisu. Lisage mõlemad need jaotised oma dokumenti ja ärge unustage lisada lõppmärgendeid. Äsja lisatud tekst on paks:

8. 

   Pange oma lehele pealkiri. Enamik peaosa kaarte on algajaga õppimisel ebaolulised. Pealkirja silti on siiski lihtne kasutada ja see määrab, mis kuvatakse brauseriakna nimena või brauseri vahekaardil. Asetage pealkirja algus- ja lõpumärgendid pealkirjade sisse ja kirjutage nende siltide vahele kõik soovitud päised:
   reklaam

2. osa 4-st: teksti vormindamine

1. 

   Lisage oma kehale tekst. Selles jaotises töötame ainult kehamärgenditega. Teine tekst on endiselt teie dokumendis, kuid me säästame ruumi, kui seda selles õpetuses ei korrata. Kirjutage kaartide vahele, mida soovite ja ja see kuvatakse teie lehe esimese sisuna. Näiteks:
   • HTML-lehe kirjutamiseks järgisin wikiHow juhiseid.

2. 

   Lisage teksti pealkirjad. Korrastage oma leht pealkirjamärkidega, mis juhendavad brauserit nende vahel teksti kuvama suurema fondisuurusega. Neid silte kasutavad ka otsingumootorid ja muud tööriistad, et teha kindlaks, mis on teie veebisait ja kuidas see on korraldatud.
   on suurim pealkiri ja saate luua väiksemaid pealkirju kuni
   . Proovige neid oma lehel:
   • Tere tulemast minu lehele.

   • HTML-lehe kirjutamiseks järgisin wikiHow juhiseid.

   • Minu tänane eesmärk:

   • Täidetud eesmärgid:

   • Siit saate teada, kuidas päiseid kasutada.

   • Lõpetamata eesmärgid:

   • Lisateave teksti vormindamise siltide kohta.

3. 

   Lisateave teksti vormindamise siltide kohta. "Tugevat" silti olete juba näinud, kuid teksti vormindamiseks on palju muid võimalusi. Proovige neid silte või sama tekstistringi jaoks mitut silti korraga. Ärge unustage tagaküljele lisada lõpumärgendeid!
   • Tähtis tekst, kuvatakse brauseris rasvases kirjas.
   • Rõhutatud tekst, kuvatakse brauseris kursiivis.
   • Tekst natuke väiksem kui tavaliselt. Selle teksti suurust muudetakse automaatselt, kui seda kasutatakse pealkirjas.
   • Tekst pole enam asjakohane, kuvatakse keha kriipsuga.
   • Tekst lisatakse hiljem kui muud dokumendid, kuvatakse allajoonitult.

4. 

   Korrastage oma lehel teksti. Võib-olla olete märganud, et "Enter" klahvi vajutamisest ei piisa, et tekst kuvatakse teisel real. Need märgendid aitavad teil luua lõike ja reavahetusi või korrastada oma teksti muul viisil:

   • Lühidalt "paragrahvi" kohta hoiab see silt kogu nende siltide vahel oleva teksti lõigus ning eraldab selle selle kohal ja all olevast tekstist.

   • 
     See silt genereerib reavahetusi. Ärge lisage sellele lõpumärgendit, kuna see ei häiri muud sisu. Kasutage seda silti luuletustes või aadressiridades, mitte lõikudes.

   • Kui peate teksti väga täpselt kuvama, määrab see silt selle sees oleva fikseeritud laiusega fondiks (iga tähe laius on sama) ja võimaldab teil luua intervalle Tühjad ja reavahed, nagu soovite, siltide asemel regulaarseks redigeerimiseks.

   • See silt määratleb allikast tsiteeritava teksti tüübi.

     Allikat saate hiljem kirjeldada tsiteerimiskaart.

5. 

   Lisage nähtamatu pealdiste tekst. Kommentaarimärgendeid veebilehel ei kuvata. Need võimaldavad teil HTML-dokumenti märkida, ilma et see sisu mõjutaks. Ärge lisage lõpumärgendit.
   • Kaarte, mis lähevad üksi ilma lõpumärkideta, nimetatakse "tühjadeks siltideks".

6. 

   Ühendage need kokku. Parim viis neid silte meelde jätta on kasutada neid oma veebisaidil. Siin on näide kaartide kasutamisest seni õpitud sammudes. Proovige ennustada, kuidas neid brauseris kuvatakse, seejärel kopeerige need oma dokumenti ja saate teada.
   • Tere tulemast minu veebisaidile.

   • Loodetavasti teile meeldib see leht!

     Ma tegin selle just teile.

   • 1. osa: Kuidas ma HTML-i avastasin

   • Olen HTMLi juba õppinud üks kakstundi, nii et nüüd olen ekspert.
   reklaam

3. osa 4-st: linkide ja piltide lisamine

1. 

   Lisateave atribuutide kohta. Siltidele võib olla kirjutatud lisateavet, mida nimetatakse atribuutideks. Neid atribuute esindavad täiendavad sõnad siltide sees kujul atribuudi nimi = "konkreetne väärtusNäiteks võib igal HTML-märgendil olla atribuut pealkiri:

   • Sissejuhatav lõik on siin.

     Pange pealkiri lõikele "Sissejuhatus", mis ilmub, kui hõljutate kursorit veebilehe lõigu kohal.

2. 

   Lingid teistele veebisaitidele. Kaartide kasutamine hüperlingi loomiseks mis tahes muule veebisaidile. Lisage atribuudi href abil linkimiseks veebilehe URL. Siin on näide, mis viitab teie loetud veebisaidile:
   • Teie veebisaidi külastajad saavad lingi järgimiseks sellel tekstil klõpsata.

3. 

   Lisage märgendile id atribuut. Teine atribuut, mida iga HTML-märgend saab kasutada, on element id. Mistahes kaardile kirjutage id = "vidu" või kasutage suvalisi nimesid, mis ei sisalda tühikuid. See ei tekita nähtavat efekti, kuid me kasutame seda järgmises etapis.
   • Näiteks lisage oma dokumendile järgmine:

     Seda lõiku kasutatakse näitena atribuudi id toimimise kirjeldamiseks.

4. 

   Link teatud ID-ga elemendile. Nüüd saame kasutada hüperlingi silti, , et linkida sama lehe teise asukohta. URL-i asemel kasutame sümbolit #, millele järgneb ID-väärtus, millele soovime linkida. Näiteks, See tekst viitab tekstile ID-ga "vidu".
   • Kõik HTML-väärtused on tõstutundlikud. "#VIDU" ja "#vidu" viitavad mõlemad samale asukohale.
   • Kui teie leht on kogu lehe korraga kuvamiseks piisavalt lühike, ei märka te tõenäoliselt midagi, kui klõpsate oma brauseris lingil. Suurendage akna suurust, kuni ilmub kerimisriba, ja proovige siis uuesti.

5. 

   Lisage fotosid. Kaart on tühi silt, mis tähendab, et lõppmärgist pole vaja. Kogu teave, mida brauser pildi kuvamiseks vajab, lisatakse atribuutide abil. Siin on näide wikiHow logo kuvamiseks koos iga taga oleva atribuudi kirjeldusega:
   • 
   • Atribuudid src = "" ütleb brauserile, kus foto asub. (Pange tähele, et foto postitamist kellegi teise saidilt peetakse sobimatuks - ja foto kaob, kui leht pole enam aktiivne.)
   • Atribuudid style = "" Sellega saab teha palju asju, kuid mis kõige tähtsam, seda kasutatakse pildi laiuse ja kõrguse määramiseks pikslites. (Võite selle asemel kasutada ka eraldi atribuute width = "" ja height = "", kuid CSS-i kasutamisel võib see põhjustada imelikke suuruse muutmise probleeme.)
   • Atribuudid alt = "" on pildi lühikirjeldus, mida kasutaja näeb, kui pilti ei õnnestunud laadida. Seda peetakse nõudeks, kuna seda kasutatakse pimedate veebisaitide külastajate ekraanilugejate jaoks.
   reklaam

4. osa 4-st: Lisateave veebisaidi lisamise ja veebi viimise kohta

1. 

   Kinnitage oma HTML. HTML-i valideerimine kontrollib koodis vigu. Kui teie sait ei ilmu õigesti, aitab valideerimine leida probleemi põhjustava vea. Samuti võib see teile HTML-i kohta rohkem teada anda, leides, et kood näeb ekraanil hea välja, kuid HTML-standardi uute värskenduste tõttu pole see enam soovitatav. Kehtetu HTML-i kasutamine ei muuda teie saiti kasutuks, kuid võib põhjustada probleeme või kuvada erinevates brauserites ebastabiilne.
   • Proovige W3C-st tasuta veebipõhist valideerimisteenust või otsige veebist mõnda muud HTML 5 valideerimistööriista.

2. 

   Lisateave siltide ja atribuutide kohta. Seal on palju muid HTML-i silte ja atribuute ning palju kohti nende õppimiseks:
   • Proovige w3schools ja HTML Dog, et saada rohkem õpetusi ja täielikke siltide loendeid.
   • Leidke oma välimus, mis teile meeldib, ja seejärel kasutage HTML-koodi hankimiseks oma brauseri funktsiooni "Kuva lehe allikas". Kopeerige see oma dokumenti ja uurige, kuidas see töötab.
   • Lugege teisi artikleid ja õppige, kuidas HTML-is tabeleid luua, metakoode kasutada, et suurendada otsingumootorite leidmise võimalusi või kasutada jaotust. seadke lehel ala) ja span (kasutatakse tekstielemendi stiili määramiseks), et aidata CSS-i kaudu stiili.

3. 

   Hankige oma veebisait veebis. Valige oma veebisaidi majutamiseks teenus ja seejärel saate oma isiklikule veebidomeenile üles laadida nii palju HTML-lehti kui soovite. Selleks peate kasutama FTP üleslaadimistarkvara, kuid paljud veebirenditeenused pakuvad ka seda teenust.
   • Otse saidil olevate lehtede või piltide linkimisel peate kasutama täielikku aadressi. Näiteks kui teie domeeninimi on www.chuyengiahtmlsieudang.com, siis tekst on nendes siltides linki saidile "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html"

4. 

   Lisage stiilid CSS-iga. Kui teie HTML-leht näeb välja natuke üksluine, proovige õppida CSS-i põhitõdesid, et lisada värve, erinevaid fonte ja paremini kontrollida elementide asetuskohta. CSS-i "stiililehe" linkimine HTML-lehele võimaldab teil lennult drastilisi muudatusi teha, kohandades automaatselt kogu antud sildi teksti stiili. Siin saate natuke vormindamise kihiga ringi mängida või sukelduda HTML Dogi CSS-i õpetuse üksikasjalikumatesse õpetustesse.

5. 

   Lisage oma veebisaidile JavaScripti. JavaScript on programmeerimiskeel, mida kasutatakse HTML-lehtedele palju funktsionaalsuse lisamiseks. JavaScripti käsud sisestatakse algus- ja lõpumärgendi vahele ja seda saab kasutada interaktiivsete nuppude lisamiseks, matemaatikaülesannete arvutamiseks ja muuks. Lisateavet leiate w3c näidetest. reklaam

Nõuanne

• Selles õpetuses kasutatav doctype-deklaratsioon (kasutatud dokumenditüübi deklaratsiooni) on "vaba HTML 4.0.1 üleminek" (HTML 4.0.1 pole tiheda üleminekuga), lihtne vorming. algajatele kasutamiseks. Kasutage () alternatiiv sellele, kui brauser kompileerib selle ranges HTML 5-vormingus, mis on soovitatav (ehkki harvemini kasutatav) standardstiil.

Hoiatus

• HTML-i eesmärk on hoida sisu globaalses vormingus. See ei kontrolli teie veebisaidi esitlust, näiteks taustavärvi ja elementide täpset paigutust. Kuigi on veel silte, mis võimaldavad teil seda teha, on mõistlik kasutada CSS-i kontrollitavama ja järjepidevama veebisaidi loomiseks.

Mida sa vajad

• Lihtne tekstiredaktor, näiteks märkmik või TextEdit
• Veebibrauser, näiteks Internet Explorer või Mozilla Firefox
• (Valikuline) HTML-redaktor nagu Adobe Dreamweaver, Aptana Studio või Microsoft Expression Web