Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS



Podobne dokumenty
Laboratorium 1 (ZIP): Style

1.Formatowanie tekstu z użyciem stylów

Dziedziczenie. Dziedziczenie i kaskadowość. Dodał Administrator środa, 10 marzec :00. Tematy: Dziedziczenie Kaskadowość

Sylabus Moduł 2: Przetwarzanie tekstów

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści

Ćwiczenie 4 Konspekt numerowany

Zadanie 1. Stosowanie stylów

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.

Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony:

Dokument hipertekstowy

Rozwiązanie ćwiczenia 8a

KATEGORIA OBSZAR WIEDZY

Ćwiczenia nr 2. Edycja tekstu (Microsoft Word)

Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych

HTML (HyperText Markup Language) hipertekstowy język znaczników

Formatowanie tekstu przy uz yciu stylo w

SIECI KOMPUTEROWE I TECHNOLOGIE INTERNETOWE

ĆWICZENIE 1 SKŁAD TEKSTU DO DRUKU

STRONY INTERNETOWE mgr inż. Adrian Zapała

Zadaniem tego laboratorium będzie zaznajomienie się z podstawowymi możliwościami kompozycji strony i grafiki

Rozdział 5: Style tekstu

ECDL/ICDL Przetwarzanie tekstów Moduł B3 Sylabus - wersja 5.0

I. Formatowanie tekstu i wygląd strony

Scenariusz szkolenia

Przepis. Wstęp HTML & CSS. W tym projekcie nauczycie się, jak stworzyć stronę internetową ze swoim ulubionym przepisem. Zadania do wykonania

Formatowanie c.d. Wyświetlanie formatowania

Technologie Informacyjne Mechatronika 2010/2011 Style wersja: 7 z drobnymi modyfikacjami!

za pomocą: definiujemy:

Zaawansowana Pracownia Komputerowa - Ćwiczenia. Krzysztof Miernik

Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>

Witryny i aplikacje internetowe

Danuta ROZPŁOCH-NOWAKOWSKA Strona Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).

używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów

Technologie informacyjne. semestr I, studia niestacjonarne I stopnia Elektrotechnika rok akademicki 2013/2014 Pracownia nr 2 dr inż.

Edytor tekstu OpenOffice Writer Podstawy

WITRYNY I APLIKACJE INTERNETOWE

CSS. Kaskadowe Arkusze Stylów

Zadanie 8. Dołączanie obiektów

MS Word Długi dokument. Praca z długim dokumentem. Kinga Sorkowska

ECDL/ICDL Przetwarzanie tekstów Moduł B3 Sylabus - wersja 6.0

Pierwsza strona internetowa

Formatowanie dokumentu

LEGISLATOR. Data dokumentu:24 maja 2013 Wersja: 1.3 Autor: Paweł Jankowski, Piotr Jegorow

Tematy lekcji informatyki klasa 4a luty/marzec 2013

2 Podstawy tworzenia stron internetowych

Przypisy i przypisy końcowe

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp.

Jak posługiwać się edytorem treści

Programowanie WEB PODSTAWY HTML

Kaskadowe arkusze stylów (CSS)

1.5. Formatowanie dokumentu

Adobe InDesign lab. 2 Jacek Wiślicki, Paweł Kośla. Spis treści: 1 Dokument wielostronicowy Książka Eksport do PDF... 7.

p { color: yellow; font-weight:bold; }

Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2

Czcionki. Rodzina czcionki [font-family]

Temat 1. Więcej o opracowywaniu tekstu

Formatowanie komórek

Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty

Technologia Informacyjna. semestr I, studia niestacjonarne I stopnia Elektrotechnika rok akademicki 2012/2013 Pracownia nr 2 mgr inż.

Programowanie internetowe

HTML (HyperText Markup Language)

Edytor tekstu Microsoft Office 2007 przewodnik dla gimnazjalisty Autor: Dariusz Kwieciński nauczyciel ZPO w Sieciechowie

Dodawanie grafiki i obiektów

HTML jak zrobić prostą stronę www

1 TEMAT LEKCJI: 2 CELE LEKCJI: 3 METODY NAUCZANIA. Scenariusz lekcji. 2.1 Wiadomości: 2.2 Umiejętności: Scenariusz lekcji

