www.gim3.net
Download
Report
Transcript www.gim3.net
Projektowanie
stron www
Prezentacja multimedialna,
zapraszamy!
CO TO JEST HTML?
HTML (z ang. HyperText Markup Language) czyli
hipertekstowy język znaczników, służy do tworzenia stron
internetowych. W wielkim skrócie HTML to język
programowania, który służy do „opisu stron” (wielkość,
czcionka, pogrubienie, kursywa, podkreślenie itd.)
Oczywiście to tylko kilka z wielu możliwości jakie oferuje
nam HTML…
HISTORIA
W 1980 fizyk Tim Berners-Lee,
pracujący dla ośrodka naukowobadawczego CERN, stworzył prototyp
hipertekstowego systemu
informacyjnego – ENQUIRE. System
wykorzystywano do organizowania i
udostępniania dokumentów związanych
z badaniami naukowymi. Rewolucyjność
pomysłu polegała na tym, że
użytkownik, posługując się odnośnikami,
mógł z jednej lokalizacji przeglądać
TWORZENIE STRONY
Aby utworzyć naszą stronę nie potrzebujemy
żadnych zaawansowanych programów, wystarczy
notatnik.
Tworzymy nowy plik programem „notatnik” a
następnie do nazwy pliku dopisujemy rozszerzenie
.html (np. nazwa.html).
SZKIELET STRONY
Szkielet naszej strony jest bardzo podobny do szkieletu człowieka –
bez niego nasza strona nie jest wstanie funkcjonować.
Szkielet strony HTML to:
<HTML>
<HEAD>
<TITLE> Moja strona </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Gdzie: <HTML> oznacza początek strony HTML natomiast </HTML> oznacza jej
koniec. Między znacznikami <HEAD> </HEAD> znajduje się nagłówek strony a ciało
(wnętrze strony) w sekcji <BODY> </BODY>.
PODSTAWOWE ZNACZNIKI
<p>Treść</p> - akapit
<b>Treść</b> - pogrubienie
<i>Treść</i> - pochylenie
<u>Treść</u> - podkreślenie
*<font size="n">Treść</font> - wielkość czcionki
*gdzie jako "n" należy wpisać wartość od 1 (czcionka najmniejsza) do 7 (czcionka największa).
*<font color="kolor">Treść</font>
*gdzie jako "kolor” wpisujemy nazwę koloru z języka angielskiego.
Wstawianie obrazka
Aby wstawić obrazek na naszą stronę musimy posłużyć się
znacznikiem:
<img src="Tu podaj względną ścieżkę dostępu do obrazka"
alt="Tu podaj tekst alternatywny" />
Zamiast tekstu: "Tu podaj względną ścieżkę dostępu do
obrazka", należy podać miejsce na dysku, gdzie znajduje się
nasz obrazek, który chcemy umieścić na stronie. Jeżeli
obrazek znajduje się w tym samym katalogu co strona, na
której chcemy go wstawić, wystarczy wpisać tutaj samą
nazwę pliku obrazka, nie zapominając przy tym o podaniu
rozszerzenia (".jpg" lub ".gif").
Natomiast w miejsce "Tu podaj tekst alternatywny" wpisuje
się krótką informację, która pojawi się w przypadku, kiedy
obrazek nie zostanie wyświetlony (np. jeśli użytkownik
wyłączy wyświetlanie grafiki w swojej przeglądarce
internetowej).
ODSYŁACZE
Praktycznie na każdej stronie WWW spotyka się odsyłacze (inaczej:
odnośniki lub hiperłącza). Najczęściej stanowi je specjalnie wyróżniony
krótki tekst (lub obrazek), po kliknięciu którego, następuje przeniesienie do
innej strony. Tak jak każda książka składa się z rozdziałów, tak samo
serwisy internetowe składają się zwykle z podstron. Każda podstrona jest
osobnym plikiem HTML (z rozszerzeniem *.html lub *.htm) i zawiera treść,
która dość znacznie różni się tematycznie od pozostałych (tworzy się ją w
taki sam sposób jak stronę główną). Taka organizacja ułatwia użytkownikowi
nawigację oraz zapobiega niepotrzebnemu wczytywaniu całego serwisu od
razu (co trwałoby prawdopodobnie bardzo długo). Umieszczenie
wszystkiego w jednym pliku (index.html), absolutnie nie jest wskazane
(chyba że Twoja strona jest naprawdę krótka)!
Składnia odsyłacza jest następująca:
<a href="względna ścieżka dostępu do podstrony">opis odsyłacza</a>
Zasady wpisywania ścieżki dostępu są takie same jak w przypadku
obrazków.
Tabele
Struktura najprostszej tabeli wygląda następująco:
<table>
<tr>
<td>…</td>
<td>…</td>
<td>…</td>
<td>…</td>
</tr>
<tr>
</tr>
</table>
Gdzie: <table>...</table>jest znacznikiem tabeli. <tr>...</tr>jest
znacznikiem wiersza <td>...</td>jest znacznikiem pojedynczej komórki.
W miejsce kropek należy wpisać treść poszczególnych komórek tabeli.
ANIMACJE MARQUEE
1.Podstawowa
<marquee>Treść</marquee>
2. Określonego typu:
<marquee behavior="typ">Treść</marquee>
gdzie jako "typ" należy wpisać:
"scroll" - tekst przesuwa się od prawej do lewej (domyślnie).
"alternate" - tekst przesuwa się od prawej do lewej, a następnie "odbija się" i
powraca.
"slide" - tekst przesunie się od prawej do lewej tylko raz, a później się
zatrzyma i pozostanie nieruchomy.
WAŻNE INFORMACJE
Kreując stronę WWW niejednokrotnie
spotkamy się z błędami z naszej strony.
Ważne jest to aby zapamiętać te błędy,
poprawić je i starać się ich nie
popełniać. Każdy zaczynał kiedyś od
zera i każdy ma prawo się pomylić,
pamiętajcie o tym!
KONIEC
Prezentację przygotowali:
-Krzysztof Kleszcz
-Bartosz Piekarski
-Dominik Pytlak
Pomoce podczas projektu
Czyli
strony z których korzystaliśmy, to:
www.wikipedia.pl
www.kurshtml.edu.pl