docbudowa strony www w html
download 
Reklamacja Transkrypt
budowa strony www w html
opracowanie I. K. używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów ISO-8859-2 - norma międzynarodowa określająca sposób kodowania polskich znaków Unicode - inny system kodowania znaków w dokumentach Pajęczyny Przykłady adresów dokumentów w sieci: http://www.wsm.gdynia.pl http:/www.wsm.gdynia.pl/usk/man/przewodnik.html http://zatoka.wsm.gdynia/~ola 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) http://www.w3c.org. 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> Jakie najprostsze narzędzia wystarczą nam na początek? NOTATNIK lub inny prosty edytor „czystego” tekstu dowolna przeglądarka Internetu np.: Internet Explorer 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> 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> <BODY> treść dokumentu .............. </BODY> </HTML> 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 1997 19:26:58 "> <link rev="Made" href="mailto:[email protected]"> 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. 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> 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> Lista wypunktowana: <UL> <LI> temat 1 <LI> temat 2 <LI> . . . . </UL> Lista numerowana: <OL> <LI> punkt 1 <LI> punkt 2 <LI> . . . . </OL> 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> Znaczniki samodzielne: <BR> - znak nowego wiersza, Wyższa Szkoła Morska <br> Morska 83<br> Gdynia<br> <hr> Wyższa Szkoła Morska Morska 83 Gdynia <HR> - pozioma linia 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> Odsyłacze dokumentów na innych komputerach (serwerach): <A HREF=”http://nazwa_komputera/dokument”> tekst </A> Na przykład: Odsyłacz do dokumentu dydak.htm na serwerze adam: <A HREF=”http://adam.imir.agh.edu.pl/dydak.htm”> Nauczanie </A> 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”> 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> Przykład tabeli mającej 1 wiersz i 2 kolumny: Tworzenie list <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 rodzaj z rodziny baldaszkowatych o cylindrycznym, owalnym lub wrzecionowatym korzeniu seler dwuletnia roślina z rodziny baldaszkowatych (Umbelliferae) <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> 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. 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} 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> Osadzone informacje o stylach Drugim sposobem na podanie definicji stylów jest umieszczenie jej w samym dokumencie html: <STYLE TYPE=„text/css”> <!-body {font:12 pt Arial; color:red; margin-left:0,5in} h1 {font:18 pt Arial; color:AB436D} --> </STYLE> 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”> <P> tralala </P> <TABLE> ... </TABLE> <P> tralala </P> </SPAN> 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).
![(Microsoft PowerPoint - XHTML_5_style.ppt [tryb zgodno\234ci])](http://s2.doczz.pl/store/data/002956443_1-e49f44061de070fd4dcf1f04a595a655-70x70.png "(Microsoft PowerPoint - XHTML_5_style.ppt [tryb zgodno\234ci])")
