Zaczynamy kodowanie w języku HTML

Szybki hosting dla WordPressa

Jak wygląda znacznik?

Jeśli już wiesz czym jest HTML i czego możesz się po nim spodziewać, czas najwyższy dowiedzieć się jak on wygląda. Oto przykład:

<b>Ala ma kota</b> a kot ma Alę.
W tym przykładzie pojawia się jeden z najczęściej używanych znaczników – pogrubienie . Każdy znacznik ma swoją nazwę – jest ona najczęściej skrótem od słowa angielskiego, oznaczającego właściwość komendy. Znacznik możesz poznać po tym, że jego nazwa jest ograniczona znakami mniejszości i większości. Każdy znacznik według standardu posiada swój kod otwierający oraz zamykający – wszystko co znajduje się pomiędzy nimi jest blokiem opisanym przez ten znacznik.
W przykładzie, znacznik otwierający to <b>, a zamykający to </b>. Jak widzisz, znacznik zamykający różni się tylko jednym elementem – ukośnikiem.
Jak już zapewne się domyśliłeś, przykład da następujący efekt: Ala ma kota a kot ma Alę.

Parametry znaczników

Każdy znacznik może posiadać jeden lub więcej parametrów, które umożliwiają zdefiniowanie dodatkowych właściwości.

Wszystkie parametry należy podawać w cudzysłowach.

Oto przykład:

<p align="center">Ala ma kota</p>
Znacznik <p> oznacza paragraf. Podany tutaj parametr align określa, w jaki sposób treść ujęta w tym paragrafie będzie wyrównywana w poziomie – w tym przypadku będzie to wyrównanie do środka.

Jak poprawnie kodować?

Każdym językiem rządzą pewne zasady. Nie inaczej jest z HTML’em.

    • Każdy znacznik musi posiadać otwarcie i zamknięcie. Wyjątkami od tej reguły są znaczniki nie posiadające zawartości.
      WAŻNE! Język XML wymaga zamykania wszystkich znaczników.
    • W przypadku zagnieżdżania znaczników muszą być one zamykane w odwrotnej kolejności niż były otwierane. Elementy HTML możemy zagnieżdżać. Oznacza to, że jeden element HTML może zawierać inny element.
      <p><b>Witaj!</b></p>
    • Wszystkie parametry znaczników należy podawać w cudzysłowach.
      <p align="left">Witaj!</p>

Oprócz tego, standard definiuje jakie znaczniki mogą być wzajemnie zagnieżdżane – po szczegóły  sięgnij do specyfikacji technicznej.

Struktura dokumentu

Najłatwiej omówić strukturę dokumentu na przykładzie:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Tytuł strony</title>
<meta http-equiv="Content-Type" content="text/html;  charset=iso-8859-2">
</head>
<body>

To jest treść dokumentu </body> </html>

Dokument HTML można bardzo łatwo poznać po tym, że na samym początku znajduje się znacznik <html>, a na jego końcu </html>. Przed  umiesza się jeszcze definicję, określającą w jakim standardzie jest napisany cały dokument – w tym przypadku jest to HTML 4.01 Transitional.

Idąc dalej zauważysz podział dokumentu na dwie części:

  • Nagłówek <head>
  • Ciało dokumentu <body>

Nagłówek zawiera podstawowe informacje na temat dokumentu, tj. tytuł, standard kodowania tekstu, wersję językową, informacje o autorze itp. Oprócz tego możesz tam umieszczać style CSS, o których więcej w kolejnych rozdziałach.

W ciele dokumentu znajduje się cała zawartość, którą później zobaczysz na ekranie. To właśnie tutaj umieszczasz tekst właściwy, grafikę, dźwięki, animacje – wszystko to z użyciem odpowiednich znaczników.

Nagłówek dokumentu

Oto przykładowy nagłówek dokumentu HTML. Przeanalizuj go linia po linii.

  <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
  <title>Ala i jej kot</title>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">
  <meta name="description" content="To jest strona domowa Ali i kota">
  <meta name="keywords" content="strona domowa, ala, kot">
  <meta name="generator" content="Macromedia HomeSite 5.0">
  <meta name="author" content="Ala Kowalski">
  </head>
  1. Definiujesz typ dokumentu – jest to HTML 4.01 Transitional.
  2. Otwierasz dokument HTML.
  3. Otwierasz nagłówek.
  4. Ustalasz tytuł dokumentu na “Ala i jej kot”.
  5. Definiujesz rodzaj kodowania tekstu w dokumencie na iso-8859-2.
  6. Opisujesz stronę – w kilku słowach, zdaniach.
  7. Wpisujesz słowa kluczowe, po których strona ma być rozpoznawana w wyszukiwarkach.
  8. Definiujesz jakiego programu użyłeś do stworzenia dokumentu.
  9. Dodajesz autora strony.
  10. Zamykasz sekcję nagłówka.
