Podstawy jĂŞzyka html - Forum dla graczy

Gervith

HTML (ang. HyperText Markup Language) to bardzo popularny jĂŞzyk uÂżywany do tworzenia stron internetowych. Jego prostota pozwala na bardzo szybkie zaprojektowanie witryny osobie, ktĂłra nigdy nie miaÂła z nim nawet stycznoÂści. Istnieje caÂła masa graficznych programĂłw do tworzenia stron, ale lepiej zaczÂąĂŚ od podstaw i poznaĂŚ od podszewki najbardziej uÂżyteczne tagi. Naszym narzĂŞdziem pracy bĂŞdzie wiĂŞc notatnik albo inny, dowolny edytor :)

WstĂŞp.

KaÂżda pisana przez nas strona powinna posiadaĂŚ szkielet, w ramach ktĂłrego bĂŞdziemy posÂługiwaĂŚ siĂŞ tagami. Z kolei same tagi skÂładajÂą siĂŞ z ostrych nawiasĂłw, wewnÂątrz ktĂłrych znajduje siĂŞ ciÂąg znakĂłw majÂący konkretne znaczenie. MoÂżecie uÂżywaĂŚ maÂłych bÂądÂź duÂżych liter, nie ma to Âżadnego znaczenia.

CaÂła strona powinna znajdowaĂŚ siĂŞ miĂŞdzy znacznikami <HTML> </HTML>, nagÂłĂłwkowe powinny byĂŚ objĂŞte w <HEAD> </HEAD> a caÂła pozostaÂła treÂśĂŚ miĂŞdzy <BODY> </BODY>.

W praktyce powinno wyglÂądaĂŚ to tak:

Cytat:

<HTML>

<HEAD>

nagÂłĂłwek

</HEAD>

<BODY>

treÂśĂŚ strony

</BODY>

</HTML>

Po wpisaniu tagĂłw do edytora tekstowego otrzymamy najprostszÂą z moÂżliwych stron. Pozostaje jeszcze kwestia jak zapisaĂŚ wykonanÂą przez nas pracĂŞ tak Âżeby przeglÂądarka internetowa interpretowaÂła jÂą jako dokument html a nie zwykÂły tekst. W tym celu z menu wybieramy „Plik” a nastĂŞpnie „Zapisz jako”. W oknie, ktĂłre siĂŞ pojawi wpisujemy nazwĂŞ pliku „index.html”. Strona gÂłĂłwna naszej witryny powinna nosiĂŚ nazwĂŞ „index” Âżeby przeglÂądarka wiedziaÂła od czego ma zaczÂąĂŚ wyÂświetlanie zawartoÂści naszego serwisu.

Kolejne kroki.

Przygotowany przez nas szkielet jest dobrym fundamentem dalszej budowy strony, jednak przydaÂłoby siĂŞ wyposaÂżyĂŚ go w kilka dodatkowych informacji, ktĂłre kaÂżda szanujÂąca siĂŞ strona powinna posiadaĂŚ.

Pierwszym bardzo waÂżnym krokiem jest ustawienie strony kodowej tak, aby prawidÂłowo wyÂświetlaÂły siĂŞ wszystkie polskie znaki dialektyczne (ĂŞÂąÂśÂłÂżÂźĂŚĂą). W tym celu naleÂży wpisaĂŚ linijkĂŞ <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> zaraz na samym poczÂątku sekcji <HEAD> </HEAD>.

Dobrym pomysÂłem jest teÂż wstawienie tytuÂłu naszej strony, bĂŞdzie siĂŞ on ukazywaÂł na pasku tytuÂłowym przeglÂądarki. Ponownie w sekcji <HEAD> </HEAD> wpisujemy znaczniki:

Cytat:

<TITLE>tytuÂł strony</TITLE>

Nasza strona po tych zabiegach bĂŞdzie przedstawiaÂła siĂŞ w nastĂŞpujÂąco:

Cytat:

<HTML>

<HEAD>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">

<TITLE>tytuÂł strony</TITLE>

</HEAD>

<BODY>

treÂśĂŚ strony

</BODY>

</HTML>

WielkoÂśĂŚ czcionki

Podstawowa wielkoÂśĂŚ czcionki zdefiniowana jest na 3 punkty i jeÂżeli nie okreÂślimy innej wielkoÂści to nasz tekst bĂŞdzie miaÂł takÂą domyÂślnÂą wartoÂśĂŚ. WielkoÂści, jakie moÂżemy wpisywaĂŚ, to wszystkie z zakresu od 1 do 7, czym wiĂŞksza cyfra tym wiĂŞksza bĂŞdzie czcionka wyÂświetlana w przeglÂądarce. Aby zmieniĂŚ rozmiar czcionki naleÂży objÂąĂŚ pisany tekst tagami:

Cytat:

Tekst, ktĂłry chcemy powiĂŞkszyĂŚ

W miejsce „7” wpisujemy dowolnÂą wartoÂśĂŚ, ktĂłra bĂŞdzie odpowiadaĂŚ naszym potrzebom.

Kolor czcionki

Do wyboru koloru czcionki moÂżemy posÂłuÂżyĂŚ siĂŞ tym samym programem, ktĂłrego uÂżywaliÂśmy do okreÂślenia tÂła (Kolorgenerator). RĂłÂżnica polega jedynie na zastosowaniu innych tagĂłw:

Tekst, ktĂłremu chcemy nadaĂŚ kolor

#0000FF – granatowy

Akapit i wiersz

Przy pisaniu bardziej rozlegÂłego artykuÂłu potrzebna nam bĂŞdzie umiejĂŞtnoÂśĂŚ dzielenia tekstu na nowe wiersze i akapity. KaÂżde wciÂśniĂŞcie przez nas klawisza „enter” w notatniku bÂądÂź edytorze tekstowym bĂŞdzie pominiĂŞte przez przeglÂądarkĂŞ internetowÂą. Musi ona widzieĂŚ znaki, ktĂłre bĂŞdzie mogÂła prawidÂłowo zinterpretowaĂŚ.

Nowy akapit zaczniemy wpisujÂąc:

Cytat:

Nowy akapit

Nowy wiersz (przeÂłamanie tekstu) rozpoczniemy stawiajÂąc na koĂącu poprzedzajÂącego znacznik .

PrzykÂład:

Wiersz pierwszy 
Wiersz drugi 
Wiersz trzeci 
itd

HiperÂłÂącze

Jest to odnoÂśnik, do innej strony, lub do jednej z podstron naszego serwisu. Po klikniĂŞciu na niego przenosimy siĂŞ w okreÂślone w hiperÂłÂączu miejsce. Budowa takiego odnoÂśnika przedstawia siĂŞ nastĂŞpujÂąco:

<A HREF="http://www.adres_strony_na_ktora_zostaniemy_przeniesieni.pl">Opis</A>

przykÂładowo:

<A HREF="http://www.oc-forum.org">Wszystko o komputerach</A>

przez przeglÂądarkĂŞ zostanie to zinterpretowane nastĂŞpujÂąco:

Wszystko o komputerach

Kolejnym rodzajem hiperÂłÂącza jest takie, ktĂłre po klikniĂŞciu na nie, spowoduje otwarcie domyÂślnego klienta poczty na komputerze klikajÂącego.

Cytat:

Cytat:

<A HREF="mailto:sensej@oc-forum.org">Sensej</A>

Wstawianie grafiki

NaszÂą stronĂŞ moÂżemy urozmaiciĂŚ wstawiajÂąc na niÂą kilka plikĂłw graficznych. NaleÂży jednak pamiĂŞtaĂŚ, aby z tym elementem nie przesadziĂŚ. Czym wiĂŞcej grafiki znajduje siĂŞ na stronie tym dÂłuÂżej bĂŞdzie siĂŞ ona ÂładowaÂła. NajpopularniejszÂą kompresjÂą plikĂłw graficznych jest GIF oraz JPG. Aby wstawiĂŚ obrazek na stronĂŞ wpisujemy linijkĂŞ:

Cytat:

JeÂżeli obrazek znajduje siĂŞ TagĂłw tym samym katalogu, co strona to wystarczy wpisaĂŚ:

Cytat:

SÂą to absolutne podstawy. Po wiĂŞcej zapraszam na stronĂŞ http://kurshtml.boo.pl

ÂźrĂłdÂło: skÂładanka z internetu + moja edycja

ziomix28 · Wysłany: 2009-04-09, 18:46 **Ulubiona Firma Sptrzętu Komp.?:** Logitech

Dobry temat przyda siĂŞ :)

lukas24 · Wysłany: 2009-07-21, 15:41 **Ulubiona Firma Sptrzętu Komp.?:** Creative

W sieci sporo jest tego typu "poradnikĂłw", ale dla tych ktĂłrym za bardzo nie chce siĂŞ szukaĂŚ w necie Âświetny poradnik :mrgreen: