Hypertext Markup Language


HTML nie jest językiem programowania.
(ale całą stronę już z niego złożymy)
Jest to hipertekstowy język znaczników,
wykorzystywany do tworzenia dokumentów
hipertekstowych.

Czyli inaczej:

Jest to kod używany do tworzenia struktury strony
i jej zawartości.

Zapisuje się go w formacie .html

 

PODSTAWOWA STRUKTURA STRONY

	<!DOCTYPE html>
	<html>
 	<head>
	<title>"Tytuł naszej strony"</title>"
	<meta charset="utf-8">
 	</head>
	<body>
	Moja pierwsza strona
	</body>
	</html>

<!DOCTYPE html> deklaracja dokumentu - informacja dla przeglądarki jaki typ dokumentu ma odczytać

<html> </html> początek/koniec strony

<head> </head> początek/koniec nagłówka (rzeczy zapisane tam nie są widoczne na stronie)

<title> </title> początek/koniec tytułu strony [zapisane w sekcji head]

<meta charset="utf-8"> deklaracja znaków - informacja dla przeglądarki o używaniu polskich liter [zapisane w sekcji head]

<body> </body> początek/koniec zawartości strony (tego co widzimy)

 

PRZYKŁADOWA STRONA Z OPISEM

	<!DOCTYPE html>
<html>
<head>
	<title>Pierwszy komputer</title> <!--tytuł strony widoczny na zakładce-->
	<meta charset="utf-8"> <!--deklaracja o polskich znakach-->
</head>
<body>
	<body bgcolor="#AFB4BF"> <!--kolor tła strony-->
	<font face="arial"> <!--rodzaj czcionki-->
	<table align="center" bgcolor="#E4E4E4" border="10" cellpadding="43" width="500"> <!--tabela: umiejscowienie, kolor tła, szerokość obramowania tabeli, marginesy komórek, szerokość tabeli-->
		<tr> <!--dodawanie wiersza w tabeli-->
			<td valign="baseline"> <!--wyrównanie w pionie (tabela)-->
				<center> <!--zapisywanie tekstu na środku-->					
					<h1>ENIAC</h1><i><font color="#747474"></font></i> <!--nagłówek h1(najważniejszy, największy), "i" to czcionka pochylona, "font color" zmienia kolor tekstu-->			
					<p><i><font color="#747474">czyli o pierwszym komputerze</font></i></p> <!-- "p" to paragraf (akapit)-->
					<h2><font color="#6E0000">Electronic Numerical Integrator And Computer</font></h2> <!--nagłówek h2(mniej ważny od nagłówka h1)-->					
					<p><font color="#747474">został zaprojektowany w 1945 roku, przez J.P. Eckerta i J.W. Mauchly'ego z University of Pennsylvania's 
                                        Moore School of Electical Engineering.</font></p>
					<p><font color="#747474">Pracował on z olbrzymim taktowaniem - aż 0,1 MHz, za co odpowiadało ponad 70 tysięcy rezystorów,
                                        10 tysięcy kondensatorów, 1 500 przekaźników, 6 tysięcy ręcznych przełączników oraz 5 mln połączeń lutowanych.<br> <!--"br" to przejście do następnej linii-->
					To wszystko za jedyne 6 mln dolarów!</font></p>
					<img src="C:/Users/marty/OneDrive/Pulpit/przyklad%20do%20strony/eniac.jpg"  alt="ENIAC" height="350" width="450"> <!--dodawanie zdjęcia: opis (niewidoczny na stronie), wysokość zdjęcia, szerokość zdjęcia-->
					<ul type="square"> <!--lista nieuporządkowana (bez numeracji): symbol-->  
						<li> <!--pierwszy punkt-->
							<a href="https://pl.wikipedia.org/wiki/ENIAC">Więcej na temat komputera!</a> <!-- odnośnik (link) do strony, widoczny opis odnośnika-->
						</li> <!--zamknięcie pierwszego punktu, itd.-->
						<li>
							<a href="https://pl.wikipedia.org/wiki/John_Presper_Eckert">John Presper Eckert</a>
						</li>
						<li>
							<a href="https://pl.wikipedia.org/wiki/John_W._Mauchly">John William Mauchly</a>
						</li>
					</ul> <!--zamknięcie listy-->
				</center> <!--zamknięcie zapisywania tekstu na środku strony-->
			</td> <!--zamknięcie wyrównania tabeli w pionie-->
		</tr> <!--zamknięcie wiersza w tabeli-->
	</table> <!--zamknięcie tabeli-->
	</font> <!--zamknięcie ustawienia czcionki-->
</body> <!--zamknięcie koloru tła strony-->
</body> <!--zamknięcie zawartości strony-->
</html> <!--zamknięcie strony-->

Aby samemu uruchomić stronę, wystarczy skopiować kod
do wybranego dokumentu tekstowego (np.: Notatnik), zapisać w formacie .html,
a następnie uruchomić przez przeglądarkę. Tu pobierz zdjęcie do strony.

Po wykonaniu wszystkich czynności poprawnie, powinniśmy zobaczyć to:

strona html