HTML Student Material

HTML to podstawa strony internetowej. W tej lekcji przyjrzymy się, jak zbudować solidną i znaczącą strukturę strony internetowej.

Podsumowanie

  • Uczniowie rozumieją strukturę pliku HTML.
  • Uczniowie wiedzą, jak używać typowych tagów do tworzenia stron internetowych.

Co to jest HTML?

HTML to skrót od HyperText Markup Language. Jest to kod, którego używamy do:

  • tworzyć dokumenty, które są przechowywane w internecie i wyświetlane w przeglądarce;
  • zapewnia podstawową strukturę strony internetowej – jej szkielet.
  • zapewnić prawidłowe wczytywanie tekstu i obrazów, aby nasza przeglądarka mogła je wyświetlać.

Kiedy używamy HTML?

Każda strona internetowa, którą widzisz w sieci WWW, jest napisana za pomocą kodu HTML. Przyciski, obrazy, formularze i sekcje tekstu – to wszystko elementy tworzone za pomocą HTML.

Jeśli wyobrazimy sobie stronę internetową jako ludzkie ciało, HTML będzie szkieletem. Za pomocą CSS możemy dodać skórę i ubranie, ale dopiero po utworzeniu szkieletu.

HTML w akcji

Podstawą HTML są elementy. Elementy są tworzone za pomocą tagów.

Większość elementów ma tag otwierający i tag zamykający:

<!-- opening tag -->
<p>

<!-- closing tag -->
</p>

Treści (tekst lub inne elementy HTML), które mają być widoczne na stronie internetowej, można umieścić między tymi tagami, podobnie jak warstwy kanapki.

<p>The content that you write here will be seen on the web page</p>

<section>
  <p>This text is inside a paragraph within a section.</p>
</section>

Niektóre treści HTML są tworzone za pomocą tagów zamykających się samodzielnie, które nie wymagają dodatkowego tagu zamykającego:

<img />
<link />

Wystarczy tylko ten tag, ponieważ jego zadaniem jest zajmowanie miejsca w dokumencie. W przeciwieństwie do większości innych elementów HTML nie można zagnieżdżać w nich innych elementów ani informacji.

Elementy HTML

Przykład w kodzie HTML

Ten kod będzie wyświetlany w przeglądarce i będzie wyglądać jak na obrazie poniżej.

Ten Kodeks...

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>HTML Example</title>
</head>
<body>
  <h1>My Day In The Garden</h1>
  <section>
    <h2>Flora</h2>
    <p>I spent the morning drawing some of the daffodils that
    are inbloom.</p>
    <p>I picked a few tulips to put in a vase in the dining
    room.</p>
  </section>
  <section>
    <h2>Fauna</h2>
    <p>Today I spotted that hummingbird again, buzzing around
    the newly blooming tree.</p>
    <img
    src="https://media.gettyimages.com/photos/magentathroated-woodstar-feeding-from-flowers-picture-id853369596"
    alt="hummingbird"/>
  </section>
</body>

... Makes This Web Page

Dokumentacja HTML

Kopia w ramkach

Kontekst i cel

HTML to skrót od Hyper Text Markup Language. Pozwala to nadać tekstowi znaczenie strukturalne. Umożliwia to komputerom i programistom łatwe określenie, do czego służy dany fragment tekstu.

HTML to szkielet strony internetowej – zapewnia strukturę i treść, a JavaScript i CSS odpowiadają za interaktywność i styl.

Cele szkoleniowe

Uczniowie będą mogli:

  • utworzyć plik HTML i otworzyć go w edytorze i przeglądarce;
  • skonfigurować plik HTML o odpowiedniej strukturze,
  • wymieniać i używać niektórych popularnych tagów do dodawania struktury i treści do witryny;

Pierwsze kroki

Opis i cel sekcji

  • Kod HTML jest zapisywany w plikach z rozszerzeniem .html.
  • Pliki HTML mogą mieć dowolną nazwę, ale index.html jest najczęściej używaną nazwą strony docelowej, chyba że deweloper ma powód, aby skonfigurować serwer inaczej.
# creating an html file on the command line
touch index.html
 
# opening your html file in your browser
open index.html

