linki adsense

wtorek, 18 grudnia 2012

KURS HTML - EDYTORY

Pisanie kodu HTML używając Notepad lub TextEdit


HTML może być edytowany przy użyciu profesjonalnych edytorów HTML:
  • Adobe Dreamweaver
  • Microsoft Expression Web
  • CoffeeCup HTML Editor
Jednakże do nauki HTML polecamy edytor Notatniku(PC) lub TextEdit(Mac). Wierzymy, że używanie prostego edytora tekstowego to najlepsza droga do nauki HTML.

Ja (autor tego bloga) osobiście polecam Notepad++, ponieważ ten edytor koloruje składnię html, php, java script i wielu innych języków. Kolorowanie składni bardzo ułatwia programowanie (ułatwia wykrywanie błędów w kodzie). Program można ściągnąć tutaj.

Wykonaj 4 poniższe kroki żeby stworzyć twoją pierwszą stronę internetową w Notatniku.

Krok 1: Włącz Notatnik


Start
   Wszystkie programy
      Akcesoria
         Notatnik

Krok 2: Napisz swój kod HTML w Notatniku
Krok 3: Zapisz swój kod HTML

 Wybierz Zapisz jako w menu Plik Notatnika.

 Kiedy zapisujesz plik HTML możesz użyć rozszerzenia pliku .htm lub .html. Nie ma różnicy między tymi dwoma rozszerzeniami.

 Zapisz plik w folderze którego nazwę łatwo zapamiętasz.

Krok 4: Uruchom kod HTML w przeglądarce


Uruchom przeglądarkę i otwórz swój plik html Plik->Otwórz, lub po prostu otwórz folder z twoim plikiem i go uruchom.

Rezultat powinien wyglądać podobnie:

o Brak komentarzy:

poniedziałek, 17 grudnia 2012

KURS HTML - PODSTAWY

Nie przejmuj się że w poniższych przykładach użyte są znaczniki, których nie znasz.
Nauczysz się ich w następnych rozdziałach.

Nagłówki HTML


Nagłówki definiuje się w znacznikach od <h1> do <h6>

Przykład
<h1>To jest nagłówek</h1>
<h2>To jest nagłówek</h2>
<h3>To jest nagłówek</h3>

Akapity HTML

 

Akapity definiuje się za pomocą znacznika <p>

Przykład
<p> To jest akapit</p>

Linki HTML



Linki definiuje się za pomocą znacznika <a>
  
Przykład
<a href="http://www.w3schools.com">To jest link</a>

Obrazy HTML

  
Obrazy definiuje się za pomocą znacznika <img> 

Przykład
<img src="w3schools.jpg" width="104" height="142"> 
o Brak komentarzy:

niedziela, 16 grudnia 2012

KURS HTML - ELEMENTY HTML

Elementy HTML definiują Dokument HTML

Elementy HTML

 

Element HTML to wszystko pomiędzy znacznikami razem ze znacznikami:
Znacznik początkowy * Zawartość Elementu Znacznik końcowy *
<p> To jest akapit </p>
<a href="default.htm"> To jest link </a>
<br>
* Znaczniki początkowy i końcowy są także zwane znacznikiem otwierającym i zamykającym.

Składnia Elementu HTML


  • Element HTML zaczyna się znacznikiem początkowym
  • Element HTML kończy się znacznikiem końcowym
  • Zawartość elementu znajduje się pomiędzy znacznikiem początkowym i końcowym
  • Niektóre elementy mają pustą zawartość
  • Puste elementy są zamknięte znacznikiem początkowym (np. <br>)
  • Większość elementów HTML może mieć atrybuty

Zagnieżdżone elementy HTML

 

Większość elementów HTML da się zagnieżdżać (elementy mogą zawierać inne elementy HTML) 

Dokument HTML składa się z zagnieżdżonych elementów HTML

Przykład dokumentu HTML

 


<!DOCTYPE html>
<html>

<body>
<p>To jest mój pierwszy akapit.</p>
</body>

</html>

Powyższy przykład zawiera 3 elementy HTML.

