Przejdź do treści

HTML dla zielonych

Kurs języka HTML dla zupełnie początkujących. Napisz własną stronę WWW nawet w ciągu jednego dnia i wprowadź ją do internetu za darmo. Stworzenie strony WWW jest naprawdę proste. Zapraszam!

Zaczynamy kurs HTML!

Czy tworzenie stron internetowych naprawdę jest tak trudne, jak mówią?

Widzę, że jesteś "zielony/zielona"... ale nic się nie martw. Jeśli koniecznie chcesz "zmienić kolor", przeczytaj umieszczony poniżej tekst. Pozwoli Ci on, stworzyć Twoją pierwszą stronę internetową, nawet w ciągu jednego dnia. Jeśli uważasz, że pisanie stron w języku HTML jest dla Ciebie "czarną magią", a sama strona jest jakimś tajemniczym i bardzo skomplikowanym dokumentem, to się mylisz. Napisanie krótkiej strony internetowej jest prostsze niż Ci się wydaje. Zatem nie trać już czasu na wymówki typu: Ja się niczego nie nauczę! i tym podobne, bo to nieprawda. Zacznij już lepiej czytać.

Mam tylko jedną prośbę: postaraj się przeczytać w miarę uważnie i po kolei całą treść na tej stronie. Jeśli pominiesz jakiś punkt lub przeczytasz go zbyt pobieżnie, może to spowodować, że nie zrozumiesz następnych.

Źródła

Opis tutaj zawarty, został opracowany na podstawie następujących specyfikacji:

Edytory HTML

Który edytor HTML wybrać: Pajączek, CoreEditor, Bluefish, Brackets, PSPad, gedit, Kate, Quanta Plus, SCREEM, Smultron?

Co jest potrzebne, żeby napisać stronę internetową? Teoretycznie może to być dowolny edytor tekstu, no i oczywiście dobre chęci. Dokument HTML, czyli Hypertext Markup Language - Hipertekstowy Język Oznaczania, jest po prostu plikiem tekstowym, gdzie wpisujemy wszystkie polecenia dotyczące formatowania tekstu, wstawiania grafiki i inne. Lecz pisanie strony w zwykłym edytorze tekstu byłoby bardzo uciążliwe. Dlatego powstało wiele wyspecjalizowanych edytorów, które ułatwią, przyspieszą i uprzyjemnią Twoją pracę. Poniżej znajdziesz listę popularnych edytorów HTML (kolejność wg licencji i alfabetycznie). Informacje częściowo zostały zaczerpnięte ze stron producentów.

Windows

Pajączek (shareware - płatny)
Najbardziej znany polski edytor HTML rozwijany od lat. Oferuje szerokie wsparcie dla najnowszych technologii internetowych, z których warto wymienić takie jak HTML, XHTML, XML, PHP, JavaScript, VBScript, Perl, MathML, SVG, SMIL, P3P, ASP i inne. Wsparcie to dotyczy nie tylko ułatwionej edycji plików źródłowych w tych językach - program oferuje bowiem kontekstową dokumentację dla wybranego polecenia języka, przeglądanie za pomocą serwera czy funkcję dynamicznego kodu, która uwalnia od konieczności pamiętania poleceń języka.
CoreEditor (płatny - dostępna wersja DEMO)
Tańszy konkurent Pajączka, następca darmowego EdHTML przepisany zupełnie od nowa. Bardzo dobrze spisuje się jako edytor dla osób programujących w Pascalu, Asemblerze, Delphi, C, Java itd. Niemniej największy nacisk położony został na wsparcie dla takich technologii jak xHTML, CSS, PHP, JavaScript i MySQL.
Bluefish (darmowy) ★★★☆☆
Szybki i lekki edytor dla webmasterów-programistów. Wspiera m.in.: HTML, PHP, C, Java, JavaScript, JSP, SQL, XML, Python, Perl, CSS, ColdFusion, Pascal. Zawiera kreatory znaczników HTML, a także specjalne dla szkieletu strony, tabel, ramek, albumów zdjęć itp. Automatyczne domyka znaczniki. Posiada wbudowane narzędzie wyszukiwania i zamiany w wielu plikach jednocześnie oraz przeglądarkę dokumentacji znaczników i funkcji. Integruje się z innymi aplikacjami. Istnieje polska wersja językowa.
Brackets (darmowy) ★★★★☆
Lekki, a zarazem bardzo zaawansowany i nowoczesny edytor tekstu przeznaczony przede wszystkim dla webmasterów. Dzięki podglądowi na żywo bezpośrednio w przeglądarce można na bieżąco weryfikować efekty zmian wprowadzanych w tworzonym kodzie HTML i CSS. Dodatkowo obsługuje instalowanie wielu darmowych rozszerzeń, które pozwalają znacznie zwiększyć możliwości programu i jeszcze lepiej dopasować go do własnych potrzeb.
PSPad (darmowy) ★★★☆☆
Szybki i lekki edytor produkcji czeskiej, jednak radzący sobie z kodowaniem polskich znaków lepiej niż niejeden rodzimy program. Oczywiście posiada polską wersję językową. Uwaga: zaraz po instalacji należy w ustawieniach programu usunąć skróty klawiaturowe kolidujące z kombinacjami służącymi do uzyskania polskich znaków diakrytycznych (np. Alt+L)!
Wspiera m.in. następujące języki: HTML, XHTML, XML, CSS, JavaScript, PHP, C/C++, Java, Pascal, Perl, Python, RSS, SQL (MySQL, Interbase, MSSQL, Oracle, Sybase), Visual Basic, Assembler. Pozwala korzystać z szablonów dokumentów. Ma wbudowany podgląd dokumentów za pomocą systemowej przeglądarki WWW. Integruje się z zewnętrznymi programami, między innymi edytorem CSS. Obsługuje mechanizm wtyczek. Zawiera narzędzie do kompresji i dekompresji kodu HTML oraz rozbudowany eksplorator kodu z listą funkcji i elementów zawartych w edytowanym dokumencie. Posiada zaimplementowaną funkcję dopasowywania nawiasów, podpowiedzi oraz kreatory znaczników i funkcji, które można samodzielnie tworzyć i modyfikować. Obsługuje makrokody. Zawiera wbudowane narzędzie do porównywania plików oraz wyszukiwania i zamiany w wielu plikach jednocześnie. Przydatną funkcją jest także próbnik kolorów ekranu, tabela znaków ASCII oraz sprawdzanie pisowni.

Linux

Bluefish (darmowy) ★★★☆☆
Oprócz wersji dla systemu Windows (opis powyżej) edytor ten dostępny jest także dla Linuksa.
Brackets (darmowy) ★★★★☆
Oprócz wersji dla systemu Windows (opis powyżej) edytor ten dostępny jest także dla Linuksa.
gedit (darmowy) ★★★☆☆
Oficjalny edytor środowiska GNOME, cechujący się prostotą. Wspiera m.in.: C, C++, Java, HTML, XML, Python, Perl. Automatycznie dodaje wcięcia linii kodu oraz dopasowywuje nawiasy. Obsługuje wtyczki, np.: statystyki dokumentu, integracja z zewnętrznymi aplikacjami, makrokody, lista znaczników.
Kate (darmowy) ★★★☆☆
Wchodzi w skład środowiska KDE. Dostępna również uproszczona wersja pod nazwą KWrite. Podświetla składnię, dopasowuje nawiasy oraz automatyczne dodaje wcięcia linii kodu. Obsługuje autouzupełnianie, a także mechanizm wtyczek. Wbudowana jest funkcja sprawdzanie pisowni oraz konwersja kodowania znaków.
Quanta Plus (darmowy)
Wchodzi w skład środowiska KDE. Podświetla składnię m.in.: HTML, XHTML, XML, XSLT, CSS, JavaScript, Java, PHP, C/C++, C#, Python, Perl, SQL (MySQL, PostgreSQL), Assembler, ASP, JSP, Pascal. Dopasowuje i automatycznie domyka nawiasy, jak również dodaje wcięcia linii kodu. Zawiera liczne kreatory znaczników, zaawansowane autouzupełnianie, podpowiedzi i automatyczne zamykanie znaczników. Umożliwia podgląd dokumentu w kilku trybach oraz przeglądarkach (Konqueror, Firefox, Mozilla, Netscape, Opera, Lynx). Posiada edytor znaczników i atrybutów, a także zaawansowany eksplorator struktury dokumentu. Załączona jest dokumentacja dla języków HTML, CSS, JavaScript, PHP. Zawiera szablony dokumentów i skryptów. Obsługuje wtyczki oraz integruje się z innymi aplikacjami. Posiada zintegrowane narzędzie wyszukiwania i zamiany w wielu plikach jednocześnie, porównywania plików oraz edytor map odsyłaczy. Wspiera CVS. Wbudowana jest funkcja sprawdzania pisowni.
SCREEM - Site CRreation and Editing EnvironMent (darmowy)
Zawiera eksplorator linków z możliwością sprawdzenia martwych odnośników. Udostępnia kreatory, autouzupełnianie, podpowiedzi i automatycznie zamykanie znaczników. Obsługuje szablony dokumentów (interpretuje pliki programu Dreamweaver). Wspiera CVS. Posiada wbudowany eksplorator struktury dokumentu. Integruje się z innymi aplikacjami. Zawiera narzędzie wyszukiwania i zamiany w wielu plikach jednocześnie.

Mac OS X

Smultron (płatny)
Oferuje podświetlanie składni, tworzenie biblioteki snippetów, czyli często używanych bloków kodu. Posiada eksplorator funkcji występujących w edytowanym dokumencie. Obsługuje autouzupełnianie i automatyczne domykanie znaczników. Zawiera wbudowane narzędzie wyszukiwania i zamiany w wielu plikach jednocześnie. Obsługuje AppleScript.
Bluefish (darmowy) ★★★☆☆
Oprócz wersji dla systemu Windows (opis powyżej) edytor ten dostępny jest także dla Mac OS X.
Brackets (darmowy) ★★★★☆
Oprócz wersji dla systemu Windows (opis powyżej) edytor ten dostępny jest także dla Mac OS X.

Jeśli nie wiesz, który edytor HTML będzie dla Ciebie odpowiedni albo wolisz poszukać programu obcojęzycznego, zobacz: Ranking edytorów HTML (online). Dodatkowe opisy i porównania wraz z plikami do ściągnięcia znajdziesz również np. w serwisie DobreProgramy.pl lub w magazynie Komputer Świat.

Jaki edytor HTML wybrać?

Istnieją również edytory graficzne, tzw. WYSIWYG (ang. What You See Is What You Get, czyli To Co Widzisz Jest Tym Co Otrzymasz). Jest nim choćby FrontPage dostępny w pakiecie biurowym Microsoft Office. Aby się nimi posługiwać, nie musisz wcale znać języka HTML, ponieważ stronę tworzy się w nich jak w zwykłym edytorze tekstu, a cały kod HTML generuje automatycznie program. Ale nie ma nic za darmo (no może oprócz tego kursu :-)). Takie edytory nie dają Ci pełnej kontroli nad zawartością strony. Możesz korzystać z bogatych narzędzi, lecz czasami nauka wszystkich możliwości takiego edytora, może zabrać więcej czasu, niż nauka podstaw HTML. Dodatkowo generują "nadmiarowy" kod, co zwiększa objętość strony oraz powoduje, że bardzo trudno ją później modyfikować przy użyciu edytorów tekstowych. Często wywołuje to również nieprawidłowy sposób wyświetlania w niektórych popularnych przeglądarkach internetowych. Poza tym istnieją przypadki, w których znajomość choćby podstaw HTML jest wprost niezbędna, ponieważ edytory graficzne po prostu nie udostępniają wszystkich możliwości lub uzyskany efekt nie do końca jest zgodny z oczekiwaniami.

Chociaż stronę WWW można napisać w zwykłym edytorze tekstu, absolutnie nie polecam tej metody! Po pierwsze łatwo w ten sposób popełnić błędy literowe w nazwach poleceń HTML, co spowoduje błędy w wyświetlaniu strony. Wyspecjalizowane edytory HTML od razu o nich informują, ponieważ każde poprawne polecenie HTML zwykle jest w nich napisane innym kolorem (jest to tzw. funkcja kolorowania składni) - niepoprawne komendy nie zmieniają koloru. Cała treść w zwykłym edytorze tekstu jest jednolita, co sprawia, że nie zauważymy błędów.

Jeśli do tworzenia dokumentów HTML użyjesz np. windowsowskiego Notatnika (popularny Notepad), to polskie znaki diakrytyczne (czyli popularne "ogonki") mogą zostać błędnie zapisane - w przeglądarce internetowej pojawią się w ich miejscu "krzaczki".

Na różnych forach i grupach dyskusyjnych czasem można spotkać trochę żartobliwe wypowiedzi typu: Prawdziwy webmaster nie używa żadnych dodatkowych edytorów, bo tak jest zbyt łatwo. Nigdy nie wierz w takie bajki! Prawdziwego webmastera cechują w największym skrócie: wiedza, zdolności oraz umiejętność wykorzystania właściwych narzędzi, które znacznie ułatwiają, a przede wszystkim przyspieszają pracę. Ponadto, z niezrozumiałych powodów, osoby początkujące (choć nie tylko) często twierdzą, że nie używają edytora HTML, bo chcą się "dobrze" nauczyć języka HTML. Takie rozumowanie jest całkowicie błędne! Czy używając zwykłego długopisu nauczymy się pisać gorzej niż gdybyśmy to robili przy pomocy gęsiego pióra i plamiącego atramentu? Przeciwnie - tekst napisany długopisem będzie wyglądał bardziej estetycznie (brak kleksów :-)). Przecież zasady pisowni zawsze są takie same, bez względu na narzędzie jakiego używamy. Podobnie wykorzystanie tekstowych edytorów HTML wcale nie oznacza, że gorzej nauczymy się języka HTML. Przyspieszy to tylko naszą pracę i uchroni od popełnianych błędów składniowych, czyli raczej pozwoli nam jeszcze lepiej poznać język HTML. Większość doświadczonych webmasterów-profesjonalistów wykorzystuje tekstowe edytory HTML i Tobie też radzę jak najszybciej zaopatrzyć się w taki. Im wcześniej to zrobisz, tym lepiej dla Ciebie.

Z powyższych powodów jeszcze raz gorąco zachęcam do zainstalowania edytora HTML - najlepiej jakiegoś polskiego darmowego (freeware) - oferta jest dość bogata, a większość z nich udostępnia zupełnie wystarczające funkcje, aby stworzyć świetną stronę WWW.

Pytania i odpowiedzi

Co to jest HTML i do czego służy?

HTML to skrót od Hypertext Markup Language - czyli Hipertekstowy Język Oznaczania. Jest to język komputerowy służący do tworzenia stron internetowych. Dokument HTML jest plikiem tekstowym, w którym wpisujemy wszystkie polecenia dotyczące formatowania tekstu, wstawiania grafiki i inne.

Jak edytować stronę w HTML?

Do edycji stron w języku HTML najlepiej użyć specjalnego edytora. Istnieje wiele darmowych i płatnych edytorów HTML dla różnych systemów operacyjnych: Windows, Linux, Mac OS X.

W jakim programie pisać kod HTML?

Do pisania kodu HTML najlepiej użyć dedykowanego edytora. Istnieje wiele darmowych i płatnych edytorów HTML dla różnych systemów operacyjnych. Na przykład: Pajączek, CoreEditor, Bluefish, Brackets, PSPad, gedit, Kate, Quanta Plus, SCREEM, Smultron.

Jaki edytor HTML?

Brackets to jeden z lepszych edytorów HTML. Posiada szereg wbudowanych funkcji przydatnych przy tworzeniu stron internetowych. Obsługuje instalowanie darmowych rozszerzeń, które mogą dodatkowo zwiększyć jego możliwości. Jest przy tym całkowicie darmowy i dostępny w wersjach dla każdego systemu operacyjnego.

Jak zmienić tekst na HTML?

Wiele edytorów tekstu - takich jak np. Microsoft Word, Open Office czy Libre Office - posiada możliwość przekształcenia dokumentu na kod HTML. W tym celu zwykle wystarczy skorzystać z menu: "Plik / Zapisz jako...", a następnie w oknie dialogowym w polu "Zapisz jako typ" wybrać wartość: "Strona sieci Web, przefiltrowana (*.htm;*.html)" lub odpowiednio: "Dokument HTML (Writer) (*.html)". Na koniec wystarczy kliknąć przycisk "Zapisz". Trzeba jednak pamiętać, że w ten sposób utworzone dokumenty HTML mogą długo się ładować i niepoprawnie wyświetlać się w niektórych przeglądarkach, a ponadto być trudne do późniejszej modyfikacji. Dlatego do tworzenia tego typu dokumentów zaleca się używać dedykowanych edytorów HTML.

Jak otworzyć plik HTML w Wordzie?

Edytory tekstu takie jak np. Microsoft Word, Open Office czy Libre Office pozwalają bezpośrednio otwierać do edycji pliki HTML. W tym celu wybierz menu: "Plik / Otwórz", a następnie odszukaj dokument *.html lub *.htm na dysku i kliknij przycisk "Otwórz". Pamiętaj jednak, że w ten sposób zmodyfikowany dokument HTML może się potem długo ładować i niepoprawnie wyświetlać w niektórych przeglądarkach. Dlatego do tworzenia tego typu dokumentów zaleca się używać dedykowanych edytorów HTML.

Ramy dokumentu HTML <!doctype, html, head, meta charset "description", title, body>

Jak wygląda typowy dokument HTML? Co to są podstrony?

Stronę WWW tworzy się podobnie jak zwykły dokument tekstowy. Po uruchomieniu edytora HTML należy wybrać opcję z menu: Plik/Nowy (lub File/New). Teraz można już zacząć pisanie strony. Jednak ponieważ dokument HTML nie jest całkowicie zwykłym plikiem tekstowym (zawiera hipertekst, osadzone obrazki i musi być poprawnie wyświetlany w różnych systemach operacyjnych na całym świecie), dlatego wymyślono specjalny szablon dokumentu HTML, który powinien być przestrzegany.

Oto jak przykładowo powinny wyglądać ramy każdego dokumentu w formacie HTML (istnieją również inne podobne szablony):

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="description" content="Tu wpisz opis zawartości strony">
	<title>Tu wpisz tytuł strony</title>
</head>
<body>

Tu wpisuje się treść strony

</body>
</html>

UWAGA!
Powyższy szablon dotyczy tzw. kodu źródłowego, dlatego jeżeli używasz edytora graficznego (np.: FrontPage), koniecznie musisz się przełączyć w tryb bezpośredniej edycji kodu źródłowego HTML. Dodatkowo jeśli używasz zwykłego edytora teksu (np. windowsowskiego Notatnika - Notepad), to niektóre polskie znaki mogą zostanć błędnie zakodowane - zamiast nich pojawią się "krzaczki"! Jeszcze raz radzę zaopatrzyć się w jakiś edytor HTML - najlepiej polski.

Większość edytorów HTML przy tworzeniu nowego dokumentu automatycznie wpisuje swój własny szablon - zbliżony do powyższego. Jeśli chcesz, możesz z niego skorzystać, modyfikując opisane poniżej fragmenty. Proponuję jednak zastąpić go szablonem przedstawionym w tym rozdziale. Również w tym przypadku wszystkich zmian należy dokonywać bezpośrednio w trybie edycji kodu źródłowego HTML! Jeśli posiadasz edytor graficzny, musisz się do niego przełączyć, natomiast edytory tekstowe najczęściej posiadają tylko taki tryb - wtedy nie trzeba nic przełączać.

Wskazówka dla bardzo początkujących
Nie musisz za każdym razem, gdy tworzysz nową stronę, przepisywać całego tekstu powyższego szablonu. Wystarczy w przeglądarce internetowej naprowadzić wskaźnik myszki na początek tekstu (wskaźnik powinien zmienić kształt) i wcisnąć lewy przycisk myszki. Trzymając cały czas wciśnięty lewy przycisk, przeciągnij myszką do końca tekstu szablonu, po czym zwolnij przycisk - tekst zostanie zaznaczony. Teraz wciśnij na klawiaturze jednocześnie klawisze: Ctrl+C, co wywoła skopiowanie zaznaczonego tekstu do schowka systemowego. Następnie w edytorze HTML po otwarciu nowego pliku wystarczy wcisnąć: Ctrl+V, a do dokumentu zostanie wklejony tekst ze schowka.
Jeśli jesteś bardziej doświadczonym użytkownikiem komputera, takie rady pewnie Cię śmieszą. Proszę jednak o wyrozumiałość - każdy kiedyś zaczynał. Przypomnij sobie Twoje początki...

Większości tekstu w powyższym szablonie nie powinno się zmieniać. Natomiast można, a nawet należy, zmienić tekst, który został wyróżniony - odpowiednie fragmenty zostaną szczegółowo opisane poniżej.

Cała treść która znajduje się pomiędzy <head> oraz </head> (w szablonie powyżej) jest nazywana nagłówkiem dokumentu (treść nagłówkowa), natomiast wszystko pomiędzy <body> oraz </body> stanowi tzw. ciało dokumentu (treść właściwa).

A teraz wyjaśnimy sobie ważniejsze linijki.

  • W miejsce tekstu: Tu wpisz opis zawartości strony, należy wpisać słowny opis, co znajduje się na Twojej stronie internetowej. Z wiadomości tej korzystają wyszukiwarki internetowe - takie jak Google. Tekst który tutaj wpiszesz, pojawi się w wyszukiwarce po odnalezieniu przez nią Twojej strony. Jeśli nie wpiszesz tutaj nic, wyszukiwarka wyświetli najczęściej kilka pierwszych linijek, które znajdują się na stronie. Ciekawy, ale niezbyt długi opis może zachęcić internautów do odwiedzenia Twojego serwisu! Każda pojedyncza strona, która znajduje się w serwisie, powinna mieć swój własny opis, przedstawiający jej treść.
  • Pomiędzy <title> oraz </title> (w miejsce tekstu: Tu wpisz tytuł strony) należy wpisać tytuł, jaki będzie nosiła Twoja strona. Może on zawierać dowolny tekst, zaleca się jednak, aby nie był zbyt długi (najwyżej kilka wyrazów). Powinien on odnosić się do treści zawartych na danej stronie. Tytuł pojawia się na belce tytułowej przeglądarki internetowej (na samej górze okna programu), a także w wyszukiwarkach internetowych, po odnalezieniu Twojej strony - dlatego właśnie nie może on być zbyt długi. Trafny tytuł może również zachęcić internautów do obejrzenia Twojej strony!
  • I najważniejsze - w miejsce tekstu: Tu wpisuje się treść strony (pomiędzy <body> oraz </body>) należy wpisać właściwą zawartość strony. Może to być po prostu zwykły tekst, który ma się pojawić na stronie. Są to również tzw. znaczniki sterujące wyglądem dokumentu (które zostaną opisane dalej).

Dla ciekawskich ;-)
Jeśli już teraz chcesz koniecznie wiedzieć, co oznaczają nieopisane powyżej linijki, zobacz rozdziały: Składnia (X)HTML5 oraz Deklaracja strony kodowej.

UWAGA!
W żadnym wypadku nie należy pomijać w powyższym szablonie następującej linijki:
<meta charset="utf-8">

Co to są podstrony HTML?

Praktycznie wszystkie serwisy internetowe składają się z pewnej liczby podstron, a nie tylko z jednej, bardzo długiej strony głównej. Każda podstrona to po prostu osobny plik (z rozszerzeniem *.html lub *.htm), który tworzy się w taki sam sposób, jak stronę główną (przy użyciu szablonu przedstawionego powyżej). Np. ten serwis składa się z następujących podstron (zobacz w spisie treści): "HTML dla zielonych", "Nagłówek i treść", "Tekst" itd. Taka organizacja treści ułatwia użytkownikowi nawigację oraz zapobiega niepotrzebnemu wczytywaniu całego serwisu od razu, co trwałoby prawdopodobnie bardzo długo.
Wszystkie podstrony zapisuje się zwykle w tym samym katalogu - jako osobne pliki - lub w różnych katalogach (jeśli chcemy je jakoś posegregować tematycznie). Z jednej podstrony użytkownik możne automatycznie przechodzić do innych, klikając odpowiednie odnośniki (jeśli je umieścimy).

Jeszcze jedno:
Plik będący stroną startową (czyli główną) musi nazywać się index.html lub index.htm. Twoja witryna internetowa może składać się z dowolnej ilości podstron - każda z nich to osobny plik, tworzony w ten sam sposób, jak strona główna. Inne podstrony mogą nazywać się dowolnie, byleby miały rozszerzenie *.html lub *.htm. Jednak stosowanie bardzo długich nazw może być uciążliwe - szczególnie w przypadku gdy internauta będzie chciał się bezpośrednio przenieść do którejś z podstron Twojego serwisu poprzez wpisanie jej adresu w przeglądarce (każda strona ma swój unikatowy adres, do którego można się odnosić).

UWAGA! Bardzo ważne: w nazwach plików lepiej nie używać:
  • wielkich liter
  • znaków specjalnych, np.: \ / : * ? " < > |
  • spacji (jeśli musisz, w zamian używaj podkreślnika "_")
  • polskich liter (ą, ć, ę, ł, ń... itd.)

Jeśli nie zastosujesz się do tych zaleceń, może się okazać, że po wprowadzeniu strony do Internetu, pliki takie nie wczytają się (nawet jeśli na Twoim komputerze wszystko jest w porządku)!

W dalszych punktach na tej stronie zostanie zamieszczony opis podstawowych poleceń, które mogą Ci być pomocne w napisaniu Twojej pierwszej najprostszej strony internetowej. Wszystkie je należy umieszczać pomiędzy <body> oraz </body> (w ramach właściwej treści strony). Jeśli chcesz wprowadzić na stronę zwykły tekst, możesz go po prostu bezpośrednio wpisać - bez używania żadnych dodatkowych poleceń.

Pytania i odpowiedzi <head, body, meta charset>

Jaka jest struktura dokumentu HTML?

Dokument HTML składa się z sekcji nagłówkowej <head>...</head> i właściwego ciała dokumentu <body>...</body>. W nagłówku wpisujemy m.in. tytuł i opis strony. Natomiast w ciele dokumentu znajduje się tekst i inne elementy, które wyświetlą się w oknie przeglądarki.

Jak ustawić polskie znaki w HTML?

Aby polskie znaki diakrytyczne poprawnie się wyświetlały, w sekcji nagłówkowej dokumentu HTML należy wstawić deklarację strony kodowej: <meta charset="utf-8">. Ponadto konieczne jest użycie odpowiedniego edytora HTML.

Jak zrobić podstrony w HTML?

Serwisy internetowe zwykle składają się z wielu podstron. Aby stworzyć podstronę, otwórz dowolny edytor HTML i utwórz w nim nowy plik - dokładnie w taki sam sposób, jak przy tworzeniu strony głównej serwisu. Następnie wprowadź w nim odpowiednią treść i zapisz plik na dysku z rozszerzeniem *.html albo *.htm.

Jak otworzyć plik HTML w przeglądarce?

Istnieją dwa sposoby otworzenia pliku HTML w przeglądarce internetowej. Pierwszym z nich jest użycie w przeglądarce internetowej odpowiedniego skrótu klawiszowego (w systemie Windows będzie to Ctrl+O), a następnie w oknie dialogowym odszukanie pliku na dysku i kliknięciu przycisku "Otwórz". Drugim sposobem jest odszukanie pliku HTML na dysku za pomocą wbudowanego w system operacyjny eksploratora plików, następnie dwukrotne kliknięcie jego nazwy - spowoduje to otworzenie pliku w domyślnej przeglądarce internetowej.

Wpisywanie tekstu HTML

W jaki sposób wpisuje się tekst na stronach WWW? Jakie są zasady poprawnego wpisywania znaków interpunkcyjnych w tekście komputerowym?

Jeśli chcemy umieścić na stronie WWW zwykły tekst, możemy wpisać go bezpośrednio z klawiatury - w miejsce właściwej treści dokumentu (patrz: Ramy dokumentu). Nie trzeba przy tym stosować żadnych dodatkowych poleceń. Należy jednak pamiętać, że przeglądarka internetowa automatycznie zawinie wszystkie wiersze, dlatego w edytorze HTML tekst możemy wpisywać dowolnie, np. po wpisaniu:

To jest zwykły tekst...
To jest zwykły tekst...
To jest zwykły tekst...
To jest zwykły tekst...

Na ekranie otrzymamy:

To jest zwykły tekst... To jest zwykły tekst... To jest zwykły tekst...

W edytorze możemy zakończyć linię (klawisz Enter) w dowolnym miejscu - tam gdzie będzie nam wygodnie. Nie należy również przedzielać wyrazów z jednej linii do drugiej za pomocą myślnika:

To jest zwykły tekst... To jest zwykły tekst... To jest zwy-
kły tekst...

Zaznaczony wyraz powinniśmy wpisać normalnie. Przeglądarka sama ustawi go w odpowiedniej linii.


Na koniec kilka praktycznych porad, które początkowo łatwo zbagatelizować, ale uwierz mi - naprawdę okazują się niezwykle przydatne:

  • Dbaj o poprawność ortograficzną i stylistyczną tekstu! O ile błędy literowe mogą się zdarzyć każdemu, to rażące błędy ortograficzne, popełniane zbyt często, odstraszają potencjalnych czytelników. Jeśli masz kłopoty z ortografią (jak większość Polaków :-)), sprawdzaj tekst w słowniku komputerowym (np. w Wordzie). Wiele edytorów HTML ma własny słownik.
  • Używaj znaków interpunkcyjnych, a zwłaszcza przecinków! Jeśli nie będziesz ich używać, tekst który napiszesz, może okazać się zupełnie niezrozumiały dla czytającego. Przypominam, że przecinki stawiamy pomiędzy zdaniami prostymi, wchodzącym w skład dłuższego zdania złożonego (zdanie złożone zawiera kilka czasowników, czyli słów odpowiadających na pytanie: "co robi?"). Stawia się je prawie zawsze przed: "że", "iż" (wyjątki: "..., chyba że...", "..., dlatego że...", "..., (po)mimo że/iż..."), a najczęścsiej również przed: "a", "ale", "lecz", "aby", "żeby", "ponieważ", "bo", jak również przed wyrażeniami zawierającymi "który" (np.: "z którym", "w którym", "po którym", "wewnątrz którego" itd.). Nie stawiamy przecinków przed ani za spójnikami: "i", "oraz", "lub", "albo", "bądź", "ani", "czy" (jeśli pełni rolę spójnika).

    Kropki używamy - poza zakończeniem zdania - również po skrótach (np.: "prof.", "inż."). Wyjątkiem są skróty, kończące się na ostatnią literę pełnego wyrazu (np.: "mgr", "nr", ale "dyr."). Ponadto często stosuje się nawiasy dla przedstawienia jakiejś uwagi pobocznej (w ich miejsce można również użyć myślników).
  • Oddzielaj nowymi akapitami fragmenty tekstu, które nieco różnią się od siebie tematycznie. Bardzo długi "czysty" tekst niezbyt wygodnie się czyta.

Nie musisz od razu stać się literatem... chyba że piszesz stronę literacką ;-) Nie chodzi mi o to, aby teksty na Twojej stronie były wprost idealne pod względem gramatycznym i ortograficznym. Nie popadajmy w paranoję. To jest kurs HTML, a nie nauka poprawnej polszczyzny. Z pewnością również w tym serwisie znajdziesz błędy - wybaczcie, nie jestem polonistą. Jak głosi słynny cytat: Mylić się jest rzeczą ludzką... i nic co ludzkie nie jest mi obce (co, nie wiesz kto to powiedział... ja też nie :-)), jednak przydatne może okazać się chociaż minimum wiedzy przedstawione tutaj. Ważne, aby Twoja strona nie odstraszała internautów poprzez niepotrzebne błędy, których przecież można bardzo łatwo uniknąć.

Jeśli napiszesz swoją stronę internetową "byle jak", może to sugerować, że również informacje na niej zawarte nie są wiarygodne!


