Escriure i llegir valor en entrada html

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <title>Document</title>

</head>

<body>

    <!–<input type=”text” id=”id_name” name=”name” value =”<?echo $_POST[name]; ?>” > –>

    <input type=”text” id=”id_name” >

<script>

document.getElementById(“id_name”).value = “urqt”; //escriu valor

</script>

<script >

a= document.getElementById(“id_name”).value //llegeix valor

</script>

<script>

    alert(a); //valor llegit

</script>

</body>

</html>


Shift F6

JavaScript Hello world!

Hello, world!

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <script type=”text/javascript” src=”js/functions.js”></script>

    <title>Document</title>

</head>

<body>

    <p>Before the script…</p>

<script>

alert( ‘Hello, world!’ );

</script>

<script>

hello();

</script>

<p>After the script…</p>

</body>

</html>

Aqui es pot veure el resultat:

Hola mon


 

Using CSS

What is CSS

CSS can be added to HTML documents in 3 ways:

  • Inline – by using the style attribute inside HTML elements
  • Internal – by using a <style> element in the <head> section
  • External – by using a <link> element to link to an external CSS file

The most common way to add CSS, is to keep the styles in external CSS files. However, in this tutorial we will use inline and internal styles, because this is easier to demonstrate, and easier for you to try it yourself.

CSS extern

S’utilitza un full d’estil extern per definir l’estil de moltes pàgines HTML. Per utilitzar un full d’estil extern, afegiu-hi un enllaç a la secció <head> de cada pàgina HTML:


I styles.css


Carregant aquests examples a Sublime Text 3


Que vist al navegador Firefox (alt F6) queda:



 

ISO 639-1 Codis de llengües HTML

<!doctype html>
<html lang=”ca”>

ordenat per idioma
abjaso (o abjasiano) ab
afar aa
afrikaans af
aimara ay
akano ak
albanés sq
alemán de
amárico am
árabe ar
aragonés an
armenio hy
asamés as
avar av
avéstico ae
azerí az
bambara bm
baskir ba
bengalí bn
bhojpurí bh
bielorruso be
birmano my
bislama bi
bosnio bs
bretón br
búlgaro bg
cachemiro ks
camboyano (o jemer) km
canarés kn
catalán ca
chamorro ch
checheno ce
checo cs
chichewa ny
chino zh
chuan (o zhuang) za
chuvasio cv
cingalés si
coreano ko
córnico kw
corso co
cree cr
croata hr
danés da
dzongkha dz
eslavo eclesiástico antiguo cu
eslovaco sk
esloveno sl
español (o castellano) es
esperanto eo
estonio et
ewe ee
feroés fo
fijiano (o fidji) fj
finés (o finlandés) fi
francés fr
frisón (o frisio) fy
fula ff
gaélico escocés gd
galés cy
gallego gl
georgiano ka
griego (moderno) el
groenlandés (o kalaallisut) kl
guaraní gn
guyaratí (o guyaratí) gu
haitiano ht
hausa ha
hebreo he
herero hz
hindi (o hindú) hi
hiri motu ho
húngaro hu
ido io
igbo ig
indonesio id
inglés en
interlingua ia
inuktitut iu
inupiaq ik
irlandés (o gaélico) ga
islandés is
italiano it
japonés ja
javanés jv
kanuri kr
kazajo (o kazajio) kk
kikuyu ki
kirguís ky
kirundi rn
komi kv
kongo kg
kuanyama kj
kurdo ku
lao lo
latín la
letón lv
limburgués li
lingala ln
lituano lt
luba-katanga lu
luganda lg
luxemburgués lb
macedonio mk
malayalam ml
malayo ms
maldivo dv
malgache (o malagasy) mg
maltés mt
manés (gaélico manés o de Isla de Man) gv
maorí mi
maratí mr
marshalés mh
moldavo mo
mongol mn
nauruano na
navajo nv
ndebele del norte nd
ndebele del sur nr
ndonga ng
neerlandés (u holandés) nl
nepalí ne
noruego no
noruego bokmål nb
nynorsk nn
occidental ie
occitano oc
ojibwa oj
oriya or
oromo om
osético os
pali pi
panyabí (o penyabi) pa
pastú (o pashto) ps
persa fa
polaco pl
portugués pt
quechua qu
retorrománico rm
ruandés rw
rumano ro
ruso ru
sami septentrional se
samoano sm
sango sg
sánscrito sa
sardo sc
serbio sr
sesotho st
setsuana tn
shona sn
sindhi sd
somalí so
suajili sw
suazi (swati o siSwati) ss
sueco sv
sundanés su
tagalo tl
tahitiano ty
tailandés th
tamil ta
tártaro tt
tayiko tg
telugú te
tibetano bo
tigriña ti
tongano to
tsonga ts
turco tr
turcomano tk
twi tw
ucraniano uk
uigur ug
urdu ur
uzbeko uz
valón wa
vascuence (o euskera) eu
venda ve
vietnamita vi
volapük vo
wolof wo
xhosa xh
yi de Sichuán ii
yídish (o yiddish) yi
yoruba yo
zulú zu
acrònims, codis d’idioma, codi d’idioma, codis d’idioma, codis de país, codi de país, codi de moneda ISO, codi ISO, codis de moneda