Wyjaśnienie przykładu

 

Element  <p>:


<p>To jest mój pierwszy akapit.</p>

Element <p> definiuje akapit w dokumencie HTML.
Element ma znacznik początkowy <p> i końcowy </p>.
Zawartość elementu to: To jest mój pierwszy akapit.
Element  <body>:


<body>
<p>To jest mój pierwszy akapit.</p>
</body>

Element <body> definiuje ciało dokumentu HTML.
Element ma znacznik początkowy <body> i końcowy </body>.
Zawartością elementu jest inny element HTML(w tym przypadku element p).
Element  <html>:


<html>

<body>
<p>To jest mój pierwszy akapit.</p>
</body>

</html>

Element <html> definiuje cały dokument HTML.
Element ma znacznik początkowy <html> i końcowy </html>.
Zawartością elementu jest inny element HTML(w tym przypadku element body).

Nie zapomnij o znaczniku końcowym

 

Niektóre elementy HTML są wyświetlane poprawnie nawet jeśli zapomnisz o znaczniku końcowym:


<p>To jest akapit
<p>To jest akapit 

Powyższy przykład działa poprawnie w większości przeglądarek internetowych, ponieważ znacznik zamykający uważany jest za opcjonalny.
Nigdy na tym nie polegaj.Większość elementów HTML będzie dawać nieoczekiwane rezultaty  i/lub błędy jeśli zapomnisz o znaczniku końcowym.

Puste elementy HTML

 

Elementy HTML bez zawartości nazywane są pustymi.
<br> jest pustym elementem bez znacznika zamykającego (znacznik <br> definiuje przejście do następnej linii).
Wskazówka: w XHTML, wszystkie elementy muszą być zamknięte. Dodanie znaku slash wewnątrz znacznika początkowego, np.  <br />, to poprawny sposób zamykania pustych elementów w XHTML (i XML).

Porada HTML: Pisz znaczniki małymi literami

 

Nie ma większego znaczenia czy znacznik napiszesz z małej czy dużej litery: <P> oznacza to samo co <p>. Wiele stron internetowych używa znaczników napisanych z dużych liter.
W3Schools używa małych liter ponieważ World Wide Web Consortium (W3C) zaleca małe litery w HTML 4 i wymaga małych liter w XHTML.


o Brak komentarzy:

sobota, 15 grudnia 2012

KURS HTML - Atrybuty HTML

Atrybuty dostarczają dodatkowych informacji o elementach HTML.

Atrybuty HTML



  • Elementy HTML mogą zawierać atrybuty
  • Atrybuty dostarczają dodatkowych informacji o elemencie
  • Atrybuty są zawsze określone w znaczniku początkowym
  • Atrybuty występują w parach nazwa/wartość : nazwa="wartość"

Przykład Atrybutu

 

Linki HTML są definiowane za pomocą znacznika <a>. Adres linka jest określony w atrybucie href:

Przykład

<a href="http://www.w3schools.com">To jest link</a>



Wartości Atrybutów muszą być w cudzysłowie

 

Wartości atrybutów powinny być w cudzysłowie.
Najczęściej wartości atrybutów znajdują się w cudzysłowie ale dopuszczalne jest również użycie apostrofów .
Wskazówka: W pewnych rzadkich sytuacjach, jeżeli wartość atrybutu zawiera w sobie cudzysłów, użycie apostrofów jest niezbędne: imię='Jan "ShotGun" Kowalski'

Porada HTML: Atrybuty pisz małą literą

 

Jest istotne czy w nazwach i wartościach atrybutów użyjemy małych czy dużych liter.
Jednak World Wide Web Consortium (W3C) zaleca używać małych liter do zapisu wartości i nazw atrybutów w HTML 4.
Nowsze wersje (X)HTML będą wymagać małych liter do zapisu atrybutów.

Spis Atrybutów HTML

 

Komoletna lista atrybutów elementów HTML: Spis znaczników HTML.
Poniżej jest lista paru atrybutów które mogą być użyte w każdym elemencie HTML:

Atrybut Opis
class Określa dla elementu jedną lub więcej nazw klasy (odnosi się do klas w arkuszu stylów)
id Określa unikalny identyfikator elementu
style Określa wewnętrzny styl CSS dla elementu
title Określa dodatkową informację na temat elementu (wyświetlaną jako tool tip)
Więcej informacji na temat globalnych atrybutów znajdziesz tutaj: Spis globalnych atrybutów HTML.
o 1 komentarz:

piątek, 14 grudnia 2012

KURS HTML - NAGŁÓWKI HTML

Nagłówki są ważne w dokumentach HTML.

Nagłówki HTML

 

Nagłówki są definiowane w znacznikach od <h1> do <h6>.
<h1> definiuje najważniejszy nagłówek. <h6> definiuje najmniej ważny nagłówek.

Przykład

 

<h1>Tho jest nagłówek</h1>
<h2>Tho jest nagłówek</h2>
<h3>Tho jest nagłówek</h3>

Spróbuj Sam »
Uwaga: przeglądarki automatycznie dodają trochę pustej przestrzeni przed i po każdym nagłówku.

Nagłówki Są Ważne

 

Używaj nagłówków HTML tylko jako nagłówków. Nie używaj nagłówków do pogrubiania czy powiększania tekstu.
Silniki wyszukiwania używają Twoich nagłówków do indeksowania struktury i zawartości Twoich stron internetowych.
Odkąd użytkownicy mogą przejrzeć Twoje strony po nagłówkach, jest ważne żeby używać nagłówków do pokazania struktury dokumentu.
Nagłówek H1 powinien być używany jako główny nagłówek. Następnymi w hierarchii powinny być nagłówki H2, H3...

Linie HTML


Znacznik <hr> tworzy poziomą linię na stronie HTML.

 Element hr może być użyty jako separator zawartości strony:

Przykład

 

<p>To jest akapit</p>
<hr><p>To jest akapit</p>
<hr><p>To jest akapit</p>

SPRÓBUJ SAM »


Komentarze HTML


Komentarze mogą być wstawiane w kodzie HTML żeby był bardziej czytelny i zrozumiały. Komentarze są ignorowane przez przeglądarkę i nie są wyświetlane.

Przykład

 

<!-- To jest komentarz -->

SPRÓBUJ SAM »
 
Uwaga: Wykrzyknik jest po nawiasie otwierającym, ale nie ma go przed nawiasem zamykającym.

Podpowiedź HTML - Jak przejrzeć kod źródłowy HTML


Czy kiedykolwiek przyglądając się stronie internetowej zastanawiałeś się: "Hej! Jak oni to zrobili?"
Żeby się tego dowiedzieć, kliknij prawy przycisk myszy na stronie i wybierz "Zobacz Źródło" (IE) lub "Pokaż źródło strony" (Firefox), albo podobnie dla innych przeglądarek. To otworzy okno zawierające kod HTML strony.

Opis znaczników HTML


 W następnych rozdziałach tego kursu nauczysz się więcej o znacznikach HTML i ich atrybutach.

Znacznik Opis
<html> Definiuje dokument HTML
<body> Definiuje ciało dokumentu
<h1> to <h6> Definiuje nagłówki HTML
<hr> Definiuje poziomą linię
<!--> Definiuje komentarz
o Brak komentarzy:

czwartek, 13 grudnia 2012

KURS HTML - AKAPITY

Dokument HTML jest podzielony na akapity.

Akapity HTML

 

Akapity są definiowane za pomocą znacznika <p>.

Przykład

 

<p>To jest akapit</p>
<p>To jest kolejny akapit</p>

SPRÓBUJ SAM »
Uwaga: Przeglądarki automatycznie dodają pustą linię przed i po akapicie.

Nie zapomnij o znaczniku zamykającym

 

Większość przeglądarek będzie wyświetlać kod HTML poprawnie jeśli nawet zapomnimy o znaczniku zamykającym:

Przykład

 

<p>To jest akapit
<p>To jest kolejny akapit

 SPRÓBUJ SAM »
