II. Tworzenie stron z wykorzystaniem notatnika.
W poprzednim rozdziale w ćwiczeniu wpisaliśmy zwykły tekst: „Nazywam się ..... To jest moja pierwsza strona internetowa.” Został on wyświetlony w przeglądarce internetowej. Okazało się, że jest to zwykły plik tekstowy.
Zapoznajmy się z językiem HTML, który służy do opisu stron internetowych. Dla osób, które chciałyby nauczyć się więcej polecam kurs HTMLa zamieszczony na stronie:
Dla naszych potrzeb wystarczy zapoznać się z podstawowymi informacjami zawartymi na stronie:
Jak wygląda plik htmlowski?
Wystarczy wejść na dowolną stronę internetową, kliknąć w przeglądarce prawym przyciskiem myszy i dalej wybrać: „Pokaż źródło”. Pokaże nam się dokument w języku HTML.
Plik HTMLa zawiera polecenia (ang. tags) objęte ostrymi nawiasami, np. <B> <META> itp.
Każde z poleceń ma określone znaczenie.
Cały dokument powinien być objęty parą znaczników <HTML> </HTML>. Między nimi powinna zaś się znaleźć para znaczników <HEAD> </HEAD>, która stanowi ramy dla informacji nagłówkowych. Pozostałe informacje powinny być objęte z kolei znacznikami <BODY> </BODY>. Wygląda to następująco:
<HTML>
<HEAD>informacje nagłówkowe</HEAD>
<BODY>
właściwa treść (ciało) dokumentu
</BODY>
</HTML>
Czyli nasza strona powinna wyglądać w ten sposób:
<HTML>
<HEAD></HEAD>
<BODY>
Nazywam się ..... To jest moja pierwsza strona internetowa.
</BODY>
</HTML>
Możemy pogrubić jakiś fragment tekstu:
<HTML>
<HEAD></HEAD>
<BODY>
Nazywam się <B>Piotr Jezierski.</B> To jest moja pierwsza strona internetowa.
</BODY>
</HTML>
Imię i nazwisko jest ujęte w znaczniki <B>, dzięki czemu ten fragment jest pogrubiony.
Uwaga:
Zauważmy, że prawie każdy znacznik ma swój początek np. <B> i koniec np. </B>.
Są oczywiście wyjątki, jak np. znacznik <BR> - przejście do następnej linii.
Spróbujmy w naszym ćwiczeniu dopisać kolejne wiersze:
<HTML>
<HEAD></HEAD>
<BODY bgcolor=”silver”>
<H1 align=”center”> <FONT color=”blue”>Moja strona internetowa</FONT></H1>
Nazywam się <B>Piotr Jezierski.</B> To jest moja pierwsza strona internetowa. <BR>
Pragnę przedstawić .....
</BODY>
</HTML>
<BODY bgcolor=”silver”> - określa srebrny kolor tła
<H1 align=”center”> - H1 - tytuł strony, align - wyrównywanie, center - sposób wyrównywania - na środek
<FONT color=”blue”> - określa rodzaj i kolor czcionki
<BR> - przejście do następnej linii
Możemy wstawić hiperłącze w naszym dokumencie:
<HTML>
<HEAD></HEAD>
<BODY bgcolor=”silver”>
<H1 align=”center”> <FONT color=”blue”>Moja strona internetowa</FONT></H1>
Nazywam się <B>Piotr Jezierski.</B> To jest moja pierwsza strona internetowa. <BR>
Pragnę przedstawić .....
<A href=http://www.naukaprzezinternet.pl>To jest strona mojej Szkoły</A>
</BODY>
</HTML>
Na końcu możemy wstawić swoje zdjęcie (uwaga: plik ze zdjęciem najlepiej umieścić w tym samym katalogu co plik index.html) :
<HTML>
<HEAD></HEAD>
<BODY bgcolor=”silver”>
<H1 align=”center”> <FONT color=”blue”>Moja strona internetowa</FONT></H1>
Nazywam się <B>Piotr Jezierski.</B> To jest moja pierwsza strona internetowa. <BR>
Pragnę przedstawić .....
<A href=http://www.naukaprzezinternet.pl>To jest strona mojej Szkoły</A>
<IMG src=”mojezdjecie.jpg”>
</BODY>
</HTML>
Oczywiście zamiast nazwy „mojezdjecie” wpisujemy nazwę pliku.
Wszystkich, którzy chcieliby zdobyć większą wiedzę na temat języka HTML odsyłam do kursów, do których linki zamieściłem na początku.
Wyszukiwarka
Podobne podstrony:
1626
1626 Zał nr 3 do SIWZ 4 Operat wp czarna
Oct 2010 1626 LM R6 0 A R6 1 DS
Dz U 2006 221 1626 wersja 08 02 28
1626
Regina Caeli Gregor Aichinger (1564 1626)
Oct 2010 1626 LM R6 0 A R6 1 DS
Radosław Sikora Wojskowość polska w dobie wojny polsko szwedzkiej 1626 1629 Kryzys mocarstwa, Wyd So
1626
Bitwa pod Gniewem 1626
Radosław Sikora Wojskowość polska w dobie wojny polsko szwedzkiej 1626 1629 Kryzys mocarstwa, Wyd So
więcej podobnych podstron