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

Podobne dokumenty