linki adsense

piątek, 29 marca 2013

KURS HTML - WSTĘP

Przykład HTML

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>


Wyjaśnienie Przykładu


  • deklaracja DOCTYPE definiuje typ dokumentu
  • tekst pomiędzy <html> i </html> opisuje stronę internetową
  • tekst pomiędzy <body> i </body> to widoczna zawartość strony internetowej
  • tekst pomiędzy <h1> i </h1> jest wyświetlany jako nagłówek
  • tekst pomiędzy <p> i </p> jest wyświetlany jako akapit

Czym jest HTML? 


HTML jest językiem służącym do pisania stron internetowych
  • HTML to skrót od Hypertext Markup Language ( Hipertekstowy Język Znaczników)
  • HTML to język znaczników
  • Znaczniki opisują zawartość dokumentu
  • Dokumenty HTML zawierają znaczniki HTML-owe oraz zwykły tekst
  • Dokumenty HTML nazywane są także stronami internetowymi

Znaczniki HTML


  • Znaczniki HTML to słowa kluczowe otoczone ostrokątnym nawiasem np. <html>
  • Znaczniki HTML występują zazwyczaj w parach np. <b> i </b>
  • Pierwszy znacznik w parze to znacznik początkowy a drugi końcowy
  • Znacznik końcowy wygląda tak samo jak początkowy z dodatkowym znakiem slash
  • Znaczniki początkowy i końcowy są także zwane znacznikiem otwierającym i zamykającym
<ZNACZNIK>Zawartość</ZNACZNIK>

Element HTML:


Element HTML to wszystko pomiędzy znacznikami razem ze znacznikami
Element HTML:
<P>To jest akapit</P>

Przeglądarki internetowe


Zadaniem przeglądarki internetowej (tj. Google Chrome, Firefox, Opera, Internet Explorer) jest czytanie dokumentów HTML i wyświetlanie ich jako strony internetowe. Przeglądarka nie wyświetla znaczników HTML tylko używa ich do interpretacji zawartości strony:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Struktura strony HTML


Poniżej znajduje się wizualizacja strony HTML:

<html>
<body>
<h1>This a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>



Wersje HTML



WersjaRok
HTML1991
HTML+1993
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML 1.02000
HTML52012
XHTML52013

Deklaracja <!DOCTYPE>


Deklaracja <!DOCTYPE> pomaga przeglądarce poprawnie wyświetlić stronę internetową.

Jest wiele różnych dokumentów w internecie. Przeglądarka może wyświetlić stronę w 100% poprawnie tylko jeżeli wie jaka została użyta wersja i typ HTML.

Przykłady deklaracji <!DOCTYPE>


HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
o 1 komentarz:

KURS HTML - UKŁAD (SZABLON) STRONY


Żeby Twoja strona wyglądała dobrze, bardzo ważny jest dobrze zaprojektowany układ strony.
Bardzo dokładnie projektuj układ swojej strony
Examples

Przykład

Projektowanie układu strony za pomocą elementów <div>
Jak stworzyć układ strony za pomocą elementów <div>.
Projektowanie układu strony za pomocą elementów <table>
Jak stworzyć układ strony za pomocą elementów <table>.

Układ stron internetowych


Zawartość większości stron internetowych jest podzielona na kilka kolumn (jak w gazecie).
Te kolumny są stworzone za pomocą elementu <div> lub <table>. Do pozycjonowania elementów, tworzenia tła lub kolorowego wyglądu stron używany jest CSS. 
lampNawet jeśli myślisz, że tworzenie ładnego układu stron jest możliwe za pomocą tabel, to niestety tabele stworzone są do prezentowania danych tabelarycznych, a nie do tworzenia układu stron internetowych.

Projektowanie układu strony za pomocą elementu <div>

Element <div> to element blokowy używany do grupowania elementów HTML.
Poniższy przykład używa 5 elementów div do stworzenia układu kilku kolumn, otrzymujemy ten sam rezultat jak w poprzednim przykładzie:

Przykład

<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Tytuł Strony</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Treść strony</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com</div>

</div>

</body>
</html>

Spróbuj Sam »
Rezultat powyższego kodu HTML:

Tytuł Strony

Menu
HTML
CSS
JavaScript
Treść strony
Copyright © W3Schools.com

Projektowanie układu strony za pomocą elementu <table>

A simple way of creating layouts is by using the HTML <table> tag.
Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages.
Łatwym sposobem projektowania układu stron www, jest użycie do tego celu znacznika <table>.
Układ kilku kolumn można stworzyć za pomocą elementu <div> lub <table>. Do pozycjonowania elementów, tworzenia tła lub kolorowego wyglądu stron używany jest CSS. 
lampNawet jeśli myślisz, że tworzenie ładnego układu stron jest możliwe za pomocą tabel, to niestety tabele stworzone są do prezentowania danych tabelarycznych, a nie do tworzenia układu stron internetowych.

W poniższym przykładzie użyto tabeli z 3 wierszami i 2 kolumnami - pierwszy i ostatni wiersz rozdziela obydwie kolumny przy użyciu atrybutu colspan:

Przykład

<!DOCTYPE html>
<html>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Tytuł Strony</h1>
</td>
</tr>

<tr>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;">
Treść strony</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</td>
</tr>
</table>

</body>
</html>

Spróbuj Sam»
Rezultat powyższego kodu HTML:

Tytuł Strony


Menu
HTML
CSS
JavaScript
Treść strony
Copyright © W3Schools.com

Układ strony - wskazówki

Tip: Największą zaletą używania CSS jest to, że jeżeli wstawisz kod CSS do zewnętrznego arkusza stylów, Twoja strona stanie się dużo łatwiejsza w zarządzaniu. Możesz zmienić układ wszystkich swoich stron poprzez edycję jednego pliku. Żeby nauczyć się CSS, przejrzyj CSS tutorial.
Tip: Ponieważ tworzenie zaawansowanego wyglądu stron jest czasochłonne, szybszą opcją jest użycie szablonu. Wejdź na Google i poszukaj darmowych szablonów stron WWW (to gotowe układy stron, które możesz używać i zmieniać).

Znaczniki do projektowania układu stron WWW

ZnacznikOpis
<div>Definiuje sekcję w dokumencie (blokowo)
<span>Definiuje sekcję w dokumencie (w linii)
o 25 komentarzy:

piątek, 15 marca 2013

KURS HTML - ELEMENTY BLOKOWE I LINIOWE

Elementy HTML mogą być grupowane za pomocą <div> i <span>

Elementy blokowe HTML

Większość elementów HTML jest definiowana jako elementy blokowe lub liniowe.
Elementy blokowe zwykle zaczynają się (i  kończą) nową linią wyświetlaną w przeglądarce.
Przykłady: <h1>, <p>, <ul>, <table>

Elementy liniowe HTML

Elementy liniowe nie zaczynają się zazwyczaj nową linią.
Przykłady: <b>, <td>, <a>, <img>

Element HTML <div>

Element <div> to element blokowy który może być użyty jako "pojemnik" na inne elementy HTML.
Element <div> nie ma specjalnego znaczenia. Poza tym, że zaczyna się i kończy nową linią, ponieważ jest elementem blokowym.
Kiedy użyjemy go razem z CSS, element <div> może służyć do ustawiania atrybutów stylu dla dużych bloków treści.
Innym popularnym wykorzystaniem elementu <div>, jest użycie go do zaprojektowania wyglądu strony. Zamienia on "stary" sposób projektowania wyglądu strony za pomocą tabel. Tabele nie są do tego stworzone. Zadaniem elementu <table> jest wyświetlanie danych tabelarycznych.

Element HTML <span>

Element HTML <span> to element liniowy, który może być "pojemnikiem" na tekst.
Element <span> sam w sobie nie ma specjalnego znaczenia.
Użyty razem z CSS może ustawiać atrybuty stylów wycinkom tekstu.

