Want to create interactive content? It’s easy in Genially!

Get started free

Prezentacja o tworzeniu stron HTML

kapimpl2

Created on May 16, 2021

Kacper Miśta 7D

Start designing with a free template

Discover more than 1500 professional designs like these:

Mobile App Dossier

Color Shapes Dossier

Notes Dossier

Futuristic Tech Dossier

Crowdfunding Campaign

Company Dossier

Economy Dossier

Explore all templates

Transcript

Podstawy

HTML

Kacper Miśta 7D

Czym tak naprawdę jest HTML?

HTML (Hypertext Markup Language) jest to kod używany do tworzenia struktury strony i jej zawartości. Na przykład treść może być uporządkowana w obrębie zestawu akapitów, listy punktowanych punktów lub tabel obrazów i danych.

Podstawowe rodzaje znaczników

Pojedynczy znacznik bez domykającego slasha "/" i z atrybutem:

Znacznik otwierający, a potem zamykający:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam

Pojedynczy znacznik z zamykającym slashem "/":

<znacznik> </znacznik>

<znacznik atrybut=" wartość">

</znacznik>

np.

np.

np.

<div> </div>

<br />

<img src="obraz.jpg">

Podział znaczników ze względu na funkcję

Znaczniki strukturalne

opisują podstawową strukturę dokumentu - np. <head>, <body>

Znaczniki formatujące

określają wygląd poszczególnych elementów - np. <b>Bold</b>

Znacznik definiujący obiekt

zamieszczenie w treści strony np. obrazu, napisu - np. <img>

Znacznik hipertekstowy

definiuje hiperłącze (link) do innej lokalizacji - np. <a href="strona.html">Link</a>

Wybór edytora kodu HTML

  • Dokument HTML to po prostu dokument tekstowy z rozszerzeniem *.htm lub *.html
  • Pracuj komfortowo, oszczędzaj swój czas i wzrok - edytor HTML powinien posiadać podświetlanie składni, możliwość wyboru mało kontrastowego schematu kolorów, możliwość wyboru standardu kodowania znaków w tworzonym dokumencie.
  • Wybór edytora to kwestia indywidualnych preferencji. Poniżej kilka sprawdzonych i popularnych propozycji:

Kilka cennych uwag praktycznych

Za pomocą samego tylko języka HTML możemy stworzyć statyczną stronę internetową, czyli taką stronę, która wygląda zawsze tak samo dla każdego użytkownika w sieci (nie posiadają oni własnych kont na stronie, które wpływałyby na to, co zobaczy dany user po zalogowaniu)

Jeżeli przeglądarka internetowa z jakichś powodów nie będzie potrafiła zinterpretować jakiegoś znacznika, zignoruje jego istnienie

Znaczniki mogą być zapisywane dowolną wielkością liter, ale atrybuty w znacznikach powinny być zapisane małymi literami. Wraz z kolejnymi wersjami HTML daje się jednak zauważyć promowanie tendencji do zapisywania wszystkiego (także tagów) małymi literami

Wartości atrybutów zawsze powinny być zapisane w cudzysłowach (lub apostrofach), mimo iż przeglądarki w większości przypadków poradzą sobie z ich ewentualnym brakiem

Celem webmastera (Webmaster - redaktor strony internetowej, osoba zajmującą się projektowaniem, kodowaniem, szatą graficzną oraz aktualizacją witryny internetowej.) jest napisanie strony wyglądającej praktycznie identycznie w różnych przeglądarkach i systemach operacyjnych

Podstawowa struktura HTML

<html> <head> <title>Moja pierwsza strona!</title> </head> <body> Hello world! </body> </html>

Sekcja <head>

W "głowie" strony www przechowujemy przeróżne informacje o konfiguracji strony www wykonanej w HTML.

To co umieścimy w sekcji <head> zazwyczaj nie będzie wyświetlane bezpośrednio na stronie, lecz w jakiś sposób określało jej konfigurację. Najczęściej spotykane tagi w tej sekcji:

  • Tytuł strony (<title>),
  • Ustawienie kodowania znaków, informacje o autorze strony, języku strony (<meta>),
  • Skrypty wykorzystane na stronie (<script>),

Sekcja <body>

