index.html — mažiausias teisingas puslapis
Pradedame nuo mažiausio puslapio, kuris yra teisingas. Sukurk failą index.html ir surašyk tai, kas kodo stulpelyje. Kūno (<body>) kol kas paliekame tuščią — turinį pridėsime kitame žingsnyje; dabar svarbu karkasas.
Failas mažas, bet kiekviena eilutė uždirba savo vietą:
<!DOCTYPE html>— pasako naršyklei naudoti šiuolaikinį („standards") režimą. Praleisk ją — ir gauni dvidešimties metų senumo elgesį.<html lang="en">—langpasako ekrano skaitytuvams, kuria kalba tarti tekstą, o naršyklei — ar siūlyti vertimą. (Kol turinys angliškas, paliekameen; kai rašysi lietuviškai, keisi įlt.)<meta charset="UTF-8">— būtent dėl josąčęėįšųūžatsivaizduoja teisingai, o ne kaip šiukšlės.<meta name="viewport" …>— skirtumas tarp mobilios svetainės ir darbastalio svetainės, suspaustos iki 30 %.<title>Cosmos</title>— tekstas naršyklės kortelėje ir žymelėse.
Atkreipk dėmesį: stiliaus (style.css) dar neįkeliame. Šioje pamokoje statome tik dokumentą; CSS prasideda antroje pamokoje. Puslapis atrodys neapdorotas — ir kol kas taip ir turi būti.
Struktūra visada ta pati: <head> yra tai, ko lankytojas nemato tiesiogiai (nustatymai, pavadinimas), o <body> — tai, ką jis mato. O kūną kol kas palikome tuščią, tad serviruok aplanką (npx serve), atidaryk index.html ir pamatysi tuščią, baltą puslapį. Taip ir turi būti — tai ne klaida, o tuščias <body>. Vienintelis ženklas, kad viskas suveikė, yra naršyklės kortelė: joje rašo „Cosmos". Jei kortelėje matai „Cosmos", karkasas teisingas — kūną užpildysime kitame žingsnyje.
Patarimas. Įtrauka kode (dvi tarpo pozicijos vienam lygiui) naršyklei nesvarbi — puslapis veiktų ir be jos. Ji svarbi tau ir tam, kas skaitys tavo kodą po pusmečio. Įpratink dėti ją nuo pat pradžių.