Levinud on sünnipäevakaartide valmistamine paberist. Aga võib-olla tahad saata sünnipäevakaardi kellelegi, kelle tegelikku aadressi sa ei tea, või kellelegi, kellele SEE väga meeldib. Või soovite lihtsalt proovida teha digitaalset sünnipäevakaarti? Siis olete õiges kohas!

1
Avage tekstiredaktor. Saate kasutada mis tahes redaktorit, mis on teie süsteemi eelinstallitud: Notepad Windowsis, TextEdit Macis, Nano Linuxis. Kui eelistate mõnda muud tekstiredaktorit, võite seda kasutada.

2
Deklareerige dokumendi tüüp. See on oluline, et brauser teaks, et tegemist on HTML-failiga. Kirjutage tekstiredaktorisse:

3
Lisage avav ja sulgev html-märgend. See on koht, kuhu teie HTML-kood läheb. Dokumenditüübi deklaratsioon ei kuulu html-siltide vahele. Teie kood peaks nüüd välja nägema järgmine:

4
Lisage pea. Enamik pähe pandud esemeid on asjad, mida lehel näha ei ole. Lisage pea, kirjutades avamise ja sulgemise sildi. Kaasake pealkiri. Pealkiri on tekst brauseri vahekaardil. See kirjutatakse ava- ja sulgemissildi vahele. Pealkiri peaks olema lühike. Saate valida näiteks “Palju õnne sünnipäevaks!” sünnipäevakaardi jaoks.Deklareerige kodeering. Seda tehakse selleks, et teie sünnipäevakaardil olev tekst oleks õigesti kuvatud. Peaksite valima kodeeringuks UTF-8, eriti kui te ei kirjuta kaarti inglise keeles, kuna see on väga levinud ja toetab märke, mis ei ole ladina tähed, numbrid ega kirjavahemärgid. Kui teie tekstiredaktor pakub võimalust salvestada erinevas kodeeringus, valige kindlasti see, mille deklareerisite. Pange tähele, et sulgeva metasildi kirjutamise asemel kirjutage / enne >. Teie HTML-fail peaks nüüd välja nägema järgmine (tühikud/taande kasutamine pole kohustuslik, kuid muudab selle loetavamaks):

5
Avage fail veebibrauseris, et kontrollida, kas kõik on seni õige. Kõigepealt peate selle salvestama. Kasutage kirjeldavat nime ja laiendit .html, näiteks sünnipäeva.html. Avage veebibrauseris uus vahekaart. Avage fail sellel vahekaardil. Tavaliselt tehakse seda kas klõpsates nuppu Fail → Ava fail… või vajutades klahvikombinatsiooni Ctrl+O. Kuvatakse tühi leht, mille pealkiri on “Palju õnne sünnipäevaks”.

6
Lisage keha. See asub pea all. Keha on koht, kus nähtav sisu on. See tehakse ava- ja sulgemismärgise abil.

7
Kirjutage oma sisu kehasse. See võib olla see, mida soovite sünnipäevakaardile kirjutada. Praegu näeb see lihtsalt välja nagu tekst. Täpsema vormingu lisate hiljem. Kasutage pealkirja lisamiseks h-märgendit. Pealkirjade tasemed on vahemikus 1 kuni 6, kusjuures 1. tase on suurim ja 6. tase väikseim. 1. taseme pealkiri deklareeritakse märgendiga h1, 2. taseme päis märgendiga h2 jne. Asetage iga tekstilõik ava- ja sulgemissildi p vahele. Algava ja sulgeva tugeva sildi vahele jääv tekst trükitakse vaikimisi paksus kirjas, silt em muudab selle kaldkirjaks.Paigutage lõigu sees olev tekst, millel on eriline stiil, näiteks mõni muu värv või font või suurus. Määrake ulatusele mõni kirjeldav klass, näiteks “redText”, kui soovite muuta teksti värvi punaseks. Saate määrata ka terve lõigu klassi.Näide selle kohta, kuidas teie HTML praegu välja võiks näha (asendage sõnad vastavalt vajadusele ja see töötab endiselt):

Palju õnne sünnipäevaks, Karl!

Olete praegu 15-aastane.

Soovin teile siiralt edu ja õnne teie edaspidiseks elu.

Sa oled suurepärane inimene!

–Teie sõber Daniela

8
Pange oma sisu lahtrisse. See võimaldab teil joonistada selle ümber äärise ja määrata selle laiuse. Div ise ei ole nähtav enne äärise tõmbamist. Andke div-le ID, näiteks “birthdayCard”: erinevalt klassidest on ID-d kordumatud, mis on mõttekam, kuna loote sellel lehel ainult ühe sünnipäevakaardi. < title>Palju õnne sünnipäevaks

9
Eelvaate kuvamiseks laadige fail brauseris uuesti. Ärge unustage esmalt sisu tekstiredaktorisse salvestada. See peaks nüüd näitama sisu, kuid ilma vorminguta, näiteks värvide või erinevate fontideta. Vaheelemendid peaksid praegu olema nähtamatud.

