HTML - vložení obrázku značka pro vložení obrázku : <img>

Prezentace na téma: "HTML - vložení obrázku značka pro vložení obrázku : <img>"— Transkript prezentace:

1 HTML - vložení obrázku značka pro vložení obrázku : <img>
atributy : src, align, alt, width, height, border šířka, výška, rámeček povinný atribut src = hodnota (= URL souboru s obrázkem .gif, nebo .jpeg) Pozn.: src = source (zdroj) obrázky bývají v samostatné složce images, pics pokud je obr. ve stejné složce jako soubor .html, který ho používá, je URL zredukované na jméno příslušného souboru s obrázkem standard nedefinuje velikost, rozměry, formát obrázku

2 HTML - vložení obrázku atribut align s hodnotami: top, middle, bottom, left, right umisťuje obr. na: horní hranu přilehlého textu, vertikálně vycentrován vzhledem k běžné řádce, na spodní hranu textu, u levého okraje stránky, obtéká ho text u pravého okraje stránky, obtéká ho text lze použít i atribut center

3 HTML - vložení obrázku atribut alt
alternativní text, který prohlížeč zobrazí, když není možné zobrazit obr. (např. u textových prohlížečů - Lynx) nové prohlížeče zobrazí popis při přechodu myší nad obrázkem alt = „textový řetězec, max znaků“

4 HTML - vložení obrázku Příklady:
<img src="obrazek.gif" align="left" > obr. je u levého okraje stránky, je vyjmut z běžného řádku, text ho obtéká odshora Př.:<img src=“ align=“left”> Tento text bude vpravo od obrázku <br clear=“left”> Tento bude až pod obrázkem, přes celou stránku

5 HTML - výsledek Tento text bude vpravo od obrázku Tento bude až pod obrázkem, přes celou stránku umístění pokračování textu pod obrázkem způsobí atribut clear = “left” značky <br> atribut clear = “all” zahájí další text na novém řádku až pod všemi obtékanými obrázky

6 HTML - vložení obrázku <img src="obrazek.gif" width="70" height="70" alt="popis obrázku" border="2"> zde je určena šířka, výška, rámeček a alternativní text <img src="obrazek.gif" hspace="10" vspace="10"> hspace, vspace = horizontální a vertikální mezera okolo obrázku v pixelech

7 HTML - kotva obsahující obrázek
Příklad - seznam, který tvoří obrázky a text vedle, tj. na jednom řádku: <ul> UL viz dále <li> <A href= “uvod.html”> úvodní tag A <img src=“ pics/obr1.gif” align=center> Úvod do problému </A> koncový tag A <p> <li> <A href= “historie.html”> úvodní A < img src=“ pics/obr2.gif” align=center > Historie </A> koncová A </ul>

8 HTML - kotva obsahující obrázek
zdrojový text obsahuje uspořádaný seznam tag <ul> unordered list se dvěma položkami <li> =list item viz dále první kotva - A - odkazuje na soubor uvod.html, druhá na historie.html na soubor se dostanete po kliknutí buď na obrázku, nebo na textu vedle obrázku - viz např. Úvod do problému

9 HTML zobrazí se: Úvod do problému obr1.gif Historie obr2.gif

10 HTML - seznamy tři různé možnosti pro vytvoření seznamů (výčtů)
číslovaný seznam, seznam s odrážkami a seznam definic <OL> číslovaný seznam (Ordered List) <UL> seznam s odrážkami (Unordered List) <LI> položka v seznamech <OL> , <UL> (List Item) </LI> koncová zn. (v XHTML, jinak se vynechává) <DL> seznam definic (Definition List) =slovníček pojmů <DT> pojem v <DL> (Definition Term) <DD> vysvětlení v <DL> (Definition Description) seznamy lze vnořovat

11 HTML - seznam definic, příklad
<DL> <DT><Strong> HTML </Strong> <DD>Jazyk pro formátování 3W dokumentu <DT><Strong> HTTP </Strong> <DD>Protokol pro přenos hypertextu </DL>

