przykład 1 - tekst i nagłówki
<!DOCTYPE html> <html> <head> <title> Headings & Paragraphs </title> </head> <body> <h1>Heading - H1</h1> <p>Normal text</p> <h2>Heading - H2</h2> <p>Normal text</p> <h3>Heading - H3</h3> <p>Normal text</p> <h4>Heading - H4</h4> <p>Normal text</p> <h5>Heading - H5</h5> <p>Normal text</p> <h6>Heading - H6</h6> <p>Normal text</p> </body> </html>
Pierwszy wiersz, <!DOCTYPE html>, definiuje typ dokumentu. Zawiera on informacje dla przeglądarki o wersji języka HTML, w którym napisany jest ten kod. W zależności od typu dokumentu przeglądarka może wyświetlać go w nieco inny sposób. W tym wypadku definiowany jest typ HTML5.
Skrót HTML oznacza hypertext markup language — hipertekstowy język znaczników. Znaczniki służą do oznaczania rodzaju treści, na przykład nagłówków, elementów list lub odnośników. Kod umieszczony wewnątrz pary znaczników może zawierać inne znaczniki HTML.
tag <head>, umieszcza się w nim różne elementy, nieco mniej istotne niż sama treść dokumentu. Na przykład tytuł, informacje pomocne dla wyszukiwarek internetowych itp.
tag <title> tytuł widoczny na zakładce przeglądarki
tag<body> treść całej strony, wszystko co wyświetla się w przeglądarce jest umieszczone tutaj
tag<p> wyświetla podany tekst
tag<h1> nagłówki h1 największy h6 najmniejszy w przykładzie
przykład 2 - linki łącza
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <a href="http://www.wp.pl">Wp</a> </body> </html>
tag<a> znacznik łącza, zwany kotwicą, wymaga do działania dodatkowych atrybutów
hrief - hypertext reference, czyli odwołanie hipertekstowe, atrybut href wykorzystujemy w celu podania nazwy lub adresu URL, do którego prowadzi dane łącze
Pomiędzy tagiem <a> i tagiem zamykającym </a> widzimy tekst który będzie się wyświetlał jako link łącza (tutaj "Wp")
przykład 3 - linki obrazków
<!DOCTYPE html> <html> <head> <title>Pictures</title> </head> <body> <img src="http://i.pinger.pl/pgr66/fd63cd870029cb9f4af49d93" /> <img src="http://i2.pinger.pl/pgr141/15a7b00600251c8c4a1abb86/gumowa-kaczka-bob__vb__t0503025.jpg" /> </body> </html>
tag<img> pozwala wyświetlić nam pliki graficzne, ma atrybut src który zawiera adres URL obrazu. img podobnie jak<hr> i <br> nie ma znacznika zamykającego.
Aby wskazać plik o nazwie image.gif znajdujący się w tym samym katalogu co dokument HTML, możesz użyć poniższego znacznika:
<img src="image.gif">
Jeżeli plik obrazu znajduje się w katalogu nadrzędnym, wówczas można użyć znacznika w poniższej postaci.
<img src="../image.gif">
Zastosowanie mają dokładnie te same reguły co dla adresów URL w atrybucie href znacznika <a>.
przykład 4 link obrazu i łącza jako jedno
<!DOCTYPE html> <html> <head> <title>Links and pictures</title> </head> <body> <a href="http://onet.pl"><img src="http://i.pinger.pl/pgr66/fd63cd870029cb9f4af49d93" /></a> </body> </html>
Połączenie przykładu 2 i 3. W linku łącza w miejscu wyświetlanego tekstu wstawiamy...obrazek
przykład 5 listy
<!DOCTYPE html> <html> <head> <title>O mnie</title> </head> <body> <h2>Moja praca</h2> <ol> <li>Dydaktyka</li> <li>Nauka</li> <li>Organizacja</li> </ol> <h3>Moje zainteresowania</h3> <ul> <li>Turystyka</li> <li>Komputery</li> <li>Samochody</li> </ul> <h2>A teraz wszystko razem - listy mieszane</h2> <ol> <li>Moja praca</li> <ul> <li>Dydaktyka</li> <li>Nauka</li> </ul> <li>Popularne prace <ul> <li>Kierowanie pojazdami</li> <li>Handel</li> </ul> </li> </ol> <ul> <li>Ulubione kolory</li> <ol> <li>czerwony</li> <li>zielony</li> <li>niebieski</li> </ol> <li>Inne kolory</li> <ol> <li>czarny</li> <li>szary</li> <li>granatowy</li> </ol> </ul> </body> </html>
tag<ol> lista numerowana, poszczególne elementy listy za pomocą znacznika <li>
tag<ul> lista wypunktowana, elementy za pomocą <li>
przykład 6 style
<!DOCTYPE html> <html> <head> <title>Fonts</title> </head> <body> <!--font-size--> <p></p> <p></p> <p>------------------ font-size -------------------</p> <p></p> <p style="font-size: 10px"> Some text for you to make tiny! </p> <p style="font-size: 20px"> Some text for you to make normal size!</p> <p style="font-size: 40px"> Some text for you to make super big!</p> <!--color--> <p></p> <p></p> <p>------------------ font-size and color ------------------------------------------------------------------------------------------------------------------------------------ ++++++++++++++++++</p> <p></p> <h1 style="color: green; font-size: 16px">Big Heading</h1> <p style="color: violet">A giant bear and a little duck were friends.</p> <p style="color: red; font-size: 10px">But the bear got hungry and ate the duck.</p> <p></p> <p></p> <a href="http://www.w3.org/TR/css3-color/#svg-color">Link do strony z kolorami!!!</a> <!--font-family--> <p></p> <p></p> <p>------------------ font-family -----------------------------------------</p> <p></p> <h1 style="font-family: Arial">A co teraz?????</h1> <ol> <li style="font-family: Arial; font-size: 16px">This item is big Arial.</li> <li style="font-family: Verdana; font-size: 16px">This item is medium Verdana.</li> <li style="font-family: Impact; font-size: 16px">This item is small Impact.</li> </ol> <p></p> <p></p> <a href="http://www.w3.org/TR/CSS21/fonts.html#generic-font-families">A tutaj jest link do strony z fontami!!!</a> <p></p> <p></p> <p>------------------ text-align ------------------------------------------</p> <p></p> <h3 style="text-align: center">Favorite Football Teams</h3> <ol> <li style="text-align: left">The Hawthorn Football Club</li> <li style="text-align: center">San Franscisco 49ers</li> <li style="text-align: right">Barcelona FC</li> </ol> <p></p> <p></p> <p></p> <p></p> <p>------------------ strong ----------------------------------------------</p> <p></p> <p>Do you hear <strong>the people sing</strong>?</p> <p>No I don't. I'm <strong>too</strong> busy eating cake.</p> <p></p> <p></p> <p></p> <p></p> <p>------------------ em --------------------------------------------------</p> <p></p> <p>Hey, don't say <em>that</em>!</p> <p>I am <em>so</em> tired.</p> </body> </html> </body> </html>
style:
style="font-size: 10px" - rozmiar fontów
style="color: green; font-size: 16px" - kolor i rozmiar fontów
style="font-family: Arial; font-size: 16px" - rodzaj fontów i ich rozmiar
style="text-align: left" - centrowanie tekstu
<p>Do you hear <strong>the people sing</strong>?</p> pogrubianie tekstu
<p>Hey, don't say <em>that</em>!</p> kursywa
<!DOCTYPE html> <html> <head> <title>Background-color!</title> </head> <body style="background-color: brown"> <h3>Favorite Football Teams</h3> <ol style="background-color: yellow"> <li style="background-color: blue">The Hawthorn Football Club</li> <li>San Franscisco 49ers</li> <li>Barcelona FC</li> </ol> </body> </html>
Jak widać ustawiony kolor dotyczy miejsca gdzie wstawiany, body to tło, lista żółty, podpunkt listy, niebieski.
przykład 8 - tabele
<!DOCTYPE html> <html> <head> <title>Table Time</title> </head> <body> <table border="1px"> <tr> <th>Jeden</th><th>Dwa</th><th>Trzy</th> </tr> <tr> <td>Jeden</td><td>Dwa Trzy</td><td></td> </tr> <tr> <td>Jeden</td><td>Dwa</td><td>Trzy</td> </tr> </table> </body> </html>
wynik:
| Jeden | Dwa | Trzy |
|---|---|---|
| Jeden | Dwa Trzy | |
| Jeden | Dwa | Trzy |
Wewnątrz elementu <table> ... </table> definiujesz rzeczywistą zawartość tabeli. Tbele są tworzone wiersz po wierszu, a każdy z nich zawiera wszystkie komórki dla danego wiersza. Dlatego też budowę tabeli zaczynasz od pierwszego (najwyższego) wiersza oraz jego kolejnych komórek, od lewej do prawej strony. Następnie definiujesz drugi wiersz i jego komórki itd. Liczba kolumn jest obliczana na podstawie liczby komórek znajdujących się w poszczególnych wierszach.
W przykładzie określona grubość ramek tabeli.
tag<tr> wiersz
tag<th> nagłówek wiersza- wyświetlany jako pogrubiony, rozciągniecie na 2 kolumny colspan="2"
tag<td> komórki danych czyli kolejne kolumny w wierszu
przykład 9 - tabele w stylach
<!DOCTYPE html> <html> <head> <title>Table Time</title> </head> <body> <table style="border-collapse:collapse;"> <!--border-collapse: separate|collapse|initial|inherit;--> <thead> <tr style="color:red"> <th colspan="2">Przyklad pieknej tabeli</th> </tr> <tr style="border-bottom:1px solid black;"> <th style="padding:5px;"><em>naglowek 1</em></th> <th style="padding:5px;border-left:1px solid black;"><em>naglowek 2</em></th> </tr> </thead> <tbody> <tr> <td style="padding:5px;">pierwszy</td> <td style="padding:5px;border-left:1px solid black;">i opisik </td> </tr> <tr> <td style="padding:5px;">drugi</td> <td style="padding:5px;border-left:1px solid black;">kolejny opisik</td> </tr> <tr> <td style="padding:5px;">trzeci</td> <td style="padding:5px;border-left:1px solid black;">tu tez opis</td> </tr> </tbody> </table> </body> </html>
wynik:
| Przyklad pieknej tabeli | |
|---|---|
| naglowek 1 | naglowek 2 |
| pierwszy | i opisik |
| drugi | kolejny opisik |
| trzeci | tu tez opis |
Tą piękną tabelą kończymy wpis o podstawach HTML.