10
Avage tekstiredaktoris uus fail. Hoidke HTML-i sisu avatuna juhuks, kui teil on vaja midagi kohandada. See uus fail sisaldab teie CSS-stiili, seega salvestage see .css-laiendiga, näiteks sünnipäevaks.css.

11
Määrake taust ja teksti vaikevärv. Kui määrate need asjad ID “birthdayCard” jaoks, mis viitab div-le, kuhu sisu paigutasite, määratakse need kõige jaoks, mis on divisis, välja arvatud juhul, kui on selgesõnaliselt määratud teisiti. CSS-is määratakse ID stiil, sisestades sümboli #, seejärel elemendi nime ja seejärel lokkis sulgudes stiili. Võite kasutada nii RGB-värve kui ka värvisõnu. Näiteks saate helepunase loomiseks kasutada nii “#FF0000” kui ka “punast”. Täieliku värvisõnade ja vastavate koodide loendi leiate siit. Võimalik kombinatsioon võib olla:#birthdayCard { background: darkkorange; color: #111111;}Ühendage HTML CSS-iga. Salvestage oma CSS-fail. Minge HTML-faili päisesse ja lisage järgmine rida:Asendage “birthday.css” oma CSS-faili nimega, kui see on midagi muud. Seejärel salvestage ja laadige leht uuesti.

12
Määrake lahtri laius. Praegusel kujul ulatub div kogu akna laiuse ulatuses. See ei näe hea välja. Peaksite määrama laiuse murdosa ekraani suurusest ja määrama minimaalse suuruse, et see väikestel ekraanidel liiga väikeseks ei muutuks.#sünnipäevakaart { background: darkkorange; värv: #111111; laius: 25%; min-laius: 300 pikslit;}

13
Joonista piir. See eraldab kaardi visuaalselt ülejäänud ekraanist, muutes selle paremaks. Saate määrata kõigi ääriste laiuse, värvi ja stiili või muuta mõned neist erinevaks. Solid on tavaline ääris, millel pole erilist välimust. Muud võimalikud ääriste stiilid on punktiirjooned, katkendlikud, topelt-, soon-, ripp-, sise- ja algusstiilid.#birthdayCard { background: tumerange; värv: #111111; laius: 25%; min-laius: 300 pikslit; ääris: 8px ühevärviline oranž; border-left: 10px solid #DD0000;}

14
Lisage polsterdus ja veerised. Praegu on tekst divi äärisele liiga lähedal ja div ääris lehe äärisele liiga lähedal. See ei näe hea välja. Selle parandamiseks võite kasutada polsterdust ja veerisid. Täitmist kasutatakse elemendi div sees olevate elementide eraldamiseks divisjoni äärisest. Veerisid kasutatakse elemendi div eemaldamiseks sellest väljaspool, antud juhul lehe äärest. nii veerised kui ka polsterdus, saate määrata ühe või neli väärtust. Kui määrate neli väärtust, on igaüks neist erineva külje jaoks. Kui määrate ühe väärtuse, kasutatakse seda kõigi nelja külje jaoks.#birthdayCard { background: tumerange; värv: #111111; laius: 25%; min-laius: 300 pikslit; ääris: 8px ühevärviline oranž; border-left: 10px solid #DD0000; veeris: 10 pikslit; polster: 20 pikslit;}

15
Lisage klasside ja elementide stiile. Eelmises etapis määrasite lõigud ja katavad erinevad klassid. Siiani pole seda näha olnud, kuid nüüd peaksite tegelikult lisama stiilid, mis neil klassidel olema peaksid. Klassi stiili määratlemine toimub . sümbol, siis klassi nimi, seejärel lokkis sulud koos stiiliga. Elemendi stiili loomiseks kirjutatakse elemendi nimi ja seejärel lokkis sulud.#birthdayCard { background: tumerange; värv: #111111; laius: 25%; min-laius: 300 pikslit; ääris: 8px ühevärviline oranž; border-left: 10px solid #DD0000; veeris: 10 pikslit; padding: 20px;}.redText { color: #CC0000;}.signature { text-align: right;}strong { font-size: large; värv: #CC0000;}

16
Salvestage kõik failid ja laadige vahekaart uuesti. Vaata lõpptulemust. Kui te pole sellega rahul, kohandage stiili ja sisu. Vastasel juhul saate tekstiredaktori ja vahekaardi sulgeda.

17
Saada sünnipäevakaart. Võite kasutada e-posti, anda see neile USB-mälupulgal (võite isegi ise teha USB-mälupulga koos vajalike materjalide ja tööriistadega), laadida selle sotsiaalvõrgustikku või saata mis tahes muul viisil, mida peate otstarbekaks. Kuna teil on kaks faili ja mõlemad on sünnipäevakaardi õigeks kuvamiseks vajalikud, võite luua ZIP-faili (töötab kõigil suurematel platvormidel) või tar-faili (ainult siis, kui saaja kasutab Maci või Linuxi, kuna neid on raske avada Windows).