Aplikacje internetowe
|
|
- Bartosz Zakrzewski
- 7 lat temu
- Przeglądów:
Transkrypt
1 Laboratorium 1 ZAKŁAD SYSTEMÓW ROZPROSZONYCH LABORATORIUM Aplikacje internetowe Powtórzenie - język HTML TWORZENIE STRUKTURY DOKUMENTU HTML 1. Utwórz strukturę dokumentu. Nadaj tytuł dokumentu. Zadanie wykonaj w notatniku. Program1.html <HTML> <HEAD> <TITLE> Moja pierwsza strona WWW </TITLE> </HEAD> <BODY> Tutaj wpisujemy tekst który chcemy widzieć na stronie WWW </BODY> </HTML> W dowolnej przeglądarce sprawdź działanie strony. 2. Wstaw informację o autorze dokumentu dopisując w nagłówku poniższą linię <META NAME="Author" CONTENT="Jan Kowalski"> ATRYBUTY SEKCJI BODY W nagłówku tej sekcji, tzn. obok słowa kluczowego BODY, można umieszczać dodatkowe znaczniki służące do ustalania atrybutów dokumentu, takich jak kolor tekstu, tła, odsyłaczy, itp. Poniższa tabela prezentuje te znaczniki: Znacznik TEXT=kolor Opis Określa domyślny kolor tekstu na stronie HTML Zakład Systemów Rozproszonych - 1 / 20
2 BGCOLOR=kolor LINK=kolor VLINK=kolor ALINK=kolor BACKGROUND= adres_pliku_obrazka TOPMARGIN="n" LEFTMARGIN="n" Określa domyślny kolor tła strony HTML Określa domyślny kolor odsyłaczy hipertekstowych do stron jeszcze nie odwiedzanych (ang. Hyperlink) Określa domyślny kolor odsyłaczy hipertekstowych do stron już odwiedzonych (ang. Visited Hyperlink) Określa domyślny kolor odsyłaczy hipertekstowych w momencie ich wciśnięcia (ang. Active Hyperlink) Ustawia wybrany obrazek jako tapetę, tzn. wypełnia nim tło strony. Jeśli obrazek jest mniejszy od strony, wtedy jest powielany i drukowany wielokrotnie, aż do całkowitego wypełnienia strony. Ustawia górny margines strony na n pikseli (punktów na ekranie) Podobnie, ale dla lewego marginesu STYLESRC=adres_innej_strony Kopiuje powyższe ustawienia z podanej strony Zadanie Uzupełnij pole BODY w taki sposób aby nadać stronie odpowiednie tło np. czerwone <BODY TEXT="#000000" BGCOLOR="#Cc0000" LINK="#FF0000" VLINK="#551A8B" ALINK="#FFFF00"> FORMATOWANIE TEKSTU Znaczniki formatowania tekstu Znaczniki formatowania tekstu używa się w standardowy dla HTML-u sposób, tzn. <XXX>tekst+inne znaczniki</xxx> gdzie XXX jest identyfikatorem znacznika. Wszystkie te znaczniki prezentuje poniższa tabela: Znacznik Typ formatowania Działanie <EM>..</EM> Logiczny <STRONG>..</STRONG> Logiczny Zakład Systemów Rozproszonych - 2 / 20 Powoduje średnie wyróżnienie tekstu. Z reguły (np. na Windows) powoduje on pochylenie tekstu. Powoduje mocne wyróżnienie tekstu. Z reguły (np. na Windows) powoduje on pogrubienie tekstu. <I>..</I> Fizyczny Powoduje pochylenie tekstu (Italic). <B>..</B> Fizyczny Powoduje pogrubienie tekstu (Bold). <CITE>..</CITE> <DFN>..</DFN> <SAMP>..</SAMP> Logiczny Logiczny Logiczny Działa różnie. Z reguły (np. na Windows) powoduje on pochylenie tekstu (Citation). Działa różnie. Z reguły (np. na Windows) powoduje on pochylenie tekstu (Definition). Działa różnie. Z reguły (np. na Windows) powoduje on wypisanie tekstu czcionką o stałej szerokości (Sample).
3 <CODE>..</CODE> <VAR>..</VAR> <KBD>..</KBD> <TT>..</TT> Logiczny Logiczny Logiczny Fizyczny Działa różnie. Z reguły (np. na Windows) powoduje on wypisanie tekstu czcionką o stałej szerokości (Code). Działa różnie. Z reguły (np. na Windows) powoduje on wypisanie tekstu czcionką o stałej szerokości (Variable). Działa różnie. Z reguły (np. na Windows) powoduje on wypisanie tekstu czcionką o stałej szerokości (Keyboard). Powoduje on wypisanie tekstu czcionką o stałej szerokości (Typewriter). Jest on najczęściej używanym znacznikiem do wyprowadzania tekstów taką czcionką. <STRIKE>..</STRIKE> Fizyczny Powoduje on "skreślenie" tekstu (Strikethrough). <U>..</U> Fizyczny Powoduje podkreślenie tekstu (Underline). <SUP>..</SUP> Fizyczny Powoduje wypisanie tekstu jako indeks górny (Superscript). <SUB>..</SUB> Fizyczny Powoduje wypisanie tekstu jako indeks dolny (Subscript). <FONT SIZE="n">..</FONT> Logiczny <FONT COLOR=kolor> Fizyczny..</FONT> <BASEFONT SIZE="n"> <BASEFONT COLOR=kolor> <BIG>..</BIG> Logiczny fizyczny Logiczny Ustawia rozmiar czcionki w wybranym tekście na wartość n z przedziału 1-7. Liczba n jest logiczną wielkością czcionki, tzn. jednej wartości n mogą odpowiadać różne wielkości rzeczywiste czcionki na różnych przeglądarkach. Ważne jest tylko to, że czcionka o wielkości 1 jest najmniejsza, 2 trochę większa, itd. aż do 7 (gigant). Wartością domyślną jest 3. Można stosować razem ze znacznikiem COLOR. Ustawia kolor czcionki w wybranym tekście na "kolor". Można stosować razem za znacznikiem. Działa tak jak znacznik FONT, ale ustawia atrybuty domyślne tekstu w obszarze od miejsca wystąpienia do końca strony lub wystąpienia innego BASEFONT. Nie używa się tu znacznika kończącego. Również tak jak w przypadku FONT można oba atrybuty używać razem. Powoduje zwiększenie o jeden wielkości czcionki (patrz FONT SIZE). Zadanie Wpisz do strony dowolny tekst oraz sformatuj go wykorzystując do tego zmianę czcionki, używając różnych stylów, zmieniając rozmiar czcionki (całego tekstu oraz tylko fragmentu), zmieniając kolor tekstu, używając indeksów dolnych i górnych. Przykład <FONT SIZE=12 FACE="Verdana" COLOR=#22a4d6> Tutaj wpisujemy tekst ktory chcemy widziec na stronie WWW </FONT> Zakład Systemów Rozproszonych - 3 / 20
4 Zadanie Korzystając z tabeli wpisz zmodyfikuj swoją stronę WWW tak aby uzyskać dodatkowo na stronie WWW poniższy tekst: Czcionka pochylona Czcionka pogrubiona Czcionka o stałej szerokości (każda litera i znak ma tę samą szerokość). Dobra przy robieniu tekstowych tabelek. Tekst skreślony Tekst podkreślony a to jest indeks górny To jest tekst normalny To jest tekst normalny a to jest indeks dolny To jest czcionka o rozmiarze 5 (SIZE="5") Grafika Jedną z głównych zalet dokumentów HTML jest możliwość ozdobienia i urozmaicenia stron WWW za pomocą obrazków. W tym celu wykorzystuje się pliki graficzne w formatach GIF oraz JPG. Dzięki obrazkom strony WWW zyskują na atrakcyjności, a przekazywana informacja jest bardziej zrozumiała. Obrazki wstawia się do dokumentu HTML za pomocą komendy: <IMG SRC="plik_graficzny"> gdzie plik_graficzny oznacza nazwę (lub pełną ścieżkę dostępu URL i nazwę) pliku graficznego, który chcemy wyświetlić. Przykłady: <IMG SRC="obrazek.jpg"> <IMG SRC="../pictures/eagle.gif"> <IMG SRC=" Dodatkowe polecenia: ALIGN- Polecenie to służy do ustalenia położenia i sposobu oblewania obrazka przez tekst. Możliwymi wartościami tej opcji są: ALIGN= "left" "right" "top" "middle" "bottom" Np. <IMG SRC="mirror.jpg" ALIGN="left"> <IMG SRC="mirror.jpg" ALIGN="middle"> <IMG SRC="mirror.jpg" ALIGN="bottom"> Zakład Systemów Rozproszonych - 4 / 20
5 BORDER - Opcja ta służy do określenia szerokości obramowania obrazka w punktach. Składnia tej opcji jest następująca: <IMG SRC="micro.jpg" BORDER=0> <IMG SRC="micro.jpg" BORDER=7> WIDTH oraz HEIGHT - Parametr WIDTH określa, jaką szerokość (w punktach) ma mieć wyświetlany obrazek. Parametr HEIGHT określa, jaką wysokość (w punktach) ma mieć obrazek. W przypadku obrazka o innym wymiarze, jest on automatycznie przeskalowywany. Uwaga: Gdy podano tylko jeden z tych parametrów, przeskalowywanie odbywa się z uwzględnieniem proporcji obrazka. Jeśli podano oba parametry na raz, obrazek jest odpowiednio deformowany tak, by miał żądane wielkości. WIDTH=liczba HEIGHT=liczba Np. <IMG SRC="micro.jpg" WIDTH=100> <IMG SRC="micro.jpg" HEIGHT=35> <IMG SRC="micro.jpg" WIDTH=200 HEIGHT=35> HSPACE - Opcja ta określa wielkość (w punktach) odstępu w poziomie pomiędzy obrazkiem a innymi elementami dokumentu (np. tekstem albo innym obrazkiem). Wartością parametru jest liczba: HSPACE=liczba Np. <IMG SRC="palace.jpg" HSPACE=0> <IMG SRC="palace.jpg" HSPACE=20> VSPACE - Opcja ta określa wielkość (w punktach) odstępu w pionie pomiędzy obrazkiem a innymi elementami dokumentu (np. tekstem albo innym obrazkiem). Wartością parametru jest liczba: VSPACE=liczba Np. <IMG SRC="palace.jpg" HSPACE=0> <IMG SRC="palace.jpg" HSPACE=20> ALT - Parametr ten określa alternatywny opis obrazka, używany zazwyczaj wtedy, gdy nie można wyświetlić samego obrazka, lub gdy chcemy dodatkowo go opisać. ALT="tekst" Przykładowa pełna linijka opisująca jakiś rysunek w dokumencie HTML może mieć postać: <IMG SRC="picture.jpg" ALIGN="left" BORDER=1 WIDTH=320 HEIGHT=240 HSPACE=5 VSPACE=3 ALT="To jest opis obrazka"> Zakład Systemów Rozproszonych - 5 / 20
6 Zadanie Wstaw do swojej strony dowolny rysunek. Sformatuj go używając powyższych funkcji. ODSYŁACZE HIPERTEKSTOWE Do wszelkiego rodzaju operacji na odsyłaczach służy w HTML-u znacznik <A>..</A> i jego atrybuty. Znacznik <A>..</A> może być wstawiany w dowolne miejsce nawet w środku akapitów, list, itd. Przypomnienie: Kolor tekstu odsyłacza określa się w sekcji BODY. Tworzenie połączeń Jeśli chcesz stworzyć na swojej stronie odsyłacz do innej strony, to użyj do tego atrybutu HREF. Wtedy znacznik <A> będzie miał następującą postać: <A HREF="adres_url">tekst odsyłający</a> gdzie adres_url jest poprawnie wprowadzonym adresem docelowej strony WWW łącznie z katalogami i nazwą pliku strony (jeśli pominiesz nazwę pliku strony, wtedy serwer będzie poszukiwał strony domyślnej w danym katalogu, która najczęściej ma nazwę "index.html". W przypadku braku takiej strony lub w przypadku błędnego podania nazwy strony serwer odeśle komunikat o błędzie); tekst odsyłający to ten napis, po kliknięciu którego użytkownik będzie mógł się przenieść do strony o adresie adres_url. Połączenia wykorzystujące odnośniki Jeśli chcesz robić odsyłacze do różnych miejsc tego samego lub innego dokumentu, to musisz najpierw zaznaczyć w docelowym dokumencie "gorące" miejsca - umieścić odnośniki. Robi się to przez wstawianie w miejscach, do których chcesz wykonywać skoki znaczników: <A NAME="nazwa"></A> gdzie nazwa jest identyfikatorem odnośnika - danego miejsca w dokumencie. Teraz odsyłacz do takiego miejsca wygląda następująco: W ramach tej samej strony: <A HREF="#nazwa>tekst odsyłający</a> Do innej strony: <A HREF="adres_url#nazwa">tekst odsyłający</a> Połączenia do poczty elektronicznej Jeśli chcesz w sposób wygodny dla użytkownika umieścić na swojej stronie odsyłacz do swojej skrzynki , by użytkownik mógł łatwo wysyłać Ci wiadomości itp., możesz to zrobić wpisując: <A HREF="mailto:osoba@adres">tekst odsyłający</a> gdzie osoba@adres jest Twoim adresem . Zakład Systemów Rozproszonych - 6 / 20
7 Zadanie 1. Wstaw dowolny odnośnik do innej strony WWW (możesz stworzyć drugi plik i odnosić się do niego). 2. Wstaw odnośnik do poczty . TABELE Tabele to jedna z bardzo użytecznych i elastycznych struktur języka HTML. Warto więc się z nimi lepiej zapoznać. Poleceniem, które wstawia do dokumentu tabele jest para znaczników: <TABLE> Wszystko, co dotyczy tabeli musi się znajdować pomiędzy tymi znacznikami. W HTML-u tabela podzielona jest na wiersze, a te z kolei na komórki. Tabelę dzielimy na wiersze za pomocą par znaczników Natomiast z wierszy wydzielamy pojedyncze komórki za pomocą znaczników <TD> </TD> Np. Przykład tabelki: <TABLE> <TD>a11</TD> <TD>a12</TD> <TD>a21</TD> <TD>a22</TD> a11 a12 a21 a22 Parametry całej tabeli ALIGN - Służy do określenia sposobu poziomego wyrównywania tabeli. Możliwe opcje to ALIGN= "left" "center" "right" ALIGN="left" wyrównuje tabelę do lewej <TABLE ALIGN="left">... Zakład Systemów Rozproszonych - 7 / 20
8 BORDER - Określenie szerokości (w punktach) obramowania tabeli. BORDER=liczba <TABLE BORDER=2>... BGCOLOR - ustalenie koloru tła całej tabeli. Są dwie możliwości, albo "określenie_koloru" może być jedną z predefiniowanych nazw kolorów, np "Yellow" albo szesnastkowym opisem natężenia kolejnych składowych koloru (tzn. rr-red; gg-green; bb-blue ), np."#ff00a0" BGCOLOR="określenie_koloru" "#rrggbb" <TABLE BORDER=3 BGCOLOR="#008000"> BORDERCOLOR - Za pomocą tej opcji ustalamy, jakiego koloru mają być obramowania tabeli. "określenie_koloru" może być jedną z predefiniowanych nazw kolorów, np "Yellow" lub szesnastkowym opisem natężenia kolejnych składowych koloru, np. "#FF00A0" <TABLE BORDER="2" BORDERCOLOR="Red"> BACKGROUND - W ten sposób ustalamy, że tłem dla wszystkich komórek tabeli ma być obrazek plik_graficzny. Będzie on wyświetlany w ten sposób, że lewy górny róg obrazka będzie znajdował się w lewym górnym rogu każdej komórki. Jeżeli komórki będą miały rozmiar mniejszy niż rozmiar obrazka, będzie on obcięty, jeżeli większy, będzie on powtarzany jak wzorek na tapecie. <TABLE BORDER="2" BACKGROUND="skuld.jpg"> CELLPADDING - Określa (w punktach) odstęp pomiędzy brzegiem komórki a jej zawartością. <TABLE BORDER="2" CELLPADDING="10"> CELLSPACING Ten parametr określa odstępy pomiędzy komórkami tabeli, tzn. przestrzeń pomiędzy obramowaniami poszczególnych komórek. <TABLE BORDER="2" CELLSPACING="10"> WIDTH - Określa szerokość tabeli. W pierwszym przypadku (podania liczby) jest to bezwzględna szerokość tabeli w punktach, w drugim (podania ilości procent, zakończonej znakiem %) będzie to wyrażony w procentach ułamek szerokości okna, w którym wyświetlana jest strona WWW. <TABLE BORDER="2" WIDTH="300"> Zadanie Stwórz tabele Plan lekcji. Uzupełnij ją dowolnymi danymi. Zakład Systemów Rozproszonych - 8 / 20
9 Parametry wiersza ALIGN VALIGN BGCOLOR BACKGROUND Parametry dotyczące wierszy umieszczane są jako opcje po znaczniku początku wiersza w tabeli <TR [..tu parametry..] > i wpływają one na cały wiersz do którego się odnoszą. Jest to więc często zawężenie poprzednich parametrów do obrębu jednego wiersza. UWAGA: opcje zdefiniowane w znaczniku są niejako "ważniejsze" niż te zdefiniowane dla całej tabeli i dzięki temu "przesłaniają" je powodując, że można ustalić pewne żądane parametry tylko dla jednego, konkretnego wiersza, podczas gdy cała reszta komórek tabeli będzie formatowana według opcji zawartych w znaczniku <TABLE> ALIGN - Służy do określenia sposobu poziomego wyrównywania zawartości komórek w wierszu. Możliwe opcje to: ALIGN= "left" "center" "right" ALIGN="left" wyrównuje zawartości komórek wiersza do lewej ALIGN="right" wyrównuje zawartości komórek wiersza do prawej ALIGN="center" wyśrodkowuje zawartości komórek wiersza <TABLE BORDER="2" WIDTH="90%"> <TR ALIGN="LEFT"> <TD>to są komórki wyrównywane do lewej</td> <TD>to również</td> <TR ALIGN="CENTER"> <TD>to jest komórka z centrowaną zawartością</td> <TD>i to też</td> <TR ALIGN="RIGHT"> <TD>a to jest komórka z zawartością wyrównywaną do prawej</td> <TD>podobnie ta</td> VALIGN - Ta opcja pozwala na ustalenie pionowego wyrównywania zawartości komórek w wierszu. VALIGN= "top" "middle" "bottom" VALIGN="top" wyrównuje zawartość komórek do góry VALIGN="middle" centruje pionowo zawartość komórek Zakład Systemów Rozproszonych - 9 / 20
10 VALIGN="bottom" wyrónuje zawartość komórek do dołu Następująca definicja tabeli <TABLE BORDER="2" WIDTH="90%"> <TR VALIGN="TOP"> <TD HEIGHT="50">to są komórki wyrównywane do góry</td> <TD>to również</td> <TR VALIGN="MIDDLE"> <TD HEIGHT="50">to jest komórka z centrowaną zawartością</td> <TD>i to też</td> <TR VALIGN="BOTTOM"> <TD HEIGHT="50">to jest komórka z zawartością wyrównywaną do dołu</td> <TD>podobnie ta</td> BGCOLOR - W ten sposób ustala się kolor tła komórek danego wiersza tabeli. Są dwie możliwości, albo "określenie_koloru" może być jedną z predefiniowanych nazw kolorów, np "Yellow" albo szesnastkowym opisem natężenia kolejnych składowych koloru (tzn. rr-red; gg-green; bb-blue ), np."#ff00a0" BGCOLOR="określenie_koloru" "#rrggbb" Ustalamy tło dla wszystkich komórek tabeli jako czerwone, a potem narzucamy, że w pierwszym wierszu komórki mają mieć tło niebieskie: <TABLE BORDER="3" BGCOLOR="Red"> <TR BGCOLOR="Blue"> <TD>a11</TD> <TD>a12</TD> <TD>a21</TD> <TD>a22</TD> BACKGROUND - Podobnie jak taki sam parametr dla tabeli, określa obrazek, który będzie tłem dla wszystkich komórek, ale tym razem właśnie danego wiersza. BACKGROUND="plik_graficzny" <TABLE BORDER="3"> <TR BACKGROUND="skuld.jpg"> <TD>a11</TD> Zakład Systemów Rozproszonych - 10 / 20
11 <TD>a12</TD> <TD>a21</TD> <TD>a22</TD> Parametry dotyczące pojedynczych komórek Parametry dotyczące właściwości pojedynczych komórek umieszczane są jako opcje po znaczniku początku komórki w tabeli <TD [..tu parametry..] > i wpływają one jedynie na daną komórkę. UWAGA: opcje zdefiniowane w znaczniku <TD> są niejako "ważniejsze" niż te zdefiniowane dla całej tabeli czy też dla całego wiersza i dzięki temu "przesłaniają" je powodując, że można ustalić pewne żądane parametry dla danej, konkretnej komórki, podczas gdy cała reszta komórek tabeli będzie formatowana według opcji zawartych w znaczniku <TABLE> a reszta komórek w wierszu, wg. opcji znacznika ALIGN - Służy do określenia sposobu poziomego wyrównywania zawartości komórki. ALIGN="left" wyrównuje zawartości komórki do lewej ALIGN= "left" "center" "right" ALIGN="right" wyrównuje zawartości komórki do prawej ALIGN="center" wyśrodkowuje zawartość komórki <TABLE WIDTH="90%"> <TD ALIGN="LEFT">do lewej</td> <TD ALIGN="CENTER">centrowana</TD> <TD ALIGN="RIGHT">do prawej</td> VALIGN - Służy do określenia sposobu pionowego wyrównywania zawartości komórki. VALIGN= "top" "middle" "bottom" VALIGN="top" wyrównuje zawartości komórki do góry VALIGN="middle" wyśrodkowuje zawartość komórki VALIGN="bottom" wyrównuje zawartości komórki do prawej <TABLE WIDTH="90%"> Zakład Systemów Rozproszonych - 11 / 20
12 <TD VALIGN="TOP">do góry</td> <TD VALIGN="MIDDLE">centrowana</TD> <TD VALIGN="BOTTOM">do dołu</td> WIDTH - Ten parametr określa szerokość komórki tabeli. Podanie liczby oznacza szerokość komórki w punktach, natomiast podanie ilości procent (zakończonej znakiem %) oznacza, że komórka bedzie miała właśnie tyle procent szerokości tabeli. WIDTH= "liczba" "ilosc_procent%" UWAGA: ustawienie szerokości dla jednej komórki powoduje oczywiście ustawienie takiej samej szerokości dla wszystkich komórek znajdujących się w tej samej kolumnie. W przypadku, gdy w tej samej kolumnie znajduje się kilka komórek z określoną szerokością, szerokość kolumny (a więc i pozostałych komórek) jest dopasowywana do najszerszej komórki. <TABLE BORDER="2" WIDTH="60%"> <TD WIDTH="70">szerokość 70pkt.</TD> <TD WIDTH="150">szerokość 150pkt.</TD> <TD WIDTH="50%">szerokość 50% tabeli</td> HEIGHT - W ten sposób określana jest wysokość pojedynczej komórki tabeli w punktach. HEIGHT= "liczba" UWAGA: określenie wysokości pojedynczej komórki, automatycznie określa wysokość wszystkich komórek w danym wierszu. <TABLE BORDER="2"> <TD HEIGHT="20">a11</TD> <TD>a12</TD> <TD>a13</TD> <TD HEIGHT="100">a21</TD> <TD>a22</TD> <TD>a23</TD> Zakład Systemów Rozproszonych - 12 / 20
13 BGCOLOR- W ten sposób określa się kolor tła pojedyńczej komórki. "określenie_koloru" może być jedną z predefiniowanych nazw kolorów, np "Blue" albo szesnastkowym opisem natężenia kolejnych składowych koloru (tzn. rr-red; gg-green; bb-blue ). BGCOLOR= "okreslenie_koloru" "#rrggbb" <TABLE BORDER="2"> <TD BGCOLOR="#800000">a11</TD> <TD>a12</TD> <TD>a21</TD> <TD BGCOLOR="Blue">a22</TD> BACKGROUND - Podobnie jak taki sam parametr dla tabeli czy wiersza, określa obrazek, który będzie tłem dla jednej konkretnej komórki. BACKGROUND="plik_graficzny" <TABLE WIDTH="70%" BORDER="2"> <TD HEIGHT="100" BACKGROUND="skuld.jpg">a11</TD> <TD>a12</TD> <TD HEIGHT="140" BACKGROUND="pinkrod.jpg">a21</TD> <TD>a22</TD> COLSPAN - Za pomocą tego parametru można połączyć poziomo sąsiednie komórki w jedną, przebiegająca przez kilka komórek wzdłuż jednego wiersza (a więc łącząca kilka kolumn, stąd nazwa). COLSPAN="liczba" <TABLE WIDTH="70%" BORDER="2" BGCOLOR="#C0C0C0"> <TD>a13</TD> <TD COLSPAN="2">(komórki a12+a13) tu chociażby nagłówek</td> <TD>a21</TD> <TD>a22</TD> <TD>a23</TD> Zakład Systemów Rozproszonych - 13 / 20
14 <TD>a31</TD> <TD>a32</TD> <TD>a33</TD> UWAGA: jeśli rozszerzamy komórkę na więcej kolumn (w przykładzie na dwie) to nie wpisujemy już znaczników komórki która została niejako "pochłonięta" przez rozszerzającą się komórkę, bo doprowadzi to do zaburzenia kompozycji. Dlatego pomiędzy pierwszą parą znaczników znajdują się tylko dwie pary znaczników <TD> </TD>. ROWSPAN - Za pomocą tego parametru można połączyć pionowo sąsiednie komórki w jedną, przebiegającą przez kilka komórek wzdłuż jednej kolumny (a więc łączącą kilka wierszy, stąd nazwa). ROWSPAN="liczba" <TABLE WIDTH="70%" BORDER="2" BGCOLOR="#C0C0C0"> <TD ROWSPAN="2">a11+a21</TD> <TD>a12</TD> <TD>a13</TD> <TD>a22</TD> <TD>a23</TD> <TD>a31</TD> <TD>a32</TD> <TD>a33</TD> UWAGA: jeżeli rozszerzamy komórkę na inne wzdłuż jednej kolumny, nie wpisujemy już ich znaczników na ich miejscach, bo zaburzy to kompozycję tabeli. ZADANIA: 1. Zmodyfikuj stworzony wcześniej plan lekcji uwzględniając poznane funkcje wierszy i komórek. Zakład Systemów Rozproszonych - 14 / 20
15 Ramki i układy ramek Układ ramek jest definiowany w pliku HTML, w którym element body zastąpiono elementem frameset. W elemencie tym określane są następujące cechy układu ramek: Sposób podziału okna na ramki. Liczba wierszy lub kolumn. Obszar ekranu przyporządkowany poszczególnym kolumnom/wierszom. Znacznik <frame> definiuje dokument, który zostanie umieszczony w danej ramce. Wartością jego atrybutu src jest adres url dokumentu html. Ogólna postać definicji układu ramek Ogólna postać definicji układu ramek przedstawiona została na wydruku Przy tworzeniu ramek należy pamiętać, że znaczniki <body> i <frameset> wzajemnie się wykluczają. Co więcej, znacznik <frameset> nie może zawierać innych znaczników formatujących, połączeń oraz dokumentów tekstowych. <html> <head> <title>tytuł strony</title> </head> <frameset atrybut= wartość > <frame src= url >... <frame src= url > </frameset> </html> Tworzenie ramek 1. Otwórz Notatnik i zapisz plik jako index.html a następnie wpisz poniższy kod będący ramką: PRZYKŁAD 1. <html> <head> <title>ramki w pionie</title> </head> <frameset cols="25%,75%"> <!-- Atrybut name definiuje nazwy ramek --> <frame src="nawigacja.html" name="nawigacja"> <frame src="strona.html" name="strona"> </frameset> </html> Układ ramek z wydruku to układ dwóch ramek. Za pomocą atrybutu name przypisano pierwszej z ramek nazwę nawigacja, a drugiej strona. 2. Zapisz plik jako index.html i otwórz nowy plik w którym napisz kod strony nawigacja: PRZYKŁAD 2. <html> <head> <title>nawigacja</title> <meta http-equiv="content-type" content="text/html; charset=iso "> Zakład Systemów Rozproszonych - 15 / 20
16 </head> <body> <h3>wybierz interesujący cię temat: </h3> <!-- lista połączeń --> <ul> <!-- Zwróć uwagę na atrybut target jego wartością jest nazwa ramki --> <li><a href="strona.html" target="strona">strona 1</a> <li><a href="strona1.html" target="strona">strona 2</a> <li><a href="strona2.html" target="strona">strona 3</a> </ul> </body> </html> 3. Zapisz plik jako nawigacja.html W tym pliku html został wykorzystany element ul tworzący listę wypunktowaną. Elementami listy są połączenia prowadzące do kolejnych plików html: <li><a href="strona1.html" target="strona">strona 2</a> Połączenia są definiowane za pomocą znacznika <a>, który przyjmuje dwa atrybuty: href i target. Wartością atrybutu src są adresy url plików wyświetlanych w szerszej z ramek Ramka ta jest wskazywana jako cel połączeń za pomocą atrybutu target jego wartością jest nazwa szerszej ramki. Atrybut target ma kluczowe znaczenie w definiowaniu systemu nawigacji między ramkami. Ramkom warto nadawać nazwy, nawet jeśli w danej chwili nie korzystasz z nich. 4. Otwórz nowy plik i zapisz go jako strona.html a następnie wpisz poniższy kod: <html> <head> <title>strona</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <!-- Wstaw tu dowolną zawartość --> <h2>to jest plik o nazwie strona.html.</h2> <p>jeśli chcesz wyświetlić inny plik, kliknij połączenie...</p> </body> </html> 5. Zapisz plik i otwórz plik index.html w przeglądarce. Klikając połączenia w ramce nawigacyjnej, będziesz wyświetlał w ramce z prawej strony kolejne dokumenty html składające się na Twoją witrynę. Zakład Systemów Rozproszonych - 16 / 20
17 Kod html poziomego układu ramek Prosty układ dwóch ramek, dzielących ekran w poziomie. W pierwszej, węższej, będzie mieścić się banner, a w drugiej, szerszej, dokument html. Wąskiej rameczce narzucimy stałą wysokość, na przykład 75 pikseli. Druga ramka niech wypełni pozostałą część ekranu. 1. Otwórz Notatnik i wpisz następujący kod: <html> <head> <title>ramki poziome</title> </head> <frameset rows="75,*"> <frame src="baner.html"> <frame src="strona.html"> </frameset> </html> 2. Zapisz plik jako strony index.html 3. Otwórz nowy plik i zapisz go jako banner.html w pliku tym umieszczony zostanie banner w tym celu wpisz poniższy kod: <html> <head> <title>banner</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <marquee><h1>oto najwspanialsza strona WWW na świecie!!!<h1></marquee> </body> </html> Plik baner.html to prostu dokument html, który zawiera napis reklamowy. Napis ten będzie płynnie przewijany w poprzek ekranu. Wykorzystana tu została prosta metoda tworzenia animacji tekstowych, tak zwanych animacji Marquee. Aby utworzyć taką animację, wpisz między znacznikami <marquee> </marquee> dowolny tekst. Znacznik ten ma swoje atrybuty zostały one zebrane w tabeli. 4. Zapisz ponownie plik banner.html i otwórz nowy plik zapisując go pod nazwą strona.html, a w niej wpisz poniższy kod: <html> <head> <title>strona </title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <h1>to jest ramka, w której wyświetlana będzie strona</h1> </body> </html> 5. Zapisz plik i otwórz w przeglądarce plik index.htm. Na poniższym rysunku pokazane zostały efekty pracy okno przeglądarki zostało podzielone na dwie poziome ramki. Zakład Systemów Rozproszonych - 17 / 20
18 Mieszane ramki poziome i pionowe Łączenie poziomych i pionowych układów ramek pozwala budować skomplikowane układy, przypominające szachownicę. Aby utworzyć mieszany układ ramek, konieczne jest zagnieżdżenie elementu frameset w innym elemencie frameset. Utworzymy taki układ ramek, który umożliwia jednoczesną prezentację trzech dokumentów. 1. Otwórz Notatnik i wpisz w nim poniższy kod zapisując plik jako index.html <html> <head> <title>mieszany układ ramek</title> </head> <frameset rows="50%,50%"> <frame src="ramka_a.html"> <frameset cols="25%,75%"> <frame src="ramka_b.html"> <frame src="ramka_c.html"> </frameset> </frameset> </html> Konieczne jest przygotowanie plików ramka_a.html zawartość górnej ramki, ramka_b.html zawartość dolnej lewej ramki, i ramka_c.html zawartość dolnej prawej ramki. 2. Zapisz plik i otwórz nowy plik i zapisz jako ramka_a.html a w nim wpisz poniższy kod: <html> <head> <title>ramka_a</title> </head> <body> To jest plik ramka_a.html.. </body> </html> Zakład Systemów Rozproszonych - 18 / 20
19 3. Zapisz plik i stwórz podobne pliki jak ramka_a.html tj. ramka_b.html, ramka_c.html Podstawowe atrybuty znacznika <frame> Nazwa longdesc= url marginheight= piksele marginwidth piksele frameborder= 0 1 noresize= true false scrolling= yes no auto name= nazwa_ramki src= url Opis Połączenie do strony zawierającej obszerny opis ramki. Stosuj tam, gdzie spodziewasz się, że ramki nie będą obsługiwane. Wysokość marginesu. Szerokość marginesu. Określa, czy obramowanie ramki ma być wyświetlane. Określa, czy użytkownik ma możliwość zmiany rozmiarów ramki. Definiuje sposób przewijania ramki. Nazwa ramki. Podaje ulokowanie pliku, który zostanie wyświetlony w ramce. Nazwy specjalne ramek: _blank _self _top _parent Nazwa Opis Otwiera stronę w nowym oknie. Otwiera stronę w bieżącej ramce lub oknie. Jest to ustawienie domyślne. Korzysta się z tej nazwy, aby zniwelować działanie ustawienia w znaczniku <base> (czyli wyświetlenie dokumentu w ramce domyślnej, wskazanej przez ten znacznik). Powoduje, że ładowany dokument jest wyświetlany w oknie umieszczonym na wierzchu stosu i zajmuje całe okno, zastępując układ ramek. Umożliwia to ucieczkę ze środowiska ramek. Dokument jest ładowany do ramki nadrzędnej względem ramki zawierającej bieżący dokument. Atrybuty znacznika <marquee> Atrybut behavior= scroll slide alternate direction= right left loop= liczba infinite Działanie scroll napis przesuwa się z prawej strony do lewej. slide napis przesuwa się do lewego marginesu i zatrzymuje się. alternate tekst pojawia się z lewej strony, po czym odbija się od marginesów. Tylko z atrybutem scroll; określa kierunek animowanego tekstu. Liczba powtórzeń przewinięć tekstu. Zakład Systemów Rozproszonych - 19 / 20
20 scrollamount= liczba scrolldelay= milisekundy bgcolor= definicja koloru height= wartość% piksele width= wartość% piksele hspace= piksele vspace= piksele Liczba pikseli, o jaką przesuwa się tekst w pojedynczym kroku. Opóźnienie między kolejnymi krokami animacji. Zmienia kolor w obszarze, po którym przesuwa się napis. Wymiary obszaru, po którym przesuwa się napis. Odległość obszaru od bocznych (hspace) oraz górnej i dolnej krawędzi okna (vspace). ZADANIA: 1. Wpisz wszystkie powyższe przykłady. 2. Zmodyfikuj stworzone wcześniej strony WWW wykorzystując mechanizm ramki. 3. Zmodyfikuj stworzoną stronę WWW z pkt. 2, tak aby każda część ramki miała inny kolor itp. Zakład Systemów Rozproszonych - 20 / 20
Tworzenie stron internetowych RAMKI
Tworzenie stron internetowych RAMKI RAMKI Ramka to zdefiniowana część okna przeglądarki, której to części przypisano właściwości takie jak całemu oknu. ramka może być przewijana niezależnie od pozostałej
Bardziej szczegółowoHTML (HyperText Markup Language) hipertekstowy język znaczników
HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony
Bardziej szczegółowoOdsyłacze. Style nagłówkowe
Odsyłacze ... polecenie odsyłcza do dokumentu wskazywanego przez url. Dodatkowym parametrem jest opcja TARGET="...", która wskazuje na miejsce otwarcia wskazywanego dokumentu, a jej parametrami
Bardziej szczegółowoHTML (HyperText Markup Language)
HTML (HyperText Markup Language) Struktura dokumentu tytuł strony sekcja nagłówka Tutaj wpisujemy
Bardziej szczegółowoProgramowanie WEB PODSTAWY HTML
Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony
Bardziej szczegółowoZa pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco:
1 1. Ramki Najbardziej elastycznym sposobem budowania stron jest uŝycie ramek. Ułatwiają one nawigowanie w wielostronicowych dokumentach HTML, poprzez podział ekranu na kilka obszarów. KaŜdy z nich zawiera
Bardziej szczegółowoTabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>
Tabele Autorem niniejszego skryptu jest dr inż. Robert Kolud Tabele w HTML to nie tylko praktyczny sposób na przedstawianie zestawień informacji. Znacznie częściej jednak tabele są wygodnym narzędziem
Bardziej szczegółowozmiana koloru tła <body bgcolor = kolor > tło obrazkowe <body background= ścieżka dostępu do obrazka >
tytuł dokumentu treść dokumentu
Bardziej szczegółowoHTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl
HTML 1 Gimnazjum nr 1 w Barcinie UWAGA: UTWÓRZ FOLDER HTML, a w nim HTML-1 dla pierwszego ćwiczenia. Imię_ nazwisko_html-1.html z dysku J: w folderze HTML 1. Tło strony - Jednolity kolor:
Bardziej szczegółowoTutorial. HTML Rozdział: Ramki
Autor: Mateusz Wojtyna Opis ogólny Tutorial HTML Rozdział: Ramki Ramki są bardzo pomocnym narzędziem przy tworzeniu strony internetowej jeżeli na przykład chcemy stworzyć sobie menu wszystkich podstron
Bardziej szczegółowoprzygotował: mgr Szymon Szewczyk PODSTAWY
S t r o n a 1 PODSTAWY Każdy dokument musi być w całości zawarty między znacznikami - i (większość znaczników musi być odwołana ). Dokument HTML a składa się z dwóch części: - głowy
Bardziej szczegółowoPodstawowe znaczniki języka HTML.
Podstawowe znaczniki języka HTML. Struktura dokumentu. Sposób użycia i dokumentu. Między nimi umieszczana jest cała treść dokumentu. Sposób użycia Sekcja HEAD zawiera podstawowe
Bardziej szczegółowoCel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej.
Piotr Chojnacki IV rok, informatyka chemiczna Liceum Ogólnokształcące Nr I we Wrocławiu Wrocław dn. 26 lutego 2006 roku Czas trwania zajęć: 90 minut, przedmiot: TI Temat lekcji: Tworzenie strony internetowej
Bardziej szczegółowoJustyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie
Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Scenariusz lekcji informatyki klasa II gimnazjum Temat : Strona WWW pierwsze
Bardziej szczegółowoWprowadzenie do języka HTML
Radosław Rudnicki (joix@mat.umk.pl) 05.09.2009 r. Wprowadzenie do języka HTML Do tworzenia stron internetowych wystarczy użyd zwykłego Notatnika oferowanego przez system Windows, czy dowolny inny system
Bardziej szczegółowoTworzenie stron internetowych w kodzie HTML Cz 5
Tworzenie stron internetowych w kodzie HTML Cz 5 5. Tabele 5.1. Struktura tabeli 5.1.1 Odcięcia Microsoft Internet Explorer 7.0 niepoprawnie interpretuje białe znaki w komórkach tabeli w przypadku tworzenia
Bardziej szczegółowo[ HTML ] Tabele. 1. Tabela, wiersze i kolumny
[ HTML ] Tabele 1. Tabela, wiersze i kolumny Opis tabeli znajdowad się powinien wewnątrz znaczników . W ich ramach umieszczone są definicje rzędów, komórek w rzędach oraz dane w komórkach.
Bardziej szczegółowoWykład 2 TINT. XHTML tabele i ramki. Zofia Kruczkiewicz
Wykład 2 TINT XHTML tabele i ramki Zofia Kruczkiewicz 1. Tabele 1.1. Przykład tabeli zawierającej kalendarz na miesiąc marzec ... definiuje tabelę Atrybuty: border ="" obramowanie tabeli,
Bardziej szczegółowoHTML cd. Ramki, tabelki
HTML cd. Ramki, tabelki Ramki Umożliwiają wyświetlanie kilku niezależnych dokumentów w tym samym oknie w układzie pionowym, poziomym lub mieszanym. Wady: kłopotliwe drukowanie, konieczność zapanowania
Bardziej szczegółowoPodstawy HTML. 2. Komendy ujęte są w nawiasy ostre - < > i występują najczęściej parami.
Podstawy HTML 1. HTML - to język formatowania dokumentów elektronicznych, który pozwala uformować tekst oraz połączyć go z grafiką. Dokument HTML ma postać pliku tekstowego, gdzie tekst przeplatany jest
Bardziej szczegółowoYoung Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2
Young Programmer: HTML+PHP Dr inż. Małgorzata Janik, Zajęcia #2 Ramowy program warsztatów Zajęcia 1: Zajęcia wprowadzające, HTML Zajęcia 2: Style CSS (tabele i kaskadowe arkusze stylów) Zajęcia 3: Podstawy
Bardziej szczegółowoI. Formatowanie tekstu i wygląd strony
I. Formatowanie tekstu i wygląd strony Akapit: ... aby wyrównać tekst do lewego marginesu aby wyrównać tekst do prawego marginesu:
Bardziej szczegółowoI. Wstawianie rysunków
I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka
Bardziej szczegółowoJęzyki programowania wysokiego poziomu. HTML cz.2.
Języki programowania wysokiego poziomu HTML cz.2. Model pudełkowy HTML Elementy blokowe w tym table oraz div są wyświetlane według tzw. modelu pudełkowego: Zawartość Odstęp (padding) Obramowanie (border)
Bardziej szczegółowoEdukacja na odległość
Ćwiczenie 2. Edukacja na odległość Obsługa konta WWW na serwerze Linuksowym Tworzenie portalu edukacyjnego o określonej, wybranej przez studenta tematyce naukowej. Cel ćwiczenia: Projektowanie strony czołowej
Bardziej szczegółowoLABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE
LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE 1. TABELE 1.1. Definicja tabeli Definicja tabeli musi być umieszczona między znacznikami. W ich ramach umieszczane są definicje rzędów
Bardziej szczegółowoTabela z komórkami nagłówkowymi (wyróżnionymi)
Tabela z komórkami nagłówkowymi (wyróżnionymi) Nagłówek poziomy ... ... Nagłówek pionowy ... ... Tytuł tabeli tytuł tabeli... gdzie
Bardziej szczegółowoWykład 2 Tabele i ramki 1. Tabele 1.1. Podstawy budowy tabel na stronach WWW
Wykład 2 Tabele i ramki 1. Tabele 1.1. Podstawy budowy tabel na stronach WWW Rys.1. Przykład prostej tabeli zawierającej kalendarz na miesiąc marzec ... definiuje tabelę Atrybuty: border
Bardziej szczegółowoWybrane znaczniki HTML
Wybrane znaczniki HTML Struktura dokumentu HTML informacje o dokumencie i plikach zewnętrznych zawartość wyświetlana w przeglądarce wraz z tagami formatującymi
Bardziej szczegółowoModuł IV Internet Tworzenie stron www
Ze strony internetowej www.kaze.zut.edu.pl z folderu BUDOWA JACHTÓW pobierz i zapisz je do własnego folderu następujące pliki: znak_drogowy.png, morze.jpg, logo_ecdl.gif, logobj.png ZADANIE 1 Podstawy
Bardziej szczegółowoTWORZENIE STRON WWW. Zasady opisu stron w języku HTML:
TWORZENIE STRON WWW Strony WWW definiowane są za pomocą języków opisu stron. Najpopularniejszym językiem tego typu jest język HTML (Hyper Text Markup Language). Zasady opisu stron w języku HTML: - opis
Bardziej szczegółowoTworzenie stron internetowych w oparciu o język HTML
Ćwiczenie 1 Temat: Tworzenie stron internetowych w oparciu o język HTML Cel ćwiczenia: Celem ćwiczenia jest zapoznanie studenta z technologią tworzenia stron internetowych z wykorzystaniem języka HTML.
Bardziej szczegółowoCzęsto używanym elementem języka HTML są tabele, które wykorzystuje się do wygodnego rozmieszczania informacji i obrazów.
Tabele Często używanym elementem języka HTML są tabele, które wykorzystuje się do wygodnego rozmieszczania informacji i obrazów. Ramy tabeli Ramy tabeli tworzone są za pomocą polecenia: Cała zawartość
Bardziej szczegółowoPrzy wstawianiu znacznika zamykającego nie przepisujemy już atrybutów.
JĘZYK - HTML Hipertekst - możliwośd przechodzenia między różnymi fragmentami tego samego lub różnych dokumentów, które zostały ze sobą powiązane. Jest systemem odnośników (tzw. Skrótów), działających na
Bardziej szczegółowoHyper Text Markup Language
Podstawy projektowania dokumentów WWW Język znaczników HTML Hyper Text Markup Language Język słuŝący do zapisu dokumentów WWW. Opisuje wygląd dokumentu i definiuje łączniki hipertekstowe, pozwalające na
Bardziej szczegółowoĆwiczenie 4 - Tabele
Ćwiczenie 4 - Tabele W ćwiczeniu tym zajmujemy się tabelami. Tabele moŝna wykorzystywać do róŝnych celów. W tabelach moŝna prezentować dane i je wyliczać, moŝna ustalić określony układ treści i stworzyć
Bardziej szczegółowoABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści
ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop. 2012 Spis treści Wstęp 9 1 HTML 5 i XHTML w pytaniach i odpowiedziach 13 Co to jest HTML 5? 13 Co to jest XHTML? 15 Czy strony utworzone w HTML
Bardziej szczegółowoRAMKI. Czym są ramki w dokumencie HTML?
Czym są ramki w dokumencie HTML? Wszystkie ważniejsze przeglądarki potrafią interpretowad ramki, które stały się już oficjalnym standardem języka HTML. Ramki ułatwiają nawigowanie w wielostronicowych dokumentach
Bardziej szczegółowoHTML umożliwia zapis treści dokumentu i równocześnie opis jego układu graficznego.
HTML HTML umożliwia zapis treści dokumentu i równocześnie opis jego układu graficznego. Dokument HTML to plik tekstowy, z ewentualnymi załącznikami, w którym znajduje się tekstowa treść przeplatana z rozkazami
Bardziej szczegółowoPrzedmiot: Grafika komputerowa i projektowanie stron WWW
KARKONOSKA PAŃSTWOWA SZKOŁA WYŻSZA Kierunek: Dziennikarstwo i komunikacja społeczna Przedmiot: Grafika komputerowa i projektowanie stron WWW 1 opracował: dr inż. Jerzy Januszewicz HTML (HyperText Markup
Bardziej szczegółowoWitryny i aplikacje internetowe
Test z przedmiotu Witryny i aplikacje internetowe Zadanie 1 Kod języka HTML przedstawi tabelę składającą się z dwóch
Bardziej szczegółowoLaboratorium 1: Szablon strony w HTML5
Laboratorium 1: Szablon strony w HTML5 Czas realizacji: 2 godziny Kurs: WYK01_HTML.pdf, WYK02_CSS.pdf Pliki:, Edytor: http://www.sublimetext.com/ stabilna wersja 2 (portable) Ćwiczenie 1. Szablon strony
Bardziej szczegółowoUwaga: znaczniki <body> </body> nie powinny byd umieszczane na stronie zawierającej ramki, w ramach FRAMESET.
* HTML + Wstęp do HTML Dokument HTML jest plikiem tekstowym, który zawiera znaczniki, zwane inaczej tagami, i stanowią język HTML. Same składają się z nawiasów kątowych, między którymi znajdują się ściśle
Bardziej szczegółowoZnaczniki zbudowane są ze znaków '< >', pomiędzy którymi znajduje się litera lub krótki tekst okreslający rodzaj znacznika.
Lekcja 1: Znaczniki Charakterystyczną cechą kodu HTML są tzw. znaczniki (tagi), które służą do formatowania wprowadzanych na stronę internetową treści, informując przeglądarkę jak powinna wyświetlić teksty
Bardziej szczegółowo1. Umieść kursor w miejscu, w którym ma być wprowadzony ozdobny napis. 2. Na karcie Wstawianie w grupie Tekst kliknij przycisk WordArt.
Grafika w dokumencie Wprowadzanie ozdobnych napisów WordArt Do tworzenia efektownych, ozdobnych napisów służy obiekt WordArt. Aby wstawić do dokumentu obiekt WordArt: 1. Umieść kursor w miejscu, w którym
Bardziej szczegółowoZaznaczanie komórek. Zaznaczenie pojedynczej komórki polega na kliknięciu na niej LPM
Zaznaczanie komórek Zaznaczenie pojedynczej komórki polega na kliknięciu na niej LPM Aby zaznaczyć blok komórek które leżą obok siebie należy trzymając wciśnięty LPM przesunąć kursor rozpoczynając od komórki
Bardziej szczegółowoSpecyfikacja techniczna dot. mailingów HTML
Specyfikacja techniczna dot. mailingów HTML Informacje wstępne Wszystkie składniki mailingu (pliki graficzne, teksty, pliki HTML) muszą być przekazane do melog.com dwa dni albo maksymalnie dzień wcześniej
Bardziej szczegółowoWitryna internetowa. Należy unikać w nazwach plików używania polskich znaków.
HTML Wstęp Język HTML jest uniwersalnym jezykiem wykorzystywanym przy tworzeniu stron internetowych, rozpoznawanym przez wszystkie przeglądarki internetowe niezależnie od producenta. Składa on się z elementów
Bardziej szczegółowo<html> </html> <body> </body> <p> [</p>] <br> <html> <head> </head> <body> </body> </html> Materiały dydaktyczne 1/5
PODSTAWOWE INFORMACJE HTML (HyperText Mark-up Language) język programowanie, który pozwala na publikowanie treści w sieci WWW. Nie jest to klasyczny język liniowy (w HTML mamy dostęp w każdym miejscu do
Bardziej szczegółowoFormat HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty
Wybrane działy Informatyki Stosowanej Format HTML Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty dr hab. inż. Andrzej Czerepicki 2019 Definicja HTML HyperText Markup Language
Bardziej szczegółowoWstawianie nowej strony
Wstawianie nowej strony W obszernych dokumentach będziemy spotykali się z potrzebą dzielenia dokumentu na części. Czynność tę wykorzystujemy np.. do rozpoczęcia pisania nowego rozdziału na kolejnej stronie.
Bardziej szczegółowoFormatowanie komórek
Formatowanie komórek Korzystając z włączonego paska narzędziowego Formatowanie możemy, bez szukania dodatkowych opcji sformatować wartości i tekst wpisany do komórek Zmiana stylu czcionki (pogrubienie,
Bardziej szczegółowoOczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR>
Język html to język znaczników inaczej tagów, czyli słów lub skrótów pochodzących z języka angielskiego ujętych w nawiasy ostrokątne , np.. . W większości przypadków spotykamy znaczniki początku (inaczej
Bardziej szczegółowoza pomocą: definiujemy:
HTML CSS za pomocą: języka HTML arkusza CSS definiujemy: szkielet strony wygląd strony Struktura dokumentu html - znaczniki Znaczniki wyznaczają rodzaj zawartości. element strony
Bardziej szczegółowoTworzenie stron internetowych w kodzie HTML Cz 7
Tworzenie stron internetowych w kodzie HTML Cz 7 7. Ramki 7.1. Wstęp Przykład: Oto przykładowy wygląd strony startowej ramek: PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd">
Bardziej szczegółowoLABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH. PODSTAWY JĘZYKA HTML (HyperText Markup Language)
LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH PODSTAWY JĘZYKA HTML (HyperText Markup Language) 1. STRUKTURA DOKUMENTU HTML Dokument HTML jest zwykłym nie skonwertowanym tekstem, z tak zwanymi znacznikami
Bardziej szczegółowoCSS - layout strony internetowej
www.math.uni.lodz.pl/ radmat Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach: Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach:
Bardziej szczegółowoTworzenie i edycja dokumentów w aplikacji Word.
Tworzenie i edycja dokumentów w aplikacji Word. Polskie litery, czyli ąłóęśźżń, itd. uzyskujemy naciskając prawy klawisz Alt i jednocześnie literę najbardziej zbliżoną wyglądem do szukanej. Np. ł uzyskujemy
Bardziej szczegółowoSTRONY INTERNETOWE mgr inż. Adrian Zapała
1 STRONY INTERNETOWE mgr inż. Adrian Zapała STRONY INTERNETOWE Rodzaje stron internetowych statyczne (statyczny HTML + CSS) dynamiczne (PHP, ASP, technologie Flash) 2 JĘZYKI STRON WWW HTML (ang. HyperText
Bardziej szczegółowoTworzenie szablonów użytkownika
Poradnik Inżyniera Nr 40 Aktualizacja: 12/2018 Tworzenie szablonów użytkownika Program: Plik powiązany: Stratygrafia 3D - karty otworów Demo_manual_40.gsg Głównym celem niniejszego Przewodnika Inżyniera
Bardziej szczegółowoWidżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.
Widżety KIWIPortal tworzenie umieszczanie na stronach internetowych opcje zaawansowane Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.3 Strona 1 z 17 1 SPIS TREŚCI 2 Metody osadzania widżetów... 3 2.1
Bardziej szczegółowoPodstawy. w HTML u HTML??? tworzenia stron internetowych. dla wszystkich. nie wiem co to jest, ale na pewno nie jest trudne.
Podstawy tworzenia stron internetowych w HTML u dla wszystkich HTML??? nie wiem co to jest, ale na pewno nie jest trudne. Opracował: Krzysztof Dzierbicki KADEK - 2003 - 1 - - 2 - Wiek XXI charakteryzuje
Bardziej szczegółowoZadanie 3. Praca z tabelami
Zadanie 3. Praca z tabelami Niektóre informacje wygodnie jest przedstawiać w tabeli. Pokażemy, w jaki sposób można w dokumentach tworzyć i formatować tabele. Wszystkie funkcje związane z tabelami dostępne
Bardziej szczegółowoTechnologie Internetowe
Arkadiusz Liber Emil Dziubecki Technologie Internetowe Laboratorium Ćwiczenie 3. Projektowanie i implementacja dokumentów hipertekstowych zawierających ramki i tabele Legnica 2005 1 1. Wymagania wstępne
Bardziej szczegółowo2. Projektowanie stron WWW podstawowe informacje
1. Uczeń: Uczeń: 2. Projektowanie stron WWW podstawowe informacje a. 1. Cele lekcji i. a) Wiadomości zna podstawowe zasady tworzenia stron internetowych, rozróżnia tryb tekstowy tworzenia stron www od
Bardziej szczegółowowww.fwrl.pl/szkolenie
STRONA www.fwrl.pl/szkolenie MS WORD HTML HTML i dostarczają informację dla silnika przeglądarki o tym jak ma być zbudowana i wyświetlona strona HTML HTML HTML (warstwa logiczna co i gdzie ma być) (wastwa
Bardziej szczegółowoJeżeli pole Krawędź będzie zaznaczone uzyskamy obramowanie w całej wstawianej tabeli
Tabela Aby wstawić tabelę do dokumentu należy wybrać z górnego menu Tabela-->Wstaw-->Tabela W kategorii Rozmiar określamy z ilu kolumn i ilu wierszy ma się składać nasza tabela. Do dokumentu tabelę możemy
Bardziej szczegółowoKATEGORIA OBSZAR WIEDZY
Moduł 3 - Przetwarzanie tekstów - od kandydata wymaga się zaprezentowania umiejętności wykorzystywania programu do edycji tekstu. Kandydat powinien wykonać zadania o charakterze podstawowym związane z
Bardziej szczegółowoĆwiczenie 5 Multimedia
Ćwiczenie 5 Multimedia W ćwiczeniu tym zajmujemy się multimediami i osadzaniem ich na stronach WWW. Poprzez multimedia rozumiemy pliki graficzne, muzyczne, video i inne ozdobniki umieszczone na stronie.
Bardziej szczegółowo1. Przypisy, indeks i spisy.
1. Przypisy, indeks i spisy. (Wstaw Odwołanie Przypis dolny - ) (Wstaw Odwołanie Indeks i spisy - ) Przypisy dolne i końcowe w drukowanych dokumentach umożliwiają umieszczanie w dokumencie objaśnień, komentarzy
Bardziej szczegółowoPierwsza strona internetowa
HTML i CSS Pierwsza strona internetowa Rozpoczynając pracę na swoim komputerze powinieneś posiadać: dowolny edytor tekstowy (np. Notatnik), dostęp do Internetu, Microsoft Visual Studio. Podstawy formatowania
Bardziej szczegółowoAdobe InDesign lab.1 Jacek Wiślicki, Paweł Kośla. Spis treści: 1 Podstawy pracy z aplikacją Układ strony... 2.
Spis treści: 1 Podstawy pracy z aplikacją... 2 1.1 Układ strony... 2 strona 1 z 7 1 Podstawy pracy z aplikacją InDesign jest następcą starzejącego się PageMakera. Pod wieloma względami jest do niego bardzo
Bardziej szczegółowoDanuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).
Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06 Moduł 4. Style Zajęcia poświęcone będą kaskadowym arkuszom stylów (por. slajdy 18.-27. z wykładu 2.) Wiele uwagi poświęcaliśmy do tej pory planowaniu szkieletu
Bardziej szczegółowoCzęść II Wyświetlanie obrazów
Tło fragmentu ABA-X Display jest wyposażony w mechanizm automatycznego tworzenia tła fragmentu. Najprościej można to wykonać za pomocą skryptu tlo.sh: Składnia: tlo.sh numer oznacza numer
Bardziej szczegółowoPodstawy HTML i CSS. Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski
Podstawy HTML i CSS Grzegorz Arkit Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski 13 października 2016 G. Arkit (WMIiE) Podstawy HTML i CSS 13 października 2016 1 / 20 Informacja
Bardziej szczegółowoNazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie.
Nazwa implementacji: CSS i box model Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie. Wprowadzenie CSS (kaskadowe arkusze stylów, ang. Cascading
Bardziej szczegółowoDzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.
Kaskadowe arkusze stylów CSS Geneza - oddzielenie struktury dokumentu HTML od reguł prezentacji - poszerzenie samego HTML Korzyści - przejrzystość dokumentów - łatwe zarządzanie stylem (wyglądem) serwisu
Bardziej szczegółowoŚrodki dydaktyczne: tablica, komputer (z Notatnikiem i przeglądarką www) pliki ramkapion.zip, ramkapoziom.zip, zagniezdzenieramek.zip.
Piotr Chojnacki IV rok, informatyka chemiczna Liceum Ogólnokształcące Nr I we Wrocławiu Wrocław dn. 26 lutego 2006 roku Czas trwania zajęć: 45 minut, przedmiot: TI Temat lekcji: Zastosowanie ramek w tworzeniu
Bardziej szczegółowoPokaz slajdów na stronie internetowej
Pokaz slajdów na stronie internetowej... 1 Podpisy pod zdjęciami... 3 Publikacja pokazu slajdów w Internecie... 4 Generator strony Uczelni... 4 Funkcje dla zaawansowanych użytkowników... 5 Zmiana kolorów
Bardziej szczegółowoPrzed rozpoczęciem pracy otwórz nowy plik (Ctrl +N) wykorzystując szablon acadiso.dwt
Przed rozpoczęciem pracy otwórz nowy plik (Ctrl +N) wykorzystując szablon acadiso.dwt Zadanie: Utwórz szablon rysunkowy składający się z: - warstw - tabelki rysunkowej w postaci bloku (według wzoru poniżej)
Bardziej szczegółowoZadanie 1. Stosowanie stylów
Zadanie 1. Stosowanie stylów Styl to zestaw elementów formatowania określających wygląd: tekstu atrybuty czcionki (tzw. styl znaku), akapitów np. wyrównanie tekstu, odstępy między wierszami, wcięcia, a
Bardziej szczegółowoPodstawy technologii WWW
Podstawy technologii WWW Ćwiczenie 8 PHP, czyli poczatki nowej, dynamicznej znajomosci Na dzisiejszych zajęciach rozpoczniemy programowanie po stronie serwera w języku PHP. Po otrzymaniu żądania serwer
Bardziej szczegółowoInformatyka Edytor tekstów Word 2010 dla WINDOWS cz.3
Wyższa Szkoła Ekologii i Zarządzania Informatyka Edytor tekstów Word 2010 dla WINDOWS cz.3 Slajd 1 Slajd 2 Numerowanie i punktowanie Automatyczne ponumerowanie lub wypunktowanie zaznaczonych akapitów w
Bardziej szczegółowoInformatyka Edytor tekstów Word 2010 dla WINDOWS cz.3
Wyższa Szkoła Ekologii i Zarządzania Informatyka Edytor tekstów Word 2010 dla WINDOWS cz.3 Slajd 1 Slajd 2 Numerowanie i punktowanie Automatyczne ponumerowanie lub wypunktowanie zaznaczonych akapitów w
Bardziej szczegółowoZdefiniowane 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.
Style CSS Wstęp 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. Podstawową zaletą i zadaniem stylów jest oddzielenie
Bardziej szczegółowoFragment tekstu zakończony twardym enterem, traktowany przez edytor tekstu jako jedna nierozerwalna całość.
Formatowanie akapitu Fragment tekstu zakończony twardym enterem, traktowany przez edytor tekstu jako jedna nierozerwalna całość. Przy formatowaniu znaków obowiązywała zasada, że zawsze przez rozpoczęciem
Bardziej szczegółowoAtrybuty znaczników HTML
Atrybuty znaczników HTML Atrybut Zastosowanie Opis Abbr Td, Th Skrót dla komórki nagłówkowej tabeli Accept Form, input Lista typów MIME dla wysyłanego pliku Accept-charset Form Lista obsługiwanych znaków
Bardziej szczegółowoTechniki wstawiania tabel
Tabele w Wordzie Tabela w Wordzie to uporządkowany układ komórek w postaci wierszy i kolumn, w które może być wpisywany tekst lub grafika. Każda komórka może być formatowana oddzielnie. Możemy wyrównywać
Bardziej szczegółowoProste kody html do szybkiego stosowania.
Proste kody html do szybkiego stosowania. Często, w trakcie pracy z blogiem czy portalem zachodzi potrzeba umieszczenia grafiki, linku zaszytego w grafice czy innych podobnych. Szczególnie w widgetach
Bardziej szczegółowoJęzyk HTML i podstawy CSS
Notatki do wykładu Język HTML i podstawy CSS dr Jacek Tarasiuk WFiIS, AGH wersja 2006 Spis treści Język HTML...1 Rodzaje dokumentów HTML...1 Budowa dokumentu HTML...1 Zestawienie znaczników...2 Szkielet
Bardziej szczegółowoInstrukcja obsługi funkcji specjalnych szablonu C01 v.1.0
Instrukcja obsługi funkcji specjalnych szablonu C01 v.1.0 UWAGA 1: Przed dokonaniem jakichkolwiek zmian, zalecamy skopiować wcześniej kod html modułu do pliku na lokalnym dysku. W przypadku problemów ułatwi
Bardziej szczegółowoFormaty obrazów wykorzystywane na stronach www. Dołączanie obrazów do strony Formatowanie obrazów na stronie Tło na stronie Multimedia
Grafika i multimedia na stronie Formaty obrazów wykorzystywane na stronach www. Dołączanie obrazów do strony Formatowanie obrazów na stronie Tło na stronie Multimedia Grafika na stronie HTML niezbędny
Bardziej szczegółowoe r T i H M r e n L T n
s e r T t w o i H M r e o T n w z n L Podstawy 1. Nawigacja na stronie jest niezwykle istotna, powinna być możliwie jak najprostsza. Pamiętajmy, że im mniej kroków do celu tym lepiej. 2. Projekt graficzny
Bardziej szczegółowoTest z przedmiotu. Witryny i aplikacje internetowe
Test z przedmiotu Witryny i aplikacje internetowe Tylko jedna odpowiedź jest poprawna!!! Zadanie 1 Kod języka HTML przedstawi tabelę składającą się z dwóch
Bardziej szczegółowoJęzyki programowania wysokiego poziomu. CSS Wskazówki
Języki programowania wysokiego poziomu CSS Wskazówki CSS powinno się projektować hierarchicznie, zaczynając od elementów ogólniejszych, kończąc na szczegółowych - Źle: p.mid { text-align: center; p { color:
Bardziej szczegółowoĆWICZENIA Z JĘZYKA HTML. 1. Znaczniki. 2. Struktura dokumentu HTML. 3. Tworzymy stronę WWW Podróże po stolicach Europy
Informatyka - podstawowe tematy WSzPWN - Język HTML, podstawy str. 1 ĆWICZENIA Z JĘZYKA HTML Struktura dokumentu, znaczniki, tabele, hiperłacza Być może trudno w to uwierzyć, jednak strony WWW są tekstem
Bardziej szczegółowoPodstawy tworzenia stron internetowych
Podstawy tworzenia stron internetowych HTML Wstęp Do edycji stron HTML (Hyper Text Markup Language) można wykorzystać dowolny edytor tekstowy (np. Notatnik) umożliwiający edycję zwykłych plików tekstowych.
Bardziej szczegółowo