31 798 odsłony

Znaczniki HTML — prosta strona WWW

Aby moż­na było stwo­rzyć stro­nę WWW nale­ży znać znacz­ni­ki HTML, któ­re są dla prze­glą­dar­ki, jak hie­ro­gli­fy dla Egip­cjan. Prze­glą­dar­ka inter­ne­to­wa czy­ta źró­dło stro­ny i poka­zu­je nam sfor­ma­to­wa­ną stro­nę. Poni­żej przed­sta­wię tabe­lę znacz­ni­ków, oraz jak zro­bić pro­stą stro­nę WWW.

Znacz­ni­ki HTML:

Chcesz stwo­rzyć pro­stą stro­nę WWW ? To czy­taj dalej…

Naj­waż­niej­sze w kodzie stro­ny są nastę­pu­ją­ce “dzia­ły” kolej­nych znacz­ni­ków. Są to:

<html>

<head>

<body>

Aby two­rzyć w HTML trze­ba w przy­naj­mniej małym stop­niu znać język angiel­ski. Bez tego się nie obę­dzie. Przed­sta­wię goto­wy kod, z miej­scem na prze­su­wa­ją­cy się tekst do góry, tekst oddzie­lo­ny, tekst, oraz zdję­cie. A oto on:

<html>

<head>

<title>TUTAJ WPISUJEMY TYTUŁ STRONY</title>

</head>

<body>

<body bgcolor=“TUTAJ WPISUJEMY KOLOR TŁA STRONY”>

<cen­ter>

<marquee><h1><font color=“TUTAJ WPISUJEMY KOLOR TEKSTU, KTÓRY MA SIĘ PRZESUWAĆ”>TUTAJ WPISUJEMY TEKST, KTÓRY MA SIĘ PRZESUWAĆ</font></h1></marquee>

<hr>TUTAJ WPISUJEMY TEKST, KTÓRY MA BYĆ ODDZIELONY, NP.: ZAPRASZAM NA FORUM.TOIN.PL.<hr>

TUTAJ WPISUJEMY TEKST STRONY

<img src=“TUTAJ WPISUJEMY, KTÓRE MA BYĆ ZDJĘCIE DODANE”>

</body>

</html>

Teraz pada pyta­nie: Co wpi­sać i co w ogó­le z tym kodem zro­bić ?

Zacznę opi­sy­wać po kolei:

1. Kod wpi­su­je­my w Notat­ni­ku, a stro­nę zapi­su­je­my koniecz­nie jako: “index.html” (bez cudzy­sło­wu).

2. Tam, gdzie mamy wpi­sać tytuł wpi­su­je­my to co będzie się poka­zy­wać na pasku tytu­ło­wym prze­glą­dar­ki do góry.

3. Tam, gdzie mamy wpi­sać kolor tła stro­ny wpi­su­je­my:

  • Jeden z pod­sta­wo­wych kolo­rów w języ­ku angiel­skim, np.: blue
  • albo kolor w for­ma­cie HTML-owym, np.: #CC0000

4. Z kolo­rem tek­stu, któ­ry ma się prze­su­wać jest tak samo jak wyżej.

5. Tam, gdzie mamy wpi­sać tekst tek­stu, któ­ry będzie się prze­su­wał wpi­su­je­my wybra­ny przez nas tekst, np.: “Witam !”.  Znacz­ni­ki <h1> moż­na usu­nąć, one tyl­ko kon­tro­lu­ją jaki ma być roz­miar tego tek­stu.

6. Tekst oddzie­lo­ny jest oddzie­lo­ny linią o góry i u dołu. Za oddzie­le­nie odpo­wia­da znacz­nik <hr>.

7. Tekst stro­ny może­my dowol­nie sfor­ma­to­wać znacz­ni­ka­mi zawar­ty­mi w tabel­ce u góry.

8. Aby wsta­wić zdję­cie musi­my wie­dzieć do jakie­go fol­de­ru wsta­wi­my ten obra­zek na ser­we­rze. Jeśli, np.: do fol­de­ru “ima­ges”, a obra­zek będzie się nazy­wał “dom.jpg”, wte­dy linij­ka kodu odpo­wie­dzial­na za obraz, będzie wyglą­dać nastę­pu­ją­co:

<img src=“images\dom.jpg”>

Może­my rów­nież wrzu­cić zdję­cie “luzem”:

<img src=“dom.jpg”>

Fol­der, lub luź­ne zdję­cie musi być w tym samym miej­scu co plik stro­ny (index.html).

9. Nasza stro­na jest goto­wa. Może­my dodać dodat­ko­we znacz­ni­ki i inne rze­czy, ale musi­my pamię­tać o zamy­ka­niu znacz­ni­ków, np.: <b><i>TEKST</i></b>. Teraz wystar­czy wgrać ją na ser­wer. Przy­kła­do­wy efekt:

Co praw­da na zdję­ciu powy­żej nie moż­na zoba­czyć, jak tekst się prze­su­wa, ale efekt widzi­cie u sie­bie. Mój kod wyglą­dał tak:

<html>
<head>
<title>Prosta stro­na WWW</title>
</head>
<body>
<body bgcolor=“blue”>
<cen­ter>
<marquee><h1><font color=“gold”>!!! Witam na mojej stro­nie !!!</font></h1></marquee>
<hr>ZAPRASZAM NA FORUM.TOIN.PL<hr>
Stro­na przykładowa<br>
<img src=“images\dom.jpg”>
</body>
</html>
Dodat­ko­wą pomoc moż­na uzy­skać TUTAJ
By | 2016-11-26T10:07:43+00:00 Sierpień 18th, 2010|Categories: internet, News|Tags: , , |6 komentarzy

6 komentarzy

  1. artus2007 21/08/2010 w 13:07- Odpowiedz

    Pro­sto i przej­rzy­ście :) pole­cam

  2. Tomasz 01/11/2012 w 22:37- Odpowiedz

    Witam.

    Chcia­łem zwró­cić uwa­gę, że w kodzie HTML nie wystę­pu­je samo­czyn­ny znacz­nik “” i “” tyl­ko wpi­su­je się go pod obsłu­gę inne­go znacz­ni­ka.

    Pozdra­wiam Tomasz

    • Tomasz 01/11/2012 w 22:38- Odpowiedz

      w cudzy­sło­wach miał poja­wić się i 

  3. Alis 14/03/2013 w 16:28- Odpowiedz

    dzię­ki, pomo­gło acz­kol­wiek nie ma nic na temat hiper­łącz a są mi one nie­zbęd­ne na infor­ma­ty­kę do mojej stro­ny. Chy­ba że ma ktoś jakąś goto­wą stro­nę HTML w notat­ni­ku o tema­ty­ce che­micz­nej (nie­ste­ty musi być to che­mia) jeśli ktoś ma pro­szę o link

    pozdra­wiam

  4. Greg 25/06/2014 w 12:36- Odpowiedz

    Macie cos moze na temat ramek?

  5. A 05/04/2016 w 12:57- Odpowiedz

    Bar­dzo dzię­ku­je cho­ciaż popro­si­ła­bym jesz­cze o porad­nik jak wsta­wiać łącza ;)

Zostaw komentarz