JQuery

jQuery és una biblioteca o framework de Javascript, creada inicialment per John Resig, que permet simplificar la manera d’interaccionar amb els documents HTML, manipular l’arbre DOM, gestionar esdeveniments, desenvolupar animacions i afegir interacció amb la tecnologia AJAX en pàgines web.[1] Es va presentar el gener del 2006 a BarCamp NYC.D’acord amb una anàlisi de la Web (realitzat l’any 2017) JQuery és la biblioteca de JavaScript més utilitzada, per un ampli marge. [2][3]

jQuery ofereix una sèrie de funcionalitats basades en Javascript que d’una altra manera requerien molt més codi, és a dir, amb les funcions d’aquesta biblioteca s’aconsegueixen bons resultats en menys temps i espai.

La sintaxi de JQuery està dissenyada per facilitar la navegació per un document, seleccionar elements DOM, crear animacions, manejar esdeveniments i desenvolupar aplicacions AJAX. JQuery també proporciona capacitats perquè els desenvolupadors creuen complements a la part superior de la biblioteca de JavaScript. Això permet als desenvolupadors crear abstraccions per interacció i animació de baix nivell, efectes avançats i ginys temàtics d’alt nivell. L’enfocament modular de la biblioteca jQuery permet la creació de poderoses pàgines web dinàmiques i aplicacions web.

El conjunt de característiques principals de jQuery (seleccions d’elements DOM, recorregut i manipulació) habilitats pel seu motor de selecció (denominat “Sizzla” de v1.3), van crear un nou “estil de programació”, algoritmes de fusió i estructures de dades DOM. Aquest estil va influir en l’arquitectura d’altres marcs de JavaScript com Yahoo! UI Library i Dojo, el que més tard va estimular la creació de les API de selectors estàndard.[4]

Les empreses Microsoft i Nokia van anunciar que incloïen la biblioteca a les seves plataformes. Microsoft l’afegeix al seu IDE Visual Studio i l’utilitzarà juntament amb el framework ASP.NET AJAX i ASP.NET MVC, mentre que Nokia els integrarà a la seva plataforma Web Run-Time.

[5] Microsoft l’afegirà en el seu IDE Visual Studio [6] i la farà servir juntament amb els frameworks ASP.NET AJAX i ASP.NET MVC, mentre que Nokia els integrarà amb la seva plataforma web Run-Time.[7]

HTML (imatge) Tag

Etiquetes html

<img src="https://www.beseit.net/wp-content/uploads/2022/04/040122_1701_Accessconsu1.png" alt="" />
Aquest mètode s'ulitza molt en word

PHP. 2 Pas de paràmetres al servidor

En aquest exemple veurem com passar paràmetres entre dos programes PHP: prog1.php –paràmetre –> prog2.php (admin.php) ubicats al mateix servidor.

[php]

&lt;form class="form" method="post" name="f1" &gt;
&lt;input name="admin" type="button" id="idex_admin" style="display: yes" value="admin"
onclick=’document.f1.action="admin.php";document.f1.submit();’/&gt;
&lt;input name="admin" /&gt;

[/php]

 

Aquí tenim un exemple de menús tipus TINYdropdown  veurem que no es possible passar paràmetres quant un d’aquests fa referencia a un programa diferent. El mètode que detallo aquí l’he utilitzat molt fent el software del “POLIDICCCIONARI”. Si escrivim qualsevol cosa a la casella admin, veurem que si la volem passar al modul “admin” nomes ho posem fer amb “HTML” amb $_POST[admin].

El que si que permet TINYdropdown es simular que prem el boto “admin” amb una bunció javascript:

[php]

a onclick=’admin()’ href=’javascript:void(0); ‘&gt; admin

[/php]

I la funció javascript es:

[php]

function admin(){
//alert ("boto go_admin");
document.getElementById("idex_go_admin").click();

}

[/php]

Finalment el codi de “top_menu.php” es
[php]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TinyDropdown 2 – animated javascript dropdown</title>
<link rel="stylesheet" href="tinydropdown.css" type="text/css" />
<script type="text/javascript" src="default.js"></script>

<div class="nav">

<p class="title">

<img src="cat.png" style="float:right; margin: 0 20px;" alt="FAS logo" />Gramàtica Catalana
<form class="form" method="post" name="f1" >
<input name="admin" type="button" id="idex_admin" style="display: yes" value="admin"
onclick=’document.f1.action="admin.php";document.f1.submit();’/>
<input name="admin" />
</p>

<ul id="menu" class="menu">
<li><a href="#" title="Fonètica i ortografia" target="_top">Inici</a>
<ul>
<li><a href="#" target="_top">Inici</a></li>
<li><a href="#" target="_top">contactar</a></li>
</ul>

