docsieciowe systemy bzinesowe - wz-utp
download 
Reklamacja Transkrypt
sieciowe systemy bzinesowe - wz-utp
mgr inż. Jakub Siwiec ([email protected]) Katedra Informatyki w Zarządzaniu Wydział Zarządzania SIECIOWE SYSTEMY BZINESOWE Ćwiczenia HTML nr 1 – Programowanie pierwszej strony internetowej - wizytówka Zadanie: Na podstawie zdobytej na poprzednich zajęciach wiedzy oraz wspierając się przykładami poniżej, stwórz wizytówkę dowolnej osoby (własną lub osoby publicznej) wg wzoru: Zdjęcie twarzy Imię i nazwisko Data urodzenia: Dzień Narodowość: Znajomość języków: Hobby: Miesiąc Rok Rys. flagi np. Np. niemiecki lub „brak” Np. angielski Hobby nr 1 Hobby nr 2 Hobby nr 3 itd. Środowisko pracy: stwórz „nowy folder” na pulpicie o nazwie Imie_nazwisko, w którym będziesz pracował, otwórz notatnik (start programy akcesoria) i zapisz plik jako imie1.html do stworzonego przez siebie folderu, pamiętaj o wybraniu kodowania – UTF-8 Przykład budowy wypunktowania: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <meta name="Description" content="Tu wpisujemy opis zawartości strony" /> <meta name="Keywords" content="Tu wpisujemy wyrazy kluczowe oddzielone przecinkami" /> <title>Tu wpisujemy tytuł strony</title> </head> <body> Tu wpisuje się główną treść strony Nie kopiować! </body> </html> 1 Autor: mgr inż. Jakub Siwiec Kopiując powyższe lub poniższe znaczniki, należy podmienić każdy cudzysłów. Przykład budowy tabeli: Wywołanie tabeli Znacznik dla wiersza Znacznik dla kolumny + dodatki: kolor, scalenie 2 komórek, wyśrodkowanie tekstu Zamknięcie wiersza Kolejne otwarcie wiersza Kolejna komórka o określonych parametrach Łączenie 2 komórek w doł Zamknięcie komórki / kolumny Zamknięcie wiersza Zamknięcie tabeli <table width="1000" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="kolor komórki" colspan="2" align="center" valign="middle">Tutaj umieszcza się treść komórki, lub dodaje zdjęcia, media</td> </tr> <tr> <td bgcolor="kolor wypełnienia" width="szerokość komórki np.150” valign="top">Treść </td> <td bgcolor="kolor strony" valign="top" rowspan=”2”> Treść </td> </tr> </table> UWAGA – spróbuj zastosować parametr valign w znaczniku komórki – TD (<td valign=”middle”>) komórki w pionie, na środek wyrównanie Dodawanie zdjęć: Do dodawania zdjęć służy znacznik IMG w następujący sposób: <img src=”tu wpisujemy ścieżkę do danego pliku w dwojaki sposób np. images/plik.jpg oznacza, że plik znajduje się w folderze IMAGES, lub np. adres_www.pl/plik.jpg – zdj. Zostanie pobrane z Internetu” align=”center lub left lub rigt – oznacza po której stronie znajdować będzie się zdjęcie oraz, że po przeciwnej okalać je będzie text” border=”ang. granica – ramka, wartości 0,1,2 itd.” width=”szerokość zdjęcia wartości pixelowe np. 200px lub procentowe 20% rzeczywistego rozmiaru) height=”wysokość, analogicznie jak szerokość” /> Krok końcowy: usunąć dane z pulpitu, opróżnić kosz, wyłączyć komputer. Zdobyta wiedza: poznanie typowej budowy dokumentu HTML poznanie znaczników i parametrów dotyczących budowy tabel poznanie znacznika i parametrów dotyczących osadzania elementów graficznych 2 Autor: mgr inż. Jakub Siwiec Rozwiązanie zadania: 3 Autor: mgr inż. Jakub Siwiec
