- Szczegóły
- Odsłony: 7927
CO TO JEST HTML?
HTML - HyperText Markup Language - jest to kod używany do tworzenia struktury strony i jej zawartości. Na przykład treść może być uporządkowana w obrębie zestawu akapitów, listy punktowanych punktów lub tabel obrazów i danych.
STRUKTURA STRONY WWW
<HTML> - początek strony
<HEAD> - początek nagłówka
<TITLE>Tytuł strony</TITLE>
</HEAD> - koniec nagłówka
<BODY>
zawartość strony internetowej
</BODY>
</HTML> - Koniec strony
Podstawy HTML - ćwiczenia
(w kolorze zaznaczyłem polecenie oraz kod HTML (znacznki), który to wykonuje)
UWAGA!
Kolor czcionki lub tła może być podawany imiennie (np. red, green, black, white) lub za pomocą wartości heksadecymalnych (szesnastkowych), #FF0000, #008000, #000000, #FFFFFF.
KODOWANIE POLSKICH ZNAKÓW!!!
<HTML>
<HEAD>
<meta charset="UTF-8">
<TITLE>Moja pierwsza strona internetowa</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Ćwiczenie 1.
Aby wprowadzić tytuł strony używamy znaczników: HEAD i TITLE. Sekcja BODY zawiera natomiast właściwą treść strony.
<HTML>
<HEAD>
<meta charset="UTF-8">
<TITLE>Moja pierwsza strona internetowa</TITLE>
</HEAD>
<BODY>
Witam Cię na mojej stronie internetowej.
</BODY>
</HTML>
Ćwiczenie 2
Jeśli chcesz ustawić tło strony np. czerwone
<HTML>
<HEAD>
<meta charset="UTF-8">
<TITLE>Moja pierwsza strona internetowa</TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFF00”> lub <BODY BGCOLOR=”red”>
Witam Cię na mojej stronie internetowej.
</BODY>
</HTML>
Ćwiczenie 3
Jeśli chcesz zmienić kolor czcionki użyj polecenia <FONT COLOR=”...”>
<HTML>
<HEAD>
<meta charset="UTF-8">
<TITLE>Moja pierwsza strona internetowa</TITLE>
</HEAD>
<BODY>
<FONT COLOR=”#159BD4”> - można również wpisać nazwę koloru tz. <font color="red">
Witam Cię na mojej stronie internetowej.
</FONT>
</BODY>
</HTML>
Ćwiczenie 4
Chcesz zmienić krój czcionki np.:
czcionka pogrubiona <B>...</B>
kursywa <I>...</I>
tekst przekreślony <STRIKE>...</STRIKE>
tekst podkreślony <U>...</U>
<HTML>
<HEAD>
<meta charset="UTF-8">
<TITLE>Moja pierwsza strona internetowa</TITLE>
</HEAD>
<BODY>
<FONT COLOR=”#000000”>
Witam Cię na <B><u><i>mojej</i></u></B>stronie internetowej - słowo mojej zostanie pogrubione, podkreślone i pochylone
</FONT>
</BODY>
</HTML>
Ćwiczenie 5
Aby poprawnie podzielić wiersze, należy użyć polecenia łamiącego:<BR>.
<HTML>
<HEAD>
<meta charset="UTF-8">
<TITLE>Moja pierwsza strona internetowa</TITLE>
</HEAD>
<BODY>
<FONT COLOR=”#000000”>
Witam Cię na <B>mojej </B>stronie internetowej.</BR> - przejście do nowej linii
Najpierw kilka słów o mnie.</BR>
</FONT>
</BODY>
Ćwiczenie 6
Aby określić odstęp między akapitami stosujemy polecenie </p>.
<HTML>
<HEAD>
<meta charset="UTF-8">
<TITLE>Moja pierwsza strona internetowa</TITLE>
</HEAD>
<BODY BGCOLOR=”#FCE503”>
<FONT COLOR=”#000000”>
<P>Szanowyn Internauto!</P> - przechodzi do nowej linii i wstawia odstęp
Witam Cię na <B>mojej </B>stronie internetowej.<BR>
Najpierw kilka słów o mnie.</BR>
</FONT>
</BODY>
</HTML>
Ćwiczenie 7
Jeśli chcemy zmienić wielkość liter stosujemy polecenie <FONT SIZE=”n” >, gdzie n jest liczbą do 1 do 7. Domyślną wartością jest 3. Można również użyć znaczników <BIG> lub <SMALL> przed tekstem, który ma być odpowiednio większy lub mniejszy.
<HTML>
<HEAD>
<meta charset="UTF-8">
<TITLE>Moja pierwsza strona internetowa</TITLE>
</HEAD>
<BODY>
<FONT COLOR=”#159BD4”>
<P>Kochany Internauto!</P>
Witam Cię na <B>mojej </B>stronie internetowej.
</FONT>
<BR>
Najpierw kilka słów o
<FONT SIZE="+7">
mnie.
</FONT>
</BR>
</BODY>
</HTML>
Ćwiczenie 8
Jeśli chcesz umieścić tekst przesunięty w prawo w stosunku do tekstu podstawowego
zastosuj polecenie preformatowania <PRE>. Preformatowany tekst pozwala Ci zachować oryginalne łamanie linii i spacje wstawione do tekstu.
<HTML>
<HEAD>
<meta charset="UTF-8">
<TITLE>Moja pierwsza strona internetowa</TITLE>
</HEAD>
<BODY>
<FONT COLOR=”#159BD4”>
<P>Kochany Internauto!</P>
Witam Cię na <B>mojej </B>stronie internetowej.
<BR>Najpierw kilka słów o <FONT SIZE=7>mnie.</FONT></BR>
<PRE>
Uczeń klasy szóstej
Jaś Kowalski.
</PRE>
</FONT>
</BODY>
</HTML>
Ćwiczenie 9
Jeśli chcesz wyśrodkować tekst zastosuj polecenie <CENTER></CENTER>.
<HTML>
<HEAD>
<meta charset="UTF-8">
<TITLE>Moja pierwsza strona internetowa</TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFF00”>
<FONT COLOR=”#159BD4”>
<P>Kochany Internauto!</P>
Witam Cię na <B>mojej </B>stronie internetowej.
</font>
<BR>
Najpierw kilka słów o
<FONT SIZE=7>
mnie.
</FONT>
</BR>
<CENTER>
TAK WYGLĄDAŁEM ROK TEMU
</CENTER>
</BODY>
</HTML>
Aby Twoja strona wyglądała atrakcyjnie warto umieścić na niej różnego rodzaju grafiki. Jest kilka źródeł pozyskiwania elementów graficznych:
- samodzielnie utworzone obrazki
- fotografie skanowane
- obrazki "podkradane" z sieci
- pobieranie zdjęć z darowych stron internetowych np. pixabay.com
Przestrzegam Cię przed skanowaniem, ściąganiem obrazków będących czyjąś własnością. Prawa autorskie są bardzo surowe i możesz napytać sobie biedy.
Ćwiczenie 10
Jeśli chcesz umieścić na stronie WWW zdjęcie lub rysunek użyj polecenia
<IMG SRC=”nazwa.roszerzenie”> np. <IMG SRC=”toja.jpg”> lub <IMG SRC=”gory.gif” > lub <IMG SRC=”zbroja.png”>
Aby zmienić rozmiar wstawionego zdjęcia należy użyć polecenia - width="podaj wielkość" hight="podaj wielkość" - np. width="250" hight="200"
<HTML>
<HEAD>
<meta charset="UTF-8">
<TITLE>Moja pierwsza strona internetowa</TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFF00”>
<FONT COLOR=”#159BD4”>
<P>Kochany Internauto!</P>
</font>
Witam Cię na <B>mojej </B>stronie internetowej.
<BR>Najpierw kilka słów o <FONT SIZE=7>mnie.</FONT></BR>
<CENTER>
TAK WYGLĄDAŁEM ROK TEMU
</CENTER>
<BR>
<IMG SRC=”toja.jpg” width="250" hight="200">
</BODY>
Ćwiczenie 11
Bardzo użytecznym poleceniem jest linia pozioma <HR>. Umieszczone w dowolnym miejscu dokumentu spowoduje narysowanie poziomej linii rozciągającej się między bocznymi krawędziami okienka.
Można wykorzystać atrybut koloru i grubości linii - <hr size="+3" color="red">
<HTML>
<HEAD>
<meta charset="UTF-8">
<BODY>
<FONT COLOR=”#159BD4”>
<P>Kochany Internauto!</P>
Witam Cię na <B>mojej </B>stronie internetowej.
<hr size="+3" color="red">
<BR>Najpierw kilka słów o
<FONT SIZE=7>
mnie.
</FONT>
</BR>
<CENTER>
TAK WYGLĄDAŁEM ROK TEMU
</CENTER>
<BR>
<IMG SRC=”hip.jpg”>
<HR>
</BODY>
</HTML>
Ćwiczenie 12
Przygotuj trzy napisy w nagłówku poziomu 1, 2, 3.
Nagłówek wstawiamy za pomocą znaczników:
<h1>treść</h1>
<h2>treść</h2>
<h3>treść</h3>
<h4>treść</h4>
<h5>treść</h5>
<h6>treść</h6>
<HTML>
<HEAD>
<BODY>
<FONT COLOR=”#159BD4”>
<P>Kochany Internauto!</P>
Witam Cię na <B>mojej </B>stronie internetowej.
<hr size="+3" color="red">
<BR>Najpierw kilka słów o <FONT SIZE=7>mnie.</FONT></BR>
<CENTER>TAK WYGLĄDAŁEM ROK TEMU</CENTER>
<BR><IMG SRC=”hip.jpg”>
<HR>
</FONT>
<h1>PIERWSZY NAPIS</H1>
<h2>DRUGI NAPIS</H2>
<h3>TRZECI NAPIS</H3>
</BODY>
</HTML>
Ćwiczenie 13
Zmiana koloru hiperłączy
- link - standardowy kolor odsyłaczy które nie zostały jeszcze odwiedzone
- vlink (visited link) - kolor odsyłaczy które zostały przynajmniej raz odwiedzone
- alink (active link) - kolor aktywnego odsyłacza, czyli odsyłacza w trakcie ładowania dowiązanego do niego dokumentu.
<HTML>
<HEAD>
<meta charset="UTF-8">
<TITLE>Moja pierwsza strona internetowa</TITLE>
</HEAD>
<BODY bgcolor="yellow" link="yellow" vlink="green" alink="red">
</BODY>
</HTML>
POLECEŃ, Z KTÓRYMI SIĘ ZAPOZNAŁEŚ
Polecenie otwierające Polecenie zamykające Znaczenie
<BODY> </BODY> Tekst podstawowy
<BODY bgcolor="red"> </BODY> Kolor tła strony
<BR> brak Podział wiersza
<HEAD> </HEAD> Informacje formatujące strony
<HR> brak Linia pozioma
<HR color="red"> brak Linia pozioma kolor
<HTML> </HTML> Definiuje plik w formacie Web
<P> brak Odstępy między akapitami
<PRE> </PRE> Informacje preformatowania
<TITLE> </TITLE> Tytuł strony
<B> </B> Tekst pogrubiony
<U> </U> Tekst podkreślony
<I> </I> Tekst pochyły (kursywa)
<FONT size="+5"> </FONT> Rozmiar czcionki
<FONT color="red"> </FONT> kolor czcionki
<CENTER> </CENTER> Centrowanie obrazków i tekstu
<IMG SRC="nazwa.rozszerzenie"> brak wstawia grafikę na stronę
<H1> </H1> Nagłówek poziomu pierwszego
<H2> </H2> Nagłówek poziomu drugiego
do...<H6> </H6> Nagłówek poziomu szóstego
Odsyłacze (hiperłącza, łącza hipertekstowe, odnośniki, linki) są chyba najbardziej charakterystycznym elementem dokumentów html. Bez odsyłaczy nie istniałyby powiązania między dokumentami na tym samym serwerze, w tym samym mieście, kraju czy kontynencie. Dzięki odsyłaczom można wiązać ze sobą poszczególne strony.
Odsyłacz jest niczym innym, jak wskazaniem jakiegoś innego miejsca. Kliknięcie na takim wskazaniu przenosi użytkownika do docelowego miejsca, przy czym może to być z powodzeniem miejsce na tej samej stronie, inna strona w ramach tego samego projektu, czy strona na drugim końcu świata.
Jak się tworzy odsyłacze do poszczególnych elemetów:
<A HREF="miejsce_docelowe">Tekst, na którym należy kliknąć</A>
Do jakich miejsc możemy się odwoływać?
PRZYKŁADY
1. Do adresu internetowego:
<A HREF="http://www.wp.pl”>Wirtulana PolskaT</A> - odsyłacz (link) przeniesie nas na stronę Wirtualnej Polski
<A HREF="http://www.sp2.slupsk.pl”>Szkoła Podstawowa nr 2 w Słupsku</A> - odsyłacz (link) przeniesie nas na stronę szkoły
2. Odsyłacz do innej strony HTML (w tym samym katalogu):
<A HREF="wycieczka.html">Opis wycieczki</A> - otworzy się strona o nazwie wycieczka.html
3. Odsyłacz do pliku tekstowego TXT - <A HREF="plik_tekstowy.txt">Plik tekstowy TXT</A>
4. Odsyłacz do pliku graficznego GIF - <A HREF="plik_graficzny.gif">Plik graficzny GIF</A>
