Pomoc s HTML

Odpovědět
Uživatelský avatar
Dex
Administrátor
Příspěvky: 922
Registrován: 16 úno 2013, 14:26

Re: Pomoc s HTML

Příspěvek od Dex » 09 pro 2017, 13:38

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 | rxd.cz | codetory.cz

daton
Příspěvky: 479
Registrován: 16 bře 2013, 16:12

Re: Pomoc s HTML

Příspěvek od daton » 09 pro 2017, 14:06

Pánové moc děkuji za další naměty ke studiu a vysvětlení nejasností :D

daton
Příspěvky: 479
Registrován: 16 bře 2013, 16:12

Re: Pomoc s HTML

Příspěvek od daton » 13 pro 2017, 21:07

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?

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>

DavidO
Příspěvky: 606
Registrován: 01 kvě 2013, 21:27

Re: Pomoc s HTML

Příspěvek od DavidO » 13 pro 2017, 21:47

Pokud vím, tak tabulka defaultně okraje buněk nemá. Můžeš třeba do tagu <style> přidat něco jako

Kód: Vybrat vše

  td {border: 1px solid red;}
  tr {border: 5px dashed green;}
  table {border: 10px groove blue;}
a mimochodem máš tam ve stylu auto-style1 border, ale prázdný.

AlesH
Příspěvky: 322
Registrován: 25 úno 2013, 09:18

Re: Pomoc s HTML

Příspěvek od AlesH » 13 pro 2017, 22:32

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):

Kód: Vybrat vše

      <table border="1"
 style="border: 3px solid gray; background-color: rgb(255, 231, 150); width: 380px; height: 265px;">
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".

daton
Příspěvky: 479
Registrován: 16 bře 2013, 16:12

Re: Pomoc s HTML

Příspěvek od daton » 14 pro 2017, 09:33

Ahoj
Díky moc jinak
mimochodem máš tam ve stylu auto-style1 border, ale prázdný
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.
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?

Uživatelský avatar
Dex
Administrátor
Příspěvky: 922
Registrován: 16 úno 2013, 14:26

Re: Pomoc s HTML

Příspěvek od Dex » 14 pro 2017, 11:11

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í ;)
"all your robots are belong to us"
robodoupe.cz | rxd.cz | codetory.cz

AlesH
Příspěvky: 322
Registrován: 25 úno 2013, 09:18

Re: Pomoc s HTML

Příspěvek od AlesH » 15 pro 2017, 09:07

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.

daton
Příspěvky: 479
Registrován: 16 bře 2013, 16:12

Re: Pomoc s HTML

Příspěvek od daton » 18 pro 2017, 08:32

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 :-)

Uživatelský avatar
gilhad
Příspěvky: 165
Registrován: 29 kvě 2015, 00:36

Re: Pomoc s HTML

Příspěvek od gilhad » 18 pro 2017, 14:24

https://www.jakpsatweb.cz/css/css-tridy-class.html a vubec cely web.

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));
...
a ty 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"
a kompilator to sam spoji do jedne dlouhe nudle.

Odpovědět

Kdo je online

Uživatelé prohlížející si toto fórum: Žádní registrovaní uživatelé a 1 host