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 naukowo- badawczego 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ć dokumenty fizycznie znajdujące się w innych miejscach na świecie. W 1989 Berners-Lee i inżynier oprogramowania CERN Robert Cailliau przedstawili równolegle dwie propozycje hipertekstowych systemów informacyjnych opartych na sieci Internet. Oba projekty cechowała podobna funkcjonalność. Rok później opracowali wspólną propozycję zaakceptowaną przez CERN – projekt WorldWideWeb.
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> </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