HTML

wstęp

Jak zapisana jest strona www?

Jakich narzędzi używamy do tworzenia stron www?

Jaka jest struktura strony HTML?

Jakie są podstawowe znaczniki HTML?

Formatowania tekstu.

Wstawiania odsyłaczy, zdjęć, list, tabel.

Struktura strony HTML

Dokument HTML jest plikiem tekstowym (z rozszerzeniem *.htm lub *.html), w którym tekst znajduje się pomiędzy znacznikami otwierającymi i zamykającymi.

Znacznik (ang. tag) składa się z nawiasów ostrych między którymi występuje nazwa znacznika np. <strong>.
Znacznik zamykający różni się od otwierającego tym, że ma dodatkowo ukośnik / (ang. slash) np. </strong>.
Przykład: <strong>tekst między znacznikami strong będzie wyróżniony pogrubieniem </strong>

Każdy dokument HTML, aby być prawidłowo zinterpretowanym przez przeglądarkę musi posiadać następującą strukturę znaczników:

<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>

Objaśnienie:

<!doctype html> informacja dla przeglądarki, że ma do czynienia z dokumentem HTML

<html> między znacznikami <html>…</html> umieszcza się całą zawartość strony

<head> element head to nagłówek strony, zawiera informacje o dokumencie: np. tytuł, kodowanie, opis dla wyszukiwarek, słowa kluczowe, informacje o stylach

<title> Tytuł strony widoczny w pasku przeglądarki</title>

</head>

<body> w elemencie body zawarte są wszystkie treści i obrazy widoczne na stronie

</body>

</html>

Znaczniki HTML

Formatowanie tekstu

<p> </p> akapit

<br> nowy wiersz

<h1> nagłówek pierwszego poziomu (cyfry od 1 do 6)

<i> </i> czcionka pochylona

<em> </em> czcionka pochylona

<b> </b> czcionka pogrubiona

<strong> </strong> czcionka pogrubiona

<u> </u> czcionka podkreślona

<s> </s> czcionka przekreślona

<sup> </sup> indeks górny

<sub> </sub> indeks dolny

Kolor tła oraz tekstu na stronie

Kolor tła i tekstu dla strony ustalamy jednocześnie wewnątrz znacznika body dodając wyrażenie style i ustalając jego właściwość i wartość.

Przykład:

Tu jest treść strony z ustalonym tłem i kolorem tekstu

</body>

Mimo ustalenia koloru tekstu na całej stronie, możemy go zmienić miejscowo stosując:

po wybranym selektorze (znaczniku) wyrażenie style="...", a w cudzysłowiu umieścić właściwości i wartości np.

<p style="background-color: yellow; color: blue; font: 28px Arial;">Frafment tekstu</p>

po selektorze span wyrażenie style="...", a w cudzysłowiu umieścić właściwości i wartości formatowania np.

<i>Ten fragment teksu jest pochylony</i>,a to też tekst wewnątrz span.

</span>

Znacznikiem span obejmujemy fragment dokumentu (może być wiele elementów), który chcemy sformatować.

Pozioma linia

<hr> pozioma linia np. do oddzielania fragmentów tekstu. Może posiadać atrybuty:

align="........." (left, right, center - położenie lini względem środka)
size=".........." (grubość linii w pikselach)
width="........" (szerokość w pikselach lub procentowo)

Przykład: <hr size=”5” color=”#0000ff” width="80%">

Bardziej poprawnie jest określić parametry linii w css

Listy numerowane i nienumerowane

<ol> </ol> lista numerowana

<ul> </ul> lista nienumerowana

<li> </li> element listy numerowanej lub nienumerowanej

Przykład listy numerowanej:

<ol>
<li>element 1</li>
<li>element 2</li>

</ol>

Hiperłącza do innego dokumentu

<a> </a> hiperłącza tj. wyróżnione obiekty między znacznkami <a> po których kliknięciu w oknie przeglądarki wyswietlony zostanie nowy dokument
<a href="adres_obiektu_docelowego">treść hiperłącza</a>
- <a href="strona2.html">Przejdź do strony 2</a>
- <a href="https://www.nowysacz.pl" target="blank">Oficjalnastrona miasta</a>
atrybut target="nazwa_ramki" umożliwia otwarcie wskazanej strony w innym oknie (nowej karcie) przeglądarki
jeśli chcemy by w całym dokumencie linki otwierały się w nowym oknie w sekcji head należy dodać:
<Base target = „_blank”/>

Tworzenie podstrony

Na stronie głównej należy umieścić hiperłącze prowadzące do podstrony, a na podstronie − hiperłącze przenoszące z powrotem do strony głównej. Podstronę najlepiej zapisać w pliku z rozszerzeniem html w tym samym folderze, co strona główna.

Grafika na stronie

<img src="adres_i_nazwa_pliku"> znacznik nie ma postaci zamykającej

Dodatkowe atrybuty znacznika <img>

