Odkazy se v normálním případě podtrhávají samy, není nutno to nastavovat.



Podobné dokumenty
Základy programovacího jazyka HTML. Autor: Ing. Jan Nožička SOŠ a SOU Česká Lípa VY_32_INOVACE_1133_Základy programovacího jazyka HTML_PWP

Bloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1.

HTML - Úvod. Zpracoval: Petr Lasák

22. Tvorba webových stránek

12. Základy HTML a formuláře v HTML

Jemný úvod do HTML. Co je HTML značka? Web nezná text formátovaný mezerami a konci řádku! Ale já potřebuji psát více mezer a určovat zalomení řádku!

Střední průmyslová škola a Vyšší odborná škola technická Brno, Sokolská 1

1. Struktura stránky, zásady při psaní kódu, MVC pattern. Web pro kodéry (Petr Kosnar, ČVUT, FJFI, KFE, PINF 2008)

Hlavička dokumentu. mezi <head> a </head> obsahuje informace vztažené k dokumentu metadata <title> - název stránky, povinná párová značka

Tvorba webových stránek

HTML - pokračování. Co už víme?

<link> - definuje vztah k jiným XHTML dokumentům, typicky

Základy HTML. Autor: Palito

Přehled základních html tagů

Tvorba webu. Základní HTML tagy. Martin Urza

<html> - párový tag, uzavírá celý dokument <head> - párový, určuje hlavičku dokumentu <body> - párový, uzavírá tělo dokumentu Př. Základní struktura

CSS Stylování stránek. Zpracoval: Petr Lasák

HTML Hypertext Markup Language

KASKÁDOVÉ STYLY - PÍSMO

CSS styly - úvod. Formátování HTML - Kdy používat CSS - Nástin možností CSS - Trojí použití CSS - Příklady - Syntaxe - Příklad s nadpisem

Tagů je spousta. Pokud bych teď měl zpaměti všechny napsat, do kupy bych to nedal.

TNPW1 Cvičení

Webové stránky. 5. Kaskádové styly formátování textu. Datum vytvoření: str ánk y. Vytvořil: Petr Lerch.

Kaskádové styly základy grafiky

Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

Algoritmy a programovaní IV Studijní opory

Název: VY_32_INOVACE_PG4119 Tipy a triky, rozdíly mezi prohlížeči

Úvod do jazyka HTML (Hypertext Markup Language)

Manuál k editoru TinyMCE

Tvorba webových stránek

Obsah. Stručná historie World Wide Webu 7

Základy informatiky. 03 HTML, tvorba webových stránek. Kačmařík/Szturcová/Děrgel/Rapant

Webová grafika, struktura webu a navigace, použitelnost a přístupnost

Práce s administračním systémem internetových stránek Podaných rukou

Co je HTML. 1. Párový tag má začátek a konec: 2. Nepárový tag nemá ukončovací značku:

Návrh stránek 4IZ228 tvorba webových stránek a aplikací

Informatika pro moderní fyziky (8) Javascript, CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument

ŠKODA Portal Platform

Základy informatiky. 03, HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

K 2 - Základy zpracování textu

Tvorba webu. Kaskádové styly (CSS) Martin Urza

CSS Kaskádové styly. formátování webových stránek

Mimochodem, co je CSS? Formátování HTML. Drobný problém. Základy práce se styly. Trojí použití CSS. Přímo (in-line)

CSS styly. Cascading Style Sheets kaskádové styly

(X)HTML-TAGY. VOŠ a SŠT Česká Třebová

Mgr. Vlastislav Kučera přednáška č. 2

Název modulu: Tvorba webu pomocí XHTML a CSS začátečníci

Stránka se dá otevřít dvěma způsoby

================================================================================ =====

NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák

CSS Selektory tříd a ID, dědičnost, další vlastnosti. Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace

Výukový materiál KA č.4 Spolupráce se ZŠ

Tvorba WWW stránek. Mgr. Petr Jakubec. Katedra fyzikální chemie Univerzita Palackého v Olomouci Tř. 17. listopadu

