HTML

Struktura Kodu HTML

<html>  Otwiera kod żródłowy HTML 
<head> Nagłówek strony, tekst widnienie na zakładce
<title>Moja Strona</title>
</head>

<body> Otwiera zawartość strony

</body> Zamyka zawartość strony

</html> Zamyka kod żródłowy HTML 


 

Zapisywanie kodu

Aby programować stronę wystarczy uruchomić Notatnik.

Natomiast musimy plik z notatnika zapisać z rozszerzeniem .html!!!!!

Zapisywanie pliku html

Następnie klikamy w zapisany plik i otwieramy go za pomocą Notatnika oraz odpowiedniej przeglądarki na Chrome.

Wtedy mamy podgląd na kod (Notatnika) oraz wizualizacje (Przeglądarka).


 

Edycja tekstu

<html>  Otwiera kod żródłowy HTML 
<head> Nagłówek strony, tekst widnienie na zakładce
<title>Moja Strona</title>
</head>

<body> Otwiera zawartośc strony
<font>Dziś idze na imprezę</font><br> font – edytuje tekst
<font>Znacznik SIZE zmieniał rozmiar tekstu</font><br> size – zmienia rozmiar tekstu
<font size=”1″>Tekst Tekst Tekst Tekst Tekst Tekst</font><br> br – przeskakuje do kolejnego wiersza
<font size=”2″>Tekst Tekst Tekst Tekst Tekst Tekst</font><br>
<font size=”3″>Tekst Tekst Tekst Tekst Tekst Tekst</font><br>
<font size=”4″>Tekst Tekst Tekst Tekst Tekst Tekst</font><br>
<font size=”5″>Tekst Tekst Tekst Tekst Tekst Tekst</font><br>
<font size=”6″>Tekst Tekst Tekst Tekst Tekst Tekst</font><br>
<font size=”7″>Tekst Tekst Tekst Tekst Tekst Tekst</font><br>

Efekt:

HTML tekst łukasz Jurek

<br><br>

<font>Znacznik COLOR zmieniał kolor tekstu</font><br>
<font color=”red”>Tekst Tekst Tekst Tekst Tekst Tekst</font><br>
<font color=”blue”>Tekst Tekst Tekst Tekst Tekst Tekst</font><br>
<font color=”red”>Tekst Tekst Tekst Tekst Tekst Tekst</font><br>
<font color=”red”>Tekst Tekst Tekst Tekst Tekst Tekst</font><br>
<font color=”red”>Tekst Tekst Tekst Tekst Tekst Tekst</font><br>
<font color=”red”>Tekst Tekst Tekst Tekst Tekst Tekst</font><br>
<font color=”red”>Tekst Tekst Tekst Tekst Tekst Tekst</font><br>

Efekt:

HTML tekst color łukasz Jurek

Zamiast wyrazu „red” można użyć kodu #F23030 Każdy kolor posiada swój kod.

Generator kodów można znaleść na: Klik

Zadanie 1

Napisz tekst z liter X i nadaj mu takich kolorów, aby powstała emotka o wymarach 8×8, „X” rozmiaru 7

Przykład:

I wers (linia tekstu)

<font color=”yellow” SIZE=”7″>XXXXXXXX</font><br> 8 „X” będzie koloru żółtego

II wers
<font color=”yellow” SIZE=”7″>XXXX</font> 4 „X” będą koloru żółtego, ponieważ nie ma <br> 
<font color=”BLACK” SIZE=”7″>XXXX</font><br> w tej samej linii będą następne 4 „X” czarne. 

III wers

Trzecia linijka zadania, bez br, tekst pisany jest w jednym wierszu

<font color=”yellow” SIZE=”7″>X</font> 
<font color=”BLACK” SIZE=”7″>XXX</font>
<font color=”yellow” SIZE=”7″>XXXX</font><br>

Efekt kodu

HTML emotka Łukasz Jurekk

 


Zmiana tła strony

<html>

<head>

<title>Moja Strona</title>

</head>

<body bgcolor=”pink”> Funkcja bgcolor zmienia color tła całej strony

</body>

</html>