Podstawowe użycie HTML


Podstawowe użycie HTML

Rozmaite efekty osiągnąć można dzięki elementom tzw. języka HTML.

HTML to język (kod), w którym napisana jest większość stron internetowych (WWW). Forma dokumentu napisanego w języku HTML bazuje na tzw. znacznikach (ang. tag, stąd czasem mówi się o "tagach HTML"). Aby osiągnąć zamierzone efekty w opisie przedmiotu, należy zastosować właśnie te znaczniki.

1. Tworzenie stronny „od początku”:

  1. Aby stworzyć podstawową stronę w języku HTML utwórz nowy dokument notatnika i nazwij go strona_glowna zakańczając skrótem *.htm zamiast *.thx

  1. Otwórz właśnie utworzony dokument i w zakładce widok kliknij źródło strony. Teraz możesz zacząć edytować swoją pierwszą stronę!

  1. Edycję rozpocznij od ramy <HTML>, <BODY>

  1. Następnie możesz dodać tło strony formułą <BODY BACKGROUND="tu_wpisująć_pełny_adres_obrazka_którego_chcesz_użyć_jako_tło">

np. <BODY BACKGROUND=”http://ebib.oss.wroc.pl/images/xfile.gif” BGPROPERTIES=FIXED>

2. Konstrukcja znacznika:

Jak już wiesz każdy znacznik ma swoją konstrukcję:

<polecenie> (np. <br>)

lub:

<polecenie>treść</polecenie> (np. <b>Pogrubiony tekst</b>)

lub:

<polecenie atrybut="wartość">treść</polecenie> (np. <font color="blue">Niebieski tekst</font>)

Nazwę polecenia należy więc wstawiać pomiędzy < a > (między znak miejszości a znak większości). Oprócz tego czasem trzeba takie polecenie "zamknąć" (</polecenie>).

  1. Wpisz więc w swoim dokumencie dowolny tekst i spróbuj sformatować go następującymi poleceniami:

  1. Aby oddzielić linijki od siebie lub przesunąć do następnego akapitu użyj formuły <br>

  2. Aby sformatować swój tekst i ułożyć go w akapity wykorzystaj formułę <p> :

<P>Ten tekst domyślnie wyrówna się do lewej</P>
<P ALIGN=center>Ten będzie na środku</P>
<P ALIGN=right>Ten zaś wyrówna się do prawej</P>

  1. Wygląd (wielkość, kolor, czcionkę) swojego tekstu możesz edytować następującymi komendami:

<font color="tu_wpisz_angielską_nazwę_koloru">tu_wpisz_tekst</font>.

<FONT SIZE = "tu_wpisz_rozmiar_czcionki">

3. Dodawanie obrazków

  1. Spróbuj teraz dodać obrazek do swojej strony:

<IMG SRC="adres pliku" atrybuty>

Adres pliku może być względny lub bezwzględny.

SRC="graf.jpg" - jeśli plik graf.jpg jest w tym samym folderze co dokument

SRC="obrazki/graf.jpg" - jeśli plik graf.jpg jest w folderze podrzędnym (o nazwie obrazki) w stosunku do folderu dokumentu

SRC="../graf.jpg" - jeśli plik graf.jpg jest w folderze nadrzędnym

SRC="http://ebib.oss.wroc.pl/images/xfile.gif"

W ten sposób można włączyć do swojego dokumentu każdy obrazek, którego położenie w Internecie jesteśmy w stanie zlokalizować.

4. Tworzenie Menu

Tworząc rozbudowaną stronę nie możemy oczywiście zapomnieć o bardziej lub mniej rozbudowanym menu, pozwalającym nam na prostą nawigację naszą stroną. Utwórz proste menu poprzez:

  1. Najpierw w swoim folderze, w którym jest umieszczony główny dokument tekstowy utwórz tak dodatkowe dokumenty tekstowe, które później posłużą jako odnośniki. Możesz stworzyć ich tak wiele, ile tylko pragniesz mieć odnośników.

  2. <body>