12 HTML - seznam definic, příklad
zobrazí se: HTML Jazyk pro formátování 3W dokumentu HTTP Protokol pro přenos hypertextu

13 HTML - seznamy a výčty neuspořádaný seznam - bude s odrážkami
značky <ul> </ul> vnořené značky jsou <li> číslovaný seznam - atributy start a type <ol start = 5> začíná se číslovat od 5 type mění styl číslování =A velká písmena =a malá písmena =I (event. =i) římské číslování =1 arabské vhodnější jsou šablony stylů

14 HTML - seznamy a výčty <li> má také atribut type (mění styl pro řádek)

15 HTML - tabulky značky pro tabulky:
<TABLE> definuje základní vlastnosti tabulky <CAPTION> pro nadpis tabulky <TR> (table record) popisuje vlastnosti řádku tabulky - tvoří ho následující značky: <TH> (table heading) definuje hlavičku tabulky <TD> (table data) definuje obsah jednotlivých buněk v řádku

16 HTML - Table atributy značky <Table>
<TABLE BORDER=”číslo” CELLPADDING=”číslo” CELLSPACING=”číslo” WIDTH=”číslo” > dále bude vlastní tabulka popsaná řádek po řádku pomocí <TR>, <TD> </TABLE> BORDER= specifikuje šířku rámečku v pixelech, pokud je nula, rámeček se neobjeví, implicitně 0. CELLPADDING= určuje vzdálenost obsahu tabulky od okraje, implicitně 1. CELLSPACING= určuje mezeru mezi buňkami, implicitně 2. WIDTH= šířka tabulky v px nebo v % (100%, znamená přes celou obrazovku) = včetně ohraničení a mezer v buňkách ALIGN pozice tabulky na stránce (LEFT, RIGHT, CENTER)

17 HTML - tabulky např. align=“center” text obtéká nad tabulkou a pod ní
zde má Align jiný význam, než u <tr><th><td>, kde se týká zarovnání textu uvnitř buňky VALIGN - implicitní svislé zarovnání v buňkách tabulky je na střed tabulky možnosti=MIDDLE|TOP|BOTTOM|BASELINE HEIGHT - doporučená výška

18 HTML - Caption Nadpis tabulky:
<CAPTION ALIGN=CENTER|LEFT|RIGHT|TOP|BOTTOM VALIGN=TOP|BOTTOM> text nadpisu tabulky </CAPTION> ALIGN= umožňuje zarovnávání vodorovné i svislé implicitně je nadpis zarovnaný na střed /CENTER/ a nad tabulkou /TOP/ BOTTOM - nadpis je pod tabulkou VALIGN= umožňuje jen zarovnávání svislé (jen IE) nadpis se dá umístit kamkoliv do tabulky a mezi značky řádků

19 HTML - tabulky ALIGN a VALIGN zarovnání
<TR ALIGN=CENTER|LEFT|RIGHT VALIGN=MIDDLE|TOP|BOTTOM|BASELINE> <TD ALIGN=CENTER|LEFT|RIGHT VALIGN=MIDDLE|TOP|BOTTOM|BASELINE COLSPAN=”číslo” ROWSPAN=”číslo” > <TH> obdobná značka jako TD , pouze text v hlavičce je tučný a implicitně zarovnán na střed. ALIGN a VALIGN zarovnání COLSPAN spojuje více buněk vedle sebe v jednu větší. ROWSPAN spojuje aktuální buňku s buňkou (buňkami) ve sloupci pod ní musí se na něj pamatovat i v dalších sloupcích

20 HTML - tabulky buňky tabulky - je pro prohlížeč samostatné okno
obsah buňky se zalamuje jako obsah těla další atributy BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT, BORDERCOLORDARK

