1.  Plik strony internetowej zapisanej w języku HTML może mieć rozszerzenie .html  lub .htm

2.  Serwisy internetowe składają się z wielu powiązanych ze sobą stron internetowych. Przechodzenie pomiędzy nimi odbywa się za pomocą hiperłączy (linków).

3. Po wpisaniu adresu strony w przeglądarce internetowej szuka pliku o nazwie index.html

4. Podczas pisania strony internetowej potrzebne są edytor tekstu i przeglądarka internetowa.

5. Na lekcjach wykorzystamy darmowy program Notepad++ który po odpowiednim skonfigurowaniu ułatwia pisanie kodu m. in dzięki kolorowaniu składni języka HTML

Formatowanie tekstu w HTML

Poniżej znajdziesz najważniejsze tagi, które pozwolą Ci odpowiednio sformatować tekst:

Nagłówki

<h1>Nagłówek pierwszego rzędu</h1>

<h2>Nagłówek drugiego rzędu</h2>

<h3>Nagłówek trzeciego rzędu</h3>

Pogrubienie tekstu

<b>pogrubiony tekst</b>

pogrubiony tekst

Pochylenie tekstu

<i>pochylony tekst</i>

pochylony tekst

Podkreślenie tekstu

<u>podkreślony tekst</u>

podkreślony tekst

Przejście do następnej linii

Przykładowy tekst<br>

A tutaj fragment, który pojawi się niżej

Przykładowy tekst

A tutaj fragment, który pojawi się niżej

Wyśrodkowanie tekstu

<center>Wyśrodkowany tekst</center>

Wyśrodkowany tekst

Wzmocnienie tekstu

Na stronie najczęściej wyświetla się jako wytłuszczony tekst; korzysta się z niego, kiedy fragment jest ważny lub ma przed czymś przestrzegać.

<strong>Premiera Football Managera 2022 zaplanowana jest na 9 listopada 2021 roku.</strong> W najpopularniejszego managera piłkarskiego zagramy na PC, urządzeniach mobilnych, konsolach Xbox oraz Nintendo Switch. Gra nie trafi na PlayStation.

Premiera Football Managera 2022 zaplanowana jest na 9 listopada 2021 roku. W najpopularniejszego managera piłkarskiego zagramy na PC, urządzeniach mobilnych, konsolach Xbox oraz Nintendo Switch. Gra nie trafi na PlayStation.

Wstawianie obrazków na stronę

By wstawić obraz na stronę, użyj następującego kodu:

<img src="https://adresstrony.pl/moje-zdjecie.jpg" alt="Moje zdjęcie">

W takim tagu znajdują się dwa atrybuty: img src – adres obrazka oraz alt – tekst, jaki wyświetli się gdy z jakiegoś powodu nie uda się wczytać grafiki. Tekst alternatywny przydaje się też osobom z wadami wzroku, które korzystają ze specjalnych czytników. Dlatego trzeba zadbać o to, by opis zawierał wszystkie informacje o obrazku. Podane w przykładzie Moje zdjęcie nic nie powie czytelnikowi i warto byłoby po krótce opisać, co na tym zdjęciu się znajduje.

Wstawianie linków

Linki są jednymi z najważniejszych elementów strony. Dlatego trzeba wiedzieć, w jaki sposób wstawiać je na stronę w kodzie HTML.

<a href="https://geex.x-kom.pl">Przejdź do portalu Geex</a>

Tag z linkiem składa się z trzech elementów:

• <a> – kotwica; użyty skrót z literką a pochodzi od angielskiego słowa anchor,

• href – atrybut będący w tym przypadku linkiem,

• tekst, jaki wyświetli się na stronie zamiast linku, w tym wypadku: Przejdź do portalu Geex.

Tworzenie listy

Lista na stronie przyda się do wypunktowania ważnych informacji. W kodzie HTML możesz stworzyć listę uporządkowaną lub nieuporządkowaną. Każdy punkt może być poprzedzony cyfrą, literą lub znakiem.

Lista uporządkowana

W celu stworzenia listy uporządkowanej skorzystaj z tagu <ol>, a każda kolejna pozycja powinna rozpoczynać się od <li>. Tag bez atrybutu utworzy listę numerowaną. Jeśli zależy Ci na liście, której kolejne pozycje będą zgodne z literami alfabatu, rozpocznij ją tagiem <ol type=”a”>, a gdy mają to być cyfry rzymskie, odpowiedni będzie tag <ol type=”i”>.

<ol>

<li>pozycja pierwsza

<li>pozycja druga

<li>pozycja trzecia

</ol>

<ol type="a">

<li>pozycja pierwsza

<li>pozycja druga

<li>pozycja trzecia

</ol>

<ol type="i">

<li>pozycja pierwsza

<li>pozycja druga

<li>pozycja trzecia

</ol>

1. pozycja pierwsza

2. pozycja druga

3. pozycja trzecia

a. pozycja pierwsza

b. pozycja druga

c. pozycja trzecia

I. pozycja pierwsza

II. pozycja druga

III. pozycja trzecia

Lista nieuporządkowana

Ten typ listy przyda się, jeśli kolejność nie ma znaczenia, np. w celu wypunktowania ważnych informacji. By taką listę stworzyć, skorzystaj z tagu <ul>. Standardowo punktorem jest kropka, ale styl można zmieniać. Wtedy przyda się tag z atrybutem: <ul type=”circle”> – koło, <ul type=”square”> – kwadrat.

<ul>

<li>pierwsza pozycja</li>

<li>druga pozycja</li>

<li>trzecia pozycja</li>

</ul>

• pierwsza pozycja

• druga pozycja

• trzecia pozycja