Sieciowe Systemy Biznesowe
Transkrypt
Sieciowe Systemy Biznesowe
mgr inż. Jakub Siwiec ([email protected]) Katedra Informatyki w Zarządzaniu Wydział Zarządzania Sieciowe Systemy Biznesowe Ćwiczenia HTML nr 1 – Programowanie pierwszej strony internetowej Zadanie: Na podstawie zdobytej wiedzy oraz wspierając się przykładami poniżej, stwórz własną wizytówkę wg wzoru: Zdjęcie twarzy Imię i nazwisko Data urodzenia: Znajomość języków: Np. angielski Np. niemiecki lub „brak” Hobby: Środowisko pracy: stwórz „nowy folder” na pulpicie o nazwie Imie_nazwisko, w którym będziesz pracował, otwórz notatnik (start folderu, programy akcesoria) i zapisz plik jako imie.html do stworzonego przez siebie Przykład budowy dokumentu: <!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 </body> </html> 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 <table width="1000" cellspacing="0" cellpadding="10"> <tr> <td bgcolor="kolor góra" 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"> Treść 1 Autor: mgr inż. Jakub Siwiec Zamknięcie komórki / kolumny Zamknięcie wiersza Zamknięcie tabeli </td> </tr> </table> 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: otrzymane pliki wysłać na swojego e-mail’a, usunąć dane z pulpitu, opróżnić kosz, wyłączyć komputer. 2 Autor: mgr inż. Jakub Siwiec