Wprwadzenie d Internetu zajęcia 1 XHTML cechy Dkument HTML/XHTML jest zwykłym plikiem tekstwym, w którym znajdują się plecenia XHTML i mżna g utwrzyć przy pmcy zwykłeg edytra tekstów np. ntatnika, wprwadzając ręcznie dpwiednie znaczniki. Język znaczników rzumiany przez przeglądarki internetwe Niezależny d platfrmy Hyperlinki (dnśniki) główna siła XHTML-a XHTML zastswanie Publikacja infrmacji w Internecie Udstępnianie dkumentacji W płączeniu z przetwarzaniem na serwerze (PHP) ptężne mżliwści knstruwania systemów klient-serwer Sklepy internetwe Prtale Wewnętrzne systemy bsługi firm XHTML pdstawy budwy Plecenie (znacznik) języka XHTML jest kreślnym ciągiem znaków bjętymi strymi nawiasami. Każdy dkument XHTML psiada szkielet, który jest snwą dla pszczególnych pleceń. mgr inż. Marcin Nwak 22.02.2006 Marcin_Nwak@wit.edu.pl 1/5
pdstawwa struktura dkumentu XHTML: <html xmlns="http://www.w3.rg/1999/xhtml" xml:lang="pl" lang="pl">> <head> <title>tytuł strny</title> </head> <bdy> </bdy> </html> <p>treść strny</p> znaczniki Wszystkie plecenia XHTML muszą rzpczynać się d znacznika twierająceg i kńczyć znacznikiem zamykającym. twierające np. <bdy> zamykające np. </bdy> UWAGA! W HTML zalecane jest stswanie małych znaczników - w XHTML, który jest kntynuacją języka HTML, małe znaczniki są już bwiązkwe. atrybuty znaczników np. <td clspan= 2 ></td> Przykłady najczęściej stswanych atrybutów. align = wartść (left, right, center, justify) - kreśla spsób justwania elementu względem tczenia HTML valign = wartść (tp, middle, bttm) - służy d pinweg wyrównania zawartści kmórki - d górneg brzegu, d śrdka i d dlneg brzegu backgrund = nazwa brazka kreśla grafikę, która pjawi się w tle strny bgclr = klr kreśla klr tła strny UWAGA! Atrybuty mgą psiadać tylk i wyłącznie znaczniki twierające! Główne znaczniki w sekcji HEAD tytuł strny: <title>jakiś tytuł strny</title> słwa kluczwe i pis (używane przez wyszukiwarki): mgr inż. Marcin Nwak 22.02.2006 Marcin_Nwak@wit.edu.pl 2/5
<meta name="keywrds" cntent="sklep, księgarnia"> <meta name="descriptin" cntent="księgarnia internetwa"> strna kdwa Windws (tylk Plska) <meta http-equiv="cntent-type" cntent="text/html; charset=windws-1250"> ISO (międzynardwa, wymaga knwertera) <meta http-equiv="cntent-type" cntent="text/html; charset=is-8859-2"> Sekcja BODY <bdy bgclr="red" backgrund="jakies_tl.jpg">... treść strny... </bdy> bgclr - klr tła np: red, yellw, black; inaczej: #FF0000, #66CCFF, #33CC99; przykład palety: http://www.asp.net.pl/wit/klry.html backgrund - rysunek w tle strny Frmatwanie tekstu <b>tekst pgrubiny</b> <i>tekst pchylny</i> lub <em>tekst pchylny</em> <u>tekst pdkreślny</u> Zagnieżdżanie znaczników <b><i>tekst pgrubiny i pchylny</i></b> <i><b>tekst pgrubiny i pchylny</b></i> Rzmieszczanie na strnie <span></span> <div></div> lub inaczej w znaczniku paragrafu mgr inż. Marcin Nwak 22.02.2006 Marcin_Nwak@wit.edu.pl 3/5
<p align="center">tekst wycenterwany</p> align - wyrównanie np. center, left, right Inne rzadziej używane znaczniki <sub>niżej</sub> np. H 2 0 <sup>wyżej</sup> np. m 2 <big>pwiększny</big> <small>pmniejszny</small> <del>przekreślny</del> <dfn>definicja</dfn> <cde>kd kmputerwy</cde> <samp>sample cmputer cde text</samp> <kbd>keybard text</kbd> <var>variable</var> <cite>cytat</cite> Umieszczanie grafiki na strnie <img src="zdjecie.jpg" width="100" height="50" brder="0" alt="obrazek"> brder szerkść branwania width i height szerkść i wyskść (jeśli są pdane t przeglądarka trchę szybciej czyta) align: left, rigth, center - blanie brazka tekstem Odnśniki / linki <a href="strna2.html">link 1</a> <a href="http://www.wp.pl">przejdź na strnę WP</a> <a href="ftp://kmputery.wp.pl/pub">sciągnij sterwniki</a> <a href="mailt:newman@wit.edu.pl">kntakt</a> <a href="strna5.html" target="_blank">w nwym knie</a> Bkmarki <a name="pczatek"></a> <a href="#pczatek">pwrót na górę</a> Listy lista nienumerwana <ul> <li>opcja1</li> <li>opcja2</li> </ul> mgr inż. Marcin Nwak 22.02.2006 Marcin_Nwak@wit.edu.pl 4/5
lista numerwana <l> <li>opcja1</li> <li>opcja2</li> </l> rdzaj numeracji zmieniamy atrybutem type elementu OL: 1 a A i I <l type= I > lista definicji <dl> <dt>definicja 1</dt> <dd>opis definicji 1</dd> <dt>definicja 2</dt> <dd>opis definicji 2</dd> </dl> mgr inż. Marcin Nwak 22.02.2006 Marcin_Nwak@wit.edu.pl 5/5