używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów

Wielkość: px

Rozpocząć pokaz od strony:

Download "używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów"

Patrycja Wierzbicka
7 lat temu
Przeglądów:

1 opracowanie I. K.

2 używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów ISO norma międzynarodowa określająca sposób kodowania polskich znaków Unicode - inny system kodowania znaków w dokumentach Pajęczyny

3 Przykłady adresów dokumentów w sieci:

4 Co to jest HTML? Język do tworzenia dokumentów, które po umieszczeniu na serwerze WWW będą dostępne dla użytkowników Internetu na całym świecie jako strony (witryny) WWW Standardy poszczególnych wersji HTML są negocjowane i publikowane pod auspicjami konsorcjum W3C (World Wide Web Consortium) -

5 Jak zapisywane są szczegóły m.in. wyglądu strony? Przy pomocy rozkazów zwanych tagami a umieszczanych w nawiasach kątowych < >. Jeśli dotyczą fragmentu tekstu to występują w postaci pary obejmującej ten tekst, np.: <B> ten tekst będzie widać jako wytłuszczony </B>

6 Jakie najprostsze narzędzia wystarczą nam na początek? NOTATNIK lub inny prosty edytor czystego tekstu dowolna przeglądarka Internetu np.: Internet Explorer

7 Cały dokument objęty jest tagami: <HTML>... </HTML > i zawiera: 1) głowę dokumentu między tagami <HEAD>... </HEAD> 2) ciało dokumentu między tagami <BODY> </BODY>

8 szablon dokumentu z polskimi literami w standardzie Ms Windows <HTML> <HEAD> <meta http-equiv="content-type content="text/html; charset=windows-1250"> <TITLE> Tytuł, który pojawi się w pasku u góry </TITLE> </HEAD> </HTML> <BODY> treść dokumentu </BODY>

9 W nagłówku można umieścić etykiety definiujące metainformacje (data końca, autor, słowa kluczowe, sposób kodowania znaków diakrytycznych). Przykłady wartości znaczników w nagłówkach: <meta name="description" Content="To jest krótki opis"> <meta name="keywords" Content="studia, program"> <meta name="author" Content="Alina Rogalik"> <meta name="create" Content ="Sat 15 Mar :26:58 "> <link rev="made" href="mailto:arogal@wsm.gdynia.pl">

10 BODY jest przykładem etykiety, którą można rozszerzyć o atrybuty: <BODY BGCOLOR="black"> <P> tu dokument pisany czarno na czarnym </P> </BODY> Atrybuty te są przykładem elementów które straciły aprobatę, standard w3c poleca do zmian kolorów używanie arkuszy stylów.

11 Akapit tekstu (odsunięty od innych akapitów): <P> tekst </P> Zmiana linii wewnątrz akapitu: tekst <BR> nowa linia tekstu Wycentrowanie tekstu: <CENTER> tekst </CENTER>

12 Formatowanie cech czcionki tekstu <B> ten tekst będzie wytłuszczony </B> <I> ten tekst będzie pochylony </I> <U> ten tekst będzie podkreślony </U>

13 Lista wypunktowana: <UL> <LI> temat 1 <LI> temat 2 <LI>.... </UL> Lista numerowana: <OL> <LI> punkt 1 <LI> punkt 2 <LI>.... </OL>

14 Formatowanie tytułów <H1> Tytuł główny (największy) </H1> <H2> Tytuł drugiego poziomu </H2> <H3> Tytuł trzeciego poziomu </H3> <H4> Tytuł czwartego poziomu </H4>

15 Znaczniki samodzielne: <BR> - znak nowego wiersza, <HR> - pozioma linia Wyższa Szkoła Morska <br> Morska 83<br> Gdynia<br> <hr> Wyższa Szkoła Morska Morska 83 Gdynia

16 Odsyłacze (tzw. LINKI) do innych dokumentów Odsyłacz do dokumentu istniejącego w tym samym folderze: <A HREF= nazwa_pliku > Tekst odsyłacza </A> na przykład: <A HREF= zadania.htm > Zadania z fizyki</a>

