Pomoc s HTML
Re: Pomoc s HTML
Ano, bez JS se obejde (pokud to nebude s vychytávkama moc přehánět), ale Bootstrap se hodí pro responzivní web tj. jedna stránka se přizpůsobí zobrazení na PC, tabletu i telefonu.
"all your robots are belong to us"
robodoupe.cz
robodoupe.cz
Re: Pomoc s HTML
Pánové moc děkuji za další naměty ke studiu a vysvětlení nejasností
Re: Pomoc s HTML
Zdravim
mám opět trochu problem zde je kod části stránky ale koplet funkční ma hlavičku i patičku. Zajímá mne proč mi to nevyktresluje rámečky uvnitř tabulky. Když se udělá čistě holá tabulka pak se vnitřní příčky vykreslí ale s těmi styly co tam jsou už to nedělá a zajímá mne proč a jak se to dá udělat. Vím že existuje tag rules a ten by to měl zvládnout ale nejde to bez toho?
mám opět trochu problem zde je kod části stránky ale koplet funkční ma hlavičku i patičku. Zajímá mne proč mi to nevyktresluje rámečky uvnitř tabulky. Když se udělá čistě holá tabulka pak se vnitřní příčky vykreslí ale s těmi styly co tam jsou už to nedělá a zajímá mne proč a jak se to dá udělat. Vím že existuje tag rules a ten by to měl zvládnout ale nejde to bez toho?
Kód: Vybrat vše
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html charset=ISO-8859-1"
http-equiv="content-type">
<title>stranka1</title>
<meta http-equiv="refresh" name="viewport"
content="60">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
.auto-style1 {
border: margin: 10px 10px; background-color: rgb(76, 175, 80); color: white; width: 100px; height: 70px; text-align: center; font-size: 16px; cursor: pointer;
}</style>
</head>
<body>
<div style="width: 1000px; margin-left: auto; margin-right: auto;">
<h1> Pokusne ozhrani</h1>
<table>
<tbody>
<tr>
<td>
</td>
<td>
<table
style="border: 3px solid gray; background-color: rgb(255, 231, 150); width: 380px; height: 265px;">
<tbody>
<tr>
<td
style="background-color: rgb(255, 204, 255); height: 65px;"
colspan="4">
<h4 style="width: 320px;"> METEOROLOGICKA
STANICE</h4>
</td>
</tr>
<tr>
<td style="height: 37px;" colspan="2"><span>
Teplota venku</span></td>
<td style="height: 37px;" colspan="2">
Teplota uvnitr </td>
</tr>
<tr>
<td
style="width: 40px; background-color: rgb(102, 255, 153); height: 113px;"
colspan="2">
<h1 style="font-size: 50px;">12C</h1>
</td>
<td
style="width: 40px; background-color: rgb(255, 255, 153); height: 113px;"
colspan="2">
<h1 style="font-size: 50px;">25C </h1>
</td>
</tr>
<tr>
<td style="height: 37px;">22% </td>
<td style="height: 37px;">24% </td>
<td style="height: 37px;">26 </td>
<td style="height: 37px;"> 24</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<br>
</div>
</body>
</html>
Re: Pomoc s HTML
Pokud vím, tak tabulka defaultně okraje buněk nemá. Můžeš třeba do tagu <style> přidat něco jako
a mimochodem máš tam ve stylu auto-style1 border, ale prázdný.
Kód: Vybrat vše
td {border: 1px solid red;}
tr {border: 5px dashed green;}
table {border: 10px groove blue;}
Nikoho plánovaně neurážím. Jestli se Vám nelíbí co píšu, tak to nečtěte. A ostatně, třeba za to nemůžu - Researchers believe that dark humor can be a significant symptom of dementia.
Re: Pomoc s HTML
Ano, v tabulce je třeba okraje buněk "aktivovat", například HTML parametrem "border=1" u tagu "table" (až v té druhé vnořené tabulce):
Jemnější nastavení okrajů je ale asi lepší definovat v hlavním CSS (v tagu "style"). Jak už ukázal David, tak v CSS je možno globálně ovlivňovat přímo obecné HTML tagy (např. "td", "tr" nebo "table"), není nutno jim dávat parametr "class".
Kód: Vybrat vše
<table border="1"
style="border: 3px solid gray; background-color: rgb(255, 231, 150); width: 380px; height: 265px;">
Re: Pomoc s HTML
Ahoj
Díky moc jinak
Ale začínám mít obavu že kodbude moc dlouhý i pro ESP. Potřeboval bych nějakou redukci toho kodu aby stránka zůstala celá ale vše co tam být nemusí tam nebylo a nejsim si jist že to verifikátor html kodu zvládne.
Jak sprívně postupovat při optimalizaci kodu? Dík za rady
PS předpokládám že styl co mi navrhuješ bude umístěn ještě před hlavičkou a bude platit ro celou stránku. Ale když v některé tabulce ty rámečky chci použít jen někde nebo s jinou barvou? Jak to udělat a správně v dané tabulce modifikovat ? Jde to vůbec?
Díky moc jinak
je prázdný protože jsem sem dal pouze část kodu a tady tento styl neměl uplatnění. Upaltnuje se v jiné části na tlačítkách.mimochodem máš tam ve stylu auto-style1 border, ale prázdný
Ale začínám mít obavu že kodbude moc dlouhý i pro ESP. Potřeboval bych nějakou redukci toho kodu aby stránka zůstala celá ale vše co tam být nemusí tam nebylo a nejsim si jist že to verifikátor html kodu zvládne.
Jak sprívně postupovat při optimalizaci kodu? Dík za rady
PS předpokládám že styl co mi navrhuješ bude umístěn ještě před hlavičkou a bude platit ro celou stránku. Ale když v některé tabulce ty rámečky chci použít jen někde nebo s jinou barvou? Jak to udělat a správně v dané tabulce modifikovat ? Jde to vůbec?
Re: Pomoc s HTML
Obávám se, že pokud nám neukážeš celý kód třeba přes Git, tak ti s optimalizací moc nepomůžeme...
Btw kaskádové styly, pokud se používají tak, jak mají, optimalizují množství kódu tak nějak z principu jejich fungování
Btw kaskádové styly, pokud se používají tak, jak mají, optimalizují množství kódu tak nějak z principu jejich fungování
"all your robots are belong to us"
robodoupe.cz
robodoupe.cz
Re: Pomoc s HTML
Ahoj datone.
Nevím, co myslíš slovy "styl bude umístěn ještě před hlavičkou", ale obecně by před HTML tagem "head" nemělo být prakticky nic (kromě tagů "html" a případně "DOCTYPE").
Množství kódu nejlépe ušetříš tím, že stránku (vzhled) navrhneš co nejjednodušší (obvykle to pak bývá i nejpřehlednější). Pokud máš k dispozici prostor na nějakém veřejném webovém serveru (např. na freehostingu), tak můžeš celý CSS kód dát tam a z HTML se na to CSS jen odkázat (jako tam už teď máš odkaz na "bootstrap.min.css").
U CSS je to obecně tak, že "vyhraje ta poslední definice" (pokud jich je víc pro stejný prvek), nebo "vyhraje to nejpřesnější určení prvku" (např. defince "td.blue" vyhraje nad definicí obecného "td" [u prvku "td" s upřesněním "class=blue"]).
Přidávám se k ostatním v tom, že nejlépe ti poradíme, pokud uvidíme celý ESP kód, nebo alespoň celý předpokládaný HTML/CSS kód. Vytržené kousky jsou nepřehledné a matoucí. Nemusíš to dávat na GIT (taky jsem měl problémy to na začátku pochopit a nahrát to tam), ale lze to sem dát třeba jako přílohu k příspěvku.
Nevím, co myslíš slovy "styl bude umístěn ještě před hlavičkou", ale obecně by před HTML tagem "head" nemělo být prakticky nic (kromě tagů "html" a případně "DOCTYPE").
Množství kódu nejlépe ušetříš tím, že stránku (vzhled) navrhneš co nejjednodušší (obvykle to pak bývá i nejpřehlednější). Pokud máš k dispozici prostor na nějakém veřejném webovém serveru (např. na freehostingu), tak můžeš celý CSS kód dát tam a z HTML se na to CSS jen odkázat (jako tam už teď máš odkaz na "bootstrap.min.css").
U CSS je to obecně tak, že "vyhraje ta poslední definice" (pokud jich je víc pro stejný prvek), nebo "vyhraje to nejpřesnější určení prvku" (např. defince "td.blue" vyhraje nad definicí obecného "td" [u prvku "td" s upřesněním "class=blue"]).
Přidávám se k ostatním v tom, že nejlépe ti poradíme, pokud uvidíme celý ESP kód, nebo alespoň celý předpokládaný HTML/CSS kód. Vytržené kousky jsou nepřehledné a matoucí. Nemusíš to dávat na GIT (taky jsem měl problémy to na začátku pochopit a nahrát to tam), ale lze to sem dát třeba jako přílohu k příspěvku.
Re: Pomoc s HTML
Ahoj Aleši
Díky za objasnění některých nejasností ohledně tagů, třeba použití tagu td.blue jsem ještě neviděl a rozhodně ho vyzkouším. Lze tako zapsat i více atributů tagu? To je velmi zajímavé zjednodušení.
Jde o to že nejprve jsem chtěl stránku provozovat na arduinu s shieldem. Tam je malá pamět ram a tedy bylo nutné to udělat co nejmenší nebo to naládovat do flash paměti. TO ale kod zdržuje a celé se to stává pomalejší. Další nevýhodou bylo, že pokud to bylo v kodu a odesílalo se to prohlížeči jako celá stránka tak to vždy při refreši probliklo což se nakonec ukázalo jako silně nežádoucí a tak jsem sáhl po ESP8266. Zde existuje množství šablon a návodů jak to udělat viz můj článek o ESP, ale ne vždy jsou ty šablony tak průhledné jak bych chtěl. Proto jsem sáhl po řešení, kde je stránka formou stringu opět zapsána v kodu ale předána prohlížeči. Nemění se tedy celá jen proměnné a tím nedochází k onomu problikávání při refreši (nehledě na to že se zde vzhledem k ramce nemusím tolik uskromňovat s kodem a je to rychlejší). Hlavním omezením při tomto způsobu servírovaní je pro mne to, že nelze jednoduše změnit zabarvení tlačítek jako tomu bylo v případě kodu u arduina, kdy jsme prostě do HTML napsal if then a změnil barvu tlačítka když bylo zapnuté a když ne. Zde to zatím neumím protože parametr barvy je zapsán ve stylu a nevím jak to udělat abych ho tam měl jako proměnnou pro styl a ne ke zobrazení a hlavně aby prohlížeč pochopil že se jedná o proměnný parametr stylu. Kdyby tě nebo kohokoliv něco napadlo dejte mi prosím vědět.
Jinak s tím GITEM jsi udeřil kladivem na hřebíček, moje angličtina zase není tak dobrá, abych prošel všemi výzvami gitu bez chybičky. Už jsem založil účet, ale vložení kodu se mi nějak nedaří a nakonec tím trávím víc času, než bych si přál proto jsem to zatím vzdal. Ale vzhledem k vašim reakcím na dotazy už jsem udělal značné pokroky
Díky za objasnění některých nejasností ohledně tagů, třeba použití tagu td.blue jsem ještě neviděl a rozhodně ho vyzkouším. Lze tako zapsat i více atributů tagu? To je velmi zajímavé zjednodušení.
Jde o to že nejprve jsem chtěl stránku provozovat na arduinu s shieldem. Tam je malá pamět ram a tedy bylo nutné to udělat co nejmenší nebo to naládovat do flash paměti. TO ale kod zdržuje a celé se to stává pomalejší. Další nevýhodou bylo, že pokud to bylo v kodu a odesílalo se to prohlížeči jako celá stránka tak to vždy při refreši probliklo což se nakonec ukázalo jako silně nežádoucí a tak jsem sáhl po ESP8266. Zde existuje množství šablon a návodů jak to udělat viz můj článek o ESP, ale ne vždy jsou ty šablony tak průhledné jak bych chtěl. Proto jsem sáhl po řešení, kde je stránka formou stringu opět zapsána v kodu ale předána prohlížeči. Nemění se tedy celá jen proměnné a tím nedochází k onomu problikávání při refreši (nehledě na to že se zde vzhledem k ramce nemusím tolik uskromňovat s kodem a je to rychlejší). Hlavním omezením při tomto způsobu servírovaní je pro mne to, že nelze jednoduše změnit zabarvení tlačítek jako tomu bylo v případě kodu u arduina, kdy jsme prostě do HTML napsal if then a změnil barvu tlačítka když bylo zapnuté a když ne. Zde to zatím neumím protože parametr barvy je zapsán ve stylu a nevím jak to udělat abych ho tam měl jako proměnnou pro styl a ne ke zobrazení a hlavně aby prohlížeč pochopil že se jedná o proměnný parametr stylu. Kdyby tě nebo kohokoliv něco napadlo dejte mi prosím vědět.
Jinak s tím GITEM jsi udeřil kladivem na hřebíček, moje angličtina zase není tak dobrá, abych prošel všemi výzvami gitu bez chybičky. Už jsem založil účet, ale vložení kodu se mi nějak nedaří a nakonec tím trávím víc času, než bych si přál proto jsem to zatím vzdal. Ale vzhledem k vašim reakcím na dotazy už jsem udělal značné pokroky
Re: Pomoc s HTML
https://www.jakpsatweb.cz/css/css-tridy-class.html a vubec cely web.
Jinak nevim, jak mas implementovanou promennou
V HTML nemusis mit konce radku(staci mezery), nebo muzou byt ty konce radku v tom stringu jako
a ty
a kompilator to sam spoji do jedne dlouhe nudle.
Jinak nevim, jak mas implementovanou promennou
client
, ale spousta veci kolem tisku v Arduinu umi pouzivat PROGMEM
a/nebo funkci tusim _F()
, kterou se to z pameti programu vytahne. V HTML nemusis mit konce radku(staci mezery), nebo muzou byt ty konce radku v tom stringu jako
"radek\r\ndalsi radek"
, takze mozna misto dlouhe rady println
by mohlo stacit neco jako
Kód: Vybrat vše
client.print(_F(html1));
client.print(promenna1);
client.print(_F(html2));
if (tlacitko) client.print(_F(html3_tlacitko)); else client.print(_F(html3_bez));
...
html1
... by byly deklarovany v progmem jako cele kusy stranky - ponekud mene prehledne (i kdyz se i to da zapsat docela hezky, kdyz si uvedomis, ze retezcove konstanty muzes psat jako
Kód: Vybrat vše
"prvni cast"+
"druha cast"+
"treti cast"