Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Język HTML.

Podobne prezentacje


Prezentacja na temat: "Język HTML."— Zapis prezentacji:

1 Język HTML

2 Internet, WWW, HTML Internet to globalna, ogólnoświatowa sieć komputerowa oparta na protokole adresowym IP i protokole transportowym TCP. Jego początki sięgają 29 października kiedy połączenie pomiędzy Szkołą Inżynierii i Nauk Stosowanych Uniwersytetu Kalifornijskiego w Los Angeles (UCL) I Instytutem Badawczym uniwersytetu Stanford w Menlo Park (SRI International) dała początek sieci ARPANET, pracującej jeszcze w protokole X.25, która to sieć stopniowo połączyła uczelnie i instytuty badawczego zachodniego wybrzeża Stanów Zjednoczonych. W 1983 r. sieć ta zaczęła działać w protokole TCP/IP opracowanym przez agencję obronną DARPA i wykorzystywanym do tej pory testowo tzn. sieci DARPANET.

3 Internet, WWW, HTML Prawdziwie przełomowym dla funkcjonowania sieci stał się koniec lat osiemdziesiątych i początek dziewięćdziesiątych poprzedniego wieku, gdyż w tym czasie w Centrum badawczym energetyki jądrowej w Bernie (CERN) opracowano język znaczników HTML, który dość szybko został wykorzystany w pierwszej przeglądarce sieci word-wide-web, której udało się uzyskać dużą popularność, jaką była przeglądarka Mosaic. Równocześnie mniej więcej w tym samym czasie do sieci ARPANET zaczęły być podłączane inne funkcjonujące wtedy sieci rozległe takie jakie EARNET, USETNET czy BITNET a całość zyskała obecną nazwę Internetu. Od tego czasu sieć zaczęła bardzo się gwałtownie rozwijać szybko stając się globalnym medium komunikacyjnym.

4 Internet, WWW, HTML Wszystkie komputery w sieci Internet posiadają unikalny adres zwany adresem IP, składający się z czterech liczb z przedziału rozdzielonych kropkami (np ). Przydziałem adresów zajmuje się Internet Corporation for Assigned Names and Number ICANN – instytucja powołana przez rząd Stanów Zjednoczonych. Uważny czytelnik zauważy, iż liczba wszystkich adresów tego typu wynosi 255^4 czyli około 4 miliardy, co już jest liczbą mniejszą niż liczba wszystkich komputerów obecnie istniejących na świecie. Nie jest więc możliwe aby każdy komputer posiadał swój unikalny adres IP. Z tego powodu definiuje się adresy publiczne (unikalne) oraz prywatne (mogące się powtarzać) w postaci 10.x.x.x lub x.x .

5 Internet, WWW, HTML Te ostatnie są rozpoznawalne tylko wewnątrz sieci lokalnej organizacji (lub coraz częściej nawet sieci domowej) i tłumaczone na adresy publiczne poprzez mechanizm NAT (Network Address Translation). W przyszłości problem braku adresów IP ma zostać rozwiązany przez wprowadzenie wersji szóstej tego protokołu z 128 bitowymi adresami (adresy obecnego protokołu w wersji czwartej są 32 bitowe) co odpowiada to około 3,4 *1038 różnych adresów co wystarczy na aktualne i przyszłe (o ile nie zostaną odkryte inne cywilizacje) zapotrzebowanie. Jednak wprowadzanie protokołu IPv6 zwanego też IPnG początkowo szacowane na rok ok jest z roku na rok przesuwane, a złożoność informatyczna tego przedsięwzięcia i konieczność wymiany bądź rekonfiguracji bardzo dużej części sprzętu sieciowego powoduje, iż trudno ustalić horyzont czasowy tej czynności.

6 Internet, WWW, HTML Publiczne adresy IP są tłumaczone przez protokół DNS (Domain Name System) na nazwy łatwiejsze do zapamiętania przez użytkowników (np. w postaci wgrit.ae.jgora.pl ). Do tego celu niezbędna jest sieć serwerów zarządzana przez INTERNIC (Internet Network Information Center) również instytucję rządową Stanów Zjednoczonych powiązaną z departamentem handlu. Standardy techniczne Internetu ustalane są demokratycznie przez wszystkich jego użytkowników w postaci tzn. Internet Drafts – propozycji standardów i dokumentów RFC (Request For Comments) zawierających wersje tych standardów zatwierdzone w drodze consensusu przez użytkowników sieci. Wszystkie tego typu dokumenty znajdują się na stronie IETF (Internet Engineering Task Force) instytucji zarządzającej standardami.

