HTML

Struktura Kodu HTML

Szkielet

<html>
<head>
<title>Moja Strona</title>
</head>

<body> 

</body>

</html>

Opis

<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>


Linki

<body bgcolor=”pink”>

<font size=”7″> Tekst będzie dużego rozmiaru

Ważne aby nazwa linku zaczynała się od http://      !!!!

<a href=”http://www.google.pl”>Google</a> <br>  Przekieruje nas do strony google
<a href=”http://www.youtube.pl”>Youtube</a> <br>
<a href=”http://www.psppnw.pl”>Szkoła</a> <br>
<a href=”http://www.faceboobk.pl”>Facebook</a> <br>FOlder strona

Jeśli nasza inna strona znajduje się w tym samym folderze możemy ją uruchomić za pomocą linka:

<a href=”lekcja.html”>Link do podstorny</a> <br>

</font>
</body>

Efekt:

Linki Lukasz Jurek

 


Wyświetlanie Grafiki

HTML by Łukasz wyświetlanie grafiki

Pamiętaj że w tym przypadku obraz musi być zapisany w tym samym folderze co plik źródłowy .HTML

Bardzo ważne jest abyś dobrze odczytał rozszerzenie pliku! .jpg, .png, .gif itp.


 

Ściąga:

<a href=”adres”></a> – przekierowuje do innej strony

<font></font> – edycja tekstu

<body bgcolor=”pink”> – zmienia kolor tła, pink na różowy

size=”7″ – rozmiar tekstu

color=”red” lub „#40032” – kolor tekstu

<img src=”ścieżka dostępu”> – wstawia obrazek na stronę