Copyright 2021 - Custom text here
html

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>

</HTML>

 

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

</HTML>

 

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

<TITLE>Moja pierwsza strona internetowa</TITLE>

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

<TITLE>Moja pierwsza strona internetowa</TITLE>

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

 

 


k5.jpg

Karki świąteczne

  • Aleksandra Żyłkowska
    Aleksandra Żyłkowska
  • Angelika Jażewicz
    Angelika Jażewicz
  • Iwo Szostakiewicz
    Iwo Szostakiewicz
  • Julia Makar
    Julia Makar
  • Kacper Drupisz
    Kacper Drupisz
  • Kamila Gaweł
    Kamila Gaweł
  • Monika Żywiecka
    Monika Żywiecka
  • Wojciech Kierbić
    Wojciech Kierbić
  • 2019 - Karolina Kozłowska
    2019 - Karolina Kozłowska
f t g m