Programowanie WEB PODSTAWY HTML

Transkrypt

1 Programowanie WEB PODSTAWY HTML

2 Najprostsza strona HTML <html> <head> <title>tytuł strony</title> </head> <body> To jest moja pierwsza strona WWW. </body> </html> <html> <head> <title>tytuł strony</title> <meta name="description" content="przykładowa strona na zajęcia"> <meta name="keywords" content= Apache, PHP, MYSQL, zajęcia, PWSZ"> <meta http-equiv="content-type" content="text/html; charset=iso ">. </head> <body> To jest moja pierwsza strona WWW. </body> </html>

3 HTML podstawowe znaczniki Nagłówki 6 różnych poziomów <h1>przykład 1</h1>  <h2>przykład 2</h2>  Akapity <p> <p>nie koniecznie sensowny akapit tekstu</p> Tekst preformatowany <pre> <pre>ten Tekst będzie Dokładnie tak samo Wyglądał w oknie przeglądarki</pre> Pogrubienie <b>, <strong> <b>ten tekst będzie pogrubiony</b> Kursywa <i>, <em> <i><b>ten tekst będzie pogrubiony oraz pochylony</b></i> Podkreślenie <u> <u><i><b>ten tekst będzie pogrubiony, pochylony oraz podkreślony</b></i></u>

4 HTML podstawowe znaczniki Indeksy górny i dolny <sup>, <sub> H<sub>2</sub>O, m<sub>2</sub> Linia pozioma <hr> <hr>tekst pod kreską Lista wypunktowana <ul> <ul> <li>pierwsza</li> <li>druga</li> <li>trzecia</li> <li>czwarta</li> </ul> Lista numerowana <ol> <ol> <li>pierwsza</li> <li>druga</li> <li>trzecia</li> <li>czwarta</li> </ol> Typy wypunktowań <ul type="disc"> <ul type="circle"> <ul type="square"> <ol type="a"> <ol type="a"> <ol type="i"> <ol type="i">

5 HTML podstawowe znaczniki Lista definicji <dl> <dl> <dt>student</dt> <dd>człowiek wyluzowany, bez problemów</dd> <dt>student na zajęciach z programowania WEB.</dt> <dd>generalnie ma przechlapane. <dd> </dl> Złamanie wiersza <br> Jeden wiersz<br>a to już w kolejnym wierszu Użycie styli w kodzie HTML (dla odróżnienia od arkusza styli) <p style="font-family: arial; ">Tekst czcionką Arial</p> <p style="color: blue; ">Tekst czcionką niebieską.</p> <p style="color: rgb(125,200,220);">a tutaj kolor uzyskany innym zapisem</p>

6 HTML odsyłacze Etykieta <a> <a name="etykieta_1"> Jakiś tekst opatrzony etykietą</a> <a href= #etykieta_1"> Link do etykiety</a> Link do innej strony internetowej <a> <a href= =" Link do strony głównej uczelni</a> Link do innej strony internetowej z etykietą <a> <a href= =" Akurat na stronie PWSZ nie ma takiej etykiety </a> Link do poczty <a> <a href= ="mailto:adamdudek@pwsz.nysa.pl">napisz do prowadzącego</a>

7 HTML grafika Znacznik <img> <img src="fotka.jpg" alt="komentarz dla obrazka"> Ustalenie rozmiarów <img src="fotka.jpg" height="50" width="100" alt="komentarz dla obrazka"> Style, obramowanie, marginesy <img src="fotka.jpg" height="50" width="100" alt="komentarz dla obrazka, który ma czerwoną grubą ramkę i wielkie marginesy" style="border: 5px red solid; margin-left: 50px; margin-right: 50px; "> Pozycja w poziomie <img src="fotka.jpg" height="50" width="100" alt="komentarz dla obrazka, który jest wyrównany do prawej krawędzi" style="float: right; "> Pozycja w pionie <img src="fotka.jpg" height="50" width="100" alt="komentarz dla obrazka, który jest wyrównany do środka wiersza" style="vertical-align: middle;">

8 HTML tabele Tabele HTML pozwalają na sterowanie układem danych, tekstu, obrazów, połączeń, formularzy i ich pól, a także innych tabel, przy pomocy wierszy i kolumn komórek. <table border="1"> <caption>tabela przykładowa</caption> <tr> <th>nagłówek, komórka 1</th> <th>nagłówek, komórka 2</th> <tr> <td>wiersz 1, komórka 1</td> <td>wiersz 1, komórka 2</td> <tr> <td>wiersz 2, komórka 1</td> <td>wiersz 2, komórka 2</td> </table>

9 HTML tabele Wolny obszar w obrębie komórki <table border="1" cellpadding="10"> Rozsunięcie komórek <table border="1" cellpadding="10 cellspacing="10" > Szerokość tabeli <table border="1" cellpadding="10" width="50%"> Wyrównanie zawartości komórek w poziomie <tr align="center"> Wyrównanie zawartości komórek w pionie <tr valign="middle">

10 HTML tabele (rozpinanie komórek) Aby zdefiniować taką komórkę, należy do znacznika <th> lub <td> dodać atrybuty rowspan i/lub colspan, i przypisać im jako wartości liczby całkowite określające na ilu wierszach i/lub kolumnach komórka jest rozpięta. Komórki są rozpinane w dół i na prawo, a więc aby utworzyć komórkę rozpiętą na kilku kolumnach, należy dodać atrybut colspan do komórki wysuniętej najbardziej w lewo, a w przypadku rozpinania komórki na wierszach, atrybut rowspan powinien być dodany do komórki pierwszej od góry.

