P2 - seznamy, obrázky

Projekt cvobr

http://ivtcerna.8u.cz/p2cviceni/p2cviceni.html

součásti projektu: cv1.html, sport.html, cv2.html , obrazky.html

Seznamy

<ul> následují položky s odrážkami

<ol> následují položky číslované

<li>položka</li>

cv1.html:

Tělo - v tagu <body> mohu použít atributy:

barva pozadí - bgcolor

barva textu - text

obrázek na pozadí - background

Barvy:

pojmenované
kód (lze vybírat z podokna barvy/colors)

Vyzkoušejte v novém souboru. obrazky.html

Nadpis 2 Obrázky

vložit obrázky z "myš a kočka moje milovaná.zip"

- soubory musíš upravit na stejný rozměr v px
- přejmenovat a uložit do složky p2cviceni

a) Na jeden řádek

b) Pod sebe

http://ivtcerna.8u.cz/p2cviceni/obrazky.html

Vložte tento odstavec mezi oba obrázky a poté vyzkoušejte všechny varianty obtékání.

Obtékání textu:

Lze nastavit obrázku obtékání - atributem align (zapisuje se dovnitř před />) může mít hodnotu "left" nebo "right". Vyzkoušejte jak se bude obrázek chovat, když bude vložen před nadpis, pod nadpis a bude mít nastaveno obtékání.

Šířka obrázku:

- v pixlech lze nastavit atributem width='šířka'
- (např.: <img src='mys.jpg' title='Myš' width='100px'/>

v procentech width='xy%' vzhledem k velikosti okna

Lze tak jeden obrázek v rámci webu použít ve více velikostech.

Např. obrázek rok.png na úvodní straně rok.html ve skutečné velikosti

a jako ikonka(odkaz) pro návrat v souborech jaro.html, leto.html ve zmenšené width='100px'

Pokud by soubor byl uložen v podsložce (např. obr) musí být v tagu uvedena cesta k tomuto souboru (např. obr/jaro.jpg)

Úkol rok

Doplň soubory Rok.html, jaro.html,... obrázky ze souborů rok.jpg, jaro.jpg,...

Web s obrázky by měl vypadat takto:

http://ivtcerna.8u.cz/rok2/rok.html

Zobrazení přípon v okně složky

Obrázky jsou různého typu - jpg, png, gif,...

Abychom se v tom vyznali, měli bychom si nechat zobrazovat v okně složky přípony názvů souborů. Pak budeme dělat méně chyb.

položky na řádcích obalujeme tagem <li></li>

Vytvoř: sport.html

Nadpis 1: Sporty Nadpis 2: Letní

odrážky: vyjmenuj 5 sportů

<ul>

<li> Atletika</li>

<li> Cyklistika</li>

</ul>

Nadpis 2: Zimní

odrážky: vyjmenuj 5 sportů

obrazky.html:

Nastav pomocí atributů tagu Body:

- background = 'obrazek.*' použij obrázek - ulož jej do složky projektu (vhodný k bílému textu)
- barva textu bílá

Vkládání obrázků:

1. Příprava obrázku

- grafické úpravy - ořez, velikost -> online editor https://www.upravafotek.cz/modern/
- pojmenování souboru a uložení do složky webu.

1. Vložení tagu na stránku:
2. <img src='cestakobrazku/obrazek.*' title='popis' alt='alternativní text'/>

Cesty - relativní (v rámci webu) - k obrázkům:

je-li ve stejné složce - jmeno.*

je-li v podsložce - podslozka/jmeno.*

je-li v nadřazené složce - ../jmeno.*

!!!!bez diakritiky!!!!!!!!!!!!

Př. vlož obrázek na stránku cv2.html:

Nad nadpis <h1>Velikonoce</h1> vložím

Pokud chceme obrázek zarovnat a obtékat, použijeme atribut align='right'('left')

Page updated

Google Sites

Report abuse