Taki opis dokumentu jest kompletny – masz wszystkie informacje, których potrzebujesz. Dokument posiada tytuł, informacje o jego zawartości, autorze i narzędziu w jakim był tworzony. Tak naprawdę większość z tych informacji jest zbędna. Najistotniejsze informacje są następujące:
  <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
  <title>Ala i jej kot</title>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">
  <meta name="keywords" content="strona domowa, ala, kot">
  </head>
Najważniejsze informacje to rodzaj dokumentu, jego tytuł oraz rodzaj kodowania dokumentu. Dodatkowo można też zamieścić listę słów kluczowych – pomoże to znaleźć stronę w wyszukiwarkach internetowych.

Ciało dokumentu (body)

W ciele (czyli tzw. body) dokumentu znajdują się wszystkie informacje, które zostaną wyświetlone na ekranie odwiedzającego. Przeanalizuj ten fragment.

  <body bgcolor="#FFFFFF" text="#000000" link="#0000FF">
  <div align="center">
  <h1>Witam na mojej stronie</h1>
  </div>
  <div>
  <p>Znajdziesz tutaj bardzo dużo informacji o Mnie i moim kotku...</p>
  <img src="gfx/kotek.jpg" width="200" height="200" alt="Kotek" border="0">
  </div>
  </body>
  </html>
  1. Otwarcie ciała dokumentu. W znaczniku zdefiniowałeś kilka dodatkowych parametrów:
    • bgcolor – kolor tła dokumentu,
    • text – kolor czcionki,
    • link – kolor linków.
  2. Wyrównujesz blok do środka.
  3. Włączasz nagłówek pierwszy (największy z cyfrą 1) oraz wpisujesz powitanie na ekranie.
  4. Zamykasz blok, który był wyrównywany do środka.
  5. Otwierasz nowy blok, którego zawartość będzie wyrównywana do lewej i prawej.
  6. Otwierasz paragraf i wypisujesz tekst. Na końcu zamykasz paragraf.
  7. Wstawiasz rysunek do dokumentu – podajesz jego ścieżkę, rozmiary oraz podpis.
  8. Zamykasz blok otwarty w linii 5.
  9. Zamykasz ciało dokumentu.
  10. Zamykasz dokument HTML.

Jest to dosyć prosty dokument. W następnych rozdziałach dowiesz się więcej na temat różnych znaczników, tabel i stylów. Dzięki nim będziesz mógł tworzyć o wiele bardziej zaawansowane dokumenty.

HTML i polskie znaki

Prawdą jest, że nie ma jednego standardu zapisu polskich znaków na stronach WWW. Istnieją trzy metody kodowania tekstu:

  • iso-8859-2 – jest to oficjalna norma ISO (International Standarization Organization), określająca kody liter alfabetów krajów Europy Środkowej (w tym Polski),
  • CP-1250 – standard stworzony przez ANSI (American National Standards Institute). Jest on stosowany w systemach operacyjnych firmy Microsoft,
  • UTF – (Unicode Transformation Formats) jest uniwersalnym formatem, opisującym znaki wszystkich alfabetów (w tym momencie zdefiniowano ponad 100 000 znaków), za pomocą unikalnego, niepowtarzalnego numeru.

Jaki standard wybrać? Jeśli korzystasz z systemu Windows możesz wybrać CP-1250. Jednakże w naszym kraju obowiązują standardy ISO, a nie ANSI. Dlatego też zdecydowana większość stron jest tworzona w iso-8859-2 i ten standard polecamy.

Większość programów to produkty amerykańskie, wobec czego nie wszystkie obsługują kodowanie iso-8859-2. Aplikacje takie jak: FrontPage, Macromedia DreamWeaver 4+, Adobe GoLive 4+ obsługują je bezproblemowo. Natomiast programy: Macromedia HomeSite lub Notatnik samodzielnie nie umożliwiają tworzenia stron w tym formacie. Problem można rozwiązać na dwa sposoby:

  • stworzyć stronę np. w CP-1250, a następnie skorzystać z jednego z wielu konwerterów tekstu,
  • zainstalować na swoim komputerze klawiaturę ISO.

Bezpieczny hosting dla Twojej strony WWW

