32 221 odsłony

Znaczniki HTML — prosta strona WWW

Aby moż­na było stworzyć stronę WWW należy znać znaczni­ki HTML, które są dla przeglą­dar­ki, jak hierogli­fy dla Egipc­jan. Przeglą­dar­ka inter­ne­towa czy­ta źródło strony i pokazu­je nam sfor­ma­towaną stronę. Poniżej przed­staw­ię tabelę znaczników, oraz jak zro­bić prostą stronę WWW.

Znaczni­ki HTML:

Chcesz stworzyć prostą stronę WWW ? To czy­taj dalej…

Najważniejsze w kodzie strony są następu­jące “dzi­ały” kole­jnych znaczników. Są to:

<html>

<head>

<body>

Aby tworzyć w HTML trze­ba w przy­na­jm­niej małym stop­niu znać język ang­iel­s­ki. Bez tego się nie obędzie. Przed­staw­ię gotowy kod, z miejscem na prze­suwa­ją­cy się tekst do góry, tekst odd­zielony, 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>

Ter­az pada pytanie: Co wpisać i co w ogóle z tym kodem zro­bić ?

Zacznę opisy­wać po kolei:

1. Kod wpisu­je­my w Notat­niku, a stronę zapisu­je­my koniecznie jako: “index.html” (bez cud­zysłowu).

2. Tam, gdzie mamy wpisać tytuł wpisu­je­my to co będzie się pokazy­wać na pasku tytułowym przeglą­dar­ki do góry.

3. Tam, gdzie mamy wpisać kolor tła strony wpisu­je­my:

  • Jeden z pod­sta­wowych kolorów w języku ang­iel­skim, np.: blue
  • albo kolor w for­ma­cie HTML-owym, np.: #CC0000

4. Z kolorem tek­stu, który ma się prze­suwać jest tak samo jak wyżej.

5. Tam, gdzie mamy wpisać tekst tek­stu, który będzie się prze­suwał wpisu­je­my wybrany przez nas tekst, np.: “Witam !”.  Znaczni­ki <h1> moż­na usunąć, one tylko kon­trolu­ją jaki ma być rozmi­ar tego tek­stu.

6. Tekst odd­zielony jest odd­zielony lin­ią o góry i u dołu. Za odd­zie­le­nie odpowia­da znacznik <hr>.

7. Tekst strony może­my dowol­nie sfor­ma­tować znacznika­mi zawarty­mi w tabelce u góry.

8. Aby wstaw­ić zdję­cie musimy wiedzieć do jakiego folderu wstaw­imy ten obrazek na ser­w­erze. Jeśli, np.: do folderu “images”, a obrazek będzie się nazy­wał “dom.jpg”, wtedy lin­ij­ka kodu odpowiedzial­na za obraz, będzie wyglą­dać następu­ją­co:

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

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

<img src=“dom.jpg”>

Fold­er, lub luźne zdję­cie musi być w tym samym miejs­cu co plik strony (index.html).

9. Nasza strona jest gotowa. Może­my dodać dodatkowe znaczni­ki i inne rzeczy, ale musimy pamię­tać o zamyka­niu znaczników, np.: <b><i>TEKST</i></b>. Ter­az wystar­czy wgrać ją na ser­w­er. Przykład­owy efekt:

Co praw­da na zdję­ciu powyżej nie moż­na zobaczyć, jak tekst się prze­suwa, ale efekt widzi­cie u siebie. Mój kod wyglą­dał tak:

<html>
<head>
<title>Prosta strona WWW</title>
</head>
<body>
<body bgcolor=“blue”>
<cen­ter>
<marquee><h1><font color=“gold”>!!! Witam na mojej stron­ie !!!</font></h1></marquee>
<hr>ZAPRASZAM NA FORUM.TOIN.PL<hr>
Strona przykładowa<br>
<img src=“images\dom.jpg”>
</body>
</html>
Dodatkową pomoc moż­na uzyskać 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

    Pros­to i prze­jrzyś­cie :) pole­cam

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

    Witam.

    Chci­ałem zwró­cić uwagę, że w kodzie HTML nie wys­tępu­je samoczyn­ny znacznik “” i “” tylko wpisu­je się go pod obsługę innego znaczni­ka.

    Poz­draw­iam Tomasz

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

      w cud­zysłowach miał pojaw­ić się i

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

    dzię­ki, pomogło aczkol­wiek nie ma nic na tem­at hiperłącz a są mi one niezbędne na infor­matykę do mojej strony. Chy­ba że ma ktoś jakąś gotową stronę HTML w notat­niku o tem­atyce chemicznej (nieste­ty musi być to chemia) jeśli ktoś ma proszę o link

    poz­draw­iam

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

    Macie cos moze na tem­at ramek?

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

    Bard­zo dzięku­je cho­ci­aż poprosiłabym jeszcze o porad­nik jak wstaw­iać łącza ;)

Zostaw komentarz