21 HTML - styly Styl můžeme se značkou spojit 3 způsoby:
1. přímo vložené řádkové styly (silnější než dále uvedené způsoby) do značky zapíšeme atribut style (není to značka!!!) <h1 style = “color:blue; font/style:italic”> </h1> potlačí obecnější definované styly, viz dále nedají se opakovaně využít obtížná správa stylů větší chybovost nedoporučují se

22 HTML - styly 2. styly na úrovni dokumentu = značka <style>
v záhlaví dokumentu - HEAD <style type = “text/css”> do značky zapisujeme typy stylů u šablon stylů CSS je atribut type vždy text/css styly zapsané mezi <style> a </style> pak ovlivní příslušnou značku v celém dokumentu způsob zápisu vlastností viz další snímek zapisují se stejně jako do šablony .CSS (viz následující snímky)

23 HTML - styly na úrovni dokumentu, zn. style
<html> viz stylvdok.html <head> <title>Modrá kurziva </title> <style type=“text/css”> h1{color:blue; font-style:italic} body {background-color: silver;} </style> </head> <body> <h1> První nadpis </h1> ……………………….. <h1> Druhý nadpis </h1> </body> </html>

24 HTML - styly 3. externí šablony stylů (Cascading Style Sheets - css)
definice stylů je mimo dokument, zvlášť se načítá soubor má příponu .CSS - viz náš soubor mujstyl.css šablona obsahuje pravidla - viz dále např.: H1 {color:blue; font/style:italic} obsah všech značek H1 v souvisejícím dokumentu pak bude modře a kurzivou pravidlo může být potlačeno definicí na úrovni dokumentu nebo přímo vloženým stylem

25 HTML - styly šablony stylů nejsou HTML ukázka soubor sesablonou.html
používá šablonu mujstyl.css výpis šablony mujstyl.css následující snímek k dokumentu .HTML se šablona připojí např. <Link REL="STYLESHEET" TYPE="text/css" HREF="mujstyl.css">

