Rekomendowane odpowiedzi

Wielki świat HTML!
1 - Podstawy i informacje ogólne

 

Witajcie w pierwszym z (mam nadzieję wielu) poradników na temat języka HTML. W dzisiejszym zajmiemy się podstawami i wprowadzeniem w świat programowania webowego.


Rozwińmy może na samym początku akronim HTML, otóż jest to HyperText Markup Language.
No fajnie, fanie, ale co to znaczy?
Jest to 'język standardowych znaczników', który opisuje strukturę naszej strony w postaci tagów. Same tagi nie są pokazywane użytkownikowi przeglądającemu naszą stronę, lecz są renderowane przez przeglądarkę, która wie co ma się znajdować w danym miejscu.

 

Ale zanim przejdziemy do pisania i zgłębiania naszej wiedzy zacznijmy od narzędzia w jakim będziemy pracować. Osobiście do pisania stron www czy arkuszy stylów używam Notepad++. Zapewne już nie raz o nim słyszeliście, jeśli nie zapraszam do artykułu TUTAJ(Nie długo pojawi się odnośnik)!

Dowiecie się jak zainstalować i optymalnie skonfigurować sam program, aby nie zagrażał naszym oczom i przyjemnie kolorował składnie dla lepszej wygody. 

 

Tagi:
To nazwy elementów w nawiasach <>, wyróżniamy dwa typy tagów:
<h1>Nagłówek</h1> Składający się z dwóch elementów otwierającego i zamykającego tag, przykładowy użyty tu to nagłówek np strony,
<b /> Składający się z jednej części, przykład użyty to przeniesienie wszystkiego poniżej o linie w dół tzw. enter.

Może napiszemy coś więcej o samym kodzie.


Jako iż świat brnie do przodu to w tym poradniku będziemy zajmować się najnowszym standardem HTML czyli w wersji 5.
Więc jeśli chcemy w tym standardzie napisać naszą stronę, musimy dać znać przeglądarce:

"Hej! To witryna w HTML wersji 5!".
A definiuje to następująca deklaracja:

<!DOCTYPE HTML>

Wpisują to na szczycie kodu naszej witryny wszyscy będą widzieli ją prawidłowo, tak jak chcesz!

 

Dalej wypadało by otworzyć kod naszej przyszłej pracy i powiedzieć przeglądarce w jakim jest języku, a wykonuje to poniższy tag:

<html lang="pl">

</html>

To w tym tagu dzieje się cała magia! To w nim 'powiemy' przeglądarce jak wygląda nasze dzieło!

 

Cały kod można porównać do ciała człowieka, ponieważ jest jeszcze podzielony na dwie bardzo ważne części, mianowicie głowę i ciało:

<head>
  
</head>

W tej 'sekcji' strony przypisujemy tytuł strony, odnośniki do innych plików(np. kaskadowego arkusza stylów CSS), możemy dodać opis strony, słowa kluczowe, czy powiedzieć przeglądarce jaka ikona/zdjęcie ma być obok tytułu w karcie przeglądarki.


I to jest sekcja w której zapisujemy nasze wszystkie znaczniki.

<body>
  
</body>

 

Zanim napiszemy nasz pierwszy projekt to warto znać również komentarze i technikę zapisu ich.

Co to komentarz w HTML i po co nam jest potrzebny?

A więc komentarz to ciąg znaków który jest omijany przez przeglądarkę, służy do opisywania kodu i jest to tylko i wyłącznie dla programisty. Komentarze zapisujemy tak:

<!-- To jest komentarz i nikt nie zobaczy tego w przeglądarce -->

 

Jeśli już znamy podstawowe znaczniki to możemy napisać swoją pierwsza stronę, jak prawdziwi programiści zaczniemy od klasycznego wyświetlenia: 'Hello world!' w oknie naszej przeglądarki. Kod źródłowy wygląda następująco:

<!DOCTYPE html> <!-- Przeglądarka już wie że to HTML 5 -->
<html lang="pl"> <!-- Otwarcie dzieła -->
<head> 
<title>Moja pierwsza strona</title> <!-- znacznik nadający tytuł strony -->
</head>
<body>
<h1>Hello world!</h1> 
</body>
</html> <!-- Zamkamy -->

A tak wygląda nasze pierwsze dzieło w przeglądarce!

txB909V.png

Oczywiście aby przeglądarka wyświetliła nasze działo musimy zapisać je z rozszerzeniem .html!

W tym poradniku to wszystko, w kolejnej części poznamy lepiej tajniki HTML!

Zajmiemy się znacznikiem 'głowy' i opiszemy to co w niej można zadeklarować!

A dla leniwych jestem w stanie rozpatrzyć opcje robienia video-poradników, dajcie znać czy chcecie ;)

Kłaniam się nisko, Heheszek

 

Poradnik napisany na potrzeby portalu forum.pompateam.pl

Zakazuje się kopiowania i rozpowszechniania bez

zgody autora poradnika. Wszelkie prawa zastrzeżone!

Autor: Heheszek

  • Upvote 3

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Dzięki. Bardzo mi pomogłeś tym poradniczkiem. Oczywiście nie wszystko się tu znajduje, ale jest super. Właśnie w szkole na informatyce od niedawna zajmujemy się pisaniem stron internetowych w notepadzie :) +

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Nie ma problemu @GsGreQ, jak masz pytania dotyczące HTML/CSS pisz spokojnie postaram się pomóc jak najjaśniej :) 

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Bardzo fajny poradnik. Dla początkujących jest to bardzo wiele i może im się przydać. Leci + za poświęcony czas na napisanie takiego poradnika. Mam nadzieję że i mnie czymś zaskoczysz ;)

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Tylko zarejestrowani użytkownicy mogą dodawać komentarze

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się


Kontakt


TS3: pompateamspeak.pl
Email: [email protected]

Zaprzyjaźnione serwisy: