Technologia informacyjna - ćwiczenia 7
Technologia informacyjna - ćwiczenia 7
Technologia informacyjna - ćwiczenia 7
Technologia informacyjna - ćwiczenia 7
Elementy HTML
Elementy HTML
Elementy HTML
Elementy HTML
Kontenery
Kontenery
Kontenery
Kontenery
div
div
div
div
div jest kontenerem blokowym, mogącym przechowywać dowolne inne elementy HTML.
Przykład 1
Przykład 1
Przykład 1
Przykład 1

zawartość kontenera

span
span
span
span
span jest kontenerem wierszowym, który wyróżnia część tekstu (lub innych elementów HTML),
umożliwiając zastosowanie odrębnego stylu do wyróżnionego fragmentu (np. poprzez nadanie mu
klasy).
Przykład 2
Przykład 2
Przykład 2
Przykład 2
treść treść wyróżniona treść
Paragrafy
Paragrafy
Paragrafy
Paragrafy
Tekst na stronie zwykle podzielony jest na paragrafy. Paragraf zaczyna się tagiem

, a kończy
tagiem

. Każdemu paragrafowi możemy nadać inny styl, np. poprzez przypisanie mu klasy.
Przykład 3
Przykład 3
Przykład 3
Przykład 3

Treść paragrafu 1

Treść paragrafu 2

Tabele
Tabele
Tabele
Tabele
Tabela w założeniu służy do prezentacji danych w czytelnej dla człowieka formie tabelarycznej. Jest
ona jednak często używana również do rozkładania elementów strony (choć zdecydowanie zalecane
jest korzystanie w tym celu z kontenerów).
Tabela zawiera następujące znaczniki:
table - ogranicza całą tabelę
tr - definiuje wiersz tabeli (table row)
td - definiuje komórkę z danymi (table data)
Elementy CSS
Elementy CSS
Elementy CSS
Elementy CSS
Czcionka
Czcionka
Czcionka
Czcionka
Czcionki w CSS definiowane są za pomocą następujących elementów:
font-family - określa krój czcionki
font-size - określa rozmiar czcionki
font-weight - określa stopień pogrubienia czcionki
font-style - określa dodatkowy styl czcionki (np. pochylenie)
Przykład 4
Przykład 4
Przykład 4
Przykład 4
body {
font-family: "Lucida Grande", Sans-Serif;
font-size: 10pt;
font-weight: normal;
font-style: italic;
}
Pozycja
Pozycja
Pozycja
Pozycja
float - dany kontener będzie kontenerem "pływającym" po zadanej stronie kontenera
nadrzędnego
display - określa styl wyświetlania danego elementu (np. niewidoczny, blokowy, wierszowy,
jak tabela)
Ramka
Ramka
Ramka
Ramka
Można określić od razu całą ramkę lub każdy z jej boków osobno. Możliwe jest ustalanie ramki tylko
na niektórych bokach elementu.
Przykład 5
Przykład 5
Przykład 5
Przykład 5
.element_menu {
border: 1px dotted red;
}
#kontener_menu {
border-left: 0px;
border-top: 0px;
border-bottom: 0px;
border-right: 2px solid #c0c0c0;
}