Ćwiczenie 4 - Tabele
|
|
- Emilia Nadzieja Chmielewska
- 8 lat temu
- Przeglądów:
Transkrypt
1 Ć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ć coś w rodzaju szablonu strony, moŝna wreszcie w tabeli umieścić miniatury zdjęć, a od nich łącza do duŝych zdjęć. Ogólny schemat budowy tabeli za pomocą znaczników wygląda tak:
2 Znaczniki, które budują tabelę. 1. <table>...</table> - znacznik główny całej tabeli, w nim wszystko się mieści. 2. <tbody>...</tbody> - znacznik, w którym mieści się część główna tabeli. 3. <thead>...</thead> - znacznik, w którym mieści się nagłówek tabeli. 4. <tfoot>...</tfoot> - znacznik, w którym mieści się stopka tabeli. 5. <tr>...</tr> - znacznik wiersza tabeli, w nim umieszczamy komórki. 6. <th>...</th> - znacznik pojedynczej komórki w nagłówku, w nim jest zawarta treść, lub grafika. Komórki nagłówka mogą być ułoŝone poziomo, pionowo lub w sposób mieszany. Tekst w komórkach nagłówkowych będzie pogrubiony. 4. <td>...</td> - znacznik pojedynczej komórki, w nim jest zawarta treść, lub grafika. Znaczniki powinny być umieszczane właśnie w takiej kolejności. Stopka zaraz po nagłówku. Patrz wyŝej schemat budowy tabeli. W znacznikach tabeli moŝna umieszczać dodatkowe atrybuty, takie jak: <table border="n" cellpadding="m" cellspacing="z" align="sposób" width="x" height="y" bgcolor="kolor" background="adres">...</table> Atrybuty: align, height, bgcolor, background są zdeprecjonowane, ale tu z nich skorzystamy... n: 1. grubość obramowania tabeli podana w pikselach m: 1. szerokość marginesów w komórkach podana w pikselach z: 1. szerokość odstępu między sąsiednimi komórkami podana w pikselach
3 sposób: 1. "left" - wyrównanie tabeli do lewej strony (domyślnie), względem otaczającego tekstu 2. "right" - wyrównanie tabeli do prawej strony, względem otaczającego tekstu 3. "center" - wyśrodkowanie tabeli x: 1. szerokość tabeli podana w pikselach 2. lub w procentach - koniecznie ze znakiem: % y: 1. wysokość tabeli podana w pikselach 2. lub w procentach - koniecznie ze znakiem: % kolor: 1. kolor tła w tabeli - nazwa po angielsku 2. aby uzyskać dokładny kolor i odcień to wartość szesnastkową 3. #rrggbb - czyli nasycenie czerwienią (r), zielenią (g) i niebieskim (b) koloru 4. w systemie szesnastkowym jest szesnaście podstawowych cyfr: 5. 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f 6. przykładowe kolory: nazwa #rrggbb kolor black # silver #c0c0c0 gray # white #ffffff maroon # red #ff0000 purple #800080
4 fuchsia #ff00ff green # lime #00ff00 olive # yellow #ffff00 navy # blue #0000ff teal # aqua #00ffff adres: 1. względna ścieŝka dostępu do pliku graficznego 2. jako tła obrazkowego w tabeli 3. naleŝy wpisać drogę uwzględniając wszystkie foldery 4. wchodząc do folderu wpisujemy jego nazwę/ 5. wychodząc z folderu wpisujemy../ 6. na końcu podajemy nazwę pliku z rozszerzeniem W znacznikach wiersza moŝna umieszczać takie atrybuty jak: <tr align="sposób" valign="ustawienie" bgcolor="kolor">...</tr>. Align i bgcolor są zdeprecjonowane, ale tu z nich skorzystamy... sposób: 1. "left" - wyrównanie zawartości wiersza do lewej strony (domyślnie) 2. "right" - wyrównanie zawartości wiersza do prawej strony 3. "center" - wyśrodkowanie zawartości wiersza
5 ustawienie: 1. "top" - ustawienie zawartości wiersza u góry 2. "bottom" - ustawienie zawartości wiersza na dole 3. "middle" - ustawienie zawartości wiersza po środku (domyślnie) kolor: 1. kolor tła w wierszu - nazwa po angielsku 2. aby uzyskać dokładny kolor i odcień to wartość szesnastkową 3. #rrggbb - czyli nasycenie czerwienią (r), zielenią (g) i niebieskim (b) koloru 4. w systemie szesnastkowym jest szesnaście podstawowych cyfr: 5. 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f 6. przykładowe kolory (tabela powyŝej) W znacznikach komórki moŝna umieszczać takie atrybuty jak: <td align="sposób" valign="ustawienie" width="x" height="y" bgcolor="kolor" colspan="c" rowspan="r">...</td>. Align, height i bgcolor są zdeprecjonowane, ale tu z nich skorzystamy... sposób: 1. "left" - wyrównanie zawartości komórki do lewej strony (domyślnie) 2. "right" - wyrównanie zawartości komórki do prawej strony 3. "center" - wyśrodkowanie zawartości komórki ustawienie: 1. "top" - ustawienie zawartości komórki u góry 2. "bottom" - ustawienie zawartości komórki na dole 3. "middle" - ustawienie zawartości komórki po środku (domyślnie) x: 1. szerokość komórki podana w pikselach 2. lub w procentach - koniecznie ze znakiem: % y: 1. wysokość komórki podana w pikselach 2. lub w procentach - koniecznie ze znakiem: %
6 kolor: 1. kolor tła w komórce - nazwa po angielsku 2. aby uzyskać dokładny kolor i odcień to wartość szesnastkową 3. #rrggbb - czyli nasycenie czerwienią (r), zielenią (g) i niebieskim (b) koloru 4. w systemie szesnastkowym jest szesnaście podstawowych cyfr: 5. 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f 6. przykładowe kolory: c: 1. ilość komórek do połączenia w poziomie 2. zamiast kilku komórek będzie jedna rozciągająca się na te kilka 3. wszystkie nadmiarowe komórki naleŝy usunąć z tabeli 4. c-1 komórek usuwamy r: 1. ilość komórek do połączenia w pionie 2. zamiast kilku komórek będzie jedna rozciągająca się na te kilka 3. wszystkie nadmiarowe komórki naleŝy usunąć z tabeli 4. r-1 komórek usuwamy Do tabeli moŝna równieŝ dodać tytuł. SłuŜy do tego znacznik <caption>...</caption>. Znacznik <caption>...</caption> naleŝy umieścić zaraz za znacznikiem <table>. MoŜna uŝyć w nim atrybutu <caption align="sposób">...</caption>. Atrybut align jest zdeprecjonowany, ale tu z niego korzystamy... sposób: 1. "top" - tytuł górny (domyślnie) 2. "bottom" - tytuł dolny 3. "left" - ustawienie przy lewej krawędzi tabeli 4. "right" - ustawienie przy prawej krawędzi tabeli 5. "center" - ustawienie na środku tabeli
7 Zadania do wykonania to kolejno tabele: Krok 1. Zwykła tabela 5 wierszy na 5 kolumn, bez Ŝadnych atrybutów. Krok 2. Tabela 5 wierszy na 5 kolumn, z obramowaniem. Krok 3. Tabela 5 wierszy na 5 kolumn, z obramowaniem i odstępem między komórkami.
8 Krok 4. Tabela 5 wierszy na 5 kolumn, z obramowaniem, odstępem między komórkami i marginesami w komórkach. Krok 5. Tabela 5 wierszy na 5 kolumn, z obramowaniem, odstępem między komórkami, marginesami w komórkach i dowolnym kolorem tła.
9 Krok 6. Tabela 5 wierszy na 5 kolumn, z obramowaniem, odstępem między komórkami, marginesami w komórkach i róŝnym kolorem tła w wierszach. Krok 7. Tabela 5 wierszy na 5 kolumn, z obramowaniem, odstępem między komórkami, marginesami w komórkach i róŝnym kolorem tła w komórkach.
10 Krok 8. Tabela 5 wierszy na 5 kolumn, z obramowaniem, odstępem między komórkami, marginesami w komórkach i tłem obrazkowym z pliku tlo.jpg. Spakowane pliki do zadań do pobrania ze strony: pliki_cw4.zip Krok 9. Tabela 5 wierszy na 5 kolumn, z obramowaniem, odstępem między komórkami, marginesami w komórkach i tytułem u góry.
11 Krok 10. Tabela 5 wierszy na 5 kolumn, z obramowaniem, odstępem między komórkami, marginesami w komórkach, tytułem u dołu i szerokością i wysokością określoną w pikselach.
12 Krok 11. Tabela 5 wierszy na 5 kolumn, z obramowaniem, odstępem między komórkami, marginesami w komórkach, tytułem u dołu i szerokością i wysokością określoną w procentach. W przypadku 100% tabela rozciąga się od krawędzi do krawędzi przeglądarki i i na wysokość tekstu w komórce (wraz z ewentualnymi marginesami w komórce).
13 Krok 12. Tabela 5 wierszy na 5 kolumn, z obramowaniem, odstępem między komórkami, marginesami w komórkach, tytułem u dołu i szerokością i wysokością w komórce 3 określoną w pikselach.
14 Krok 13. Wyrównanie tekstu w komórkach w róŝny sposób: 1. zawartość komórek w pierwszym wierszu wyrównana do prawej 2. zawartość komórek w drugim wierszu wyrównana do prawej i do dołu 3. zawartość komórki 11 na środku 4. zawartość komórki 12 wyrównana do prawej 5. zawartość komórki 13 na środku i do dołu 6. zawartość komórki 14 wyrównana do prawej i do góry
15 Krok 14. Łączenie komórek w poziomie i pionie. Nie zapomnieć usunąć nadmiarowych komórek z tabeli. 1. komórka 1 składa się z dwóch poziomych komórek 2. komórka 17 składa się z dwóch pionowych komórek
16 Krok 15. Jeszcze jedno łączenie komórek: 1. komórka 1 z dwóch w poziomie 2. komórka 7 z dwóch w pionie 3. komórka 10 z czterech w pionie 4. komórka 16 z czterech w poziomie
17 Krok 16. Kolejne tabela do wykonania to zwykła tabela bez Ŝadnych atrybutów, ale z nagłówkami i stopkami. Przypominam o strukturze tabeli, która znajduje się na stronie 1. Krok 17. ZagnieŜdŜanie tabeli. Kolejne tabele moŝna umieszczać w komórkach tabel. NaleŜy wykonać taką konstrukcję:
18 Krok 18. Tabele zagnieŝdŝone moŝna wykorzystać (choć nie zaleca się tego) do budowy struktury strony WWW z kilkoma stałymi panelami: górnym, lewym, prawym, głównym i stopką strony. Konstrukcję naleŝy wykonać tak: 1. główna tabela: 2. 2 kolumny na 3 wiersze 3. szerokość tabeli na 100% 4. odstępy między komórkami na 5 pikseli 5. marginesy w komórkach na 5 pikseli 6. komórki w 1 wierszu połączone 7. komórki w 3 wierszu połączone 8. szerokość pierwszej komórki w drugim wierszu na 100 pikseli 9. wyrównanie w pierwszej komórce w drugim wierszu do góry 10. wyrównanie w drugiej komórce w drugim wierszu do góry 1. tabela zagnieŝdŝona w pierwszym wierszu głównej tabeli: 2. jeden wiersz i jedna komórka 3. szerokość tabeli na 100% 4. odstępy między komórkami na 5 pikseli 5. marginesy w komórkach na 5 pikseli 6. wyrównanie i ustawienie zawartości komórki na środku 1. tabela zagnieŝdŝona w drugim wierszu, w pierwszej komórce: 2. jeden wiersz i jedna komórka 3. szerokość tabeli na 100% 4. odstępy między komórkami na 5 pikseli 5. marginesy w komórkach na 5 pikseli 1. tabela zagnieŝdŝona w drugim wierszu, w drugiej komórce: 2. jeden wiersz i jedna komórka 3. szerokość tabeli na 100% 4. odstępy między komórkami na 5 pikseli 5. marginesy w komórkach na 5 pikseli 6. wysokość komórki na 100% 7. wyrównanie zawartości komórki do góry
19 1. tabela zagnieŝdŝona w trzecim wierszu: 2. jeden wiersz i jedna komórka 3. szerokość tabeli na 100% 4. odstępy między komórkami na 5 pikseli 5. marginesy w komórkach na 5 pikseli 6. wyrównanie i ustawienie zawartości na środku Gotowa zagnieŝdŝona tabela wygląda tak:
20 Krok 19. Kolejne zadanie to zmodyfikowanie wyglądu naszej strony internetowej (dowolnie):
21 Krok 20. Ostatnie zadanie z tabelami to galeria zdjęć - miniatur w tabeli z łączami do duŝych zdjęć. Spakowane pliki do galerii znajdują się w pliku : pliki_cw4.zip Oceniany będzie plik tabele.html z wykonanymi wszystkimi krokami to znaczy ze wszystkimi tabelami, wykonanymi po kolei, zgodnie z instrukcjami. Plik naleŝy przesłać do mnie drogą mailową. Powodzenia.
[ 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ół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ół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ółowoĆwiczenie 6 Ramki. Spakowane pliki do zadań do pobrania ze strony w pliku pliki_cw6.zip
Ćwiczenie 6 Ramki W ćwiczeniu 6 zajmujemy się ramkami. Jest to technika budowania witryny w oparciu o specjalne okienka, do których wczytywane są strony. Sposób ten jest jednak uznany w HTML 4.0 i XHTML
Bardziej szczegółowoĆwiczenie 8 Kolory i znaki specjalne
Ćwiczenie 8 Kolory i znaki specjalne W ćwiczeniu 8 zajmować się będziemy kolorami i znakami specjalnymi. Barwę moŝna utworzyć mieszając w odpowiednich proporcjach trzy kolory podstawowe: czerwony, zielony
Bardziej szczegółowo6. KOLOR, TŁO I ŚCIEśKI DOSTĘPU
6. KOLOR, TŁO I ŚCIEśKI DOSTĘPU Zanim przejdziemy do praktyki, zajmijmy się nazywaniem kolorów. Są cztery znane mi sposoby wyraŝania kolorów w języku CSS. Pierwszym z nich i jednocześnie najtrudniejszym
Bardziej szczegółowoĆwiczenie 3 - Odsyłacze
Ćwiczenie 3 - Odsyłacze Ćwiczenie to poświęcone jest odsyłaczom czyli powiązaniu plików wewnętrznych i zewnętrznych na róŝne sposoby. Linki, które natychmiast przenoszą w określone miejsce to istota stron
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ół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ół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ół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ół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ół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ół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ółowoĆwiczenie 9 - CSS i wstawianie CSS
Ćwiczenie 9 - CSS i wstawianie CSS Wprowadzenie: Od tego ćwiczenia zajmować się będziemy CSS czyli Kaskadowymi Arkuszami Stylów (Cascading Style Sheets). CSS stanowią uzupełnienie dla HTML-a. HTML odpowiada
Bardziej szczegółowoWprowadzenie do Internetu zajęcia 2
Wprwadzenie d Internetu zajęcia 2 Zakres tematyczny zajęć Tabele Tabele prezentacja danych. Tabele mają szerkie zastswanie na strnach WWW i umżliwiają zaawanswane frmatwanie elementów na strnie. Definicja
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ół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ół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ół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ół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ół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ół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ółowoĆw.4 Dokumenty HTML Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów.
Ćw.4 Dokumenty HTML Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów. Znaczniki HTML (tagi) postać ogólna: zawartość
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ół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ółowoI. Wstawianie rysunków
I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka
Bardziej szczegółowoĆwiczenie 2 Tekst podstawowe znaczniki.
Ćwiczenie 2 Tekst podstawowe znaczniki. Ćwiczenie 2 poświęcone jest formatowaniu tekstu za pomocą znaczników. AŜeby uzyskać poŝądany wygląd tekstu musimy posłuŝyć się określonymi znacznikami. Ćwiczenie
Bardziej szczegółowoCo to jest html? I.Struktura strony:
Co to jest html? Jak tworzyć strony internetowe? Jest ich przecież w Internecie tysiące, a może nawet miliony. Jednak jedne strony bardziej nam się podobają, inne mniej. Z czego to wynika? Atrakcyjność
Bardziej szczegółowoPowtórzenie materiału: CSS3 Spis treści
Powtórzenie materiału: CSS3 Spis treści Kolory...2 Jednostki...3 Czcionka...3 Elementy blokowe...3 Cienie...5 Gradient...5 Zgodność z przeglądarkami...6 Kolory Wartości kolorów w CSS podawać można na 4
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ół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ół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ółowoHTML. 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
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ółowo9. 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
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ół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ółowoKonstrukcja stylu nie należy do zbyt skomplikowanych i wygląda tak jak na poniższym przykładzie.
Tematy: Budowa stylu Osadzanie stylów na stronie Jednostki miar stosowane w CSS Nazewnictwo kolorów używane w CSS Do tego, aby rozpocząć przygodę z kaskadowymi arkuszami stylów oraz świadomie z nich korzystać,
Bardziej szczegółowoĆwiczenie 10 - Selektory
Ćwiczenie 10 - Selektory Wprowadzenie: W tym ćwiczeniu uwaga skupiona będzie na selektorach, czyli tych elementach w kodzie źródłowym dokumentu HTML, którym będą przypisywane atrybuty formatowania, zmieniające
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ół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ółowoKurs 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
Bardziej szczegółowoMateusz Bednarczyk, Dawid Chałaj. Microsoft Word Kolumny, tabulatory, tabele i sortowanie
Mateusz Bednarczyk, Dawid Chałaj Microsoft Word Kolumny, tabulatory, tabele i sortowanie 1. Kolumny Office Word umożliwia nam dzielenie tekstu na kolumny. Zaznaczony tekst dzieli się na wskazaną liczbę
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ółowoZadaniem tego laboratorium będzie zaznajomienie się z podstawowymi możliwościami kompozycji strony i grafiki
Zadaniem tego laboratorium będzie zaznajomienie się z podstawowymi możliwościami kompozycji strony i grafiki Edytory tekstu oferują wiele możliwości dostosowania układu (kompozycji) strony w celu uwypuklenia
Bardziej szczegółowoWymagania na poszczególne oceny w klasach 3 gimnazjum
Wymagania na poszczególne oceny w klasach 3 gimnazjum Znaczenie komputera we współczesnym świecie Przypomnienie wiadomości na temat języka HTML Wstawianie tabeli na stronę WWW Wstawianie listy punktowanej
Bardziej szczegółowoRozdział VI. Tabele i ich możliwości
Rozdział VI Tabele i ich możliwości 3.6. Tabele i ich możliwości W wielu dokumentach zachodzi konieczność przedstawienia danych w formie tabelarycznej. Dlatego też program OO Writer jest wyposażony w
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ółowop { 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
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ół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ół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ół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ółowoEGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2018 CZĘŚĆ PRAKTYCZNA
Arkusz zawiera informacje prawnie chronione do momentu rozpoczęcia egzaminu Układ graficzny CKE 2017 Nazwa kwalifikacji: Tworzenie aplikacji internetowych i baz danych oraz administrowanie bazami Oznaczenie
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ółowoKró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
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ółowoĆwiczenie 1 - Arkusze kalkulacyjne
Ćwiczenie 1 - Arkusze kalkulacyjne 1. Uruchomić program Excel, utworzyć plik o nazwie Ćwiczenia_excel.xls, a następnie zapisać go na dysku D w swoim folderze. 2. Ćwiczenia wstępne Zaznaczyć pojedynczą
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ółowoEGZAMIN 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
Bardziej szczegółowoHTML - podstawowe znaczniki
HTML - podstawowe znaczniki Strukturę dokumentu HTML możemy przedstawić następująco: Tytuł strony W niej zagnieżdżać będziemy pozostałe znaczniki.
Bardziej szczegółowoTło CSS 3. Gabriela Panuś
Tło CSS 3 Gabriela Panuś body { background-color: kolor; TŁO - CSS } TŁO OBRAZKOWE background-image: url(tlo.jpg); /* podajemy ścieżkę do tła */ body { } background: #6495ed url(image/obrazek.png); Właściwości
Bardziej szczegółowoEGZAMIN 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
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ółowoHTML (HyperText Markup Language)
HTML (HyperText Markup Language) Struktura dokumentu tytuł strony sekcja nagłówka Tutaj wpisujemy
Bardziej szczegółowoZnaczniki języka HTML
www.math.uni.lodz.pl/ radmat Elementy inline ... Elementy inline ... ... Elementy inline ... ... ... Elementy inline
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ół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ół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ółowoEGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2018 CZĘŚĆ PRAKTYCZNA
Arkusz zawiera informacje prawnie chronione do momentu rozpoczęcia egzaminu Układ graficzny CKE 2017 Nazwa kwalifikacji: Tworzenie aplikacji internetowych i baz danych oraz administrowanie bazami Oznaczenie
Bardziej szczegółowoJAK ZAPROJEKTOWAĆ WYGLĄD STRONY INTERNETOWEJ W KREATORZE CLICK WEB?
JAK ZAPROJEKTOWAĆ WYGLĄD STRONY INTERNETOWEJ W KREATORZE CLICK WEB? Czy można zbudować atrakcyjną stronę WWW w czasie krótkiej przerwy na kawę? W kreatorze Click Web zrobisz to bez trudu. Wystarczy, że
Bardziej szczegółowoDokument zawiera podstawowe informacje o użytkowaniu komputera oraz korzystaniu z Internetu.
Klub Seniora - Podstawy obsługi komputera oraz korzystania z Internetu Str. 1 Dokument zawiera podstawowe informacje o użytkowaniu komputera oraz korzystaniu z Internetu. Część 3 Opis programu MS Office
Bardziej szczegółowoenova Systemowe Kolorowanie list
enova Systemowe Kolorowanie list Sebastian Wabnik Narzędzie kolorowania list Od wersji enova 7.6 dodano do organizatora listy możliwości konfigurowania kolorowania wierszy (zapisów/rekordów) oraz poszczególnych
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ółowoTworzenie infografik za pomocą narzędzia Canva
Tworzenie infografik za pomocą narzędzia Canva Spis treści Wstęp... 1 Układy... 3 Zmiana tekstu... 4 Obrazki... 5 Elementy... 6 Zdjęcia - Gratis... 6 Siatki... 8 Ramki... 10 Kształty... 12 Linie... 12
Bardziej szczegółowoAdobe InDesign lab. 2 Jacek Wiślicki, Paweł Kośla. Spis treści: 1 Dokument wielostronicowy Książka Eksport do PDF... 7.
Spis treści: 1 Dokument wielostronicowy... 2 1.1 Książka... 2 1.2 Eksport do PDF... 7 strona 1 z 7 1 Dokument wielostronicowy Poniższa instrukcja zawiera przykład procedury projektowania dokumentów wielostronicowych
Bardziej szczegółowoGrafika w dokumencie tekstowym. Technologia Informacyjna Lekcja 26
Grafika w dokumencie tekstowym Technologia Informacyjna Lekcja 26 Wstawianie obiektów Do dokumentu tekstowego moŝna wstawić róŝnego rodzaju obiekty, między innymi: grafikę,, animację,, tabelę, wykres.
Bardziej szczegółowoĆwiczenie 1 Deklarowanie metainformacji.
Zadania do wykonania: Ćwiczenie 1 Deklarowanie metainformacji. Ćwiczenie 1 poświęcone jest wypełnieniu części dokumentu HTML. Umieszczamy w niej wszystkie informacje dodatkowe interpretowane przez
Bardziej szczegółowoBox model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości.
Box model Box model: Content Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Box model: Padding Content Content - obszar zawartości określany jest za pomocą deklaracji
Bardziej szczegółowoPraca z tekstem: WORD Listy numerowane, wstawianie grafiki do pliku
Praca z tekstem: WORD Listy numerowane, wstawianie grafiki do pliku W swoim folderze utwórz folder o nazwie 29_10_2009, wszystkie dzisiejsze zadania wykonuj w tym folderze. Na dzisiejszych zajęciach nauczymy
Bardziej szczegółowoEdytor tekstu MS Word 2010 PL. Edytor tekstu MS Word 2010 PL umożliwia wstawianie i formatowanie tabel.
Edytor tekstu MS Word 2010 PL. Edytor tekstu MS Word 2010 PL umożliwia wstawianie i formatowanie tabel. Edytor teksu MS Word 2010 PL: wstawianie tabel. Wstawianie tabeli. Aby wstawić do dokumentu tabelę
Bardziej szczegółowo1. Otwórz skoroszyt Zadania 04.xlsx i zapisz otwarty skoroszyt pod nazwą: Wykonane zadanie 4.xlsx.
1. Otwórz skoroszyt Zadania 04.xlsx i zapisz otwarty skoroszyt pod nazwą: Wykonane zadanie 4.xlsx. 2. Przejdź do arkusza Biuro. Wstaw pusty wiersz przed wierszem 2. 3. Scal komórki od A2:F3, wyśrodkowując
Bardziej szczegółowoOperacja macro. czyli jak podpisać zdjęcie i zrobić miniaturę. Tworzymy nową akcję. Anna Góra. Zmiana dpi zdjęcia na 300 piks/cal.
Operacja macro czyli jak podpisać zdjęcie i zrobić miniaturę 29 września 2009 29 września 2009r. Tworzymy nową akcję 1. Otwieramy zdjęcie w Photoshopie. W palecie Operacje, po prawej stronie obszaru roboczego
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ół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ół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ół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ółowoSpis treści. Rozdział 2. Graficzna oprawa witryny...z... 19 Stosowanie motywu...s...s.. 19
Spis treści Wstęp...z... 5 Rozdział 1. Nowa witryna sieci Web...z... 7 Tworzenie szkieletu witryny...s... 7 Ustawienia witryny...s...s... 8 Hierarchia witryny...s...s... 10 Nazwy i tytuły stron...s...s..
Bardziej szczegółowoGrafika 3D program POV-Ray - 1 -
Temat 1: Ogólne informacje o programie POV-Ray. Interfejs programu. Ustawienie kamery i świateł. Podstawowe obiekty 3D, ich położenie, kolory i tekstura oraz przezroczystość. Skrót POV-Ray to rozwinięcie
Bardziej szczegółowoINSTRUKCJA DLA AUTORÓW. INFORMATION FOR AUTHORS (Tłumaczenie tytułu artykułu w języku angielskim.)
XVII Sympozjum Modelowanie i Symulacja Systemów Pomiarowych 20-24 września 2009r., Krynica INSTRUKCJA DLA AUTORÓW Imię i nazwisko autora(-ów) 1) STRESZCZENIE Niniejsza instrukcja dotyczy sposobu przygotowania
Bardziej szczegółowoECDL/ICDL Grafika menedżerska i prezentacyjna Moduł S2 Sylabus - wersja 5.0
ECDL/ICDL Grafika menedżerska i prezentacyjna Moduł S2 Sylabus - wersja 5.0 Przeznaczenie Sylabusa Dokument ten zawiera szczegółowy Sylabus dla modułu ECDL/ICDL Grafika menedżerska i prezentacyjna. Sylabus
Bardziej szczegółowoTekst na mapach. Teksty na mapie. Ustawienia mapy. W tej instrukcji zostanie opisany sposób w jaki można na mapach wyświetlać teksty
Teksty na mapie W tej instrukcji zostanie opisany sposób w jaki można na mapach wyświetlać teksty Dane z programu Agrinavia Field Na mapach utworzonych w Agrinavia Map możemy wyświetlać informacje z programu
Bardziej szczegółowoLaboratorium z Grafiki InŜynierskiej CAD. Rozpoczęcie pracy z AutoCAD-em. Uruchomienie programu
Laboratorium z Grafiki InŜynierskiej CAD W przygotowaniu ćwiczeń wykorzystano m.in. następujące materiały: 1. Program AutoCAD 2010. 2. Graf J.: AutoCAD 14PL Ćwiczenia. Mikom 1998. 3. Kłosowski P., Grabowska
Bardziej szczegółowoAlfabetyczna 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
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ółowoDokument hipertekstowy
Dokument hipertekstowy Laboratorium 4 CSS mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Cel poznanie konceptu stylów tworzenie różnych typów reguł stylów Style służą do zmiany wyglądu elementów
Bardziej szczegółowoECDL/ICDL Przetwarzanie tekstów Moduł B3 Sylabus - wersja 5.0
ECDL/ICDL Przetwarzanie tekstów Moduł B3 Sylabus - wersja 5.0 Przeznaczenie sylabusa Dokument ten zawiera szczegółowy sylabus dla modułu ECDL/ICDL Przetwarzanie tekstów. Sylabus opisuje zakres wiedzy i
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ółowo1.2 Logo Sonel podstawowe załoŝenia
1.2 Logo Sonel podstawowe załoŝenia Logo czyli graficzna forma przedstawienia symbolu i nazwy firmy. Terminu logo uŝywamy dla całego znaku, składającego się z sygnetu (symbolu graficznego) i logotypu (tekstowego
Bardziej szczegółowo