PRACA LABORATORYJNA NR 2 LISTY SĄ PROSTE I Zagnieżdżone. TWORZENIE TABEL HTML

Cel pracy: tworzenie i testowanie pliku HTML. Twórz listy. Wstawianie tabel i ich budowa. Układ stron za pomocą tabel.

Krótka informacja teoretyczna

Istnieją trzy główne typy list w dokumencie HTML: numerowana, punktowana lista definicji

Możemy tworzyć zagnieżdżone listy, używając różnych tagów list lub powtarzając jedną wewnątrz drugiej. Aby to zrobić, wystarczy umieścić jedną parę tagów (początek i koniec)

wewnątrz drugiego. To, czy zagnieżdżone elementy listy będą miały te same wypunktowania, co element listy, zależy od przeglądarki. Aby uzyskać więcej informacji, zobacz sekcję „Listy zagnieżdżone”.

Listy numerowane

Na liście numerowanej przeglądarka automatycznie wstawia numery pozycji w kolejności. Oznacza to, że jeśli usuniesz jedną lub więcej pozycji z listy numerowanej, reszta numerów zostanie automatycznie przeliczona.

Lista numerowana zaczyna się od tagu początkowego

i kończy się tagiem

1. Programowanie

2. Algorytmizacja

3. Projekt

Etykietka

może mieć parametry:

gdzie: typ - typ licznika:

A - duże litery łacińskie (A, B, C ...) a - małe litery łacińskie (a, b, c ...) I - duże cyfry rzymskie (I, II, III ...) i - małe cyfry rzymskie (i, ii, iii ...) 1 - cyfry regularne (1,2,3 ...)

start \u003d "n" - liczba, od której zaczyna się odliczanie Na przykład:

15. Programowanie
16. Algorytmizacja
17. Projekt

XV. Programowanie

XVI. Algorytmizacja

XVII. Projekt

Listy punktowane.

W przypadku list wypunktowanych przeglądarka zazwyczaj używa punktorów do oznaczenia elementu listy. Typ znacznika jest zwykle konfigurowany przez użytkownika przeglądarki.

Lista punktowana zaczyna się od tagu początkowego

i kończy się tagiem
... Każda pozycja listy zaczyna się od znacznika
1. ... Na przykład:

2. Programowanie
3. Algorytmizacja
4. Projekt

Programowanie

Algorytmizacja

Projekt

Etykietka

może mieć parametr:

Typ tagu

określa wygląd znacznika jako domyślny (dysk), okrągły (kółko) lub kwadratowy (kwadrat). Na przykład:

• Programowanie
• Algorytmizacja
• Projekt

 Programowanie

 Algorytmizacja

 Projekt

Listy definicji.

< dl>… - tag pary - wyświetla listy definicji.

Projekt:

Semestr

Definicja terminu

Z metką

możesz użyć atrybutu compact, aby ustawić bardziej zwarty układ elementów listy.

Projekt:

Semestr

Definicja terminu

Tabele w formacie HTML są zorganizowane jako zbiór kolumn i wierszy. Komórki tabeli mogą zawierać dowolne elementy HTML, takie jak nagłówki, listy, akapity, kształty, grafika i elementy formularzy.

Główne znaczniki tabeli Tabela:

...

To są główne tagi opisujące tabelę. Wszystkie elementy tabeli muszą znajdować się wewnątrz tych dwóch tagów. Domyślnie tabela nie ma obramowań ani separatorów. Obramowanie jest dodawane z atrybutem border.

Rząd tabeli: ...

Liczba wierszy tabeli zależy od liczby napotkanych par znaczników ..... Wiersze mogą mieć atrybuty align i valign, które opisują wizualne położenie zawartości wierszy w tabeli.

Komórka tabeli: ...

Opisuje standardową komórkę tabeli. Komórkę tabeli można opisać tylko w wierszu tabeli. Każda komórka powinna być ponumerowana numerem kolumny, dla której jest opisana. Jeśli w niektórych kolumnach w wierszu brakuje jednej lub więcej komórek, przeglądarka wyświetla pustą komórkę. Domyślne położenie danych w komórce jest określane przez atrybuty align \u003d "left" i valign \u003d "middle". To ustawienie można poprawić zarówno na poziomie opisu linii, jak i na poziomie opisu komórki.

Dowolna komórka w tabeli może być zdefiniowana nie za pomocą tagów

…i tagi … - Nagłówek tabeli (nagłówek tabeli). th

jest zwykłą komórką, ale tekst wewnątrz tych tagów będzie pogrubiony i wyśrodkowany.

Podpis: ...

Ten znacznik opisuje nazwę stołu (podpis). Etykietka musi być obecny w środku

..., ale poza opisem dowolnego wiersza lub komórki. Domyślna ma atrybut align \u003d "top", ale może być jawnie ustawiony na align \u003d "bottom". wyrównać

określa, gdzie podpis zostanie umieszczony na górze lub na dole tabeli. Podpis jest zawsze wyśrodkowany na szerokości tabeli.

Podstawowe atrybuty obramowania tabeli

Ten atrybut jest używany w znaczniku tabeli. Jeśli ten atrybut jest obecny, obramowanie tabeli jest rysowane dla wszystkich komórek i dla całej tabeli. obramowanie może być wartością liczbową określającą szerokość obramowania, na przykład border \u003d "3".

Pytania do testu

Co to jest HTML? Ile par wymaganych tagów znasz? Jakie są tagi między tytułem dokumentu? Jaka para znaczników definiuje akapit w dokumencie? Nagłówek drugiego poziomu, wyrównany do prawej, jest określony tagiem: Jak poprawnie po angielsku. W języku znaczniki wyrównania są zapisywane do prawej, lewej strony, środka, szerokości: Brak parametru align w znaczniku nagłówka lub akapitu prowadzi do wyrównania tekstu według: Jakie znasz niesparowane znaczniki? Poziomą linię o szerokości 50%, grubości 2 pikseli, nie wytłoczoną, zaznaczoną na niebiesko tag Do czego jesteśmy potrzebni w html? Jakie znasz 2 typy (metody) formatowania tekstu w dokumencie html? Jakie tagi należy zastosować, aby uzyskać przekreślony pogrubiony tekst? Jak wygląda fragment kodu, który nadaje tekst pisany kursywą i podkreślony: Jakie tagi przesuwają tekst w stosunku do głównego poziomu wiersza (indeks górny i dolny)? Do którego tagu formatowania należą parametry twarzy, koloru i rozmiaru? Co się stanie, jeśli czcionka określona w parametrze face nie jest zainstalowana na komputerze? Które tagi wyświetlają ten sam tekst (kursywą) dla różnych przypisań? Co się stanie, jeśli tag nie będzie zamknięty? Jeśli chcesz wyświetlić na stronie tekst o stałej szerokości, zrobisz to za pomocą tagów: Zinterpretuj następujący fragment kodu:
Wesoły HTML Co to jest hipertekst? Jakie są części składowe dowolnego łącza? Aby zorganizować łącze z indeksu. htm do dokumentu book. htm znajdujący się w tym samym katalogu, należy wpisać wiersz: Jak wygląda zwykły hiperłącze (bez narzuconych mu stylów)? Co się stanie, jeśli brakuje pliku, do którego tworzysz łącze? Jak poprawnie odwoływać się z pliku index. htm znajdujący się u nasady risunki. htm znajduje się w folderze obrazów pod shedevr? Kiedy warto korzystać z linków wewnętrznych? Aby utworzyć wewnętrzny link do sekcji „Publikacje” (anchor-izdan) z sekcji „Drukuj”: Wyjaśnij znaczenie następującego fragmentu: Wniosek Jak połączyć się ze skrzynką pocztową ***** @ *** pl Co decyduje o parametrze bgcolor? Jakie systemy liczbowe są używane do reprezentowania kolorów w HTML? Jaki kolor reprezentuje niebieski? Jak wygląda strona html bez parametrów tagu body? Czy sprawdzić poprawne trzy atrybuty parametru tagu body? Jaki parametr ustawia kolor oglądanego linku? Ile parametrów tagu body, definiujących granice pól dokumentu html, znasz. Jaki parametr tagu body umożliwia umieszczenie obrazu jako tła dokumentu? Jaki jest tag w przypadku listy numerowanej i wypunktowanej? Jak zmienić typ znacznika na wypełniony kwadrat? Jak scalić komórki tabeli w pionie? Poziomo?

Przeglądarka	Internet Explorer			Netscape			Opera			Safari	Mozilla	Firefox
Wersja	5.5	6.0	7.0	6.0	7.0	8.0	7.0	8.0	9.0	1.0	1.7	1.0	2.0
Utrzymany	tak	tak	tak	tak	tak	tak	tak	tak	tak	tak	tak	tak	tak

Opis

Etykietka to kontener służący do zmiany cech czcionki, takich jak rozmiar, kolor i krój pisma. Mimo że ten tag jest nadal obsługiwany we wszystkich przeglądarkach, jest przestarzały i zaleca się jego usunięcie na rzecz stylów.

Składnia

Tekst

Tag końcowy

Wymagany.

Opcje

kolor Ustawia kolor tekstu. twarz Określa krój czcionki. rozmiar Określa rozmiar czcionki w konwencjonalnych jednostkach.

Przykład 1. Używanie tagu










P.pierwsza litera tego zdania jest napisana w języku Arial, zaznaczona na czerwono i powiększona.





Opis parametrów tagu

Parametr KOLOR

Opis

Ustawia kolor tekstu wewnątrz kontenera .

Składnia

...

Argumenty

Wartość koloru można ustawić na dwa sposoby.

1. Według nazwy

Przeglądarki obsługują niektóre kolory według nazwy.

2. Według wartości szesnastkowej

Liczby szesnastkowe służą do ustawiania kolorów. System szesnastkowy, w przeciwieństwie do systemu dziesiętnego, opiera się, jak sama nazwa wskazuje, na liczbie 16. Liczby będą wyglądały następująco: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C , D, E, F. Liczby od 10 do 15 zastępuje się literami łacińskimi. Liczby szesnastkowe większe niż 15 są tworzone przez połączenie dwóch liczb w jedną. Na przykład 255 miejsc po przecinku odpowiada szesnastkowemu FF. Aby uniknąć nieporozumień w definicji systemu liczbowego, znak krzyżyka # jest umieszczany przed liczbą szesnastkową, na przykład # 666999. Każdy z trzech kolorów - czerwony, zielony i niebieski - może mieć zakres od 00 do FF. W ten sposób oznaczenie koloru jest podzielone na trzy składowe #rrggbb, gdzie pierwsze dwa znaki oznaczają czerwoną składową koloru, dwa środkowe - zielony, a ostatnie dwa - niebieski.

Analogowy CSS

Domyślna wartość

Domyślny kolor przeglądarki.

Parametr TWARZ

Opis

Parametr face służy do ustawiania kroju czcionek używanych w tekście. Można podać kilka nazw czcionek, oddzielając je przecinkami. W takim przypadku, jeśli pierwsza określona czcionka nie zostanie znaleziona, przeglądarka użyje następnej z listy.

Składnia

...

Argumenty

Dowolna liczba nazw czcionek oddzielonych przecinkami. Uniwersalne rodziny czcionek:
szeryfowe - czcionki szeryfowe (przestarzałe), takie jak Times;
sans-serif - czcionki szeryfowe (czcionki bezszeryfowe lub bezszeryfowe), zazwyczaj Arial;
cursive - kursywa;
fantasy - czcionki dekoracyjne;
o stałej szerokości - czcionki o stałej szerokości, szerokość każdego znaku w tej rodzinie jest taka sama.

Analogowy CSS

Domyślna wartość

Domyślna czcionka przeglądarki.

SIZE parametr

Opis

Określa rozmiar czcionki w konwencjonalnych jednostkach od 1 do 7. Średni rozmiar używany domyślnie to 3. Rozmiar czcionki można określić zarówno jako wartość bezwzględną (na przykład rozmiar \u003d "4"), jak i wartość względną (na przykład rozmiar \u003d "+ 1", rozmiar \u003d „- 1”). W tym drugim przypadku rozmiar zmienia się w stosunku do podstawy. Na rozmiar czcionki ma wpływ nie tylko określony parametr rozmiaru, ale także wybór kroju czcionki. Na przykład Arial wygląda na większy niż Times, a Verdana jest nieco większy niż Arial. Należy o tym pamiętać przy wyborze czcionki i jej rozmiarów.

Składnia

...

Argumenty

Liczba całkowita od 1 do 7 lub zmień wartość w górę lub w dół za pomocą symboli + i -.