docLab5 html1 2011
download 
Reklamacja Transkrypt
Lab5 html1 2011
Laboratorium Informatyki 5 IPEE2011®PM Projektowanie stron w języku HTML Zadanie 1. Uruchomić Notatnik. W dokumencie zapisać swoje imię i nazwisko. Zapisać plik w swoim katalogu: D:\Student\Nazwisko_Imie\strona0.htm . (WAŻNE ! wybrać pozycję zapisz jako typ – wszystkie pliki !. Po zapisaniu pliku należy go uruchomić domyślnym programem (przeglądarką). Po pozytywnej weryfikacji działania tej strony znajdź w przeglądarce funkcję podglądu źródła strony. Należy uaktywnić funkcję. Kolejny krok to ponowny powrót do edycji pliku (Notatnik). Po swoim imieniu i nazwisku proszę wstawić „enter” i następnie należy skopiować poniższy tekst: To jest przykładowy tekst na stronę internetową. Ten tekst będzie pisany w formie jednego akapitu, czyli bloku tekstu, który będzie pisany od lewej do prawej, domyślną czcionką systemową. Tekst nie będzie za długi bo szkoda czytać takie proste teksty. Dla lepszej wizualizacji efektów na stronie internetowej tekst ten warto skopiować dwu- a nawet trzykrotnie. Po skopiowaniu zapisz ten tekst Sprawdzić rezultaty w przeglądarce. Zadanie 2. Wykorzystując notatnik systemowy stworzyć kolejny plik strona1.htm. Tym razem struktura pliku ma być zgodna ze standardem strony pisanym w języku HTML. <!DOCTYPE> <HTML> <HEAD> <TITLE> tytul strony 1</TITLE> </HEAD> <BODY> Imię i nazwisko </BODY> </HTML> Tu wpisać ponownie swoje imię i nazwisko Sprawdzić rezultaty w przeglądarce. Zadanie 3. Skopiować całą strukturę poprzedniego pliku i nazwać go jako strona2.htm. W części BODY należy odpowiednio sformatować wygląd tekstu. Po pierwsze należy pogrubić imię i nazwisko. Następnie do pliku należy skopiować ponownie blok tekstu: To jest przykładowy tekst na stronę internetową. Ten tekst będzie… Cały blok tekstu należy przedstawić krojem pochyłym (styl italic). Do pogrubienia służy znacznik <B> ... tu jakiś pogrubiany tekst … </B>, styl pochyłego pisma to <I> ... … </I>. Sprawdzić rezultaty w przeglądarce. W kolejnym kroku proszę sprawdzić wygląd strony po wprowadzeniu to tekstu kolejnych zdań: Zdanie z siedmioma spacjami między dwoma cyframi: 1 A po tym zdaniu wprowadź 10 enterów. Tu ma być 10 enterów 2. Tu ma być 7 spacji A to zdanie kończy już dokument. Sprawdzić rezultaty w przeglądarce. Czy efekty są widoczne? Zarządzanie wyglądem strony jest to opisywanie odpowiednimi znacznikami tekstu jak i innych obiektów zdefiniowanych w pliku strony internetowej. Kolejny etap zadania to wprowadzenie do kodu procedury, która robi czerwone tło strony: <BODY bgcolor=red> Sprawdzić rezultaty w przeglądarce. Za zgodą prowadzącego można spróbować zmienić kolor na inny lub zastosować inne znaczniki np. te umieszczone w tabelce na końcu instrukcji. Zadanie 4. Ze względu na nieekonomiczną pracę tworzenia stron w Notatniku, dalsze prace projektowe będą realizowane przy użyciu edytora stron WWW. W tym celu należy uruchomić i zapoznać się z programem KED v.2140. Przejrzeć dostępne menu, ikony, zakładki i system pomocy. Po zapoznaniu się z programem należy utworzyć stronę w standardzie HTML. Przy pomocy kreatora metatagów należy wprowadzić min. 7 dowolnych metainformacji do pliku (np. autor, słowa kluczowe, opis strony, kodowanie znaków…). Dobrać te metatagi i ich liczbę tak, aby były uniwersalne do każdej kolejno tworzonej strony internetowej. W części <BODY> wprowadzić dowolny tekst - 4 akapity (można wykorzystać bloki tekstów z poprzednich stron). Każdy z boków tekstu wyrównać inaczej (do lewego, do prawej strony, wyśrodkować i wyrównać obustronnie). Wprowadzić różne style i kolory czcionek w blokach tekstu (kolory i kroje czcionek dobrać samodzielnie, każdy blok ma być inaczej sformatowany). Wybrane wyrazy wyróżnić stosując kolejne znaczniki (np. strong, small….). Dokument zapisać jako strona3.htm. Sprawdzić rezultaty w podglądzie i w przeglądarce. Zadanie 5. Wykorzystując edytor stworzyć kolejną strony internetowe o nazwie strona4.htm i strona5.htm. W części zasadniczej tych stron umieścić tekst który widać poniżej. Wykorzystując znaczniki formatowania czcionek sformatować wygląd tych stron do widocznej poniżej postaci. strona4.htm strona5.htm Lublin, dn. ................................... Imię i nazwisko Adres Jan Nowak 32-700 Bochnia ul. Papierowa 73 tel. (14) 611 22 445 tel.kom. 0 606 912 476 Dział rekrutacji Firmy Y ŻYCIORYS Urodziłem się 18. grudnia 1987 r. w Londynie, mam młodszą siostrę, Martę. Mój ojciec pracuje w sektorze handlowym, a matka jest prawnikiem. Od 1994 uczęszczałem do Szkoły Podstawowej nr 1 w Brzesku. Szkołę ukończyłem w 2000 r. ze średnią ocen na świadectwie 4,85. Obecnie uczę się w Państwowym Wyższym Gimnazjum Naukowym Lotników Śląskich nr 1 w Tarnowie Małym, dodatkowo uczęszczam do prywatnej szkoły języka angielskiego i chińskiego. Interesuje się sztuką i komputerami. Jan Nowak Szanowni Państwo, Obserwując dynamiczny rozwój Państwa firmy na terenie Polski, a w szczególności Świdnika oraz wysoką jakość obsługi klientów przez pracowników .......... jestem przekonana, że chciałabym pracować w Państwa renomowanej firmie. W związku z czym pozwolę sobie przedstawić poniżej moją kandydaturę. Jestem młodą, ambitną osobą, która do pracy podchodzi z dużym entuzjazmem i zaangażowaniem. Mam pogodne usposobienie i z łatwością nawiązuję kontakt z ludźmi. Moje dotychczasowe doświadczenia zawodowe wiążą się z obsługą klientów, co wymaga ode mnie komunikatywności i wysokiej kultury osobistej. Dodatkowymi moimi atutami, które jak sądzę, wpływają na wysoką wydajność mojej pracy są odpowiedzialność i samodzielność, a także sumienność i uczciwość. Z góry dziękuję za rozważenie mojej kandydatury w momencie, gdy będziecie Państwo poszukiwać pracowników. Mając nadzieję na współpracę, oczekuję pomyślnej odpowiedzi od Państwa. Dołączam mój życiorys, w którym szczegółowo przedstawiam moje doświadczenie zawodowe, umiejętności oraz wykształcenie. Z poważaniem Zadanie 6. Wykorzystując edytor stworzyć stronę internetową strona6.htm. Z Internetu, z zasobów komputera lub z własnych zdjęć należy stworzyć galerię prezentującą dowolną sylwetkę i jej otoczenie. Obiekty graficzne sformatować zgodnie z podanym założeniem, opisać. Do głównej fotografii dodać łącze do poczty email. Obrazki w dolnej linii mają być tych samych wymiarów. Zastosować linie poziome. strona6.htm ------------------------------------------------------------------------------------ to mój psiak to mój domek ------------------------------------------------------------------------------------ Zadanie 7. Wykorzystując edytor stworzyć stronę internetową strona7.htm. Kolor tła strony ustawić na żółty. Na środku strony utworzyć tabelkę: 5 kolumn, 8 wierszy. Tekst w komórkach wyśrodkowany, nagłówki kolumn pogrubione. Kolor krawędzi ciemnozielony. kwalifikacje start koniec Data wygaśniecia uwagi Szkoła podstawowa 1988 1995 - SP 26 w Lublinie Szkoła średnia 1995 2005 - LO 23 w Dęblinie Kurs prawa jazdy 2008 2012 Kat. B C D F H J K Kurs spawacza 2008 2020 Spaw. migomatem Szkoła wyższa Uprawnienia pielęgniarza 2000 Zawodowy leń 1988 Kurs drugiej pomocy - - Papiery kupione Zadanie 8. Wykorzystując edytor stworzyć stronę internetową strona8.htm. Na stronie umieścić 5 linków (jeden pod drugim), które mają się odnosić do stron: www.pollub.pl, strona3.htm, strona4.htm, strona5.htm oraz email na swoje konto. Zadanie 9. Wykorzystując edytor stworzyć układ ramkowy. Strona zarządzająca index.html. Strona nawigacyjna strona8.htm. Plik index.html zarządza trzema ramkami w zadanej konfiguracji: Nazwa ramki = spis Załadować plik strona8.htm. Wyłączyć margines i przewijanie. Wyłączyć możliwość zmiany szerokości okna. Utworzyć linki: Nazwa ramki = baner. Załadować plik strona6.htm. Wyłączyć margines i przewijanie. Nazwa ramki =okno Załadować plik strona4.htm. 77 % Wyłączyć margines, przewijanie automatyczne. o mnie list motywacyjny foto muzyka wykształcenie email 200pikseli Zmodyfikować w pliku strona8.htm linki które będą ładowały utworzone wcześniej strony do okna o nazwie okno (strona3.htm, strona4.htm, strona5.htm....) . ------------------------------------------------------------------------------- PODPOWIEDZI DO WSZYSTKICH ZADAŃ Atrybuty znacznika BODY: bgcolor="kolor" – kolor tła link="kolor" – kolor linków Muzyka <BGSOUND> background="ścieżka dostępu" – obrazek tła text="kolor" – kolor tekstu vlink="kolor" – kolor odwiedzonych linków alink="kolor" – aktywnych linków atrybuty tego znacznika to: LOOP=(ilość powtórzeń), SRC=(ścieżka do pliku muzycznego) Pogrubienie: <B> ... </B>, Kursywa: <I> ... </I>, Powiększenie czcionki (o 2 punkty): <BIG> ... </BIG>, Pomniejszenie czcionki: <SMALL> ... </SMALL>, Indeks górny: <SUP> ... </SUP>, Indeks dolny: <SUB> ... </SUB>. Czcionka stałej szerokości: <TT> ... </TT> Przekreślenie: <STRIKE> ... </STRIKE> (Deprecated) Podkreślenie: <U> ... </U> (Deprecated) wyróżnienie: <EM> ... </EM>, mocne wyróżnienie: <STRONG> ... </STRONG>, UL – nienumerowane (Unordered Lists) type="disc" | "circle" | "square" compact – większy stopień upakowania OL – nienumerowane (Ordered Lists) type="1" | "A" | "a" | "i" | "I" Linki skróty (np. WWW, HTTP, URL, …): <ABBR> ... </ABBR>, FONT – ustawia czcionkę - size = " " color= "" face =" " <H1>To jest tytuł pierwszego stopnia </H1> <H2>To jest tytuł drugiego stopnia </H2> adres: <ADRESS> ... </ADRESS> preformatowany fragment tekstu: <PRE> ... </PRE> złamanie linii: <BR> Akapit: <P> akapit </P> Linie poziome: <HR> SIZE WIDTH NOSHADE ALIGN color Wyrównywanie: opcja ALIGN w znacznikach <P>, <H..>... LEFT, CENTER, RIGHT, JUSTIFY LI – element listy (List Item) type=odpowiednio do UL lub OL value="30" – numer elementu listy compact – większy stopień upakowania Lista definicji: DL – definition list DT – definition type DD – definition data <A HREF="adres docelowy">opis odsyłacza</A> <A href="dokument.html#kotwica">Kotwica</A> <A href="mailto: [email protected]”>email</A> Obramowanie:<FIELDSET>...</FIELDSET> <LEGEND> nazwa obramowania </LEGEND> Umieszczanie grafiki: <IMG SRC=(ścieżka)nazwa_pliku.jpg> Parametry znacznika IMG: src="URL" – źródło obrazka, alt="tekst" – krótki opis obrazka, tekst alternatywny name="nazwa" – nazwa obrazka, height="wys" – wysokość, width="szer" – szerokość, <IMG SRC=obrazek.gif WIDTH="piksele lub procenty" HIGHT="piksele lub procenty"> Align="RIGHT,TOP, MIDDLE, LEFT," określanie pozycji BORDER (w pikselach, kolor taki jak kolor tekstu) <IMG SRC=obrazek.jpg BORDER=25> Parametr HSPACE i VSPACE (w pikselach) <IMG SRC=obrazek.gif HSPACE=30 VSPACE=40> Grafika może być odsyłaczem <A HREF=plik.htm><IMG SRC=obrazek.jpg></A>. PLIK ZARZĄDZAJĄCY RAMKAMI <HTML> <HEAD> <TITLE> Strona z ramkami </TITLE> </HEAD> <FRAMESET COLS=175,*> <FRAME SRC=strona8.htm NAME="spis"> <FRAMESET ROWS=75,*> <FRAME SRC=strona6.htm NAME="baner"> <FRAME SRC=strona4.htm NAME="okno"> </FRAMESET> </FRAMESET> </HTML> <FRAMESET COLS=25%,75%>, dzielenie pionowe <FRAMESET ROWS=100,250,*> dzielenie poziome Znacznik: <FRAME></FRAME> przypisuje ramce nazwę (parametr NAME):<FRAME NAME=okno> <FRAME NAME=spis SRC=pasek.html> Aby wyświetlać zawartość odsyłaczy w poszczególnych ramkach należy to zadeklarować w znaczniku TARGET <A HREF="nazwa.htm" TARGET="nazwa_ramki"> przyjmuje również predefiniowane wartości: _blank lub _self lub _parent lub _top ATRYBUTY FRAME FRAMEBORDER="wartość" - obramowanie, parametr ma wartości: "yes" lub ”1” "no" - "0” Dla IE FRAMESPACING=0 MARGINWIDTH="wartość" - parametr ustala margines MARGINHEIGHT="wartość" - parametr ustala margines <FRAME NORESIZE> - parametr niezezwala na zmianę szerokości lub wysokości ramki. <FRAME SCROLLING="wartość" - ”yes” – ”no” – ”auto” <BORDERCOLOR="#rrggbb" - określa kolor obramowania.
