Z tego artykułu dowiesz się jak zacząć przygodę z pisaniem stron internetowych.
Na początek naciśnij „ctrl + u” na klawiaturze komputera. Wyświetli Ci się kod źródłowy mojego bloga. Kiedy spojrzysz na niego ponownie po przeczytaniu tego artykułu, będziesz potrafił wyróżnić wiele jego elementów. Aby zacząć, potrzebny jest Ci odpowiedni program. Na ten moment polecam Notepad++.
- Po zainstalowaniu Notepada++ i uruchomieniu go, naciśnij „ctrl + n” – otworzy się nowa karta. W tym czystym dokumencie zaczynamy budować Twoją pierwszą stronę internetową.
- Czas na znaczniki lub inaczej tagi! Piszemy je małymi literami, służą do oznaczenia początku i końca elementu. Pierwszym znacznikiem jaki wpiszesz jest
<html>.Informuje on przeglądarkę, że otwieramy stronę www i piszemy ją w języku html. W następnej linii należy zamknąć tę stronę. Używamy kolejnego znacznika:</html>.Wygląda to tak:
<html> </html>
Każda strona internetowa zaczyna się znacznikiem<html>i kończy znacznikiem</html>. - W znacznikach
<html>mieści się cała treść, którą widzisz na stronie i tzw. głowa, bez której nic nie zadziała. Pomiędzy znacznikami<html>należy więc umieścić kolejne:<head>czyli głowę naszej strony, od której bardzo wiele zależy oraz<body>czyli ciało, w którym umieszczamy wszystko to co będzie wyświetlane na ekranie przeglądarki.
<html> <head> </head> <body> </body> </html> - Najwyższa pora wyświetlić coś na stronie internetowej. Teksty nagłówków umieszcza się w znacznikach
<h1>– heading. Pamiętaj! Wszystko co ma być wyświetlone na ekranie musi znajdować się w body twoje strony. Pomiędzy znacznikami<h1>wpisz tekst: Moja pierwsza strona. Teksty „zwyczajne” umieszcza się w znacznikach<p>– paragraph. Pod<h1>, w znacznikach<p>wpisz: Niedługo będę najlepszym webmasterem w Polsce. Zapisz plik jako „index.html” używając skrótu „ctrl + s” np. na pulpicie. Gdy już zapiszesz plik, kliknij dwukrotnie na jego ikonę na pulpicie.To właśnie jest twoja pierwsza strona internetowa.
WAŻNE! Na stronie może znajdować się tylko jeden znacznik h1- jest to główny tytuł strony. Wszystkie pozostałe tytuły/podtytuły mogą nazywać się h2, h3, h4 etc.
<html> <head> </head> <body> <h1> To moja pierwsza strona </h1> <p> Niedlugo bede najlepszym webmasterem w Polsce </p> </body> </html> - Teraz czas uzupełnić twój kod. W znaczniku
<head>musi znaleźć się kilka ważnych informacji o Twojej stronie. Przede wszystkim musisz ją zatytułować. Służy do tego znacznik<title>.Wpisz do niego tytuł swojej strony np. Moja strona. W<head>nie używa się<h1>ani<p>. Pisz po prostu między znacznikami<title>Poza tym należy zadbać o to, aby przeglądarka wyświetlała polskie znaki, służy do tego linijka:<meta charset="utf-8">. W Notepadzie++ należy także wybrać polecenie: kodowanie/koduj w utf-8.Na samej górze dokumentu należy wkleić linijkę:<!DOCTYPE html>.Informuje ona przeglądarkę, że strona napisana została w języku HTML5.
- Ten szablon (z pominięciem h1 i p) możesz skopiować, gdy będziesz rozpoczynał tworzenie każdej nowej strony internetowej.Na koniec uzupełnijmy jeszcze body tej strony. Będzie składać się z następujących elementów:
- nagłówka – znacznik
< header > - nawigacji – znacznik
< nav > - treści, zawartości – znacznik
< section > - stopki – znacznik
< footer >
Teraz wpisz te znaczniki do body w kodzie twojej strony. Przenieś h1 i p do nagłówka. W nawigacji h2 o treści „Nawigacja”, w sekcji h2 o treści „Sekcja” i w stopce h2 o treści „Stopka”. Odśwież swoją stronę. Elementy ułożyły się jeden pod drugim.
Kod powinien wyglądać następująco:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Moja strona </title> </head> <body> <header> <h1> To moja pierwsza strona </h1> <p> Niedlugo bede najlepszym webmasterem w Polsce </p> </header> <nav> <h2> Nawigacja </h2> </nav> <section> <h2> Sekcja </h2> </section> <footer> <h2> Stopka </h2> </footer> </body> </html> - nagłówka – znacznik
Tak wygląda szkielet twojej strony internetowej.
Można go dowolnie modyfikować, rozbudowywać i uzupełniać o treść, obrazy czy filmy.
Przejrzyj teraz kod źródłowy mojego bloga. Naciśnij ‚ctrl + u’. Kilka jego elementów już poznałeś, prawda?
Kontynuuj przygodę z pisaniem stron internetowych. Przejdź do artykułu Podstawowe znaczniki html.
Nauka HTML to podstawa, aby stworzyć własną stronę www. Potrzeba jednak motywacji, aby stworzyć kilka szablonów własnoręcznie.
Podczas kodowania stron internetowych przydaje się także wiedza z SEO, gdzie struktura kodu HTML i CSS jest naprawdę istotna dla robota indeksującego treści.