To wszystko była powtórka, lecz jest coś, czego najczęściej nie uczą w szkole, a co jest niezbędne przy pracy z tekstem komputerowym - są to zasady wpisywania znaków interpunkcyjnych:

  • Podstawowe znaki przestankowe: kropka ("."), przecinek (","), wykrzyknik ("!"), pytajnik ("?"), dwukropek (":"), średnik (";"), wielokropek ("..."). Przed tymi znakami nigdy nie stawiamy spacji! Spację stawiamy natomiast po nich.

    Wyjątek stanowi sytuacja, gdy bezpośrednio po sobie następuje kilka takich znaków - wtedy spację stawiamy tylko po ostatnim z nich.

    Drugi wyjątek stanowią krótkie kilkuwyrazowe skróty, w których każdy skrócony wyraz jest zakończony kropką - wtedy spację stawiamy tylko na końcu takiego skrótu (np.: "m.in." - między innymi, "Sp. z o.o." - spółka z ograniczoną odpowiedzialnością; ale "100 tys. zł").

    Trzeci wyjątek stanowią daty, godziny i liczby - jeśli występuje wewnątrz nich kropka, przecinek lub dwukropek, nie stawiamy po nim spacji (np.: "15.07.1410 r.", "9:08", "12,5" - notacja polska, "12.5" - notacja angielska).

    Ponadto należy zauważyć, że pojedyncze kropki w wielokropku nie oddzielamy spacjami, a jeśli stanowi on koniec zdania, nie stawiamy dodatkowej kropki. Podobnie jeżeli na końcu zdania znajduje się skrót zakończony kropką, nie stawiamy już po nim drugiej kropki. Nie stawiamy spacji po wielokropku, jeśli rozpoczynamy od niego nowy fragment tekstu - dla wskazania kontynuacji jakiejś wcześniejszej wypowiedzi.

    Jeżeli chodzi o jednostki fizyczne, zawsze stawiamy przed nimi spację (nie dotyczy znaku procenta). Tuż po nich nie stawia się kropki, chyba że znajdują się na końcu zdania.

    Poprawnie: ...wyraz... wyraz. wyraz, wyraz! wyraz? wyraz: wyraz; wyraz... np.: tel./fax m.in. 15.07.1410 r., 9:08, 1 kg, 100%, itp.
    Niepoprawnie: ... wyraz ... wyraz , wyraz ! wyraz,wyraz wyraz :wyraz...wyraz ... wyraz. . . wyraz... . np. : tel. / fax m. in. 15. 07. 1410r. , 9: 08, 1 kg., 1kg, 100 %, itp..
  • Nawiasy i cudzysłowy. Treść znajdująca się w nawiasie nigdy nie powinna być od niego oddzielona spacjami (dotyczy to zarówno początku jak i końca)! Przed otwarciem nawiasu zawsze stawiamy spację. Zwykle stawiamy ją również po jego zamknięciu. Wyjątek stanowi sytuacja, w której bezpośrednio po nawiasie występuje podstawowy znak przestankowy - wtedy nie stawiamy spacji między nimi. Wszystko to odnosi się również do cudzysłowu.

    Poprawnie: wyraz (treść) wyraz "treść" wyraz (treść), wyraz "treść"! wyraz - (...) - ("treść!") "treść" (itd.).
    Niepoprawnie: wyraz ( treść ) wyraz(treść)wyraz wyraz( treść) wyraz "treść" , wyraz "treść" ? -( ... )-"treść"( "treść! " ) (itd. ) .
  • Pauza (myślnik) - wpisujemy ją oddzielając z obu stron spacjami. Wyjątek stanowią łączniki wchodzące w skład złożonych wyrazów (np.: "biało-czerwony"), końcówki (np.: "PC-y"), nr telefonu, kody pocztowe itp. - wtedy nie rozdzielamy ich spacjami.

    Poprawnie: To jest - jak głoszą stare pisma - poprawnie. biało-czerwony 20-letni PC-y 99-999 e-mail
    Niepoprawnie: To jest- jak głoszą stare pisma-niepoprawnie. biało - czerwony, biało- czerwony, 20 - letni 99 - 999 e - mail
  • Operatory matematyczne ("+", "-", "*", "/" "=") piszemy najczęściej oddzielając je z obu stron spacjami. Wyjątek stanowią znaki minus i plus, które nie oznaczają działania matematycznego, lecz znak liczby - wtedy nie stawiamy po nich spacji. Ponadto nawias występujący w nazwach funkcji nie poprzedzamy spacją.

    Poprawnie: f(x, y) = -2x + 3y + 4
    Niepoprawnie: f (x,y)= - 2 x+ 3 y+4

Wiem, że uwagi tutaj przedstawione mogą niektórych trochę śmieszyć (szczególnie pierwsza część). Bądźcie tolerancyjni dla tych, którzy nie są tak doświadczeni. Przypomnijcie sobie, czy nigdy nie trafiliście na stronę WWW, na której wręcz roiło się od denerwujących błędów. Co wtedy można pomyśleć o takim serwisie? Mam nadzieję, że uczestnikom tego kursu nigdy to się nie przytrafi.

Pytania i odpowiedzi

Jak dodać tekst do strony?

Aby dodać zwykły tekst do istniejącej strony internetowej, wystarczy otworzyć wybrany plik *.html w edytorze HTML. Następnie trzeba wyszukać miejsce w dokumencie, gdzie ma zostać dodany nowy tekst - powinno to być gdzieś wewnątrz sekcji <body>...</body>. Tekst można w tym miejscu po prostu wpisać z klawiatury albo wkleić ze schowka systemowego np. przy pomocy kombinacji klawiszy Ctrl+V (pod systemem Windows). Na koniec można zapisać zmieniony plik *.html przy pomocy skrótu klawiaturowego: Ctrl+S.

Znaczniki HTML

Co to są znaczniki HTML?

Poza zwykłym tekstem na stronę możesz wprowadzić znaczniki (tzw. tagi). Znacznik jest to specjalny tekst umieszczony w nawiasach ostrych - np.: <b>. Jest on częścią składni języka HTML i pozwala sterować wyglądem strony. Dzięki niemu możesz np. ustalić kolor tła, rodzaj formatowania tekstu, wstawić obrazek czy tabelę itd. Znacznik nie jest widoczny na ekranie. Widoczne są tylko efekty jego działania (np. wstawienie obrazka). Ja sam aby umieszczony powyżej znacznik <b> był widoczny, musiałem się posłużyć pewną "sztuczką" (jeśli nie możesz wytrzymać i już teraz chcesz wiedzieć jaką, zajrzyj na stronę: Znaki specjalne).

Ponieważ znaki: "<" (znak mniejszości) oraz ">" (znak większości) są zarezerwowane dla znaczników, nie powinny się one pojawić w normalnej treści strony. Jeżeli musimy ich użyć, należy wpisywać zamiast nich odpowiednio: &lt; oraz &gt;. Ponadto znak "&" (ampersand - angielskie "and" - Shift+7) należy zastępować przez: &amp;

Istnieją znaczniki otwierające (np.: <b>) oraz zamykające (np.: </b>). Zauważ, że znacznik zamykający rozpoczyna się ukośnikiem (czyli znakiem: "/") i ma taką samą nazwę jak otwierający. Pomiędzy znacznikami otwierającym i zamykającym może znaleźć się jakiś tekst, który chcemy np. poddać formatowaniu (w tym przypadku będzie to wytłuszczenie tekstu), np.:

<b>Ten tekst zostanie wytłuszczony.</b>
albo
<b>
Ten tekst zostanie wytłuszczony.
</b>
(oba powyższe sposoby są równoważne).

Znacznik otwierający musi znaleźć się zawsze przed znacznikiem zamykającym. Jest to chyba dosyć logiczna zasada, ponieważ raczej nie można zamknąć jeszcze nieotwartych drzwi ani otworzyć niezamkniętych... no chyba że mówimy o drzwiach obrotowych ;-) Należy również pamiętać, że prawie każdy znacznik (poza nielicznymi wyjątkami) trzeba zamknąć za pomocą odpowiedniego znacznika zamykającego, co oznacza, że nie można zapominać o wstawianiu znaczników zamykających!

W języku HTML nie ma żadnego znaczenia jakimi literami wpisujemy znaczniki, np. znacznik <html> możemy równie dobrze wpisać tak: <hTmL>. Przyznasz jednak, że ten drugi sposób jest mało czytelny. Dlatego w tym kursie wszystkie znaczniki będą pisane małymi literami.

Praktycznie każdy edytor HTML oferuje:

  • Kolorowanie składni polega na tym, że jeśli wpiszemy poprawny znacznik, jego składnia przyjmie określony kolor - zależny od ustawień programu. Dzięki temu od razu uwidaczniają się wszystkie błędy - najczęściej proste "literówki". Jest to chyba najważniejsza zaleta stosowania edytorów HTML. Dlatego właśnie nie poleca się używania zwykłych edytorów tekstu, do tworzenia stron WWW.
  • Automatyczne zamykanie znaczników polega na automatycznym dopisaniu przez program odpowiedniego znacznika zamykającego, zaraz po tym jak użytkownik poda znacznik otwierający. Dzięki temu, że nie trzeba tego robić ręcznie, praca przebiega dużo sprawniej, a dodatkowo nie zapomnimy o zamykaniu znaczników, ponieważ program robi to automatycznie za nas.
  • Generatory (lub inaczej kreatory - ang. wizards) pomagają przy tworzeniu różnorodnych znaczników (poprzez specjalne okna dialogowe).

Pytania i odpowiedzi

Co to są znaczniki?

Znacznik jest to specjalny tekst umieszczony w nawiasach ostrych. Jest on częścią składni języka HTML i pozwala sterować wyglądem strony. Istnieją znaczniki otwierające i zamykające. Na początku znacznika zamykającego zawsze znajduje się znak ukośnika "/".

Jak wstawić znaki specjalne w HTML?

Ponieważ znaki: "<" (znak mniejszości) oraz ">" (znak większości) są zarezerwowane dla znaczników, nie powinny się one pojawić w normalnej treści strony. Jeżeli musimy ich użyć, należy wpisywać zamiast nich odpowiednio: &lt; oraz &gt;.

Koniec linii HTML <br>

W jaki sposób przenieść tekst do następnej linijki w dokumencie HTML?

<br>

Powyższy znacznik (<br>) stosuje się gdy chcemy natychmiastowo zakończyć linię. Zapytasz zapewne: Po co go stosować, nie można po prostu nacisnąć Enter i przenieść kursor tekstowy do następnej linii? Otóż nie można. Przeglądarka internetowa ignoruje wszelkie znaki przejścia do następnej linii za pomocą klawisza Enter (ignoruje również postawienie obok siebie więcej niż jednej spacji - zobacz: Znaki specjalne). Na przykład jeśli wpiszesz w edytorze taki tekst:

To jest pierwsza linia...
a to jest druga linia.

w przeglądarce pojawi się:

To jest pierwsza linia... a to jest druga linia.

Linia zostanie zakończona automatycznie tylko wtedy, gdy podany tekst będzie zbyt długi, aby zmieścić się w jednym wierszu. Jeśli jednak koniecznie chcemy natychmiast zakończyć linię, możemy to zrobić, stawiając w miejscu gdzie ma być ona zakończona, znacznik <br>. Np. wpisanie w edytorze:

To jest pierwsza linia...<br>
a to jest druga linia.

spowoduje wyświetlenie tekstu:

To jest pierwsza linia...
a to jest druga linia.

Jeśli postawisz obok siebie więcej niż jeden znacznik <br>, możesz "zejść" kilka linijek niżej, np. wpisanie:

To jest pierwsza linia...<br><br><br>
...a to jest kolejna linia.

spowoduje wyświetlenie:

To jest pierwsza linia...


...a to jest kolejna linia.

Zwróć uwagę, że samego znacznika <br> nie widać na ekranie przeglądarki. Widać jedynie efekty jego działania, tzn. zakończenie linii.

Znacznik <br> w języku HTML nie ma znacznika zamykającego (to jest właśnie jeden z nielicznych wyjątków)!

Pytania i odpowiedzi <br>

Akapit HTML <p "text-align">

W jaki sposób układać tekst na ekranie? Jak dodać nowy akapit? Jak wyśrodkować lub wyjustować tekst? Co to są atrybuty HTML?

<p>Tu wpisz treść akapitu</p>

Akapit (w pewnych warunkach nazywany paragrafem) to pewien ustęp w tekście. Następujące po sobie akapity, są rozdzielone linijką przerwy. Treść akapitu należy wpisać pomiędzy znacznikami <p> oraz </p>. Przyjęło się, że praktycznie każdy zwykły tekst na stronie WWW umieszcza się w akapitach. Pojedynczy akapit przedstawia ustęp w tekście, który nieco różni się tematycznie od poprzedniego. Zamiast stosować dwa znaczniki końca linii: <br><br>, można po prostu objąć wybrany fragment tekstu paragrafem. Efekt będzie identyczny, a dodatkowo przeglądarka lepiej wyświetli taki tekst. Dzięki temu strona będzie wyglądała estetyczniej i łatwiej będzie można odszukać na niej interesujące informacje.

Akapit (paragraf) jest bardzo ważny w składni HTML, ponieważ pozwala w określony sposób sformatować tekst na ekranie (ułożyć go w podany sposób). Robi się to podając atrybuty znacznika. Atrybut wpisuje się zawsze wewnątrz znacznika otwierającego - bezpośrednio po jego nazwie (oddzielony od niej spacją), a przed znakiem zamknięcia nawiasu ostrego, czyli przed ">". Każdy znacznik ma ściśle określone atrybuty, które obsługuje. W przypadku akapitu można zastosować m.in. następujące:

  1. Wyrównanie tekstu do lewej strony (domyślnie)
    <p style="text-align: left">Treść akapitu</p>
    lub po prostu
    <p>Treść akapitu</p>
  2. Wyrównanie tekstu do prawej
    <p style="text-align: right">Treść akapitu</p>
  3. Wyśrodkowanie tekstu
    <p style="text-align: center">Treść akapitu</p>
  4. Justowanie tekstu (wyrównanie do obu marginesów jednocześnie)
    <p style="text-align: justify">Treść akapitu</p>

We wszystkich przypadkach wyróżnione zostały właśnie atrybuty znacznika wraz z ich wartościami (wartość atrybutu podaje się w cudzysłowie po znaku równości).
W miejsce tekstu: Treść akapitu, należy wpisać tekst, który ma zostać sformatowany w sposób określony przez parametr.

Przykład <p "text-align">

<p style="text-align: left">wyrównanie do lewej...</p>

style="text-align: left",
wyrównanie do lewej,
wyrównanie do lewej (style="text-align: left"),
(style="text-align: left")...

<p style="text-align: right">wyrównanie do prawej...</p>

style="text-align: right",
wyrównanie do prawej,
wyrównanie do prawej (style="text-align: right"),
(style="text-align: right")...

<p style="text-align: center">wyśrodkowanie...</p>

style="text-align: center",
wyśrodkowanie,
wyśrodkowanie (style="text-align: center"),
(style="text-align: center")...

<p style="text-align: justify">justowanie, czyli wyrównanie do obu marginesów jednocześnie...
justowanie, czyli wyrównanie do obu marginesów jednocześnie...
justowanie, czyli wyrównanie do obu marginesów jednocześnie...
justowanie, czyli wyrównanie do obu marginesów jednocześnie...
justowanie, czyli wyrównanie do obu marginesów jednocześnie...</p>

