docLekcja 1
download 
Reklamacja Transkrypt
Lekcja 1
Temat 1: Budowa strony Wstęp Dokument (X)HTML jest zwykłym plikiem tekstowym - (X)HTML, czyli (Extensible) Hypertext Markup Language - (Rozszerzalny)Hipertekstowy Język Oznaczania. Taki dokument można utworzyć za pomocą najprostszego edytora tekstów – Notatnika, gdzie wpisujemy wszystkie polecenia, dotyczące formatowania tekstu, wstawiania grafiki i inne. Wszystkie informacje dotyczące formatowania tekstu zapisane są przy użyciu specjalnych znaczników. Przeglądarka w czasie pokazywania pliku w formacie HTML czyta wszystkie znaczniki i interpretuje informacje w nich zawarte. Wszystkie znaczniki są umieszczone między znakami < oraz > . Jak zrobić dobrą stronę • Zastanów się dobrze nad tematyką swojej strony. • Uważaj z doborem kolorów na stronie, zwłaszcza jeśli chodzi o tło i tekst • Nie przesadzaj z grafiką • Przyjrzyj się innym renomowanym witrynom. • Nawigacja w serwisie to bardzo ważna sprawa. • Dbaj o poprawność ortograficzną i stylistyczną tekstu. • Postaraj się na bieżąco aktualizować treść strony i usuwać powstałe błędy. • Informuj o wprowadzanych nowościach i utrzymuj kontakt listowny z użytkownikami. • Otwórz się na konstruktywną krytykę. Przykład 1: szkielet strony <html> <head> <title>Tu wpisz tytuł strony</title> </head> <body> Tu wpisuje się treść strony </body> </html> Zadanie 1: Otwórz program Notatnik i wpisz zawartość Przykład 1 ( kolorowanie i wcięcia zostały użyte tylko jako elementy wyróżniające składowe strony). Zapisz plik pod nazwą strona1.html. Otwórz w przeglądarce utworzony plik i obejrzyj jak wygląda. Na granatowym pasku napis: Tu wpisz tytuł strony. Na stronie napis: Tu wpisuje się treść strony Jeżeli nie będzie polskich liter, to ustaw kodowanie: Przykład 2: kodowanie liter <html> <head> <meta http-equiv="Content-Type" content="text/html; windows-1250" /> <title>Strona nauczyciela</title> </head> <body> Zapraszam na moją stronę. </body> </html> Zadanie 2: Otwórz plik strona1.html za pomocą programu Notatnik i wprowadź zmiany zgodnie z Przykład 2. Wykonaj: Plik-Zapisz i obejrzyj efekt w przeglądarce. Porada: Aby oglądać efekt pracy możesz mieć cały czas otwarte okno z widokiem strony i tylko ją odświeżać naciskając F5. Przykład 3: znaczniki meta <html> <head> <meta http-equiv="Content-Type" content="text/html; windows-1250" /> <meta name="Description" content="Tu wpisz opis zawartości strony" /> <meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" /> <meta name="Author" content="Tu wpisz swoje imię i nazwisko" /> <title>Strona nauczyciela</title> </head> <body> Zapraszam na moją stronę. </body> </html> Porada: dodanie znaczników <meta> nie zmienia wyglądu strony. Są one „czytane i interpretowane” przez wyszukiwarki internetowe. Przykład 4: kolory tła i tekstu dla całej strony <html> <head> <meta http-equiv="Content-Type" content="text/html; windows-1250" /> <meta name="Description" content="Tu wpisz opis zawartości strony" /> <meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" /> <meta name="Author" content="Tu wpisz swoje imię i nazwisko" /> <title>Strona nauczyciela</title> </head> <body bgcolor="red" text="yellow"> Zapraszam na moją stronę. </body> </html> Zadanie 3: Dopisz do swojej strony znaczniki <meta> wg Przykład 3 oraz dodaj kolory wedle swojego uznania wg Przykład 4. Porada: Kolor możemy wpisywać jako angielską nazwę lub jako kod szesnastkowy. Wybrane kolory. black czarny white biały silver srebrny gray szary maroon kasztanowy red czerwony purple purpurowy fuchsia fuksja green zielony lime limonowy olive oliwkowy yellow żółty navy granatowy blue niebieski teal zielonomodry aqua akwamaryna Przykład 5: kolor czcionki <html> <head> <meta http-equiv="Content-Type" content="text/html; windows-1250" /> <meta name="Description" content="Tu wpisz opis zawartości strony" /> <meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" /> <meta name="Author" content="Tu wpisz swoje imię i nazwisko" /> <title>Strona nauczyciela</title> </head> <body bgcolor="red" text="yellow"> Zapraszam na moją stronę.<br> <font color="green">Tekst w tej linijce ma kolor zielony<br> A tło jest czerwone</font> </body> </html> Pozostałe atrybuty tekstu • Tekst pogrubiony <b>Tu wpisz tekst</b> • Tekst pochylony <i>Tu wpisz tekst</i> • Tekst podkreślony <u>Tu wpisz tekst</u> • Wielkość czcionki <font size="n">Tu wpisz tekst</font> gdzie jako "n" należy wpisać wartość od 1 (czcionka najmniejsza) do 7 (czcionka największa). • Rodzaj czcionki <font face="rodzaj1, rodzaj2, rodzaj3...">Tu wpisz tekst</font> zamiast rodzaj, rodzaj1, rodzaj2, rodzaj3... należy wpisać rodzaje czcionek (np.: Arial, 'Courier New', 'Times New Roman', Verdana i inne). Zostanie użyta taka czcionka, którą pierwszą w kolejności podawania będzie posiadał użytkownik. W systemie Windows standardowo dostępne powinny być czcionki: 'Times New Roman', Arial, 'Courier New'. Dodatkowo od jakiegoś czasu z Internet Explorerem dostarczane są: Verdana, Tahoma, 'Trebuchet MS', Georgia Łączenie parametrów: wszystkie powyższe parametry (atrybuty i znaczniki) dotyczące tekstu można łączyć, np. po wpisaniu w edytorze: <p align="center"><font size="5" color="red" face="Courier New"><b><i><u> To jest jakiś tekst </u></i></b></font></p> Znak akapitu <p>Treść akapitu (wyróżnionego fragmentu tekstu).</p> Przykład 6: pozostałe atrybuty tekstu <html> <head> <meta http-equiv="Content-Type" content="text/html; windows-1250" /> <meta name="Description" content="Tu wpisz opis zawartości strony" /> <meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" /> <meta name="Author" content="Tu wpisz swoje imię i nazwisko" /> <title>Strona nauczyciela</title> </head> <body bgcolor="red" text="yellow"> Zapraszam na moją stronę.<br> <font color="blue">Tekst w tej linijce ma kolor niebieski.</font><br> Pozostałe atrybuty tekstu<br> <b>Tekst pogrubiony</b><br> <i>Tekst pochylony</i><br> <u>Tekst podkreślony</u><br> <font size="12px">Wielkość czcionki</font><br> <font face="Arial">Czcionka Arial</font><br> <font face="Tahoma">Czcionka Tahoma</font><br> <p align="center"><font size="5" color="black" face="Courier New"><b><i><u> To jest połączenie wszystkich atrybutów</u></i></b></font></p> </body> </html> Zadanie zaliczeniowe nr 1: Na podstawie materiału zawartego w lekcji zbuduj stronę opisującą zawartość Twojej strony. Użyj przedstawionych atrybutów. Wyślij zadanie do sprawdzenia jako plik html.