11 HTML tabele (rozpinanie komórek) <table cellpadding=6 border=1> <caption align=bottom><b>tabela opisująca schemat wydatków</b></caption> <tr> <th rowspan="2"></th> <th colspan="2">wydatki</th> <th rowspan="2">liczba stałych<br>pracowników</th> <th rowspan="2">liczba<br>zleceń</th> <tr> <th>planowane</th> <th>rzeczywiste</th> <tr> <th>styczeń</th> <td align="right">5700</td> <td align="right">3800</td> <td align="center">88</td> <td align="right">59</td> <tr> <th>luty</th> <td align="right">10800</td> <td align="right">9600</td> <td align="center">45</td> <td align="right">67</td> <tr> <th>marzec</th> <td align="right">14900</td> <td align="right">23000</td> <td align="center">36</td> <td align="right">24</td> <tr> <th>kwiecień</th> <td align="right">22700</td> <td align="right">15000</td> <td align="center">34</td> <td align="right">45</td> </table>

12 HTML tabele (kolory i tło) <table width="50%" border="1" cellpadding="10" bordercolor="#993300" bgcolor="#ffff99"> <caption>tabela przykładowa</caption> <tr bgcolor="#00ffff"> <th>nagłówek, komórka 1</th> <th>nagłówek, komórka 2</th> <th bgcolor="#3333ff">nagłówek, komórka 2</th> <tr align="center"> <td>wiersz 1, komórka 1</td> <td bgcolor="#ffcc33">wiersz 1, komórka 2</td> <td>wiersz 1, komórka 3</td> <tr align="center"> <td>wiersz 2, komórka 1</td> <td background="tlo_komorki.jpg"><strong>wiersz 2, komórka 2</strong></td> <td > </td> </table> </table>

13 Ramki Ramka to zdefiniowana przez swojego twórcę część okna przeglądarki, której to części przypisano właściwości takie jak całemu oknu. Tak więc ramka może być przewijana niezależnie od pozostałej zawartości okna. Można też swobodnie zmieniać jej rozmiary. Zawartość ramki tworzy standardowy plik HTML. Układ ramek to zestaw ramek wypełniający okno przeglądarki lub ramkę w zewnętrznym układzie ramek. Poszczególne ramki układu mogą mieć swoje nazwy dzięki temu można tworzyć połączenia do ramek oraz stosować nazwy ramek w skryptach. Układ ramek jest definiowany w pliku HTML, w którym element body zastąpiono elementem frameset. W elemencie tym określane są następujące cechy układu ramek: Sposób podziału okna na ramki. Liczba wierszy lub kolumn. Obszar ekranu przyporządkowany poszczególnym kolumnom/wierszom. <html> <head> <title>tytuł strony</title> </head> <frameset atrybut= wartość > <frame src= url >... <frame src= url > </frameset> </html>

14 Ramki podział pionowy Znacznik <frameset> przyjmuje dwa atrybuty: cols i rows. Pierwszy z nich, cols, umożliwia określenie liczby kolumn, na które zostanie podzielone okno przeglądarki a więc liczby ramek pionowych. Co więcej, atrybut ten pozwala także wskazać sposób przypisania kolumnom obszaru okna. Definicja ogólna: <frameset cols="szerokość_kolumny, szerokość_kolumny,..."> Podział strony na równe części: <frameset cols="*, *, *"> Przykład <html> <head> <title>układ trzech ramek pionowych</title> </head> <frameset cols="25%,50%,25%"> <frame src="ramka1.html <frame src="ramka2.html <frame src="ramka3.html </frameset> </html>

15 Ramki podział pionowy - przykład <html> <head> <title>ramki w pionie</title> </head> <frameset cols="25%,75%">  <frame src="nawigacja.html" name="nawigacja"> <frame src="strona.html" name="strona"> </frameset> </html> <html> <! nawigacja.html--> <head> <title>nawigacja</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <h3>wybierz interesujący cię temat: </h3>  <ul>  <li><a href="strona.html" target="strona">strona 1</a> <li><a href="strona1.html" target="strona">strona 2</a> <li><a href="strona2.html" target="strona">strona 3</a> </ul> </body> </html>

16 Ramki własności Paski przewijania: Domyślnie ramki są automatycznie zaopatrywane w paski przewijania wtedy, gdy jest to konieczne. Aby zablokować przewijanie zawartości ramki, należy umieścić w znaczniku <frame> atrybut scrolling i przypisać mu wartość no. Wyświetlanie obramowania: <frameset rows="75,*" border= 0 frameborder= 0 framespacing= 0 > Przeglądarka nie obsługuje ramek: <html> <head> <title>tytuł strony</title> <frameset cols = "25%, 25%,*"> <noframes>przeglądarka nie obsługuje ramek!</noframes> <frame src ="ramka_a.html"> <frame src ="ramka_b.html"> <frame src ="ramka_c.html"> </frameset> </html>

17 Ramki podział mieszany Aby utworzyć mieszany układ ramek, konieczne jest zagnieżdżenie elementu frameset w innym elemencie frameset. <html> <head> <title>mieszany układ ramek</title> </head> <frameset rows="50%,50%"> <frame src="ramka_a.html"> <frameset cols="25%,75%"> <frame src="ramka_b.html"> <frame src="ramka_c.html"> </frameset> </frameset> </html>

18 Zadanie nr 1 (25 pkt.) W ramach rozgrzewki do przedmiotu proszę przygotować witrynę, która będzie swego rodzaju samouczkiem prezentującym w postaci kodu oraz efektu jego działania wszystkie aspekty, o których mowa w przytoczonych wcześniej przykładach. Proszę wykorzystać ramki do budowy tego rozwiązania.