17 Odsyłacze dokumentów na innych komputerach (serwerach): <A HREF= > tekst </A> Na przykład: Odsyłacz do dokumentu dydak.htm na serwerze adam: <A HREF= > Nauczanie </A>

18 Wstawianie obrazków: <img src= nazwa_pliku_z_obrazkiem"> IMG jest skrótem od Image (obraz), SRC jest skrótem od Source (żródło). Na przykład: <img src= kwiatek.gif"> <img src= ja.jpg width= 50 alt= to ja >

19 Tabele Definicja tabeli zawarta jest między znacznikami: <TABLE border = n >... </TABLE> gdzie n - szerokość linii siatki opis wiersza (ang. row ): <TR>... </TR> opis komórki danych w wierszu: <TD>... </TD>

20 Przykład tabeli mającej 1 wiersz i 2 kolumny:

21 <DL> <DT> marchew </DT><DD> rodzaj z rodziny baldaszkowatych o cylindrycznym, owalnym lub wrzecionowatym korzeniu </DD> <DT> seler </DT><DD> dwuletnia roślina z rodziny baldaszkowatych (Umbelliferae) </DD> </DL> marchew seler Tworzenie list rodzaj z rodziny baldaszkowatych o cylindrycznym, owalnym lub wrzecionowatym korzeniu dwuletnia roślina z rodziny baldaszkowatych (Umbelliferae)

22 <CENTER>, <LEFT>, <RIGHT> - nie zalecane, ale bardzo wygodne Zalecane jest stosowanie arkuszy stylów lub <DIV> - wydzielony blok o danych formacie, np.: <DIV ALIGN= JUSTIFY > tu długie akapity </DIV> lub <P ALIGN= CENTER > tu tekst wyśrodkowany </P> lub <SPAN STYLE= font-weight:bold; color=red; textalign:left > tu tekst tak właśnie sformatowany </SPAN>

23 Arkusze stylów specyfikacja CSS - kaskadowego arkusza stylów - arkusza będącego zbiorem informacji o stylach zastosowanych w tekście (wyrównaniu, własnościach marginesów, atrybutach czcionki takich jak rozmiar, wyróżnienia, kolor, itp.) Do całego zestawu stron html tworzy się jeden arkusz stylów. W samych stronach html umieszcza się informacje o użytych stylach a nie sposobach formatowania.

24 Przykład zawartości CSS body {font:12 pt Arial; color:red; margin-left:0,5in} h1{font:18 pt Arial; color:ab436d} h2:czerwony{color:red} h3:zolty{color:yellow} #wlasny{text-decoration:blink}

25 Dołączanie stylów informacje o stylach można umieścić w pliku tekstowych o rozszerzeniu (np. style.css) w nagłówku dokumentu html umieszcza się wówczas wskazanie nazwy pliku z definicjami: <HEAD> <TITLE>... </TITLE> <LINK REL=STYLESHEET HREF= style.css > </HEAD>

26 Osadzone informacje o stylach Drugim sposobem na podanie definicji stylów jest umieszczenie jej w samym dokumencie html: <STYLE TYPE= text/css >  </STYLE>

27 Wbudowane informacje o stylach Trzecim sposobem na podanie informacji o stylach jest umieszczenie ich w dokumencie html w miejscach, gdzie są używane, na przykład: <P STYLE = color:yellow> tu paragraf pisany na żółto </P> <P> tu normalnie wyglądający paragraf </P> <SPAN STYLE = font-weight:bold > </SPAN> <P> tralala </P> <TABLE>... </TABLE> <P> tralala </P>

28 Do sprawdzania poprawności dokumentów służą walidatory. W sieci można ich znaleźć dużo (czy to jako programy do pobrania i zainstalowania na lokalnym komputerze czy to jako narzędzia udostępnione na stronach www, na przykład na stronach w3c).

Podobne dokumenty

HTML (HyperText Markup Language)

HTML (HyperText Markup Language) Struktura dokumentu tytuł strony sekcja nagłówka Tutaj wpisujemy