docHTML – ZAJĘCIA I
download 
Reklamacja Transkrypt
HTML – ZAJĘCIA I
Technologie informacyjne Paulina Suchanek Ćw. z HTML – podstawowe znaczniki Język HTML (Hyper Text Markup Language) - zwany popularnie hipertekstem powstał na początku lat 90-tych. Głównym celem języka HTML jest budowa stron WWW - Word Wide Web, które udostępniają informacje w Internecie; jest językiem programowania interpretowanym przez przeglądarki internetowe, takie jak: Internet Explorer, Mozilla, Opera Budowa poleceo HTML Większośd poleceo języka HTML jest dwuczęściowa: częśd otwierająca <YYY> i zamykająca </YYY>, gdzie YYY jest nazwą polecenia określającego sposób prezentowania tekstu, umieszczonego między nimi na ekranie. Są również polecenia nie mające części zamykającej, ich wpływ na wygląd tekstu jest lokalny. Nazwy poleceo mogą byd pisane za pomocą dużych i małych liter. Można również zdefiniowad dodatkowe elementy modyfikujące działanie poleceo: polecenia posiadające wartośd - parametry, polecenia nie posiadające wartości - klauzule. Podstawowe znaczniki: o Nagłówki: <h1>nagłówek pierwszy</h1> <h2>drugi</h2> <h3>trzeci</h3> o o o o o o o o <p>Tu wpisz treśd akapitu</p> - akapit <b>tekst pogrubiony </b> <i>tekst pochylony </i> <u> tekst podkreślony</u> <p align="center">Treśd akapitu</p> - wyśrodkowanie tekstu w akapicie < br /> - koniec linii <hr> - pozioma linia <! Komentarz> Więcej przykładów dostępnych np. na stronach: 1. http://www.kurshtml.boo.pl/html/zielony.html 2. http://webmaster.helion.pl/index.php/spis-polecen 3. http://www.w3schools.com/html/html_primary.asp 4. http://www.html.su/ Składnia dokumentu HTML: <html> <head> W tym miejscu powinny znajdować się informacje o stronie. Np. tytuł. </head> <body> W tym miejscu będzie zawarta treść która będzie widoczna na stronie </body> </html> Znacznik <html> zawsze rozpoczyna stronę, </html> zaś ją kooczy. Technologie informacyjne Paulina Suchanek ZNACZNIKI META:. Aby strona była notowana na wysokich miejscach wyszukiwarek. W ramach head powinny byd wstawione odpowiednie znaczniki meta: <meta http-equiv="Content-Type" content="text/html; charset=cp1250"> Znacznik powyżej informuje wyszukiwarkę o europejskim systemie kodowania liter, czyli że będą litery ą,ę,ż,ł czy ź. <meta name="Description" content="Tu wpisujemy opis strony który ma nie więcej niż 200 znaków."> <meta name="Keywords" content="Tu wpisujemy słowa kluczowe odzielone przecinkami np. komputer,gry,procesor."> <meta name="Date" content="4-05-2010"> Data utworzenia dokumentu. <meta name="Author" content="Tu wpisujemy swoje imię i nazwisko"> <meta name="language" content="pl"> Ustwiamy w jakim języku tworzona jest strona. Listę numerowaną można utworzyd stosując polecenie: <ol> <li>Punkt pierwszy</li> <li>Punkt drugi</li> <li>Punkt trzeci</li> </ol> Listę punktowaną tworzy się podobnie pisząc w pierwszej i ostatniej linijce znacznik <ul> w miejsce <ol>. Wygląd punktu można wybrad wpisując np. <ul type="circle"> lub <ul type="square"> Dodawanie obrazka: Mając przygotowany plik.jpg (lub .gif) w katalogu w którym znajduje się nasz plik index.html możemy łatwo go załączyd korzystając z polecenia: <img src="plik.jpg" alt="tytuł obrazka" /> Link do innej strony WWW lub do pliku zamieszczonego na serwerze: <a href="adres internetowy">opis odsyłacza</a> Tabele Za pomocą poleceo języka HTML możemy budowad tabele, które służą do rozmieszczania części składowych dokumentu. W komórkach tabeli mogą znaleźd się dowolne obiekty. Szerokośd tabeli wynika z szerokości wszystkich kolumn i szerokości okna, w którym jest ona wyświetlana. Można łączyd komórki tabeli, zarówno w pionie jak i w poziomie. <TABLE></TABLE> <TD></TD> <TH></TH> <TR></TR> <CAPTION></CAPTION> <COL> <COLGROUP> Polecenie definiujące wygląd tabeli. Definicja komórki z danymi (tekst jest standardowo dosunięty do lewej krawędzi). Definicja komórki nagłówka (tekst jest standardowo wycentrowany i pisany czcionką wytłuszczoną). Polecenie definiuje początek wiersza danych, bądź nagłówka tabeli Definicja opisu tabeli. Polecenie służące do nadawania atrybutów kolumnom tabeli Technologie informacyjne Paulina Suchanek Przykład: Dodajmy jeszcze kolory, i tła: <table> <tr> <td>a1</td> <td>a2</td> <td>a3</td> </tr> <tr> <td>b1</td> <td>b2</td> <td>b3</td> </tr> <tr> <td>c1</td> <td>c2</td> <td>c3</td> </tr> </table> <table border bgcolor=yellow> efekt: Możemy oczywiście zastosowad różne kolory, ale nazwę trzeba napisad w języku angielskim np. red green blue aqua silver black itd... Możemy też nadad kolor pojedynczej komórce np: a1 a2 a3 b1 b2 b3 c1 c2 c3 Jak widad tabela zawiera 3 wiersze po trzy komórki, teraz dodajmy grubośd tabeli: <table border> <tr> <td>a1</td> <td>a2</td> <td>a3</td> </tr> <tr> <td>b1</td> <td>b2</td> <td>b3</td> </tr> <tr> <td>c1</td> <td>c2</td> <td>c3</td> </tr> </table> efekt: a1 a2 a3 b1 b2 b3 c1 c2 c3 <td bgcolor=yellow>a1</td> <td bgcolor=red>a2</td> <td bgcolor=green>a3</td> <td bgcolor=aqua>b1</td> <td bgcolor=orange>b2</td> <td bgcolor=silver>b3</td> <td bgcolor=black>c1</td> <td bgcolor=white>c2</td> <td bgcolor=gold>c3</td> efekt: a1 a2 a3 efekt: a1 a2 a3 b1 b2 b3 c1 c2 c3 b1 b2 b3 c1 c2 c3