Ćwiczenie 9 - CSS i wstawianie CSS

Tematy lekcji informatyki klasa 4a styczeń 2013

tutaj Poniższe makro nie zadziała dla pakietu Open lub Libre Office! O co chodzi?

Tworzenie szablonów użytkownika

Aplikacje WWW - laboratorium

Napisy w PHP. Drukowanie napisów instrukcją echo

Temat bardzo mądrego referatu maksymalnie na dwie linijki tekstu

Tworzenie Stron Internetowych. odcinek 5

INFORMATYKA KLASA IV

MS Word ćwiczenia praktyczne

Teraz bajty. Informatyka dla szkoły podstawowej. Klasa 4 Wymagania edukacyjne na poszczególne oceny szkolne dla klasy 4

SYSTEMY ZARZĄDZANIA TREŚCIĄ WORDPRESS

Z nowym bitem Zajęcia komputerowe dla szkoły podstawowej. Wymagania na poszczególne oceny szkolne dla klasy IV

Prezentacja MS PowerPoint 2010 PL.

Wymagania edukacyjne z informatyki dla klasy szóstej szkoły podstawowej.

Podstawowe zasady edytowania dokumentów w Szkole Podstawowej w Wietlinie

EGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2016 CZĘŚĆ PRAKTYCZNA

Krój czcionki można wybrać na wstążce w zakładce Narzędzia główne w grupie przycisków Cz cionka.

Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2}

Tworzenie i edycja dokumentów w aplikacji Word.

1. Dockbar, CMS + wyszukiwarka aplikacji Dodawanie portletów Widok zawartości stron... 3

Temat 10 : Poznajemy zasady pracy w edytorze tekstu Word.

PRACA MAGISTERSKA. Skoro Wordem klepie się tak dobrze, to po co się starać?

Teraz bajty. Informatyka dla szkoły podstawowej. Klasa IV

TABULATORY - DOKUMENTY BIUROWE

Podstawy informatyki

Nawigacja po długim dokumencie może być męcząca, dlatego warto poznać następujące skróty klawiszowe

Stawiamy pierwsze kroki

Źródła. cript/1.5/reference/ Ruby on Rails: AJAX: ssays/archives/

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

menu kontekstowe menu dostępne pod prawym klawiszem myszy, twarda spacja spacja nierozdzielająca (Ctrl + Shift + spacja).

Microsoft Office Word ćwiczenie 2

Rozwiązanie ćwiczenia 7a

Transkrypt:

Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS Cel ćwiczenia: zapoznanie się z pojęciem stylów w dokumentach. Umiejętność stosowania stylów do automatycznego przygotowania spisów treści. Tworzenie autamatycznych spisów ilustracji. Przygotowanie prostych dokumentów HTML i umiejętność stosowania arkuszy CSS. Zaliczenie: Realizacja zadań od 1 do 5. Wyniki w postaci plików po przedstawieniu na zajęciach należy spakować do postaci imię_nazwisko_numeralbumu.zip i przesłać prowadzącemu zajęcia. Wstęp Tworząc dokumenty tekstowe najczęściej korzystamy z pakietów biurowych OpenOffice lub Microsoft Office. Oba te narzędzia są na tyle wygodne w użyciu, że zwykle nie zadajemy sobie trudu poznania bardziej zaawansowanych możliwości tworzenia dokumentów tekstowych. Jeśli spodziewanym efektem końcowym jest wydruk kilkustronicowego dokumentu tekstowego (np. listu do cioci), to rzeczywiście korzystanie z zaawansowanych funkcji składu tekstu może mijać się z celem. Jeśli jednak struktura dokumentu jest bardziej skomplikowana, zawiera on rozdziały, podrozdziały, ilustracje i spisy treści, to warto poświęcić trochę czasu i wysiłku na wykonanie tego zadania inteligentniej niż na piechotę. Praktyczne zastosowania tych umiejętności to sprawozdania i praca dyplomowa. Praktyka kilku ostatnich lat pokazuje, że na ok. 200 dyplomantów tylko kilku potrafi posłużyć się zaawansowanym systemem składu tekstu LaTeX, a zaledwie dalszych kilkunastu radzi sobie z właściwym użyciem pakietów biurowych. Pisanie pracy dyplomowej to częste modyfikacje układu i treści pracy, liczne rysunki, przypisy próba wykonania tego zadania na piechotę zwykle oznacza stratę czasu. W przyszłości (2 rok) wrócimy na krótko do arkuszy CSS/CSS2 przy okazji poznawania języka XML oraz w trakcie omawiania pewnych mechanizmów dziedziczenia w programowaniu obiektowym. Politechnika Wrocławska 1