26 HTML - styly může být více značek <link>
prohlížeč pak nabídne seznam všech šablon, uživatel si vybere, podle které chce dok. naformátovat jiný způsob zavedení šablony: příkaz import ve značce <style>, nebo v externí šabloně @ import má parametr url ( = cesta k ext. šabloně - povinné kulaté ( ) zapíše se před konvenčními pravidly stylů

27 HTML - výpis šablony mujstyl.css
BODY {background-color: #FFFED0; color: Black; margin-left: 10%; margin-right: 10%; font-family : Verdana, Geneva, Arial, Helvetica, Sans-serif; font-size : x-small;} h1, h2 {color: fuchsia} P.modry {color: blue;} definice třídy pro tag P P.cerveny {color: red;}

28 HTML - externí šablony pro značku BODY je zde definována:
barva pozadí odsazení zleva, zprava font velikost písma pro dvě úrovně nadpisů je definována barva jsou defin. 2 třídy pro odstavec - značka <p> uplatní se později v odstavci zápisem: <p class=modry> </p> nebo <p class=cerveny> </p>

29 HTML - externí šablony tzv. generické třídy nejsou spojeny s žádnou značkou . jméno třídy { } použití: <p class= jméno> <h1 class=jméno> Komentáře v šablonách do Š i do značky <style> se zapisují komentáře mezi /* */ slouží pro dokumentaci stylů

30 HTML - styly Základem definice stylu jsou pravidla ve tvaru
selektor { vlastnost: hodnota; vlastnost: hodnota; ... } selektor - libovolná značka jazyka HTML def. vlastnosti se pak týkají těla zmíněné značky v definici stylu se její jméno zapisuje bez symbolů < > Příklad: P { text-indent: 10% } = odsazení textu odstavců o 10% šířky řádku od levého okraje.

31 HTML - styly je 6 skupin vlastností:
písma, barvy a pozadí, text, obdélníky a rozvržení, (každý element jazyka se vejde do obdélníkového útvaru) seznamy, klasifikace značek hodnoty vlastností - 5 typů hodnot: klíčová slova, délky, % hodnoty, adresy URL, barvy Příklad - vlastnosti pro barvy a pozadí: background, background - color, background - position, atd. vlastnosti pro písmo: color, font - family, font - size, ……..

32 HTML - styly v selektoru lze použít seznam značek :
chcete-li předepsat implicitní vlastnosti pro celou stránku, použijte jako selektor značku BODY nebo dokonce HTML bílé pozadí bychom stránce přiřadili konstrukcí BODY { background-color: #FFFFFF } v selektoru lze použít seznam značek : H1,H2,H3,H4,H5,H6 { color: blue }

33 HTML - abecední seznam vlastností
vl. pro barvy a pozadí: background-attachment background-color background-image background-position background-repeat

34 HTML - abecední seznam vlastností
vl. pro obdélníky a rozvržení: border-bottom border-top border-bottom-width border-top-width border-color border-width border-left clear border-left-width float border-right height border-right-width width border-style

35 HTML - abecední seznam vlastností
vl. pro obdélníky a rozvržení - pokračování: margin padding-right margin-bottom padding-top margin-left margin-right margin-top padding padding-bottom padding-left

36 HTML - abecední seznam vlastností
vl. písma: color font font-family font-size font-style font-variant font-weight

37 HTML - abecední seznam vlastností
vl. textu letter-spacing vertical-align line-height text-align text-decoration text-indent text-transform text-shadow word-spacing

38 HTML - abecední seznam vlastností
vl. seznamů list-style list-style-image list-style-position list-style-type

39 HTML - abecední seznam vlastností
klasifikační vlastnosti display white-space

40 HTML - rámy Značka pro popis rámů <frameset> </frameset>
uvnitř značka <frame> zapisuje se do HEAD nahrazuje BODY může být i vnořený atributy <frameset> cols nebo rows rámy jsou vždy obdélník pojmenují se ve <frame> načte se do nich web. stránka - atribut src

41 HTML - rámy, příklady <frameset cols="x,x"> šířka sloupcových rámů v pixelech nebo procentech (200,600 nebo 20%,80%) <frameset rows="x,x"> výška řádkových rámů v pixelech nebo procentech (20,580 nebo 5%,95%) <frameset border="x"> velikost okraje rámu (x=1,2,3..) <frameset framespacing="x"> mezery mezi rámy (x=1,2,3..) <frameset frameborder="x"> velikost okraje rámu <frame scr="url"> adresa k natažení do rámu <frame align=x> zarovnání položek uvnitř rámu (x=left, center, right)

42 HTML - rámy, příklady <frame frameborder="x"> velikost okrajů rámů <frame bordercolor="#xxxxxx"> barva okraje pro rám <frame framespacing="x"> mezera přidaná mezi rámy <frame name="xxx"> jméno rámu <frame noresize> zakazuje měnit velikost rámu <frame marginwidth="x" marhinheight="x"> šířka a výška okraje uvnitř rámů <frame scrolling="x"> určuje zda rám bude mít rolovací lištu (x=0,1,auto)

43 HTML - rámy, příklad <HTML> <HEAD>
<TITLE>Stránka s rámy</TITLE> </HEAD> <FRAMESET COLS="25%,*"> <FRAME NAME="Menu" SRC="menu.html"> <FRAME NAME="Main" SRC=" </FRAMESET> </HTML>

44 HTML - rámy, příklad <HTML> <HEAD>
<TITLE>Fakulty ČZU</TITLE> </HEAD> <BODY> <A HREF=" TARGET="Main">PEF</A><BR> <A HREF=" TARGET="Main">Agro</A><BR> <A HREF=" TARGET="Main">TF</A><BR> <A HREF=" TARGET="_top">ČZU</A> </BODY> </HTML>

45 HTML - rámy, příklad Odkazy nasměrované do rámu MAIN - viz TARGET=“MAIN” _TOP jméno virtuálního rámu celého okna prohlížeče _blank otevře nové okno prohlížeče _self jméno téhož rámu, z něhož vede odkaz Ukázka: rámy_menu.html a menu.html