Wstp 1 Jzyk HTML Jest jzykiem znacznikw tagw

Wstęp 1

Język HTML Jest językiem znaczników (tagów) służącym do opisu strony. Tag jest to ciąg znaków objętych nawiasami ostrymi <. . . >, przy czym wyróżnia się tag otwierający <. . . > i tag zamykający </. . . > Strona WWW jest to dokument hipertekstowy HTML będący plikiem tekstowym, najczęściej z rozszerzeniem. htm lub. html - Plik taki zawiera znaczniki języka HTML oraz właściwy tekst strony - Dokument HTML może być tworzony i edytowany za pomocą zwykłych edytorów tekstowych lub przy użyciu edytorów specjalizowanych. 2

Notepad++ Rozbudowany edytor tekstu (i zamiennik systemowego Notatnika) rozpowszechniany na licencji GNU GPL. Interfejs programu jest dostępny w wielu językach – także po polsku. Podświetla składnię w: C, C++, Java, C#, XML, HTML, PHP, Java. Script, makefile, ASCII-Art, doxygen, ASP, VB/VBScript, skrypty powłoki systemów uniksowych, BAT, SQL, Objective-C, CSS, Pascal, Perl, Python, Lua, Tcl, asembler, Ruby, Lisp, Scheme, Diff, Smalltalk, Post. Script i VHDL. http: //notepad-plus. org/ 3

Notepad 2 Otwarty edytor tekstu dla systemu Microsoft Windows, udostępniony na licencji BSD. Pierwsze wydanie programu pochodzi z kwietnia 2004 roku. Program wspiera kolorowanie składni dla języków: ASP, asembler, C, C++, CGI, CSS, HTML, Java. Script, NSIS, Pascal, Perl, PHP, Python, SQL, Visual Basic, VBScript, XHTML i XML. Strona polskiej wersji programu: http: //knapsu. eu/notepad 2_pl/ 4

Ager Web Edytor jest darmowym edytorem html, xhtml, html 5, PHP, My. SQL, Java. Script służącym do tworzenia stron internetowych. Aby używać ten edytor potrzebna jest przynajmniej słaba znajomość HTML. http: //agerwebedytor. com/ 5

Dokumenty WWW Struktura dokumentu HTML: <prolog> <html> <head> Informacje nagłówkowe </head> <body> Treść dokumentu </body> </html> Prolog określa rodzaj i wersję języka użytego do budowy strony. 6

W części nagłówkowej mogą być zamieszczone m. in. Następujące informacje: - Tytuł strony (w znacznikach <title> i </title>) - Dodatkowe informacje o dokumencie (oznaczone tagiem <meta>) Np. (z kodowaniem polskich znaków): <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="pl"> <title>Strona z formularzem</title> </head> <body bgcolor="#FFFF 00"> 7

Wybrane atrybuty znacznika <body> bgcolor – określa kolor tła dokumentu. Kolor może być podany jako poprzez nazwę np. ”yellow” lub poprzez podanie składowych RGB np. ”#FFFF 00”: <body bgcolor=”kolor”> text – określa kolor tekstu w dokumencie: <body text=”kolor”> background – określa obrazek wyświetlany jako tło dokumentu: <body background=”URL lub ścieżka/plik. gff”> link, vlink, alink – określenie kolorów odsyłaczy (linków): <body link=”kolor 1” vlink=”kolor 2” alink=”kolor 3”> 8

Komentarze <!-- Komentarz może być w kilku wierszach --> Komentarze są przesyłane z serwera do przeglądarki! Wykaz kolorów: http: //www. kurshtml. edu. pl/html/wykaz_kolorow, kolory. html#wyka z_kolorow 9

Kolory podstawowe: Nazwa black silver gray white maroon red purple fuchsia green lime olive yellow navy blue teal aqua HEX #000000 #C 0 C 0 C 0 #808080 #FFFFFF #800000 #FF 0000 #800080 #FF 00 FF #008000 #00 FF 00 #808000 #FFFF 00 #000080 #0000 FF #008080 #00 FFFF Kolor 10

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

Tekst: pogrubiony <b>Treść tekstu</b> pochylony <i>Tu wpisz tekst</i> podkreślony <u>Tu wpisz tekst</u> Łączenie parametrów: <p align="center"><font size="5" color="red" face="Courier New"><b><i><u>Jakiś tekst </u> </i> </b></font></p> 12

Tekst: Kolor tła oraz tekstu: <body bgcolor="kolor tła" text="kolor tekstu"> Treść strony </body> Wstawienie obrazka: <img src=„Ścieżka dostępu do obrazka" alt=„Tekst alternatywny" /> Odsyłacz do podstrony: <a href="ścieżka dostępu do podstrony">Opis</a> 13