Podstawy htmla, html dla zielonych - język html dla początkujących ! Html od podstaw - html w pigułce dla każdego ! Poznaj html'a i zbuduj własną stronę internetową !

HTML w pigułce - dla każdego - od podstaw ! 

Przedstawię kilka podstawowych rzeczy dotyczących tworzenia stron internetowych za pomocą języka jakim jest HTML. Oczywiście za pomocą tych reguł, które tutaj podam będzie można stworzyć w pełni działającą stronę internetową oraz umieścić ją na własnym serwerze internetowym. 

Gdybyście chcieli stworzoną stronę udostępnić znajomym to warto założyć sobie darmowy serwer - czyli takie miejsce gdzie po wrzuceniu treści strony będzie ona dostępna dla każdego w internecie : http://pececik.blogspot.com/2010/04/darmowy-hosting-stron-bez-reklam.html

 Nie będę się tutaj rozpisywał, gdyż jest to html w pigułce - jednak dla początkujących i osób, które próbowały nauczyć się html'a (ale im nie wyszło) będzie to świetny początek ! 

A więc do dzieła - edytor kodu html to przydatna rzecz !  

Po pierwsze należy zaopatrzyć się albo w zwykły notatnik wbudowany w system Windows albo Edytor stron internetowych. W tym drugim przypadku będziemy mieli nieco więcej "luzu" gdyż programy często podkreślają nam słowa kluczowe (pogrubiają je) przez co kod staje się czytelniejszy. Ponadto edytory stron internetowych często mają funkcję "podpowiadania" dzięki czemu nie musimy znać wszystkich komend na pamięć a tylko kojarzyć "mniej więcej co i jak".

Ze swojej strony polecam : Htmlowiec  albo Pajączek są także inne darmowe programy.... 

Ja będę się posługiwał zwykłym notatnikiem ....

5,4,3,2,1.... zaczynamy !  

 Na początku wyjaśnię jedną kwestię - mianowicie każde słowo kluczowe (<  ...  >) należy kiedyś zamknąć 

w tym celu stosuje się łamaną kreskę a więc ! Bez kreski natomiast jest zwykłe słowo kluczowe, które rozpoczyna swoje działanie ... (więcej w dalszej części).

Aby było wiadomo w jakim języku piszemy - trzeba dać jakieś oznaczenie, że chodzi nam o html a nie np. o php (inny język służący do pisania bardziej zaawansowanych stron internetowych).

W tym celu stosuje się słowa kluczowe : html - na samej górze (rozpoczynamy dokument) i na samym dole (kończymy). Za ostatnim słowem kluczowym nic już nie umieszczamy !!! 

Po słowie kluczowym html , następuje nagłówek head - jednak nie jest on wymagany, ale bardzo przydatny. W nagłówku określamy takie rzeczy jak np. tytuł strony, autora, słowa kluczowe itp... - służy to między innymi do pozycjonowania - czyli "czegoś" dzięki czemu będziemy lepiej widoczni w internecie - po prostu będzie nas łatwiej znaleźć po wpisaniu w wyszukiwarce np. słowa "Strona Pececik" !

Tak więc na screenie widzisz że tytuł strony wpisujemy za pomocą słowa kluczowego Title, oczywiście musi być - o czym wcześniej wspomniałem znacznik zamykający po naszym tytule strony. Gdybyśmy go nie uwzględnili to wszystko za znacznikiem otwierającym było by brane jako tytuł ! 

Najważniejszą rzeczą jest jednak znacznik Body - oznacza on ciało naszego dokumentu i to w nim rzeczywiście tworzymy treść naszej strony internetowej. Możemy tutaj pisać tekst, wstawiać zdjęcia, umieszczać odnośniki, robić podstrony itp....

Komentarze - abyś zrozumiał .... 

Będę umieszczał co jakiś czas komentarz obok słowa kluczowego. Komentarz zawarty jest po znacznikach "//" , treść która znajduje się za nim nie jest brana pod uwagę przy tworzeniu strony internetowej ( w efekcie tego nie widać).

Jak sprawdzić to co mam - jak wyświetlić gotową stronę ....?

Język html w przeciwieństwie do np. php ma to do siebie, że możemy go wyświetlić bezpośrednio na komputerze bez uprzedniego wrzucania na serwer. Dzięki czemu wcześniej zobaczymy wynik strony i potem zadecydujemy czy chcemy go publicznie zobaczyć.
Gdy pracujemy w notatniku wystarczy kliknąć przycisk plik >> zapisz jako i wybrać typ "wszystkie pliki" a w nazwie dopisać rozszerzenie .html :

Czas na tekst .....

Tekst możemy min. pogrubić, pochylić, podkreślić itp.. służą do tego odpowiednie znaczniki (b,u,i) - należy pamiętać o ich zamknięciu gdy nie chcemy z nich korzystać !

Do formatowania tekstu służy znacznik FONT  to tam możemy określić rozmiar tekstu (size) albo kolor (color), jak pewnie zauważyłeś w większości są to angielskie odpowiedniki słów a więc łatwo zapamiętać.

Myślę, że reszty nie trzeba tłumaczyć, większość jest w komentarzach - w dalszej części pominę pisanie słów kluczowych początkowych i końcowych - będę tylko pisał to co znajduje się między znacznikami BODY !

Dopasowanie tekstu - wyrównanie do lewej, prawej, do środka ....

Dzięki tym znacznikom napiszesz tekst w zależności od potrzeb np. na środku, z lewej albo prawej strony ! Podobne zasady są np. w Microsoft Wordzie albo Open Office - gdzie także można wyrównać tekst do lewej, prawej itp...

Dodawanie grafiki, odnośniki, odstępy - akapity...

 

Za pomocą znaczników br oraz p , możemy wprowadzić odstępy między pisanym tekstem !
Chodzi o wprowadzenie odstępu w postaci pustego wiersza. Pierwszy znacznik tworzy odstęp jednego wiersza a znacznik p - to nowy akapit.

W przypadku linków - za pomocą a href  możemy stworzyć własne menu do naszej strony itp....
Co do wstawiania zdjęcia to możemy określić jego rozmiar albo zachować standardowe wymiary.
Po src podajemy źródło gdzie znajduje się nasz obrazek - gdy jest on w tym samym folderze co nasza strona to można podać tylko nazwę i rozszerzenie. W przypadku innej lokalizacji trzeba podać pełną ścieżkę C:\

Tło i tabelki - to ważna rzecz :)

Dla początkujących mogą być małe problemy z tabelami - jednak są one bardzo pomocną rzeczą, dzięki której stworzymy stronę dostosowaną do naszych potrzeb np. chcemy by w lewej części było menu a po prawej tekst albo jakieś informacje, newsy na stronie.
Chodzi o podzielenie strony na kilka mniejszych stron (bloków) - dzięki czemu łatwiej nią zarządzać i umieszczać elementy w odpowiednim bloku.
Znaczniki tr służą do tworzenia wierszy, natomiast td tworzą kolumny !
Oczywiście można dopasować także rozmiar np. jednej części bloku w stosunku do innych aby np. kolumna 1 była nieco mniejsza niż cała reszta... ale o tym może innym razem :)