Blokový model v CSS:

Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD

KAPITOLA 3 - ZPRACOVÁNÍ TEXTU

Stručný návod k HTML editoru v CMS Portia 4

Mgr. Vlastislav Kučera lekce č. 2

Tabulky. Přehled tagů z oblasti tabulek. Tag Význam Párový Výskyt. tr řádek tabulky nepovinně <table>, <tbody>, <thead>, <tfoot>

Tématická oblast: dědičnost, kaskáda. CSS a média. Stylové předpisy pro různé typy zobrazovacích zařízení

Tvorba webových stránek

Mgr. Vlastislav Kučera Struktura stránky, hlavička,

15. CSS styly (funkce, vývoj, využití). Práce s CSS styly (vkládání do kódu, pravidlo, selektor, dědičnost, kaskády, id a vlastní třídy)

(X)HTML, CSS a jquery

Tvorba WWW stránek. Mojmír Volf

Základy CSS (3. přednáška)

Fiktivní firma. Žáci získají základní informace o přípravě a tvorbě webových stránek. Na konci prezentace je úkol, se kterým žáci samostatně pracují.

Buňka tabulky; tento tag doporučuju psát opět jako párový. Nyní již máme dostatek informací k tomu, abychom dokázali sestrojit jednoduchou tabulku.

Mgr. Stěpan Stěpanov, 2013

NSWI096 - INTERNET. Úvod do HTML

Vývoj Internetových Aplikací

Internet 1 vývoj, html, css

APLIKACE XML PRO INTERNET

Tvorba webu. Úvod a základní principy. Martin Urza

Úvod do tvorby internetových stránek v jazyce HTML

TVORBA WEBOVÝCH STRÁNEK

Gymnázium Vysoké Mýto nám. Vaňorného 163, Vysoké Mýto

Jazyky pro popis dat

Informatika pro moderní fyziky (8) CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument

Čtvrtek 11. dubna. Základy HTML. Obecná syntaxe HTML. Struktura HTML

Webové stránky. 2. Úvod do jazyka HTML. Datum vytvoření: str ánk y. Vytvořil: Petr Lerch.

Počítačová typografie

Administrace webu Postup při práci

HTML. ICT_01., 02. konzultace; 2. ročník 1/6

Zá klady HTML. Tag HTML <HTML> Párová značka, který definuje webovou stránku. Obsah stránky končí značkou

Použití CSS v dokumentech HTML

EU-OPVK:VY_32_INOVACE_FIL16 Vojtěch Filip, 2014

CSS (Cascading Style Sheets) Jak se zapisují? externí soubory s koncovkou.css. přímo do www stránky

Maturitní otázka číslo 23 strana 1 z 5. Typografie

Obrázky. Tag Význam Párový Výskyt. img obrázek ne. img video ne. map klikací mapa. area oblast v klikací mapě ne

INTERNET A SÍTĚ. Role při tvorbě webových aplikací. Rozhodovací vrstvy při tvorbě webových aplikací. povrch kostra struktura obsah strategie

Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_135_IVT_HTML_08_tvorba_www

Kaskádové styly (CSS) Cascading Style Sheets

Pravidla pro formální úpravu textu seminárních prací

1. Otevřete dokument, který chcete číst. 2. Na kartě Zobrazení klikněte ve skupině Zobrazení dokumentů na položku Čtení na celé obrazovce.

Tvorba webových stránek pomocí HTML kódu v příkladech. M. Seménka, 2014

Název: VY_32_INOVACE_PG4102 Základní HTML značky. Autor: Mgr. Tomáš Javorský. Datum vytvoření: 05 / Ročník: 3

.. Smíšená sazba. Zpracování textů na počítači. Ing. Pavel Haluza, Ph.D. ústav informatiky PEF MENDELU v Brně

Nástrojová lišta v editačním poli

WWW a HTML. Základní pojmy. Ivo Peterka

Transkript:

Úprava textu Všechny tagy na formátování textu jsou in-line tagy, to znamená řádkové. Nezalamují za sebou řádek (narozdíl od blokových tagů). Fyzické formátování Fyzické formátování říká, jak má který text přesně vypadat (tedy jak má být formátován). Nezabývá se logickou rolí formátovaného textu (snad kromě sup a sub). Tagy fyzického formátování textu Tag Význam Párový Používat? b tučné písmo ano ano i kurzíva ano ano u podtržení textu ano ne sub dolní index ano ano sup horní index ano ano small zmenšení textu ano big zvětšení písma ano s přeškrtnutý text ano ne strike přeškrtnutý text ano font písmo ano ne basefont základní font ne ne blink blikání písma ano ne nobr nezalamovat obsah ano Logické formátování Vymezuje význam elementu. Přitom vůbec neříká, jak má vymezený text vypadat. Původně mělo mít logické vymezení mnohem větší význam, než jaký mu přisoudil

dnešní web, kde se používá zejména formátování fyzického. Dnes se logických značek používá velmi zřídka, navíc často s fyzickým významem. Tagy logického formátování textu Tag Význam Párový Obvyklý vzhled span úsek textu ano normální strong zvýraznění (tučně) ano tučné em zvýraznění (kurzíva) ano kurzíva cite citace ano kurzíva code výpis kódu ano strojopis dfn nově použitý termín ano kurzíva kbd vstup z klávesnice ano strojopis samp ukázka ano strojopis tt teletype ano strojopis var formátování proměnné ano kurzíva abbr ustálený výraz ano normální acronym zkratka ano normální del smazaný obsah ano přeškrtnuto ins přidaný text ano podtrženo q citace ano normální Fyzické formátování b Tučný text (z angl. "bold"). Používá se velmi často ke zvýraznění. Bývá zaměňován se <strong>, což je logické zvýraznění realizované tučným písmem. i Kurzíva (z angl. "italic"). Bývá zaměňován za <em>, což je logické zvýraznění realizované kurzívou. u Podtržení (a angl. "underline"). Doporučuji nepoužívat. Z následujících důvodů: Podtržený text se plete s odkazy Typograficky není podtržení nic hezkého

Odkazy se v normálním případě podtrhávají samy, není nutno to nastavovat. sub Dolní index (z angl. "subscript"). Pro další snížení a zmenšení je možno použít vícekrát za sebou. Stejného efektu jako tagem <sub> se dá dosáhnout pomocí CSS stylu vertical-align: sub. Ale <sub> je dobrý tag na vyznačení sémantiky (smyslu) textu. Vždy, když děláte dolní index, např. H 2 SO 4, používejte tag <sub>. Pokud chcete udělat jenom grafický efekt (a zvýrazňovaný prvek není dolním indexem), použijte styl vertical-align: sub. sup Horní index (angl. "superscript"). Platí pro něj totéž, co pro <sub>, akorát že ekvivalentní styl je vertical-align: super, nikoli vertical-align: sup. small Zmenšení písma o jeden stupeň. Možno použít vícekrát za sebou: <small><small>maličký text</small></small> big Zvětšení písma o jeden stupeň. Možno použít vícekrát za sebou. s Přeškrtnuté písmo (z angl. striked). Vizte též <strike> a <del>. strike Přeškrtnuté písmo. Osobně doporučuji používat spíše <strike> než <s>, třebaže v HTML 4.0 doporučuje opak, totiž používat <s>. Úplně nejlepší je ale texty vůbec neškrtat nebo použít tag <del>. Přeškrtnutí textu se dá udělat i pouze graficky pomocí CSS stylu text-decoration: striked-through. font Nastavení barvy, velikosti a fontu písma. Atributy tagu <font> Atribut tagu <font> Význam Hodnoty Nahradit stylem color barva písma barva color

