HTML (ang. HyperText Markup Language) hipertekstowy język
advertisement
Laboratorium Informatyki HTML (ang. HyperText Markup Language) hipertekstowy język znaczników Ćwiczenie 1. 1. Wprowadzenie HTML pozwala opisać sposób prezentacji treści w dokumencie hipertekstowym – stronie internetowej. Dostarcza narzędzi formatujących tekst, grafikę, multimedia, elementy baz danych. Funkcjonalność języka znaczników HTML jest poszerzana przez języki i technologie z nim współpracujące, jak kaskadowe arkusze styli CSS, języki Java scripts czy PHP. W ramach ćwiczeń laboratoryjnych realizowany w ramach przedmiotu Informatyka na kierunku Elektrotechnika studenci zapoznają się z podstawami języka HTML i arkuszy styli CSS. Podstawą do zaliczenia ćwiczeń jest opracowanie dwóch projektów stron internetowych: a. Projekt z wykorzystaniem znaczników HTML spełniającą warunki: struktura oparta o układ ramkowy (minimum 3 ramki), menu sterujące treścią wyświetlaną w ramce głównej, podstrony zawierające formatowanie tekstu, tabel, osadzanie grafiki, oraz linki wewnętrzne i zewnętrzne b. Modyfikacja utworzonej strony WWW poprzez formatowanie dokumentów HTML za pomocą kaskadowych arkuszy styli 2. Narzędzia wspomagające tworzenie dokumentów HTML Dokument html jest zwykłym plikiem tekstowym i może być tworzony np. w Notatniku systemu Windows. Jednakże opracowano szereg narzędzi wspomagających tworzenie stron WWW. Można je podzielić na dwie zasadnicze grupy: a. Edytory wspierające pisanie kodu w języku znaczników HTML, poprzez kolorowanie składni, rozpoznawanie i podpowiadanie składni w czasie pisania, podgląd wyglądu tworzonego dokumentu. b. Edytory wizualnego tworzenia stron WWW, bez konieczności pisania, a nawet znajomości języka HTML. Edytory takie określane są mianem WYSWYG (what you see is what you get). Z oczywistych względów do zajęć z przedmiotu informatyka wskazane jest korzystanie z programów z pierwszej grupy. Do zajęć wybrany został polski program kED. 1 3. Struktura dokumentu HTML Każdy dokument tworzony za pomocą znaczników HTML, którego treść zamknięta jest pomiędzy znacznikami <HTML></HTML>, można podzielić na dwie części: a. Nagłówkową – ograniczoną znacznikami <HEAD></HEAD> b. Treści – ograniczoną znacznikami <BODY></BODY> W pierwszej części umieszczane są informacje o systemie kodowania znaków w dokumencie oraz informacje o zawartości strony, wykorzystywane przez wyszukiwarki internetowe. W drugiej części umieszcza się właściwą treść która następnie jest wyświetlana w oknie przeglądarki. W celu uzyskania właściwej formy wizualnej tworzonego dokumentu, treść formatuje się za pomocą znaczników HTML. Większość edytorów wspierających automatycznie szablon dokumentu WWW. <html> <head> <meta <meta <meta <meta <meta tworzenie dokumentów HTML tworzy http-equiv="Content-type" content="text/html; charset=iso-8859-2"> name="Description" content=" [wstaw tu opis strony] "> name="Keywords" content=" [wstaw tu slowa kluczowe] "> name="Author" content=" [dane autora] "> name="Generator" content="kED2"> <title> [tytuł strony] </title> <link rel="stylesheet" href=" [nazwa_arkusza_stylow.css] " type="text/css"> </head> <body> <!-- tutaj wstaw tresc strony --> </body> </html> 4. Formatowanie tekstu – wykaz znaczników W poniższej tabeli zestawiono znaczniki umożliwiające formatowanie tekstu. Lp. 1 2 3 4 5 6 7 8 9 10 Znacznik <B>tekst</B> <I>tekst</I> <BIG>tekst</BIG> <SMALL>tekst</SMALL> <SUP>tekst</SUP> <SUB>tekst</SUB> <TT>tekst</TT> <STRIKE>tekst</STRIKE> <U>tekst</U> <EM>tekst</EM> Opis Pogrubienie czcionki Kursywa Powiększenie czcionki Pomniejszenie czcionki Indeks dolny Indeks górny Czcionka o stałej szerokości Czcionka przekreślona Czcionka podkreślona Czcionka wyróżniona 2 11 12 13 14 15 16 17 18 19 20 21 <STRONG>tekst</STRONG> <DEF>tekst</DEF> <CODE>tekst</CODE> <SAMP>tekst</SAMP> <VAR>tekst</VAR> <ABBR>tekst</ABBR> <FONT>tekst</FONT> size=”xx” color=”xxxxx” face=”xxxxxx” <Hx>tekst</Hx> <BR> <HR> noshade size=”xx” width=”xx” align=”xx” <UL>Elementy</UL> type=”xxxx” compact 22 <OL>Elementy</OL> type=”xxxx” compact 23 24 25 26 27 28 29 30 <LI>tekst</LI> type=”xxxx” compact value=”xx” <DL>Elementy</DL> <DT>tekst</DT> <DD>tekst</DD> <FIELDSET>tekst</FIELDSET> <LEGEND>tekst</LEGEND> <CENTER>tekst</CENTER> <P></P> lub <DIV></DIV> align=”xxxx” style=”xxx; xxx; xxx” font-size:xxpx; font-family:times; color:black; Czcionka mocno wyróżniona Definicja Fragment kodu programistycznego Wynik działania programu, przykład Zmienne i argumenty Skrót Definicja czcionki Rozmiar (od 1 do 7) lub względnie (+1, -3) Kolor nazwa (red, Green) lub kod RGB (#12ff3a) Rodzaj czcionki (Arial, Times Courier New) Definicja nagłówka (x od 1 do 7) Przejście do nowego wiersza Pozioma linia rozdzielające Bez cienia Rozmiar grubości linii w pikselach Szerokość linii w pikselach lub procentowo Wyrównanie (left, right, center) dla <100% Lista nienumerowana Typ znacznika (disk, circle, square) Większy stopień upakowania elementów listy Lista numerowana Typ numeracji (1,A,a,i,I) Większy stopień upakowania elementów listy Elementy Typ listy zgodny z UL lub OL Większy stopień upakowania elementów listy Wartość początkowa listy (9,C,h,ii,III) Lista bez wyróżnienia, definicji bloku Definicja typu Definicja elementów Definiuje zamknięty ramką blok tekstowy Definiuje nazwę bloku tekstowego Centruje tekst Definicja paragrafu lub bloku Wyrównanie tekstu w bloku (left, right, center, justify) Definicji styli (właściwości oddzielone „;”) Rozmiar czcionki w pikselach (px) Rodzaj czcionki Kolor czcionki 5. Zadanie W oparciu o przykładowy dokumenty CV i list motywacyjny (dostępne na stronie lanczont.pollub.pl) przygotować własne, utworzone i sformatowane za pomocą języka HTML. 3