justowanie, czyli wyrównanie do obu marginesów jednocześnie (style="text-align: justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (style="text-align: justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (style="text-align: justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (style="text-align: justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (style="text-align: justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (style="text-align: justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (style="text-align: justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (style="text-align: justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (style="text-align: justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (style="text-align: justify")...

Pytania i odpowiedzi <p "text-align">

Co to jest paragraf w HTML?

Paragraf to inna nazwa akapitu - czyli pewnego oddzielnego wizualnie i tematycznie fragmentu dłuższego tekstu. Tę nazwę stosuje się jednak raczej w stosunku do przepisów prawnych, a nie do zwykłego tekstu.

Jak wyśrodkować tekst?

Aby ułożyć tekst na środku, można dodać odpowiedni atrybut do znacznika akapitu: <p style="text-align: center">...</p>.

Tekst pogrubiony HTML <b>

W jaki sposób pogrubić (wytłuścić) tekst na stronie WWW?

<b>Tu wpisz tekst</b>

Znacznik ten pozwala pogrubić (wytłuścić) część tekstu (ang. bold), który się wewnątrz niego znajduje. Podobna funkcja jest zwykle dostępna w zwykłych edytorach (np.: WordPad), podczas tworzenia normalnego dokumentu tekstowego.

Przykład <b>

Po wpisaniu w edytorze HTML następującego kodu:

<b>Ten tekst jest pogrubiony (wytłuszczony)</b>

na ekranie przeglądarki otrzymamy:

Ten tekst jest pogrubiony (wytłuszczony)

Pytania i odpowiedzi <b>

Jak zmienić grubość tekstu HTML?

Domyślnie tekst na stronie internetowej jest napisany zwykłą czcionką. Aby pogrubić fragment tekstu, wystarczy umieścić go wewnątrz znacznika <b>...</b>, dzięki czemu będzie się on lepiej wyróżniał wizualnie.

Tekst pochylony HTML <i>

W jaki sposób pochylić tekst na stronie WWW (kursywa)?

<i>Tu wpisz tekst</i>

Pozwala napisać tekst pismem pochylonym, czyli kursywą (ang. italic).

Przykład <i>

Po wpisaniu w edytorze HTML następującego kodu:

<i>Ten tekst jest napisany pismem pochylonym, czyli kursywą</i>

na ekranie przeglądarki otrzymamy:

Ten tekst jest napisany pismem pochylonym, czyli kursywą

Pytania i odpowiedzi <i>

Jak pochylić tekst w HTML?

Domyślnie tekst na stronie internetowej jest napisany zwykłą czcionką. Aby pochylić fragment tekstu, wystarczy umieścić go wewnątrz znacznika <i>...</i>. W ten sposób często oznacza się np. termin techniczny, idiom z innego języka albo fragment wtrąconego tekstu.

Tekst podkreślony HTML <u>

W jaki sposób podkreślić tekst na stronie WWW?

<u>Tu wpisz tekst</u>

Pozwala podkreślić fragment tekstu (ang. underline).

Przykład <u>

Po wpisaniu w edytorze HTML następującego kodu:

<u>Ten tekst jest podkreślony</u>

na ekranie przeglądarki otrzymamy:

Ten tekst jest podkreślony

Pytania i odpowiedzi <u>

Jak dodać podkreślenie HTML?

Domyślnie tekst na stronie internetowej jest napisany zwykłą czcionką. Aby podkreślić fragment tekstu, wystarczy umieścić go wewnątrz znacznika <u>...</u>. W ten sposób często oznacza się nieartykułowany tekst albo błąd ortograficzny.

Tekst przekreślony HTML <s>

W jaki sposób przekreślić tekst na stronie WWW?

<s>Tu wpisz tekst</s>

Pozwala przekreślić fragment tekstu (ang. strikethrough).

Przykład <s>

Po wpisaniu w edytorze HTML następującego kodu:

<s>Ten tekst jest przekreślony</s>

na ekranie przeglądarki otrzymamy:

Ten tekst jest przekreślony

Pytania i odpowiedzi <s>

Jak przekreślić tekst w HTML?

Domyślnie tekst na stronie internetowej jest napisany zwykłą czcionką. Aby przekreślić fragment tekstu, wystarczy umieścić go wewnątrz znacznika <s>...</s>. W ten sposób często oznacza się treść, która nie jest dłużej trafna lub istotna z punktu widzenia pozostałej zawartości dokumentu.

Wielkość czcionki HTML <span "font-size">

W jaki sposób zmienić rozmiar czcionki na stronie WWW?

<span style="font-size: rozmiar">Tu wpisz tekst</span>
gdzie jako "rozmiar" należy wpisać:
xx-small
Czcionka najmniejsza
x-small
Czcionka bardzo mała
small
Czcionka mała
medium
Czcionka średnia
large
Czcionka duża
x-large
Czcionka bardzo duża
xx-large
Czcionka największa

Przykład <span "font-size">

<span style="font-size: xx-small">Czcionka o rozmiarze xx-small</span>
Czcionka o rozmiarze xx-small
<span style="font-size: x-small">Czcionka o rozmiarze x-small</span>
Czcionka o rozmiarze x-small
<span style="font-size: small">Czcionka o rozmiarze small</span>
Czcionka o rozmiarze small (domyślna)
<span style="font-size: medium">Czcionka o rozmiarze medium</span>
Czcionka o rozmiarze medium
<span style="font-size: large">Czcionka o rozmiarze large</span>
Czcionka o rozmiarze large
<span style="font-size: x-large">Czcionka o rozmiarze x-large</span>
Czcionka o rozmiarze x-large
<span style="font-size: xx-large">Czcionka o rozmiarze xx-large</span>
Czcionka o rozmiarze xx-large

Pytania i odpowiedzi <span "font-size">

Jak zmienić rozmiar czcionki HTML?

W tym celu należy objąć tekst znacznikiem z przypisanym atrybutem o odpowiedniej wartości: <span style="font-size: xx-small">...</span> (najmniejsza czcionka), <span style="font-size: x-small">...</span> (bardzo mała czcionka), <span style="font-size: small">...</span> (mała czcionka), <span style="font-size: medium">...</span> (średnia czcionka), <span style="font-size: large">...</span> (duża czcionka), <span style="font-size: x-large">...</span> (bardzo duża czcionka), <span style="font-size: xx-large">...</span> (największa czcionka).

Jak zmniejszyć rozmiar czcionki HTML?

Zwykły tekst na stronie wyświetla się w domyślnym rozmiarze czcionki. Aby go pomniejszyć, trzeba objąć go znacznikiem z przypisanym atrybutem o odpowiedniej wartości: <span style="font-size: x-small">...</span> albo jeśli chcemy bardzo pomniejszyć tekst: <span style="font-size: xx-small">...</span>.

Kolor czcionki HTML <span "color">

W jaki sposób zmienić kolor czcionki na stronie WWW?

<span style="color: kolor">Tu wpisz tekst</span>
gdzie jako "kolor" można wpisać:
black(czarny)
white(biały)
silver(srebrny)
gray(szary)
maroon(kasztanowy)
red(czerwony)
purple(purpurowy)
fuchsia(fuksja)
green(zielony)
lime(limonowy)
olive(oliwkowy)
yellow(żółty)
navy(granatowy)
blue(niebieski)
teal(zielonomodry)
aqua(akwamaryna)

Jeśli za mało Ci tych szesnastu kolorów, zajrzyj na stronę pt.: Kolory.

Edytory HTML posiadają często specjalny selektor kolorów, za pomocą którego można w prosty sposób wybrać barwę o dowolnym odcieniu.

Przykład <span "color">

Po wpisaniu w edytorze HTML następującego kodu:

<span style="color: red">Ten tekst został napisany czcionką koloru czerwonego</span>

na ekranie przeglądarki otrzymamy:

Ten tekst został napisany czcionką koloru czerwonego

Pytania i odpowiedzi <span "color">

Jak zmienić kolor czcionki w HTML?

W tym celu należy objąć tekst znacznikiem z przypisanym atrybutem o odpowiedniej wartości: <span style="color: black">...</span> (czarny), <span style="color: white">...</span> (biały), <span style="color: silver">...</span> (srebrny), <span style="color: gray">...</span> (szary), <span style="color: maroon">...</span> (kasztanowy), <span style="color: red">...</span> (czerwony), <span style="color: purple">...</span> (purpurowy), <span style="color: fuchsia">...</span> (fuksja), <span style="color: green">...</span> (zielony), <span style="color: lime">...</span> (limonowy), <span style="color: olive">...</span> (oliwkowy), <span style="color: yellow">...</span> (żółty), <span style="color: navy">...</span> (granatowy), <span style="color: blue">...</span> (niebieski), <span style="color: teal">...</span> (zielonomodry), <span style="color: aqua">...</span> (akwamaryna).

Jak używać kolorów w HTML?

Jednym z najczęstszych sposobów, jak używamy kolorów na stronach internetowych, jest zmiana barwy tekstu. Domyślnie każdy tekst będzie napisany zwykle kolorem czarnym albo ewentualnie białym - w przypadku ustawienia ciemnego motywu w systemie operacyjnym bądź przeglądarce internetowej. Aby zmienić kolor tekstu na inny, wystarczy objąć go znacznikiem z przypisanym atrybutem o odpowiedniej wartości. Na przykład: <span style="color: red">...</span> zmieni kolor tekstu na czerwony.

Rodzaj czcionki HTML <span "font-family">

W jaki sposób zmienić rodzaj czcionki na stronie WWW?

<span style="font-family: rodzaj">Tu wpisz tekst</span>
lub
<span style="font-family: rodzaj1, rodzaj2, rodzaj3...">Tu wpisz tekst</span>
gdzie zamiast rodzaj, rodzaj1, rodzaj2, rodzaj3... należy wpisać rodzaje czcionek (np.: Arial, 'Courier New', 'Times New Roman', Verdana i inne). Jeżeli nazwa czcionki składa się z kilku wyrazów, to trzeba ją objąć w znaki apostrofu (np.: <span style="font-family: Verdana, 'Times New Roman', Arial">Tekst</span>).
W miejsce kropek można wpisać dalsze rodzaje czcionek rozdzielone przecinkami (same kropki należy usunąć).

Uwaga! Należy być ostrożnym z używaniem tego polecenia, ponieważ jeśli użytkownik oglądający Twoją stronę nie będzie posiadał podanej czcionki w swoim systemie operacyjnym, tekst zostanie napisany czcionką domyślną (w systemie Windows najprawdopodobniej będzie to 'Times New Roman', chociaż to też nie jest pewne). Poza tym nie każda czcionka potrafi zapisać poprawnie polskie znaki. Koniecznie sprawdź rezultat w praktyce!

W przypadku drugiego polecenia zostanie użyta taka czcionka, którą pierwszą w kolejności podawania będzie posiadał użytkownik. Jest to lepszy sposób, gdyż pozwala się zabezpieczyć na wypadek nieposiadania jednego rodzaju czcionki przez użytkownika.

W systemie Windows standardowo dostępne powinny być czcionki: 'Times New Roman', Arial, 'Courier New'. Dodatkowo od jakiegoś czasu z Internet Explorerem dostarczane były: Verdana, Tahoma, 'Trebuchet MS', Georgia - dlatego nawet dzisiaj wciąż są powszechnie dostępne. Przy definiowaniu czcionki dobrze jest wykorzystywać te właśnie rodzaje, a także takie które domyślnie występują w innych systemach operacyjnych (np.: Helvetica - podobna do Arial).

Przykład <span "font-family">

<span style="font-family: Arial, sans-serif">Czcionka Arial</span>
Czcionka Arial
<span style="font-family: 'Courier New', monospace">Czcionka 'Courier New'</span>
Czcionka 'Courier New'
<span style="font-family: 'Times New Roman', serif">Czcionka 'Times New Roman'</span>
Czcionka 'Times New Roman'
<span style="font-family: Verdana, sans-serif">Czcionka Verdana</span>
Czcionka Verdana

Pytania i odpowiedzi <span "font-family">

Jakie są rodzaje czcionek?

Najpopularniejsze rodzaje czcionek to: 'Times New Roman', Arial, 'Courier New', Verdana, Tahoma, 'Trebuchet MS', Georgia, Helvetica.

Jak zmienić rodzaj czcionki w HTML?

W tym celu należy objąć tekst znacznikiem z przypisanym atrybutem o odpowiedniej wartości - np.: <span style="font-family: Arial">...</span>, <span style="font-family: 'Courier New'">...</span>, <span style="font-family: 'Times New Roman'">...</span>, <span style="font-family: Verdana">...</span>.

Łączenie znaczników i atrybutów HTML <p "text-align", span "font-size, color", b, i, u>

W jaki sposób zmienić wygląd tekstu na stronie WWW?

Wszystkie powyższe parametry (atrybuty i znaczniki: akapit, wielkość czcionki, kolor czcionki, pogrubienie, pochylenie, przekreślenie) dotyczące tekstu można łączyć, np. po wpisaniu w edytorze:

<p style="text-align: center"><span style="font-size: large; color: red"><b><i><u>
To jest jakiś tekst
</u></i></b></span></p>

otrzymamy:

To jest jakiś tekst


Zauważ, że znaczniki zamykamy w kolejności odwrotnej jak je otwieraliśmy. Czyli najpierw zamykamy znacznik, który został otwarty jako ostatni (w naszym przykładzie jest to: <u>), a na końcu zamykamy ten znacznik, który otworzyliśmy jako pierwszy (czyli <p>).

Dodatkowo wartości atrybutu style="..." odnoszące się do tego samego znacznika (w naszym przypadku jest to znacznik <span>), można połączyć wypisując je po kolei rozdzielone od siebie znakami średnika (w naszym przypadku są to wartości: "font-size: large; color: red"). Kolejność wpisywania zarówno wartości atrybutu jak i znaczników (otwierających) jest dowolna.

Pytania i odpowiedzi <b, i, span "font-size, color">

Indeks górny i dolny HTML <sup, sub>

Jak wstawić indeks górny i dolny przy tekście?

  1. Indeks górny
    <sup>...</sup>
  2. Indeks dolny
    <sub>...</sub>

Umożliwia wprowadzenie indeksów górnych (ang. superscript) lub dolnych (ang. subscript) po poprzedzających je cyfrach i literach. Tekst indeksu jest napisany czcionką o mniejszym rozmiarze. Indeksy górne i dolne najczęściej stosuje się we wzorach matematycznych.

Przykład <sup, sub>

indeks<sup>górny</sup>
indeksgórny
indeks<sub>dolny</sub>
indeksdolny

Pytania i odpowiedzi <sub, sup>

Jak dodać tekst do góry HTML?

Aby wyświetlić pomniejszony tekst nieco wyżej od zwykłej linii tekstu i tym samym stworzyć indeks górny, należy użyć następującego kodu: x<sup>2</sup>. W tym przykładzie cyfra 2 zostanie wyświetlona jako indeks górny litery x.

Kolor tła oraz tekstu HTML <body "background-color, color">

W jaki sposób zmienić kolor tła oraz kolor tekstu na stronie WWW?

<body style="background-color: kolor tła; color: kolor tekstu">
Tu jest właściwa treść strony
</body>
Zamiast wyrazów "kolor tła" oraz "kolor tekstu" należy wpisać definicję koloru odpowiednio: tła strony oraz tekstu na całej stronie. Robi się to tak samo jak w przypadku czcionek.

Jeśli chcemy ustalić kolor tła oraz tekstu na całej stronie możemy użyć dodatkowych wartości atrybutu dla znacznika <body>. Wartości te ("background-color: ...; color: ...") nie wpisujemy w miejscu właściwej treści strony - tak jak w przypadku znaczników - lecz w atrybucie style="..." wewnątrz znacznika otwierającego <body> (przed właściwą treścią) - tak jak pokazano powyżej - ponieważ nie są one oddzielnymi znacznikami tylko wartościami atrybutu. Należy również pamiętać, że na stronie może się znajdować tylko jeden znacznik <body>. Wszystkie atrybuty które się do niego odnoszą (jak na przykład powyższy), wpisuje się do tego samego znacznika (otwierającego), a nie wstawia się nowego w innym miejscu strony.

Kolor tła oraz tekstu całej strony powinniśmy ustalać zawsze jednocześnie.

Nawet jeśli ustalimy kolor tekstu na całej stronie, możemy go później lokalnie (miejscowo) zmieniać za pomocą polecenia <span style="color: kolor">...</span> (zobacz: Kolor czcionki).

Pytania i odpowiedzi <body "background-color, color">

Jak zmienić kolor tła i tekstu w HTML?

Aby zmienić domyślny kolor tła oraz tekstu na całej stronie, najlepiej do znacznika właściwego ciała dokumentu dodać atrybut o odpowiednich wartościach. Na przykład: <body style="background-color: black; color: white">...</body> ustawi czarny kolor tła i biały kolor tekstu. Należy jednak przy tym pamiętać, że w pliku *.html może się znajdować tylko jeden znacznik ciała dokumentu. Zatem odpowiedni atrybut dodajemy do już istniejącego znacznika, a nie wstawiamy nowego!

Jak zrobić żółte tło w HTML?

Kolor tła na stronie internetowej zawsze powinno się ustawiać wraz z odpowiednio kontrastującą barwą tekstu. W przeciwnym razie użytkownik może zmienić domyślny kolor tekstu w swojej przeglądarce internetowej i wtedy mógłby stać się on nieczytelny (np. biały tekst na żółtym tle). Aby ustawić żółte tło i czarny tekst na całej stronie, najlepiej do znacznika właściwego ciała dokumentu dodać atrybut o odpowiednich wartościach: <body style="background-color: yellow; color: black">...</body>. Należy jednak przy tym pamiętać, że w pliku *.html może się znajdować tylko jeden znacznik ciała dokumentu. Zatem odpowiedni atrybut dodajemy do już istniejącego znacznika, a nie wstawiamy nowego!

Pozioma linia HTML <hr>

Jak dodać na stronie WWW poziomą linię?

<hr>

Pozwala wstawić na stronie poziomą linię (ang. horizontal rule), za pomocą której np. można rozdzielić sąsiednie grupy akapitów wyraźnie różniące się między sobą tematycznie.

UWAGA!
Znacznik <hr> nie posiada w języku HTML znacznika zamykającego!

Przykład <hr>

<p>Akapit...</p>
<p>Akapit...</p>
<hr>
<p>Akapit...</p>
<p>Akapit...</p>

Pytania i odpowiedzi <hr>

Wstawienie obrazka HTML <img src alt>

W jaki sposób wstawić obrazek (grafikę, zdjęcie) na stronę WWW?

<img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny">
Zamiast tekstu: "Tu podaj względną ścieżkę dostępu do obrazka", należy podać miejsce na dysku, gdzie znajduje się nasz obrazek, który chcemy umieścić na stronie. Jeżeli obrazek znajduje się w tym samym katalogu co strona, na której chcemy go wstawić, wystarczy wpisać tutaj samą nazwę pliku obrazka, nie zapominając przy tym o podaniu rozszerzenia (".jpg" lub ".gif").
Natomiast w miejsce "Tu podaj tekst alternatywny" wpisuje się krótką informację, która pojawi się w przypadku, kiedy obrazek nie zostanie wyświetlony (np. jeśli użytkownik wyłączy wyświetlanie grafiki w swojej przeglądarce internetowej).

UWAGA!
Znacznik <img> nie posiada w języku HTML znacznika zamykającego!

Dla zainteresowanych
Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości przy wstawianiu obrazków na stronach internetowych, zobacz rozdział: Multimedia / Obrazek.

Przykład <img>

To jest przykładowy obrazek

Ścieżka dostępu <img>

Poniżej znajdziesz przykłady poprawnych ścieżek dostępu, dla różnych struktur katalogów na dysku. We wszystkich przypadkach naszym zamiarem będzie wstawienie obrazka o nazwie plik.gif do dokumentu strona.html - drogę "przejścia" zaznaczono kolorem zielonym i strzałkami. Przy tworzeniu ścieżki zawsze "startujemy" od strona.html i zmierzamy do plik.gif. Plik index.html stanowi stronę główną, którą się teraz nie zajmujemy.

  1. Poprawnie: plik.gif
    Niepoprawnie: C:\www\plik.gif, plik.GIF, plik

    W katalogu głównym są pliki: strona.html i plik.gif W katalogu głównym jest podkatalog, a w nim: strona.html i plik.gif

    Jak widać obrazek plik.gif oraz dokument strona.html znajdują się w tym samym katalogu. Nie ma przy tym znaczenia czy oba pliki są w katalogu głównym serwisu czy w jakimś podkatalogu - ścieżka dostępu jest taka sama. W takim przypadku wystarczy podać nazwę pliku bez żadnych dodatków. Jest to najprostsza struktura katalogów (szczególnie pierwsza - wszystko w jednym katalogu). Stosuje się ją szczególnie w serwisach składających się z niewielu podstron. Jeśli masz problemy ze swobodnym tworzeniem bardziej skomplikowanych ścieżek dostępu, polecam Ci właśnie ten model, ponieważ możliwość pomyłki jest tutaj naprawdę niewielka.

  2. Poprawnie: katalog/plik.gif
    Niepoprawnie: C:\www\katalog\plik.gif, katalog\plik.gif, katalog/plik.GIF, katalog/plik

    W katalogu głównym jest strona.html oraz podkatalog, a w nim plik.gif

    W przypadku kiedy plik.gif znajduje się w jakimś podkatalogu, a dokument strona.html nie, przed nazwą pliku trzeba podać nazwę tego podkatalogu oraz ukośnik (zwykły, nie odwrócony!). Taka struktura jest stosowana np. gdy mamy dużo plików (np. zdjęć) i dla utrzymania porządku chcemy je trzymać w osobnym podkatalogu.

  3. Poprawnie: ../plik.gif
    Niepoprawnie: C:\www\plik.gif, katalog/plik.gif, ..\plik.gif, ../plik.GIF, ../plik

    W katalogu głównym jest plik.gif oraz podkatalog, a w nim strona.html

    Sytuacja analogiczna jak poprzednio, lecz teraz plik.gif jest w katalogu głównym, a strona.html w podkatalogu. W takim przypadku przed nazwą pliku trzeba wstawić ../ co oznacza "wyjście" do katalogu nadrzędnego, czyli z katalog/ do www/ Struktura przydatna w przypadku wielu działów w serwisie, z których każdy składa się z dużej ilości podstron umieszczonych w osobnych katalogach.

  4. Poprawnie: ../katalog2/plik.gif
    Niepoprawnie: C:\www\katalog2\plik.gif, katalog2/plik.gif, ..\katalog2\plik.gif, ../katalog2/plik.GIF, ../katalog2/plik

    W katalogu głównym są dwa podkatalogi; w pierwszym znajduje się strona.html, a w drugim plik.gif

    Jest to nieco zmodyfikowany poprzedni wariant. Teraz również plik.gif znajduje się w podkatalogu - podobnie jak strona.html z tym, że są to dwa różne katalogi. Budowanie ścieżki w tym przypadku rozpoczynamy w podkatalogu o nazwie katalog1/, w którym znajduje się nasza strona.html. Następnie wychodzimy do katalogu nadrzędnego www/ co jest realizowane przez wstawienie ../ na początku ścieżki dostępu. Teraz możemy swobodnie wejść do drugiego podkatalogu katalog2/ (realizuje się to przez podanie jego nazwy), w którym znajduje się nasz plik.gif, a na końcu - jak zawsze - podajemy nazwę pliku. Struktura przydatna w przypadku wielu działów w serwisie oraz dużej ilości plików. Wtedy w katalogu głównym znajduje się zazwyczaj jedynie strona główna index.html, a wszystkie podstrony oraz pliki są umieszczone w katalogach podrzędnych.

  5. Poprawnie: ../../katalog2/katalog2a/plik.gif
    Niepoprawnie: C:\www\katalog2\katalog2a\plik.gif, katalog2/katalog2a/plik.gif, ../katalog2/katalog2a/plik.gif

    W katalogu głównym są dwa podkatalogi, a w każdym z nich następny katalog podrzędny; na samym końcu znajdują się: strona.html oraz plik.gif

    Ten przykład jest już dość zaawansowany. Jeśli go zrozumiesz, możesz powiedzieć, że ścieżki dostępu "masz w małym palcu" :-)
    "Znajdujemy się" w katalogu: katalog1a/ (bo tutaj jest nasza strona, na której chcemy wstawić obrazek). Pierwsze dwie kropki w ścieżce dostępu powodują wyjście o jeden poziom wyżej - czyli do katalogu: katalog1/. Kolejne dwie kropki odpowiadają za wyjście o następny poziom wyżej, czyli do katalogu: www/. Teraz możemy już wejść do katalogu podrzędnego: katalog2/, a potem do: katalog2a/, który znajduje się wewnątrz niego. Na końcu wystarczy podać nazwę pliku.


Powyższe sposoby podawania ścieżki dostępu obowiązują dla wszystkich rodzajów plików - również dla podstron. Częstym błędem popełnianym przez osoby początkujące, jest podanie bezwzględnej ścieżki dostępu, np.:

C:\www\katalog2\katalog2a\plik.gif     (BŁĄD!)

Jest to karygodny błąd!!! Po wprowadzeniu strony do Internetu, zostaje ona zapisana na dysku komputera-serwera (nie na Twoim). Struktura (wygląd) drzewa katalogów będzie tam z całą pewnością inna niż na Twoim dysku lokalnym. Dlatego podana ścieżka bezwzględna tam nie istnieje. Co gorsze, błędu możesz nie wykryć od razu, ponieważ na Twoim komputerze obrazek wczyta się poprawnie, ale już znajomy nic nie zobaczy! Zauważ również, że w ścieżkach używamy ukośników ("/"), a nie odwróconych ukośników ("\").

Jest jeszcze jeden rodzaj poważnego błędu:

plik.gif znajduje się na innym dysku plik.gif znajduje się powyżej katalogu głównego serwisu

Obie ścieżki wyglądają poprawnie, ale są absolutnie niedopuszczalne! Nie wolno wstawiać do dokumentu plików z innego dysku. W ogóle nie można się odwoływać do plików, które znajdują się "powyżej" katalogu głównego serwisu - u nas jest to www/ (katalog główny serwisu można rozpoznać po tym, że bezpośrednio w nim znajduje się strona główna index.html).

Pamiętaj: stosuj zawsze względne, a nie bezwzględne ścieżki dostępu! Używaj również zwykłych, a nie odwróconych ukośników. Wszystkie pliki Twojej strony powinny znajdować się w obrębie katalogu głównego serwisu, w żadnym razie powyżej niego!

Niektóre edytory HTML umożliwiają automatyczne wstawienie względnej ścieżki dostępu (dopiero po zapisaniu strony na dysku), poprzez wybranie pliku w specjalnym selektorze. Dzięki temu tworzenie zawiłych ścieżek, może być dużo łatwiejsze.

Przy okazji zwracam uwagę, że strona startowa index.html (patrz powyżej) musi znajdować się w głównym katalogu publicznym na serwerze. Podczas umieszczania strony w Internecie, na serwer wysyłamy wszystkie pliki znajdujące się w katalogu www/, ale nie sam katalog. index.html musi bezwzględnie znajdować się w katalogu głównym na Twoim koncie WWW, w przeciwnym razie Twoja strona w ogóle się nie wyświetli! Podczas umieszczania strony w Internecie, nie zapomnij przekopiować na serwer również wszystkich plików obrazków!

UWAGA!
Bardzo ważne: w nazwach plików lepiej nie używać:
  • wielkich liter
  • znaków, np.: \ / : * ? " < > |
  • spacji (jeśli musisz, w zamian używaj podkreślnika "_")
  • polskich liter (ą, ć, ę, ł, ń... itd.)

Jeśli nie zastosujesz się do tych zaleceń, może się okazać, że po wprowadzeniu strony do Internetu, pliki takie nie wczytają się (nawet jeśli na Twoim komputerze wszystko jest w porządku)!

Formaty graficzne <img>

Na koniec jeszcze jedna rada: obrazki wstawione na stronę, wydatnie zwiększają jej objętość, a co za tym idzie, wydłużają czas wczytywania strony. Jeśli na Twoim dysku lokalnym strona wczytuje się błyskawicznie, nie myśl, że będzie tak samo po wprowadzeniu jej do Internetu. Oczywiście im większy jest obrazek, tym więcej miejsca zajmuje na dysku. Poza tym zbyt wiele nieprzemyślanej grafiki tylko zaciemnia treść. Dlatego staraj się z tym nie przesadzać. Należy również pamiętać, aby najlepiej wszystkie obrazki były zapisane w jednym z trzech formatów:

  • GIF - dla rysunków składających się z mniej niż 256 kolorów, np. przyciski menu i inne "ręcznie" rysowane ozdobniki. Format ten obsługuje przezroczystość.
  • JPG - dla zdjęć wielokolorowych. Nie obsługuje przezroczystości.
  • PNG - pozwala zapisywać z bardzo dobrą jakością zarówno ręcznie rysowane grafiki jak i zdjęcia. Obsługuje kompresję oraz zarówno pełną przezroczystość jak i półprzezroczystość.

W żadnym wypadku nie należy stosować formatu BMP, gdyż nie posiada on żadnej lub bardzo słabą kompresję i w związku z tym grafika zapisana w tym formacie ma dużo większą objętość.

Grafikę przydatną dla stron WWW możesz znaleźć bezpośrednio w Internecie. Istnieje wiele serwisów internetowych dla webmasterów, oferujących darmowo gotowe przyciski menu i inne przydatne dodatki. Wystarczy trochę poszukać.

Pytania i odpowiedzi <img src alt>

Jak wstawić obrazek w HTML?

Na przykład jeśli plik nazywa się "obrazek.jpg" i znajduje się w tym samym katalogu na dysku komputera co dokument *.html, w którym chcemy wstawić zdjęcie, można się posłużyć następującym znacznikiem: <img src="obrazek.jpg" alt="Tu wpisz krótki opis obrazka">. Tekst "Tu wpisz krótki opis obrazka" normalnie nie pojawi się na stronie, ale zaleca się go nie pomijać. Może on zostać pokazany, jeśli z jakiegoś powodu przeglądarka nie będzie mogła wyświetlić zdjęcia. Jest również przydatny osobom niewidomym, które korzystają ze stron internetowych zwykle za pomocą specjalnych syntezatorów mowy.

Dlaczego nie wyświetla mi się obrazek w HTML?

Najczęstszym powodem niewyświetlania się zdjęć wstawionych na stronie internetowej są błędy literowe w nazwach plików obrazków albo niepoprawnie skonstruowana ścieżka dostępu. Innym powodem może być pominięcie rozszerzenia nazwy pliku. Mimo iż w niektórych systemach operacyjnych (np. Windows) rozszerzenia nazw plików mogą być ukrywane, podczas wstawiania obrazka na stronie internetowej zawsze trzeba go podać. Przyczyną niewyświetlania się zdjęć może być również użycie niedozwolonych znaków w nazwie pliku - np. polskich znaków diakrytycznych albo znaku spacji. Zaleca się także nie używać wielkich liter.

Ustawienie obrazka HTML <img src alt "float">

W jaki sposób określić ustawienie obrazka (grafiki, zdjęcia) na stronie WWW?

<img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny" style="float: ustawienie">
gdzie zamiast: "Tu podaj względną ścieżkę dostępu do obrazka" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek, a w miejsce "Tu podaj tekst alternatywny" wpisuje się krótką informację, która pojawi się w przypadku, kiedy obrazek nie zostanie wyświetlony.
Natomiast jako: "ustawienie" należy wpisać:
left
Obrazek będzie ustawiony po lewej stronie względem otaczającego go tekstu
right
Obrazek po prawej stronie względem tekstu

Dla zainteresowanych
Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości przy wstawianiu obrazków na stronach internetowych, zobacz rozdział: Multimedia / Obrazek.

Przykład <img src alt "float">

align="left" style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left"...

align="right" style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right"...

Pytania i odpowiedzi <img src alt "float">

Jak przesunąć obrazek w lewo HTML?

Aby ustawić obrazek po lewej stronie tekstu, należy dodać do jego znacznika atrybut o odpowiedniej wartości: <img src="obrazek.jpg" alt="Tu wpisz krótki opis obrazka" style="float: left">.

Jak wstawić zdjęcie po prawej stronie w HTML?

Aby w języku HTML ustawić obrazek po prawej stronie tekstu, należy dodać do jego znacznika atrybut o odpowiedniej wartości: <img src="obrazek.jpg" alt="Tu wpisz krótki opis obrazka" style="float: right">.

Wyśrodkowanie obrazka HTML <div "center", img src alt>

W jaki sposób ustawić obrazek (grafikę, zdjęcie) lub inne elementy na środku ekranu (wyśrodkowanie, centrowanie)?

<div style="text-align: center"><img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny"></div>
gdzie zamiast: "Tu podaj względną ścieżkę dostępu do obrazka" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek, a w miejsce "Tu podaj tekst alternatywny" wpisuje się krótką informację, która pojawi się w przypadku, kiedy obrazek nie zostanie wyświetlony.

Polecenie pozwala wyśrodkować obrazek, czyli ustawić go na środku ekranu.

Dla zainteresowanych
Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości przy wstawianiu obrazków na stronach internetowych, zobacz rozdział: Multimedia / Obrazek.

Przykład <div "center", img src alt>

Wyśrodkowany obrazek

Pytania i odpowiedzi <div "center", img src alt>

Jak wycentrować zdjęcie HTML?

Najłatwiejszym sposobem umieszczenia obrazka na środku strony jest wstawienie go wewnątrz znacznika z ustawionym atrybutem o odpowiedniej wartości: <div style="text-align: center"><img src="obrazek.jpg" alt="Tu wpisz krótki opis obrazka"></div>.

Jak wyśrodkować obraz i tekst HTML?

W tym celu zarówno obrazek jak i tekst można umieścić wewnątrz znacznika z ustawionym atrybutem o odpowiedniej wartości: <div style="text-align: center"><img src="obrazek.jpg" alt="Tu wpisz krótki opis obrazka"><br> Tu wpisz podpis zdjęcia</div>. Pomiędzy obrazkiem a tekstem dobrze jest umieścić znacznik końca linii. W przeciwnym razie jeśli zdjęcie będzie za wąskie, pierwsza linijka tekstu może się wyświetlić obok obrazka, a nie pod nim.

Odsyłacz do podstrony HTML <a href>

Do czego służą odsyłacze (hiperłącza, linki, odnośniki hipertekstowe)?

(w obrębie tego samego serwisu)

Praktycznie na każdej stronie WWW spotyka się odsyłacze (inaczej: odnośniki lub hiperłącza). Najczęściej stanowi je specjalnie wyróżniony krótki tekst (lub obrazek), po kliknięciu którego, następuje przeniesienie do innej strony. Tak jak każda książka składa się z rozdziałów, tak samo serwisy internetowe składają się zwykle z podstron. Każda podstrona jest osobnym plikiem HTML (z rozszerzeniem *.html lub *.htm) i zawiera treść, która dość znacznie różni się tematycznie od pozostałych (tworzy się ją w taki sam sposób jak stronę główną). Taka organizacja ułatwia użytkownikowi nawigację oraz zapobiega niepotrzebnemu wczytywaniu całego serwisu od razu (co trwałoby prawdopodobnie bardzo długo). Umieszczenie wszystkiego w jednym pliku (index.html), absolutnie nie jest wskazane (chyba że Twoja strona jest naprawdę krótka)!

Aby umożliwić użytkownikowi swobodne przechodzenie pomiędzy podstronami naszego serwisu, trzeba je w jakiś sposób połączyć między sobą. Należy umieścić w wybranym miejscu odsyłacze do wszystkich podstron. Zwykle przeznacza się na to osobną stronę, która stanowi spis treści i zawiera ułożone kolejno odsyłacze do wszystkich podstron serwisu.

Składnia odsyłacza do podstrony (w obrębie tego samego serwisu) jest następująca:

<a href="względna ścieżka dostępu do podstrony">opis odsyłacza</a>
Zasady wpisywania ścieżki dostępu są takie same jak w przypadku obrazków.
Natomiast zamiast: "opis odsyłacza", należy wpisać krótki tekst, który pojawi się na ekranie i po kliknięciu którego nastąpi przejście do podanej podstrony (adres strony jest widoczny tylko w pasku statusu przeglądarki).

Za pomocą tego typu odsyłacza można się odnosić do dowolnego pliku znajdującego się na koncie FTP razem ze stroną. Dzięki temu można zbudować dział download, tzn. odsyłacze do pobierania plików.

Dla zainteresowanych
Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości przy wstawianiu odsyłaczy do podstrony, zobacz rozdział: Odsyłacze / Do podstrony.

Przykład <a href>

Aby zobaczyć przykład działania takiego odsyłacza możesz kliknąć tutaj (nastąpi przejście do strony głównej tego kursu).

Pytania i odpowiedzi <a href>

Jak nazywa się internetowy odsyłacz?

Odsyłacz internetowy to inaczej hiperłącze, odnośnik hipertekstowy bądź po prostu mniej formalnie: link. Po kliknięciu w niego następuje automatyczne przejście do nowej strony, na którą wskazuje.

Jak zrobić odsyłacz do podstrony HTML?

Na przykład jeśli plik z dokumentem podstrony nazywa się "kontakt.html" i znajduje się w tym samym katalogu na dysku komputera co dokument *.html, w którym chcemy wstawić do niego odsyłacz, można się posłużyć następującym znacznikiem: <a href="kontakt.html">...</a>.

Dlaczego odsyłacz nie działa?

Najczęstszym powodem niedziałającego odsyłacza na stronie internetowej są błędy literowe w nazwie pliku podstrony odnośnika albo niepoprawnie skonstruowana ścieżka dostępu [zobacz: Wstawienie obrazka]. Innym powodem może być pominięcie rozszerzenia nazwy pliku *.html albo *.htm. Mimo iż w niektórych systemach operacyjnych (np. Windows) rozszerzenia nazw plików mogą być ukrywane, podczas wstawiania odsyłacza do podstrony zawsze trzeba go podać. Przyczyną niewyświetlania się właściwej strony po kliknięciu w odsyłacz może być również użycie niedozwolonych znaków w nazwie pliku podstrony - np. polskich znaków diakrytycznych albo znaku spacji. Zaleca się także nie używać wielkich liter. Natomiast jeśli odsyłacz w ogóle się nie klika, powodem może być błąd literowy w nazwie znacznika albo atrybutu - poprawnie powinno być np.: <a href="podstrona.html">...</a>.

Odsyłacz do adresu internetowego HTML <a "http, https">

Jak wstawić link (odsyłacz, hiperłącze, odnośnik hipertekstowy) na stronie WWW?

(w obrębie całego Internetu)

Użytkownika można odsyłać również do cudzych stron, a nie tylko do własnych i nie jest to w żaden sposób łamanie praw autorskich (jeśli nie podpiszemy się jako autorzy takiej strony ;-)) - przeciwnie - jest to darmowa reklama dla strony, do której następuje odwołanie.

Składnia odsyłacza do adresu internetowego (w obrębie całego Internetu) jest następująca:

<a href="adres internetowy">opis odsyłacza</a>
Zasady wpisywania "opisu odsyłacza" są takie same jak w przypadku odsyłacza do podstrony.
Natomiast jako: "adres internetowy" należy wpisać adres miejsca w Internecie, gdzie chcemy się przenieść (np.: http://www.onet.pl).

Adres strony internetowej zawsze musi rozpoczynać się od http:// lub https://

Odsyłacz taki jest przydatny, jeśli chcemy umieścić w swoim serwisie tzw. linki do dowolnych stron w obrębie całego Internetu. Jeśli surfując w sieci, trafimy na jakąś ciekawą stronę, możemy skopiować jej adres (z paska adresu przeglądarki) i umieścić w odsyłaczu. Dzięki temu wszyscy użytkownicy odwiedzający naszą witrynę, będą mogli przenieść się bezpośrednio do wskazanej strony, bez potrzeby wpisywania jej adresu.

Przykład <a "https">

Aby zobaczyć przykład działania takiego odsyłacza możesz kliknąć tutaj (nastąpi przejście do strony głównej portalu internetowego onet.pl).

Pytania i odpowiedzi <a https "http, _blank">

Dlaczego odsyłacz internetowy nie działa?

Prawdopodobnie na początku adresu strony w odsyłaczu brakuje "https://" albo "http://". Prawidłowo powinno to wyglądać np. tak: <a href="https://www.google.pl/">Przejdź do Google</a>. Rzadszą przyczyną może być użycie "https://" podczas gdy strona z odsyłacza obsługuje tylko "http://". Ten pierwszy rodzaj jest bezpieczniejszy dla użytkownika, ponieważ zapewnia szyfrowane połączenie, ale jeśli nie działa, trzeba użyć drugiego typu.

Odsyłacz pocztowy HTML <a "mailto">

Jak wstawić adres e-mail na stronie WWW?

<a href="mailto:adres poczty e-mail">opis odsyłacza</a>
Zamiast: "adres poczty e-mail" należy wpisać adres poczty elektronicznej (np.: jan_kowalski@example.com).

Ten odsyłacz jest przydatny, gdy pragniesz umieścić na stronie adres swojej skrzynki poczty elektronicznej (e-mail). Dzięki temu będziesz w stałym kontakcie z internautami odwiedzającymi Twoją stronę.

Pamiętaj, że podanie swojego adresu na stronie WWW, może spowodować, że zaczną do Ciebie przychodzić niechciane wiadomości - reklamówki (tzw. spam). Dobrym pomysłem może być założenie sobie darmowego konta pocztowego w dowolnym portalu internetowym i podanie adresu takiego konta na swojej stronie - darmowe konto zawsze można zmienić. Zakładając stronę WWW na darmowym serwerze, często dostajemy również konto e-mail. Wtedy można z niego skorzystać.

Dla zainteresowanych
Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości przy wstawianiu odsyłaczy pocztowych na stronach internetowych, zobacz rozdział: Odsyłacze / Odsyłacz pocztowy.

Przykład <a "mailto">

Jako przykład użycia takiego odsyłacza możesz wysłać list do mnie. Tylko proszę, jeśli nie masz nic konkretnego do napisania, nie przysyłaj mi pustych listów ;-)

Pytania i odpowiedzi <a "mailto">

Jak wstawić adres e-mail w HTML?

W tym celu trzeba umieścić na stronie znacznik odsyłacza z atrybutem, w którym będzie się znajdował adres poczty e-mail poprzedzony przez "mailto:". Na przykład jeśli chcemy wstawić odnośnik do adresu "jan.kowalski@example.com", należy się posłużyć następującym kodem: <a href="mailto:jan.kowalski@example.com">...</a>.

Dlaczego odsyłacz e-mail nie działa?

Zwykle powodem jest brak tekstu "mailto:" przed adresem pocztowym w odnośniku. Poprawnie powinno być np.: <a href="mailto:jan.kowalski@example.com">...</a>.

Odsyłacz obrazkowy HTML <a href, img src alt "border">

W jaki sposób wstawić na stronie WWW odnośnik (link, hiperłącze, odsyłacz hipertekstowy) obrazkowy (graficzny), czyli klikalny przycisk?

Wszystkie odsyłacze przedstawione do tej pory, miały postać tekstową. Jeśli chcesz umieścić w swoim serwisie np. menu z obrazkowymi przyciskami, należy w tym celu użyć następującego polecenia:

<a href="adres"><img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny" style="border: 0"></a>
gdzie jako "adres" można podać:Natomiast zamiast: "Tu podaj względną ścieżkę dostępu do obrazka" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek, a w miejsce "Tu podaj tekst alternatywny" wpisuje się krótką informację, która pojawi się w przypadku, kiedy obrazek nie zostanie wyświetlony.

Jak widać odsyłacza obrazkowego możemy użyć w połączeniu z dowolnym typem odnośników (do podstrony, do adresu internetowego lub pocztowy). Jednak najczęściej w ten sposób tworzy się menu nawigacyjne serwisu (odsyłacze do podstron).

Obrazki przycisków najlepiej zapisywać w formacie GIF. Jeśli nie masz zacięcia artystycznego, nie musisz samodzielnie rysować wszystkich grafik. W Internecie na pewno znajdziesz wiele stron, gdzie możesz darmowo pobrać gotowe przyciski.

Dla zainteresowanych
Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości przy wstawianiu odsyłaczy obrazkowych na stronach internetowych, zobacz rozdział: Odsyłacze / Odsyłacz obrazkowy.

Przykład <a href, img src alt "border">

Kliknij na tym przycisku: Kliknij

Pytania i odpowiedzi <a href, img src alt "border">

Jak zrobić, aby obrazek był linkiem?

Najłatwiejszym sposobem umieszczenia odsyłacza obrazkowego na stronie jest wstawienie obrazka wewnątrz znacznika odsyłacza. Odnośniki obrazkowe można tworzyć dla wszystkich typów odsyłaczy: do podstrony, do adresu internetowego i pocztowych. Na przykład jeśli plik zdjęcia nazywa się "obrazek.jpg" i znajduje się w tym samym katalogu na dysku komputera co dokument *.html, w którym chcemy wstawić odsyłacz obrazkowy, można się posłużyć odpowiednio następującymi znacznikami: <a href="podstrona.html"><img src="obrazek.jpg" alt="Przejdź do podstrony" style="border: 0"></a> (odsyłacz do podstrony), <a href="https://www.google.pl/"><img src="obrazek.jpg" alt="Przejdź do Google" style="border: 0"></a> (odsyłacz do adresu internetowego), <a href="mailto:kontakt@example.com"><img src="obrazek.jpg" alt="Skontaktuj się" style="border: 0"></a> (odsyłacz pocztowy).

Jak dodać hiperłącze do zdjęcia?

Hiperłącze to inaczej odsyłacz, odnośnik lub po prostu link hipertekstowy. Wewnątrz hiperłącza możemy umieścić nie tylko zwykły tekst, ale również zdjęcie, a nawet jednocześnie zdjęcie np. z jego podpisem tekstowym. Dzięki temu odsyłacz zadziała bez względu na to, czy użytkownik kliknie bezpośrednio w zdjęcie czy może w jego podpis. Na przykład: <a href="duze-zdjecie.jpg"><img src="male-zdjecie.jpg" alt="Zobacz duże zdjęcie" style="border: 0"><br> Tu wpisz podpis zdjęcia</a>.

Jak zrobić dobrą stronę HTML

Czego unikać, aby Twoja strona WWW nie odstraszała internautów?

Na koniec chciałbym poruszyć bardzo ważną sprawę, o której wiele osób zdaje się zapominać. Znajomość podstaw HTML w zupełności wystarcza do napisania strony internetowej, lecz aby stworzyć dobry serwis, który będzie często odwiedzany i którym będzie się można naprawdę pochwalić, trzeba czegoś więcej:

  1. Zastanów się dobrze nad tematyką swojej strony. Oczywiście nikt nie zabroni Ci publikacji informacji o tym, że np. Twój pies wabi się Azor, a kot - Mruczek, ale czy coś takiego naprawdę może przyciągnąć czytelników? Nie zapominaj, że część osób łączy się z Internetem ze smartfonu czy tabletu, płacąc za ilość danych pobranych z sieci, więc czy ktoś będzie tracił czas na czytanie takich informacji? Postaraj się znaleźć temat, który Cię interesuje, jest oryginalny i może zaciekawić innych. Zwykle lepsze rezultaty przynosi skupienie się na jednej dziedzinie, niż opisywanie wszystkiego po trochę.
  2. Uważaj z doborem kolorów na stronie, zwłaszcza jeśli chodzi o tło oraz tekst. Nieciekawe lub rażąco złe zestawienie barw jest najważniejszym czynnikiem, który zdradza, że autor serwisu jest kompletnym amatorem. Wyobraź sobie co pomyślą np. klienci jakiejś firmy, która posiadałaby stronę z zielonym tłem i czerwonym tekstem (lub co gorsze odwrotnie)! Unikaj jak ognia jaskrawych odcieni w tle. Jeśli nie masz pomysłu, ustal białe tło i czarny tekst - tak jest najbezpieczniej. Dobre rezultaty dają również barwy całkiem ciemne lub delikatne pastelowe (jasne). Tło w żadnym razie nie może pogarszać czytelności strony, dlatego należy pamiętać o doborze odpowiedniego koloru tekstu.
  3. Nie przesadzaj z grafiką. Fakt, że wiesz jak wstawić na stronę obrazek nie oznacza, że musi się od nich roić. Pamiętaj, że to właśnie grafika najbardziej wpływa na szybkość ładowania strony, dlatego ogranicz jej ilość oraz rozmiary. Jeśli już musisz coś umieścić, postaraj się, aby było to naprawdę dobrej jakości. Tworząc samodzielnie obrazy używaj antialiasingu, czyli wygładzania poszarpanych krawędzi. Cechą po której na pierwszy rzut oka można rozpoznać dobrego projektanta jest oszczędne i umiejętne operowanie grafiką, która dobrze komponuje się z wyglądem strony.
  4. Przyjrzyj się innym renomowanym witrynom. Zwróć uwagę na projekt szaty graficznej. Dużo nie zawsze znaczy dobrze. Czasem bardziej oszczędna forma wygląda lepiej, a przede wszystkim czytelniej, niż wyszukane ozdobniki. Najważniejszy jest dobry pomysł. Pamiętaj, że kolorystyka witryny oraz projekt oprawy graficznej to pierwsze rzeczy, na które zwracają uwagę użytkownicy. Jeśli się nie postarasz, Twoja strona już na wstępie będzie mówiła: "Tutaj nie ma nic godnego uwagi, możesz opuścić to miejsce". Większość dobrych stron w Internecie zbudowana jest następująco: na górze znajduje się banner lub logo serwisu, po lewej lub po prawej - menu, a obok - treść strony. Nie znaczy to, że musisz koniecznie podporządkować się takiemu kanonowi, lecz jeżeli chcesz uzyskać podobną strukturę, we właściwej treści strony (BODY) wpisz np.:
    <header style="text-align: center">Tutaj można umieścić logo serwisu</header>
<nav style="width: 300px; float: left; overflow: hidden">
Tu umieszcza się odsyłacze spisu treści
</nav>
<article style="margin-left: 320px">

Tu wpisuje się treść strony

</article>
<footer style="text-align: center; clear: both">Tutaj można umieścić stopkę serwisu</footer>
    a otrzymamy:

    Tutaj można umieścić logo serwisu
    Tu wpisuje się treść strony
    Tutaj można umieścić stopkę serwisu
  5. Nawigacja w serwisie to bardzo ważna sprawa. Nieczytelny układ strony, menu w którym trudno cokolwiek znaleźć i inne podobne historie są częstą przyczyną zniechęcenia użytkowników, którzy w konsekwencji opuszczają witrynę. Przy projektowaniu systemu odsyłaczy spróbuj wczuć się w sposób myślenia internautów. Pamiętaj, że nie znają oni serwisu tak dobrze jak Ty i mogą nie chcieć zagłębiać się w szczegóły. Dlatego warto w widocznym miejscu umieścić hiperłącza do najciekawszych działów, jakiś system wyszukiwania lub indeks. W przypadku obszerniejszych witryn wskazane jest podzielenie ich na działy tematyczne. Sposób nawigacji powinien być przede wszystkim wygodny, praktyczny, logiczny i łatwo dostępny.
  6. Dbaj o poprawność ortograficzną i stylistyczną tekstu. Naucz się zasad wpisywania znaków interpunkcyjnych. Jeśli na stronie WWW występuje masa błędów, prawdopodobnie autor nie ma nic ważnego do przekazania.
  7. Postaraj się na bieżąco aktualizować treść strony i usuwać powstałe błędy. Udoskonalaj oprawę graficzną oraz system nawigacji, aby serwis nie stał się nudny. Informuj o wprowadzanych nowościach i utrzymuj kontakt za pośrednictwem wiadomości e-mail z użytkownikami. Otwórz się na konstruktywną krytykę.

Jeżeli masz jakieś zastrzeżenia co do tego serwisu, wiesz jak można zrobić coś lepiej, 

Gotowiec HTML

Potrzebujesz na jutro gotowej, profesjonalnie wyglądającej strony HTML (gotowiec) i to zupełnie za darmo?

Istnieje sposób na zrobienie profesjonalnie wyglądającej strony internetowej nawet bez dużego doświadczenia - są to szablony WWW (gotowce). Wiele serwisów internetowych oferuje darmowo gotowe projekty graficzne witryn. Zawierają one całą strukturę dokumentu oraz wszystkie potrzebne grafiki. Jedyne co trzeba zrobić samodzielnie, to uzupełnić szablon własnym tekstem w odpowiednich miejscach. Jeśli nie masz zatem pomysłu na projekt graficzny swojego serwisu, radzę poszukać ciekawego szablonu w sieci. Dzięki temu Twoja strona na pewno nie będzie "straszyła" internautów ;-)

Jeżeli nie chcesz korzystać z gotowych rozwiązań, przy tworzeniu własnego szablonu WWW pomoże Ci generator zamieszczony tutaj. Dzięki niemu w kilka minut skonfigurujesz własny, dopasowany do Twoich wymagań szablon HTML.

Jednak nawet jeśli zdecydujesz się skorzystać z gotowego szablonu WWW, nadal zapewne będziesz chcieć wstawić na swojej stronie zdjęcia, odnośniki czy choćby pogrubić tekst albo poukładać go w osobne akapity bądź po prostu przenieść do nowej linii (w języku HTML klawisz Enter "nie działa"). Informacje jak to zrobić i wiele więcej są oczywiście zawarte w tym rozdziale.

Darmowe szablony WWW (gotowce) do pobrania

Gotowce w postaci darmowych szablonów WWW możesz pobrać w serwisach:

Przy wyborze gotowego szablonu warto zwrócić uwagę na pewne rzeczy. Niektóre szablony wyglądają nawet bardzo dobrze, ale są tak przeładowane grafiką, że wczytywanie takiej strony może potrwać bardzo długo. Dodatkowo szczególnie jeśli korzystasz z obcojęzycznych szablonów, należy sprawdzić sposób kodowania znaków. W nagłówku każdej strony HTML musi znajdować się linijka:

<meta charset="utf-8">

(zobacz: Ramy dokumentu). Brak podobnej linijki w nagłówku strony albo istniejące wpisy typu:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

są poważnym błędem, który spowoduje niepoprawne wyświetlanie polskich znaków w przeglądarce!

Podsumowanie

To by było na tyle. Poznane tu polecenia powinny pozwolić Ci na napisanie prostej, ale zarazem dość dobrze wyglądającej strony WWW. Jeśli już teraz chcesz jak najszybciej sprawdzić w praktyce poznane wiadomości, to tutaj możesz skorzystać z szybkiego edytora stron próbnych, który pozwoli Ci napisać Twoją pierwszą testową stronę WWW. A więc do dzieła...

Jeżeli będziesz mieć więcej czasu, zajrzyj do dalszych rozdziałów tego kursu. Znajdziesz tam o wiele więcej przydatnych znaczników, dzięki którym napiszesz jeszcze lepszą stronę.

Aby kontynuować Kurs HTML, kliknij poniższe linki:

Dodatkowo w rozdziale: I co dalej możesz przeczytać szczegółowy opis, jak wprowadzić swoją stronę do Internetu (zupełnie za darmo).
Zapraszam...

Jeśli planujesz stworzyć bardziej profesjonalną stronę internetową, zachęcam do zapoznania się z rozdziałem pod tytułem: CSS dla zielonych, który jest przeznaczony specjalnie dla osób początkujących.

Rozpocznij kurs CSS

Pytania i odpowiedzi

Poniżej znajdziesz wykaz najczęściej zadawanych pytań z tego rozdziału wraz ze zwięzłymi odpowiedziami i gotowymi do użycia przykładami kodu HTML. Aby sprawdzić bardziej szczegółowy opis, kliknij odnośnik "Zobacz więcej..." pod wybraną odpowiedzią.

Który edytor HTML wybrać: Pajączek, CoreEditor, Bluefish, Brackets, PSPad, gedit, Kate, Quanta Plus, SCREEM, Smultron?

Co to jest HTML i do czego służy?

HTML to skrót od Hypertext Markup Language - czyli Hipertekstowy Język Oznaczania. Jest to język komputerowy służący do tworzenia stron internetowych. Dokument HTML jest plikiem tekstowym, w którym wpisujemy wszystkie polecenia dotyczące formatowania tekstu, wstawiania grafiki i inne.

Zobacz więcej...

Jak edytować stronę w HTML?

Do edycji stron w języku HTML najlepiej użyć specjalnego edytora. Istnieje wiele darmowych i płatnych edytorów HTML dla różnych systemów operacyjnych: Windows, Linux, Mac OS X.

Zobacz więcej...

W jakim programie pisać kod HTML?

Do pisania kodu HTML najlepiej użyć dedykowanego edytora. Istnieje wiele darmowych i płatnych edytorów HTML dla różnych systemów operacyjnych. Na przykład: Pajączek, CoreEditor, Bluefish, Brackets, PSPad, gedit, Kate, Quanta Plus, SCREEM, Smultron.

Zobacz więcej...

Jaki edytor HTML?

Brackets to jeden z lepszych edytorów HTML. Posiada szereg wbudowanych funkcji przydatnych przy tworzeniu stron internetowych. Obsługuje instalowanie darmowych rozszerzeń, które mogą dodatkowo zwiększyć jego możliwości. Jest przy tym całkowicie darmowy i dostępny w wersjach dla każdego systemu operacyjnego.

Zobacz więcej...

Jak zmienić tekst na HTML?

Wiele edytorów tekstu - takich jak np. Microsoft Word, Open Office czy Libre Office - posiada możliwość przekształcenia dokumentu na kod HTML. W tym celu zwykle wystarczy skorzystać z menu: "Plik / Zapisz jako...", a następnie w oknie dialogowym w polu "Zapisz jako typ" wybrać wartość: "Strona sieci Web, przefiltrowana (*.htm;*.html)" lub odpowiednio: "Dokument HTML (Writer) (*.html)". Na koniec wystarczy kliknąć przycisk "Zapisz". Trzeba jednak pamiętać, że w ten sposób utworzone dokumenty HTML mogą długo się ładować i niepoprawnie wyświetlać się w niektórych przeglądarkach, a ponadto być trudne do późniejszej modyfikacji. Dlatego do tworzenia tego typu dokumentów zaleca się używać dedykowanych edytorów HTML.

Zobacz więcej...

Jak otworzyć plik HTML w Wordzie?

Edytory tekstu takie jak np. Microsoft Word, Open Office czy Libre Office pozwalają bezpośrednio otwierać do edycji pliki HTML. W tym celu wybierz menu: "Plik / Otwórz", a następnie odszukaj dokument *.html lub *.htm na dysku i kliknij przycisk "Otwórz". Pamiętaj jednak, że w ten sposób zmodyfikowany dokument HTML może się potem długo ładować i niepoprawnie wyświetlać w niektórych przeglądarkach. Dlatego do tworzenia tego typu dokumentów zaleca się używać dedykowanych edytorów HTML.

Zobacz więcej...

Jak wygląda typowy dokument HTML? Co to są podstrony?

Jaka jest struktura dokumentu HTML?

Dokument HTML składa się z sekcji nagłówkowej <head>...</head> i właściwego ciała dokumentu <body>...</body>. W nagłówku wpisujemy m.in. tytuł i opis strony. Natomiast w ciele dokumentu znajduje się tekst i inne elementy, które wyświetlą się w oknie przeglądarki.

Zobacz więcej...

Zobacz więcej...

Jak ustawić polskie znaki w HTML?

Aby polskie znaki diakrytyczne poprawnie się wyświetlały, w sekcji nagłówkowej dokumentu HTML należy wstawić deklarację strony kodowej: <meta charset="utf-8">. Ponadto konieczne jest użycie odpowiedniego edytora HTML.

Zobacz więcej...

Jak zrobić podstrony w HTML?

Serwisy internetowe zwykle składają się z wielu podstron. Aby stworzyć podstronę, otwórz dowolny edytor HTML i utwórz w nim nowy plik - dokładnie w taki sam sposób, jak przy tworzeniu strony głównej serwisu. Następnie wprowadź w nim odpowiednią treść i zapisz plik na dysku z rozszerzeniem *.html albo *.htm.

Zobacz więcej...

Jak otworzyć plik HTML w przeglądarce?

Istnieją dwa sposoby otworzenia pliku HTML w przeglądarce internetowej. Pierwszym z nich jest użycie w przeglądarce internetowej odpowiedniego skrótu klawiszowego (w systemie Windows będzie to Ctrl+O), a następnie w oknie dialogowym odszukanie pliku na dysku i kliknięciu przycisku "Otwórz". Drugim sposobem jest odszukanie pliku HTML na dysku za pomocą wbudowanego w system operacyjny eksploratora plików, następnie dwukrotne kliknięcie jego nazwy - spowoduje to otworzenie pliku w domyślnej przeglądarce internetowej.

Zobacz więcej...

W jaki sposób wpisuje się tekst na stronach WWW? Jakie są zasady poprawnego wpisywania znaków interpunkcyjnych w tekście komputerowym?

Zobacz więcej...

Jak dodać tekst do strony?

Aby dodać zwykły tekst do istniejącej strony internetowej, wystarczy otworzyć wybrany plik *.html w edytorze HTML. Następnie trzeba wyszukać miejsce w dokumencie, gdzie ma zostać dodany nowy tekst - powinno to być gdzieś wewnątrz sekcji <body>...</body>. Tekst można w tym miejscu po prostu wpisać z klawiatury albo wkleić ze schowka systemowego np. przy pomocy kombinacji klawiszy Ctrl+V (pod systemem Windows). Na koniec można zapisać zmieniony plik *.html przy pomocy skrótu klawiaturowego: Ctrl+S.

Zobacz więcej...

Co to są znaczniki HTML?

Co to są znaczniki?

Znacznik jest to specjalny tekst umieszczony w nawiasach ostrych. Jest on częścią składni języka HTML i pozwala sterować wyglądem strony. Istnieją znaczniki otwierające i zamykające. Na początku znacznika zamykającego zawsze znajduje się znak ukośnika "/".

Zobacz więcej...

Zobacz więcej...

Jak wstawić znaki specjalne w HTML?

Ponieważ znaki: "<" (znak mniejszości) oraz ">" (znak większości) są zarezerwowane dla znaczników, nie powinny się one pojawić w normalnej treści strony. Jeżeli musimy ich użyć, należy wpisywać zamiast nich odpowiednio: &lt; oraz &gt;.

Zobacz więcej...

W jaki sposób przenieść tekst do następnej linijki w dokumencie HTML?

Jak zakończyć linię w HTML?

W języku HTML użycie klawisza Enter nie spowoduje, że tekst zostanie wyświetlony w nowej linijce. Aby to zrobić, należy użyć znacznika <br>.

Zobacz więcej...

Zobacz więcej...

Zobacz więcej...

Zobacz więcej...

W jaki sposób układać tekst na ekranie? Jak dodać nowy akapit? Jak wyśrodkować lub wyjustować tekst? Co to są atrybuty HTML?

Zobacz więcej...

Co to jest paragraf w HTML?

Paragraf to inna nazwa akapitu - czyli pewnego oddzielnego wizualnie i tematycznie fragmentu dłuższego tekstu. Tę nazwę stosuje się jednak raczej w stosunku do przepisów prawnych, a nie do zwykłego tekstu.

Zobacz więcej...

Jak wyśrodkować tekst?

Aby ułożyć tekst na środku, można dodać odpowiedni atrybut do znacznika akapitu: <p style="text-align: center">...</p>.

Zobacz więcej...

Jak wyjustować tekst w HTML?

Aby wyróżnać tekt do obu marginesów jednocześnie, należy dodać odpowiedni atrybut do znacznika akapitu: <p style="text-align: justify">...</p>.

Zobacz więcej...

Zobacz więcej...

W jaki sposób pogrubić (wytłuścić) tekst na stronie WWW?

Zobacz więcej...

Jak zmienić grubość tekstu HTML?

Domyślnie tekst na stronie internetowej jest napisany zwykłą czcionką. Aby pogrubić fragment tekstu, wystarczy umieścić go wewnątrz znacznika <b>...</b>, dzięki czemu będzie się on lepiej wyróżniał wizualnie.

Zobacz więcej...

W jaki sposób pochylić tekst na stronie WWW (kursywa)?

Zobacz więcej...

Jak pochylić tekst w HTML?

Domyślnie tekst na stronie internetowej jest napisany zwykłą czcionką. Aby pochylić fragment tekstu, wystarczy umieścić go wewnątrz znacznika <i>...</i>. W ten sposób często oznacza się np. termin techniczny, idiom z innego języka albo fragment wtrąconego tekstu.

Zobacz więcej...

W jaki sposób podkreślić tekst na stronie WWW?

Zobacz więcej...

Jak dodać podkreślenie HTML?

Domyślnie tekst na stronie internetowej jest napisany zwykłą czcionką. Aby podkreślić fragment tekstu, wystarczy umieścić go wewnątrz znacznika <u>...</u>. W ten sposób często oznacza się nieartykułowany tekst albo błąd ortograficzny.

Zobacz więcej...

W jaki sposób przekreślić tekst na stronie WWW?

Zobacz więcej...

Jak przekreślić tekst w HTML?

Domyślnie tekst na stronie internetowej jest napisany zwykłą czcionką. Aby przekreślić fragment tekstu, wystarczy umieścić go wewnątrz znacznika <s>...</s>. W ten sposób często oznacza się treść, która nie jest dłużej trafna lub istotna z punktu widzenia pozostałej zawartości dokumentu.

Zobacz więcej...

W jaki sposób zmienić rozmiar czcionki na stronie WWW?

Jak zmienić rozmiar czcionki HTML?

W tym celu należy objąć tekst znacznikiem z przypisanym atrybutem o odpowiedniej wartości: <span style="font-size: xx-small">...</span> (najmniejsza czcionka), <span style="font-size: x-small">...</span> (bardzo mała czcionka), <span style="font-size: small">...</span> (mała czcionka), <span style="font-size: medium">...</span> (średnia czcionka), <span style="font-size: large">...</span> (duża czcionka), <span style="font-size: x-large">...</span> (bardzo duża czcionka), <span style="font-size: xx-large">...</span> (największa czcionka).

Zobacz więcej...

Jak zmniejszyć rozmiar czcionki HTML?

Zwykły tekst na stronie wyświetla się w domyślnym rozmiarze czcionki. Aby go pomniejszyć, trzeba objąć go znacznikiem z przypisanym atrybutem o odpowiedniej wartości: <span style="font-size: x-small">...</span> albo jeśli chcemy bardzo pomniejszyć tekst: <span style="font-size: xx-small">...</span>.

Zobacz więcej...

W jaki sposób zmienić kolor czcionki na stronie WWW?

Jak zmienić kolor czcionki w HTML?

W tym celu należy objąć tekst znacznikiem z przypisanym atrybutem o odpowiedniej wartości: <span style="color: black">...</span> (czarny), <span style="color: white">...</span> (biały), <span style="color: silver">...</span> (srebrny), <span style="color: gray">...</span> (szary), <span style="color: maroon">...</span> (kasztanowy), <span style="color: red">...</span> (czerwony), <span style="color: purple">...</span> (purpurowy), <span style="color: fuchsia">...</span> (fuksja), <span style="color: green">...</span> (zielony), <span style="color: lime">...</span> (limonowy), <span style="color: olive">...</span> (oliwkowy), <span style="color: yellow">...</span> (żółty), <span style="color: navy">...</span> (granatowy), <span style="color: blue">...</span> (niebieski), <span style="color: teal">...</span> (zielonomodry), <span style="color: aqua">...</span> (akwamaryna).

Zobacz więcej...

Jak używać kolorów w HTML?

Jednym z najczęstszych sposobów, jak używamy kolorów na stronach internetowych, jest zmiana barwy tekstu. Domyślnie każdy tekst będzie napisany zwykle kolorem czarnym albo ewentualnie białym - w przypadku ustawienia ciemnego motywu w systemie operacyjnym bądź przeglądarce internetowej. Aby zmienić kolor tekstu na inny, wystarczy objąć go znacznikiem z przypisanym atrybutem o odpowiedniej wartości. Na przykład: <span style="color: red">...</span> zmieni kolor tekstu na czerwony.

Zobacz więcej...

W jaki sposób zmienić rodzaj czcionki na stronie WWW?

Jakie są rodzaje czcionek?

Najpopularniejsze rodzaje czcionek to: 'Times New Roman', Arial, 'Courier New', Verdana, Tahoma, 'Trebuchet MS', Georgia, Helvetica.

Zobacz więcej...

Jak zmienić rodzaj czcionki w HTML?

W tym celu należy objąć tekst znacznikiem z przypisanym atrybutem o odpowiedniej wartości - np.: <span style="font-family: Arial">...</span>, <span style="font-family: 'Courier New'">...</span>, <span style="font-family: 'Times New Roman'">...</span>, <span style="font-family: Verdana">...</span>.

Zobacz więcej...

W jaki sposób zmienić wygląd tekstu na stronie WWW?

Zobacz więcej...

Zobacz więcej...

Jak wstawić indeks górny i dolny przy tekście?

Zobacz więcej...

Jak dodać tekst do góry HTML?

Aby wyświetlić pomniejszony tekst nieco wyżej od zwykłej linii tekstu i tym samym stworzyć indeks górny, należy użyć następującego kodu: x<sup>2</sup>. W tym przykładzie cyfra 2 zostanie wyświetlona jako indeks górny litery x.

Zobacz więcej...

W jaki sposób zmienić kolor tła oraz kolor tekstu na stronie WWW?

Jak zmienić kolor tła i tekstu w HTML?

Aby zmienić domyślny kolor tła oraz tekstu na całej stronie, najlepiej do znacznika właściwego ciała dokumentu dodać atrybut o odpowiednich wartościach. Na przykład: <body style="background-color: black; color: white">...</body> ustawi czarny kolor tła i biały kolor tekstu. Należy jednak przy tym pamiętać, że w pliku *.html może się znajdować tylko jeden znacznik ciała dokumentu. Zatem odpowiedni atrybut dodajemy do już istniejącego znacznika, a nie wstawiamy nowego!

Zobacz więcej...

Jak zrobić żółte tło w HTML?

Kolor tła na stronie internetowej zawsze powinno się ustawiać wraz z odpowiednio kontrastującą barwą tekstu. W przeciwnym razie użytkownik może zmienić domyślny kolor tekstu w swojej przeglądarce internetowej i wtedy mógłby stać się on nieczytelny (np. biały tekst na żółtym tle). Aby ustawić żółte tło i czarny tekst na całej stronie, najlepiej do znacznika właściwego ciała dokumentu dodać atrybut o odpowiednich wartościach: <body style="background-color: yellow; color: black">...</body>. Należy jednak przy tym pamiętać, że w pliku *.html może się znajdować tylko jeden znacznik ciała dokumentu. Zatem odpowiedni atrybut dodajemy do już istniejącego znacznika, a nie wstawiamy nowego!

Zobacz więcej...

Jak dodać na stronie WWW poziomą linię?

Zobacz więcej...

Zobacz więcej...

W jaki sposób wstawić obrazek (grafikę, zdjęcie) na stronę WWW?

Jak wstawić obrazek w HTML?

Na przykład jeśli plik nazywa się "obrazek.jpg" i znajduje się w tym samym katalogu na dysku komputera co dokument *.html, w którym chcemy wstawić zdjęcie, można się posłużyć następującym znacznikiem: <img src="obrazek.jpg" alt="Tu wpisz krótki opis obrazka">. Tekst "Tu wpisz krótki opis obrazka" normalnie nie pojawi się na stronie, ale zaleca się go nie pomijać. Może on zostać pokazany, jeśli z jakiegoś powodu przeglądarka nie będzie mogła wyświetlić zdjęcia. Jest również przydatny osobom niewidomym, które korzystają ze stron internetowych zwykle za pomocą specjalnych syntezatorów mowy.

Zobacz więcej...

Dlaczego nie wyświetla mi się obrazek w HTML?

Najczęstszym powodem niewyświetlania się zdjęć wstawionych na stronie internetowej są błędy literowe w nazwach plików obrazków albo niepoprawnie skonstruowana ścieżka dostępu. Innym powodem może być pominięcie rozszerzenia nazwy pliku. Mimo iż w niektórych systemach operacyjnych (np. Windows) rozszerzenia nazw plików mogą być ukrywane, podczas wstawiania obrazka na stronie internetowej zawsze trzeba go podać. Przyczyną niewyświetlania się zdjęć może być również użycie niedozwolonych znaków w nazwie pliku - np. polskich znaków diakrytycznych albo znaku spacji. Zaleca się także nie używać wielkich liter.

Zobacz więcej...

W jaki sposób określić ustawienie obrazka (grafiki, zdjęcia) na stronie WWW?

Jak przesunąć obrazek w lewo HTML?

Aby ustawić obrazek po lewej stronie tekstu, należy dodać do jego znacznika atrybut o odpowiedniej wartości: <img src="obrazek.jpg" alt="Tu wpisz krótki opis obrazka" style="float: left">.

Zobacz więcej...

Jak wstawić zdjęcie po prawej stronie w HTML?

Aby w języku HTML ustawić obrazek po prawej stronie tekstu, należy dodać do jego znacznika atrybut o odpowiedniej wartości: <img src="obrazek.jpg" alt="Tu wpisz krótki opis obrazka" style="float: right">.

Zobacz więcej...

W jaki sposób ustawić obrazek (grafikę, zdjęcie) lub inne elementy na środku ekranu (wyśrodkowanie, centrowanie)?

Jak wycentrować zdjęcie HTML?

Najłatwiejszym sposobem umieszczenia obrazka na środku strony jest wstawienie go wewnątrz znacznika z ustawionym atrybutem o odpowiedniej wartości: <div style="text-align: center"><img src="obrazek.jpg" alt="Tu wpisz krótki opis obrazka"></div>.

Zobacz więcej...

Jak wyśrodkować obraz i tekst HTML?

W tym celu zarówno obrazek jak i tekst można umieścić wewnątrz znacznika z ustawionym atrybutem o odpowiedniej wartości: <div style="text-align: center"><img src="obrazek.jpg" alt="Tu wpisz krótki opis obrazka"><br> Tu wpisz podpis zdjęcia</div>. Pomiędzy obrazkiem a tekstem dobrze jest umieścić znacznik końca linii. W przeciwnym razie jeśli zdjęcie będzie za wąskie, pierwsza linijka tekstu może się wyświetlić obok obrazka, a nie pod nim.

Zobacz więcej...

Do czego służą odsyłacze (hiperłącza, linki, odnośniki hipertekstowe)?

Jak nazywa się internetowy odsyłacz?

Odsyłacz internetowy to inaczej hiperłącze, odnośnik hipertekstowy bądź po prostu mniej formalnie: link. Po kliknięciu w niego następuje automatyczne przejście do nowej strony, na którą wskazuje.

Zobacz więcej...

Jak zrobić odsyłacz do podstrony HTML?

Na przykład jeśli plik z dokumentem podstrony nazywa się "kontakt.html" i znajduje się w tym samym katalogu na dysku komputera co dokument *.html, w którym chcemy wstawić do niego odsyłacz, można się posłużyć następującym znacznikiem: <a href="kontakt.html">...</a>.

Zobacz więcej...

Dlaczego odsyłacz nie działa?

Najczęstszym powodem niedziałającego odsyłacza na stronie internetowej są błędy literowe w nazwie pliku podstrony odnośnika albo niepoprawnie skonstruowana ścieżka dostępu [zobacz: Wstawienie obrazka]. Innym powodem może być pominięcie rozszerzenia nazwy pliku *.html albo *.htm. Mimo iż w niektórych systemach operacyjnych (np. Windows) rozszerzenia nazw plików mogą być ukrywane, podczas wstawiania odsyłacza do podstrony zawsze trzeba go podać. Przyczyną niewyświetlania się właściwej strony po kliknięciu w odsyłacz może być również użycie niedozwolonych znaków w nazwie pliku podstrony - np. polskich znaków diakrytycznych albo znaku spacji. Zaleca się także nie używać wielkich liter. Natomiast jeśli odsyłacz w ogóle się nie klika, powodem może być błąd literowy w nazwie znacznika albo atrybutu - poprawnie powinno być np.: <a href="podstrona.html">...</a>.

Zobacz więcej...

Jak wstawić link (odsyłacz, hiperłącze, odnośnik hipertekstowy) na stronie WWW?

Zobacz więcej...

Dlaczego odsyłacz internetowy nie działa?

Prawdopodobnie na początku adresu strony w odsyłaczu brakuje "https://" albo "http://". Prawidłowo powinno to wyglądać np. tak: <a href="https://www.google.pl/">Przejdź do Google</a>. Rzadszą przyczyną może być użycie "https://" podczas gdy strona z odsyłacza obsługuje tylko "http://". Ten pierwszy rodzaj jest bezpieczniejszy dla użytkownika, ponieważ zapewnia szyfrowane połączenie, ale jeśli nie działa, trzeba użyć drugiego typu.

Zobacz więcej...

Zobacz więcej...

Jak wstawić adres e-mail na stronie WWW?

Jak wstawić adres e-mail w HTML?

W tym celu trzeba umieścić na stronie znacznik odsyłacza z atrybutem, w którym będzie się znajdował adres poczty e-mail poprzedzony przez "mailto:". Na przykład jeśli chcemy wstawić odnośnik do adresu "jan.kowalski@example.com", należy się posłużyć następującym kodem: <a href="mailto:jan.kowalski@example.com">...</a>.

Zobacz więcej...

Dlaczego odsyłacz e-mail nie działa?

Zwykle powodem jest brak tekstu "mailto:" przed adresem pocztowym w odnośniku. Poprawnie powinno być np.: <a href="mailto:jan.kowalski@example.com">...</a>.

Zobacz więcej...

W jaki sposób wstawić na stronie WWW odnośnik (link, hiperłącze, odsyłacz hipertekstowy) obrazkowy (graficzny), czyli klikalny przycisk?

Jak zrobić, aby obrazek był linkiem?

Najłatwiejszym sposobem umieszczenia odsyłacza obrazkowego na stronie jest wstawienie obrazka wewnątrz znacznika odsyłacza. Odnośniki obrazkowe można tworzyć dla wszystkich typów odsyłaczy: do podstrony, do adresu internetowego i pocztowych. Na przykład jeśli plik zdjęcia nazywa się "obrazek.jpg" i znajduje się w tym samym katalogu na dysku komputera co dokument *.html, w którym chcemy wstawić odsyłacz obrazkowy, można się posłużyć odpowiednio następującymi znacznikami: <a href="podstrona.html"><img src="obrazek.jpg" alt="Przejdź do podstrony" style="border: 0"></a> (odsyłacz do podstrony), <a href="https://www.google.pl/"><img src="obrazek.jpg" alt="Przejdź do Google" style="border: 0"></a> (odsyłacz do adresu internetowego), <a href="mailto:kontakt@example.com"><img src="obrazek.jpg" alt="Skontaktuj się" style="border: 0"></a> (odsyłacz pocztowy).

Zobacz więcej...

Jak dodać hiperłącze do zdjęcia?

Hiperłącze to inaczej odsyłacz, odnośnik lub po prostu link hipertekstowy. Wewnątrz hiperłącza możemy umieścić nie tylko zwykły tekst, ale również zdjęcie, a nawet jednocześnie zdjęcie np. z jego podpisem tekstowym. Dzięki temu odsyłacz zadziała bez względu na to, czy użytkownik kliknie bezpośrednio w zdjęcie czy może w jego podpis. Na przykład: <a href="duze-zdjecie.jpg"><img src="male-zdjecie.jpg" alt="Zobacz duże zdjęcie" style="border: 0"><br> Tu wpisz podpis zdjęcia</a>.

Zobacz więcej...

Powtórka

Sprawdź, czy pamiętasz, za co odpowiadają poniższe fragmenty kodu źródłowego HTML. W razie wątpliwości kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.

W jaki sposób przenieść tekst do następnej linijki w dokumencie HTML?

<br>

Zobacz więcej...

W jaki sposób układać tekst na ekranie? Jak dodać nowy akapit? Jak wyśrodkować lub wyjustować tekst? Co to są atrybuty HTML?

<p>Tu wpisz treść akapitu</p>
<p style="text-align: left">Treść akapitu</p>
<p>Treść akapitu</p>
<p style="text-align: right">Treść akapitu</p>
<p style="text-align: center">Treść akapitu</p>
<p style="text-align: justify">Treść akapitu</p>

Zobacz więcej...

W jaki sposób pogrubić (wytłuścić) tekst na stronie WWW?

<b>Tu wpisz tekst</b>

Zobacz więcej...

W jaki sposób pochylić tekst na stronie WWW (kursywa)?

<i>Tu wpisz tekst</i>

Zobacz więcej...

W jaki sposób podkreślić tekst na stronie WWW?

<u>Tu wpisz tekst</u>

Zobacz więcej...

W jaki sposób przekreślić tekst na stronie WWW?

<s>Tu wpisz tekst</s>

Zobacz więcej...

W jaki sposób zmienić rozmiar czcionki na stronie WWW?

<span style="font-size: rozmiar">Tu wpisz tekst</span>

Zobacz więcej...

W jaki sposób zmienić kolor czcionki na stronie WWW?

<span style="color: kolor">Tu wpisz tekst</span>

Zobacz więcej...

W jaki sposób zmienić rodzaj czcionki na stronie WWW?

<span style="font-family: rodzaj">Tu wpisz tekst</span>
<span style="font-family: rodzaj1, rodzaj2, rodzaj3...">Tu wpisz tekst</span>

Zobacz więcej...

Jak wstawić indeks górny i dolny przy tekście?

<sup>...</sup>
<sub>...</sub>

Zobacz więcej...

W jaki sposób zmienić kolor tła oraz kolor tekstu na stronie WWW?

<body style="background-color: kolor tła; color: kolor tekstu">
Tu jest właściwa treść strony
</body>

Zobacz więcej...

Jak dodać na stronie WWW poziomą linię?

<hr>

Zobacz więcej...

W jaki sposób wstawić obrazek (grafikę, zdjęcie) na stronę WWW?

<img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny">

Zobacz więcej...

W jaki sposób określić ustawienie obrazka (grafiki, zdjęcia) na stronie WWW?

<img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny" style="float: ustawienie">

Zobacz więcej...

W jaki sposób ustawić obrazek (grafikę, zdjęcie) lub inne elementy na środku ekranu (wyśrodkowanie, centrowanie)?

<div style="text-align: center"><img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny"></div>

Zobacz więcej...

Do czego służą odsyłacze (hiperłącza, linki, odnośniki hipertekstowe)?

<a href="względna ścieżka dostępu do podstrony">opis odsyłacza</a>

Zobacz więcej...

Jak wstawić link (odsyłacz, hiperłącze, odnośnik hipertekstowy) na stronie WWW?

<a href="adres internetowy">opis odsyłacza</a>

Zobacz więcej...

Jak wstawić adres e-mail na stronie WWW?

<a href="mailto:adres poczty e-mail">opis odsyłacza</a>

Zobacz więcej...

W jaki sposób wstawić na stronie WWW odnośnik (link, hiperłącze, odsyłacz hipertekstowy) obrazkowy (graficzny), czyli klikalny przycisk?

<a href="adres"><img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny" style="border: 0"></a>

Zobacz więcej...

Quiz i certyfikat ukończenia

Sprawdź swoją wiedzę, nabytą w tym rozdziale i zdobądź imienny certyfikat ukończenia * , rozwiązując testowy QUIZ (online).

* Aby otrzymać certyfikat, wybierz opcję: Wszystkie pytania z rozdziału.

Ćwiczenia

Teoria bez praktyki jest niczym. Dlatego zachęcam do stałego eksperymentowania z kodem HTML w trakcie czytania kursu. Dzięki temu poznane informacje na pewno zostaną lepiej utrwalone w Twojej pamięci. Ponadto często dopiero na etapie ćwiczeń praktycznych okazuje się, że tak naprawdę nie do końca właściwie zrozumieliśmy teorię. Jednak przede wszystkim to praktyka sprawia, że stajemy się coraz lepsi w danej dziedzinie. To z kolei pobudza i rozwija naszą pasję, dzięki której możemy stać się prawdziwymi mistrzami - praktyka czyni mistrza. Dlatego nie zaniedbuj tego etapu nauki. Zainstaluj edytor HTML i zacznij systematycznie ćwiczyć.

W ramach rozwoju umiejętności praktycznych zalecam wykonanie serii ćwiczeń. Będą one polegać na stworzeniu prostej strony internetowej bazującej na poznanych informacjach. W kolejnych rozdziałach będziemy ją stopniowo rozbudowywać, dlatego nie zapomnij zapisać jej sobie gdzieś na komputerze. Na tym etapie opublikowanie strony w internecie nie będzie jeszcze konieczne.

  1. Znajdź temat, który szczególnie Cię interesuje. Może to być np. Twoja ulubiona książka, gra komputerowa, zespół muzyczny, dyscyplina sportu itp.

    Jeżeli do Twojej strony zamierzasz zaczerpnąć informacje z internetu, pamiętaj o poszanowaniu praw autorskich! Nie zawsze można sobie swobodnie skopiować na swoją stronę dowolny tekst, jeżeli autor nie wyraził na to zgody. Każdy cytat powinien być wyraźnie oznaczony z podaniem jego źródła.

    Możesz również stworzyć stronę o sobie, w której opiszesz krótko swoją biografię, zainteresowania, hobby itp.
  2. Otwórz edytor HTML. Jeśli korzystasz z edytora graficznego, przełącz się do trybu bezpośredniej edycji kodu źródłowego HTML.
  3. W edytorze utwórz nowy plik HTML i wklej w nim szkielet strony uzupełniając konieczne fragmenty.
  4. Zacznij wpisywanie właściwej treści strony. Wyniki swojej pracy możesz na bieżąco oglądać w przeglądarce internetowej. W tym celu zapisz plik pod nazwą index.html, a następnie odszukaj go na dysku za pomocą dowolnego programu do przeglądania plików (w systemie Windows możesz użyć np. Eksploratora plików) i dwukrotnie kliknij ikonę stworzonego właśnie dokumentu. Dzięki temu Twoja strona otworzy się w przeglądarce. Za każdym razem kiedy coś na niej zmienisz, po prostu ponownie zapisz plik w edytorze, a następnie przełącz się do przeglądarki i odśwież stronę (klawisz F5), aby zobaczyć efekty.
  5. Wróć do edytora HTML. Podziel tekst na akapity, tak aby był wygodniejszy w czytaniu.
  6. Wybierz fragmenty tekstu, na które Twoim zdaniem czytelnik powinien zwrócić szczególną uwagę i umieść je w znacznikach pogrubienia.
  7. Dodaj do strony ilustracje.

    W przypadku zdjęć i grafik należy szczególnie pamiętać o poszanowaniu praw autorskich! Nie każdy obrazek można sobie swobodnie skopiować na swoją stronę, jeżeli autor nie wyraził na to zgody.

    Jeśli tworzysz stronę o sobie, może to być po prostu Twoje zdjęcie.
  8. Stwórz podstronę o nazwie linki.html (nowy plik HTML w edytorze) i umieść do niej odsyłacz na stronie głównej (czyli w pliku index.html). O tym co to są i jak się tworzy podstrony przeczytasz w podrozdziale: Ramy dokumentu.
  9. Na podstronie linki.html wstaw odsyłacze do ciekawych stron w internecie, na których czytelnik będzie mógł znaleźć więcej informacji na opisywany przez Ciebie temat. Jeżeli tworzysz stronę o sobie, możesz tutaj umieścić odnośniki do Twojego profilu w serwisach społecznościowych: Facebook, Twitter, YouTube, LinkedIn itp.
  10. Stwórz podstronę o nazwie kontakt.html (nowy plik HTML w edytorze) i umieść do niej odsyłacz na stronie głównej (czyli w pliku index.html). Wstaw na niej odsyłacz pocztowy z Twoim adresem e-mail.
Facebook