03-04. Pierwsze kroki w HTML (tworzenie strony www w języku HTML)

Po tej lekcji:
- znał podstawowe pojęcia dotyczące języka HTML
- znał budowę strony internetowej
- znał składnie języka HTML
- znał konstrukcję stron internetowych

 

Podstawowe pojęcia:

  • HTML – (HyperText Markup Language) zestaw znaczników z atrybutami, za pomocą którego definiowane są elementy strony internetowej, które pozwalają prawidłowo prezentować tekst, table, obrazy i multimedia w przeglądarce internetowej. Obecnie obowiązuje HTML w wersji 5.
  • Znacznik – element języka HTML umieszczony w selektorze znacznika „<” i „>”, który informuje przeglądarkę o elemencie wyświetlanym na stronie internetowej. Znacznik rozpoczyna się tzw. znacznikiem otwierającym <nazwa znacznika>, a kończy znacznikiem zamykającym </nazwa znacznika>/
  • Atrybuty – parametr znacznika określający szczegółowe formatowanie elementu na stronie internetowej.
  • Arkusz stylów CSS – zestaw zdefiniowanych znaczników i atrybutów pozwalający odpowiednio sformatować wygląd fragmentów strony (tekstu, obrazu, multimediów) w przeglądarce internetowej.
  • Strona internetowa – dokument pobrany z internetu i prezentowany w przeglądarce internetowej.
  • Hyperłącze – element strony internetowej, po wybraniu którego automatycznie przełączana jest strona internetowa znajdująca się pod innym adresem.

 

Budowa strony internetowej

Element strony

Opis

Znaczniki

Definicja dokumentu - początek:

 

<HTML>

NAGŁÓWEK

– początek dokumentu definiujący parametry całej strony pozwalający na prawidłowe jej wyświetlanie w przeglądarce. Te elementy nie są wyswietlane w przeglądarce, ale są przez nią interpretowane (przetwarzane)

Elementy, które mogą być zdefiniowane w nagłówku to:

<head>

  • format kodowania znaków – (UTF-8; windows-1250; iso-8859-2)

    • - <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />

  • opis zawartości strony

    • - <meta name="Description" content="Tu wpisz opis zawartości strony" />

  • słowa kluczowe

    • - <meta name="Keywords" content="Tu wpisz wyrazy rozdzielone przecinkami" />

  • arkusz stylów

    • <link rel="stylesheet" href="/default.css" type="text/css" media="screen" />

  • tytuł strony

    • <title>Tu wpisz tytuł strony</title>

</head>

Treść dokumentu - początek

DOKUMENT – zawartość strony internetowej widoczna w przeglądarce.

<body>

 

Podstawowe znaczniki wykorzystywane na stronie internetowej to:

 

- nagłówek poziomu 1

<h1></h1> np. <h1>przykładowy tekst</h1>

 

- paragraf

<p></p> np. <p>przykładowy tekst</p>

  • text-aling – wyrównanie tekstu np. <p style=”text-align:center”>przykładowy tekst</p>

 

- pogrubienie

<b></b> np. <b>przykładowy tekst</b>

 

- kursywa

<i></i> np. <i>przykładowy tekst</i>

 

- czcionka

<font></font> np. <font>przykładowy tekst</font>

  • size – rozmiar teksu np. <font size=”20”>przykładowy tekst</font>

  • color – kolor czcionki np. <font style=color:red”>przykładowy tekst</font>

  • face – krój czcionki np. <font style=”face:arial”>przykładowy tekst</font>

 

- wstawianie obrazu

<img>

  • src – adres do obrazka np. <img src=”adres do pliku” />

  • width – szerokość rysunku np. <img width=”100” />

  • height – wysokość rysunku np. <img height=”50” />

  • title – tytuł obrazka np. <img title=”przykładowy tekst” />

 

- hyperlink

<a></a>

  • href – adres strony np. <a href=”adres strony”>opis</a>

  •  

 

 

- formularz rozpoczęcie

<form>

  • action – zadanie formularza np.

  •  

 

- pole formularza

<input type=””>

  • text – pole tekstowe np. <input type="text" name="tekst" />

  • checkbox – pole wyboru np. <input type="checkbox" name="nazwa" value="wartość" />

  • radio – pole opcji np. <input type="radio" name="nazwa" value="wartość" />

  • submit – przycisk np. <input type="submit" value="OK" />

 

- lista rozwijalna

<select name="nazwa">

<option>Tu wpisz pierwszą możliwość</option>

<option>Tu wpisz drugą możliwość</option>

</select>

 

- formularz zakończenie

</form>

 

- rozpoczęcie tabeli

<table>

 

- wiersz tabeli - rozpoczęcie

<tr>

 

- komórka tabeli

<td></td> np. <td>przykładowy tekst</td>

 

- wiersz tabeli - zakończenie

</tr>

 

- zakończenie tabeli

</table>

Treść dokumentu – zakończenie

 

</body>

Definicja dokumentu - zakończenie:

 

</HTML>

 

Czytelność zapisu strony internetowej:

W celu przejrzystości zapisu strony internetowej zaleca się stosowanie odpowiednich wcięć przy każdym znaczniku zagłębionym w innym.

Przykład prawidłowo sformatowanej strony:

 

przykład kodu HTML

 

Wygląd strony:

 

Strony internetowe z opisem znaczników:

- http://www.poradnik-webmastera.com/polecenia/html/znaczniki/

- http://www.kurshtml.edu.pl/html/zielony.html

Joomla Templates by Joomla-Monster.com