Kodas

index.html — prikabink stilių

Pirmiausia prikabinkime stiliaus failą. Į index.html <head> pridedame vieną eilutę:

<link rel="stylesheet" href="style.css">

href="style.css" — kelias iki failo šalia index.html. Netrukus jį sukursime; kol kas naršyklė paprašys style.css ir, jo neradusi, tiesiog nieko neapiformins.

Antras pakeitimas — ant <html> elemento: data-theme="dark".

<html lang="en" data-theme="dark">

Tai paprastas atributas, kuriuo pasakome, kuri tema aktyvi. CSS į jį reaguos — kaip, pamatysi kitame žingsnyje, kai rašysime spalvas. Kol kas tiesiog žinok: temą perjungsi pakeitęs šį vieną atributą, be jokio JavaScript.

Kodo stulpelyje — visas index.html. Kūnas (<h1>, <p>, <a>) nepasikeitė nuo pirmos pamokos; pasikeitė tik dvi eilutės viršuje. Serviruok aplanką ir perkrauk — puslapis vis dar neapiformintas, nes style.css dar nėra. Tuoj jį sukursime.

index.html MODIFIKUOTI 2 eilutės pakeistos

Redaguok šį failą kataloge ./

<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cosmos</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Explore the universe</h1>
  <p>Every day NASA publishes a photograph of our universe, with a short explanation from an astronomer.</p>
  <a href="https://apod.nasa.gov/apod/">See today's picture on NASA APOD</a>
</body>
</html>