Powyższy przykład będzie działał w większości przeglądarek, ale nie jest to regułą. Zapominanie o znaczniku końcowym  może skutkować nieoczekiwanymi wynikami i błędami.
Uwaga: Następne wersje HTML nie pozwolą na pomijanie znacznika zamykającego.

Następna linia HTML

 

Użyj znacznika <br> jeśli chcesz przejść do następnej linii bez tworzenia nowego akapitu:

Przykład

 

<p>To<br>jest<br>akapit ze znakami nowej linii</p>

SPRÓBUJ SAM »
Element <br> to pusty element HTML. Nie ma znacznika zamykającego.

Wynik HTML w przeglądarce - Przydatne rady

 

Nie możesz być pewny/pewna jak będzie wyświetlany kod HTML. Duże lub małe ekrany i okna przeglądarek różnej wielkości będą tworzyć różne wyniki.
Wstawianie dodatkowych spacji czy pustych linii w kodzie HTML nie spowoduje zmian wyświetlania dokumentu w przeglądarce internetowej.
Przeglądarka usuwa dodatkowe spacje i puste linie przed wyświetleniem dokumentu HTML.
SPRÓBUJ SAM
(Przykład demonstruje trochę problemów z formatowaniem dokumentu HTML)


Więcej przykładów

 

Więcej akapitów
Podstawowe zachowania akapitów.

Opis znaczników HTML

Znacznik  Opis
<p>  Definiuje akapit
<br>  Wstawia znak nowej linii

o Brak komentarzy:

środa, 12 grudnia 2012

KURS HTML - FORMATOWANIE TEKSTU

Formatowanie tekstu HTML

 

Ten tekst jest pogrubiony Ten tekst jest pochylony To jest fragment kodu komputerowego

To jest indeks dolny i indeks górny

SPRÓBUJ SAM »

Znaczniki formatowania HTML

 

HTML używa takich znaczników jak <b> i <i> do pogrubiania lub pochylania tekstu.
Te znaczniki HTML nazywają się znacznikami formatowania (na końcu posta znajduje się kompletny spis znaczników formatowania).

Często <strong> działa jak <b> i  <em> działa jak <i>.

Jednakże, są różnice w znaczeniu tych znaczników:

<b> lub <i> definiuje tylko pogrubiony lub pochylony tekst.

<strong> lub <em> znaczy że chcesz aby tekst był wyświetlany jako ważny w rozumieniu użytkownika. Dzisiaj najbardziej popularne przeglądarki wyświetlają <strong> jak <b> i <em> jak <i>.


Przykłady - Spróbuj sam

 

Formatowanie tekstu
Jak formatować tekst w dokumencie HTML.
Tekst sformatowany
Jak kontrolować spacje, tabulatory i nowe linie za pomocą znacznika <pre>.
Znaczniki "kodu komputerowego"
Jak różnie można wyświetlać za pomocą znaczników "kodu komputerowego".
Adres
Jak zdefiniować informacje kontaktowe.
Skróty i akronimy
Jak obsługiwać skróty i akronimy.
Kierunek tekstu
Jak zmienić kierunek tekstu.
Cytaty
Jak obsłużyć długie i krótkie cytaty.
Wstawiony i usunięty tekst
Jak zaznaczyć usunięty i wstawiony tekst.

Znaczniki formatowania tekstu

 


Znacznik Opis
<b> Definiuje pogrubiony tekst
<em> Definiuje wyróżniony tekst
<i> Definiuje kursywę
<small> Definiuje mniejszy tekst
<strong> Definiuje ważny tekst
<sub> Definiuje indeks dolny
<sup> Definiuje indeks górny
<ins> Definiuje wstawiany tekst
<del> Definiuje usunięty tekst

 

Znaczniki "kodu komputerowego"

 


Znacznik Opis
<code> Definiuje tekst wyglądający jak kod komputerowy (kod programu)
<kbd> Definiuje tekst z klawiatury
<samp> Definiuje tekst wyglądający jak prosty kod komputerowy (kod programu)
<var> Definiuje zmienną
<pre> Definiuje tekst sformatowany

 

Znaczniki HTML Cytatów i Definicji

 


