I. Formatowanie tekstu i wygląd strony

Wielkość: px

Rozpocząć pokaz od strony:

Download "I. Formatowanie tekstu i wygląd strony"

Bogdan Szymczak
8 lat temu
Przeglądów:

1 I. Formatowanie tekstu i wygląd strony Akapit: ... aby wyrównać tekst do lewego marginesu aby wyrównać tekst do prawego marginesu: aby wycentrować tekst: aby wyrównać tekst do obu marginesów: Przejście do nowego wiersza: Pogrubienie: ... Pochylenie: ... Podkreślenie: ... Przekreślenie: <strike>...</strike> Indeks górny: ... Indeks dolny: ... Znaki specjalne: spacja nierozdzielająca & & " < < > > 1 S t r o n a

<p style="text-a1ign: center;"> aby wycentrować tekst: <p style="text-align: justify;"> aby wyrównać tekst do obu marginesów: Przejście do nowego

2 II. Kolor tekstu, kolor strony i akapitu .. - zdefiniowane kolory dla akapitu (niebieski tekst na czerwnym tle); <body style="color: #ffffff; background-color: # > - zdefiniowano kolory dla całej strony (biały tekst na czarnym tle) ... - zmiana koloru fragmentu akapitu, pojedynczego wyrazu lub nawet litery. Zadanie 1.1: kolory Należy przy pomocy poznanych poleceń języka XHTML odtworzyć stronę WWW pokazaną na ilustracji. 2 S t r o n a

- zdefiniowano kolory dla całej strony (biały tekst na czarnym tle) <span style= color: green;>.

3 III. Krój pisma Przy wyborze kroju pisma masz do dyspozycji wszystkie kroje zainstalowane na Twoim komputerze. Pamiętaj jednak, że inni użytkownicy wcale nie muszą nimi dysponować! Z tego powodu powinieneś ograniczać się c standardowych rodzin krojów pisma: serif czcionka szeryf owa, np. Times New Roman, sans-serif czcionka bezszeryfowa, np. Arial, cursive oraz fantasy ozdobne czcionki pochyłe (rzadko używane, gdyż każda przeglądarka może podstawić w ich miejsce całkowicie inne kroje pisma często w ogóle nieprzystające do zamysłu autora strony), mono czcionka nieproporcjonalna (o stałej szerokości wszystkich znaków) używana najczęściej do zapisywania tekstu programów komputerowych, tworzenia prymitywnych tabel lub wyróżniania poleceń programów; np. Courier New. Wyboru kroju pisma dokonuje się za pomocą atrybutu stylu o nazwie font-family: font-family: times new roman, serif; / font Times New Roman, jeżeli nie jest dostępny to inna czcionka szeryfowa/ Z kolei rozmiar czcionki możesz określić za pomocą atrybutu stylu font-size: font-size: llpt; Tekst preformatowany (spacje i końce linii mają znaczenie) <pre>...</pre> Tekst pisany czcionką o stałej szerokości (tekst maszynowy) <tt>...</tt> Marginesy akapitów ... /gdzie wartości oznaczają margin: górny prawy dolny lewy;/ 3 S t r o n a

