Tema
/
HTML ir CSS pagrindai HTML
Pamoka 1 / 7 Žiniatinklis ir pirmasis puslapis ~45 min
Kodas

Kūnas — antraštė, pastraipa, nuoroda

Dabar užpildome <body> — tai, ką lankytojas mato. Trys elementai: antraštė, pastraipa ir nuoroda. Įrašyk juos tarp <body> ir </body>, kaip kodo stulpelyje.

  • <h1> — pagrindinė puslapio antraštė. Viename puslapyje ji viena.
  • <p> — pastraipa (angl. paragraph).
  • <a href="…"> — nuoroda; href yra adresas, į kurį ji veda.

Serviruok aplanką ir perkrauk. Dabar puslapis turi turinį — neapdorotą, bet tikrą: antraštę, sakinį ir veikiančią nuorodą į NASA. Jokio JavaScript, jokio CSS. Vien HTML, ir jis jau kažką reiškia.

Sulaužyk du kartus

Geriausias būdas suprasti, kam skirta eilutė — ją pašalinti ir pamatyti, kas sugenda. Padaryk tai dabar; abu kartus paskui grąžink eilutę atgal.

1. Pašalink kodavimą (charset). Pirmiausia pakeisk antraštę į lietuvišką, kad būtų ką laužyti:

<h1>Tyrinėk visatą</h1>

Perkrauk — viskas gerai. Dabar iš <head> ištrink eilutę <meta charset="UTF-8"> ir perkrauk dar kartą. ė, ą virsta šiukšlėmis: TyrinÄ—k visatÄ…. Štai tavo pirmoji kodavimo klaida — ir ji kažkam bus visos popietės darbas kažkurioje karjeros vietoje. Viena eilutė tam užkerta kelią. Grąžink <meta charset> atgal ir perkrauk — tekstas vėl teisingas.

2. Pašalink viewport. Ištrink eilutę <meta name="viewport" …>. Atidaryk kūrėjo įrankius (F12) ir įjunk įrenginio juostą (telefono ikona viršuje). Puslapis mažytis, nutolęs, nepatogus — būtent taip jį matytų telefonas. Dauguma tavo lankytojų yra su telefonu. Ta eilutė nėra neprivaloma ir nėra mobili funkcija, kurią pridedi vėliau. Grąžink ją atgal.

Toliau. Puslapis teisingas — ir atrodo kaip 1995-ieji. Kitoje pamokoje — CSS, ir dvi mintys (kaskada ir paveldėjimas), kurios paaiškina kiekvieną stiliaus problemą, su kuria kada nors susidursi.