Przygotowaliśmy miejsce, w którym Twoja strona WWW i poczta e-mail będą się czuły komfortowo.


  • Czy artykuł był pomocny ?
  • Tak   Nie
Szukaj
Generic filters
Tylko dokładne dopasowania
Szukaj w tytułach
Szukaj w treści
Filter by Article Categories
Najczęściej zadawane pytania
Dodatkowe narzędzia hostingu
Statystyki serwera (nowe)
Połączenie SSH
Statystyki serwera (stare)
WebFTP
Autoinstalator
Kontrola wersji (SVN)
Listy mailingowe
Poczta home.pl
Obsługa poczty webmail
Programy pocztowe
Nowa platforma home.pl
Częste pytania
Bezpieczeństwo
Instalacje
Panel klienta
Domeny
Hosting
Serwer Apache
Bazy danych
Certyfikaty SSL
Zamawianie SSL
Instalacja i konfiguracja SSL
Poczta e-mail
Office 365
WordPress Hosting SSD
Dodatki od partnerów
Poprzednia platforma home.pl
Certyfikaty SSL
Zamawianie certyfikatów SSL
Konfiguracja i instalacja SSL
Panel home.pl
Informacje podstawowe
Pulpit
Usługi
Płatności
Profil
Centrum Pomocy
Operacje w Panelu home.pl
Serwery
WebFTP
Informacje podstawowe
Konfiguracja serwerów
Serwery Unix
Serwery Windows
Obsługa baz danych
phpMyAdmin (MySQL)
phpPgAdmin (PgSQL)
myLittleAdmin (MSSQL)
Sklep internetowy eSklep
Panel usługi eSklep
RODO w sklepie internetowym
Panel sklepu internetowego
Pierwsze kroki
Promocja sklepu
Sprzedaż
Pierwsze uruchomienie
Dodatki od partnerów
Asortyment
Klienci
Integracje
Inne integracje
Systemy aukcyjne
Baza produktów
Aplikacje
App store
Aplikacja mobilna
Marketing
Modyfikacja wyglądu
Dokumentacja
Dla deweloperów
Style graficzne
Inne zagadnienia
Raporty i statystyki
Zawartość
Filmy instruktażowe
Konfiguracja sklepu
Rozliczenia i dokumenty
Faktury
Zmiana danych (cesja)
Rozliczenia i płatności
Dokumenty do pobrania
Produkty i usługi
Kreator Stron WWW
eCommerce
Moduły
Ustawienia
Szablony
Nawigacja
Publikacja i dodatki
Szybki start
Prestahosting
Profesjonalne usługi IT
Certyfikaty SSL
Przywracanie danych
Udostępnienie logów
Operacje na plikach i bazach danych
WordPress
Terminal płatniczy SumUp
Wordpress hosting SSD
Office 365
OneDrive
Domeny
Informacje podstawowe
Rejestracja / opłacanie
Konfiguracja domen
Transfer domen
Giełda domen
Dodatki do domen
Serwery VPS
Skrzynki e-mail
Microsoft Exchange
Cloud Email Xchange
Obsługa skrzynek w Panelu home.pl
Jak zarejestrować Personal email lub Business email?
Bezpieczeństwo
eKsięgowość
Reklama internetowa
Reklama Allegro Ads
Tworzenie stron WWW
Contact LEADer
Reklama banerowa Google
Zakupy Google
Google Ads (AdWords)
eKampanie Google
SEMSTORM
Pozycjonowanie
rankingCoach
Baza wiedzy
Facebook
Systemy CMS
Internet w praktyce
Przydatne programy
Konfiguracja programów FTP
Zagadnienia techniczne
.htaccess
mod_rewrite
Kursy i specyfikacje
Kurs HTML
Kurs PHP
Kurs SQL
Rejestracja usług
RODO w home.pl
English
Control Panel
Webmail
FTP
Office 365
WordPress
SSL
Aplikacje w marketplace
SimplySign
SiteLock - ochrona WWW
Dropsuite Email Backup
CCleaner
Antywirus Kaspersky
Dropbox - dysk w chmurze
Płatności PayU
Programy antywirusowe AVAST
Office 365
AVG PC TuneUp
Reklama na start
Google AdWords
Zareklamuj stronę WWW na Facebook
Cloud Email Xchange
Brand24
Microsoft OneDrive
FreshMail.pl
Tłumaczenia online
G Suite - poczta Gmail
Program prowizyjny
Acronis Backup
Informacje podstawowe
Ustawienia dodatkowe
Panel użytkownika
Panel administratora
lub