Československá literární komunita

Tak jako generace autorů před vámi, publikujte svoji psanou tvorbu. Podělte se o svoje názory a sbírejte zpětnou vazbu na svoje díla. Inspirujte se a učte od nejlepších.

Přidejte se

HTML pro BLONDÝNKY - 2. lekce

Výběr: Lyryk
11. 10. 2002
9
0
5722
Autor
Petula

Vážení Písmáci,

v minul lekci
HTML pro blondýnky jsme si ukázali, že se pomocí HTML TAGů dá formátovat text.Viděli jsme k tomu určené základní jednoduché párové HTML TAGy.

V této druhé lekci bych chtěla uvést ještě něco k formátování písma a dále se věnovat tomu, jak se dají napsat některé „méně běžné“, avšak potřebné či často používané znaky a též tomu, jak si svůj zápis vyzkoušet „nanečisto“…

LEKCE II. – ZVLÁŠTNÍ PÍSMENKA





NASTAVENÍ VELIKOSTI PÍSMA ČÍSLEM

Velikost písmenek můžeme nastavit číslem. Týká se to jak běžného textu, tak i nadpisů, ačkoliv každé nastavujeme (můžeme nastavovat) jinak.






Velikost písma – absolutně


K přesnému nastavení určité velikosti písma se používají jako parametr čísla od 1 do 7, a to u atributu SIZE v nám již známém TAGu FONT.
Pod vzorem písma následuje HTML zápis.

Písmo velikosti 1
<FONT SIZE="1">Písmo velikosti 1</FONT>

Písmo velikosti 2
<FONT SIZE="2">Písmo velikosti 2</FONT>

Písmo velikosti 3
<FONT SIZE="3">Písmo velikosti 3</FONT>

Písmo velikosti 4
<FONT SIZE="4">Písmo velikosti 4</FONT>

Písmo velikosti 5
<FONT SIZE="5">Písmo velikosti 5</FONT>

Písmo velikosti 6
<FONT SIZE="6">Písmo velikosti 6</FONT>

Písmo velikosti 7
<FONT SIZE="7">Písmo velikosti 7</FONT>






Velikost písma – relativně


K nastavení změny velikosti písma vůči písmu právě užívanému se také dají použít čísla. Vystačíme si s rozsahem od 1 do 6. Tato čísla však odečítáme (pro zmenšení) či přičítáme (pro zvětšení) k velikosti přednastavené prohlížečem či autorem stránek (například na Písmáku…). Obvykle je zobrazována „střední“ hodnota, tj. písmo velikosti 3 (nebo 4). Tedy odečítáme či přičítáme o „kolik velikostí“ (kolik stupňů), chceme změnu provést. O jeden stupeň nahoru nám tutéž službu udělá i nám již známý TAG BIG a o jeden stupeň dolů též již popsaný TAG SMALL

Standardní písmo Písmo velikosti +1
<FONT SIZE="+1">Písmo velikosti +1</FONT>

Standardní písmo Písmo velikosti BIG
<BIG>Písmo velikosti +1</BIG>

Standardní písmo Písmo velikosti +2
<FONT SIZE="+2">Písmo velikosti +2</FONT>

Standardní písmo Písmo velikosti BIG & BIG
<BIG><BIG>Písmo velikosti BIG & BIG</BIG></BIG>

Standardní písmo Písmo velikosti -1
<FONT SIZE="-1">Písmo velikosti -1</FONT>

Standardní písmo Písmo velikosti SMALL
<SMALL>Písmo velikosti -1</SMALL>

Standardní písmo Písmo velikosti -2
<FONT SIZE="-2">Písmo velikosti -2</FONT>

Standardní písmo Písmo velikosti SMALL & SMALL
<SMALL><SMALL>Písmo velikosti SMALL & SMALL</SMALL></SMALL>





Chybné uvedení velikosti (když neumíme počítat od 1 do 7, nebo když pracujeme s jinak nastavenou velikostí písma, než předpokládáme):

Písmo velikosti +25
<FONT SIZE="+25">Písmo velikosti +25</FONT>

Písmo velikosti 25
<FONT SIZE="25">Písmo velikosti 25</FONT>

Písmo velikosti 7
<FONT SIZE="7">Písmo velikosti 7</FONT>

Písmo velikosti -25
<FONT SIZE="-25">Písmo velikosti -25</FONT>

Písmo velikosti 1
<FONT SIZE="1">Písmo velikosti 1</FONT>


Jak vidno, prohlížeče myslí za nás a naše chyby občas opraví…




Ovšem se vším si neporadí:

Výchozí písmo. Písmo velikosti BIG & BIG ukončeno jen jedním /BIG pokračuje zmenšeno jen o stupeň, dokud nedáme i druhé ukončení /BIG. Pak se teprve vrátí k výchozímu písmu.

Výchozí písmo. <BIG><BIG>Písmo velikosti BIG & BIG ukončeno jen jedním /BIG</BIG> pokračuje zmenšeno jen o stupeň, dokud nedáme i druhé ukončení /BIG.</BIG> Pak se teprve vrátí k výchozímu písmu.

Tedy pokud TAG opakujeme, musíme opakovat i jeho ukončení!
Obdobně je to s TAGem SMALL a mnohými dalšími TAGy.






NADPISY


Text můžeme členit též pomocí nadpisů. Je to výhodné především pro oddělení jednotlivých kapitol a podkapitol…
Pro nadpisy máme „jen“ 6 úrovní, přičemž pořadí je vtipně obrácené.
Takže 1 je u nadpisů úroveň první = nejvyšší (a tedy i největší písmo) a 6 je úroveň poslední = nejnižší (a tedy i nejmenší písmo).
Po vložení nadpisu se nám automaticky provede vhodné (většinou dvojí) odřádkování a písmo bude zvýrazněné (obvykle bold neboli tučné)!

Nadpis velikosti 1

<H1>Nadpis velikosti 1</H1>

Nadpis velikosti 1

<H2>Nadpis velikosti 2</H2>

Nadpis velikosti 3

<H3>Nadpis velikosti 3</H3>

Nadpis velikosti 4

<H4>Nadpis velikosti 4</H4>

Nadpis velikosti 5
<H5>Nadpis velikosti 5</H5>

Nadpis velikosti 6
<H6>Nadpis velikosti 6</H6>

Podotýkám, že je bezpodmínečně nutné uzavírat TAGem stejné velikosti (tj. s uvedením téže hodnoty!), tedy například H4 a /H4, jinak dosáhnete pěkného zmatku!!!





Ačkoliv to vypadá složitě, probrali jsme zde zatím jen dva párové TAGy pro změnu velikosti písma:
  • Atribut SIZE u TAGu FONT s absolutním = přesně určeným parametrem velikosti 1 až 7, například:

    Písmo VELIKOSTI 2

    <FONT SIZE="2">Písmo VELIKOSTI 2</FONT>


  • Atribut SIZE u TAGu FONT s relativním = odvozeným od momentálního stavu nastavením velikosti přičítáním či odčítáním hodnot 1 až 6, například:

    Písmo VELIKOSTI +2

    <FONT SIZE="+2">Písmo VELIKOSTI +2</FONT>


  • Nový TAG Hn, například:

    Nadpis ÚROVNĚ 2

    <H2>Nadpis ÚROVNĚ 2</H2>

Proto můžeme popojet dál a probrat si…





ZVLÁŠTNÍ ZNAKY



Mnohde vidíme různá sluníčka, ksichtíčky, ale i menšítka a většítka a podobně.Na klávesnici je většinou nenajdeme… Co s tím???


ZVLÁŠTNÍ ZNAKY – Jak je psát na klávesnici

Zvláštní znaky můžeme vkládat do textu tak, že je přímo napíšeme z klávesnice. Ovšem riskujeme, že se ne vždy a ne každému zobrazí správně, ačkoliv by možná i mohly… (Například české uvozovky přímo napsané svým znakem se někdy rády „konvertují“ do znaku pro míru palec neboli "inch". Pokud zde vidíte oboje uvozovky stejně, je to právě ten případ.)

Jak psát? Nejprve pár vysvětlivek, aby se jedna vyznala v textu, že…
[Alt]
Klávesa s nápisem Alt vlevo od mezerníku na alfanumerické klávesnici – to je ta velká klávesnice s písmenky, co má nahoře mimo jiné taky čísla – proto tedy alfa-numerická.
[Alt Gr]
Klávesa s nápisem Alt či Alt Gr vpravo od mezerníku na alfanumerické klávesnici
[7-A]
Klávesa s číslicí 7 na alfanumerické klávesnici – nahoře asi uprostřed
[7]
Klávesa s číslicí 7 na numerické klávesnici – to je ta malá vpravo
[Alt]/[3][8]
Držíte klávesu Alt (vlevo od mezerníku) pak na numerické klávesnici stisknete 3, pustíte 3 avšak stále držíte Alt a stisknete 8, pustíte 8 a pustíte Alt.
Tak, a můžeme jet…



Vlevo je vždy uveden zvláštní znak a pod ním v odrážkách popis, jak se k němu lze dostat.
&
& anglická klávesnice znak obsahuje na [Shift]/[7-A]
& česká klávesnice znak (obvykle) obsahuje na [Alt Gr]/[7-A]
& číselným kódem (ASCII - sprosté slovo…) [Alt]/[3][8]
#
# anglická klávesnice znak obsahuje na [Shift]/[3-A]
# česká klávesnice znak (obvykle) obsahuje na [Alt Gr]/[3-A]
# ASCII kódem [Alt]/[3][5]
;
# anglická klávesnice znak obsahuje vpravo od písmene „L“, tam co česká „ů“ [;]
# česká klávesnice znak (obvykle) obsahuje úplně nahoře vlevo od „1“ na alfanumerické klávesnici [;]
# ASCII kódem [Alt]/[5][9]
<
< anglická klávesnice znak obsahuje vpravo od „M“ [Shift]/[<]
< česká klávesnice znak (obvykle) obsahuje na tomtéž místě [Alt Gr]/[,]
< ASCII kódem [Alt]/[6][0]
>
> anglická klávesnice znak obsahuje na druhém místě vpravo od „M“ [Shift]/[>]
> česká klávesnice znak (obvykle) obsahuje na tomtéž místě [Alt Gr]/[.]
> ASCII kódem [Alt]/[6][2]

Obdobně lze pomocí klávesy Alt a číselné klávesnice vkládat ty níže uvedené hodnoty, jejichž kódy začínají nulou. Zkusit si to lze například i na Písmáku, třeba s ASCII kódem pro písmenko A, který je 65. Tedy držíme levý Alt a pak naklepeme 65 na numerické klávesnici a Alt pustíme. A vida, máme A!


ZVLÁŠTNÍ ZNAKY – Jak je psát do HTML textu

Zvláštní znaky jsme tedy do HTML textu mohli vložit přímo z klávesnice. Také je můžeme do HTML textu uvádět jejich „zkrácenými názvy“ uvedenými do „kouzelných znaků“ ampersand & a středník ;, které prohlížeči říkají, že to, co je uvnitř, má brát nikoliv jako běžný text, ale jako vyjádření slovního hesla, které se má před zobrazením nejdříve „přeložit“. Zde ukázky:
&
&amp;  ampersand vyslov [AMPRSÁND]
 
&nbsp; nedělitelná mezera (zde není vidět, že…)
K použití například mezi jednopísmennou spojku a slovem, aby se text nelámal s písmenky v, k, s, z na konci řádku…)
<
&lt;   menšítko
>
&gt;   většítko


Pokud ovšem neznáme tyto zkratky, můžeme použít číselný kód. Je to výhodné, protože všem znakům, které vidíme na obrazovce, jsou přiděleny kódy. Pokud tyto kódy známe, pak je již jen stačí napsat. Ovšem před kód uvádíme tytéž značky jako při použití zkratky požadovaného symbolu plus mřížku # uvádějící číslo, aby prohlížeč věděl, že to, co bude následovat, není jen obyčejné číslo, ale kód našeho zvoleného znaku či symbolu… Zde uvádím ty nejčastější.
Ne všechny znaky se ukazují ve všech prohlížečích!!! Ne všechny uvidíme ve všech fontech!!! U těch zvláště „podezřelých“ uvádím vykřičník (!).
&
&#0038; ampersand
#
&#0035; mřížka
;
&#0059; středník
<
&#0060; menšítko
>
&#0062; většítko
&#0128; Euro
&#0132; české uvozovky počáteční
&#0133; trojtečka
&#0147; české uvozovky koncové
&#0150; pomlčka
nezaměňovat se spojovníkem, ten dává klávesa [minus] a je krátký [ - ]
Užití spojovníku, pomlčky, českých uvozovek a trojtečky ve větě:
Měla-li drdol – pokud se tak ten „rozcuch“ dal nazvat – byla vždy neupravená…
&#0151; odsuvka (dlouhá pomlčka)
¤
&#0164; čtvěrouchyn vyslov [ČTVJERO-UCHYN]
&#9658; ukazovátko vpravo
&#9668; ukazovátko vlevo
&#9733; plná hvězdička!
&#9734; prázdná hvězdička!
&#9742; plný telefónek!
&#9743; prázdný telefónek!
&#9786; prázdný ksichtík! (nebývá ve fontu Courier)
&#9787; plný ksichtík! (nebývá ve fontu Courier)
&#9788; sluníčko
&#9792; samička
&#9794; sameček
&#9824; plné piky
&#9825; prázdné srdce!
&#9827; plné trefy
&#9828; prázdné piky!
&#9829; plné srdce
&#9830; plné kára
&#9831; prázdné trefy!
&#9833; notička půlová!
&#9834; notička čtvrťová
&#9835; dvě čtvrťové
&#9836; dvě šestnáctinky!
&#9837; notové béčko!
&#9839; notový křížek!

