Ćwiczenie — tworzenie strony HTML

  • 5 min

W tym ćwiczeniu zaczynasz tworzenie strony WWW dla swojego CV. Zacznij od dodania pewnych informacji wysokiego poziomu, takich jak nazwa i nagłówki sekcji. Dodasz również kilka komentarzy, których używamy jako znaczników miejsca dodawania informacji w późniejszym ćwiczeniu.

W tym ćwiczeniu użyto vscode.dev — internetowej wersji programu Visual Studio Code i CodeSwing. Te narzędzia pomagają usprawnić proces programowania. Do wykonania kolejnych ćwiczeń nie jest wymagana instalacja lokalna.

Tworzenie strony HTML przy użyciu funkcji CodeSwing

Zacznij od utworzenia folderu, skonfigurowania narzędzi i utworzenia "swing" przy użyciu funkcji CodeSwing w vscode.dev. Funkcja automatycznie wyświetla wyniki kodu, który tworzysz w vscode.dev. Dzięki temu można szybko wprowadzać modyfikacje, a aktualizacje są wykonywane w czasie rzeczywistym.

W poniższym filmie wideo pokazano, jak zainstalować rozwiązanie CodeSwing w programie Visual Studio Code. Te kroki są również częścią ćwiczenia.

  1. Utwórz folder na pulpicie o nazwie CV.
  2. Otwórz vscode.dev.
  3. Wybierz pozycję Otwórz folder.
  4. Przejdź do folderu CV, który utworzyłeś wcześniej, i wybierz „Wybierz folder”.
  5. Gdy pojawi się monit z Zezwól witrynie na wyświetlanie plików, wybierz pozycję Wyświetl pliki.
  6. Wybierz przycisk rozszerzenia.

    zrzut ekranu przedstawiający ikonę Rozszerzenia.

  7. W polu tekstowym Search Extensions in Marketplace wpisz CodeSwing.
  8. Wybierz Zainstaluj, aby zainstalować CodeSwing.
  9. Otwórz paletę poleceń, wybierając pozycję Ctl-Shift-P lub Cmd-Shift-P na komputerze Mac.
  10. Wpisz CodeSwing w palecie poleceń i wybierz CodeSwing: New Swing in Directory....
  11. Wybierz pozycję Wybierz folder, aby użyć bieżącego katalogu (czyli tego, który został utworzony w poprzednim kroku).
  12. Wybierz Podstawowa: HTML-Only.
  13. Po wyświetleniu monitu o Zapisz zmiany w celu wznowienia wybierz Zapisz zmiany.

Program Visual Studio Code tworzy dwa okna obok siebie. Lewa strona to edytor, w którym można wprowadzić kod HTML. Prawa strona zachowuje się jak przeglądarka, wyświetlając wyniki kodu HTML.

Dodawanie kodu HTML w celu utworzenia struktury strony

Następnie dodasz kod HTML, aby utworzyć strukturę strony. Utworzysz trzy główne elementy: html, head i body. W programie bodydodasz sekcję zawierającą ogólne informacje o Tobie, takie jak twoje imię i nazwisko i informacje w mediach społecznościowych. Następnie dodasz sekcje z listą edukacji i doświadczenia.

Na poniższym filmie pokazano, jak tworzyć kod HTML w programie Visual Studio Code i wyrenderować go w CodeSwing. Te kroki są również częścią ćwiczenia.

Możesz zastąpić Twoje imię i nazwisko twoim imieniem. W innych ćwiczeniach utworzysz listy i linki do swojego adresu e-mail, nazw użytkownika w mediach społecznościowych oraz edukacji i doświadczenia.

Po dodaniu kodu sprawdzisz, jaki kod został dodany.

  1. Wewnątrz index.htmldodaj następujący kod HTML:
<html>
<head>
  <title>Your Name resume</title>
</head>
<body>
  <h1>My Name</h1>
  <!-- email address -->
  <h2>Social Media</h2>
  <!-- social media -->
  <h2>Education</h2>
  <!-- education -->
  <h2>Experience</h2>
  <!-- experience -->
</body>
</html>

Każdy z elementów w kodzie HTML wykonuje określone czynności. W poniższej tabeli opisano tagi używane w kodzie HTML i sposób ich zrozumienia przez przeglądarkę.

Znacznik Opis
<html> Tag "container" dla całego dokumentu HTML. Wszystkie inne tagi są zapisywane wewnątrz elementu HTML.
<head> Kontener nagłówka. Nagłówek zazwyczaj zawiera odwołania do innych plików, których potrzebuje strona lub witryna. Może również zawierać dane używane przez wyszukiwarki i witryny mediów społecznościowych, aby lepiej znaleźć twoją witrynę internetową.
<body> Ten tag tworzy kontener treści dla strony internetowej. Większość elementów wyświetlania znajduje się w elemencie treści.
<div> Tag dzielenia tworzy sekcję w kodzie HTML. Sekcje zwykle mają podobną zawartość lub zawartość, która jest ze sobą powiązana.
<h1> - <h6> Są to tagi nagłówka. Dają one pewną strukturę dokumentowi HTML. Informują przeglądarkę o sformatowaniu tekstu między nimi w określony sposób, aby pokazać daną hierarchię.
<!-- comment text --> Te tagi to komentarze w kodzie HTML. Nie generują renderowanego wyjścia. Są one używane przez deweloperów, aby ułatwić znajdowanie, udostępnianie i zrozumienie kodu.
/* CSS comment */ Te tagi komentarzy są używane w kaskadowych arkuszach stylów.
  1. Podczas wpisywania strona jest automatycznie aktualizowana; końcowy wynik jest podobny do poniższego obrazu:

Zrzut ekranu przedstawiający strukturę CV.

Przeglądanie kodu

Każda strona HTML ma html jako główny element podstawowy z całą zawartością zawartą w niej. html zwykle ma dwa bezpośrednie elementy podrzędne, head zawierające metadane i body zawierające informacje, które mają być wyświetlane.

Zwróć uwagę, że używasz tylko jednego elementu h1 dla swojej nazwy i h2 elementów nagłówków dla każdej z sekcji. Pomaga to wyróżnić najważniejsze części strony. Twoje imię i nazwisko to najważniejsza informacja na stronie; dlatego znajduje się na samym szczycie z h1.

Na koniec, są komentarze dotyczące adresu e-mail , mediów społecznościowych , edukacji i doświadczenia . Są one używane jako symbole zastępcze i są zastępowane w późniejszym ćwiczeniu w tym module.