Tehke oma valitud redaktoris esimene testfail. Windowsi redaktori kasutajad saavad selle avada nii: Alustage> Kõik programmid> Tarvikud> Redaktor.
Seejärel valige Fail> Salvesta nimega. Oluline on väli Failitüüp.
Siin tuleb kindlasti valida Kõik failid. Sisestage väljale Failinimi index.htm. Nüüd saate faili soovitud kohta salvestada. See on fail, millega te töötate, ehk teie esimene HTML-fail, mis hetkel on siiski tühi. See muutub kohe.
Kui kasutate Dreamweaverit, siis on kõige parem määrata alguses, et soovite luua HTML-faili.
HTML-põhiraamistik
Enne HTML-põhiraamistikuga alustamist oluline märkus selle rea ja ka HTML-maailmas kasutatava semantika kohta. Teil puutuvad pidevalt kokku terminid märksõna ja element, mis paraku sageli valesti mõistetud. Näide:
<a href="uudised.htm">Uudised</a>
See süntaks näitab a-elementi, ja nimelt <a href="uudised.htm">Uudised</a>. See element koosneb avanevast a-sildist, st <a> või täielikult <a href="uudised.htm">, elemendi sisust Uudised ja sulgevast a-sildist </a>. Lisaks omab elemendi a atribuuti href koos atribuutväärtusega uudised.htm.
Eelnev näide näitab hüperlingi definitsiooni HTML-s a-elemendi kaudu. See a-element on märgistatud avaneva <a>- ja sulgeva </a>-sildiga. Näete seega, et märksõna element ja silt õige kasutamine polegi nii raske.
Nüüd aga alustame. Avage oma redaktoris eelnevalt salvestatud HTML-fail. Igal HTML-dokumendil on teatud põhiraamistik.
Siin on kõigepealt nimetatud raamistik oma täies hiilguses:
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> </body> </html>
Mida tähendavad need üksikud sissekanded? Alustame nn dokumentitüübi deklaratsiooniga.
<!DOCTYPE html>
Sellise dokumenditüübi deklaratsiooniga teatate brauserile, mille kaudu teie veebileht hiljem kuvatakse, millist HTML-standardit kasutate. Selles siinoleval juhul on tegemist HTML5-ga. Kui kasutaksite aga HTML 4.01, oleks dokumenditüübi kirjeldus järgmine:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Eriti dokumenditüübi deklaratsiooni teema põhjustab HTML-i alustajates segadust, kuna sellel on palju erinevaid variante. Tegelikult on see aga üsna lihtne: kujutage ette dokumenditüübi deklaratsiooni nagu ehitusjuhendit, kus kirjeldatakse, millised elemendid dokumendis võivad olla.
Soovitan teile põhimõtteliselt lühikest HTML5-sisu märkimist.
<!DOCTYPE html>
Modernsed brauserid tuvastavad selle ja kuvavad lehed, kus seda kasutatakse, vaikimisi režiimis. Siiski peaksite kindlasti määratlema ainult sellised HTML-elemente, mis on HTML5-s lubatud. Kuid sellest aga hiljem.
Jätkame html-elemendiga.
<html lang="de"> … </html>
See element hõlmab kogu dokumendi. Silmatorkav on atribuut lang. See näitab dokumendis kasutatavat keelt. Siin on mõned keelelühendid saksa keeleruumi jaoks.
• de – Saksa (Vaikimisi)
• de-ch – Saksa (Šveits)
• de-at – Saksa (Austria)
• de-lu – Saksa (Luksemburg)
• de-li – Saksa (Liechtenstein)
• en-us – Inglise (USA)
• en-gb – Inglise (Suurbritannia)
• en-au – Inglise (Austraalia)
• en-ca – Inglise (Kanada)
• en-nz – Inglise (Uus-Meremaa)
• en-ie – Inglise (Iirimaa)
• en-z – Inglise (Lõuna-Aafrika)
• en-jm – Inglise (Jamaica)
• en – Inglise (Kariibi mere saared)
Kas kasutate kahekohalisi lühendeid de, gb jne või eelistate eelnevalt näidatud koostatud lühendeid, on lõppkokkuvõttes teie enda otsustada. Minu eelistus on kahekohalised.
Pealkirja head-elemendi sees oodatakse dokumendi päiseandmeid.
<head> … </head>
Päisandmed kõlab küll veidi kohmakalt, kuid on kiiresti selgitatav. Siia pannakse muu hulgas selliseid asju, mis dokumenti lähemalt kirjeldavad. Nendeks võivad olla näiteks pealkiri ja kasutatud tähestik. Samuti võib siia lisada skripte ja stiililehed ning määratleda üldised metaandmed. Sellest aga hiljem rohkem.
Otsustava tähtsusega on eelkõige title-element.
<title>Õpetused pilditöötluseks Photoshopiga, veebidisaini ja fotograafia jaoks - PSD-Tutorials.de</title>
Sellega määratakse pealkiri, mis on vajalik mitmel erineval viisil.
• Brauseri pealkirireal.
• Kui brauseris luuakse järjehoidja/märkeruut.
• Ja loomulikult mängib pealkiri otsingumootori optimeerimise seisukohast väga olulist rolli.
Te näete seega, kui tähtis on pealkiri. Valige pealkiri võimalikult lühike ja tabav.
Lehe põhjaliku kirjelduse jaoks saate kasutada metainfot. Täpsem info selle kohta järgneb veel.
Edasi liigume kasutatava tähestiku juurde.
<meta charset="UTF-8" />
See määrang on brauseritele oluline. Sest ainult nii teavad nood, kuidas tähemärgid tuleb kodeerida, et need õigesti kuvataks. Näiteks tuleb õigete tähemärkide ja erimärkide kuvamiseks märkida õige tähestikukomplekt. Tavaliselt määratakse siin UTF-8.
Nüüd jõuame tegeliku veebilehe sisuni, ehk selle juurde, mida külastajad tegelikult näevad. Kõik see määratakse body-elemendis.
<body> … </body>
Lisage demonstrationsisuks lihtsalt järgmine kood avamis- ja sulgemismärkide <body> vahele:
<h1>PSD-Tutorials.de</h1>
Dokument peaks seejärel välja nägema järgmiselt:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Näidis HTML5 põhistruktuur - www.html-seminar.de</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>PSD-Tutorials.de</h1>
</body>
</html>Salvestage muudatused ja avage fail brauseris.
Nagu näete, kuvatakse PSD-Tutorials.de nüüd tegelikult. Olete seega loonud oma esimese HTML-dokumendi.