Miniwyzwania

  1. Utwórz 3 dodatkowe pliki HTML o dowolnych nazwach.
  2. Otwórz jeden z plików w edytorze tekstu i przeglądarce.

Struktura strony HTML

Opis i cel sekcji

Dokument HTML powinien zawsze zaczynać się od tej samej struktury:

  • Tag DOCTYPE jest specjalny i nie jest zamykany. Jest to też jedyny tag, który może zawierać wartości inne niż alfanumeryczne (litery i cyfry).
  • <head> zawiera informacje o Twojej witrynie, ale nie rzeczywistą treść, która będzie wyświetlana na stronie.
  • Element <body> zawiera całą treść strony, która będzie wyświetlana na ekranie.
  • Tagi, których użyjesz do utworzenia struktury strony, powinny znajdować się między tagami <body>.
  • Między tagami otwierającym i zamykającym wstawiamy tekst lub „treść” elementu. Wynik końcowy wyglądałby tak: <example-tag>Content Goes in here</example-tag>. Tagi można też umieszczać w innych tagach.
  • Pamiętaj, że umieszczając tag w innym tagu, musisz wstawić wcięcie w nowym tagu, aby pokazać, że jest on elementem podrzędnym tagu nadrzędnego.

Słownictwo

  • elementy – elementy (np. obrazy, akapity i nagłówki) utworzone za pomocą kodu HTML;
  • tagi – fragmenty kodu, które wskazują, gdzie zaczynają się i kończą określone elementy.
  • child – elementy zawarte W INNYCH elementach.
  • parent – elementy, które ZAWIERAJĄ inne elementy.

Przykłady w HTML

Uwaga: poniższy przykład ma charakter poglądowy. Nie musisz od razu wszystkiego rozumieć, ale warto zobaczyć, jak może wyglądać dobrze sformatowany kod HTML.

<!-- Standard tag setup of an HTML document  -->
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my
    interests.</p>
  </section>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>
 
<!-- Nested elements  -->
<section>
  <p>I am the text that will show up on your website.</p>
</section>
<!-- The <section> is the parent element -->
<!-- The <p> is the child element -->

Miniwyzwania

  1. Otwórz jeden z utworzonych plików i dodaj podstawową strukturę tagów HTML.
  2. Skonfiguruj treść HTML, aby wyświetlać drzewo genealogiczne (swoje lub innej osoby). Użyj tagu section, aby przechowywać grupę rodzinną. Użyj lokalizatora p, aby śledzić członka rodziny. Rodziny są skomplikowane, ale przykładem może być:
<section>Jetson Family
  <div>George and Jane
    <p>Judy</p>
    <p>Elroy</p>
  </div>
  <p>Rosie the robot</p>
  <p>Astro the dog</p>
</section>

<!-- In this example, Judy and Elroy are the children of Jane and George. -->

Wspólne tagi

Opis i cel sekcji

Zasadniczo nie tworzymy własnych typów elementów. Zamiast tego istnieje zestaw wstępnie zdefiniowanych elementów, z którymi są już powiązane funkcje.

Więcej informacji o przykładach bloków kodu znajdziesz w dokumentacji HTML

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <br>
  <img
  src="https://media.gettyimages.com/photos/portrait-of-kitten-against-colored-background-picture-id903869076"
  alt="kitten with blue background">
  <hr>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my interests.</p>
    <h3>My favorite websites</h3>
      <ul>
        <li><a href="www.google.com">Google</a></li>
      </ul>
    <h3>My favorite books</h3>
      <section>
        <h4>Non-Fiction</h4>
        <ol>
          <li>Eloquent Javascript</li>
        </ol>
      </section>
      <section>
        <h4>Fiction</h4>
        <ol>
          <li>Hitchhiker's Guide to the Galaxy</li>
        </ol>
      </section>
  </section>
  <hr>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>

