jak napsat listing - návod

Geocaching Cache - obecná diskuze
1

Množí se tu otázky jak napsat listing. Většina rádců ale autora odpálkuje tím, že napíše link na jakpsatweb.cz. Nepovažuji za nutné, aby každý kačer uměl odrážkované seznamy a podobné vylomeniny, na kvalitní listing postačí pár vybraných rad:
První předpoklad je zaškrtnout políčko "HTML text below" při zakládání.
znaky "<" a ">" se vkládají přes AltGR a současně zmačklý cuplik "," nebo "."
Dám sem větu "Já jsu nejlepší kešer v republice" a teď si s ní budu hrát.
a) Slovo "nejlepší" chcu napsat většími písmeny:
Já jsu <font size="8">nejlepší</font>kešer v republice. (číslo je proměnná, značí tuším výšku znaku v pixelech)
b) Slovo "nejlepší kešer" chcu mít červeně a "republice" větší.
Já jsu <font color="red">nejlepší kešer</font> v <font size="9">republice</font>. (anglické barvy red, blue, grey… se naučte sami, opět se jedná o proměnnou)
c) Za slovem "nejlepší" chcu zalomit řádek.
Já jsu nejlepší <br> kešer v republice.
d) Pod touto větou chcu vodorovnou oddělovací čáru.
Já jsu … republice. <br><hr>
e) Chcu vložit obrázek.
Tady to bude složitější: nejprve je nutné obrázek nahrát na server gc.com linkem "upload image". Pak ho z listingu (stránka kešky) rozkliknu, pravým tlačítkem kliknu na zobrazenou fotku a vyberu "vlastnosti". Zkopíruji si celý řádek za URL (hned nahoře). Je to dlouhý text začínající http:… a končící změtí čísel a písmen. Pak do listingu vložím toto:
<img src="http:… (bláblá) …1a2b3c.jpg">
f) Chcu napsat větu: "Na stránkách Slavia.cz se dozvíte víc" a chcu, aby šlo kliknutím na www.Slavia.cz rozkliknout web fotbalového klubu.
Na stránkách <a href="http://www.slavia.cz">Slavia.cz</a> se dozvíte více.

Se vším se nechá samozřejmě kouzlit daleko více, ale zde popsané jedno procento by mělo i uplným html-analfabetům pomoci napsat zajímavý listing.

2

A ted trochu podrobneji.

(Samozřejmě pokud máte českou klávesnici…)

Doporučuju spíš <font size="+1">. To relativně zvětší písmo o jedna. Člověk pak nemusí vědět co má kdo zrovna nastaveno jako defaultní výšku ve svém prohlížeči (mezi prohlížeči se to může lišit).

(<font size="+2">…, navíc lze atributy kombinovat: <font size="+2" color="red">)

Zbytek je naprosto v pořádku. Jen bych ještě doporučil pozoronost tagům pro <b>tučný text</b> a <i>kurzívu</i>. A doplnil bych jedno FAQ:
[color=red]Server nahrazuje některé české znaky jejich variantou bez háčků. Prostě se musíte smířit s tím, že je tam nedostanete.[/color]

3

kurzíva a tučné jsou výborné (na to jsem zapomněl), kombinacemi jsem nechtěl "analfabetům" motat hlavu, ale budiž, jinak jsem původně chtěl napsat (a zapomněl napsat), že není vhodné používat podtržený text, protože pak vypadá jako odkaz. B)

4

Nevím přesně jak je na tom GC.com, ale většina zde použitých tagů je již zastaralých. Je sice pravda, že GC používá přechodovou variantu XHTML, ale to nám přeci nebrání použití nového způsobu zápisu HTML, který jistě zajistí kompatibilitu do budoucna.

5

Myslím, že ti nic nebrání v seznámení nás s novým způsobem zápisu HTML :wink: Bude to jistě mnohem přínosnější než citovaný odstavec.

6

Tak tedy nový nebo spíše doporučený zápis dle standartu XHTML 1.1 je následující:

Obecně - základní pravidla
Hlavní pravidlo: každý tag musí být ukončen např. <p></p>, pokud není tag párový, musí být ukončen lomítkem např. <br />. Vizuální vlastnosti textu mají být řešeny pomocí kaskádových stylů CSS.

Nadpisy
Nadpisy pomocí tagů <h1>text</h1>, <h2>text</h2> … <h6>text</h6> podle důležitosti. Nadpis <h1> by se měl na stránce vyskytovat pouze jednou.

Odstavce
Každý odstavec musí začínat tagem <p> a ukončen </p>, pokud nechci vkládat standardní řádek mohu použít tagy <div>obsah</div>
Pokud chci v řádku změnit jen jedno slovo, souvětí, použiji tagy <span>text</span> s dodatečnými parametry (viz níže).
Zalomení řádku pomocí tagu <br />

Dolní index pomocí tagu <sub>text</sub>
Horní index pomocí tagu <sup>text</sup>

Tučnost písma je pomocí tagu <strong>text</strong>, případně <b>text</b>
Kurzíva pomocí tagu <em>text</em>, případně <i>text</i>

Odkazy
Odkazy se dělají pomocí tagu <a href="adresa">text</a>

Obrázky
Obrázky se vkládají pomocí tagu <img src="adresa obrázku" width="šířka" height="výška" alt="popisek" />

