Projektowanie stron www Prezentacja multimedialna zapraszamy CO TO

Projektowanie stron www Prezentacja multimedialna, zapraszamy!

CO TO JEST HTML? HTML (z ang. Hyper. Text 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> </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 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> </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