Zadanie 0. Zapoznanie się z pakietem OpenOffice [do 10 min.] Ci, którzy nie poslugiwali się jeszcze tym pakietem, powinni przejrzeć dostępne opcje dotyczące formatowania tekstu. [F11] wyświetla okienko dialogowe zawierające informacje o dostępnych w bieżącym dokumencie stylach. Style są podzielone na kategorie, z których interesuje nas dzisiaj Paragraph styles oraz Character styles. Style paragrafów dotyczą całych paragrafów, natomiast style znakowe odnoszą się do fragmentów tekstu wewnątrz paragrafu. Zadanie 1. Definicje stylów użytkownika [20 min.] Zdefiniuj następujące style w kategorii Custom Styles: Paragraph styles Lista Nagłówek1 Nagłówek2 Tekst Ponadto, o ile czas pozwoli, także następujące style: Character styles Nazwa pliku (przykład) Zwrot obcojęzyczny (przykład) List styles Lista1 Lista2 Plik ze zdefiniowanymi stylami nazwij lab1zad1.odt. Zadanie 2. Zastosowanie stylów w dokumencie [20 min.] Zastosuj style w przygotowanym przez siebie dokumencie. W dokumencie powinny znaleźć się przynajmniej jeden nagłówek poziomu pierwszego i dwa nagłówki poziomu 2 oraz kilka paragrafów tekstu. Sprawdź, w jaki sposób modyfikacja stylu wpływa na wygląd dokumentu (bez konieczności edytowania dokumentu). Przygotuj automatyczny spis treści. W tym celu w w dokumencie powinny wystąpić nagłówki z konsekwentnie używanymi stylami. Przykładowo: Politechnika Wrocławska 2

Rys. 1: Nagłówek poziomu 1. Rys. 2: Nagłówek poziomu 2 Tak zdefiniowane style pozwalają na utworzenie przykładowego spisu treści w następujący sposób: Rys. 3: Wstawianie automatycznego spisu treści Rys. 4: Przykładowe parametry pozwalające na utworzenie spisu treści na podstawie wybranych stylów. Politechnika Wrocławska 3

Rys. 5: Określanie, które style mają być użyte do tworzenia spisu, jaka jest ich hierarchia oraz w jaki sposób mają być tworzone wcięcia. Plik wynikowy nazwij lab1zad2.odt. Zadanie 3. Modyfikacja stylów [10 min.] Zmień kolory nagłówków poziomu 1 na zielone, a nagłówków poziomu 2 na niebieskie. Niech wszystkie nagłówki poziomu 2 będą pisane kursywą. Dla wszystkich standardowych paragrafów w tym dokumencie ustal wielkość wcięcia akapitowego na 2 cm. Wszystkie zwroty obcojęzyczne mają być pogrubione zamiast pochylone. Plik wynikowy nazwij lab1zad3.odt. Arkusze stylów CSS/CSS2 w języku HTML Dokładniej można się przyjrzeć działaniu arkuszy stylów próbując stworzyć prostą stronę WWW (dokument HTML). Istnieje wiele gotowych edytorów działąjących w trybie WYSIWYG (What You See Is What You Get), polega to na tym, że dokument HTML edytujemy tak jak zwykły dokument Office/OO. Edytory te ukrywają przed użytkownikiem techniczną stronę języka HTML, czyli tzw. znaczniki. Przyjrzyjmy się, jak w języku HTML moglibyśmy zapisać powyższy fragment tekstu: <H2>Arkusze stylów CSS/CSS2 w języku HTML</H2> <P>Dokładniej można się przyjrzeć działaniu arkuszy stylów próbując stworzyć prostą stronę WWW (dokument HTML). Istnieje wiele gotowych edytorów działąjących w trybie WYSIWYG (What You See Is What You Get), polega to na tym, że dokument HTML edytujemy tak jak zwykły dokument Office/OO. Edytory te ukrywają przed użytkownikiem techniczną stronę języka HTML, czyli tzw. znaczniki.</p> <P>Przyjrzyjmy się, jak w języku HTML moglibyśmy zapisać powyższy fragment tekstu:</p> Politechnika Wrocławska 4