Seznamy
Nečíselné seznamy pomocí tagu <ul></ul> a mezi ně jednotlivé položky pomocí tagu <li>text</li>
Číselné seznamy obdobně pomocí tagu <ol></ol> a mezi ně opět jednotlivé položky pomocí tagu <li>text</li>

Vizuální prvky
Vodorovné oddělení (čára) pomocí tagu <hr />

Citace
Dlouhé citace pomocí tagu <blockquote>text</blockquote>
Krátké (jednořádkové) citace pomocí tagu <q>text</q>

Dodatečné úpravy text (barva, velikost,…)
Pokud chceme danému tagu přiřadit další dodatečné parametry použijeme kaskádové styly CSS, které vložíme pomocí přídavného atributu style přímo do prvního tagu např. <p style="color: red;">červený malý text</p>

A teď souhrn několika nejpoužívanějších CSS stylů a jejich zápis:
barva: color: jméno barvy; (jméno je třeba: red nebo blue nebo #12A0FF, kde poslední je RGB hexadecimální zápis, na každou barevnou složku připadají dvě číslice)
velikost písma: font-size: velikost; (velikost je: xx-small, x-small, small, medium, large, x-large, xx-large)
zarovnání textu: text-align: pozice; (pozice je: left, center, right, justify)

Atributy je možno kombinovat následujícím způsobem: Toto je <span style="font-size: small; color: red;">[color=red]malý červený text[/color]</span>.

Snad je to vyčerpávající a pokud by ještě někdo něco potřeboval, rád doplním :wink:

7

[color=gray]Připomínky byly zapracovány, takže také mažu původní text tohoto příspěvku[/color]

8

[color=gray]Prispevek PetraX podle mych pozadavku oeditovan. Puvodni text tohoto prispevku jsem smazal.[/color]

9

Tak už jsem to upravil dle vašich připomínek (díky za ně) a trochu zpřehlednil (v rámci možnosti fóra). :slight_smile:

10

a ted do wiki :slight_smile:

11

HTML pro mne znamena ‘‘Hours of Tremendous Meaningless Labour’’, ale snazim se tomu prijit na zub. Mam nekolik dotazu, prosim o primou odpoved nebo zadnou, stranky jakpsatweb znam;) (spouste veci tam nerozumim a vsechno hledam strasne dlouho, proto se ptam tady v nadeji, ze dostanu strucnou a pro pocitacoveho nevzdelance srozumitelnou odpoved)

  1. Jak udelat z textu dva sloupce?
    2)Jak zarovnam obrazek na stred? zkousim align="centre", ale proste mi to nefunguje. Je to u kese [cache]GC1AMQ7[/cache], cele ten zoufaly pokus vypada takhe:
    <img src="http://img.geocaching.com/cache/e2c5d195-4b27-4a04-b725-0b90b3b7e1ba.jpg&quot;
    align="centre"/>

Diky

12

<p align="center"><img src="http://img.geocaching.com/cache/e2c5d195-4b27-4a04-b725-0b90b3b7e1ba.jpg&quot;&gt;

Na tohle je podle mne dobry mnohymi proklinany FrontPage, kdyz nevis jak neco napsat v HTML, tak to tam udelat v navrhu a pak kouknout na kod.

13

Diky. Jen je mi divne, ze kdyz jsem obrazek zarovnavala doprava nebo doleva, fungovalo to.

14

buď tabulkou nebo pomocí tagu DIV a stylů

<div id="obal">
<div id="levy" style="float: left; margin-right: 20px;">
text leveho sloupce
</div>
<div id="pravy">
text praveho sloupce
</div>
</div>

15

Díky, dva sloupce to udělalo, ale text, který jsem chtěla mít pod těmi dvěma sloupci zase v jednom sloupci se do toho přidal taky. Co s tím?
Jde o text v mém profilu, zas na tom tak životně nezáleží, ale když už to zkouším, tak to chci dotáhnout do konce.

16

Pokud te spravne chapu, tak mas spatne ukoncete <div>. Proste presun (smaz) </div> z radky


     alt="Photo Sharing and Video Hosting at Photobucket" /></p></div>

na konec radky (budou dva za sebou)


#251 ...</div>
17

align="center" na GC stránkách již nějakou domu z nějakého důvodu nefunguje, místo něho pužívám <center> </center>

18

Další problém, prosím, poraďte.
Chci mít text o několika odstavcích napsaný modrým písmem. (Odstavce dělím <p>.)Když použiju na začátku <font color="blue"> a na konci </font>, skočí ten </font> z konce textu na konec prvního odstavce. Jde to vyřešit označením každého odstavce zvlášť, ale do toho se mi opravdu nechce. Nejde to jinak?

19

To co to s tím dělá je podle specifikace (x)html správně, takže buď musíš použít


<p>
<font color="blue">text</font>
</p>
<p>
<font color="blue">text</font>
</p>
<p>
<font color="blue">text</font>
</p>

nebo jeden odstavec a zalamovat pomocí <br>


<p>
<font color="blue">text<br>
text<br>
text<br>
</font>
</p>
20

v souladu s vyse uvedenym navodem od PetrXa:


<p>text odstavce <span style="color: blue">modry text</span> a pokracuje normalni barvou</p>