Tworzenie strony internetowej

Jest dokumentem komputerowym zapisanym w pliku z rozszerzeniem htm lub html. Jest to plik tekstowy, w którym umieszcza się specjalne znaczniki języka HTML.

Inne elementy strony, takie jak grafika, dźwięki, filmy, są zapisane w oddzielnych plikach.

​

​HTML (ang. HyperText Markup Language) – hipertekstowy język znaczników, wykorzystywany do tworzenia dokumentów hipertekstowych.

​

1. edytory plików tekstowych np. Notatnik,

2. edytory plików tekstowych kolorujące znaczniki języka HTML np. Notepad++,

3. edytory tekstu pozwalające na tworzenie strony bez znajomości języka HTML(w oknie edytora widzimy stronę tak, jak będzie wyglądać w przeglądarce) oraz umożliwiające zapis dokumentu w formacie HTML;

​Narzędziem umożliwiającym szybkie i łatwe utworzenie strony internetowej(nawet rozbudowanej) przeznaczonym dla użytkowników, którzy nie mają szczegółowej wiedzy technicznej, są systemy zarządzania treścią(CMS- Content Management System) np. WordPress , Joomla, Drupal.

• <html>

• <head>

  (nagłówek dokumentu)

  </head>

• <body>

  (część główna dokumentu)

  </body>

• </html>

Przykład:

<head>

<title>Tytuł strony</title>

<meta name="author" content="Imię Nazwisko"/>

<meta name="description" content="Opis strony"/>

<meta name="keywords" content="słowa kluczowe " />

<link rel="stylesheet" href="style.css" type="text/css"/>

<script type="text/javascript" src="skrypt.js"> </script>

</head>

​Dokument HTML składa się z dwóch części: nagłówka HEAD i części głównej BODY. Nagłówek zawarty jest pomiędzy <head> ... </head> i zawiera ogólne informacje o dokumencie, takie jak tytuł, metainformacje. W części nagłówkowej można również umieszczać kod Javascript za pomocą tagu <script>.

​Znaczniki to ciągi znaków zapisane w nawiasach kątowych.

-Można je zapisywać małymi lub wielkimi literami

-Występują zwykle parami: znacznik otwierający i zamykający

-Nie wszystkie znaczniki mają znacznik zamykający - nie posiada go np. <br> - przejście do nowego wiersza.

​ <br> - enter

• <hr> - linia pozioma

• <h1> ...</h1> - nagłówek pierwszego poziomu

• <h2> ...</h2> - nagłówek drugiego poziomu

• <p> tekst akapitu </p> - akapit

• <b> tekst pogrubiony </b>

• <i> tekst pochylony </i>

​<u> tekst podkreslony </u>

• <s> tekst przekreślony </s>

• ^{indeks górny}

• _{indeks dolny}

• <a href="adres_strony">Tekst</a> - hiperłącze

• <body bgcolor="red"> - kolor tła

​<znacznikotwierajacy> tekst </znacznikzamykajacy>

Tekst zostanie wyświetlony w przeglądarce

Np.

<b> Dzień dobry </b> - w przeglądarce zostanie wyświetlony pogrubiony napis "Dzień dobry" ponieważ znacznik <b> pogrubia tekst.

​<znacznik atrybut="wartość atrybutu"> tekst </znacznik>

Np. <p align="center"> Programowanie jest fajne. </p> - Wyświetli się akapit z wyśrodkowanym tekstem

​

p - oznacza akapit

align="center" - oznacza wyrównanie do środka

​<table>

<tr>

<td> wiersz1, komórka1</td><td> wiersz1, komórka2</td>

</tr>

</table>

​<img src="nazwa_pliku">

nazwa_pliku - określa nazwę pliku z grafiką wraz z rozszerzeniem nazwy pliku lub adres internetowy pliku z grafiką(w ten sposób można na swojej stronie umieszczać obrazy z innych witryn)

np. <img src="rysunek.jpg"> na stronie WWW wyświetli się rysunek zapisany w pliku rysunek.jpg pod warunkiem, że jest on zapisany w tym samym folderze co plik HTML.

UWAGA! Znacznik <img> nie posiada w jezyku HTML znacznika zamykającego!