Ondříšek Petr

☰ open

HTML

tag ˂pre˃

Předformátovaný text
dodržující i počet mezer      a  
odrážek

Výpis kodu včetně značek

použitím tagu <pre> dosáhnu přepisu včetně bílých značek

Text v <pre> prvku je zobrazen písmem s pevnou šířkou a text zachovává mezery i zalomení řádků. Text se zobrazí přesně tak, jak je napsán ve zdrojovém kódu HTML.

místo tagových závorek musím používat speciální znaky

tag <code> definuje kód (neni to zastaralý tag), lze jej nahradit pomocí CSS stylování

        
                <!doctype html>
                <html>
                        <head>
                                <title>Titulek</title>
                        </head>
                        <body>
                               
                        </body>
                </html>

Jak rychle nahradit závorky tagů za bílé znaky

Zdrojový kód si uložím v samotném textovém souboru

V PSPadu pak pomocí Hledat ➜ Nahradit nahradím první závorku za bílý znak a druhou za


<!DOCTYPE html>
<html lang="cz">
<head>
<title>Ondříšek Petr</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/style_html.css">
<link rel="stylesheet" href="./css/sideNav.css">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Add FontFamily -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
</head>
<body class="html">
<span class="open_sidenav" onclick="openNav()">open ☰</span>
<div class="header"><?php include("./elements/html/01_header_html.txt"); ?></div>
<div class="sidenav"><?php include("./elements/02_mySidenav.txt"); ?></div>
<div class="container">
<div class="left"><?php include("./elements/html/03_left_html.txt"); ?></div>
<div class="main"><?php include("./elements/html/03_main_html.txt"); ?></div>
<div class="right"><?php include("./elements/html/03_right_html.txt"); ?></div>
</div>
<div class="footer"><?php include("./elements/06_footer.txt"); ?></div>


<script>
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
</script>



</body>
</html>

Frázové tagy

Frázové tagy, které jsou velmi důležité řádkové významové elementy.

Vyskytují se tedy v odstavcích , ale apriory nejsou určené k stylování textu.

Těchto tagů si vyhledávače více všímajía jsou důležité z hlediska SEO optimalizace webů.

tag <abbr>

Tag <abbr> (abbreviation = zkratka) označuje zkratku v textu. Může se jednat jak o zkratku nebo zkratkové slovo.

V jeho atributu title obvykle píšeme celývýznam zkratky.

tag

Tag (emphasis = zdůraznění, důležité, zásadní) část textu, která má větší význam než okolní text./p>

Částí textu v tagu si vyhledávače všímají a indexují je s vyší prioritou

Není nutnoČástí textu v tagu si vyhledávače všímají a indexují je s vyší prioritou

tag

Tag (stron = silný, silné zdůraznění) označuje nejsilnější zdůraznění. :

Částí textu v tagu <stong> si vyhledávače všímají nejvíce

tag <dfn>

Tag <dfn> (definition = definice) se používá k označení části textu, kde definujeme nějaký pojem. Lze mu dodat i titulek

Pomocí CSS lze definovat bez class

HTML je standardní značkovací (tag) jazyk pro tvorbu webových stránek.

  <p><dfn>HTML</dfn> je standardní značkovací (tag) jazyk pro tvorbu webových stránek.</p>

HTML je standardní značkovací (tag) jazyk pro tvorbu webových stránek.

 <p><dfn title="HyperText Markup Language">HTML</dfn> je standardní značkovací (tag) jazyk pro tvorbu webových stránek.</p>

HTMLje standardní značkovací (tag) jazyk pro tvorbu webových stránek.

 <p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn>je standardní značkovací (tag) jazyk pro tvorbu webových stránek.</p>

Volné tagy

Nejedná se o zastaralé tagy (HTML5 je obsahuje) mají význam pro SEO a klíčování

tag <samp>

Tag <samp> (sample output = ukázkový výstup) slouží k označení textu, který vypíše aplikace, tedy jejího výstupu:

Pomocí CSS lze definovat bez class

Toto je text uzavřený v tagu samp

tag <kbd>

Tag <kbd> (keyboard = klávesnice)označuje text, který má být uživatelem vložen z klávesnice.

Slouží k dokumentaci aplikací

Pomocí CSS lze definovat bez class

Toto je text uzavřený v tagu var

tag <var>

Tag <var> (jako variable = proměnná) slouží k označení proměnné v textu

Pomocí CSS lze definovat bez class

Toto je text uzavřený v tagu var

tag

Zvýrazňuje důležitý text

< >

Nahoru

HTML kousky

width:calc()

Barvy u zátržítek a boxů

Accordion

Hodiny

Hodiny

Single page

Single page

Pricing card

Fluid Layout with Flex

Fluid Layout with Flex

css.nothrem.cz/ css.benni.cz dev.to Github.com css tricks.com

Color

W3C CSS Color Specification

HTML

tag ˂pre˃

Předformátovaný text
dodržující i počet mezer      a  
odrážek

Výpis kodu včetně značek

použitím tagu <pre> dosáhnu přepisu včetně bílých značek

Text v <pre> prvku je zobrazen písmem s pevnou šířkou a text zachovává mezery i zalomení řádků. Text se zobrazí přesně tak, jak je napsán ve zdrojovém kódu HTML.

