Exerciții - Adăugați HTML de bază la aplicația web

10 minute

În acest moment, site-ul web are un fișier HTML gol. Să adăugăm un cod! Scopul este să utilizați limbajul DE marcare hipertext (HTML) pentru a descrie pagina web pe care ar trebui să o afișeze browserele clienților dvs. Nu ar fi frumos să aveți un șablon de pornire? Editorii pot completa în mod convenabil unele dintre structura standard tipică sau HTML pentru dvs.

În această unitate, adăugați conținut HTML de bază, deschideți pagina HTML într-un browser și vedeți mai întâi instrumentele pentru dezvoltatori.

Adăugați un cod HTML

Visual Studio Code oferă suport de bază pentru programarea HTML în afara casetei. Există evidențierea sintaxei, finalizarea inteligentă cu IntelliSense și formatare particularizabilă.

Deschideți folderul de site web în Visual Studio Code, apoi deschideți fișierul index.html selectându-l în Explorer.
În pagina index.html, tastați html:5, apoi selectați Introduceți. Codul șablonULUI HTML5 este adăugat la fișier.

Notă

Dacă codul șablonului HTML5 nu este adăugat la fișierul index.html, încercați să închideți și să redeschideți fișierul.

Editați codul șablonului astfel încât să semene cu următorul. Apoi salvați fișierul selectând Control+S în Windows sau Command+S pe macOS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

Au existat versiuni diferite de HTML. document<!DOCTYPE html> indică faptul că acest document HTML conține cod HTML5.

În timp ce nu suntem de gând să delve profund în sensul tuturor elementelor HTML, vrem să sublinieze câteva elemente importante. Eticheta meta indică metadate informații care nu sunt vizibile de obicei pentru vizualizator decât dacă vizualizează codul sursă în browser. Elementele meta sau etichetele oferă informații descriptive despre pagina web. De exemplu, acestea ajută motoarele de căutare să proceseze informațiile din paginile web pentru a reveni în rezultatele căutării.

Setul de caractere (charset) pentru UTF-8 poate părea nesemnificativ, dar este esențial pentru stabilirea modului în care computerele interpretează caracterele. Dacă lipsesc metadatele pentru setul de caractere, acest lucru poate duce la securitate compromisă. Există destul de un pic de istorie și informații tehnice în spatele atributului charset, dar luarea importantă de la acest exercițiu este că Visual Studio Code boilerplate oferă unele implicite sensibile.

Editarea capului

Elementul <head> din codul HTML conține informații despre site-ul web care nu sunt vizibile în interiorul filei browserului.

Metadatele definesc date despre documentul HTML, cum ar fi setul de caractere, scripturile și browserul în care se deschide pagina web.

Titlul unei pagini web apare în partea de sus a unei ferestre de browser și este semnificativ în multe moduri. De exemplu, titlul este utilizat și afișat în motoarele de căutare. Să adăugăm un titlu.

Important

Din acest punct înainte, punctele de suspensie (...) indică faptul că codul declarat anterior precedă sau urmează. Ar trebui să existe suficient cod furnizat ca context pentru a face modificări necesare sau a vă actualiza lucrul, dar nu ar trebui să copiați și să lipiți punctele de suspensie în cod.

În editor, modificați elementul <title> astfel încât să semene cu următorul exemplu.

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
...

Pentru a aplica stiluri elementelor HTML de pe pagina web, puteți să scrieți codul CSS direct în antetul paginii web. Scrierea CSS în pagina HTML se numește CSS intern. Cu toate acestea, este o practică recomandată să separați structura HTML și stilarea CSS. O pagină CSS separată se numește CSS extern. Codul tinde să fie mai ușor de citit atunci când este concis și compartimentat. Puteți utiliza una sau mai multe foi de stiluri externe pentru a servi mai multe pagini web. În loc să actualizați fiecare pagină HTML cu cod CSS reprodus, puteți să efectuați modificări într-un singur fișier CSS și să aveți acele actualizări aplicate la toate paginile web dependente. Să legăm la un fișier CSS extern.