size velikost, stupeň písma 1 až 7 +1-1 (+-1 až 6)) font-size face font, druh písma jména fontů oddělená čárkami font-family Příklad: <font color="red" face="arial, Helvetica">červené písmo Arialem</font> U face lze sice zadávat více fontů (pokud není prohlížečem rozpoznán první název, jde k dalšímu), ale v praxi je nutno zůstat u Arialu (varianty Helvetica, Verdana, sansserif), Timesu (serif) a Courieru (monotype), protože jen u nich je jistota, že budou na klientském počítači zobrazeny správně a s češtinou. Je doporučováno tag <font> nepoužívat (je zastaralý). Lze jej nahradit tagem <span> s atributem style s definicí CSS stylu nebo s předem definovanou třídou. Příklad: <span style="color: red; font-family: Arial, Helvetica">červené písmo Arialem</span> size Velikost písma se v HTML nenastavuje v bodech jako všechny ostatní rozměry, ale ve stupních. Stupně jsou jakési imaginární jednotky vymyšlené pouze pro účel HTML. Stupňů písma je sedm. Od vysloveně mrňavého stupně jedna, které se skoro nedá číst, až po kravskou velikost 7. Běžné písmo je stupeň číslo 3. Přesné velikosti písem nejsou nijak konkrétně stanoveny. Uživatel si může písmo zvětšovat a zmenšovat v prohlížeči. Dělá se to příkazem Zobrazit - Velikost písma (nebo tak něco -- v každém prohlížeči to může být jinak). Přesné velikosti písma lze dosáhnout pouze pomocí CSS. Kromě přímého nastavení stupně písma se může použít relativní zápis +-, např. size="+1" znamená zvětšení písma o jeden stupeň. V praxi doporučuji <font size="..."> vůbec nepoužívat a velikost písma definovat pomocí CSS stylu font-size. Na tag <font> si dejte pozor. Nechová se zcela neutrálně (jako se chová <span>), takže když použijete <font> i třeba bez parametrů, je možné, že písmo přece ovlivní (zejména se to stává v Exploreru), většinou nějak záhadně. basefont Základní, přednastavený font pro celou stránku. Musí se deklarovat bezprostředně za tagem <body>. Nepárový tag. Má stejné atributy jako <font>, ale u velikosti nelze použít relativní stupeň. Používání tohoto tagu se silně nedoporučuje, protože se jeho vlastnosti nevztahují na tabulky a občas ani na nadpisy. Podpora v moderních prohlížečích je vágní a nejistá. Prostě je zastaralý. Příklad: <body><basefont face="arial" color="navy">tmavomodrý Arial bude na celé stránce. Snad. Tag basefont se dá velmi snadno nahradit tím, že se příslušné vlastnosti písma nastaví pomocí CSS stylů pro tag <body>. Například:

<style> body {font-family: arial; color: navy;} </style> blink Blikající písmo (z angl. blink = mrkat). Podporováno pouze Netscapem, Operou a Mozillou. Nahraditelné stylem text-decoration: blink (se stejnou podporou). nobr Zakázané zalomení řádku. Text se prostě nezalomí, i kdyby došel do konce stránky. Používá se zejména v odkazových proužcích a sloupečcích, aby nebyly odkazy rozhozené přes dva řádky. V moderním webdesignu se používání tagu <nobr> nedoporučuje a nahrazuje se CSS stylem white-space: nowrap. Upřímně je však nutno přiznat, že ten styl ne vždy funguje spolehlivě, takže tag <nobr> rozhodně nepatří do starého železa. Někde jsem se dozvěděl o existenci nestandardního tagu <wbr>, který umožňuje zalomení uvnitř <nobr> a volitelné zalomení velmi dlouhých slov. Nevím, jak je podporován, každopádně funguje v IE i v Mozille. Logické vyznačování span Logické vymezení části textu, která bude jinak formátována nebo na ni bude vázán skript. Je příbuzný s tagem <div> s tím rozdílem, že <span> je in-line, tzn. nezalamuje před a po sobě řádku. U tagu span lze použít pouze obecné atributy. Ale mají zde velký význam, zejména atributy style, class a id. Více informací o tagu span. strong Silné zvýraznění (z angl. strong = silný, mocný). Prohlížeče pro něj používají tučné písmo, proto bývá zaměňován s tagem <b>. Je ale dobré uvědomit si rozdíl: tagem <b> říkám, že je něco tučným písmem tagem <strong> říkám, že je něco důležité, zvýrazněné Někomu to připadá jako totéž, já tam ale rozdíl vidím. em Zvýraznění (emphasis). Prohlížeče vykreslují kurzívou. Nejsprávnější tag pro zvýrazňování (a pro tento účel jen zřídka používaný). Totéž co u <strong>: <i> je kurzíva, <em> je zvýraznění, které se náhodou vykresluje kurzívou.