Miniwyzwania

  1. Zmień wszystkie powyższe treści, aby odzwierciedlały Twoje zainteresowania.
  2. W jednym z pozostałych pustych plików HTML utworzonych na początku lekcji przygotuj artykuł z tytułem, nagłówkami i podtytułami (nie masz pomysłu na treść? Opisz jeden dzień podczas podróży. Pomyśl o krótkich wyjazdach, odwiedzonych miejscach i zjedzonych potrawach.
  3. Użyj odpowiednich tagów i dodaj treść, aby artykuł z wiadomościami pojawił się w Twojej witrynie.
  4. Sprawdź, czy treści wyświetlają się w przeglądarce.
  5. STRETCH: utwórz formularz, który ktoś może wypełnić, aby przesłać Ci komentarz do artykułu. Chociaż jeszcze nie będzie działać (nie jest połączony z JavaScriptem), utworzenie tego formularza w HTML-u może pokazać nam pierwszy krok w procesie tworzenia działającego formularza.

Kontekst

HTML to język treści w internecie.

Aby przejść do plików HTML i je otworzyć, użyj wiersza poleceń. Pliki HTML zostaną rozszerzone o style CSS i zachowania zapisane za pomocą skryptów JavaScript, które składają się z różnych funkcji. Pliki HTML będą też szablonami używanymi przez Google App Engine i wypełnianymi danymi z bazy danych.

HTML w akcji

Pierwsze kroki z HTML

Kod HTML jest zapisywany w plikach z rozszerzeniem .html.

Wyświetlanie strony

Aby wyświetlić podgląd pliku HTML na komputerze Mac: w wierszu poleceń przejdź do folderu ze stroną HTML i wpisz open filename, zastępując „filename” nazwą pliku HTML.

Składnia ogólna

<tag>
  Content
</tag>

Elementy są zagnieżdżone

Elementy HTML można umieszczać w innych elementach:

 <parent>
    <child>
      This content is inside of the child tag, which is inside of
      the parent tag. Keep an eye on indentation to see which is
      the parent and which is the child!
    </child>
  </parent>

Struktura strony HTML

Każda strona internetowa ma taką samą podstawową strukturę. Wygląda on następująco:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>
  • Element <head> zawiera informacje o Twojej witrynie, ale nie rzeczywistą treść, która będzie wyświetlana na stronie (można go traktować jako „mózg” strony internetowej).
  • Element <body> zawiera całą treść strony, która będzie wyświetlana na ekranie.

Typowe elementy

Użyj tych wspólnych elementów w tagach <body> i </body>, aby dodać treść do strony.

Akapit

Aby utworzyć akapit, użyj tagów otwierającego i zamykającego p:

<p>
  This is a paragraph about how great polar bears are. Aren't they just the best?
</p>

Komentarz

Używaj komentarzy, aby ułatwić czytanie kodu bez wpływu na końcowy renderowany kod HTML.

<!-- This is a comment. It lives in the code as a note to yourself or
  to other developers, but is hidden when the HTML is rendered in the
  browser. -->

Nagłówki

<!-- Different levels of headings. Use these for structuring
your page. <h1> is most important heading while <h6> is the
least important heading. -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

Ogólny element <div>

<div> The DIV tag exists to make "dividers" to keep your page
organized. Group other similar or related elements inside these.</div>

Listy

Listy elementów listy, <li>, są opakowane tagiem listy nieuporządkowanej, <ul>, lub tagiem listy uporządkowanej, <ol>.

<!-- An unordered list - this will default to a bulleted list. -->
<ul>
  <li>first list item</li>
  <li>second list item</li>
</ul>
 
<!-- An ordered list - this will default to a numbered list. -->
<ol>
  <li>first list item</li>
  <li>second list item</li>
</ol>

Obraz

Tag <img> wymaga podania adresu obrazu za pomocą atrybutu src, a opcjonalny atrybut alt jest używany na potrzeby ułatwień dostępu, w tym czytników ekranu.

<!-- Image hosted elsewhere on the web -->
<img
 src="https://some.hostingsite.com/portrait-of-kitten-in-blue"
 alt="kitten with blue background">

<!-- Image hosted on your own site -->
<img src="img/kitten-blue-background.jpg" alt="Kitten in a donut">

W przypadku hiperlinku tag <a> wymaga określenia adresu miejsca docelowego hiperlinku za pomocą atrybutu href.

<!-- External link  -->
<a href="https://www.google.com"></a>

<!-- Local link -->
<a href="footer.html"></a>

Linia pozioma

<!-- This self-closing tag creates a line across your web page. -->
<hr>

Przerwa

<!-- This self-closing tag creates a line break between elements. -->
<br>

Formularz

<form> służy do zbierania informacji od użytkownika. Aby <form> działał, musi wysyłać zebrane dane do miejsca, w którym będą przetwarzane lub obsługiwane. Dlatego element <form> często wymaga dodatkowych atrybutów:

  • action – miejsce docelowe danych formularza po jego przesłaniu;
  • method – wskazuje, czy dane powinny być przetwarzane za pomocą żądania typu GET czy POST.
<!-- a form that will send data to process.php via POST request -->
<form action="/process.php" method="post">

</form>

Dane wejściowe

<input> to element używany przez <form> do zbierania informacji.

Element <input> ma też zwykle atrybut name, który jest używany przez bazy danych do identyfikowania pola, do którego należą przesłane dane.

<form>
    <!-- a text box with the helper text "Full Name" -->
    <input type="text" name="fullName" placeholder="Full Name">
</form>

Element <input> jest bardzo wszechstronny: określając atrybut type, można go renderować jako pole tekstowe, selektor dat w stylu kalendarza, przycisk opcji, menu i nie tylko. Aby zobaczyć pełniejszą listę, zapoznaj się z dokumentacją zewnętrzną.

Wskazówki i porady

  • Sprawdź, jakie tagi HTML są dostępne, analizując kod stron internetowych, aby zobaczyć, jakich tagów używają inni deweloperzy do dodawania elementów do stron internetowych.
  • Jeśli nie możesz znaleźć tego, co chcesz dodać, zapoznaj się z dokumentacją dla programistów. Oto niektóre listy wszystkich możliwych elementów HTML: https://www.w3schools.com/Tags/, https://developer.mozilla.org/en-US/docs/Web/HTML/Element, http://html-css-js.com/html/tags/
  • Podczas pisania kodu HTML w przypadku elementów, które wymagają tagu otwierającego i zamykającego, najlepiej najpierw otworzyć i zamknąć tag, a potem dodać treść między tagami. Dzięki temu nie pozostawisz nieużywanych tagów.
  • Aby jak najlepiej wyświetlić zagnieżdżoną strukturę elementów HTML w kodzie, wcięte elementy umieść wewnątrz innych elementów. Pomoże Ci to szybko rozpoznać strukturę treści HTML.
  • Używaj wielu komentarzy. Pomogą Ci one w rozwiązywaniu problemów z własnym kodem, a także innym, gdy poprosisz ich o sprawdzenie.
  • Zasoby w internecie, takie jak html5boilerplate.com, mogą pomóc Ci szybko rozpocząć pisanie kodu HTML.

Podsumowanie sprawdzonych metod

  • Informacje o stronie internetowej znajdują się w sekcji <head> dokumentu HTML: tytuł, metadane, linki do stylów itp.
  • Informacje na stronie internetowej znajdują się w sekcji <body> dokumentu HTML.
  • Deweloperzy mogą używać wielu elementów do tworzenia treści dokumentu HTML, m.in. <p>, <h1>–<h6>, <div>, <li>, <img>, <a>, <hr>, <br>, <!-- -->.
  • Niektóre elementy wymagają tagu otwierającego i zamykającego: <p></p>.
  • Inne elementy są zamykane automatycznie, więc wymagają tylko tagu otwierającego: <img>.
  • Tagi mogą zawierać atrybuty (src, alt, id itp.), które dostarczają więcej informacji o tym, jak element powinien się zachowywać: <img src="filename.png" alt="description">.
  • Komentarze <!-- --> zawierają notatki dla deweloperów, które pomagają zrozumieć, do czego służą poszczególne sekcje strony internetowej.
  • Użyj wbudowanych narzędzi deweloperskich w przeglądarce, aby sprawdzić kod HTML stron internetowych i dowiedzieć się, jak zostały one utworzone.

Pytanie 1

Który z tych elementów jest elementem podrzędnym? (na potrzeby tego ćwiczenia zignoruj elementy body/html)

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>
  1. h1
  2. p
  3. a
  4. h1 i p

Pytanie 2

W dokumencie HTML __ znajduje się w elemencie <head>, a __ w elemencie <body>.

  1. struktura, metadane
  2. metadane, struktura
  3. nagłówki, mniejsze treści,
  4. nagłówek witryny, główna treść witryny;

Pytanie 3

Które z tych powodów nie są dobrym uzasadnieniem wcięcia zagnieżdżonych elementów?

  1. Wcięcia ułatwiają sprawdzenie, które elementy znajdują się w innych elementach.
  2. Wcięcia ułatwiają użytkownikom odczytywanie struktury strony internetowej.
  3. Wcięcia ułatwiają botom i wyszukiwarkom odczytywanie struktury strony internetowej.
  4. Wcięcia ułatwiają identyfikację elementów pokrewnych.

Pytanie 4

Które z poniższych jest atrybutem elementu HTML?

<div class="sidebar">Sidebar goes here!</div>
  1. div
  2. class
  3. pasek boczny
  4. Tu będzie pasek boczny

Pytanie 5

Ile atrybutów ma ten element HTML?

<input type="text" placeholder="username" name="username" />
  1. 0
  2. 1
  3. 2
  4. 3

Pytanie 6

W poniższym fragmencie kodu HTML demonstrującym relację, który element jest elementem nadrzędnym?

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>
  1. <p>
  2. <b>
  3. <i>

Pytanie 7

Ile elementów w tym fragmencie kodu HTML jest elementami podrzędnymi elementu nadrzędnego?

(Nie uwzględniaj elementów otaczających <body> ani <html>).

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>
  1. 1
  2. 2
  3. 3
  4. 4

Pytanie 8

Chociaż niektóre przeglądarki prawidłowo renderują ten fragment kodu HTML, co jest z nim nie tak?

<img src=puppies.png width=400 />
  1. Nie ma tagu zamykającego
  2. Wartości atrybutów powinny być ujęte w cudzysłów
  3. Podanie atrybutu width wymaga też podania atrybutu height.
  4. Brak wymaganego atrybutu

Pytanie 1

Który z tych elementów jest elementem podrzędnym? (na potrzeby tego ćwiczenia zignoruj elementy body/html)

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>

Element a jest elementem podrzędnym, ponieważ znajduje się w innym elemencie.

Pytanie 2

W dokumencie HTML __ znajduje się w elemencie <head>, a __ w elemencie <body>.

metadane znajdują się w elemencie <head>, a struktura w elemencie <body>. Żaden element w tagu <head> nie będzie widoczny na stronie.

Pytanie 3

Które z tych powodów nie są dobrym uzasadnieniem wcięcia zagnieżdżonych elementów?

Wcięcia nie ułatwiają botom ani wyszukiwarkom odczytywania struktury strony internetowej. Bot odczytuje witrynę, analizując kod HTML, nawet jeśli cały kod znajduje się w jednym wierszu.

Pytanie 4

Które z poniższych jest atrybutem elementu HTML?

<div class="sidebar">Sidebar goes here!</div>

class to atrybut – atrybuty znajdują się w elemencie HTML i zwykle mają wartość (ale nie muszą jej mieć).

Pytanie 5

Ile atrybutów ma ten element HTML?

<input type="text" placeholder="username" name="username" />

Element input powyżej ma 3 atrybuty: type, placeholder i name.

Pytanie 6

W poniższym fragmencie kodu HTML demonstrującym relację, który element jest elementem nadrzędnym?

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>

<p> jest elementem nadrzędnym, ponieważ zawiera inne elementy.

Pytanie 7

Ile elementów w tym fragmencie kodu HTML jest elementami podrzędnymi elementu nadrzędnego?

(Nie uwzględniaj elementów otaczających <body> ani <html>).

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>

Fragment kodu zawiera 4 elementy podrzędne – w zasadzie każdy element, który ma element nadrzędny, czyli wszystko z wyjątkiem elementu <div>: <h1>, <p>, <i>, <a>.

Pytanie 8

Chociaż niektóre przeglądarki prawidłowo renderują ten fragment kodu HTML, co jest z nim nie tak?

<img src=puppies.png width=400 />

Wartości atrybutów powinny być ujęte w cudzysłów. <img /> to tag zamykający się samodzielnie, który nie ma wymaganego atrybutu. Możesz mieć width bez height i na odwrót.