7 Internet, WWW, HTML Najpopularniejszymi usługami sieci Internet są www (word-wide web - "ogólnoswiatowa pajęczyna”) bazująca na protokole transportowym HTTP (Hyper-Text Transfer Protocol) i języku opisu stron HTML (Hyper-Text Mark-up Language) oraz poczta elektroniczna – oparta na protokołach SMTP (Simple Mail Transfer Protocol), POP3 (Post-Office Protocol) oraz IMAP (Internet Message Access Protocol) obecnie w wersji 4. Oprócz nich użytkownicy Internety mogą korzystać z : Protokołów transferu plików FTP,SCP; Narzędzi pracy zdalnej: telnet, SSH, terminali pracy zdalnej Grup dyskusyjnych UseNet; Sieci peer-peer typu eDonkey i bitTorrent; Komunikatorów internetowych typu SKYPE, GADU-GADU;.

8 Internet, WWW, HTML i wielu innych narzędzi i protokołów przeznaczonych do wyspecjalizowanych zastosowań. Mosaic była pierwszą powszechnie używaną przez użytkowników Internetu przeglądarką, natomiast pierwszą historycznie tego typu aplikacją była ViolaWWW, opracowana w Uniwersytecie Illinois ale nie wyszła ona nigdy poza fazę prototypu i w związku z tym jej popularność była bardzo ograniczona.

9 Osnowa dokumentu i podstawowe znaczniki
<HTML> <HEAD> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <TITLE>Tytuł Mojej Strony Internetowej</TITLE> </HEAD> <BODY> właściwa treść (ciało) dokumentu </BODY> </HTML> kodowanie w systemie Windows (niezgodne z polską normą) <meta http-equiv="content-type" content="text/html; charset=Windows-1250">

10 Czcionka pogrubiona <B> </B> Przykład: <B> To jest czcionka pogrubiona</B> To jest czcionka pogrubiona (bold)  Czcionka pochylona <I> </I> <I>To jest czcionka pochylona </I> To jest czcionka pochylona (italic)

11 Czcionka podkreślona <U> </U> Przykład: <U>To jest czcionka podkreślona <U> To jest czcionka podkreślona (underline) Czcionka o stałej szerokości znaku <TT> </TT> <TT>To jest czcionka monotypiczna, o stałej szerokości znaku</TT> To jest czcionka monotypiczna, o stałej szerokości znaku (teletype)

12 <STRIKE> </STRIKE>
Przykład: <STRIKE>Czcionka przekreślona</STRIKE> Czcionka przekreślona Superskrypt (indeks górny) <SUP> </SUP> Czcionka z <SUP>superskryptem</SUP> Czcionka z superskryptem

13 Subskrypt (indeks dolny)
<SUB> </SUB> Przykład: Czcionka z <SUB>subskryptem</SUB> Czcionka z subskryptem Duża czcionka (+1 punkt) <BIG> </BIG> Duża czcionka

14 Kolor czcionki <FONT COLOR="nazwa_koloru"> </FONT> Przykład: Fragment <FONT COLOR="RED">czerwony</FONT> Fragment czerwony Rozmiar czcionki <FONT SIZE="xx"> </FONT> Fragment <FONT SIZE="6">powiększony</FONT> Fragment powiększony Krój czcionki <FONT FACE="xx"> </FONT>

15 Kolor tła <BODY BGCOLOR="00FFCC"> Strona na własnym tle </BODY> <BODY BACKGROUND="C:\TLO.JPG">

16 Tytuły <Hx></Hx> Przykład <H1 ALIGN="CENTER"> STRONA DOMOWA PRZEDSIĘBIORSTWA </H> <H2 ALIGN= "CENTER" TITLE="wejście tylko dla Kontrahentów"> STREFA INTRANETOWA

17 Znacznik akapitu <P> </P> Przykład: <P ALIGN=LEFT> </P> W ostatnich kilku-kilkunastu miesiącach łącza internetowe zapchały się do granic wytrzymałości, atakowane przez dziesiątki milionów spragnionych kontaktu ze światem użytkowników. Największe powody do narzekań ma niewątpliwie świat nauki, który utracił nagle uprzywilejowaną pozycję, gdy "sklep za żółtymi firankami" zapełnił się nagle tłumami zgłodniałych profanów.

18 <P ALIGN=RIGHT> </P>
W ostatnich kilku-kilkunastu miesiącach łącza internetowe zapchały się do granic wytrzymałości, atakowane przez dziesiątki milionów spragnionych kontaktu ze światem użytkowników. Największe powody do narzekań ma niewątpliwie świat nauki, który utracił nagle uprzywilejowaną pozycję, gdy "sklep za żółtymi firankami" zapełnił się nagle tłumami zgłodniałych profanów. <P ALIGN=CENTER> </P>

19 <P ALIGN=JUSTIFY> </P>
W ostatnich kilku-kilkunastu miesiącach łącza internetowe zapchały się do granic wytrzymałości, atakowane przez dziesiątki milionów spragnionych kontaktu ze światem użytkowników. Największe powody do narzekań ma niewątpliwie świat nauki, który utracił nagle uprzywilejowaną pozycję, gdy "sklep za żółtymi firankami" zapełnił się nagle tłumami zgłodniałych profanów.

20 Znacznik końca wiersza  <BR> Pozioma linia <HR> Linia może być pozbawiona cieniowania <HR NOSHADE> Linii możemy nadać dowolną grubość <HR SIZE=5> Linia może mieć określoną długość w pikselach <HR WIDTH=300>  lub w procencie szerokości strony <HR WIDTH=50%> Odnośniki <A HREF="miejsce_docelowe">Tekst, na którym należy kliknąć</A> <A do autora strony</A> Mapy odnośników <IMG SRC="odsylacz.gif " USEMAP="#mapa1"> <MAP NAME ="mapa1"> <AREA SHAPE=RECT COORDS="1, 1, 50, 50" HREF="1.html"> <AREA SHAPE=RECT COORDS="51, 1, 100, 50" HREF="2.html"> <AREA SHAPE=RECT COORDS="1, 51, 51, 100" HREF="3.html"> <AREA SHAPE=RECT COORDS="51, 51, 100, 100" HREF="4.html"> </MAP> Lista nieposortowana <UL> <LI>Pierwszy punkt <LI>Drugi punkt <LI>Trzeci punkt </UL> Lista posortowana <OL TYPE=A> numerowanie według wielkich liter <OL TYPE=a> numerowanie według małych liter <OL TYPE=I> numerowanie według wielkich liczebników rzymskich <OL TYPE=i> numerowanie według małych liczebników rzymskich <OL TYPE=1> numerowanie według liczebników arabskich Grafika na stronie <IMG SRC="tucows.gif" HEIGHT=150>

21  Odnośniki <A HREF="miejsce_docelowe">Tekst, na którym należy kliknąć</A> <A do autora strony</A>    Mapy odnośników <IMG SRC="odsylacz.gif " USEMAP="#mapa1"> <MAP NAME ="mapa1"> <AREA SHAPE=RECT COORDS="1, 1, 50, 50" HREF="1.html"> <AREA SHAPE=RECT COORDS="51, 1, 100, 50" HREF="2.html"> <AREA SHAPE=RECT COORDS="1, 51, 51, 100" HREF="3.html"> <AREA SHAPE=RECT COORDS="51, 51, 100, 100" HREF="4.html"> </MAP> Lista nieposortowana <UL> <LI>Pierwszy punkt <LI>Drugi punkt <LI>Trzeci punkt </UL> Lista posortowana <OL TYPE=A> numerowanie według wielkich liter <OL TYPE=a> numerowanie według małych liter <OL TYPE=I> numerowanie według wielkich liczebników rzymskich <OL TYPE=i> numerowanie według małych liczebników rzymskich <OL TYPE=1> numerowanie według liczebników arabskich Grafika na stronie <IMG SRC="tucows.gif" HEIGHT=150>

22 Lista nieposortowana <UL> <LI>Pierwszy punkt <LI>Drugi punkt <LI>Trzeci punkt </UL> Lista posortowana <OL TYPE=A> numerowanie według wielkich liter <OL TYPE=a> numerowanie według małych liter <OL TYPE=I> numerowanie według wielkich liczebników rzymskich <OL TYPE=i> numerowanie według małych liczebników rzymskich <OL TYPE=1> numerowanie według liczebników arabskich

23 Ramki Utwórz dokument składający się z dwóch ramek, tak aby klikając na odnośniki z lewej strony wyświetlana była zawartość stron 1,2,3.html po prawej stronie Index.html <FRAMESET COLS="25%,75%"> <FRAME SRC="menu.html" NAME="menu" TARGET="Prawa" FRAMEBORDER="0" SCROLLING="NO" MARGINWIDTH="1"> <FRAME SRC="strona1.html" NAME="prawa" TARGET="_self" FRAMEBORDER="0" SCROLLING="no"> <NOFRAMES><BODY>Twoja przegladarka NIE OBSLUGUJE RAMEK</BODY></NOFRAMES> </FRAMESET>

24 Menu.html <HTML> <HEAD> <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8"> <TITLE>[ Przykładowy dokument z ramkami]</TITLE> </HEAD> <BODY Bgcolor=MAROON> <A HREF="STRONA1.HTML" TARGET="prawa"> >Temat 1</A><BR> <A HREF="STRONA2.HTML" TARGET="prawa">Temat 2</A><BR> <A HREF="STRONA3.HTML" TARGET="prawa">Temat 3</A> </BODY> </HTML>

25

26 Bloki <DIV></DIV> definiuje blok (wydzielony fragment )w dokumencie HTML <Body> <div id="przyklad1"><img src="jelenia1.jpg" width=300 height=200></div> <div id="przyklad2"><img src="jelenia2.jpg" width=300 height=200></div> <div id="przyklad3"><IMG SRC="jelenia3.jpg" width=300 height=200></div> </Body>

27 Bloki

28 Bloki <Head> </STYLE><style type="text/css"><!--#przyklad1 { position: absolute; top: 100px; left: 100px; z-index: 1; background-color: blue }//--></STYLE> <style type="text/css"><!--* {scrollbar-track-color:red;scrollbar-arrow-color:"#00FFFF"} //--></STYLE> <style type="text/css"><!--#przyklad2 { position: absolute; top: 250px; left: 300px; z-index: 2; background-color: red }//--></STYLE> <style type="text/css"><!--#przyklad3 { position: absolute; top: 150px; left: 200px; z-index: 3; background-color: yellow }//--></STYLE> </Head> <Body> <div id="przyklad1"><img src="jelenia1.jpg" width=300 height=200></div> <div id="przyklad2"><img src="jelenia2.jpg" width=300 height=200></div> <div id="przyklad3"><IMG SRC="jelenia3.jpg" width=300 height=200></div> </Body>

29 Bloki

30 Tabele <table border=0 class=dataframe> <TBODY>
<tr class= firstline > <th>  </th> <th> No. </th> <th> No. of clusters </th> <th> Normalization method </th> <th> Distance </th> <th> Classification method </th> <th>Silhouette </th> <th>Rank</th> </tr> <tr><td class=firstcolumn>1</td><td class=cellinside>1</td><td class=cellinside>3</td><td class=cellinside>N.A.</td><td class=cellinside>gdm2</td><td class=cellinside>single</td><td class=cellinside> </td><td class=cellinside>6</td></tr> <tr><td class=firstcolumn>2</td><td class=cellinside>2</td><td class=cellinside>4</td><td class=cellinside>N.A.</td><td class=cellinside>gdm2</td><td class=cellinside>single</td><td class=cellinside> </td><td class=cellinside>1</td></tr> <tr><td class=firstcolumn>3</td><td class=cellinside>3</td><td class=cellinside>3</td><td class=cellinside>N.A.</td><td class=cellinside>gdm2</td><td class=cellinside>complete</td><td class=cellinside> </td><td class=cellinside>7</td></tr> <tr><td class=firstcolumn>4</td><td class=cellinside>4</td><td class=cellinside>4</td><td class=cellinside>N.A.</td><td class=cellinside>gdm2</td><td class=cellinside>complete</td><td class=cellinside> </td><td class=cellinside>2</td></tr> <tr><td class=firstcolumn>5</td><td class=cellinside>5</td><td class=cellinside>3</td><td class=cellinside>N.A.</td><td class=cellinside>gdm2</td><td class=cellinside>average</td><td class=cellinside> </td><td class=cellinside>8</td></tr> <tr><td class=firstcolumn>6</td><td class=cellinside>6</td><td class=cellinside>4</td><td class=cellinside>N.A.</td><td class=cellinside>gdm2</td><td class=cellinside>average</td><td class=cellinside> </td><td class=cellinside>3</td></tr> <tr><td class=firstcolumn>7</td><td class=cellinside>7</td><td class=cellinside>3</td><td class=cellinside>N.A.</td><td class=cellinside>gdm2</td><td class=cellinside>mcquitty</td><td class=cellinside> </td><td class=cellinside>9</td></tr> <tr><td class=firstcolumn>8</td><td class=cellinside>8</td><td class=cellinside>4</td><td class=cellinside>N.A.</td><td class=cellinside>gdm2</td><td class=cellinside>mcquitty</td><td class=cellinside> </td><td class=cellinside>4</td></tr> <tr><td class=firstcolumn>9</td><td class=cellinside>9</td><td class=cellinside>3</td><td class=cellinside>N.A.</td><td class=cellinside>gdm2</td><td class=cellinside>ward</td><td class=cellinside> </td><td class=cellinside>10</td></tr> <tr><td class=firstcolumn>10</td><td class=cellinside>10</td><td class=cellinside>4</td><td class=cellinside>N.A.</td><td class=cellinside>gdm2</td><td class=cellinside>ward</td><td class=cellinside> </td><td class=cellinside>5</td></tr> </TBODY> </table> </td></table>

31 Tabele

32 Formularz Zaprojektuj formularz, w którym odwiedzający Twoją witrynę mogliby wprowadzić dane o sobie i opinię o stronie. <FORM ankiety" METHOD="Post"> DANE O ODWIEDZAJĄCYM <br><br> <Table > <tr align=left> <td > Imię </td><td > <INPUT Imię> </td><td > Nazwisko </td><td > <INPUT Nazwisko> </td></tr> <tr align=left> <td > </td><td> <INPUT > </td><td > Wiek </td><td> <INPUT wiek> </td></tr> </table> <br>

33 Płeć: <br> <INPUT TYPE="radio" NAME="plec" VALUE="kobieta" checked> Kobieta <br>
<INPUT TYPE="radio" NAME="plec" VALUE="mężczyzna"> Mężczyzna <br> <br> Zawód <br> <INPUT TYPE="radio" NAME="zawod" VALUE="uczeń" checked> Uczeń <INPUT TYPE="radio" NAME="zawod" VALUE="student"> Student <INPUT TYPE="radio" NAME="zawod" VALUE="emeryt"> Emeryt <INPUT TYPE="radio" NAME="zawod" VALUE="pracujący"> Pracujący/bezrobotny

34 Znajomość języków <br>
<INPUT TYPE="checkbox" NAME="jezyki" VALUE="angielski" checked> angielski <INPUT TYPE="checkbox" NAME="jezyki" VALUE="niemiecki"> niemiecki <INPUT TYPE="checkbox" NAME="jezyki" VALUE="francuski"> francuski <INPUT TYPE="checkbox" NAME="jezyki" VALUE="rosyjski"> rosyjski <BR><br> OPINIA O STRONIE <BR> OCENA <SELECT> <OPTION VALUE =6>6 - Super</OPTION> <OPTION VALUE =5>5 - Bardzo Dobra</OPTION> <OPTION VALUE =4>4 - Dobra</OPTION> </SELECT> <br><input type="submit" name"=pol1" value="Zatwierdz i wyslij"> </FORM>

35

36 Elementy języków skryptowych

37 Elementy języków skryptowych JavaScript(ECMA Script) / VB Script
<input type="button" value="Przejdź dalej" OnClick="sprawdz_haslo(this.form)" name="B1"> <script language="javascript"> <!-- function sprawdz_haslo(form) { if (form.identyfikator.value != "Uniwersytet") alert("Błedna nazwa: "+form.identyfikator.value) else{ if (form.haslo.value!="Ekonomiczny") alert("Błędne hasło") else location.replace("http://wgrit.ae.jgora.pl/~andrzej/"); } }// --></script> ", "width": "800" }

38 Elementy języków skryptowych inne sposoby dodawania skryptów
<body> <script language="javascript"> <!-- j=prompt("ile razy sie przywitac \n podaj wartość z przedziału (1-10)?",5); if ( isNaN(parseInt(j)) || (j<1) || (j>10) ) { alert ("Prosiłem o liczbę z przedziału 1-10"); location.replace("http://www.ae.jgora.pl/andrzej/Java.html") ; } for(i=1;i<=j;i++) document.writeln('<P STYLE="font-size: '+5*i+'pt; font-weight: bold; background: blue;color: yellow"> \ Pisanie w Javascripcie (ECMAScripcie) jest łatwe i przyjemne</P>') confirm("a teraz wracam na strone początkową") //location.replace("http://wgrit.ae.jgora.pl/~andrzej/") ; --> </script> </body> ", "width": "800" }

39 Elementy języków skryptowych inne sposoby dodawania skryptów
function dzien_dobry() { document.writeln ("Proszę czekać strona jest ładowana"); if ( confirm ("Jesli nie masz 21 lat, to opuść tę stronę (przycisk anuluj)")==false){ location.replace ("http://www.disney.com/"); } else{ alert ("Chyba, że jesteś studentem Uniwersytetu Ekonomicznego:)"); document.open(); document.writeln(" Strona została załadowana"); return > </script> <body onload="dzien_dobry()"> ", "width": "800" }

40 Elementy języków skryptowych
Obiekty ECMA Scriptu / VB Scriptu: Window History Frame Document Location Form Text CheckBox Radio Select Button / sumbmit / reset

41 Język HTML


Pobierz ppt "Język HTML."

Podobne prezentacje


Reklamy Google