Lepsze ustawienie elementów html/css poziom: łatwy

brx · **Dołączył(a):** 2007-09-14, 19:13 **Posty:** 17

Cześć. Jest to mój pierwszy tutorial. Przejdźmy do tutoriala
[center]"Lepsze ustawianie elementów"[/center]
Wymagana wiedza: podstawowe kroki w CSS, znajomośc html'a na poziomie podstawowym

1. Tworzymy plik o nazwie index z rozszerzeniem .html lub .htm
2. Piszemy następujący kod do index.html

Kod:

<html>
<head>
<title><hr /></title>
<META name="author" content="sundesigner"> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<link rel="Stylesheet" type="text/css" href="style.css" />
</head>
<body>
<b>Lorem ipsum</b>
<hr />
<b>Lorem ipsum</b>
</body>
</html>

3. Tworzymy arkusz styli o nazwie style z rozszerzeniem .css
4. W pliku style.css piszemy taki kod

Kod:

hr {
background: url(pasek.gif) repeat-x;
width:700px;
height:5px;
}

5. Teraz przechodzimy do obrazków

Potrzebna grafika:
Obrazek

6. Podsumowanie

index.html

Kod:

<html>
<head>
<title><hr /></title>
<META name="author" content="sundesigner"> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<link rel="Stylesheet" type="text/css" href="style.css" />
</head>
<body>
<b>Lorem ipsum</b>
<hr />
<b>Lorem ipsum</b>
</body>
</html>

style.css

Kod:

hr {
background: url(pasek.gif) repeat-x;
width:700px;
height:5px;
}

grafika

7. Gdy złożyliśmy to w całość pora to pokazać efekt koncowy:

http://zlamane.cal.pl/brx/tutek/index.html

8. Do czego miał doprowadzić tutorial?

Odpowiedz:

Tutorial miał doprowadzić do używania lepszych sposób ustawieni'ach obrazków. Ja ten sposób wykorzystałem na projekcie moej portfolio'a

Przykład: http://www.zlamane.cal.pl/brx/folio2/index.html

Prosze nie kupiujcie nie lubie tego.

Pozdrawiam.

Devid · **Dołączył(a):** 2008-03-24, 15:12 **Posty:** 11

brx napisał(a):

Kod:

<html>
<head>
<title><hr /></title>
<META name="author" content="sundesigner"> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<link rel="Stylesheet" type="text/css" href="style.css" />
</head>
<body>
<b>Lorem ipsum</b>
<hr />
<b>Lorem ipsum</b>
</body>
</html>

OMG - kodowanie windows-1250, proszę nie rób tego

Jeżeli już zamykasz znaczniki slashem to rób to konsekwentnie, albo stosujesz html albo xhtml, czas się zdecydować

brx napisał(a):

3. Tworzymy arkusz styli o nazwie style z rozszerzeniem .css
4. W pliku style.css piszemy taki kod

Kod:

hr {
background: url(pasek.gif) repeat-x;
width:700px;
height:5px;
}

W tym momencie repeat-x jest niepotrzebny, obrazek ma już 700px - tak jak zostało zdefiniowane.

Ogólnie nie ciekawie, raczej nic nowego nie wnosi poza ciekawostką, że dla znacznika <hr /> możemy dodać polecenie background i będzie ono ciekawym efektem.

Jednak czekam na kolejne tutoriale, napisz może coś o ciekawym rozmieszczeniu linków - przydało by mi się.

Prośba do moderatorów: warto dodać atrybut [Tutorial] albo przykleić temat.

Prankster · **Napisane:** 2008-03-26, 02:03

Jak się czepiasz to rób to porządnie

- brak DOCTYPE, jak to tutorial, to niech nie będzie w nim błędów.
- <title><hr /></title> - walidator to przepuści? <hr /> jeśli już (albo na odwrót)
- popraw literówki i wywal większość apostrofów - są zbyteczne

Sajam · **Dołączył(a):** 2007-10-06, 11:18 **Posty:** 52

Po co komu taki tut?
Ja myśle że z tym każdy nuub sobie poradzi...

programowalnia.info

Lepsze ustawienie elementów html/css poziom: łatwy

Kto przegląda forum