Arial, cursive oraz fantasy ozdobne czcionki pochyłe (rzadko używane, gdyż każda przeglądarka może podstawić w ich miejsce całkowicie inne kroje pisma często w ogóle nieprzystające do zamysłu autora

4 IV. Definiowanie odnośników Odnośnik do innego dokumentu: <a href="url_dokumentu.html">0dnośnik</a> Odnośnik do innej strony WWW <a href=" Helion</a> /domyślnie wczytywany jest index.html Odnośnik do podstrony <a href=" Artura Bartoszewskiego</a> <a href=" ">Dobreprogramy.pl</a> odnośnik do pliku <a href=" Odnośnik pocztowy <a do mnie list</a> Odnośnik wmontowany w akapit Uwaga: Struktura adresu URL zgodna jest z formatami systemu UNIX. Oznacza to, że wszystkie nazwy i ścieżki dostępu są czułe na wielkość znaku (za wyjątkiem nazw komputerów i adresów ). Aby utworzyć odnośnik do pliku w katalogu podrzędnym bieżącego pliku, należy skorzystać z prawego ukośnika, /, który umieszczany jest między nazwą katalogu a nazwą pliku. Oto przykład: Lista <a href="2005/wszystkie.html">moich publikacji wydanych w 2007r</a>. wyświetl <a href="dane.html">dodatkowe informacje</a> na ten temat. 4 S t r o n a

html">strona Artura Bartoszewskiego</a> <a href="http://dobreprogramy.pl/index.php?dz=15&n=9958&openoffice.org+3.0+juz+dostepny! ">Dobreprogramy.pl</a> odnośnik do pliku <a href="http://www.

5 UWAGA: [XHTML I CSS ĆWICZENIE 1] dr Artur Bartoszewski Nie można umieszczać elementów a w innych elementach a ani otaczać znacznikami <a></a> elementów blokowych. Jedynie elementy liniowe mogą zawierać się w elemencie <a>. Z tego powodu nie można zrobić odnośnikiem na przykład całego wiersza tabeli bez powtarzania a w każdej komórce. Rozwiązania praktyczne: Ścieżki powrotu Ścieżki powrotu są jednym z prostszych mechanizmów nawigacyjnych. Podobnie jak napis Jesteś tutaj", ścieżki powrotu pokazują Twoją aktualną pozycję w hierarchii witryny (czasem nawet zawierają słowa Jesteś tutaj"). Zadanie 1.2: Ścieżki powrotu W archiwum materialy_z07.zip znajdują się strony HTML wraz ze strukturą katalogów (pokaznom na rysunku). a) Wykonaj mechanizm nawigacji oparty o ścieżki powrotu z07 p1_01 p2_01 p2_02 5 S t r o n a

Rozwiązania praktyczne: Ścieżki powrotu Ścieżki powrotu są jednym z prostszych mechanizmów nawigacyjnych.

6 V. Definiowanie sposobu otwierania dokumentów [XHTML I CSS ĆWICZENIE 1] dr Artur Bartoszewski W języki HTML otwieranie dokumentów w nowym oknie wyglądało tak: <a href= dokument.html target= _blank >...</a> Atrybut target może przyjmować wartości: o _blank, o _parent, o _self (jest to wartość domyślna) o _top..jednak nie jest to metoda poprawna dla XHTML. Jak wygląda zapis poprawny w języku XHTML? Oto on: <a href="nowa_strona.htm" onclick="this.target='_blankl">otwórz w nowym oknie</a> Okno pop-up - czasem trzeba otworzyć małe okienko o określonej wielkości z krótką informacją, opisem czy ankietą. W takiej sytuacji można skorzystać ze zdarzeń JavaScript: <a href="#" onclick="window.open( nowa_strona.htm', 'Nowe_okno', 'height=150, width=200');">0twórz małe okienko</a> Zadanie 1.3: sposoby otwierania okien a) Stwórz stronę pokazaną na rysunku. Dodaj linki pozwalające na przejście do strony oraz linki otwierające bezpośrednio instrukcję do tego ćwiczenia (jeden z nich ma otwierać się w nowym oknie). b) Stwórz stronę popup.html która będzie wyświetlona w wyskakującym okienku. c) Stwórz link, który spowoduje pojawienie się okienka. 6 S t r o n a

Oto on: <a href="nowa_strona.htm" onclick="this.

Podobne dokumenty

[HTML I XHTML ĆWICZENIE 0] dr Artur Bartoszewski

[HTML I XHTML ĆWICZENIE 0] dr Artur Bartoszewski I. Znaczniki Jeśli wyświetlisz kod źródłowy strony WWW, zobaczysz, że zawiera on szereg poleceń języka HTML umieszczonych w nawiasach kątowych. Twory te noszą nazwę znaczników. Znaczniki informują przeglądarkę,