 |
| Autor: M. Urbaczewski, Sowa na lekcji, 2024, Licencja: CC BY-NS-SA 4.0 |
HTML (Hyper Text Mark - up Language)
- jest językiem publikowania w sieci
Definicja z Wikipedii - hipertekstowy język znaczników, wykorzystywany do tworzenia dokumentów hipertekstowych.
Język HTML jest cały czas udoskonalany. Od 1996 specyfikacje HTML rozwijane były z udziałem komercyjnych producentów oprogramowania przez organizację World Wide Web Consortium (W3C).
Łatwo znajdziecie w Internecie historię zmian HTML -u, aż do czasów obecnych.
Szkielet najprostszego dokumentu html można utworzyć w notatniku lub Notepad ++ lub innym programie.
Składnia - zasady budowania poleceń dla procesora lub programu to zasady łączenia słów, stosowanie odpowiednich reguł.
- <! DOCTYPE html>
- <html lang="pl">
- <head>
- <meta charset = "UTF-8">
- <meta name= "author" content="imię nazwisko">
- <meta name = "description"content ="Informatyka">
- <title> Nauczyciel Mentor</title>
- </head.
- <body>
- <h1 style= "font-size: 55px; color: #f00;"> To jest mój pierwszy tekst napisany w html </h1> <p>Napisałem te kilka słów w programie Notepad ++ ale możesz napisać go w notatniku. </p>
- Zmień ten drugi wers na:
- większy,
- kolor zielony,
- wyśrodkuj. - </body>
- </html>
Wyjaśnimy co zawierają poszczególne wiersze:
index.html - nazwa głównej strony serwisu
W przeglądarce internetowej będziemy testować napisany kod.
dodaj kod < a href = "https://www.gov.pl"> Załatwiaj sprawy urzędowe </a>
https://python.oeiizk.waw.pl/ - pod tym linkiem uzyskasz dużo informacji o języku Python.
Zapisz tworzony dokument (wzór powyżej) z nazwą i rozszerzeniem .html następnie uruchom go w przeglądarce i powinna już zadziałać Twoja strona. Jeżeli chcesz go modyfikować zapisz dokument z rozszerzeniem .txt
Znaczniki (tag) pełnią szczególną funkcję bez nich nic by nie działało. Atrybuty znaczników informują przeglądarkę o sposobie wyświetlania strony. Znaczniki nie interpretują wielkości liter.
To znacznik < otwierający> a ten </zamykający>
<p> znacznik akapitu;
<hr> wstawia linię poziomą;
<picture> dopasowuje obrazy do strony;
<source> wyświetlanie obrazów w kolejności;
- atrybut media - minimalna szerokość przeglądarki;
- atrybut srcset - źródło obrazka;
- atrybut src - ścieżka dostępu;
- atrybut alt - tekst alternatywny;
Przykład:
<picture>
<source media= "...itd.
<soure media="...itd.
<img src="...itd.
</picture>
koniec przykładu
Wyjątki, gdzie nie trzeba stosować znaczników zamykających, to np.;
<br> znacznik nowego wiersza;
<hr> dodanie linii poziomej;
<img> grafika;
umieścimy grafikę na stronie: podajemy atrybut src i ścieżkę dostępu (adresowanie) do pliku
np.: <img src="zdjecie1.jpg"> ścieżka względna a ścieżka bezwzględna to np.: C:/Users/ Obrazy/zdjęcie.jpg
width i height - rozmiar obrazu w pikselach
np.: <img src='zdjecie.jpg" alt="nasza klasa" width="350"height="450">
co wiemy:
HEAD (Opis strony) - tytuł wyświetla się na pasku przeglądarki, pozostały kod pozostaje w ukryciu.
Podstawowe znaczniki w Head to <meta> i <title>.
<meta> - odpowiada za metadane;
<title> odpowiada za tytuł.
BODY (zawartość strony) - zawartość strony: tekst, zdjęcia, tabele, linki, filmy.
TŁO
Jeżeli chcemy, aby strona miała tło o kolorze czarnym, użyjemy polecenia < body bgcolor="black"> a może biały (white lub #FFFFFF - wartość szesnastkowa).
Podzielmy akapit za pomocą znacznika <br> żeby nie był taki długi i zwiększymy czcionkę <font size="6"> - do dzieła.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Informatyka">
<title>Nauczyciel Mentor</title>
</head>
<body bgcolor="black">
<font color="#FFFFFF">
Strona z kolorami - kliknij i sprawdzi.
<font size="6"> Informatyka jest bardzo ciekawą dziedziną nauki.
<br> Informatyka rozwija bardzo szybko, jak żadna inna nauka. <br>
Tytuł możesz zapisać znacznikami od <h1> do <h6> pamiętaj o zamykającym znaczniku.
Ćwiczenie:
Wiecie, że procesor RAD 750 składa się z 11 milionów tranzystorów (technologia 0,25 mikrona) <br> i wykonuje 240 mln instrukcji na sekundę. <br>Uf, brawo.
</font>
</body>
</html>
Sprawdziliście, działa? Teraz już sami, kreatywnie. Życzę miłej pracy.
Jak zapisać?
Jeżeli używasz Notatnika lub Notepada++ dla swojego pierwszego kodu, kliknij Plik potem Zapisz jako następnie Nazwa pliku, nadaj nazwę usuń domyślne rozszerzenie *txt (w Notatniku) a dopisz rozszerzenie .html
Zapisz w wybranym/ utworzonym folderze i uruchom stronę w przeglądarce a właściwe jak klikniesz na ikonkę pliku sama się otworzy.
Żeby modyfikować stronę, plik musisz zapisać ( Notatnik/Notepad++) z rozszerzeniem .txt