LV18.

LV18. CSS poveznice, liste i tablice

Petar Lovaković 3.A

PRIPREMA

1. Poveznice (eng. links):

Poveznice su elementi na web stranicama koji omogućuju korisnicima navigaciju između različitih dijelova internetskog prostora. Poveznice se definiraju HTML oznakama i obično se koriste za povezivanje na druge web stranice, dokumente, slike ili druge resurse. Osnovna HTML oznaka za stvaranje poveznica je `<a>` (anchor).

Poveznice mogu voditi do različitih vrsta resursa, uključujući:

- Druge web stranice: Povezivanje s drugim internetskim resursima.

- Dokumenti: Povezivanje s drugim HTML ili tekstualnim dokumentima.

- Slike i multimedia: Povezivanje s grafičkim i multimedijalnim datotekama.

- Interni dijelovi stranice: Povezivanje s određenim dijelovima iste stranice.

2. Vrste lista definirane HTML-om:

U HTML-u postoje tri osnovne vrste lista, a svaka se definira pomoću određenih oznaka:

- Neuređena lista (`<ul>` - Unordered List): Koristi se za prikazivanje popisa stavki koje nemaju numerički ili abecedni redoslijed. Svaka stavka u neuređenoj listi označava se simbolom poput kružića, kvadrata ili strelice.

- Uređena lista (`<ol>` - Ordered List): Koristi se za prikazivanje popisa stavki koje imaju numerički ili abecedni redoslijed. Svaka stavka u uređenoj listi označena je brojem ili slovom.

- Definicijska lista (`<dl>` - Definition List): Koristi se za prikazivanje pojma (ili naziva) i njegove definicije. Svaka stavka u definicijskoj listi sastoji se od pojma (`<dt>`) i njegove definicije (`<dd>`).

VJEŽBA

2.

3.

<!DOCTYPE html>

<head>

<title>Usporedba Tehničkih Proizvoda</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 20px;

}

table {

width: 100%;

border-collapse: collapse;

margin-bottom: 20px;

}

th, td {

border: 1px solid #dddddd;

text-align: left;

padding: 8px;

}

th {

background-color: #f2f2f2;

}

img {

max-width: 100%;

height: auto;

}

a {

text-decoration: none;

color: #007bff;

}

a:hover {

text-decoration: underline;

}

</style>

</head>

<body>

<h1>Usporedba Tehničkih Proizvoda</h1>

<table>

<tr>

<th>Prozivod</th>

<th>Logitech G332 slušalice</th>

<th>Asus TUF Gaming H3 Wireless</th>

<th>Speedlink Legatos Stereo</th>

</tr>

<tr>

<td>Slika</td>

</tr>

<tr>

<td>Karakteristike</td>

<td>•HEADPHONE

•Driver: 50 mm

•Frequency Response: 20Hz-20KHz

•Impedance: 39 Ohms (passive), 5k Ohms (active)

•Sensitivity: 107 dB SPL/mW

•MICROPHONE (BOOM):

•Microphone Pickup Pattern: Cardioid (Unidirectional)

•Size: 6 mm

•Frequency Response: 100Hz–20 KHz</td>

<td>Product Type Wireless headset

•Usage Scenario Gaming

•Interface Wireless

•Connector 2.4Ghz, USB-A, USB-C

•Support Platform PC, PlayStation 4, PlayStation 5, Nintendo Switch

•Driver Material Neodymium magnet

•Driver Size 50mm

•Headphones Impedance 32 ohm

•Headphones Frequency Response 20 ~ 20000 Hz

•Microphone Pick-up Pattern Unidirectional</td>

<td>• PC gaming slušalice sa stereo zvukom

• Inline daljinski

• Osjetljivi mikrofon

• Maksimalna komfornost

• Jednostavna instalacija

• Duljina kabela: 1.8 m

• Način spajanja: 2x 3.5mm konektor

</td>

</tr>

<tr>

<td>Poveznica</td>

<td><a href="https://play.co.rs/2019/03/10/hardware-logitech-g332/">Logitech G332 slušaliceA</a></td>

<td><a href="https://www.bug.hr/recenzije/asus-tuf-gaming-h3-wireless-viseplatformski-basist-20172" target="_blank">Asus TUF Gaming H3 Wireless</a></td>

<td><a href="https://game-electronic.hr/proizvod/speedlink-legatos-stereo-headset/" target="_blank">Proizvod C</a></td>

</tr>

</table>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Kalendar za Veljaču 2024.</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 20px;

text-align: center;

}

h1 {

color: #333;

}

table {

width: 80%;

margin: 20px auto;

border-collapse: collapse;

}

th, td {

border: 1px solid #dddddd;

padding: 10px;

cursor: pointer;

}

th {

background-color: #f2f2f2;

}

td:hover {

background-color: #e6e6e6;

}

td.sunday {

color: #008000;

}

td:not(.february) {

color: #808080;

}

img {

max-width: 100%;

height: auto;

margin-top: 20px;

}

</style>

</head>

<body>

<h1>Kalendar za Veljaču 2024.</h1>

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>