align=".............." atrybut określa położenie rysunku względem strony; możliwe wartości: left, right, center
alt="..........." określa tekst pokazywany, gdy niemożliwe jest wyświetlenie obrazu
width="..............." określa szerokość rysunku np. 600
height=".............." określa wysokość rysunku np. 400

Tabele

składają się z wierszy a wiersze z komórek
<table> </table> znaczniki określające ogólne ramy/granice tabeli
<tr> </tr> wiersz tabeli
<td> </td> komórka w wierszu tabeli
<th> </th> komórka nagłówkowa (tekst pogrubiony, zwykle na środku)

</table>

Dodatkowe atrybuty określające sposób wyświetlania tabeli:

Znacznik <table>

align=".............." atrybut określa położenie tabeli względem strony; możliwe wartości: left, right, center
width="..............." określa szerokość tabeli w pikselach lub procentowo względem strony
border=".............." określa grubość obramowania tabeli i komórek tabeli
cellspacing=".........." określa odstęp (piksele) między komórkami tabeli
cellpadding=".........." określa odstęp (piksele) między komórkami tabeli a zawartością komórek

</table>

Ćwiczenie 1: Tworzymy stronę internetową o swojej miejscowości.

utwórz folder o nazwie www_sacz, w którym zapiszesz swoją stronę
uruchom program Notepad++ i przepisz kod strony podany na poniższym rysunku
wyjaśnij znaczenie znaczników umieszczonych w kodzie,
zapisz kod strony w pliku o nazwie index.html
- z listy opcji wybieramy pozycję Zapisz
- wybieramy lokalizację dla tworzonego pliku i nadajemy mu nazwę: index (lub index.html, gdzie .html stanowi rozszerzenie pliku wskazujące na jego typ).
- w polu Zapisz jako typ wybieramy z rozwijanej listy pozycję Hyper Text Markup Language (lub All types - Wszystkie pliki)
- klikamy u dołu na przycisk Zapisz
otwórz zapisay plik w przeglądarce internetowej

Ćwiczenie 2: Dodajemy do strony listę i poziomą linię.

Otwórz plik index.html zapisany w folderze www_sacz
dodaj do strony listę nieuporządkowaną, zawierającą wykaz obiektów, które warto zobaczyć będąc w centrum miasta np. Ratusz, Bazylika kolegiacka, Budynek Sokoła, Zamek Królewski, Muzeum Okręgowe
zamień listę nieuporządkowaną na uporządkowaną i zadecyduj, która lepiej wygląda na stronie
Oddziel listę od tekstu ze wcześniejszego ćwiczenia linią poziomą o szerokości 70% strony
zapisz plik pod tą samą nazwą

Ćwiczenie 3: Dodajemy do strony tabelę.

Otwórz plik index.html zapisany w folderze www_sacz
dodaj pod listą w nowym akapcie napis: Władze miasta, a pod nim tabelę, zawierającą informację o osobach stojących na czele twojej miejscowości.
- Komórki pierwszego wiersza: Imię i nazwisko, funkcja
- Komórki drugiego wiersza: Ludomir Handzel, prezydent
- w komórkach kolejnych wierszy wypisz jak wyżej zastępców prezydenta
zapisz plik pod tą samą nazwą

Ćwiczenie 4: Dodajemy do strony odnośniki

Otwórz plik index.html zapisany w folderze www_sacz
dodaj do strony pod tabelą link do oficjalnej strony miasta otwierający się po kliknięciu w napis: Więcej informacji na oficjalnej stronie miasta
<p> Więcej informacji na <a href="http://www.nowysacz.pl">stronie miasta</a> </p>
dodaj do dwóch elementów listy (obiekty warte zobaczenia w centrum), linki do informacji o tych obiektach
zapisz plik pod tą samą nazwą

Ćwiczenie 5: Wstawianie zdjęcia/grafiki

Otwórz plik index.html zapisany w folderze www_sacz
dodaj na koniec strony, na środku zdjęcie, jednego z rozpoznawalnych sądeckich obiektów
- zdjęcie pobierz z internetu i zapisz je w folderze www_sacz
- przykładowy kod źródłowy do wstawienia <img src="ratusz.jpg">
- zapisz plik pod tą samą nazwą

Ćwiczenie 6: Zmieniamy kolor tekstu i tła

Otwórz plik index.html zapisany w folderze www_sacz
Zmień kolor tekstu w pierwszym akapicie strony
<font color="wpisz_kolor">...</font>
Jeśli dla znacznika <body> użyjemy dodatkowych wartości atrybutu (np. bgcolor="#CCCCFF") to zmieni się kolor tła całej strony:
<body bgcolor="wpisz_kolor">

Ćwiczenie 7: Tworzymy podstronę

Utwórz podstronę do strony o Nowym Sączu. Na podstronie zamieść podstawowe informacje o Beskidzie Sądeckim.

Na stronie głównej należy umieścić hiperłącze prowadzące do podstrony, a na podstronie − hiperłącze przenoszące z powrotem do strony głównej. Podstronę (np. beskid.html) najlepiej zapisać w pliku z rozszerzeniem html w tym samym folderze, co strona główna.

Report abuse