Skocz do zawartości


tablety.pl
Zdjęcie
- - - - -

HTML - Robimy stronę od podstaw




  • Zaloguj się, aby dodać odpowiedź
4 odpowiedzi w tym temacie

#1 barblask

barblask

    Good Rank

  • Użytkownicy +
  • 637 postów
  • Płeć:Mężczyzna
  • Lokalizacja:Skąd? Ja wiem skąd

Napisano 26 01 2006 - 04:43

Napisanie prostej strony wbrew ogólnemu przesądowi wcale nie jest trudne. Można to porównać do pisania posta na forum. Na forum jak chcemy pogrubić tekst piszemy:
[b]pogrubiony tekst[/b]

a w html-u
<b>pogrubiony tekst</b>

W html-u po prostu jest więcej możliwości, a co za tym idzie jest też więcej poleceń. Jednak zacznijmy od początku.

Źródło strony składa się z trzech podstawowych elementów: <html></html>, <head></head> i <body></body>.Jest jeszcze deklaracja strony, ale o tym napiszę kiedy indziej.

Pomiędzy <html> a </html> wstawiamy dosłownie wszystko(prócz deklaracji strony). <head> to tzw. nagłówek strony. Między <head> a </head> wstawiamy kilka rzeczy, w większości są to tzw. metatagi.. Najważniejsze co tam musimy być dla polaka, na stronie po polsku to
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">

Dzięki temu zapisowi będziemy mogli widzieć na stronie polskie znaczki z ogonkami (ę, ą, ć, etc.) zamiast jakiś bliżej nie zidentyfikowanych 'krzaczków'. Można tam wstawić jeszcze kilka innych rzeczy np.:

<title>tytuł strony</title>

Będzie on widoczny na górnej belce przeglądarki, oraz w wyszukiwarkach takich jak np. google, yahoo, msn, czy innych. Są jeszcze inne tagi które można tu wstawić, jednak do powstania najbardziej podstawowej strony nie będą nam potrzebne.

Kolej na <body>. Tutaj jest wszystko co wyświetla się w przeglądarce. Tu wpisujemy treść strony, ustalimy tło strony, obrazki, redagujemy wszystko co widać.

A tak wygląda to co do tej pory opisałem
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<title>moja pierwsza strona</title>
</head>
<body>
treść mojej pierwszej strony
</body>
</html>

I na początek tyle. Chyba nic wielkiego
=========
Błędy są naszym najskrytszym wyborem. Wiedz błądźmy, badźmy...

#2 barblask

barblask

    Good Rank

  • Użytkownicy +
  • 637 postów
  • Płeć:Mężczyzna
  • Lokalizacja:Skąd? Ja wiem skąd

Napisano 26 01 2006 - 05:54

<BODY>
A co można władować w body?
Jest tego trochę. Zacznę od tych najpotrzebniejszych.

Jeśli mamy akapity przydały by się jakieś tytuły do nich. Jest to <hx> , gdzie x to wielkość nagłówka. Największy to <h1>, a najmniejszy to <h6>. wygląda to tak
<h1>Tytuł największy</h1>
<h2>Tytuł drugiego rzędu</h2>
<h3>I jeszcze mniejszy trzeciego</h3>
<h4>Znow mniejszy</h4>
<h5>Prawie najmniejszy tytuł</h5>
<h6>I najmniejszy</h6>


Na każdej stronie jest tekst. Jego zamieszczamy między <p> a </p>. Jest to akapit. każdy akapit wkładamy miedzy ten znacznik.
<p>tekst pierwszego akapitu</p>
<p>tekst drugiego</p>
<p>i kolejny tekst</p>


Znaczniki <b>, <i>, <u> są kolejno pogrubieniem, kursywą, podkreśleniem

<b>ten tekst jest pogrubiony</b>
<i>a ten jest pisany kursywą</i>
<u>ten jest podkreślony</u>


Linki - czyli podstawa każdej strony.
<a href="adres_linka">tekst linka</a>

Jeśli robimy link do jakiejkolwiek strony w necie to podajemy pełny adres strony. Jeśli natomiast jest to tylko nasza podstrona to dajemy tylko ścieżkę to tej podstrony. Jeśli strona na której jest link linkowana jest w tym samym katalogu, podajemy tylko nazwę pliku linkowanego np. <a href="podstrona.html">podstrona</a> . Jeśli jest w jakimś folderze niżej to piszemy <a href="jakiś_folder/podstrona.html">podstrona.html</a> . Jeżeli jest w foldeże wyżej to <a href="../strona.html">strona</a> . Tu należy wymienić, że jest ważne jak głęboko jest zakopany plik. Jeśli był by zakopany na głębokość trzech folderów należy trzy razy wyjść o poziom niżej ( ../ ) i wyglądać to będzie tak <a href="../../../strona.html">strona</a>