<body onload="initMenu()">

</center>

<FONT COLOR="kolor_czcionki_w_menu"><b>

<b style="font-family: nazwa_czcionki; font-size: 17px">

<div id="flMenu" style="position:absolute;width:200px;top:200px;left:10px">

<a href="nazwa_odnośnika_nr_1.htm">Nazwa w Menu 1 </a><br><br>

<a href=" nazwa_odnośnika_nr_2.htm"> Nazwa w Menu 2 </a><br><br>

<a href=" nazwa_odnośnika_nr_3.htm"> Nazwa w Menu 3 </a><br><br>

<a href=" nazwa_odnośnika_nr_4.htm"> Nazwa w Menu 4 </a><br><br>

<a href=" nazwa_odnośnika_nr_5.htm"> Nazwa w Menu 5 </a><br><br>

</b>

</div>

</body>

Wyróżnionymi wartościami regulujemy:

-odległość menu od górnej krawędzi strony

-odległość menu od lewej str. ekranu (w px)

-ścieżkę dostępu i nazwę odnośnika

5. Tworząc odnośniki

Spróbuj teraz dodać na swojej stronie link/odnośnik do innej strony poprzez wpisanie:

  1. Użyj znacznika <a href="tu_pelny_adres_strony">tu_tekst</a>

W miejsce tu_pelny_adres_strony wstaw pełny adres strony, łącznie z "http://" na początku.

Przykład:

Wpisz:

<a href="http://www.google.com">Wyszukiwarka Google</a>

a otrzymasz:

Wyszukiwarka Google

  1. Możemy również dodać odnośnik w formie buttona (prostokątnego przycisku):

<FORM> <INPUT TYPE="button" VALUE=„nazwa_buttona" onClick="parent.location.href=`tu_wpisz_adres_strony_www'">

0x08 graphic
Powinieneś otrzymać:

0x08 graphic

6. Mignięcie

Teraz możesz urozmaicić swoją stronę poprzez dodanie do niej efektu wejścia. Efektem takim może być np. „mrugnięcie” strony, na której zostanie wpisany (użyj go gdzie chcesz) ten skrypt:

<BODY>

0x08 graphic
<SCRIPT language="VBS">

For i = 16 To 255 Step 2

y = Hex(i)

Document.Bgcolor = y & y & y

Next

Document.Bgcolor = "white"

</SCRIPT>

Odsyłacz o takim wyglądzie możesz wykorzystać w swoich odnośnikach jak np. „powrót do strony głównej” poprzez użycie komendy:

<FORM>

<INPUT TYPE="button" VALUE="Powrót do strony głównej" onClick="parent.location.href='nazwa_twojego_głównego_pliku.htm'">

</form>

Wyróżnionymi wartościami możemy regulować długość „mignięcia


Wyszukiwarka

Podobne podstrony:
PODSTAWY JĘZYKA HTML
Podstawy tworzenia stron WWW w języku HTML, wrzut na chomika listopad, Informatyka -all, INFORMATYKA
kurs html podstawy tworzenia stron www RHQWUXUAVSLOSX6ABOMEHGX52LV2WV67LZXY6RQ
HTML, Podstawowe ćwiczenia
Podstawy HTML
KURS Prostego Formatowania Tekstu w Opisie Chomika (kurs podstaw html)
ABC JĘZYKA HTML - Dodatek B. - Podstawowe moduły kodu HTML, ► Szkoła, HTML
podstawy html czesc II
Podstawy HTML
HTML Podstawy
Tworzenie strony WWW w kodzie HTML z użyciem tablic zagnież
Informatyka - podstawy HTML 2, SZKOŁA, Informatyka
Informatyka - podstawy HTML, SZKOŁA, Informatyka
podstawy html
Podstawy HTML

więcej podobnych podstron