Znaczniki grupujące HTML

Znacznik Opis
<div> Definiuje sekcję w dokumencie (blokowo)
<span> Definiuje sekcję w dokumencie (liniowo)
o 1 komentarz:

środa, 13 marca 2013

KURS HTML - LISTA

Najbardziej powszechne listy HTML to listy uporządkowane i nieuporządkowane:

Listy HTML

Lista uporządkowana:

  1. Pierwsza pozycja listy
  2. Druga pozycja listy
  3. Trzecia pozycja listy

Lista nieuporządkowana:

  • Pozycja listy
  • Pozycja listy
  • Pozycja listy
Examples

Przykłady - spróbuj sam
Lista nieuporządkowana
Jak stworzyć listę nieuporządkowaną w dokumencie HTML.
Lista uporządkowana
Jak stworzyć listę uporządkowaną w dokumencie HTML.
(Więcej przykładów znajduje się na końcu strony).

Nieuporządkowane listy HTML

Nieuporządkowane listy zaczynają się znacznikiem <ul> . Każda pozycja listy zaczyna się znacznikiem <li>.
Pozycje listy poprzedzone są małymi czarnymi kółkami.

<ul>
<li>Kawa</li>
<li>Mleko</li>
</ul> 
 

Oto jak powyższy kod HTML wygląda w przeglądarce:
  • Kawa
  • Mleko

Uporządkowane listy HTML

Nieuporządkowane listy zaczynają się znacznikiem <ol> . Każda pozycja listy zaczyna się znacznikiem <li>.
Pozycje listy poprzedzone są numerami.

<ol>
<li>Kawa</li>
<li>Mleko</li>
</ol> 
 
Oto jak powyższy kod HTML wygląda w przeglądarce:
  1. Kawa
  2. Mleko

Listy definicji HTML

Lista definicji to lista pozycji, z opisami każdej pozycji.
Listę definicji definiuje znacznik <dl>.
Znacznika <dl> używa się w połączeniu ze znacznikiem <dt> (definiuje pozycję na liście) i <dd> (opisuje pozycję na liście):

<dl>
<dt>Kawa</dt>
<dd>- gorący czarny napój</dd>
<dt>Mleko</dt>
<dd>- biały zimny napój</dd>
</dl>
Oto jak powyższy kod HTML wygląda w przeglądarce:
Kawa
- gorący czarny napój
Mleko
- biały zimny napój

Przydatne wskazówki

Porada: Pozycją listy może być tekst, podziały wiersza (<br>), obrazy, linki, inne listy, itd.

Examples

Przykłady

Różne typy list uporządkowanych
Demonstruje różne typy list uporządkowanych.
Różne typy nieuporządkowanych list
Demonstruje różne typy list nieuporządkowanych.
Listy zagnieżdżone
Demonstruje jak można zagnieżdżać listy.
Listy zagnieżdżone 2
Demonstruje bardziej skomplikowane listy zagnieżdżone.
Lista definicji
Demonstruje listę definiowaną (z opisami).

Znaczniki list HTML

Znacznik Opis
<ol> Definiuje listę uporządkowaną (ordered list)
<ul> Definiuje listę nieuporządkowaną (unordered list)
<li> Definiuje pozycję listy (list item)
<dl> Definiuje listę definiowaną (definition list)
<dt> Definiuje pozycję listy definiowanej
<dd> Definiuje opis pozycji listy definiowanej

o 1 komentarz:

poniedziałek, 11 marca 2013

KURS HTML - TABELE

Przykład tabeli HTML:

Imię Nazwisko Punkty
Jill Smith 50
Eve Jackson 94
John Doe 80
Adam Johnson 67
Examples

Spróbuj sam - Przykłady

Tabele
Jak tworzyć tabele w dokumencie HTML.
(Więcej przykładów znajdziesz na dole tej strony).

Tabele HTML