Pochopitelně, že se znaky a symboly psané svými kódy řídí stejnými pravidly, jako ostatní text. Tedy zde (by mělo být) velké oranžové sluníčko:



<font size="+3" color="orange">&#9788;</font>






TEST NAŠICH TAGŮ

Jo, a jak si vyzkoušíme, že je náš HTML text správně???
V Písmáku odešleme kritiku a již nikdy se k ní nevrátíme!!! Nic už neopravíme.

No, to je jednoduché: Vlevo na liště (pokud to nemáte překonfigurováno ve woknech „na jinam“…) je klávesa [Start] klikněte na ní, vyberte Programy (Programs), vyberte Příslušenství (Accessories), vyberte Poznámkový blok (Notepad).
Mělo by se otevřít krásné prázdné bílé okénko. Zkuste si v něm napsat své HTML TAGy! Pak soubor uložte s nějakým krátkým názvem na místo, kam si ukládáte třeba textové sobory - prostě, abyste ho pak ještě našli!
POZOR!!! Neukládejte s příponou TXT, ale HTM. Když se to nepovede, tak po uložení přejmenujte! Pokud máte alespoň trochu rozumně nastavený počítač, tak potom už jen stačí na soubor zaklikat a již se zobrazí ve vašem prohlížeči…

Když se vám výsledek nelíbí, nezavírejte prohlížeč! Jen si otevřete soubor pro editaci a opravte co potřebujete. Uložte. Nezavírejte! Skočte do otevřeného prohlížeče a dejte Aktualizovat (tlačítkem či klávesou [F5]). Zkontrolujte účinek… A tak stále, až do konečného vítězství!!!

Když budete s výsledkem spokojeni, můžete ZKOPÍROVAT DO CLIPBOARDU = Označit celý zvolený text myší (přitom mačkáte myšce levé ouško), text mění barvu, pustíte myš, stisknete [Ctrl]/[C].
Potom skočíte do Písmáka a dáte [Ctrl]/[V] a text je tam!

POZOR! ROZDÍL PRO PÍSMÁKA: Ve svém textu nesmíte používat klávesu [Enter], protože v Písmáku se automaticky mění na TAG BR, tedy zalomení řádku! Při kopírování je také dobré mít vypnuté lámání řádků…

Budou-li s tím problémy, napište, vysvětlím podrobněji!






Děkuji za pozornost!

Vaše Petula
|||~_~||| Čarodějnice




V příští lekci si povíme něco o čárách a zarovnávání.

&&Petula&&11.10.2002&& Hm... Tk koukám, že to Písmák nevydejchává!!! Blbne formátování! Takhle stupidně mi to písmo fakt nelítá!!! :o) Asi to během příštího týdne udělám tak, že si to dám na své stránky a zde bude jen odkaz!!!
|||-_-|||
sidonia
10. 12. 2004
Dát tip
zkusim taky heya!

sidonia
10. 12. 2004
Dát tip
aha, tak znovu:)) heya!

noeran
06. 11. 2004
Dát tip
I feel good OUJEEEEEEE

noeran
06. 11. 2004
Dát tip
kurnik... trapas :))))

Solitary
07. 07. 2004
Dát tip
:)

Petula
01. 07. 2004
Dát tip

TO NEMÁ CHYBU!

DÍKY!
 


|||-_-|||

Solitary
30. 06. 2004
Dát tip

Petula
23. 10. 2003
Dát tip
Alino!!!! Ty nádherný zvíře! Dík za vobrázek!!! Stahuji do svého „Arsch-Chlívu“!
|||-_-|||

Bacil
13. 10. 2003
Dát tip
Alina: :-)) Petula: záslužné

alina
11. 10. 2003
Dát tip
ehmm.... já nic :o))) ....já jen, že jsem kdesi na netu tenhle obrázek objevila mezi nějakejma fórkama a s titulkem: Ženy a informační technologie

Quinn
17. 01. 2003
Dát tip
Na mě je to vážně moc, to už asi nebude těma blonďatýma vlasama :o))) ♥

cvok
04. 12. 2002
Dát tip

cvok
04. 12. 2002
Dát tip

Borec
22. 10. 2002
Dát tip
Tak tohle je:

JRR
16. 10. 2002
Dát tip
TiP

aRmida
15. 10. 2002
Dát tip
ano ano ... toto dílo má velkou literární hodnotu. prostě ohromný kus poezie...:-)

