Tworzenie stron internetowych w języku HTML
Strona w języku HTML Język HTML jest najpopularniejszym językiem do tworzenia stron www. Dokument HTML ma postać pliku tekstowego, gdzie tekst przeplatany jest komendami ujętymi w nawiasy ostre < > Rozpoczęcie komendy <komenda> Zakończenie komendy </komenda> Plik HTML interpretowany jest przez dowolną przeglądarkę internetową, która prezentuje dokument w jego ostatecznym kształcie.
Strona w języku HTML Nagłówek Ciało strony Podstawowa struktura strony <head> <title> Tytuł tworzonej przez nas strony </title> </head> <body> Treść jaką chcemy zamieścić na naszej stronie np. Witaj na mojej stronie </body> </html> Nagłówek Ciało strony
Strona w języku HTML Wyjaśnienie struktury strony <html> - informuje przeglądarkę, iż od tego momentu oglądany dokument jest zapisany w języku HTML, otwarcie dokumentu HTML <head> - otwarcie części nagłówkowej strony <title> - umożliwia nadanie tytułu przeglądanej stronie; tytuł jest wyświetlany w górnej części okna, tj. w pasku tytułowym. </title> - informuje przeglądarkę o tym, iż skończyliśmy podawać tytuł. </head> - zamknięcie części nagłówkowej <body> - sekcja w której zawarta jest główna część dokumentu „ciało strony”. Witaj na mojej stronie - składa się na nią w tym przypadku tylko ta linijka tekstu. </body> - zamknięcie sekcji body. </html> - zamknięcie całego dokumentu HTML.
Strona w języku HTML Formatowanie tekstu <br> - nowy wiersz, ta komenda działa jak Enter <b> tekst </b> - zmienia czcionkę na pogrubioną <i> tekst </i> - zmienia czcionkę na pochyloną (kursywa) <u> tekst </u> - zmienia czcionkę na podkreśloną <s> tekst </s> - przekreśla dany tekst <sub> tekst </sub> - włączenie indeksu dolnego <sup> tekst </sup> - włączenie indeksu górnego
Strona w języku HTML Formatowanie tekstu <font face=Arial CE”> ustawienie rodzaju czcionki </font> <font size=”7”> - ustawienie rozmiaru czcionki na 7 </font> Język HTML oferuje tylko 7 stopni wielkości znaku, czyli od 1 do 7 <p align=”left”> tekst </p> - wyrównanie teksu do lewej strony <p align=”right”> tekst </p> - wyrównanie teksu do prawej strony <p align=”center”> tekst </p> - wyśrodkowanie tekstu <p align=”justify”> tekst </p> - wyjustowanie tekstu <body background=”tlo.jpg”> - ustawienie rysunku jako tło strony
Strona w języku HTML Kolory czcionki Do zmiany koloru czcionki służy komenda <font color =”ang. nazwa koloru, lub kod koloru”> tekst </font> PRZYKŁADOWA NAZWA KOD KOLORU ”SILVER” ”#C0C0C” ”GRAY” ”#808080” ”RED” ”#800000” ”PURPLE ”#800080” ”PINK” ”#FF00FF” ”GREEN” ”#008000” ”LIME” ”#00FF00” ”YELLOW” ”#FFFF00” ”NAVY” ”#000080” ”BLUE” ”#0000FF” ”AQUA” ”#00FFFF”
Strona w języku HTML Rysunki na stronie Do umieszczenia rysunku w tekście strony HTML używa się komendy <img> Komenda <img> posiada wiele atrybutów, trzy najczęściej używane to: src – atrybut, określający położenie pliku zawierającego wyświetlany rysunek width – określa szerokość rysunku height – określa długość rysunku Aby umieścić rysunek na stronie internetowej należy użyć komendy: <img src=”nazwa rysunku.jego rozszerzenie np. jpg”>
Strona w języku HTML Lista wypunktowana Kot Pies Tygrys Lew <ul> <li> Kot </li> <li> Pies </li> <li> Tygrys <li> <li> Kolejne pozycje na liście <li> </ul> Tworzenie listy wypunktowanej polega na objęciu wszystkich pozycji listy parą znaczników <ul> <li> pozycja listy </li>
Strona w języku HTML Lista numerowana <ol> <li> banany </li> <li> wiśnie</li> <li> śliwki <li> <li> Kolejne pozycje na liście <li> </ol> banany wiśnie śliwki Tworzenie listy numerowanej polega na objęciu wszystkich pozycji listy parą znaczników <ol> <li> pozycja listy </li>
Strona w języku HTML Tabele Typowa tabela ma następującą budowę: <table> <tr> <td> komórka </td> </tr> </table>
Strona w języku HTML Tabele Użyte w powyższym kodzie znaki oznaczają kolejno: <table> - definiuje tabelę <tr> - definiuje rząd tabeli <td> - definiuje komórkę w wierszu tabeli
Strona w języku HTML Odnośniki Odnośniki do innych stron <a href =”adres strony” target=”top”> Tekst </a> wyżej wymieniona strona załaduje się w tym samym Oknie, ponieważ w składni jest predefiniowana nazwa okna „top” <a href =”adres strony” target=”blank”> tutaj strona załaduje się w nowym oknie, ponieważ w składni jest predefiniowana nazwa okna „blank”
Strona w języku HTML Odnośniki Odnośniki do pliku skompresowanego Aby utworzyć link do jakiegoś pliku np. RAR należy użyć: <a href=”http://www.adres.pl/plik.exe”> Klikniecie na tego typu link powoduje „ściągniecie” pliku na dysk lokalny Odnośniki do adresu e-mail <a href=mailto:adres_email@adres.pl>Napisz do mnie </a> Na naszej stronie zobaczymy tekst Napisz do mnie. Kliknięcie w niego spowoduje uruchomienie programu pocztowego, a w pole adresata zostanie wpisany ww. adres e-mail.
KONIEC