- Szczegóły
- Odsłony: 3243
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.
Ćwiczenie 1.
Aby wprowadzić tytuł strony używamy znaczników: HEAD i TITLE. Sekcja BODY zawiera natomiast właściwą treść strony.
<HTML>
<HEAD>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
</FONT>
</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>
<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>
<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.
<BR>Najpierw kilka słów o <FONT SIZE=7>mnie.</FONT></BR>
<CENTER>
TAK WYGLĄDAŁEM ROK TEMU
</CENTER>
</FONT>
</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>
<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.
<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">
</FONT>
</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>
<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>
</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>
PODSUMOWANIE 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
