Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>
|
|
|
- Seweryn Krawczyk
- 6 lat temu
- Przeglądów:
Transkrypt
1 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 do zaimplementowania projektowanego układu strony i zdefiniowania położenia elementów według zamysłu autora. Definiując tabelę można podawać wymiary poszczególnych kolumn, a także szerokość i wysokość całej tabeli. Można także wymiarowanie pominąć co spowoduje, że wielkości tabeli i jej komórek zostaną automatycznie dopasowane do elementów w nich zawartych. Tabele są złożone z wierszy. W ramach kolejnych wierszy definiowane są komórki, które defacto tworzą kolumny. Tabela objęta jest parą znaczników: <TABLE>... </TABLE>, natomiast każdy wiersz jest zamknięty w znaczniku... (table row). Wewnątrz bloku... następuje definicja kolejnych komórek wiersza poprzez wprowadzenie znacznika: <TD>... </TD> (table data cell). Pomiędzy otwarciem i zamknięciem znacznika <TD> umieszczana jest zawartość komórki. Zawartością komórki może wszystko to, co możemy używać w jakichkolwiek innych miejscach strony WWW, tak więc zarówno zwykły i formatowany tekst, znaczniki wstawiające grafikę i inne obiekty, elementy formularza, a także zagnieżdżone inne tabele. Przy tworzeniu kodu tabeli, warto stosować odpowiednie wcięcia, aby łatwo można było zorientować się na temat jej struktury. Przykład 15a.htm przedstawia kod strony zawierającej prostą tabelę cennik. Z uwagi na to że domyślnie w tabelach nie są wyświetlane obramowania komórek, należało zdefiniować parametr BORDER dla znacznika TABLE. W tabeli nie zdefiniowano żadnych innych cech, więc przyjęła ona wielkość dopasowaną do swojej zawartości. Elementy w komórkach przyjęły standardowe wyrównanie, w tym przypadku do lewej. Przykład 15a.htm <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TD><B>Typ</B></TD><TD><B>Cena</B></TD><TD>Uwagi</TD> <TD>Standard</TD><TD>400</TD><TD> </TD> <TD>Professional</TD><TD>2400</TD><TD> </TD>
2 <TD>Enterprise</TD><TD>8700</TD><TD>termin oczekiwania: 14 dni</td> </TABLE> </BODY></HTML> Często do tworzenia komórek w pierwszym wierszu tabeli przedstawiającej zestawienie, zamiast znacznika <TD> umieszcza się <TH> (table header). Ich zawartość zostaje w takim przypadku domyślnie wyróżniona przez przeglądarkę (np. wyśrodkowaniem i pogrubieniem tekstu). Demonstruje to przykład 15b.htm, w którym także zdefiniowano m.in. szerokość tabeli, marginesy wewnątrz komórek, kolor tła całej tabeli, a także zmieniono wyrównanie dla całego drugiego wiersza komórek, a także z osobna w każdej z komórek wiersza trzeciego. Przykład 15b.htm <HTML><HEAD><TITLE>Tabele</TITLE></HEAD><BODY> <DIV ALIGN="right"> <TABLE BORDER="1" BGCOLOR="gray" CELLPADDING="10" CELLSPACING="1" WIDTH="300"> <TH>Typ</TH> <TH>Cena</TH>
3 <TR ALIGN="center"> <TD>Standard</TD> <TD>400</TD> <TD ALIGN="center">Professional</TD> <TD ALIGN="center">2400</TD> <TD>Enterprise</TD> <TD>8700</TD> </TABLE> </DIV> </BODY></HTML> Wyrównanie elementów w tabeli można definiować zarówno dla całego wiersza przy znaczniku, jak i dla poszczególnych komórek przy znacznikach <TD>. Można definiować wyrównanie z poziomie (atrybut ALIGN), jak i wyrównanie w pionie (atrybut
4 VALIGN). Dla wyrównania całej tabeli, najlepiej objąć ją znacznikiem <DIV> z parametrem ALIGN. Można także dla znacznika <TABLE>, wykorzystać atrybut ALIGN, wtedy jednak tabela będzie oblewana tekstem (jeśli oczywiście starczy miejsca w oknie), podobnie jak można było oblewać tekstem rysunki. Przykład zastosowania różnych rodzajów wyrównania zastosowano w przykładzie 15b.htm. Znacznik TABLE Opis Wstawienie tabeli. Najważniejsze parametry: WIDTH szerokość tabeli podawana w pikselach (np. WIDTH=300), lub w procentach szerokości okna (np. WIDTH=70%). Jeśli zostanie pominięta, jest ustalana na podstawie wielkości elementów w komórkach. BORDER zdefiniowanie grubości ramki wokół tabeli. W przypadku dodatniej wartości wyświetlane są także ramki wokół komórek. W przypadku braku definicji atrybutu obramowania tabeli nie będą wyświetlane. CELLSPACING odstępy pomiędzy komórkami (w pikselach). CELLPADDING marginesy pomiędzy zawartością komórek a jej obramowaniem. W przypadku gdy atrybut WIDTH nie jest zdefiniowany, zwiększanie wartości CELLPADDING spowoduje powiększanie się obszaru strony zajmowanego przez tabelę. ALIGN ustawienie wyrównania tabel na stronie do lewej (LEFT) lub prawej (RIGHT). Zastosowanie parametru ALIGN automatycznie spowoduje że tabela będzie oblewana tekstem po niej następującym. BGCOLOR kolor tła tabeli. BACKGROUND adres pliku graficznego określający tło tabeli. Nie jest to atrybut standardowy, a jedynie rozszerzenie niektórych przeglądarek. Zaleca się zamiast niego użycie stylów CSS, celem uzyskania takiej samej funkcjonalności. przykłady: <TABLE> <TABLE BORDER="2"> <TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0"> <TABLE BORDER="1" BGCOLOR="#FF0000" WIDTH="100%"> <TABLE WIDTH="350" ALIGN="RIGHT" BACKGROUND="gr/tab.gif"> Znacznik <TABLE> należy koniecznie zamknąć po zakończeniu tabeli.
5 TR Rozpoczęcie nowego wiersza w tabeli. Podstawowe parametry: ALIGN wyrównanie poziome zawartości komórek w definiowanym wierszu. Atrybut może przyjmować wartości: LEFT,RIGHT,CENTER,JUSTIFY a także CHAR/ VALIGN wyrównanie pionowe zawartości komórek w definiowanym wierszu. Stosowane wartości: top, middle, bottom, baseline. HEIGHT wysokość komórek podawana w pikselach, lub w procentach wysokości tabeli. BGCOLOR kolor tła wiersza. BACKGROUND adres pliku graficznego określający tło wiersza. Podobnie jak przy poprzednim znaczniku jest to nie ujęte w standardzie rozszerzenie przeglądarek. Zaleca się zamiast niego użycie stylów CSS. Przykład: <TR BGCOLOR="#99CCFF" VALIGN="top" ALIGN="center"> <TD> 1 </TD><TD> 2 </TD> TD Zdefiniowanie komórki w wierszu. Podstawowe parametry: ALIGN wyrównanie poziome zawartości komórki.atrybut może przyjmować wartości: LEFT,RIGHT,CENTER,JUSTIFY, a także CHAR. VALIGN wyrównanie pionowe zawartości komórki. Stosowane wartości: top, middle, bottom, baseline. BGCOLOR kolor tła komórki. BACKGROUND adres pliku graficznego określający tło komórki. Podobnie jak przy poprzednich znacznikach jest to nie ujęte w standardzie rozszerzenie przeglądarek. Zaleca się zamiast niego użycie stylów CSS. WIDTH szerokość komórki podawana w pikselach, lub w procentach szerokości tabeli. Jeśli jest ona definiowana to powinna być taka sama we wszystkich komórkach w kolumnie tabeli. HEIGHT wysokość komórki podawana w pikselach, lub w procentach wysokości tabeli. Jeśli jest ona definiowana to powinna być taka sama we
6 wszystkich komórkach w tym samym wierszu tabeli. COLSPAN umożliwia zdefiniowanie komórki rozciągniętej na określoną liczbę kolumn. Wartość atrybutu definiuje tę liczbę kolumn. ROWSPAN umożliwia zdefiniowanie komórki rozciągniętej na określoną liczbę wierszy. Wartość atrybutu definiuje tę liczbę wierszy. Proste zastosowanie łączenia kolumn i wierszy przedstawia przykład 15c.htm. Przykład: <TD BGCOLOR="#99CCFF" VALIGN="top" ALIGN="center"> 1</TD> <TD> <IMG SRC="rysunek.gif"> </TD> Niektóre atrybuty (takie jak np. BGCOLOR, HEIGHT, ALIGN) mogą być definiowane zarówno przy znaczniku jak i <TD>. Jeśli ma to miejsce w tym samym wierszu, to pierwszeństwo mają definicje atrybutów znacznika <TD>. W poniższym przykładzie cały wiersz będzie posiadał czerwone tło oprócz jednej, zielonej komórki: <TR BGCOLOR="red"><TD> 1 </TD><TD> 2 </TD><TD BGCOLOR="green"> 3</TD> TH W praktyce zamknięcie znacznika <TD>, podobnie jak i <TH> można pominąć i większości przypadków przeglądarki będą nadal poprawnie pokazywały tabelę. Jednak dla zachowania standardu, a także szczególnie w sytuacjach gdy tabele są wzajemnie zagnieżdżane w sobie, warto zamykać te znaczniki. Zdefiniowanie komórki w wierszu, zwykle pełniącej rolę nagłówkową. <TH> może być zastosowany zamiast <TD> i powoduje wtedy wyróżnienie zawartości tekstowej komórki. Można stosować takie same parametry jak w przypadku znacznika <TD>.
7 Przykład 15c.htm <HTML><HEAD><TITLE>Tabele</TITLE></HEAD><BODY> <TABLE BORDER="1" CELLPADDING="0"> <TD ROWSPAN=5 BGCOLOR="gray" WIDTH="20"> </TD> <TH COLSPAN=2 BGCOLOR="gray">Cennik</TH> <TH>Typ</TH> <TH>Cena</TH> <TR ALIGN="center"> <TD>Standard</TD> <TD>400</TD> <TR ALIGN="center"> <TD>Professional</TD> <TD>2400</TD> <TR ALIGN="center"> <TD>Enterprise</TD> <TD>8700</TD> </TABLE> </BODY></HTML>
8 Przykład tworzenia tabeli dla uzyskania określonego układu strony Poniżej przedstawiony przykład ma na celu zademonstrowanie użycia prostej tabeli do zaimplementowania określonego układu strony. Celem jest uzyskanie wyglądu strony takiego, jak przedstawiono na rysunku poniżej: Do dyspozycji posiadamy 3 pliki graficzne: academy.jpg, wsiz.jpg oraz logo.jpg. Zasadnicza część strony powinna być w kolorze białym natomiast jej obramowania w kolorze szarym. Efekt taki uzyskamy umieszczając tabelę z białym tłem zawierającą elementy graficzne i tekstowe strony. Podstawowe tło strony będzie określone w kolorze szarym, aby w ten sposób uzyskać zamierzony efekt obramowań. W omawianym przykładzie wystarczy oprzeć się na prostej tabeli zawierającej 2 wiersze i 2 kolumny czyli razem 4 komórki. Podstawowy szablon takiej tabeli możemy zapisać tak jak pokazano w przykładzie 16a.htm:
9 Przykład 16a.htm <HTML> <HEAD><TITLE>Tabele</TITLE></HEAD> <BODY> <DIV ALIGN="center"> <TABLE BORDER="1"> <TD> tutaj informacje tekstowe </TD> <TD> zdjecie wsiz.jpg </TD> <TD> zdjęcie academy.jpg </TD> <TD> obrazek logo.jpg </TD> </TABLE> </DIV> </BODY></HTML> Powyższa tabela została wyśrodkowana na stronie poprzez wykorzystanie znacznika <DIV>. Kolejnym krokiem będzie umieszczenie w komórkach tabeli obrazów graficznych i właściwych elementów tekstowych, oraz zdefiniowanie kolorów tła strony i tabeli. Przedstawia to przykład 16b.htm. Zastosowano także style CSS (znacznik <STYLE>), które będą omawiane w dalszej części ninejszej publikacji. Przykład 16b.htm <HTML><HEAD><TITLE>Tabele</TITLE></HEAD><BODY BGCOLOR="#999999"> <STYLE>H2,H3 {font-family:verdana}</style> <DIV ALIGN="center"> <TABLE BORDER BGCOLOR="white">
10 <TD> <H2>Wyższa Szkoła <br>informatyki i Zarządzania</H2> <H3>Bielsko-Biała</H3> </TD> <TD><img src="grafika/wsiz.jpg"></td> <TD><img src="grafika/academy.jpg"></td> <TD><img src="grafika/logo.jpg"></td> </TABLE> </DIV> </BODY></HTML>
11 Ostatnim wymaganym zabiegiem jest poszerzenie szerokości tabeli do 90% szerokości okna, zdefiniowanie wyrównania poziomego oraz pionowego w komórkach, a także wyłączenie wyświetlania krawędzi(border). Zwiększono także margines wewnątrz komórek (atrybut CELLPADDING) aby zwiększyć odstęp pomiędzy zdjęciami a brzegiem tabeli. Finalny kod przedstawia przykład 16.htm. Przykład 16.htm <HTML><HEAD><TITLE>Tabele</TITLE></HEAD><BODY BGCOLOR="#999999"> <STYLE>H2,H3 {font-family:verdana}</style> <DIV ALIGN="center"> <TABLE WIDTH="90%" BGCOLOR="white" CELLPADDING="10"> <TD ALIGN="center"> </TD> <H2>Wyższa Szkoła <br>informatyki i Zarządzania</H2> <H3>Bielsko-Biała</H3> <TD ALIGN="right"><img src="grafika/wsiz.jpg"></td> <TR VALIGN="bottom"> <TD ALIGN="left"> </TD> <img src="grafika/academy.jpg"> <TD ALIGN="right"><img src="grafika/logo.jpg"></td> </TABLE> </DIV> </BODY></HTML>
12 Powyższy przykład przedstawia stosunkowo proste rozwiązanie. W praktyce tworząc układ strony serwisu internetowego stosuje się często tabele, które wzajemnie są w sobie zagnieżdżane.
Odsył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
Tworzenie 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
[ HTML ] Tabele. 1. Tabela, wiersze i kolumny
![[ HTML ] Tabele. 1. Tabela, wiersze i kolumny](/thumbs/70/62541125.jpg "[ 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.
Tabela 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
Ję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)
Czę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ść
HTML (HyperText Markup Language) hipertekstowy język znaczników
HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony
Deklarowanie tytułu związanej z tabelą
Tabele 1 Deklarowanie tytułu związanej z tabelą Przychody w latach 2007-2010 Położenie pozbawione stylu Treść nagłówka Formatowanie położenia w stylach
HTML (HyperText Markup Language)
HTML (HyperText Markup Language) Struktura dokumentu tytuł strony sekcja nagłówka Tutaj wpisujemy
Programowanie WEB PODSTAWY HTML
Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony
Podstawowe 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
HTML 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
Wprowadzenie 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
I. Dlaczego standardy kodowania mailingów są istotne?
1 Tabela zawartości: I. Dlaczego standardy kodowania mailingów są istotne? 3 II. Budowa nagłówka wiadomości. 4 III. Style kaskadowe CSS. 4 IV. Elementarna budowa szablonu. 6 V. Podsumowanie. 9 2 I. Dlaczego
Technologie 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
Young 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
Wykł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,
Wykł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
zmiana koloru tła <body bgcolor = kolor > tło obrazkowe <body background= ścieżka dostępu do obrazka >
tytuł dokumentu treść dokumentu
ABC 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
LABORATORIUM 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
Kurs HTML. Wykład 4. Tworzenie tabel na stronie WWW. Umieszczanie grafiki w komórkach tabel.
Wykład 4 Tworzenie tabel na stronie WWW. Umieszczanie grafiki w komórkach tabel. Tabele Tabele zostały oficjalnie wprowadzone w HTML-u 3.2. Od tej pory wywarły ogromny wpływ na sposób projektowania i tworzenia
Ję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:
HTML podstawowe polecenia Szkielet dokumentu: Ć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ć
przygotował: 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
I. Wstawianie rysunków
I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka
HTML 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:
Cel 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
9. TABELE KURS HTML.
9. TABELE Tabele są czymś niezwykle waŝnym dla strony HTML. ChociaŜ początkujący omijają je szerokim łukiem, lepiej się je nauczyć. Ta lekcja będzie większym połączeniem oby dwóch języków kursu niŝ jakiekolwiek
Dokument hipertekstowy
Dokument hipertekstowy Laboratorium 5 Box model i layouty mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Wysokość i szerokość domyślna szerokość elementu inline jest związana z jego zawartością
Tworzenie 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.
Podstawy pozycjonowania CSS
Podstawy pozycjonowania CSS Żeby pokazać w jaki sposób przeglądarka rozkłada elementy na stronie posłużę się prostym przykładowym fragmentem kodu html. div id="before"
Przedmiot: 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
Specyfikacja 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
Danuta 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
TWORZENIE 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
Laboratorium 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
Przy 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
Witryny 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
Za 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
Podstawy 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
obecnie tabeli nie stosuje się do budowy struktury witryny (stosuje się za to pozycjonowanie elementów i warstwy) faktycznie wymagają
Tabela obecnie tabeli nie stosuje się do budowy struktury witryny (stosuje się za to pozycjonowanie elementów i warstwy) tabel używa się wyłącznie do prezentacji tych danych, które tego tabel używa się
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.
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
Podstawy 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.
Spis treści. Konwencje zastosowane w książce...5. Dodawanie stylów do dokumentów HTML oraz XHTML...6. Struktura reguł...9. Pierwszeństwo stylów...
Spis treści Konwencje zastosowane w książce...5 Dodawanie stylów do dokumentów HTML oraz XHTML...6 Struktura reguł...9 Pierwszeństwo stylów... 10 Klasyfikacja elementów... 13 Sposoby wyświetlania elementów...
EGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2016 CZĘŚĆ PRAKTYCZNA
Arkusz zawiera informacje prawnie Układ graficzny CKE 2016 chronione do momentu rozpoczęcia egzaminu CENTRALNA KOMISJA EGZAMINACYJNA Nazwa kwalifikacji: Twmzenie aplikacji internetowych i baz danych oraz
Wybrane 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
Układy witryn internetowych
1. CEL ĆWICZENIA Celem ćwiczenia jest zapoznanie się z możliwościami kaskadowych arkuszy stylów CSS w zakresie kontrolowania położenia elementów na stronie. 2. MATERIAŁ NAUCZANIA W normalnym układzie opartym
Krótki przegląd własności języka CSS
Krótki przegląd własności języka CSS Stosując arkusze stylów CSS, w sposób wyraźny oddziela się formatowanie dokumentu XHTML od jego warstwy znaczeniowej umieszczonej w sekcji . Niżej zestawiono
STANDARDY KODOWANIA MAILINGÓW
STANDARDY KODOWANIA MAILINGÓW Tabela zawartości: I. Dlaczego standardy kodowania mailingów są istotne? II. Budowa nagłówka wiadomości. III. Style kaskadowe CSS. IV. Elementarna budowa szablonu. V. Podsumowanie.
Specyfikacja mailingu GG Network
Specyfikacja mailingu GG Network Styczeń 2012 2 Mailing założenia ogólne Do wysłanego mailingu konieczne jest dostarczenie: kreacji typu HTML (do 30 kb); tematu mailingu; nadawcy mailingu; danych reklamodawcy
Rysunek otaczany przez tekst
Tekst i obrazy 1 Rysunek otaczany przez tekst Wprowadzanie obiektu graficznego Rozmiar ramki: width= 200 deklaruje się tylko
EGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2016 CZĘŚĆ PRAKTYCZNA
Arkusz zawiera informacje prawnie Układ graficzny CKE 2016 chronione do momentu rozpoczęcia egzaminu CENTRALNA KOMISJA EGZAMINACYJNA Nazwa kwalifikacji: Twmzenie aplikacji internetowych i baz danych oraz
1. 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
Tutorial. 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
Format 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
KATEGORIA 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
Justyna 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
URL: http://www.ecdl.pl
Syllabus WEBSTARTER wersja 1.0 Polskie Towarzystwo Informatyczne 2007 Copyright wersji angielskiej: Copyright wersji polskiej: The European Computer Driving Licence Foundation Ltd. Polskie Towarzystwo
Podstawy 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
Podstawy 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
CSS. Kaskadowe Arkusze Stylów
CSS Kaskadowe Arkusze Stylów CSS CSS = Cascading Style Sheets Style określają sposób wyświetlania zawartości elementów HTML Arkusz stylów jest zbiorem takich reguł Pojawiły się w HTML 4.0 by rozwiązać
używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów
opracowanie I. K. używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów ISO-8859-2 - norma międzynarodowa określająca sposób kodowania
Formatowanie 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,
Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2}
Kaskadowe arkusze stylów (CSS) W trakcie projektowania własnego serwisu w języku HTML napotkamy problem z określeniem precyzyjnego pozycjonowania tekstu i grafiki oraz elastycznym formatowaniem tekstu.
Temat 2: Tabela jako szablon strony
Temat 2: Tabela jak szabln strny Tabela Struktura tabeli: Prada: Ilść kmórek w każdym wierszu musi być taka sama! Przykład 7: struktura tabeli kmórka1 kmórka2
Wstęp 5 Rozdział 1. Informacje podstawowe 9
Wstęp 5 Rozdział 1. Informacje podstawowe 9 Co to jest internet? 9 Co to jest WWW? 10 Jak komunikują się komputery w internecie? 11 Surfowanie i przeglądarka 12 Jeszcze kilka słów o adresach URL 13 Co
Dzię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
HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych
HTML HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML zdefiniowanie sposobu wizualnej prezentacji dokumentu w przeglądarce
Sylabus Moduł 2: Przetwarzanie tekstów
Sylabus Moduł 2: Przetwarzanie tekstów Niniejsze opracowanie przeznaczone jest dla osób zamierzających zdać egzamin ECDL (European Computer Driving Licence) na poziomie podstawowym. Publikacja zawiera
Wykład 3 - część I. I. TABELE. dr Artur Bartoszewski - Nowoczesne technologie informatyczne - WYKŁAD
Wykład 3 - część I. I. TABELE 1 I. Tabele Struktura tabeli - HTML Najprostsza tabela składa się z elementu oraz komórek pogrupowanych w rzędy . Podstawowa struktura kodu tabeli 3x4 wygląda
Zadanie 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
Nazwa 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
Atrybuty 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
Proste 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
Elementy div i style CSS w praktyce
Elementy div i style CSS w praktyce Włodzimierz Gajda 23 listopada 2005 ver. 0.2 Streszczenie Artykuł omawia kulisy tworzenia strony internetowej wyłącznie w oparciu o elementy div oraz kaskadowe arkusze
Test 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
Widż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
2. MATERIAŁ NAUCZANIA
1. CEL ĆWICZENIA Celem ćwiczenia jest zapoznanie się ze składnią języka HTML dotyczącą identyfikacji i grupowania elementów oraz wstawiania plików multimedialnych. 2. MATERIAŁ NAUCZANIA 2.1. Wstawianie
Tabele. Dodał Administrator czwartek, 22 lipiec :59
zazwyczaj kojarzą się z wypełnioną gęsto tekstem lub liczbami, podzieloną liniami na wiersze i kolumny kartką papieru; w dokumentach elektronicznych też najczęściej przyjmują taką postać. Na stronach WWW
Mailingi HTML. Specyfikacja techniczna
Mailingi HTML Specyfikacja techniczna Informacje wstępne Grupa Morizon S.A. zastrzega sobie prawo do odmowy emisji materiałów reklamowych bez podania przyczyny, w szczególności gdy ich jakość techniczna
Konspekt do lekcji elementy informatyki dla klasy 4e Liceum Ogólnokształccego
mgr Tomasz Grbski Konspekt do lekcji elementy informatyki dla klasy 4e Liceum Ogólnokształccego Temat lekcji: Podstawy jzyka HTML. Czas trwania: 45 minut Cel ogólny: poznanie budowy i najwaniejszych polece
Alfabetyczna lista stylów
Tematy: Kaskadowe arkusze stylów Alfabetyczna lista stylów Uwaga: wiele stylów CSS3 nie jest ciągle interpretowanych przez przeglądarki Styl Znaczen CSS1 CSS2 CSS3 IE FF A animation Zbiorcza definicja
Oczywiś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
CSS - 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:
Sylabus Moduł 4: Grafika menedżerska i prezentacyjna
Sylabus Moduł 4: Grafika menedżerska i prezentacyjna Niniejsze opracowanie przeznaczone jest dla osób zamierzających zdać egzamin ECDL (European Computer Driving Licence) na poziomie podstawowym. Publikacja
Zaznaczanie 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
HTML KROK PO KROKU WSTĘP 2 EDYTOWANIE TEKSTU 4 HIPERLINKI 5 TABELE 7 MULTIMEDIA 8
HTML KROK PO KROKU WSTĘP 2 EDYTOWANIE TEKSTU 4 HIPERLINKI 5 TABELE 7 MULTIMEDIA 8 WSTĘP Ten kurs dedykuje zarówno dla osób zupełnie "zielonych, jeśli chodzi, o html'a które chcą tą wiedze zdobyć jak i
Pierwsza 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
Edukacja 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
Zadanie 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
HTML kurs podstawowy. nagłówek, linia pozioma, obraz, img, ramka, div, tabela, tabel, lista
HTML kurs podstawowy Wykład: język znaczników, atrybuty, XML, XHTML, rodzaje znaczników, wybór edytora, struktura dokumentu, head, title, body, kodowanie, utf-8, iso-8859-2, meta, link, akapit, font, color,
Techniki 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ć
Dokumentacja WebMaster ver 1.0
1 Wstęp Dokumentacja WebMaster ver 1.0 Dokumentacja ta przeznaczona jest dla webmasterów, grafików, programistów. Przedstawia ona strukturę aplikacji SOTEeSKLEP, opisuje działanie oraz wyjaśnia m.in. jak
I. 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:
p { color: yellow; font-weight:bold; }
Barbara Łukawska, Adam Krechowicz, Tomasz Michno Ćwiczenie nr 13: CSS Wstęp Cascading Style Sheets (Kaskadowe Arkusze Styli, w skrócie CSS) jest językiem, który opisuje sposób w jaki będzie wyświetlana
Hyper 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
STRONY 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