Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

HTML - vložení obrázku značka pro vložení obrázku : atributy : src, align, alt, width, height, border šířka, výška, rámeček povinný atributsrc = hodnota.

Podobné prezentace


Prezentace na téma: "HTML - vložení obrázku značka pro vložení obrázku : atributy : src, align, alt, width, height, border šířka, výška, rámeček povinný atributsrc = hodnota."— Transkript prezentace:

1 HTML - vložení obrázku značka pro vložení obrázku : atributy : src, align, alt, width, height, border šířka, výška, rámeček povinný atributsrc = 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: –obr. je u levého okraje stránky, je vyjmut z běžného řádku, text ho obtéká odshora Př.: Tento text bude vpravo od obrázku 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 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 –zde je určena šířka, výška, rámeček a alternativní text –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 viz dále úvodní tag A Úvod do problému koncový tag A úvodní A Historie koncová A

8 HTML - kotva obsahující obrázek zdrojový text obsahuje uspořádaný seznam tag unordered list se dvěma položkami =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 číslovaný seznam (Ordered List) seznam s odrážkami (Unordered List) – položka v seznamech, (List Item) – koncová zn. (v XHTML, jinak se vynechává) seznam definic (Definition List) =slovníček pojmů – pojem v (Definition Term) – vysvětlení v (Definition Description ) seznamy lze vnořovat

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

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 vnořené značky jsou číslovaný seznam - atributy start a type začíná se číslovat od 5 type mění styl číslování =Avelká písmena =amalá písmena =I (event. =i)římské číslování =1arabské vhodnější jsou šablony stylů

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

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

16 HTML - Table atributy značky dále bude vlastní tabulka popsaná řádek po řádku pomocí, 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 ALIGNpozice 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, 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: text nadpisu tabulky 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 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!!!) –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 v záhlaví dokumentu - HEAD do značky zapisujeme typy stylů u šablon stylů CSS je atribut type vždy text/css styly zapsané mezi a 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 viz stylvdok.html Modrá kurziva h1{color:blue; font-style:italic} body {background-color: silver;} První nadpis ……………………….. Druhý nadpis

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ř.

26 HTML - styly může být více značek 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, nebo v externí import má parametr url (http://……..); = 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 uplatní se později v odstavci zápisem: nebo

29 HTML - externí šablony tzv. generické třídy nejsou spojeny s žádnou značkou. jméno třídy { } použití: Komentáře v šablonách –do Š i do značky 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 –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-spacingvertical-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ů –uvnitř značka –zapisuje se do HEAD –nahrazuje BODY –může být i vnořený – atributy cols nebo rows –rámy jsou vždy obdélník –pojmenují se ve –načte se do nich web. stránka - atribut src

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

42 HTML - rámy, příklady velikost okrajů rámů barva okraje pro rám mezera přidaná mezi rámy jméno rámu zakazuje měnit velikost rámu šířka a výška okraje uvnitř rámů určuje zda rám bude mít rolovací lištu (x=0,1,auto)

43 HTML - rámy, příklad Stránka s rámy

44 HTML - rámy, příklad Fakulty ČZU PEF Agro TF ČZU

45 HTML - rámy, příklad Odkazy nasměrované do rámu MAIN-viz TARGET=“MAIN” _TOPjmé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


Stáhnout ppt "HTML - vložení obrázku značka pro vložení obrázku : atributy : src, align, alt, width, height, border šířka, výška, rámeček povinný atributsrc = hodnota."

Podobné prezentace


Reklamy Google