Znacznik Opis
<abbr> Definiuje skróty i akronimy
<address> Definiuje informacje kontaktowe
<bdo> Definiuje kierunek tekstu
<blockquote> Definiuje blokowy cytat (długi cytat)
<q> Definiuje krótki cytat
<cite> Definiuje tytuł pracy
<dfn> Definiuje definicję
o 1 komentarz:

wtorek, 11 grudnia 2012

KURS HTML - LINKI

Linki można znaleźć na prawie każdej stronie internetowej. Linki pozwalają użytkownikowi przenosić się z jednej strony WWW na inną.


Przyklady - Spróbuj sam


Linki HTML
Jak tworzyć linki w dokumencie HTML.
(Na końcu posta znajduje się więcej przykładów)


Hiperlinki (linki) HTML


Znacznik <a> definiuje hiperlink.
Hiperlink (lub link) to słowo, grupa słów, lub obrazek który możesz kliknąć żeby przeskoczyć do innego dokumentu HTML.
Jeśli przesuniesz kursor nad link na stronie, strzałka zmieni się w małą rękę.
Najważniejszym atrybutem znacznika <a> jest atrybut href, który wskazuje cel linka.
Standardowo w przeglądarkach linki wyglądają następująco:

  • Nie odwiedzony link jest niebieski i podkreślony
  • Odwiedzony link jest purpurowy i podkreślony
  • Link aktywny jest czerwony i podkreślony


Składnia Linka HTML


Kod HTML dla linka jest prosty. Wygląda tak:

<a href="url">tekst linka</a>
Atrybut href określa cel linka.


Przykład



<a href="http://www.w3schools.com/">Visit W3Schools</a>
który wyświetla się tak: Visit W3Schools
Kliknięcie tego linka przeniesie na stronę domową W3Schools.

 Uwaga: "tekst linka" nie musi być tekstem. Może być obrazkiem lub innym elementem HTML.


Linki HTML - Atrybut target


Atrybut target określa gdzie ma być otwarty dokument HTML wskazany przez linka.
Poniższy przykład będzie otwierał dokument w nowym oknie przeglądarki lub w nowej karcie:

Przykład


<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

SPRÓBUJ SAM »



Linki HTML - Atrybut id


Atrybut id może być użyty do stworzenia zakładki wewnątrz dokumentu HTML.
Uwaga: Zakładki nie są wyświetlane w żaden specjalny sposób. Są niewidzialne dla czytelnika.


Przykład


Odsyłacz z id wewnątrz dokumentu HTML:

<a id="porady">Sekcja przydatnych porad</a>
Stworzenie linka do "Sekcji przydatnych porad" wewnątrz tego samego dokumentu:

<a href="#porady">Odwiedź sekcję przydatnych porad</a>
Lub stworzenie linka do "Sekcji przydatnych porad" z innej strony internetowej:

<a href="http://www.w3schools.com/html_links.htm#porady">Odwiedź sekcję przydatnych porad</a>



Użyteczne porady


Uwaga: Zawsze dodawaj znak slash do podfolderu odniesienia. Jeśli stworzysz linka w ten sposób: href="http://www.w3schools.com/html", wygenerujesz dwa żądania do serwera, serwer najpierw doda znak slahs do adresu, a potem stworzy nowe żąda: href="http://www.w3schools.com/html/".


Więcej przykładów


Obrazek jako link
Jak użyć obrazka jako link.
Link do miejsca na tej samej stronie internetowej
Jak stworzyć link do zakładki.
Wydostanie się z ramki
Jak wydostać się z ramki (jeśli twoja strona jest zamknięta w ramce).
Tworzenie linka wysyłania wiadomości (mailto)
Jakl stworzyć linka do wysyłania wiadomości mail (będzie działać jeśli masz zainstalowanego i skonfigurowanego klienta pocztowego).
Tworzenie linka wysyłającego wiadomość 2
Inny link wiadomości mail.


Znacznik linka HTML



ZnacznikOpis
<a>Definiuje hiperlink
o 9 komentarzy:
Subskrybuj: Posty (Atom)