<li><a href="#" title="Fonètica i ortografia" target="_top">Fonètica i ortografia</a>
<ul>
<li><a href="#" title="Vocalisme: fonètica" target="_top">Vocalisme: fonètica</a></li>
<li><a href="#"title="Vocalisme: A/E " target="_top">Vocalisme: A/E </a></li>
<li><a href="#"title="Vocalisme: O/U " target="_top">Vocalisme: O/U </a></li>
<li><a href="#"title="Separació de síl·labes " target="_top">Separació de síl·labes </a></li>
<li><a href="#"title="Accents i dièresi" target="_top">Accents i dièresi </a></li>
<li><a href="#"title="Archived photo portfolio" target="_top">- regles d’accentuació</a></li>
</ul>

<li><a href="#" title="Current work for sale" target="_top">Morfologia i sintaxi</a>
<ul>
<li><a href="#" title="Recent work for sale" target="_top">Lèxic</a></li>
<li><a href="#"title="Archived photo portfolio" target="_top">Gènere: casos especials</a></li>
<li><a href="#"title="Archived photo portfolio" target="_top">Nombre: casos especials</a></li>
<li><a href="#"title="Archived photo portfolio" target="_top">adjectiu</a></li>
<li><a href="#"title="Archived photo portfolio" target="_top">Q o C</a></li>
<li><a href="#"title="Archived photo portfolio" target="_top">Article apòstrof i contracció</a></li>
</ul>

<li><a href="#" title="Current work for sale" target="_top">lèxic i expressió</a>
<ul>
<li><a href="#" title="Recent work for sale" target="_top">Lèxic</a></li>
<li><a href="#"title="puntuació: ús de la coma" target="_top">puntuació: ús de la coma</a></li>
<li><a href="#"title="La descripció" target="_top">La descripció</a></li>
<li><a href="#"title="guió per parlar d’una novel·la" target="_top">guió per parlar d’una novel·la</a></li>
<li><a href="#"title="text argumentatiu" target="_top">text argumentatiu</a></li>
<li><a href="#"title="Article d’opinió" target="_top">Article d’opinió</a></li>
</ul>
</li>

<li class="nodiv"><a onclick=’admin()’ href=’javascript:void(0); ‘> Admin </a>
</li>
</ul>

<script type="text/javascript">
var dropdown=new TINY.dropdown.init("dropdown", {id:’menu’, active:’menuhover’});
</script>

</head>
<body>

</body>
</html>
[/php]

i el CSS

[php]
* {margin:0; padding:0; outline:0}

/* menu bar background and text */
.nav {
height:100%;
min-height:500px;
width:100%;
padding: 5px 10px 5px 10px;
background:url(images/verd_claret.gif);
/*background-color:#BDB9C3;*/
color:#4D4959;
text-shadow:0px 0px #888;
z-index:100;
}

.nowrap {
white-space: nowrap ; /* mateixa linia*/
}
/* link */
.menu a {float:left; color:#4D4959; text-decoration:none; width:130px; height:40px; padding-top:8px; font-weight:bold;}
.menu span {float:left; color:#4D4959; text-decoration:none; width:130px; height:40px; padding-top:8px}

/* link hover, background pale-blue, text dk-grey */.menu a:hover {color:#FFFFFF; background:#9EBFE2}

.menu {list-style:none; font:16px Arial,Verdana; text-align:center; margin:0 0; padding: 0 0;}
.menu li {position:relative; float:left; width:130px; z-index:100;}

/* drop menu, background darker-green, text smaller */
.menu ul {display:none; position:absolute; font:normal 14px Arial,Verdana; top:36px; left:0; url(images/verd_claret.gif); display:none; list-style:none}
.menu ul li {float:none; width:130px; border-top:0px solid #ccc;}
.menu ul li a, li.menuhover li a, li.menuhover li.menuhover li a {float:none; display:block; background:#d5eeee; height:35px; padding-top:5px; margin: 5px 0px;}

/* drop menu link hover, background pale-blue, text white 21007F */
.menu ul li a:hover, li.menuhover li a:hover, li.menuhover li.menuhover li a:hover {background:#9EBFE2; color:#FFFFFF; }

.menu ul li span, li.menuhover li span, li.menuhover li.menuhover li span {float:none; display:block; background:none; height:22px; padding-top:5px}
.menu ul ul {left:130px; top:0}
.menu li.submenu {font-weight:bold}
.menu li.noborder {border-top:none}

/* drop menu link hover, background pale-blue, text dk-grey */
li.menuhover a, li.menuhover li.menuhover a {color:#4D4959; background:#9EBFE2}
li.menuhover span, li.menuhover li.menuhover span {color:#4D4959; background:#9EBFE2}

/* following added by me for the header – nothing to do with the menu above */

p.title {
color: #4D4959;
background-color: inherit;
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
font-size: 26px;
font-weight: bold;
padding: 8px;
text-align: center;
}

[/php]