Możemy też umieścić jakiś obrazek. Ten zapisujemy tak:
<img src="ścieżka.jpg">

Ścieżka do obrazka to np. "img/obrazek.gif" lub link do niego z jakiejś innej strony np. "http://www.jakaś.strona.com/jakiś/obrazek.jpg" .

Czasem chcemy też umieścić na naszej stronie jakąś tabelkę. Na przykład taką jak zrobiłem tutaj. Jest tam od razu podany kod tabelki. wymaga on jedynie omówienia. Od tego chyba powinienem nawet zacząć :D .

Zacznę od omówienia komend tabeli
<table> - otwiera tabele
<tr> - otwiera nowy wiersz
<td> - otwiera nową kolumne w wierszu
każdy element należy zamknąć, czyli potrzebne będzie jeszcze </table> </tr> oraz </td>.
Każdy z tych elementów ma ściśle określone miejsce w dokumencie i tak tabela z jedną komórką wygląda tak
<table>
<tr>
<td>wnętrze komórki</td>
</tr>
</table>

Otworzyłem tabele, napisałem pierwszy wiersz i utworzyłem w nim pierwszą kolumnie.

Tabela dwa na dwa będzie wyglądała:
<table>
<tr>
<td>kom.1/1</td>
<td>kom.1/2</td>
</tr>
<tr>
<td>kom.2/1</td>
<td>kom.2/2</td>
</tr>
</table>

Tabele tworzymy wiersz po wierszu, więc następne linie to kolejne <tr>.
Więcej kolumn to więcej <td>, ale w każdym wierszu<tr> musi być ta sama ilość kolumn<td>.
No ale czasem chcemy mieś w jednej linii inna ilość kolumn. Wtedy używamy polecenia colspan i umieszczamy je w tagu <td> a wygląda to <td colspan="X"> gdzie X to ilość kolumn które chcemy połączyć(ilość komórek w wierszu do scalenia). Należy też pamiętać, aby usunąć X ilość kolumn w danym wierszu. Przyklad wraz z kodem macie tutaj
Podobnie robimy gdy chcemy mieć mniej wierszy w kolumnie, ale używamy do tego polecenia [b]rowspan
i wygląda to <td rowspan="X"> , gdzie X to ilość połączonych komórek w kolumnie (ilość połączonych wierszy). Tym razem należy usunąć z kodu X komorek w kolumnie. I przykład... [b]tutaj

=========
Błędy są naszym najskrytszym wyborem. Wiedz błądźmy, badźmy...

#3 barblask

barblask

    Good Rank

  • Użytkownicy +
  • 637 postów
  • Płeć:Mężczyzna
  • Lokalizacja:Skąd? Ja wiem skąd

Napisano 28 01 2006 - 11:27

Strona w oparciu o <table>
Samo tworzenie tabeli opisane jest post wyżej, a teraz wykorzystamy tabele do poukładania treści na naszej stronie.

Wyobraźmy sobie, że strona jest zrobiona z kilku prostokątów. W jednym mamy logo u góry, w drugim menu i w trzecim treść strony. No to jak już sobie wyobraziliśmy to wbijmy sobie do głowy, że tak jest(bo tak jest :D ). Gdy robimy stronę musimy te prostokąty zrobić. np. robimy taką stronę
________________________________
|		  LOGO				 |
--------------------------------
|   |						   |
| M |						   |
| E |	 TREŚĆ STRONY		  |
| N |						   |
| U |						   |
|   |						   |
--------------------------------
Mamy trzy prostokąty.

Jednak tabelka nie pozwoli nam stworzyć w pierwszym wiersza z jednej kolumny. Musimy scalić dwie komórki (tylko w tym wierszu). Służy to tego polecenie colspan(co zresztą też już opisałem wyżej).
Wiec:
...
<body>
<table>
<tr>
<td colspan=2>LOGO</td>
</tr>
...

teraz dodajemy drugi wiesz <tr> i dwie kolumny <td>(menu i tresc strony)
...
<tr>
<td>M<br>E<br>N<br>U<br></td>
<td>TRESC STRONY</td>
</tr>
</table>
...

