Pomoc s HTML

[daton]

No mozna se ti spatne radi ale delas to naprosto profesionalne a tve rady funguji coz je super
Ja ted totiz zatim jen zkousim ruzna reseni serveru resp generovani stranky a interaktivitu. Nejprve jsem chtel jit metodou html kodu zapsaneho primo pomovi client.println v programu, jenze tam to pri obnoveni stranky dost trva a problikne to. Tak ted zkousim server s handlery a strankou zapsanou v kodu pomoci page+. . take v programu, ale pristupuje se k tomu jinak. Tento typ serveru zatim moc neznam a tak v jeho programovani dost pokulhavam.

[gilhad]

Hele, ono to ma smysl dat na ten github (ci jine sdilene misto) i kdyz se v tom nevyznas ani sam, protoze pak si to clovek muze stahnout, nechat prelozit (a hned vidi jak chyby, tak warningy z prekladu, coz muze mnohe naznacit) nebo projit libovolnym zpusobem, ktery mu vyhovuje (treba si vyhledat VSECHNY vyskyty DG7 a hned mu je jasnejsi, zda to je jen kus textu ve strance, nebo taky stejnojmenna promenna v programu, nebo co vsechno jeste dalsiho) a navic si to muze zkusit upravit a spustit, kdyz to funguje, tak ti poslat navrh opravy primo tam, a i kdyby to melo byt nekolik zmen v nekolika ruznych souborech, tak to bude jedna prehledne, jednak to budes moct zaclenit do sveho kodu na par kliknuti a bez chyb zpusobenych opisovanim, nebo tim, ze dotycny neco zapomel napsat, neb mu to treba prislo ocividne.

Pokud nejde o supertajny projekt, je lepsi to sdilet cele a verzovane, nez zkouset trefit spravny kus pro forum a doufat, ze tam bude vse dulezite a zaroven tam nebude moc zbytecnosti a zaroven se tim nezmeni smysl. (nemluve o tom, ze verzovat libovolny netrivialni kus kodu je zakladni a zasadni postup, zvlast kdyz je to zdarma a snadne. ja mam takhle verzovane i skripty na 5 radku a obcas jsem tomu velmi rad. (a na druhou stranu samozrejme i projekty na desetitisice radku, ale tam to az tak neprekvapi - tam to jinak proste nejde.) )

[daton]

Ještě dotaz, pokud budu používat tyto butony

Kód: Vybrat vše

.    https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_button_elements&stacked=h 

tak jak jsem pochopil jsou definované Java skripty. Ty java skripty jsou kde???Má je snad každý prohlížeč? Dále jak jsou náročné je lepší to konstruovat s nimi i když jejich rozměry mi moc nevyhovují potřeboval bych tlačítko submit alespoň 3x větší nebo je lepší definovat si vlastní buton i s rozměrem bez java skriptů. Jde o to že server by měl být ovládán z tabletu a potřebuji aby to pro něj nebylo náročné, ale zároveň aby to bylo vizuálně hezké a refreš stránky nebyla pro tablet pohromou.
Jak to vlastně tedy s těmi skripty funguje?

[daton]

Ještě bych potřeboval vědět jak zapsat parametry tlačítka tak jak jsou uvedeny v tomto příkladu



https://www.w3schools.com/howto/tryit.a ... nd_buttons

ale jen do tlačítka aby bylo hooodně velké, zkusil jsem to takto ale to mi nefunguje máte někdo nápad?

Kód: Vybrat vše

 "<div class='col-xs-6'><form action='/' method='POST'><button type='button submit' name='DG8' value='2' style = 'background-color: #4CAF50    padding: 40px   text-align: center    display: inline-block    font-size: 16px   margin: 4px 4px  cursor: pointer'   >";
      page +=                            slovo3;

[AlesH]

Principiálně opravdu stačí vše potřebné zapsat do "style" tagu "button". Ovšem v tvém příkladu je zcela zásadní problém v tom, že jednotlivé parametry stylu je nutné oddělovat středníkem a ty tam nemáš nic (mezery nestačí).

Funkční by mělo být toto:

Kód: Vybrat vše

"<div class='col-xs-6'><form action='/' method='POST'><button type='button submit' name='DG8' value='2' style = 'background-color:#4CAF50; padding:40px; text-align:center; display:inline-block; font-size:16px; margin:4px 4px; cursor:pointer;'>test</button></form></div>";

Doporučuju si někde na PC vytvořit soubor třeba "test.html", otevřít ho v internetovém prohlížeči, a pak v tom souboru zkoušet upravovat HTML kód tak dlouho, až to v prohlížeči bude vypadat podle Tvých požadavků. Výsledný HTML kód pak stačí zapsat do programu pro jeho generování.

P.S.: Tvůj předchozí dotaz ohledně JavaScriptu jsem nepochopil. Žádný JavaScript tam na první pohled nevidím (v tom Tvém HTML kódu). Jak to bylo myšleno?

P.S.2: Pokud jsi měl na mysli přímo "Bootstrap buttony", tak to je skutečně JavaScriptová knihovna, o které musíš prohlížeči říct, kde ji má najít a načíst. V tom odkazovaném příkladu je to v HEAD části HTML kódu (Bootstrap knihovna vyžaduje ještě i knihovnu JQuery, obojí je v tom příkladu).

Kód: Vybrat vše

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

[daton]

Ahoj Aleši
Díky za odpovědi 1ps nebyla tak myšlena 2ps ano, jde tedy o to že prohlížeč ???? Má v sobě javaskripty které se provedou při zapsání kódu například toho buttonu

Kód: Vybrat vše

class =btn btn-success btn -lg.    

Oproti tomu v předchozím příspěvku je buttonu definován přímo rozměry, který z těch buttonu je náročnější pro zarizeni generujici stranku v mém případě tablet. A který se bude generovat déle. Díky.

[Dex]

Prohlížeč v sobě žádné JavaScripty nemá (odborníci teď přimhouří obě oči), ale umí je vykonávat. Pokud se mu nejdříve přímo ve stránce např. řekne, že někde najde "knihovnu" funkcí v JS, tak pak umí funkce z té knihovny vykonávat.

Je to podobné, jako když mám ve stránce obrázek, který ale není na mém serveru respektive tam kde je stránka, ale někde jinde. Prohlížeč tam "jde" a obrázek použije.

Je to jasnější?

[daton]

No je a není. S obrázkem to chápu tam je buď statická nebo relativní adresa a je to stejně tak jak Aleš ve svém příspěvku jasně adresoval skripty na jiných stránkách, ale tlačítka fungují i když jsem jen na routeru bez netu tedy nelze provést jejich dedikaci na jiném serveru. A co víc ty tlačítka někdy fungují i když se to adresování skriptů vůbec neprovede.Tedy ano, jak říkáš nějak to ten prohlížeč umí ale je to tedy pro to zařízení náročnější když se využije této předdefinované podoby tlačítka, než když se využije definované tlačítko například stylem nebo je to jedno?

[Dex]

Asi všechny weby, které dnes dělají něco víc než jen zobrazují jednoduchý obsah (tj. prakticky všechny ) používají JS a prohlížeče jsou na to dělané. Rozhodně bych se toho nebál a šel do toho. Je to správná cesta a když to uděláš správně, bude ti jedna stránka fungovat třeba i v telefonu nebo na tabletu.

To o čem psal Aleš je tu proto, aby si člověk mohl ušetřit trochu té nudné práce. Jsou to naprosto standardní věci.

Koukni se na ty věci samostatně, ať si uděláš trochu představu o tom, co to vlastně umí

Btw nevím, jaký je aktuální stav, ale zhruba před rokem jsem se díval jak do ESP ve spojení s Arduino IDE přibalit další soubory. Třeba by jsi mohl ten vzhled a vlastní stránku udělat samostatně a s kódem to jenom propojit. Vlastně to byl takový jednoduchý filesystém a rozhodně by to mohlo být přehlednější.

Díval jsi se po netu, jestli už někdo neudělal něco podobného, co by jsi mohl vzít a zrecyklovat? Ono když se v tom teprve rozkoukáváš, tak to může dost pomoct.

[AlesH]

Je to tak, jak píše Dex, a líp to asi popsat nedokážu. Uznávám ale, že celkově je to docela matoucí.

Myslím, že pro svoje potřeby žádný JavaScript nepotřebuješ. Vzhled a základní "chování" tlačítek lze bez problémů definovat pomocí HTML (tagů) a CSS (stylů těch HTML tagů). Styly můžeš zapsat vždy komplet ke každému tagu zvlášť (do parametru "style"), nebo si nejprve nadefinuješ nějaký "vzor" ("class", "id") a ten pak přiřadíš příslušným tagům pomocí parametrů "class" nebo "id". To umožňuje kód zpřehlednit a uspořit. Ty "vzorové styly" lze zapsat přímo do HTML kódu stránky (sekce "style") nebo mohou být v samostatných souborech odkazovaných z HTML kódu pomocí tagu "link".

Příklad definice CSS stylů přímo v HTML:

Kód: Vybrat vše

<style>
.btn {background-color: #4CAF50;} /* definice třídy s názvem "btn" */
.btn1 {border-radius: 2px;} /* definice třídy s názvem "btn1" */
</style>
<button class="btn btn1">2px</button> <!-- přiřazení tříd "btn" a "btn1" tagu "button" -->

Příklad načtení definice CSS stylů z externího souboru:

Kód: Vybrat vše

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Aby to fungovalo, musí být ten odkaz dostupný. Zmatení ale může nastat tím, že když soubor není dostupný, pokouší se prohlížeč použít jeho případnou kopii ze své "cache" (pokud už někdy předtím ten soubor načetl z internetu), nebo ty styly prostě nepoužije a prvky nechá v "default" stavu (který se nemusí příliš lišit od "nastylovaného") takže "něco" se vždycky zobrazí.

Bohužel HTML tagů a CSS stylů jsou desítky (možná stovky), takže vyznat se v tom vyžaduje čas a zkušenosti (hodně experimentů).

JavaScripty se používají jen při požadavku na nějaké speciální dynamické chování (např. na animovanou změnu polohy tlačítka, nebo třeba na nějaké neobvyklé reakce po kliknutí na tlačítko [změna pozadí apod.]). To nepotřebuješ.