Tabele są definiowane za pomocą znacznika <table>.
Tabela jest podzielona na wiersze (znacznik <tr>), a każdy wiersz jest podzielony na komórki (znacznik <td>) . <td> oznacza "dane tabeli" i przechowuje zawartość komórki. Znacznik <td> może zawierać tekst, linki (hiperłącza),obrazki, listy, formularze, inne tabele, itd.

Przykład tabeli

<table border="1">
<tr>
<td>wiersz 1, komórka 1</td>
<td>wiersz 1, komórka 2</td>
</tr>
<tr>
<td>wiersz 2, komórka 1</td>
<td>wiersz 2, komórka 2</td>
</tr>
</table>
Oto jak wygląda powyższy kod HTML w przeglądarce:
wiersz 1, komórka 1 wiersz 1, komórka 2
wiersz 2, komórka 1 wiersz 2, komórka 2

Tabele HTML i atrybut border (obramowanie)

Jeśli nie użyjesz atrybutu border, tabela wyświetli się bez obramowania. Czasami może to być użyteczne, ale w większości przypadków, chcemy aby tabela miała obramowanie.
Żeby wyświetlić tabelę z obramowaniem użyj atrybutu border:
<table border="1">
<tr>
<td>Wiersz 1, komórka 1</td>
<td>Wiersz 1, komórka 2</td>
</tr>
</table>

Nagłówki tabeli HTML

Nagłówki w tabeli definiowane są za pomocą znacznika <th>.
Większość popularnych przeglądarek wyświetla pogrubiony i wycentrowany tekst wewnątrz <th>.
<table border="1">
<tr>
<th>Nagłówek 1</th>
<th>Nagłówek 2</th>
</tr>
<tr>
<td>wiersz 1, komórka 1</td>
<td>wiersz 1, komórka 2</td>
</tr>
<tr>
<td>wiersz 2, komórka 1</td>
<td>wiersz 2, komórka 2</td>
</tr>
</table>
How the HTML code above looks in your browser:
Nagłówek 1 Nagłówek 2
wiersz 1, komórka 1 wiersz 1, komórka 2
wiersz 2, komórka 1 wiersz 2, komórka 2

Examples

Więcej przykładów

Tabele bez obramowania
Jak stworzyć tabele bez obramowania.
Nagłówki tabeli
Jak stworzyć nagłówki tabeli.
Tabela z opisem
Jak dodać opis do tabeli.
Komórki które zajmują więcej niż jeden wiersz czy kolumnę
Jak zdefiniować komórki tabeli, które zajmują więcej niż jeden wiersz czy kolumnę.
Znaczniki wewnątrz tabeli
Jak wyświetlić elementy wewnątrz innych elementów.
Dopełnienie komórek
Jak użyć atrybutu cellpadding żeby stworzyć więcej wolnej przestrzeni pomiędzy zawartością komórki a jej obramowaniem.
Rozstaw komórek
Jak użyć atrybutu cellspacing żeby zwiększyć odległość pomiędzy komórkami.

Znaczniki tabeli HTML

Znacznik Opis
<table> Definiuje tabelę
<th> Definiuje komórkę-nagłówek w tabeli
<tr> Definiuje wiersz w tabeli
<td> Definiuje komórkę w tabeli
<caption> Definiuje opis do tabeli
<colgroup> Określa jedną lub grupę kolumn do formatowania
<col> Określa właściwości każdej kolumny wewnątrz elementu <colgroup>
<thead> Grupuje zawartość nagłówków w tabeli
<tbody> Grupuje zawartość ciała w tabeli
<tfoot> Grupuje zawartość stopki w tabeli
o 1 komentarz:

czwartek, 7 marca 2013

KURS HTML - OBRAZY (GRAFIKA)

Przykład

Norwegian Mountain Trip

Pulpit Rock

Spróbuj sam
Examples

Przykłady

Wstawianie obrazów
Jak dodać obrazy do dokumentu HTML.
Wstawianie obrazów z różnych lokacji
Jak dodać obraz z innego folderu lub innego serwera.