Calosc wyglada tak:
<html>
<head>
...
</head>
<body>
<table>
<tr>
<td colspan=2>LOGO</td>
</tr>
<tr>
<td>M<br>E<br>N<br>U<br></td>
<td>TRESC STRONY</td>
</tr>
</table>
</body>
</html>

=========
Błędy są naszym najskrytszym wyborem. Wiedz błądźmy, badźmy...

#4 barblask

barblask

    Good Rank

  • Użytkownicy +
  • 637 postów
  • Płeć:Mężczyzna
  • Lokalizacja:Skąd? Ja wiem skąd

Napisano 28 01 2006 - 11:29

strona w oparciu o <div>


Zrobimy taką samą stronę, ale w trochę inny sposób.


________________________________
|		  LOGO				 |
--------------------------------
|   |						   |
| M |						   |
| E |	 TREŚĆ STRONY		  |
| N |						   |
| U |						   |
|   |						   |
--------------------------------

No dobra, teraz robimy to samo co wyzej, ale troche bardziej poprawnie. Na wstepie, nadmienie, ze divy z css sa zmora z powodu roznej interpretacji stylow w roznych przegladarkach. To co tu przedstawie bedzie jedynie podstawowym szkieletem z ktorym nie powinno byc zbyt wiele problemow. A wiec do dziela.

Zapomnijmy o tabelkach i wyobrazmy sobie klocki. W naszej stronie potrzebujemy trzy takie klocki. jeden bedzie na gorze i bedzie zawieral logo. Drugim klockiem bedzie menu, a trzecim tresc strony. Nasze klocki beda mialy rozna wielkosc. Kazdy z tych klockow to nasz div, rozmiar jego istalamy w css. Aby wszystkie klocki trzymaly sie w kupie poukladamy je na najwiekszym klocku ktory bedzie ich fundamentem.
czyly strona wyglada prosto:
...
<body>
<div><!--nasz fundament z wlasciwymi divamy w srodku-->
<div>LOGO</div>
<div><br>M<br>E<br>N<br>U<br></div>
<div>TRESC STRONY</div>
</div>
</body>


Teraz nalezy w kazdym DIVie ustalic jaka bedzie mial szerokosc, czyli [b]style="width:XXXpx" gdzie XXX to liczba.
ustalmu sobie, ze cala strona bedzie miala 900 pixeli. wiec pierwszego DIVa, nasz fundament ustalamy na style="width:900px"
...
<div style="width: 900px"><!--nasz fundament z wlasciwymi divamy w srodku-->
...
</div>

tak samo DIV z logo
...<div style="width:900px">LOGO</div>...

Divy z menu i trescia strony w sumie musza miec tyle co DIV ktory jest naszym fundamentem, czyli menu + tresc strony = 900px
Wymyslilem sobie, ze menu bedzie mialo 200px, a tresc reszte, czyli 700px:
...
<div style="width:200px"><br>M<br>E<br>N<br>U<br></div>
<div style="width:700px">TRESC STRONY</div>
...


i to juz wszystko, a calosc wyglada tak:
...
<html>
<head>
...
</head>
<body>
<div style="width:900px"><!--nasz fundament z wlasciwymi divamy w srodku-->
<div style="width:900px">LOGO</div>
<div style="width:200px"><br>M<br>E<br>N<br>U<br></div>
<div style="width:700px">TRESC STRONY</div>
</div>
</body>
</html>


style mozna oczywiscie wydzielic i np dodac do zewnetrznego arkusza styli, ale to juz pozostawiam wam, wedle uznania.
=========
Błędy są naszym najskrytszym wyborem. Wiedz błądźmy, badźmy...

#5 barblask

barblask

    Good Rank

  • Użytkownicy +
  • 637 postów
  • Płeć:Mężczyzna
  • Lokalizacja:Skąd? Ja wiem skąd

Napisano 02 07 2007 - 20:37

MENU

Opiszę sposób tworzenia menu przy pomocy wykazu i styli.

Lista wykazu:
<ul>
<li>punkt pierwszy</li>
<li>punkt drugi</li>
<li>punkt trzeci</li>
</ul>

Efektem będzie
  • punkt pierwszy
  • punkt drugi
  • punkt trzeci
Teraz zamiast punków damy linki:
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link1</a></li>
</ul>
Usuńmy te kropki obok każdego linka:
<ul style="list-style-type: none">
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link1</a></li>
</ul>

I w ten sposób mamy gotowe menu. Pozostaje posolić i doprawić do smaku za pomocą styli.
=========
Błędy są naszym najskrytszym wyborem. Wiedz błądźmy, badźmy...




Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych