Změna barvy textu (odkazu) pomocí HTML
Dobrý den.
Nevím, zda tyto dotazy, ohledně tvorby webových stránek, HTML a CSS patří vůbec do PC poradny, pokud ne, budu rád za doporučení jiného fóra, kde s dotazem uspěji lépe.
Chtěl bych se, prosím, zeptat, jak lze pomocí HTML "kódu" nastavit, aby se mi text, který obsahuje odkaz na danou stránku při najetí myši změnil na jinou barvu. Bohužel prošel jsem veškeré weby, kde to radí, ale pouze pomocí CSS a ten je poněkud odlišný od HTML, který používám a netuším, jak to udělat.
Chci tedy, aby daný text obsahoval odkaz (zároveň aby nebyl podtržen, neboť to podrtržení se mi nelíbí - tam jsem použil, snad správně a style="text-decoration: none" - pokud je i jiná možnost a metoda, uvítám radu), a aby se text po najetí myší zabarvil (třeba do červené nebo do nějaké jiné barvy, to je nyní jedno).
Napíši můj případ:
........<a style="text-decoration: none" href="kartacky-pro-kobold-eb7">Kartáčky EP7 pro elektrický kartáč Kobold EB7</a></h6><img class="" alt="" title="" src="data/files/prislusenstvi-a-spotrebni-material/kartacky/p914000-2-1.jpg">
Vím, že pro použití změny zabarvení textu po najetí myší mám použít a:hover {color:red;} dle CSS, ale vůbec nevím, jak to aplikovat do kódu pomocí HTML, zkoušel jsem to a hover="color: red" případně i mnoho různými kombinacemi, ale zkrátka se mi to nedaří.
Za radu moc díky.
Tohle asi v samotném HTML neuděláš. Proč nemůžeš použít CSS?
Upřímně? Protože jsem se začal učit styl pomocí HTML a CSS prozatím vůbec neovládám.
Nelze případně alespoň nějak kombinovat HTML a CSS dohromady v rámci jedné aplikace? :)
V zásadě píšeš pořád to samé, jenom maličko jinak a na jiné místo.
Např. místo:
Napíšeš:
Otázku na zkombinování jsem nepochopil.
Zkombinováíní asi myslí, aby styly nemusely být v externím souboru *.css.
No ale potom sa budeš učiť nezmysel, pretože na štýlovanie (zmeny farieb, rozmerov, odtieňov, zaoblení, animácie) slúži práve ten CSS.
To je ako keby som mal auto, ale nechcel si mať kolesá. Ale namiesto toho aby si natankoval (pridal CSS) zatiaľ čo máš kanister hneď vedľa seba, tak by si to (plne funkčné) auto tlačil, a takto sa snažil ísť do iného mesta. Proste debilizmus... ak sa to chceš poriadne naučiť, nauč sa to rovno s CSS.
Ak chceš aplikovať CSS do HTML, tak v <head> tagu pridaj <link rel="stylesheet" href="style.css"> a v súbore style.css napíšeš to css.
Zapiš ty styly do hlavičky:
Super poznatek, díky.
Co ale, když v rámci HTML žádnou hlavičku <head> ani <body> daného bloku <div> definovanou nemám?
Mám to udělané v rámci jednoho container divu, ve kterém jsou 4 "sloupce" po šířce 3, aby bylo po celé šíři stránky vždy 4 obrázky s klikatelným textem, víceméně jako je zcela běžné a takto je skládám pod sebou.
<div class="container">
<div class="row justify-content-center text-center">
<div class="col-md-3 col-md-3 mb-5 mb-lg-0" data-aos="fade-up">
<h6 style="--kedit-fsx: 1.05;" class="keditable">
<a href="kartacky-pro-kobold-eb7" style="text-decoration: none">Kartáčky EP7 pro elektrický kartáč Kobold EB7</a></h6><img title="" alt="" class="" src="data/files/prislusenstvi-a-spotrebni-material/kartacky/p914000-2-1.jpg">
</div>
Abych netvořil tedy zcela nový kód s HEAD a BODY, lze to případně někam "nacpat" do již vytvořeného kódování divu?
Díky :)
Jako že bys měl HTML soubor bez head a body? Tomu se věří těžko.
No soubor, nevím jak myslíš soubor. Ano, přímo v úpravě HTML stránky žádné HEAD a BODY definované nemám. Přidávám jen divy, dle toho, co a jak potřebuji přidat na danou stránku.
Čemu říkáš úprava HTML stránky? Každá HTML stránka má head a body.
Takže HEAD a BODY nejspíš přidává šablona nějakého redakčního systému? Kdybys nemlžil a napsal přesně o co se snažíš....
Ano, pardon.
Head a body nejspíše určitě přidává šablona redakčního systému, a já upravuji jen samotný HTML vždy dané stránky. :)
I redakční systém bude mít určitě možnost upravovat styly.
Však ano, běžně upravuji. Ale to HEAD a BODY tam zkrátka uvádět nemám, to je již předdefinované.
Normálně si upravuji HTML kódy dané stránky, ale nikdy jsem nepoužil HEAD a BODY a normálně to funguje. Snad si rozumíme? Viz příloha
Používání inline stylování v HTML za editaci stylů je něco podobného jako považovat tříkolku za auto, protože to taky jezdí.
Až budeš někdy v budoucnu potřebovat vzhled všech odkazů, tak je budeš opravovat po jednom? V CSS bys to změnil na jednom řádku.
Nebudu je muset upravovat po jednom, stačí si dané stylování a kód nakopírovat i pro ostatní "odkazy", protože v rámci zobrazení 4 komponentů vedle sebe v rámci jedné stránky, a vždy se budou zobrazovat 4 na jednom řádku, jednoduše rozkopíruji a všechny komponenty s textem budou mít stejné stylování.
Pro mě je teď podstatné úspěšně aplikovat u jednoho samotného, případně u jednoho řádku se 4 komponenty, pak už to pouze rozkopíruji a upravím jen požadovaný text a obrázky :)
Takže úprava každého zvlášť víceméně není nutná v rámci stylování.
Pro mě je nyní podstatné úspěšně aplikovat u jednoho, pak to jednoduše rozkopíruji. ;)
Jenže u CSS bys to změnil jednou na jednom místě a automaticky to měl všude. Ale evidentně jsi pracovitý člověk, takže nehledáš způsoby, jak si práci ulehčit.
Ano, chápu, ale nyní prosím k věci. (viz foto)
Takto to mám nyní "předchystané", víceméně jsem jen jeden KOMPONENT vytvořil a jak je hotový, rozkopíruji na další tři na jeden řádek, takže jsou 4 na jeden řádek hotové a takto mohu postupovat dále. Samozřejmě jak bude hotové i to stylování, rozkopíruji rovněž automaticky jen mezi všechny, tam pak jen stačí upravit daný text a obrázek pod ním. Jinak je stylování zcela shodné. To je to nejmenší.
nyní spíše, jak aplikovat onu změnu barvy po najetí myši v rámci mého HTML kódu :)
Přímo v HTML to nejde.
Tak to není HTML soubor.
No, vzhledem k tomu, že HEAD a BODY zkrátka v rámci redakčního systému jsou již někde definované, potřebuji to udělat bez oněch head, body, případně html.
Proč to nejde třeba nějak takto?:
<div data-aos="fade-up" class="col-md-3 col-md-3 mb-5 mb-lg-0">
<h6 class="keditable" style="--kedit-fsx: 1.05;"><style type="text/css">
a:hover {color:red;}
a {text-decoration: none}
</style><a style="text-decoration: none" href="kartacky-pro-kobold-eb7">Kartáčky EP7 pro elektrický kartáč Kobold EB7</a></h6><img class="" alt="" title="" src="data/files/prislusenstvi-a-spotrebni-material/kartacky/p914000-2-1.jpg">
</div>
nebo zkrátka tak, jak to zkombinovat jako HTML + CSS styl dohromady. HEAD a BODY použít zřejmě nemohu, ty definované nemám, v rámci onoho redakčního systému jsou HEAD a BODY automaticky určeny již v rámci upravovaného HTML.
Tag <style> musí být uvnitř <head>.
Pokud máš redakční systém, který neumožňuje editovat styly, tak je nejvyšší čas se poohlédnout po nějakém jiném.
Ale vždyť mám možnost upravovat styly. Jen říkám, že HEAD a BODY jsou součástí vždy už daného redakčního systému.
Nikdy jsem v rámci HTML kódu nepřidával HEAD a BODY, pakliže to nebylo potřeba. Klidně to tedy přidám, ale uživatel HOST mě asi chápe a napsat to, jak to je. :) Tedy doufám, že on ví, jak to mám a myslím :D
Ne, nemáš, viz https://pc.poradna.net/questions/3256354-zmena-barvy-textu-odkazu-pomoci-html#r3256377
Obecně mi to nedává celé smysl. </h6>ukončovací, když chybí počáteční <h6>, dále jak to mám udělat, aby se to celé nerozhodilo a vlastně vůbec fungovalo. Takto jsem to použil a nejde to.
to HTML tam je dle mě taky nějak navíc/zbytečné?. Jak to, prosím, spojit do jednoho, co uvádíš ty a co uvádím já:
<div class="container">
<div class="row justify-content-center text-center">
<div data-aos="fade-up" class="col-md-3 col-md-3 mb-5 mb-lg-0">
<h6 class="keditable" style="--kedit-fsx: 1.05;"><a style="text-decoration: none" href="kartacky-pro-kobold-eb7">Kartáčky EP7 pro elektrický kartáč Kobold EB7</a></h6><img class="" alt="" title="" src="data/files/prislusenstvi-a-spotrebni-material/kartacky/p914000-2-1.jpg">
</div>
->>>>......další div podobného stylu v daném kontejneru..... ->>>>>
Takže jak aplikovat to tvé <head>
<style type="text/css">
a:hover {color:red;}
a {text-decoration: none}
</style>
</head>
<body>
<a href="kartacky-pro-kobold-eb7">Kartáčky EP7 pro elektrický kartáč Kobold EB7</a></h6><img class="" alt="" title="" src="data/files/prislusenstvi-a-spotrebni-material/kartacky/p914000-2-1.jpg">
</body> do toho mého ?
Prozradíš, jaký to je redakční systém? Jinak se nemá cenu dohadovat.
Redakční systém WZ, mám tam zaplacenou doménu i onen redakční systém s úložištěm už rok, na začátky to prozatím stačí, než se naučím všechno, což bude trvat, tak si pak klidně zapaltím profi, ale nemá smysl investovat do něčeho, co stejně nebudu hned ovládat. Proto mám zatím, řekl bych, na začátečníka, vkusnou webovku a chci se učit dále, takže ono kódování se učím právě těmi úpravami dle toho, co potřebuji udělat dle sebe a ne v rámci předdefinovaného stylu daného redakčního systému. Prozatím se mi to daří, ale některé věci, např. ona změna barvy při najetí, je pro mě poněkud složitější. Samozřejmě jsem spíše začátečník. Proto jsem volil prozatím redakční systém.
Za mě sis pro začátečníka zvolil špatnou cestu. Jako začátečník by sis měl osahat přímo HTML a CSS. Takhle tě redakční systém od něčeho odstíní, něco ti vůbec nedovolí udělat a ty pak akorát získáš špatné návyky, kterých se pak budeš obtížně zbavovat.
Jo, přesně tak :)
Tady třeba mám udělané odkazy s hover Blog - myslím ty hnědé oválné nahoře v navigaci
v HTML to pak vypadá nějak takto
a v CSS to pak vypadá nějak takto
čili fakt nic složitého a co tu popisuje za porody s tím HTML prasičem (editor bych tomu neříkal), to už dávno mohl mít takle hotové a snadno si to měnit ...
Co toto?
Tomu úplně nerozumím. Celé tvé uvedené jsem zkopíroval a vložil, ale řádky onmouseover="this.style.color='#0F0'" a onmouseout="this.style.color='#00F'">Text odkazu</a po uložení stejně zmizely, jsou tedy asi neplatné.
lze to vůbec takto napsat samostatně to onmouseover a onmouseout? Zůstal jen modrý text „text odkazu“, a když otevřu edit HTML, tak zmíněné dva řádky se ani neuložily, což znamená, že jsou definovány špatně a HTML editor je nepřijmul.
Má to být skutečně tak? Díky
Teď jsem to zkusil uložit, odkaz je modrý, nepodtržený, když na něj najedu myší tak zezelená, když odjedu zase zmodrá, prostě to funguje jak má a řádky jsou definovány správně.
Pokud ti je HTML editor vyhazuje, tak je vadný a měl bys ho vyhodit.
Ostatně mám na http://wz.cz nějaké stránky zdarma už asi milión let, když tam plácnu jen ten úryvek, tak to taky chodí bez problémů
http://gilhad.wz.cz/zxcv.html
(Jinými slovy, udělej si stránky na wz.cz zdarma, naházej tam čisté HTML a CSS soubory a nauč se to používat.
Buď ti to bude stačit i pak, nebo si můžeš zaplatit lepší služby, nebo to pak převést kamkoli jinam, kde ti nebude jejich systém a nefunkční HTML editor aktivně házet klacky pod nohy. Ale v prostředí, které mi zmrší i správný kód bych fakt nezůstával i kdyby mě platili. Zvláště když je kolem tolik možností zdarma, které fungujou.
Tak teď nevím, proč to nejde. Můžeš mi, prosím, napsat znovu konkrétně celý kód, jaký jsi použil? Opravdu to na tvém odkazu funguje.
A na Wz.cz mám zaplacený celý hosting a doménu, tak nerozumím, jak chceš, abych si udělal stránky. Vše mi jinak na stránkách funguje.
Třeba jsem tam blbě vložil něco, kopíroval jsem to přesně, jak to uživatel IQ37 napsal.
Kam ten kód vkládáš? Dáš v daném bloku, který chceš upravovat - nastavení, </> HTML, a pole s HTML kódy jednoduše upravuješ? Děláš to také tak, ne? Jinde to snad ani upravovat nejde, ne?
Můžu poprosit o celý HTML kód? zkusím ho vložit od tebe, použil jsi ho úplně stejně?
<a style="color:blue; text-decoration: none; background: white;" href="https://seznam.cz"
onmouseover="this.style.color='#0F0'"
onmouseout="this.style.color='#00F'">Text odkazu</a>
Nechápu to. Vytvořil jsem tedy novou stránku (na mém webu, zkušební) a vložil tam přesně onen kód. Klikněte zde!
Zkuste si zobrazit zdrojový kód té stránky na odkaze „zde!“ pomocí CTRL + U, uvidíte, že mám vloženo vše správně. Proč to nejde? Nechápu!
To mohu do onoho editoru HTML vložit jen tak? Stejně když vše zkopíruji, vložím tak to onmouse... tam není. Lze to vůbec v editoru HTML jen tak vložit? Nebo nemá se to tam vepsat jinak?
Zkusil jsem tam vlézt a je to nějaké celé rozbité - například ani nefunguje lokální menu přez pravé myšítko - aby si to člověk jen označil a prošel přez Inspect - je potřeba u elementu body v eventech vyhodit ten bubling a pak to chodí
Je tam šíleně nepřehledná změť skriptů a CSS
Když se podívám na ten odkaz, tak tam je vložený ten link jednou v body, ale chybí tam právě ty onmouse a jednou v sekci head, kde ale takovéto texty nemají co dělat a tak se to vytlačilo před začátek stránky, přesně jak to HTML dělá se špatně umístěnými texty.
Takže to tam je sice vložené dvakrát, ale ani jednou správně - jednou je to na špatném místě a podruhé kus chybí.
Zjevně by bylo lepší použít nějaký editor, který to nemrší. V podstatě jakýkoliv normální textový editor (vim, nano, notepad, ...), nebo nějaké rozumné IDE (počínaje třeba TurboPascalem a nějakým VisualNěco konče), nebo cokoli rozumného, co tě nechá udělat tu stránku správně.
Pak si budeš moct udělat stránky čistě, přehledně, bez zbytečného bordelu a mít tam HTML a CSS jakékoli budeš potřebovat
Úplně jednoduše
udělal jsem si na disku soubor zxcv.html (protože takto dělaná jména - kus dolní řady - se snadno najdou a smažou)(příkazem vim zxcv.html - ale na editoru nesejde) a do něj jsem dal ten kód:
Soubor jsem uložil a v prohlížeči šel na wz.cz
Kliknul na přihlásit, zadal jméno a heslo
kliknul na správce souborů, vlevo je práce se systémem, nahrát soubor,
kliknul na tlačítko Browse a vybral ten soubor
kliknul na tlačítko OK a tím se tam ten soubor nahrál
A to je všechno (teda pak ještě v prohlížeči dal do URL gilhad.wz.cz/zxcv.html a odentroval, stránka se zobrazila a otestoval jsem tu myš)
Kdybych to dělal v rámci stránek a ne jako něco co zítra smažu, tak bych ten soubor zxcv.html pojmenoval líp, měl ho v adresáři projektu, přidal ho do verzovacího systému a zazálohoval (git add zxcv.html; git ci -am "pridani pokusneho souboru";git push)
A asi bych ho nepřidával přez webové rozhraní, ale nahrál ho přez FTP (nebo podle toho kam, tak raději přez scp, rsync nebo tak něco, s přihlašováním pomocí klíčů), nejspíš rovnou pomocí příkazů make;make upload - ale to by sis musel na to nastavit už trochu složitějším způsobem.
Ostatně jak máš pořešené zálohování, kdyby to třeba z webu po nějakém pádu, nebo útoku zmizelo? Já všechno dělám u sebe, automaticky zálohuju na víc míst (a navíc si to můžu snadno lokálně vyzkoušet před nahráním na web)
Jenomže on používá redakční systém WZ, který se jmenuje Tvůrce webu.
https://www.webzdarma.cz/tvurce-webu/
A ten vestavěný editor může filtrovat příkazy javascriptu (onmouseover) a další věci, takže v něm nelze plnohodnotně psát jakýkoliv kód, jen čisté HTML.
Viz začátek vlákna![]:)](https://static.poradna.net/images/smiley/evilsmile.gif)
na WZ může naprosto normálně uploadovat soubory, které napíše v čemkoli příčetném
Jenže on se nechce redakčního systému vzdát a psát web ručně, chápeš?
Já jsem z dotazu pochopil, že chce mít web podle svých představ, kde mu odkazy při najetí myší budou měnit barvu![]:)](https://static.poradna.net/images/smiley/evilsmile.gif)
Ostatně zatím tady opalečkoval jen jeden jediný příspěvek a to ten můj, kde říkám utéct od toho, co mrší HTML kód k něčemu, co ho umožňuje psát po libosti![]:)](https://static.poradna.net/images/smiley/evilsmile.gif)
Ostatně já taky používám jednoduchý redakční systém, který jsem si sám napsal, takže nemusím psát jen čisté HTML, ale můžu použít i ReStructuredText (odkazy na všech mých stránkách vpravo nahoře, SRC - například tady http://mix.gilhad.cz//Blog/Blog.htm ) .
A pokud budu chtít, tak tam kdekoliv to čisté HTML vnořím jak nic :)
Systémů, co používají RST je taky všude spousta, například Nikola (jako Tesla) https://getnikola.com/ nebo Pelican https://docs.getpelican.com/en/3.6.2/index.html
A můj taky![[favicon.ico]](http://asketic-aligator.gilhad.cz/icons/favicon.ico)
Asketic Aligator http://asketic-aligator.gilhad.cz/
(i když zatím bez velké dokumentace a s mými "špecifkámi", a možná pár verzí pozadu, ale to snadno doženu, bude-li zájem. Licence GPL, takže použití zdarma, s vytvořenýma stránkama si může dělat co chce, ale pokud by snad ten systém měnil a publikoval, tak tam jsou nějaké příčetné podmínky)
(a vytváření webu je jednoduché, prostě si v adresáři input dělám po libosti podadresáře a RST soubory, co se překládají a libovolné jiné, co se jen kopírujou (typicky obrázky, ale i HTML, CSS, zdrojáky programů, archivy ...). načež v hlavním adresáři dám make a mám lokální verzi, kterou můžu testovat v prohlížeč a dám make upload a ono se to nahraje na web. Samozřejmě je na začátku nutné upravit soubor site_config.conf, kam se zadají věci jako kam to nahrávat a jak se to má jmenovat a jakou to má mít hlavičku. A pak si člověk může i pohrát s CSS, pokud si to chce přeskinovat, nebo si tam dát nezávisle vlastní = prostě klasika)
Co se RST https://cs.wikipedia.org/wiki/ReStructuredText týče, tak není v základu výrazně složitější, než editor tady na poradně :)
Hlavní stránka Asketic Aligátora
Ukázka formátování z http://8bit.gilhad.cz/6809/Castor.html
HOST:
Ano, překopávat celý můj vytvořený "web" redakčním systémem a všechno dělat ručně pomocí HTML kódů není v mých časových i znalostních možnostech. Redakční systém mi má moji práci ulehčit, teprve až se dostanu do nějaké úrovně znalostí a bude na to čas, nemám problém si psát web ručně, ale momentálně bych opravdu chtěl onen ZÁKLAD mít postavený na redakčním systému. Ale i tak si některé nebo mnoho věcí upravuji k obrazu svému (dle svých představ), ovšem zde jsem narazil na problém, třeba ona změna barev a mnoho dalších efektů, na kterých teprve pracuji.
Klíčové informace a pochopení díky HOSTovi, jsou přesně tak, jak píší a jsem rád za ně, protože to možná je i důvodem, proč ostatním vše funguje a mě ne. :)
Každopádně díky za rady všem, jakékoliv rady a poznatky mi rozhodně pomůžou a třeba se k nějakému cíli dopídíme :)
Anooo, díky HOSTe. Přesně tak to je. Díky moc za důležitý poznatek, poměrně klíčový ;)
Ten editor ti asi přepisuje ten vložený kód. Tohle nemůžeš vkládat přímo do stránky,
ale do zdrojáku toho editoru, který tu stránku vytváří. Na tohle nestačíš.
Na to nestačí nikdo - editor běží na serveru, k jeho zdrojákům samozřejmě nemá přístup.
Nečetl jsem všechny příspěvky, třeba si ten ten systém instaloval sám (ale zřejmě nee).
https://pc.poradna.net/questions/3256354-zmena-barvy-textu-odkazu-pomoci-html#r3256388
používať eventy volajúce JS na aplikovanie CSS je asi taký nezmysel ako ísť z Bratislavy do Brna autom cez Londín (teda ak nie si cestovatel a tvoj ciel je fakt len to Brno).
Co toto? znamená, že je to jedna z možností, jak to bude fungovat i v Londýně.
Áno, z Bratislavy do Brna dôjdeš aj keď pôjdeš cez Londín... ale povedz mi kto by bol normálny, aby si predĺžil 130km trasu na 3 tisíc km?
Taktiež, ak používaš JS na takéto veci, kde stačí CSS, tak len znižuješ výkon, zhoršuješ dostupnosť (trebárs to nefunguje v terminálových prehliadačoch, alebo keď je vypnutý JS) a podobne. Proste je to špatné riešenie.
To teď řešíte mezi sebou vy dva nebo to je narážka i na mě? :D Se v tom nějak ztracím :D
V podstatě je to narážka na to původní řešení od IQ37, kde v tagu používá ty eventy onmouseover (čímž používá javaskript a eventy na to aby nastavil CSS ) a tak, místo aby
1) ten tag byl prostě
(nebo dokonce i bez class, pokud se to dobře postaví)
2) v HEAD sekci jsi měl
3) do kořenu svých stránek nahrál soubor css.css obsahující
(což pro tento příklad stačí, obecně tam toho budeš mít víc)
Přičemž ten soubor se může jmenovat i jinak, MZlinky jsou Modro Zelené, ale taky se to může jmenovat jinak a ten obalující tag nemusí být div a nemusí to být ten nejbližší obalující tag