Obrazy HTML - Znacznik <img> i atrybut Src

W języku HTML, obrazy są definiowane za pomocą znacznika <img>. 
Znacznik <img> jest pusty, co oznacza że zawiera on tylko atrybuty i nie ma znacznika zamykającego.

Żeby wyświetlić obrazek na stronie trzeba użyć atrybutu src.  Src oznacza "source" (ang. źródło). Wartością atrybutu src jest URL (adres) grafiki, którą chcesz wyświetlić.

Składnia definiowania obrazu:
<img src="url" alt="jakiś_tekst">
URL (adres)  wskazuje na miejsce, w którym obrazek jest przechowywany. Obrazek o nazwie "boat.gif", przechowywany w katalogu "images" na "www.w3schools.com" ma adres URL: http://www.w3schools.com/images/boat.gif.

Przeglądarka wyświetla obraz w miejscu gdzie w dokumencie występuje znacznik <img>. Jeśli umieścisz znacznik <img> pomiędzy dwoma akapitami, przeglądarka pokaże pierwszy akapit, potem obrazek, a następnie drugi akapit.

Obrazy HTML - Atrybut Alt

Wymagany atrybut alt określa alternatywny tekst dla obrazka, jeżeli nie można go wyświetlić.
Wartością atrybutu alt jest tekst wymyślony przez autora strony:
<img src="boat.gif" alt="Duża Łódź">
Atrybut alt zapewnia alternatywną informację o obrazku jeżeli z jakichś powodów użytkownik nie może go zobaczyć ( wolne łącze, błąd w atrybucie src, lub jeśli użytkownik korzysta z czytnika ekranu).

Obrazy HTML - Ustawianie wysokości i szerokości obrazu

Do ustawienia wysokości i szerokości obrazka są używane atrybuty, odpowiednio height i width.
Domyślną jednostką wartości atrybutów są piksele:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

Wskazówka: Dobrą praktyką jest określenie obydwu atrybutów obrazu (szerokości i wysokości) naraz. Jeśli te atrybuty są ustawione, miejsce na obrazek zostaje zarezerwowane w chwili gdy strona się wczytuje. Bez tych atrybutów przeglądarka nie wie jaki rozmiar ma obrazek. Efektem jest zmieniający się wygląd strony w trakcie jej wczytywania (w chwili gdy wczytywany zostaje obrazek).

Wskazówki

Zapamiętaj: Jeżeli plik HTML zawiera 10 obrazków - do poprawnego wyświetlenia strony wymaganych jest 11 plików. Ładowanie obrazków zabiera trochę czasu, dlatego najlepiej używaj obrazków ostrożnie.

Zapamiętaj: W chwili gdy ładowana jest strona, dzieje się to w przeglądarce  (lokalnie), obrazki pobierane są z serwera i wklejane na stronę internetową. Zatem upewnij się że obrazki znajdują się w miejscach wskazywanych przez atrybut src, ponieważ w przeciwnym wypadku odwiedzający stronę zobaczą ikonę uszkodzonego linka. Ikona uszkodzonego linka jest pokazywana jeżeli przeglądarka nie może odnaleźć obrazka.
Examples

Więcej Przykładów

Wyrównywanie obrazów
Jak wyrównać obrazek wewnątrz tekstu.
Ustawianie obrazu po lewej lub prawej stronie opływającego tekstu
Jak ustawić obrazek po lewej lub prawej stronie opływającego go tekstu.
Tworzenie hiperłącza z obrazka
Jak użyć obrazka jako łącza (linka).
Tworzenie mapy obrazka
Jak stworzyć mapę obrazka, z klikalnymi regionami. Każdy region to hiperłącze.

Znaczniki Obrazu HTML

Znacznik Opis
<img> Definiuje obraz
<map> Definiuje mapę obrazka
<area> Definiuje klikalny obszar wewnątrz mapy obrazka
o 3 komentarze:
Subskrybuj: Posty (Atom)