W "ciele" strony www przechowujemy informacje bezpośrednio wyświetlane na stronie. Tekst można bezpośrednio umieścić w kodzie, bez dodatkowych oznaczeń.

W samym tagu <body> można podać atrybuty opisujące np. tło strony, kolor hiperłączy (linków) czy domyślny kolor wstawionego tekstu.

<body bgcolor="#FFFFFF" link="#000000" vlink="#000000" alink="#00FF00" background="tlo.jpg"> [zawartość strony] </body>

Rodzaj czcionki, kolory

Język HTML umożliwia edycję kroju, rozmiaru i koloru czcionki:

<body> <font color="#FF0000" face="Arial,Verdana" size="3"> Czcionka w kroju Arial (a jeśli nie będzie w systemie czcionki Arial to w kroju Verdana), w kolorze czerwonym i o rozmiarze nr 3 </font> </body>

Kolor może być zdefiniowany jest na kilka sposobów:

● szesnastkowo: #RRGGBB – np. #FFFFFF ● słownie: red, blue, magenta

Znaczniki formatowania stylu czcionki

Najczęściej używane znaczniki stylu czcionki:

● Pogrubienie tekstu (<b></b> albo <strong></strong>), ● Pochylenie tekstu (<i></i>), ● Podkreślenie tekstu (<u></u>), ● Styl "duży tekst" (<big></big>), ● Styl "mały tekst" (<small></small>) ● Tekst przekreślony (<del></del>),

Hiperłącze (link) do innej strony

Link do innej strony www (zazwyczaj podstrony) zdefiniujemy następująco:

<body> <a href="podstrona.html" title="Podpowiedź po najechaniu kursorem" target="_blank">Tekst który stanowi link</a> </body>

Atrybut href określa adres pliku, do którego mamy trafić z aktualnego dokumentu, title zawiera podpowiedź, jaką ujrzymy po najechaniu kursorem na link, zaś ustawienie target="_blank" spowoduje otwarcie strony w nowej karcie (oknie) przeglądarki. Aby strona wczytała się w tym samym oknie (zastępując obecną stronę) należy usunąć ten atrybut.

Kolory linków można określić w sekcji body ("vlink" to skrót od "visited link", "alink" to skrót od "active link"):

<body bgcolor="#FFFFFF" link="#000000" vlink="#000000" alink="#00FF00" background="tlo.jpg">

Grafika na stronie

Pamiętaj aby odpowiednio dobrać rodzaj pliku graficznego (zwłaszcza ze względu na rozmiar pliku i stopień kompresji). Grafikę wstawiamy w następujący sposób:

<body> <img src="obraz.jpg" width="100" height="100"> </body>

Atrybut src oznacza źródło (source) pliku, czyli tak naprawdę ścieżkę do grafiki na serwerze, width i height to szerokość i wysokość grafiki na stronie (jeśli nie będzie zgadzała się z pierwotnymi wymiarami obrazu, to zostanie on przeskalowany nawet kosztem utraty jakości lub proporcji).

Jeśli wymiary obrazu nie zostaną podane, przeglądarka założy oryginalny rozmiar grafiki (pobrany z pliku). Jeśli obraz ma służy jako hiperłącze, trzeba dodać atrybut border="0", inaczej w niektórych przeglądarkach pojawi się obramowanie sygnalizujące obecność linka:

<a href="podstrona.html" title="Podpowiedź"><img src="obraz.jpg" border="0"></a>

Nagłówki, przejście do nowej linii, linia pozioma, komentarze

Podobnie jak nagłówki w gazetach pozwalają sformatować tytuły akapitów w sposób czytelny i logiczny.

Oznaczamy je tagami: <h1></h1> do <h6> </h6>, np:

<h2>Tekst stanowiący nagłówek<h2>

Przejście do nowej linii (tak jakby naciśnięcie klawisza Enter):

Tekst przed "Enterem" <br /> Ten tekst już w nowej linii

Linię poziomą możemy zdefiniować następująco:

Tekst przed linią poziomą <hr /> Tekst po linii poziomej

Komentarze to informacja dla nas, programistów:

<!-- Tutaj opisuję dla siebie kod, może kiedyś tu wrócę? -->

koniec prezentacji

Dziekuje za ogladanie

mam nadzieje że komuś pomogłem i dzieki tej prezentacji bedzie tworzył lepsze strony

Kacper Miśta 7D