Znaczniki <H1>, <H2>,..., <H6> określają poziom nagłówka. Znacznik <P> służy do określania paragrafów w dokumencie. Znaczniki <I>, <B>, <U> dawniej służyły do ustalania atrybutów tekstu takich jak kursywa, pogrubienie czy podkreślenie. Obecnie nie jest zalecane ich stosowanie, ponieważ zostały zastąpione przez nowsze rozwiązania. Istnieje wiele innych znaczników, z których potrzebne nam będą jeszcze <HTML>, <HEAD>, <BODY>. Zamknięcia znacznika dokonuje się poprzez dodanie ukośnika (/) przed jego nazwą, np.: </BODY> <HTML> <HEAD> <TITLE>Tytuł strony</title> </HEAD> <BODY> <H1>Nagłówek (np. tytuł)</h1> <P>Paragraf, a w nim zwykła treść.</p> </BODY> </HTML> Charakterystyczne jest zagnieżdżanie znaczników, np. wewnątrz <BODY> mamy dwa znaczniki: <H1> oraz <P>. Nie wszystkie znaczniki można zagnieżdżać, są też znaczniki które w ogóle nie posiadają części zamykającej (np. <BR>, znacznik złamania wiersza). Powyższy fragment kodu można wkleić do dowolnego edytora tekstowego (wystarczy zwykły Notatnik) i zapisać pod nazwą z rozszerzeniem *.html. Taki plik mógłby zostać zinterpretowany przez przeglądarki WWW następująco: Rys. 6: Różnice w interpretacji identycznego pliku HTML w różnych przeglądarkach Politechnika Wrocławska 5

Widoczne są różnice polegające przede wszystkim na interpretacji znaków diakrytycznych. Poprawiony dokument będzie wyglądał następująco: <HTML> <HEAD> <TITLE>Tytuł strony</title> <META http-equiv=content-type content="text/html; charset=windows-1250"> </HEAD> <BODY> <H1>Nagłówek (np. tytuł)</h1> <P>Paragraf, a w nim zwykła treść.</p> </BODY> </HTML> Użycie zestawu znaków Windows-1250 zamiast ISO-8859-2 nie jest zbyt eleganckim rozwiązaniem, ale pozwoli nam bez problemu edytować stronę zawierającą polskie znaki diakrytyczne nawet w tak prostym narzędziu jak Notatnik. Załóżmy że nasz serwis internetowy zawiera nie jedną, lecz kilkadziesiąt podobnych stron oraz że każda strona składa się z kilku-kilkunastu nagłówków różnych poziomów. Chcemy, aby cały serwis wyglądał jednolicie, np. aby nagłówki pierwszego poziomu były czerwone. Dawniej należałoby użyć zapisu: <H1><FONT color= red >Nagłówek (np. tytuł)</font></h1> Komplikacje zaczynały się, gdy zaszła potrzeba zmiany koloru czerwonego np. na niebieski modyfikacje musiały być przeprowadzone w setkach lub nawet tysiącach miejsc. Współcześnie oddziela się treść strony od jej wyglądu. Za wygląd stron odpowiada najczęściej osobny plik, tzw. arkusz stylu CSS (Cascading Style Sheet). Można też arkusz CSS umieścić wewnątrz dokumentu HTML. Przed dodaniem informacji o stylach dokument o poniższej treści: <HTML> <HEAD> <TITLE>Tytuł strony</title> <META http-equiv=content-type content="text/html; charset=windows-1250"> </HEAD> <BODY> <H1>Nagłówek 1</H1> <P>Treść paragrafu treść paragrafu treść paragrafu treść paragrafu.</p> <H2>Nagłówek 2</H2> <H2>Nagłówek 2</H2> <P>Treść paragrafu treść paragrafu treść paragrafu treść paragrafu.</p> </BODY> </HTML> jest interpretowany następująco: Politechnika Wrocławska 6