místo tagových závorek musím používat speciální znaky

tag <code> definuje kód (neni to zastaralý tag), lze jej nahradit pomocí CSS stylování

        
                <!doctype html>
                <html>
                        <head>
                                <title>Titulek</title>
                        </head>
                        <body>
                               
                        </body>
                </html>

Jak rychle nahradit závorky tagů za bílé znaky

Zdrojový kód si uložím v samotném textovém souboru

V PSPadu pak pomocí Hledat ➜ Nahradit nahradím první závorku za bílý znak a druhou za


<!DOCTYPE html>
<html lang="cz">
<head>
<title>Ondříšek Petr</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/style_html.css">
<link rel="stylesheet" href="./css/sideNav.css">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Add FontFamily -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
</head>
<body class="html">
<span class="open_sidenav" onclick="openNav()">open ☰</span>
<div class="header"><?php include("./elements/html/01_header_html.txt"); ?></div>
<div class="sidenav"><?php include("./elements/02_mySidenav.txt"); ?></div>
<div class="container">
<div class="left"><?php include("./elements/html/03_left_html.txt"); ?></div>
<div class="main"><?php include("./elements/html/03_main_html.txt"); ?></div>
<div class="right"><?php include("./elements/html/03_right_html.txt"); ?></div>
</div>
<div class="footer"><?php include("./elements/06_footer.txt"); ?></div>


<script>
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
</script>



</body>
</html>

Frázové tagy

Frázové tagy, které jsou velmi důležité řádkové významové elementy.

Vyskytují se tedy v odstavcích , ale apriory nejsou určené k stylování textu.

Těchto tagů si vyhledávače více všímajía jsou důležité z hlediska SEO optimalizace webů.

tag <abbr>

Tag <abbr> (abbreviation = zkratka) označuje zkratku v textu. Může se jednat jak o zkratku nebo zkratkové slovo.

V jeho atributu title obvykle píšeme celývýznam zkratky.

tag

Tag (emphasis = zdůraznění, důležité, zásadní) část textu, která má větší význam než okolní text./p>

Částí textu v tagu si vyhledávače všímají a indexují je s vyší prioritou

Není nutnoČástí textu v tagu si vyhledávače všímají a indexují je s vyší prioritou

tag

Tag (stron = silný, silné zdůraznění) označuje nejsilnější zdůraznění. :

Částí textu v tagu <stong> si vyhledávače všímají nejvíce

tag <dfn>

Tag <dfn> (definition = definice) se používá k označení části textu, kde definujeme nějaký pojem. Lze mu dodat i titulek

Pomocí CSS lze definovat bez class

HTML je standardní značkovací (tag) jazyk pro tvorbu webových stránek.

  <p><dfn>HTML</dfn> je standardní značkovací (tag) jazyk pro tvorbu webových stránek.</p>

HTML je standardní značkovací (tag) jazyk pro tvorbu webových stránek.

 <p><dfn title="HyperText Markup Language">HTML</dfn> je standardní značkovací (tag) jazyk pro tvorbu webových stránek.</p>

HTMLje standardní značkovací (tag) jazyk pro tvorbu webových stránek.

 <p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn>je standardní značkovací (tag) jazyk pro tvorbu webových stránek.</p>

Volné tagy

Nejedná se o zastaralé tagy (HTML5 je obsahuje) mají význam pro SEO a klíčování

tag <samp>

Tag <samp> (sample output = ukázkový výstup) slouží k označení textu, který vypíše aplikace, tedy jejího výstupu:

Pomocí CSS lze definovat bez class

Toto je text uzavřený v tagu samp

tag <kbd>

Tag <kbd> (keyboard = klávesnice)označuje text, který má být uživatelem vložen z klávesnice.

Slouží k dokumentaci aplikací

Pomocí CSS lze definovat bez class

Toto je text uzavřený v tagu var

tag <var>

Tag <var> (jako variable = proměnná) slouží k označení proměnné v textu

Pomocí CSS lze definovat bez class

Toto je text uzavřený v tagu var

tag

Zvýrazňuje důležitý text

< >

Nahoru

VSC + HTML + CSS

HTML

tag ˂pre˃

Výpis kodu včetně značek

Jak rychle nahradit závorky tagů za bílé znaky

Frázové tagy

tag <abbr>

tag <em>

tag <strong>

tag <dfn>

Volné tagy

Nejedná se o zastaralé tagy (HTML5 je obsahuje) mají význam pro SEO a klíčování

tag <samp>

tag <kbd>

tag <var>

tag <mark >

HTML kousky

width:calc()

Menu

Barvy u zátržítek a boxů

Accordion

Hodiny

Single page

Pricing card

Fluid Layout with Flex

Color

HTML

tag ˂pre˃

Výpis kodu včetně značek

Jak rychle nahradit závorky tagů za bílé znaky

Frázové tagy

tag <abbr>

tag <em>

tag <strong>

tag <dfn>

Volné tagy

Nejedná se o zastaralé tagy (HTML5 je obsahuje) mají význam pro SEO a klíčování

tag <samp>

tag <kbd>

tag <var>

tag <mark >

HTML CSS

itNetwork

Odkazy

Klávesové zkratky