Další tagy logického formátování nejsou prakticky vůbec používané. Půlka protože je zastaralá, druhá půlka (od abbr níže) je zase relativně nová. cite Citace, která na rozdíl od blokové citace <blockquote> nezalamuje řádek (je in-line). Takřka neužívaný tag zobrazovaný kurzívou. Některé vyhledávače prý neindexují vnitřek tohoto tagu, protože se domnívají, že jde o externí citaci. code Výpis kódu, například programu. Prohlížeče používají neproporcionální písmo (strojopis). Velmi zřídka používaný tag, já jej používám na výpis kódových příkazů. dfn Definice nového výrazu. Prohlížeče to zobrazují kurzívou nebo tučnou kurzívou. Prakticky nepoužívaný tag. kbd Vstup z klávesnice zobrazený strojopisem. Nepoužívaný tag. samp "Vzorek", což znamená výstup programu. Zobrazováno strojopisem. Občas to používám, když chci naznačit, že se jedná o nějaký výstup nebo prostě něco odlišného od normálního textu. tt Teletypový terminál. Že nevíte, co to je? Já také ne. (Nabízí se výraz "dálnopis", což ale problematiku spíše zatemňuje. Asi je to text konzoly vzdáleného připojení terminálu.) Zobrazováno strojopisem. var Proměnná. Zobrazováno kurzívou. Použití snad jen mezi programátory pro formátování zdrojáků. Následující tagy přišly až v HTML 4. abbr Něco jako vysvětlení zkratky. Zajímavým atributem je obecný atribut title, který by jako hodnotu měl obsahovat význam té zkratky. Často se používá v blozích. Internet Explorer <abbr> nepodporuje (nerozezná tag). Nové v HTML 4.0. Příklad: <abbr title="cascading Style Sheets">CSS</abbr> acronym

Totéž, co <abbr>, rozdíl je v tom, že písmena se nehláskují, ale čtou dohromady (např. NATO). Internet Explorer tag acronym zná (narozdíl od abbr). del Odstraněný text. Prohlížeče jej zobrazují jako přeškrtnutý, staré prohlížeče jej zobrazí normálně. Novinka v HTML 4.0. Osobně raději odstraněný text mažu, ale jsou případy, kdy se vyplatí tag del používat -- zejména ve zpravodajství při vyznačení opravy chyby. Tagy del a ins nejsou ani blokové, ani in-line. Mohou obsahovat další blokové tagy, aniž by zalamovaly řádek. ins Přidaný text. Zobrazováno podtržením. Atribut datetime vyjadřuje čas, kdy došlo k přidání. Datetime má formát rrrr-mm-ddthh:mm:sstzd. Používá se zřídka, nejčastěji ve zpravodajství a na blozích -- ani v těch případech se stejně většinou neuvádí čas. Podtržení lze samozřejmě zrušit CSS zápisem text-decoration: none. q Citace (angl. quote = citovat) podle definice HTML 4.0, svou funkcí velmi podobná tagu <cite> a <blockquote>.. Liší se atributem cite, která obsahuje zdroj citace. Mozilla (Firefox) a Opera kolem obsahu tagu <q> dělají automaticky uvozovky. Internet Explorer (žádná verze) uvozovky nepřidává. Příklad: <q cite="http://dusan.pc-slany.cz">bydlím ve Slaném, mám se dobře</q>