Petula
15. 10. 2002
Dát tip
aRmido, napiš sem ódu HTML lekcím kódu! TAGy mají kouzlo řádu, dopila jsem limonádu, to, že byla barvy <GREEN> díky lekcím teď už vím. Odstavec je zase <P>-é, čtu si návod pro tupé! A pro chtré knižní rady HTML kup si z Grady! Sic je hodně zmatená… Hledej hesla, písmena! Staví celé kódu stránky, mnohdy zbytné pro Písmánky. Tak jen věz že BOLD je tučné, ITALIKU se též učme. Časem taky odkazy, už mi múza dochází Prostě HTML texty hrajou nám jako TŘI SESTRY! Štimuje to jak na bálu! HTML pějme chválu!
░▒▓-_-▓▒░

aRmida
15. 10. 2002
Dát tip
vždyť to říkám - poezie ehm... ukradnuv si pár vteřin na brouzdání po písmákovi odmítám myšlenku na psaní recenzí v html kódu, ačkoliv jej (sice jen průměrně) ovládám. ale jak říkala babička, sobre gusta no se disputa!

Petula
15. 10. 2002
Dát tip
Á, babička měla klasické vzdělání… :o) Tedy fajn, „Proti gustu žádný dišputát“, jak říkala ta moje… Jenže, kdo tu má to gusto???

aRmida
15. 10. 2002
Dát tip
gusto má každý. svoje. a gustu měl julda fučík. ta byla ovšem tak trochu všech. ale to až později. a nejspíš ani neměla španělskou babičku.

Whelp
14. 10. 2002
Dát tip
Plíma, plíma, plíma!! Tip.:o))

Armand
14. 10. 2002
Dát tip
móc dobrá a záslužná prácička Petulo!!! MOC! ********* počítám, že za tohle půjdeš do nebe :)))))))))

Petula
14. 10. 2002
Dát tip
Tak jsem to sem narvala znovu a – zdá se – už to Písmáček vzal lépe... Alísku, u těch znaků, co se Ti nezobrazují máš vyřvaníky, neboť jsou zobrazitelné jen u některých prohlížečů a tak…
|||-_-|||

Petula
14. 10. 2002
Dát tip
Jo, a ještě drobnost! Nazpaměť se fakt nemá smysl ta čísílka učit!!! ► I tato lekce teď přijde do klubu HTML pro BLONDÝNKY. Tam bude snad k nalezení… ► Stačí si tu část s těmi čísílky označit myší, zkopírovat do klipboardu a vložit do notepadu (zde v lekci na konci uvedeno JAK). Potom uložit u sebe na kompu třeba jako soubor ZNAKY.TXT a pak se stačí jen podívat či opět zkopírovat do svého HTML textu. Proto jsem tam dala nejen ty symboly, ale i jejich popisky, protože tím zkopírováním se dost pravděpodobně některé znaky ztratí, a to i při uložení v UNICODE, které chytřejší notepady možná nabídnou… Stando! To tak jen vypadá! Jenom že je popsáno hodně místa!!! To výše je ale už jen opakování a rozšíření z minulé lekce. Nové je zde jen to uvádění sluníček a dalších znaků a to uložení do souboru na vyzkoušení…
|||~_~|||

sice nejsem blondýn , ale já opravdu nestíhám... všechno sem si tu poznačil a jdu se učit!!!!!!!! :-)))

já sem ale šíííííííííkovnej...

alina
12. 10. 2002
Dát tip
Tak mám ten pocit, ☼ Petulííí ☼, že začnu ve škole propadat ;) Kady si mám do hlavinky nacpat fšechny ty čišílka a udělátka??? :o)) .... a vůbec, budu si to muset ještě někdy pečlivě naštudýrovat.. ☼ """*o*"""" a.

alina
12. 10. 2002
Dát tip
Jo, hele, ale stejně z toho furt moc nechápu: a/ - kde všade se daji tyhle kouzleníčka provozovat aby fungovaly??...b/ proč např já tu teˇˇd místo těch hvězdiček, srdíček a telefounků vidím jen prázdný čtverečky.../a přitom třeba notičky, sluníčko a některé další vidím/... co to tu furt to.....tento ...fšichni vykládáte o nějakém nastavení prohlížeče ........??? *o*

alina
12. 10. 2002
Dát tip
Stáníčku :o))))))))) ......lidoop v pyžamu ..... by se dalo tesat :o))

Bacil
12. 10. 2002
Dát tip
Sqělé!

Krel
12. 10. 2002
Dát tip
!!* jdu to ukoušet:-)

Na psaní názorů musíte mít ověřený email.
Sdílení

© Dobrý spolek

Nahoru