Rys. 8: Zmiana atrybutów <H1> za pomocą znacznika <FONT color="red"> Rys. 7: Interpretacja przykładowego dokumentu HTML bez arkusza CSS Następnie modyfikujemy plik HTML dodając znacznik <STYLE>: <HTML> <HEAD> <TITLE>Tytuł strony</title> <META http-equiv=content-type content="text/html; charset=windows-1250"> <STYLE> H1 { color: red; font-family: Tahoma; font-weight: bold; } </STYLE> </HEAD> <BODY> <H1>Nagłówek 1</H1> <P>Treść paragrafu treść paragrafu treść paragrafu treść paragrafu.</p> <H2>Nagłówek 2</H2> <H2>Nagłówek 2</H2> <P>Treść paragrafu treść paragrafu treść paragrafu treść paragrafu.</p> </BODY> </HTML> Po wyświetleniu tak zmodyfikowanego dokumentu w przeglądarce internetowej powinniśmy uzyskać poniższy efekt: Politechnika Wrocławska 7

Rys. 9: Ten sam dokument HTML po dodaniu arkusza stylów Zadanie 4. Modyfikacja istniejącego arkusza stylu [5 min.] Utwórz na podstawie podanych powyżej kodów źródłowych plik o nazwie lab1zad4.html. Zmodyfikuj arkusz stylów tak, aby nagłówki pierwszego poziomu były zielone, a nagłówki drugiego poziomu żółte. Niech wszystkie domyślne paragrafy (<P>) w dokumencie będą zapisane kursywą i czcionką wielkości 10pt. Zapis 'pt' to punkty, nie mylić z pikselami ('px'). Zadanie 5. Tworzenie własnego pliku HTML z arkuszem CSS [20 min.] Dwa akapity tej instrukcji przygotuj w postaci dokumentu HTML. W dokumencie powinny znaleźć się przynajmniej jeden nagłówek poziomu pierwszego i dwa nagłówki poziomu 2 oraz kilka paragrafów tekstu. <STYLE>). Do tak przygotowanego dokumentu HTML dodaj definicję stylów (znacznik Zachowaj kolorystykę i typografię używaną w tej instrukcji. W jaki sposób w języku HTML określamy kolory inne niż kolory podstawowe? Jak zdefiniować wcięcie akapitowe (wcięcie pierwszego wiersza)? Jak ustawić interlinię (odstępy między wierszami w akapicie) na 1, 1.5, 2? W jaki sposób można umieścić arkusz CSS poza dokumentem HTML (tak, aby ten Politechnika Wrocławska 8

sam arkusz CSS mógł być używany w wielu plikach HTML)? Plik wynikowy nazwij lab1zad5.html., ew. dodatkowo dołącz plik lab1zad5.css. Spis rysunków Rys. 1: Nagłówek poziomu 1... 2 Rys. 2: Nagłówek poziomu 2... 2 Rys. 3: Wstawianie automatycznego spisu treści... 3 Rys. 4: Przykładowe parametry pozwalające na utworzenie spisu treści na podstawie wybranych stylów... 3 Rys. 5: Określanie, które style mają być użyte do tworzenia spisu, jaka jest ich hierarchia oraz w jaki sposób mają być tworzone wcięcia... 4 Rys. 6: Różnice w interpretacji identycznego pliku HTML w różnych przeglądarkach... 5 Rys. 7: Interpretacja przykładowego dokumentu HTML bez arkusza CSS... 7 Rys. 8: Zmiana atrybutów <H1> za pomocą znacznika <FONT color="red">... 7 Rys. 9: Ten sam dokument HTML po dodaniu arkusza stylów...8 Spis treści Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS...1 Wstęp...1 Zadanie 0. Zapoznanie się z pakietem OpenOffice [do 10 min.]...1 Zadanie 1. Definicje stylów użytkownika [20 min.]... 2 Zadanie 2. Zastosowanie stylów w dokumencie [20 min.]... 2 Zadanie 3. Modyfikacja stylów [10 min.]... 4 Arkusze stylów CSS/CSS2 w języku HTML... 4 Zadanie 4. Modyfikacja istniejącego arkusza stylu [5 min.]... 8 Zadanie 5. Tworzenie własnego pliku HTML z arkuszem CSS [20 min.]... 8 Politechnika Wrocławska 9