În editorul Visual Studio Code, adăugați o linie necompletată după elementul <title>, tastați link, apoi selectați Enter. Visual Studio Code ar trebui să adauge următoarea linie la fișierul index.html.
```
<link rel="stylesheet" href="">
```

Actualizați href= la href="main.css"și salvați fișierul selectând Control+S în Windows sau Command+S pe macOS.

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
  <link rel="stylesheet" href="main.css">
</head>
...

Editarea corpului

Să începem acum să completăm elementul <body>.

Elementul <body> conține conținutul site-ului web care este vizibil pentru clienții dvs. în browserele lor.

În interiorul elementului <body>, adăugați un element de titlu <h1>, urmat de un element <p>, apoi creați un listă neordonată<ul> care conține mai multe elemente de listă <li>.

Editați codul sau copiați și lipiți, astfel încât să arate ca următorul exemplu.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple website</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <h1>Task List</h1>
    <p id="msg">Current tasks:</p>
    <ul>
      <li class="list">Add visual styles</li>
      <li class="list">Add light and dark themes</li>
      <li>Enable switching the theme</li>
    </ul>
  </body>
</html>

Puteți utiliza un atribut ID (utilizat în elementul <p>) pentru stilierea unui element, în timp ce atributul clasă (utilizat în elementul <li>) este pentru stilarea tuturor elementelor din aceeași clasă.

Înainte de pasul următor, asigurați-vă că fișierul este salvat selectând Control+S sau Command+S.

Deschidere în browser

Puteți previzualiza local pagina web deschizând fișierul HTML într-un browser. În loc de o adresă de site web care începe cu https://, browserul indică spre calea de fișier locală, care ar trebui să arate asemănător cu C:/dev/simple-website/index.html.

Pentru a previzualiza utilizând Visual Studio Code, faceți clic dreapta pe index.html și selectați Deschidere în browserul implicitsau selectați fișierul index.html și utilizați comanda rapidă de la tastatură Alt+B.

Important

Dacă întâmpinați probleme, asigurați-vă că faceți clic dreapta direct pe pictograma cu numele de fișier sau pe text. Dacă apare o casetă de dialog Cod Visual Studio, selectați Da, am încredere în autorii; aceasta este caracteristica Trust spațiu de lucru care vă permite să decideți dacă folderele de proiect ar trebui să permită sau să restricționeze executarea automată a codului. Tocmai ați creat fișierul, deci este sigur.

Pagina web se deschide în browserul implicit.

Vizualizați pagina utilizând instrumente pentru dezvoltatori

Puteți inspecta o pagină web utilizând instrumentele pentru dezvoltatori din browser. Să încercăm.

Deschideți Instrumente pentru dezvoltatori făcând clic dreapta pe pagina web și selectând Inspectațisau încercați aceste comenzi rapide:
- Apăsați comanda rapidă de la tastatură pentru Instrumente pentru dezvoltatori, care este F12.
- Apăsați Ctrl+Shift+I pe Windows și Linux sau Option+Command+I pe un Mac.
Aceste comenzi rapide de la tastatură funcționează în Microsoft Edge, Chromeși Firefox. Dacă utilizați Safari, consultați instrumente de dezvoltare web. Atunci când este instalat, selectați Safari > Preferințe, apoi selectați Complex. În partea de jos a panoului, bifați caseta de selectare Afișați meniul Dezvoltare în bara de meniu. Selectați Dezvoltare > Afișare inspector web. Pentru mai multe informații, consultați documentația Inspector web Safari.

Pentru a afla mai multe despre deschiderea Instrumentelor pentru dezvoltatori și principalele caracteristici disponibile, consultați articolul Prezentare generală a devTools.
Selectați fila Elemente.
Mutați mouse-ul peste elementele HTML afișate în fila Elemente și extindeți conținutul diferitelor elemente.

Fila Elemente din instrumentele pentru dezvoltatori vă arată modelul obiect document (DOM) așa cum este redat în browser. Atunci când depanați, adesea este important să vedeți cum interpretează browserul codul sursă.

Inspectarea paginii într-un browser oferă tot felul de informații utile și vă poate ajuta să depanați problemele. De asemenea, puteți vizualiza detaliile CSS cu inspectorul, așa cum veți vedea în secțiunea următoare.