home / html (navigation links) Un punt es 1/72 de polzada. 1 pica son 12 punts.
Espais , fonts | CSS vars | Borders | Tables | Index Tbl | Drupal | noindex | hover
anchor tags | set Top | Validators | Imatges | SVG | nice effects | on mobile | chars extranys, Unicode | HEAD section | ad blocker detected
Open Graph | grafiques modernes 		Dubtes | Links | End | mapa

  Diversos TAGs de HTML i mostres de codificació

v page bottom
go 2 top
DHTML, HTML goodies.

Comencem amb un petit index que ajuda a navegar per la pàgina, a la vegada que fa servir una classe, que té, entre altres TAGS, un font de tamany "1". Podeu veure que aquest pàrraf té una particularitat a la banda esquerra, també molt maca de codificar.

Tags Olds Pend Case CSS
Llistes Borders Tables CGI Favicon
JS machine written     Links
HTML minim

Here’s the very minimum that an HTML document should now contain, assuming it has CSS and JavaScript linked to it:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Mon title</title> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <!-- page content --> </body> </html>

sitepoint

HTML tags

What is a tag in an HTML?

An HTML tag is a piece of markup language used to indicate the beginning and end of an HTML element in an HTML document.
As part of an HTML element, HTML tags help web browsers convert HTML documents into web pages.

HTML tags ordered alphabetically

html i body

Si volem que el cos (body) tingui un fons a sota, l'hem de colorejar i posar-li marge :

html { background-color: #8020F0 ; margin-left: 10px ; margin-right: 10px ; } body { font-family: Helvetica, Verdana, Arial, Garamond, "Comic Sans MS", Tahoma, "Lucida Console", Courier, sans-serif ; font-size: 28px ; color: #0F1110 ; background-color: #66CC99 ; text-align: justify ; border: 1px dotted white ; }
DOCTYPE details

The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag.

The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.

In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD, because HTML 4.01 was based on SGML.
The DTD specifies the rules for the markup language, so that the browsers render the content correctly.

HTML5 is not based on SGML, and therefore does not require a reference to a DTD.

Tip: Always add the <!DOCTYPE> declaration to your HTML documents, so that the browser knows what type of document to expect.

Tip: the <!DOCTYPE> declaration is NOT case sensitive.

Tip: to check if the HTML of your Web documents is valid, go to W3C's validation service.

w3schools

XML + DTD + XHTML at Minie_Hardware_Summary.html

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="lshw-" /> <style type="text/css">
codi HTML a Google

<!doctype html> <html itemscope="" itemtype="http://schema.org/WebPage" lang="es"> <head> <meta charset="UTF-8">
itemscope

itemscope is a boolean global attribute that defines the scope of associated metadata

developer mozilla

charset

Whats the difference ?

<meta charset="UTF-8"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
a href

La part mes important de una pagina HTML son els enllaços a altres pagines - macro "a-max"

<a href='https://www.wikipedia.org/' target='blank_'> go wiki <img src='./imatges/informatica/external_link_icon.svg' /> </a>
mostra de espais ...

&nbsp; o  

mostra de fonts ...

Quin es el font mes maco ?

Helvetica is an Apple-font; Arial is the Windows variant

body { font-family: 'Helvetica', 'Arial', 'Verdana', sans-serif ;

Salutacions en "Helvetica".
the quick brown fox jumps over the lazy dog
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
0123456789

Salutacions en "Arial".
the quick brown fox jumps over the lazy dog
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
0123456789

Salutacions en "Verdana".
the quick brown fox jumps over the lazy dog
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
0123456789

Per a que els accents del fitxer HTML surtin be en un browser ...

  1. Hem de codificar

    <!doctype html> <html> <meta charset="utf-8"> <title> Mi titulo </title> </html>

    Abans era ...

    <!doctype html public "-//w3c//dtd html 4.0 transitional//en" "http://www.w3.org/tr/html40/loose.dtd"> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Mi titulo </title> </html>

  2. li hem de dir al editor (SublimeText) que guardi el fitxer en UTF-8 : "File" -> "Save with Encoding" -> "UTF-8"

M'agradaria saber la diferència exacte amb

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

El nou estil però es un altre ..

Div vs Span | CSS | XML Enllaços

Tambe tenim botons :

Estil Nice pages                        
Is evil just something you are, or something you do ?
Tags I use most

  Parraf centrat.  

  Parraf alineat a la dreta.  

  Parraf alineat a l'esquerra.  

Si aquest texte arriba al final de la línia, serà justificat, es a dir, omplirà la línia d'un cantó a l'altre, element força elegant en un pàrraf; jo diria que li dona una aspecte professional al texte, i més quan més llarg és.
Així, hem demostrat els 4 codis que poden acompanyar al <p> : centre, dreta, esquerra i justificat. Ara, només ens falta la partició !

Most HTML 4.0 elements permitted within the BODY are classified as either block-level elements or inline elements.
Block-level elements typically contain inline elements and other block-level elements. When rendered visually, block-level elements usually begin on a new line. E.g.- CENTER, H1, P, UL, etc
Inline elements typically may only contain text and other inline elements. When rendered visually, inline elements do not usually begin on a new line. E.g.- FONT, BR, I, U, etc
Tags i moltes coses mes : HTML, XML, CSS, JavaScript, etc etc - OnLine Tutorial(s), References, Examples [*****]

Proves dels marcadors SUP i SUB :

Aquest texte anirà a sota amb el tag SUB.

El tab SUP fa que texte pugi a dalt, que és més normal.

Overstrike :

душ решение лекарство поезд ванну кофе солнце таблетки участие завтрак

Que passa si un parraf de texte conté una imatge ? El mes elegant és que el texte el voregi, és a dir, s'hi posi al costat mentre hi hagi imatge, i després, en acabar la imatge, que ompli tot l'espai horitzontal disponible. Veure el parraf de'n MMiP que te en Arcadi aqui.


DIV vs SPAN tags

A <div> is a block level element.
That means it's self-contained and comes with a built-in line break.

A <span> is an inline element.
Inline elements don't include a line break and must be contained within a block level element.
span is by default an inline element and will not be sized nor accept vertical padding without resetting its display to inline-block
span won't have padding because it is an inline element by default, so set inline-block or block :

.beforeImage { padding: 40px; display: inline-block; /* or block */ background: red }

Mira quina diferència fà :

Com compara <div class="name"> amb <span class="name"> ?

Aquí diu :

CLASS vs ID

A un CLASS "nom" li correspon un ".nom"
A un ID "nom" li correspon un "#nom"

Diferencies i similituts entre :

The period indicates that a class is being named, instead of a tag.

An ID selector is simply the ID preceded by a hash (#).
Similar to class selectors, ID selectors are used to select one particular tag, rather than a group of tags.

An element can have one ID (which must be unique!) and multiple classes at the same time

Difference Between Class and ID

A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page

Guaita com es codifica :

<div id="myID" class="class1 class2 class3">Content</div> <body class="not-front not-logged-in page-node node-type-page one-sidebar sidebar-left fluid"> here
Difference between Class and ID

A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page

The id attribute specifies a unique id for an HTML element.
The id attribute is used to point to a specific style declaration in a style sheet.
It is also used by JavaScript to access and manipulate the element with the specific id.

The class attribute specifies one or more classnames for an element.
The class attribute is mostly used to point to a class in a style sheet.
However, it can also be used by a JavaScript (via the HTML DOM) to make changes to HTML elements with a specified class.
The class attribute is part of the Global Attributes, and can be used on any HTML element.

MARGIN vs PADDING tags

The biggest difference between padding and margin is that margins auto-collapse, and padding doesn't. The padding is considered to be part of the element, and is always preserved. Margins are considered to be outside of the element, so margins of adjacent items will overlap.

The other big difference is that padding is included in the click region and background color/image, but not the margin.

El margin es el espacio fuera de un elemento, es decir, la distancia entre ese elemento y otros elementos que lo rodean.

Padding (relleno) es el espacio dentro de un elemento, es decir, la distancia entre el contenido del elemento y su borde.

padding-left

padding-left has no effect on internal table elements except table cells

how to specify padding

Different ways :

/* apply to all four sides */ padding: 1em; /* top and bottom | left and right */ padding: 5% 10%; /* top | left and right | bottom */ padding: 1em 2em 2em; /* top | right | bottom | left */ padding: 5px 1em 0 2em;
Old / new / pending Tags

Truc

Nota: este truco, que consiste en trazar un marco de color para saber exactamente a qué elementos se aplica una regla, puede ser muy útil cuando una hoja de estilo se hace complicada. No dudes en usarla si te pierdes...

<td style="border : solid 1px red ;">
Case sensitive info

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
Minimal header

<!doctype html> <html lang="en">
Compte !

Per definir els color dels "links" dins una taula, es fa servir

.tperl TD A:link, TD A:visited, TD A:active { color: blue ; text-decoration: underline ; }

Values for text-decoration that you can try out:

  <STYLE>

used to define the style information for a document, such as the layout, color, and font of the content.
This tag is a key part of CSS (Cascading Style Sheets)

MDN on style

@import

Dins el tag "style" es poden posar coses com

<style type="text/css" media="all"> <!-- @import url("https://w3.ibm.com/ui/v8/css/screen.css"); @import url("https://w3.ibm.com/ui/v8/css/interior.css"); @import url("https://w3.ibm.com/ui/v8/css/interior-1-col.css"); @import url("https://w3.ibm.com/ui/v8/css/icons.css"); @import url("https://w3.ibm.com/ui/v8/css/tables.css"); @import url(https://fonts.googleapis.com/css?family=Montserrat+Alternates:500,600,700&subset=cyrillic); --> </style>

details

JavaScript

JavaScript tutorials and advanced tutorials (as promises, arrow functions, closures)

CSS

View and change CSS

Find overriding CSS declarations

vars in CSS

Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document.
They are set using custom property notation (e.g., --main-color: black;) and are accessed using the var() function (e.g., color: var(--main-color);).

A common best practice is to define custom properties on the :root pseudo-class, so that it can be applied globally across your HTML document.
However, this doesn't always have to be the case: you maybe have a good reason for limiting the scope of your custom properties.

developer mozilla

$ cat rspi.css <style> :root { --color_fosc: #303030 ; --color_clar: #707070 ; } div.dark-element { background-color: var(--color_fosc) ; color: var(--color_clar) ; } div.light-element { background-color: var(--color_clar) ; color: var(--color_fosc) ; } </style>

Per canviar un element de clase fem servir JavaScript

:root pseudo-class

The :root CSS pseudo-class matches the root element of a tree representing the document. In HTML, :root represents the <html> element and is identical to the selector html, except that its specificity is higher.

Exemple complert :

<style> :root { --alt_foto: 600px ; /* mind the "px" */ --fbc: red ; } img { border: 5px solid green ; padding: 10px ; background-color: var(--fbc) ; height: var(--alt_foto) ; vertical-align: middle ; } </style>
Force CSS reload

Codifiquem dins "head" (i canviem "rnd=132"" quan volguem recarregar el CSS) :

<head> <meta charset="utf-8"> <link rel="stylesheet" href="./css/rspi.css?rnd=132" type="text/css">

wp reset

Force CSS reload

Treiem "<link" del "<head" i hi posem aquest JavaScript :

<script> var link = document.createElement('link'); link.rel = 'stylesheet'; link.type = 'text/css'; // Generem un número aleatori per evitar la memòria cau link.href = 'estils.css?v=' + Math.random(); document.getElementsByTagName('head')[0].appendChild(link); </script>
CSS links

Llocs amb estil

El color d'aquest quadre és finet, oi ? I aquest :

Maxtor USB disk drive; any downsides for formatting NTFS?
Sidonie [soci]
Always stopping the drive before disconnecting it is important, regardless.

future hardware

  Nice-looking pages, pàgines maques

  Llistes

personificades ...
... es interessant !

Other values for the list-style-type property are:

sitepoint PDF

Posa el cursor a sobre dels elements de la llista, i veuràs el que he preparat ....

  Borders

url

none No border.
dotted The border is a series of dots.
dashed The border is a series of short line segments.
solid The border is a single line segment.
double The border is two solid lines. The sum of the two lines and the space between them equals the value of 'border-width'.
groove The border looks as though it were carved into the canvas.
ridge The opposite of 'grove': the border looks as though it were coming out of the canvas.

Es poden assignar de una en una :

border-left: 1px solid white ; border-top: 1px solid white ; border-bottom: 1px solid black ; border-right: 1px solid black ;
Títol blanc sobre fons blau

Calmo techo surcado de palomas,
palpita entre los pinos y las tumbas;
mediodía puntual arma sus fuegos
¡El mar, el mar siempre recomenzado!
¡Qué regalo después de un pensamiento
ver moroso la calma de los dioses!

¡Qué obra pura consume de relámpagos
vario diamante de invisible espuma,
y cuánta paz parece concebirse!
Cuando sobre el abismo un sol reposa,
trabajos puros de una eterna causa,
el Tiempo riela y es Sueño la ciencia.

la maquina del tiempo

 

Títol blanc sobre fons roig

Mesalina dio rienda suelta a su ninfomania llegando a prostituirse bajo el apodo de Lisica. Tan orgullosa de su legendaria lascividad, lanzo un reto al gremio de las prostitutas de Roma a las cuales instaba a participar en una competencia, que ella organizaria en palacio, tras la ausencia de Claudio quien estaba en Britania.

Dicha competencia constaba en saber quien podia atender a mas hombres en un dia; las prostitutas aceptaron el reto y enviaron una representante, la prostituta mas famosa de Roma, una siciliana llamada Escila. El evento dio inicio en la noche a la cual asistirian muchos hombres importantes de la corte, ademas de otras damas a las cuales Mesalina habia convencido de participar.

Escila se rindió despues de haber sido poseida por 25 hombres. Mesalina salió victoriosa, pues superó la cifra al llegar el amanecer y seguir en la competencia; segun se dice aun despues de haber atendido a 70 hombres no se sentia satisfecha, llegando hasta la cifra increible de 200 hombres. Cuando Mesalina pidió a Escila que regresara esta se retiró diciendo "Esta infeliz tiene las entrañas de hierro".

 

Capital City

From SimCity

Tables

Complete sample

This code :

.tblsample TH { border: 4px solid green ; } .tblsample { background-color: #E0E0E0 ; border: 4px solid blue ; } --> </STYLE> </HEAD> <BODY> <TABLE BORDER CELLPADDING=4 class="tblsample"> <TR> <TH>name</TH> <TH>extension</TH> <TH>department</TH> </TR> <TR> <TD>Pere PocaPor</TD> <TD>x 8522</TD> <TD>Marisc</TD> </TR> <TR style="background-color:#DFDF79"> <TD>Lynn Almond</TD> <TD>x 9882</TD> <TD>Cooking</TD> </TR> <TR> <TD>Roby Robinson</TD> <TD>x 9432</TD> <TD>Landscaping</TD> </TR> </TABLE>

Looks like this :

name extension department
Pere PocaPor x 8522 Marisc
Lynn Almond x 9882 Cooking
Roby Robinson x 9432 Landscaping
100 % wide table

<table style="width: 100%;">

Using CSS :

<table class='tclass'> .tclass { width: 200px ; }
tr border assignment

Si en una taula volem fer

.t_baix tr { border-bottom: 1px solid yellow ; }

... llavors ens cal :

.t_baix { border-collapse: collapse ; }

stack overflow

There are two distinct models for setting borders on table cells in CSS. One is most suitable for so-called separated borders around individual cells. The other is suitable for borders that are continuous from one end of the table to the other.

See css2 specs

rows aligned at top

Code :

<tr valign="top">
Alternate row color

To have one row in each color, code like this :

.tbl-alternate { border: 1px solid red ; } .td-working { background-color: green ; } .tr-even { background-color: #D0D0D0 ; } .tr-oodd { background-color: #F0F0F0 ; } --> </STYLE> </HEAD> <BODY> <table class="tbl-alternate"> <thead> <tr> <th>nombre</th> <th>nodo</th> <th>área</th> <th>estado</th> </tr> </thead> <tbody> <tr class="tr-oodd"> <td> A </td> <td> 6 </td> <td> in </td> <td class="td-working"> Operativo </td> </tr> <tr class="tr-even"> <td> B </td> <td> 8 </td> <td> in </td> <td class="td-working"> Operativo </td> </tr> <tr class="tr-oodd"> <td> C </td> <td> 4 </td> <td> in </td> <td class="td-working"> Operativo </td> </tr> <tr class="tr-even"> <td> D </td> <td> 8 </td> <td> in </td> <td class="td-working"> Operativo </td> </tr> </tbody> </table>

And here's the result:

nombre nodo área estado
A 6 in Operativo
B 8 in Operativo
C 4 in Operativo
D 8 in Operativo
Bar graph code

<table width=95% border=0 cellspacing=0 cellpadding=0> <tr><td colspan=3><hr noshade></td></tr> <tr><td> </td><th colspan=2>Web Page Hits 1996</th></tr> <tr><td colspan=3><hr noshade></td></tr> <tr><td nowrap>WWW Recipies</td><td> </td> <td align=left nowrap> <img border=2 src="reddot.gif" height=25 width=73> +73%</td> </tr> <tr> <td>Jane's Page</td><td> </td> <td align=left> <img border=2 src="reddot.gif" height=30 width=25> +25%</td> </tr> <tr> <td>Joe's Page</td> <td align=right> -10% <img border=2 src="reddot.gif" height=30 width=10></td> <td> </td></tr> <tr><td>PC Page</td> <td align=right>-92%<img border=2 src="reddot.gif" height=30 width=92> </td><td></td></tr> <tr><td colspan=3><hr noshade></td></tr> </table>
Things you CAN'T do to Tables using CSS

Taula xula

<table border=0 width=100% cellspacing=0 cellpadding=0>
<tr>
<td width=100%>
<center>

Compartint estil pero amb diferencies

<!DOCTYPE html> <html lang="ca"> <head> <meta charset="UTF-8"> <title>Taula Personalitzada</title> <style> /* Estils compartits (bordes i padding) */ .taula-personalitzada th, .taula-personalitzada td { border: 1px solid #CCC; padding: 5px 10px 5px 10px; } /* Colors específics */ .taula-personalitzada th { background-color: #E0E0E0; } .taula-personalitzada td { background-color: #D0D0D0; } </style> </head> <body> <h2>Exemple de Taula amb CSS</h2> <table class="taula-personalitzada"> <thead> <tr> <th>Columna 1</th> <th>Columna 2</th> <th>Columna 3</th> <th>Columna 4</th> </tr> </thead> <tbody> <tr> <td>Lorem ipsum sit.</td> <td>Dolor amet elit.</td> <td>Consectetur ad.</td> <td>Sed do eiusmod.</td> </tr> <tr> <td>Tempor incididun.</td> <td>Ut labore et.</td> <td>Dolore magna.</td> <td>Aliqua ut enim.</td> </tr> <tr> <td>Minim veniam quis.</td> <td>Nostrud exercit.</td> <td>Ullamco laboris.</td> <td>Nisi ut aliquip.</td> </tr> </tbody> </table> </body> </html>
El millor d' aquesta pàgina és ...
Tots els paràmetres d'aquesta tabla es defineixen mitjançant the <STYLE> tag.
CELLSPACING is ... the space (in pixels) around each item in a data cell.
CELLSPACING controls the space between table cells.

CELLPADDING ... sets the amount of space between the contents of the cell and the cell wall.
CELLPADDING ... controls the width (in pixels) of the interior lines in the table.

NO es pot posar cellspacing="0" en CSS ? Sí ! border-spacing: 0px ;

I cellpadding="0" ? Do "border-collapse: collapse" !

Here you are a lot of simbols
Ajustar el texte de una celda, horizontalment : <td align="left">
Verticalment : <TR VALIGN="baseline"> or <TH VALIGN="bottom">
css : "vertical-align: baseline | middle | bottom | top | sub" ; here, as ".tfotos TD {" The vertical-align property is particularly useful for aligning images.

Have you noticed that within this table, the links are green and underlined (and become blue and overlined when cursor comes over), while outside this table the links are red (and become under/over lined and yellow when cursor comes over) ?

FireFox may be in danger of "rotting from the inside out" according to industry experts including one of the developers on the FireFox review team. Lack of attention by developers and money from supporters may end the meteoric rise of the browser where it is today.

You should not use the HTML tag <blockquote> to indent text, unless the text is actually a quote. <blockquote> is designed to mark up a quote, and devices such a screen readers for the visually impaired will read this text in a way that helps users understand that what they're hearing is a piece of quoted text. If you use <blockquote> to indent regular paragraphs, it will be very confusing for users to whom the content is read as a quote.

Taula que té 3 colors : el inicial, un altre quan hi posem el cursor a sobre, i un tercer quan treiem el cursor.

Description    
News            
Get WinPcap  
Get WinDump 
Development  
Support         
Links             
FAQ              
The Team      
License          

Un menu maco

October 22, 2002

favicon.ico

Just to show off my complete lack of artistic skill, both The Fishbowl and my livejournal have a k-rad favicon.ico. It took me about 45 seconds to throw together in the Gimp, but hey it almost looks somewhat like it might be a goldfish, right?

I have become vanity site, destroyer of worlds.

Addendum: you know you're in for a really bad day at work, when “BCDIC or EBCDIC?” becomes an important question.

Posted to personal at October 22, 2002 10:52 AM
CGI

Common Gateway Interface is a small, uncompiled software program that provides a way for a web-server to communicate with a browser in ways not possible with HTML alone.

URLS amb icones   Fondo de color fet amb Taula 

 <BASE HREF="https://usuaris.tinet.cat/sag/">
 <link rel="icon" href="./icons/favicon.ico" type="image/x-icon">
 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

 URL http://www.annoyances.org/favicon.ico codes 2 lines :
<link rel="icon" href="/pictures/toad.png" type="image/png">
<link rel="shortcut icon" href="/pictures/toad.ico">

 URL http://www.bastardidentro.com/index.php" codes 3 lines :
<link rel="icon" href="bd.ico" type="image/ico">
<link rel="shortcut icon" href="bd.ico">
<link rel="bookmark icon" href="bd.ico">

Per que es diuen FAVICON ? "Favorites icon" !
Homepage

Com s'agafa aquest ?
24 x 20 FavIcon's
Few more (149)

Cost of War : embedded (dynamic) JavaScript

From http://costofwar.com/ or here

Cost of the War in Iraq
(JavaScript Error)

  Site map generator(s)

Machine generated HTML

Lets try to write a "generic" python code to write an HTML file and send it to a know place with a known filename.

Of course, we run it from "crontab" :

sebas@pi0alby:~/python/pinet $ crontab -l # m h dom mon dow command 25 * * * * /home/sebas/python/pinet/enviar_ip_a_pinet.py >> /home/sebas/logs/enviar_ip_a_pinet.log

And the python code to do the job is :

#!/usr/bin/env python3 # this program : # 1) reads external IP using http://ipv4.icanhazip.com/ # 2) creates a HTML page named IP_PI0.HTM # 3) sends it to pinet using FTP # URLs # https://gist.github.com/jefftriplett/9748036 # http://api.hostip.info/get_json.php # http://ifconfig.me/ip # https://docs.python.org/3/library/ftplib.html # https://stackabuse.com/introduction-to-python-ftp/ # https://pubs.opengroup.org/onlinepubs/009695399/basedefs/xbd_chap08.html - HOSTNAME is NOT an envir var ! # https://pythontic.com/modules/socket/gethostname # Resultat : # http://usuaris.pinet.cat/jpmiguez/IP_PI0.HTM # Versions : # v 1.1 - 20200612 - posem timestamp, hostname, ... # v 1.2 - 20200613 - millorar format de sortida # some imported modules import datetime import os import sys import requests from urllib.request import urlopen import urllib import ftplib import socket # some constants my_Versio = 'v 1.2 - 20200613' my_pinet_host = 'usuaris.fut.es' # pinet host usuaris.tinet.cat my_pinet_user = os.environ.get('SAG_TUSR') # using get will return `None` if a key is not present rather than raise a `KeyError` my_pinet_user = os.environ.get('SAG_TPWD') my_pinet_file = 'IP_PI0.HTM' # pinet file *** location dependent *** # some messages msg_head = """<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="utf-8"> <title>Mon IP Pi0 <STYLE TYPE="text/CSS"> <!-- .prematrix { font-family: Lucida Console, Courier New, monospace ; white-space: pre ; background-color: #000000 ; color: #00FF00 ; } body { background-color: gray ; } --> </STYLE> </head> <body>\n""" msg_trail = """\n/body> </html>""" msg_fmt_start = '<hr>\n<div class="prematrix">\n' msg_fmt_end = "</div>\n<hr>\n" msg_time = "<p> La pagina s'ha generat amb data {%s}.</p>\n" msg_host = '<p> Host : {%s}.</p>\n' msg_ip = '<p> La meva IP publica avui es {%s}.</p>\n' msg_versio = '<p> Generador versio {%s}.</p>\n' msg_result_url = 'http://usuaris.pinet.cat/jpmiguez/IP_PI0.HTM' # some functions def Fer_pagina_html( meva_ip, my_Fitxer ): szHost = socket.gethostname() f = open( my_Fitxer, "w") f.write( msg_head ) f.write( msg_fmt_start ) txt_time = msg_time % szAra f.write( txt_time ) txt_host = msg_host % szHost f.write( txt_host ) txt_ip = msg_ip % meva_ip f.write( txt_ip ) txt_versio = msg_versio % my_Versio f.write( txt_versio ) f.write( msg_fmt_end ) f.write( msg_trail ) f.close() return my_Fitxer def Enviar_a_Pinet( nom_fitxer_html, nom_fitxer_remot ): my_RC = 0 ftp = ftplib.FTP( my_pinet_host ) # set a connection try: ftp.login( my_pinet_user, my_pinet_pwd ) # provide credentials ftp.cwd( 'html' ) # go to html directory with open( nom_fitxer_html, 'rb' ) as fp: # use BINARY to transfer UNICODE res = ftp.storlines( 'STOR ' + nom_fitxer_remot, fp ) # upload an ASCII file - for binary use "STORBINARY" if not res.startswith('226 Transfer complete'): my_RC = 1 # upload failed except ftplib.all_errors as e: my_RC = e # ftp error ftp.quit() # terminate the FTP connection return my_RC def My_Main(): try: # (1) obtenir IP externa my_URL = 'http://ipv4.icanhazip.com' my_IP = urlopen( my_URL ).read().decode(encoding='UTF-8').strip() # convert bytes to string and remove trailing \n print( '+++ my IP [', my_IP, ']' ) # (2) fer pagina HTML my_html_file = Fer_pagina_html( my_IP, my_pinet_file ) # (3) enviar a Pinet via FTP my_rc = 0 my_rc = Enviar_a_Pinet( my_html_file ) if ( my_rc == 0 ) : print( '+++ RC ', my_rc, '+++ enviat', my_html_file ) else : print( '--- RC ', my_rc, '--- no hem enviat', my_html_file ) except ConnectionResetError: print("--- ConnectionResetError") # fi del codi if __name__ == '__main__': now = datetime.datetime.now() szAra = now.strftime("%Y-%m-%d %H:%M:%S") print( '\n', szAra, ' - generar i enviar {', my_pinet_file, '} a Pinet, versio {', my_Versio, '}' ) My_Main() print( 'Resultat ', msg_result_url ) sys.exit() # bye

And the results are :

Display an image on link text (hoover)

CSS : .hover_img a { position:relative; } .hover_img a span { position:absolute; display:none; z-index:99; } .hover_img a:hover span { display:block; } HTML : <div class="hover_img"> <a href="#"> Show Image <span> <img src="images/01.png" alt="image" height="100" /> </span> </a> </div>

stackOverflow

Tags and XHTML

common tags

What is XHTML ?

An XHTML document must have an XHTML declaration.

The <html>, <head>, <title>, and <body> elements must also be present, and the xmlns attribute in <html> must specify the xml namespace for the document.

Misc

  Atenció

NOTA IMPORTANTE: Se ha descubierto un problema con el proxy-caché que provoca no poder conectar con todos los usuarios disponibles y, por lo tanto, disminuye considerablemente la velocidad de descarga.

Para ver si este problema te afecta infórmate en este link.

Has observat que aquest texte té dash a dalt i a baix ?

  Això només es una prova  

  Botons interessants ...

Valid HTML 4.01 !

Valid CSS !

Valid HTML 4.01 | Valid CSS

  Texte sobre foto

On the left hand we have the code, on the rigth, the result

<TABLE BORDER="1" bordercolor=red cellpadding="0" CELLSPACING="0"> <TR> <TD WIDTH="221" HEIGHT="300" BACKGROUND="newjoe01.jpg" VALIGN="bottom"> <FONT SIZE="+1" COLOR="yellow"> Joe Burns at Work </FONT> </TD> </TR> </TABLE>
Joe Burns at Work
Tinet

A Tinet, si volem fer un "browse" directe de un directori, primer s'intenta obrir el fitxer "welcome.html".
Ho pots conprobar aquí !

Ells fan servir ( diu NetCraft ) un Solaris 8 ...

Anchor tags

The main use of "anchor" tags - <a></a> - is as hyperlinks. That basically means that they take you somewhere. Hyperlinks require the href property, because it specifies a location.

A hash # within a hyperlink specifies an HTML element id to which the window should be scrolled.
So, coding href="#some-id" would scroll to an element on the current page such as <div id="some-id">

href="#" doesn't specify an id name, but does have a corresponding location - the top of the page.
Clicking an anchor with href="#" will move the scroll position to the top.

"Why not just leave the href property off?" The status bar (bottom of the screen) will not be displayed when hovering on an anchor without the href property. And no "link" style (blue and underscored) will be applied to the text.

Therefore, the best solution for hyperlink placeholders is actually href="#!"
The idea here is that there hopefully isn't an element on the page with id="!" (who does that?) and the hyperlink therefore refers to nothing - so nothing happens.

We can use it to call a JavaScript function instead of going to an URL or "id" :

<p class="link_tema"> <a href="#" onClick="toggleDarkLight()"> Click Me </a> </p>

posa el cursor al final del H2 i surt "#"

stack overflow

my code here : go to links

novetat : # texte molt molt llarg #

posa el cursor al final del H2 i surt "#" i el texte amagat

URL encoding : Chrome versus Opera

I am learning Russian language, so I go thru lots of Russian language pages. Sometimes I want to keep an URL in my notepad.
There is a curious phenomenon at this moment :
If I go to a certain page using Chrome, the "copied" URL is
(1) >>> https://ru.wikipedia.org/wiki/%D0%9A%D0%BE%D1%89%D0%B5%D0%B9
But is I go to the very same place with Opera, and "copy" the URL, I get
(2) >>> https://ru.wikipedia.org/wiki/Кощей
Obviously, in my Notepad the 2nd URL looks lots more "readable".
How can I get Chrome to display URLs using Russian characters and not in URL encoding ?

You could use the open-source extension Copy Unicode URLs, described as:
Copy Unicode URLs to clipboard without nasty percent-encodings or Punycode!
Annoyed by all the converting of unicode chars in urls while copy-pasting?
Copy URLs with this extension to preserve unicode untouched. No more percent-encoding, no more punycode.
Use Alt+U shortcut or click the icon to copy URL from address bar. Right-click extension icon to access options.

percent encodig wiki

SuperUser

Obrir URL de un link en una altra finestra

Best : add target="_blank" attribute to your links (anchor tags).

Read the site wizard :
It makes your site vulnerable to phishing attacks

Technical details : the newly open site gains limited access to your page via the JavaScript window.opener object. This is a read/write object that they can manipulate. It has a property called window.opener.location that can be changed, causing the browser to go to a new URL instead of staying at your page.

To be more elegant, you have to display this arrow beside the link : Site under construction

... which is coded like this :

<a href="https://usuaris.tinet.cat/sag/welcome.html" target="blank_"> Site under construction <img src="./imatges/informatica/external_link.png" class="external_link_ico"> </a>

... having these lines in <class> :

.external_link_ico { margin-left:2px; height: calc(1em - 6px); }
How to modify your anchor tags

For example, if you have a link that says the following:

<a href="https://www.thesitewizard.com/">thesitewizard.com</a>

... change the above so that it now says:

<a href="https://www.thesitewizard.com/" target="_blank">thesitewizard.com</a>

To prevent phishing, improve your code :

<a href="https://www.thesitewizard.com/" rel="noopener noreferrer" target="_blank">thesitewizard.com</a>

Theoretically, either rel="noopener" or rel="noreferrer" is sufficient to prevent this problem, with rel="noopener" being the correct attribute to use. The other one, rel="noreferrer", has a side-effect in that the browser will also withhold the referring URL.

Others

Demo "onClick()" :

Uno

<A HREF="newpage.htm" TARGET="main"> Link to new window. </A>

Dos

<SCRIPT LANGUAGE="javascript"> <!-- window.open ('page.html') --> </SCRIPT>

Tres

<SCRIPT LANGUAGE="javascript"> <!-- window.open ('titlepage.html', 'newwindow', config='height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no') --> </SCRIPT>

html goodies

Prova de amples - taula maca de fons
 
  Esta celda tiene 400 pixels de ancho.  
  Esta celda tiene 500 pixels de ancho.  
  Esta celda tiene 600 pixels de ancho.  
  Esta celda tiene 700 pixels de ancho.  
  Esta celda tiene 800 pixels de ancho.  
  Esta celda tiene 300 puntos de ancho.  
  Esta celda tiene 400 puntos de ancho.  
  Esta celda tiene 500 puntos de ancho.  
  Esta celda tiene 600 puntos de ancho.  
  Esta celda tiene 700 puntos de ancho.  
  Esta celda tiene 800 puntos de ancho.  
  Esta celda tiene 10 cm de ancho.  
  Esta celda tiene 12 cm de ancho.  
  Esta celda tiene 14 cm de ancho.  
  Esta celda tiene 16 cm de ancho.  
  Esta celda tiene 18 cm de ancho.  
  Esta celda tiene 20 cm de ancho.  
Feina pendent

  RSS

RSS is a format for syndicating news and the content of news-like sites, including major news sites like Wired, news-oriented community sites like Slashdot, and personal weblogs.

RSS gif RSS icon

Explicació :

Exemples :

  XML

 

XML gif

Exemples :

ID versus CLASS

If we have this code:

<ul id="nav"> <li><a id="clkLogon" href="#">Logon </a></li> <li><a class="clkReserva" href="#">Fer reserva </a></li> </ul>

Then we code the action in this way :

<script> $( function() { $( "#clkLogon" ).click( function() { $.get( '/logon.htm', function( page ) { console.log( '**** Demanem al server la sub-pagina LOGON.' ) ; $( "#content" ).html( page ) ; // show received HTML at specific <div> }) ; // get(logon) }) ; // logon $( ".clkReserva" ).click( function() { $.get( '/reserva.htm', function( page ) { console.log( '**** Demanem al server la sub-pagina RESERVA.' ) ; $( "#content" ).html( page ) ; // show received HTML at specific <div> }) ; // get (reserva) }) ; // reserva } ) ; // DOM ready </script>
Label width

In sebas.css file, code

#myFormFerReserva label { padding-left: 30px ; width: 125px ; text-transform: uppercase ; display: block ; float: left }

And then, use

<form id="myFormFerReserva"> <label for="NomSoci"> Nom: </label> <input type="text" autofocus value="nil" name="Nom_Soci" /> <br/> <label for="PistaReserva"> Pista: </label> <input type="text" value="0" name="Pista_Reserva" /> <br/> <label for="DiaReserva"> Dia: </label> <input type="text" value="2000/01/01" name="Dia_Reserva" /> <br/> <label for="HoraReserva"> Hora: </label> <input type="text" value="00" name="Hora_Reserva" /> <br/> <input type="submit" value=" Do reserva "> </form>
Amunt! Top Amunt!
Forms

Nice page, from HTML 4.01 specification

Very interesting :

Form submission method
The method attribute of the FORM element specifies the HTTP method used to send the form to the processing agent. This attribute may take two values:

The "get" method should be used when the form is idempotent (i.e., causes no side-effects). Many database searches have no visible side-effects and make ideal applications for the "get" method. If the service associated with the processing of a form causes side effects (for example, if the form modifies a database or subscription to a service), the "post" method should be used.

Test a Form

What is wrong with Text field ?

0x000000.com

Ajax

Ajax = Asynchronous JavaScript and XML !

Ajax intro

uSoft release Ajax Framework, with ASP.NET Ajax extensions, ASP.NET Ajax Control Toolkit, ASP.NET Ajax Futures January CTP, Samples Applications.

AJAX Debugging with Firebug

Amunt! Top Amunt!
innerHTML

http://www.w3schools.com/jsref/prop_html_innerhtml.asp

http://www.w3schools.com/dhtml/dhtml_dom.asp

http://www.w3schools.com/htmldom/default.asp

Regards, Oriol Beal Vilaginés

Amunt! Top Amunt!
CMS = Content Management System

Wiki definition, list.

Joomla {Jordi Morillo}. Sell & buy templates
Drupal {Oriol}, senat NY.

Requisits Drupal

To install and run Drupal, you need the following components (described in detail in sections below):

Requisits Joomla

Technical Requirements for Joomla 1.7.x and 1.6.x

Let's play Drupal

[/]

Apache 2.2 : http://httpd.apache.org/download.cgi#apache22 MySQL 5.5 : http://dev.mysql.com/downloads/mysql/ PHP 5.3 : http://php.net/downloads.php

Huge documentation, as install or Local server setup ; use Quickstart VM, either "i386 - 32-bit" (1,1 GB) or "amd64 - 64-bit" (1,2 GB), and install Virtualbox (version 4.0.4+).

Start developing! Passwords:

Videos: Drupal getting started ; site admin using drush (learn by the drop) ; add/edit content (training module 1) ; edit menu & blocks (training module 2) ;

quickstart@qs10:~$ ifconfig eth0 Link encap:Ethernet HWaddr 08:00:27:a6:5f:5c inet addr:10.0.2.15 Bcast:10.0.2.255 Mask:255.255.255.0 inet6 addr: fe80::a00:27ff:fea6:5f5c/64 Scope:Link UP BROADCAST RUNNING MULTICAST MTU:1500 Metric:1 RX packets:190900 errors:0 dropped:0 overruns:0 frame:0 TX packets:104201 errors:0 dropped:0 overruns:0 carrier:0 collisions:0 txqueuelen:1000 RX bytes:267092364 (267.0 MB) TX bytes:5764633 (5.7 MB) quickstart@qs10:~$ ping www.google.es PING www.l.google.com (74.125.39.147) 56(84) bytes of data. 64 bytes from fx-in-f147.1e100.net (74.125.39.147): icmp_req=2 ttl=49 time=56.9 ms

How to create a new Drupal site with Quickstart :

Use drush:

quickstart:˜/websites/> drush Global options (see "drush topic core-global-options" for the full list): -r , --root=<path> Drupal root directory to use (default: current directory) -l http://example.com, URI of the drupal site to use (only needed in multisite environments) --uri=http://example.com -v, --verbose Display extra information about the command. -d, --debug Display even more information, including internal messages. -y, --yes Assume 'yes' as answer to all prompts -n, --no Assume 'no' as answer to all prompts -s, --simulate Simulate all relevant actions (don't actually change the system) -p, --pipe Emit a compact representation of the command for scripting. -h, --help This help system. --version Show drush version. --php The absolute path to your PHP intepreter, if not 'php' in the path. Core drush commands: (core) cache-clear (cc) Clear a specific cache, or all drupal caches. core-cli (cli) Enter a new shell optimized for drush use. core-cron (cron) Run all cron hooks in all active modules for specified site. core-rsync (rsync) Rsync the Drupal tree to/from another server using ssh. core-status (status, st) Provides a birds-eye view of the current Drupal installation, if any. core-topic (topic) Read detailed documentation on a given topic. drupal-directory (dd) Return path to a given module/theme directory. help Print this help message. See "drush help help" for more options. image-flush Flush all derived images for a given style. php-eval (eval, ev) Evaluate arbitrary php code after bootstrapping Drupal (if available). php-script (scr) Run php script(s). search-index Index the remaining search items without wiping the index. search-reindex Force the search index to be rebuilt. search-status Show how many items remain to be indexed out of the total. self-update (selfupdate) Update drush to the latest version, if available. site-alias (sa) Print site alias records for all known site aliases and local sites. site-install (si) Install Drupal along with modules/themes/configuration using the specified install profile. site-upgrade (sup) Run a major version upgrade for Drupal (e.g. Drupal 6 to Drupal 7). A copy of the site is made, and then upgraded; the source site is not changed. test-clean Clean temporary tables and files. test-run Run tests. Note that you must use the --uri option. updatedb (updb) Apply any database updates required (as with running update.php). variable-delete (vdel) Delete a variable. variable-get (vget) Get a list of some or all site variables and values. variable-set (vset) Set a variable. version Show drush version. watchdog-delete Delete watchdog messages. watchdog-list (wd-list) Show available message types and severity levels. A prompt will ask for a choice to show watchdog messages. watchdog-show (ws) Show watchdog messages. Field commands: (field) field-clone Clone a field and all its instances. field-create Create fields and instances. Returns urls for field editing. field-delete Delete a field and its instances. field-info View information about fields, field_types, and widgets. field-update Return URL for field editing web page. Project manager commands: (pm) pm-disable (dis) Disable one or more extensions (modules or themes). pm-download (dl) Download projects from drupal.org or other sources. pm-enable (en) Enable one or more extensions (modules or themes). pm-info (pmi) Show detailed info for one or more extensions (modules or themes). pm-list (pml) Show a list of available extensions (modules and themes). pm-refresh (rf) Refresh update status information. pm-releasenotes (rln) Print release notes for given projects. pm-releases (rl) Print release information for given projects. pm-uninstall Uninstall one or more modules. pm-update (up) Update Drupal core and contrib projects and apply any pending database updates (Same as pm-updatecode + updatedb). pm-updatecode (upc) Update Drupal core and contrib projects to latest recommended releases. SQL commands: (sql) sql-cli (sqlc) Open a SQL command-line interface using Drupal's credentials. sql-connect A string for connecting to the DB. sql-drop Drop all tables in a given database. sql-dump Exports the Drupal DB as SQL using mysqldump or equivalent. sql-query (sqlq) Execute a query against the site database. sql-sync Copy and import source database to target database. Transfers via rsync. User commands: (user) user-add-role (urol) Add a role to the specified user accounts. user-block (ublk) Block the specified user(s). user-cancel (ucan) Cancel a user account with the specified name. user-create (ucrt) Create a user account with the specified name. user-information (uinf) Print information about the specified user(s). user-login (uli) Display a one time login link for the given user account (defaults to uid 1). user-password (upwd) (Re)Set the password for the user account with the specified name. user-remove-role (urrol) Remove a role from the specified user accounts. user-unblock (uublk) Unblock the specified user(s). Other commands: (drush_make,drush_make_d_o,quickstart) convert-makefile Convert the specified makefile to a drupal.org friendly format, and verify the converted file. make Turns a makefile into a working drupal install. make-generate Attempts to generate a makefile from the current Drupal install, specifying project version (generate-makefile) numbers unless not known or otherwise specified. Unversioned projects will be interpreted later by drush make as "most recent stable release" make-test Run a drush make test. quickstart-create (qc) Create a quickstart development website (code, database, apache, dns, install). quickstart-destroy (qd) Destroy a quickstart development website (code, database, apache, dns, install). quickstart-fixperms (qf) Fix permissions for a quickstart development website: $ sudo chown -R quickstart:www-data <codepath> $ sudo chmod -R a=,u=rwX,g=rX <codepath> $ sudo find <codepath>/sites -type d -name files -exec chmod -R a=,ug=rwX '{}' \; $ sudo find <codepath>/sites -type d -name files_private -exec chmod -R a=,ug=rwX '{}' \; verify-makefile Verify the specified makefile is in a drupal.org-friendly format.

Lets create a website:

quickstart@qs10:~/websites$ drush quickstart-create --domain=sebas.dev [ok] Creating dns config (add sebas.dev to /etc/hosts) ... [ok] ... done. [ok] Creating database: sebas_dev [ok] ... done. [ok] Downloading code to /home/quickstart/websites/sebas.dev (takes a minute, check network activity) ... [ok] Project information for drupal retrieved. [ok] drupal downloaded from http://ftp.drupal.org/files/projects/drupal-7.9.tar.gz. [ok] ... done. [ok] Creating apache config (/etc/apache2/sites-enabled/sebas.dev) [ok] ... done. [ok] Running installer (takes a minute, check cpu activity) ... [ok] No tables to drop. [ok] Starting Drupal installation. This takes a few seconds ... [ok] You are about to DROP your 'sebas_dev' database and then CREATE a new one. Do you want to continue? (y/n): y file_private_path was set to sites/default/files_private. [success] [ok] URL: http://sebas.dev Admin user: admin Admin password: admin ... done. [ok] Command completed successfully. [success] quickstart@qs10:~/websites$

Open a browser pointing to http://sebas.dev and here it is ! The web admin page of the drupal site is http://<domain name>/user/ - "View" and "Edit" buttons come up when you are logged in !

Use this command to display "create" details:

quickstart:˜/websites/> drush help quickstart-create . . .

To destroy the site we do:

quickstart:˜/websites/> drush quickstart-destroy --domain=test.dev . . .

Verify drush is installed properly:

quickstart@qs10:~/websites/sebas.dev$ drush status Drupal version : 7.9 Site URI : http://default Database driver : mysql Database hostname : localhost Database username : sebas_dev Database name : sebas_dev Database : Connected Drupal bootstrap : Successful Drupal user : Anonymous Default theme : bartik Administration theme : seven PHP configuration : /etc/php5/cli/php.ini Drush version : 4.4 Drush configuration : Drush alias files : Drupal root : /home/quickstart/websites/sebas.dev Site path : sites/default File directory path : sites/default/files Private file directory path : sites/default/files_private quickstart@qs10:~/websites/sebas.dev$

To install it on your website (not on drupal site), use http://drupal.org/project/drush or http://www.leveltendesign.com/blog.

Check for available updates for drupal core or other site modules:

quickstart:˜/websites/> drush up . . .

Download views:

quickstart:˜/websites/> drush dl views . . .

Enable views:

quickstart:˜/websites/> drush en views views_ui ctools . . .
Amunt! Top Amunt!
5 sec rule

Vinod Khosla : he puts a slide on a screen, removes it after five seconds, and then asks the viewer to describe the slide. A dense slide fails the test and fails to provide the basic function of any visual: to aid the presentation. By applying his simple rule, Mr. Khosla is addressing two of the most important elements in presentation graphics: Less is More, a plea all too often sounded by helpless audiences to hapless presenters; and more important, the human perception factor.
Whenever an image appears on any screen, the eyes of every member of every audience reflexively move to the screen to process the new image. The denser the image, the more processing the audiences need. At that very moment, they stop listening to the presenter. Nevertheless, most presenters continue speaking, further compounding the processing task. As a result, the audience shuts down. Game over.

P oeta nacido en Roda de Ter. En el año 1943 entra a trabajar en una fábrica de tejidos. A los 19 años sufre una tuberculosis pulmonar que le obliga a permanecer en cama durante un año. Esta circunstancia fue determinante en su vocación de poeta, ya que ocupaba su tiempo leyendo. En 1953 gana su primer premio por Paraulas al vent (1954). En el año 1956 se casa y de éste matrimonio tendrá dos hijos. Durante un tiempo se dedica a traducir obras del francés de autores tan conocidos como Saint Exupery, Simone de Beauvoir o Levi-Strauss. En 1970 los médicos le diagnostican una esclerosis múltiple, enfermedad que le provocará no poder valerse por sí mismo, pero que no le impide seguir escribiendo, 27 poemes en tres temps (1971) y La fábrica (1972). Más tarde empeora su enfermedad y deja de hacer traducciones. En 1974 publica La pell de violí y la edición bilingue de Antología 1966-1973 (1974). Al año siguiente, Cinc esgrafiats a la mateixa paret (1975), y empieza a dar forma a su obra poética con L'arrel i l'escorça (1975), seguirá El llarg viatge. Obra poètica II (1976), Quadern de vacances (1976), Amb vidres a la sang. Obra poètica III (1977) y Crònica de demà (1977). Contes de la vila de R i altres narracions (1978), El Petit Mall (1978) y Estimada Marta (1979). En 1980 se publica L'hoste insòlit (1980), con prólogo de Maria Aurèlia Capmany, y el cuarto volumen de su obra poética Les clares paraules (1980). Actualmente cantan poemas suyos Lluis Llach, Marina Rossell, Maria del Mar Bonet, entre otros. Martí i Pol murió el día 11 de noviembre del 2003, víctima de la esclerosis múltiple que sufría desde hace 30 años.

jQuery

Static HTML ...

MouseOver sample ... {Luís}

API

Amunt! Top Amunt!
Imatges homogenies
Pere

Hi han els basats en inline-block, i els basats en flexbox. Busca "responsive image gallery" en google i mira't els exemples.

Ho pots fer de dues maneres, o amb css, o creant un thumbnail fent un resize i un crop inteligent. Això es pot fer automàticament amb image magick per exemple. A la galeria, cada foto tindrà un link que desplegui el tamany complert.

Lluís

Respuesta corta: el estándar para PC es de una anchura de página de 1024 pixels. Si por ejemplo quieres poner 3 columnas, entonces podrías hacer imágenes de 300 pixels de ancho + margen, etc.

Respuesta larga: lo ideal es hacer tu página responsive, y crear un CSS para pantallas anchas de mas de 1000 píxels, otro CSS para pantallas medianas como tablets y otro para móviles. En cada caso en el CSS decides el ancho de las imágenes y otros parámetros como márgenes, etc.

La anchura de la imagen mejor ponerla en el CSS, por ejemplo:

HTML: <img class="pintura" src="..."> CSS: .pintura { width: 300px; height: auto; }
How to disable right click on my web page

You can do that with JavaScript by adding an event listener for the "contextmenu" event and calling the preventDefault() method:

document.addEventListener('contextmenu', event => event.preventDefault());

stackoverflow

If you just want to disable right click for saving images on the web page, go with this CSS solution:

your-img-tag { pointer-events: none; }

Browser Plugins like "enable right click" in the Chrome store exist for a reason.

what is a "frame killer" ?

<html><head><LINK REL="SHORTCUT ICON" HREF="favicon.ico"></head> <script> if(top!=self){top.location.href=self.location.href;} // frame killer </script> <title>voet cranf ∞ caotic planetary system simulator</title>

solar

SVG

SVG defines vector-based graphics in XML format.

Exemple : boto "pujar a dalt" posat a baix a la dreta i que nomes apareix despres de la 2-a pagina : YIFY -

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script> <svg class="cloudflare-icon" viewBox="0 0 256 256" version="1.1" style="fill: rgba(135, 135, 135, 0.9);"> <path d="M83.5244052,130.453237 L129.059785,84.9178576 L174.595164,130.453237 L144.213452,130.453237 L83.5244052,130.453237 Z M64.431707,68.715835 L193.678134,68.715835 L64.431707,68.715835 Z"> </path> </svg>

Mine : wikipedia - this "external" symbol :

nicolau@mars:~/sebas/_local_tinet_files/imatges/informatica$ cat external_link_icon.svg <?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"> <path fill="#fff" stroke="#36c" d="M1.5 4.518h5.982V10.5H1.5z"/> <path fill="#36c" d="M5.765 1H11v5.39L9.427 7.937l-1.31-1.31L5.393 9.35l-2.69-2.688 2.81-2.808L4.2 2.544z"/> <path fill="#fff" d="m9.995 2.004.022 4.885L8.2 5.07 5.32 7.95 4.09 6.723l2.882-2.88-1.85-1.852z"/>
XMLNS tag

An XML namespace is a mechanism used in XML documents to provide unique names for elements and attributes.

The xmlns attribute in an <svg> tag defines the XML namespace for the document.
It's a fundamental part of the SVG (Scalable Vector Graphics) specification, ensuring that the browser correctly interprets the SVG elements and attributes according to the SVG standard.
The standard value is http://www.w3.org/2000/svg.

A namespace is identified by a Uniform Resource Identifier (URI).
While this URI often looks like a URL (e.g., http://www.w3.org/2000/svg), it's important to understand that it's just a unique identifier and not necessarily a web address that points to a document.

SVG URLs

Nice HTML effects - efectes txulos

  • el canvas son triangles que incorporen una linia al cursor ***

  • les imatges es posen en ... slideshow
    • Empty elements

    Read carefully : HTML empty element

    A br element using the self-closing tag syntax :

    <p>The quick brown fox<br/> jumps over the lazy dog.</p>

    Read "br" or "br />"

    PC or Mobile

    I want all may pages to look nice on PC (they already do) but also on mobile (they usually dont).

    Maybe like this ?

    <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" /> <link rel="stylesheet" media="only screen and (min-width: 401px)" href="desktop.css" />
    HTML validation errors and solutions

    indexing & listing

    There is a difference between being indexed and being listed in Google

    Indexed / Indexing
    The process of downloading a site or a page’s content to the server of the search engine, thereby adding it to its “index.”

    Ranking / Listing / Showing
    Showing a site in the search result pages (aka SERPs).

    Prevent listing of your page by adding a meta robots tag

    Add to all pages this line :

    <meta name="robots" content="noindex,nofollow">

    If you use Apache, you can disable robots for all site by placing this line in .htaccess file :

    Header set X-Robots-Tag "noindex, nofollow"

    This would have the effect that that entire site can be indexed. But would never be shown in the search results.

    Preventing your site from being indexed

    Read developers.google.com on noindex :

    (1) For the noindex directive to be effective, the page or resource must not be blocked by a robots.txt file, and it has to be otherwise accessible to the crawler.
    If the page is blocked by a robots.txt file or the crawler can't access the page, the crawler will never see the noindex directive, and the page can still appear in search results, for example if other pages link to it.

    (2) We have to crawl your page in order to see meta tags and HTTP headers. If a page is still appearing in results, it's probably because we haven't crawled the page since you added the tag. You can request that Google recrawl a page using the URL Inspection tool

    nice data display

    Pere : busca "line graph with hover data"

    Add to favorites

    Taken from page lukoil/Business :

    <div class="sidebar-black favorites"> <span class="h2-header">Favorites</span> <ul class="icons-links"> <li> <a href="javascript:void(0);" class="favorites-add widget-icon-hover" data-current-page-id="3574"> <i class="icon icon-s-bookmark-add"></i><span>Add to favorites</span> </a> </li> <li class="favorites-count"> <a href="https://www.lukoil.com/Favorites" class="widget-icon-hover"> <i class="icon icon-s-bookmark"></i><span data-count-template='My favorites <i class="count">({0})</i>'></span> </a> </li> </ul> </div>
    User data entry
    Form

    If we code

    <form action="example/submit.html"> Name: <input type="text" value="Joe" name="name"><br> <button type="submit">Log in</button>

    on "click()" after we enter "121212" in the data field, we get

    URL (/example/submit.html?name=121212)
    input

    We define the field :

    <input name="searchTxt" type="text" value="Bob" maxlength="512" id="searchTxt_ID" class="searchField"/>

    And read its contents by

    var elemento = document.getElementById("searchTxt_ID"); Date_input = elemento.value console.log( '*** date (' + Date_input + ') requested ***' ) ;
    How to dispay Date and Time in your web page
    HTML timestamp

    Code like this :

    <p>Date/Time: <span id="mydatetime"></span></p>

    Then fill that value :

    <script> var dt = new Date(); document.getElementById("mydatetime").innerHTML = dt.toLocaleString(); </script>

    arclab

    JS timestamp

    Just before the </body> tag, include this sentence :

    <script src="../js/dom_timestamp.js"></script>

    And its contents is :

    // nova funcio yymmdd de Date() - at client Date.prototype.yyyymmdd = function () { var yyyy = this.getFullYear().toString() ; var mm = (this.getMonth()+1).toString() ; // getMonth() is zero-based var dd = this.getDate().toString() ; return yyyy + '/' + (mm[1]?mm:"0"+mm[0]) + '/' + (dd[1]?dd:"0"+dd[0]) ; } ; // yyyymmd Date.prototype.hhmmss = function () { function fixTime(i) { return (i < 10) ? "0" + i : i; } var today = new Date(), hh = fixTime( today.getHours() ), mm = fixTime( today.getMinutes() ), ss = fixTime( today.getSeconds() ) ; var myHHMMSS = hh + ':' + mm + ':' + ss ; return myHHMMSS ; } ; // hhmmss // get a timestamp function genTimeStamp ( arg ) { var szOut = (new Date).yyyymmdd() + ' - ' + (new Date).hhmmss() ; return szOut ; } ; // genTimeStamp() function dom_is_ready() { // DOM ready event console.log( '*** (' + genTimeStamp() + ') *** DOM is ready.' ) ; } ; // DOM ready () $( function() { dom_is_ready() ; // DOM ready event } ) ; // DOM ready
    FontAwesome : bulb

    Homepage

    *** ***

    astronaut web

    Unicode & strange chars
    U+200B

    The Unicode character U+200B, known as "Zero Width Space", is part of the "General Punctuation" block.

    This character is categorized under "Format, Other".

    As its name suggests, it represents an "invisible" space with zero width.

    It doesn't produce any visible mark and doesn't consume any horizontal space.

    It is used for a number of purposes, such as enabling line breaks within long words or URLs where normally there wouldn't be an appropriate place to break the line.

    It can also be used to separate characters that should not be connected or ligated by the rendering engine, or to insert a potential line break point in a string of non-breaking spaces.

    This special character plays a role in managing and controlling the appearance and layout of text, and its specific usage can depend on the context.

    HTML symbols

    Sample from here :

    y totalitario1<0x200b> de carácter reformista2<0x200b> y ultraconservador

    Sapmple from Amazon :

    Fabricante <0x200f> : <0x200e> XGecu - ASIN <0x200f> : <0x200e> B0BLSW7B22
    HEAD section
    REFRESH

    <meta http-equiv="refresh" content="30"> <meta http-equiv="refresh" content="0;URL=http://www.example.com" />

    Quina es la diferencia amb "CTRL" + "F5" ?
    Ctrl F5 (or Ctrl + F5) reloads the current page including the browser cache. It's called Hard reload.

    JS style :

    <body onload="javascript:setTimeout(function(){ location.reload(); },5000);">
    STYLESHEET + RND

    To force CSS reload ;

    <link rel="stylesheet" href="./css/rspi.css?rnd=132" type="text/css">
    refresh images

    Change

    <img src="image.png" />

    into

    <img src="image.png?dummy=8484744" />

    stackoverflow

    lo codi del Pere

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css" type="text/css"> <title> *** PKW to BYET from R4 *** </title> </head> <body> <header> <h1>PKW to BYET from R4</h1> </header> <main> <section> <img class="reload" src="pkw_5-beh.png"> </section> <section> <img class="reload" src="pkw_1-60m.png"> </section> <section> <img class="reload" src="pkw_2-8h.png"> </section> <section> <img class="reload" src="pkw_3-24h.png"> </section> <section> <img class="reload" src="pkw_4-7days.png"> </section> <script> setInterval(() => { let dt = Date.now(); let $imgs = document.querySelectorAll("img.reload"); for (let $img of $imgs) { let src = $img.src.split('?t=')[0]; $img.src = src + '?t=' + dt; } }, 10000); </script> </main> </body> </html>

    Document checking completed.

    From W3C CSS ckecker

    Adblock detectado ! Com ho fan ?

    Comparant

    This software works by analyzing a website and its scripts. Thus, it forms a previous image of what the web page will be like when loaded.

    Once loaded, the software compares the expected page with the rendered version. If these don’t match, the website sends an anti-ad-blocking message.

    TMS + list of scripts that can be used to detect ad blockers

    Methods

    b2.ai

    Dark theme

    TGx :

    <a href='/hub.php?a=switchtheme' class='btn btn-default btn-sm txlight' id='smallguestnav'> <span style='font-weight:500;color:red;text-shadow: 0 0 3px #FF0000;animation: blinker 0.5s linear 2'> <small>*NEW*</small></span>   <span class='glyphicon glyphicon-sunglasses'></span> Dark theme</a>

    Un altre :

    <a href="javascript:void(0)" id="modeSwitcher" title="Switch Dark-Light Theme"><i class="fa fa-lightbulb-o"></i></a>

    ... que sur de

    /assets/font-awesome-4.7.0/css/font-awesome.min.css via /*! * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */ amb .fa-lightbulb-o:before{content:"\f0eb"}.
    Petit Image
    Open Graph : imatges de HTML a WhatsApp

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta property="og:title" content="Check out this image!"> <meta property="og:description" content="A brief description of petit.jpeg"> <meta property="og:image" content="https://usuaris.tinet.cat/sag/imatges/petit.jpeg"> <meta property="og:image:type" content="image/jpeg"> <meta property="og:url" content="https://yourdomain.com/your-page.html"> <meta property="og:type" content="website"> <title>Image Share</title> </head> <body> <h1>Behold: petit.jpeg</h1> <img src="./imatges/petit.jpeg" alt="Petit Image" style="max-width: 100%;"> </body> </html>

    Mine : posa a WhatsApp "https://usuaris.tinet.cat/sag/test_whassa.htm"

    Cache Busting

    Aquest és el pas més important.
    WhatsApp guarda una "imatge" de la teva web a la seva memòria i no la torna a llegir fins passats uns dies.
    Per obligar-lo a llegir el codi nou, afegeix un paràmetre al final del link quan l'enviïs:

    En lloc d'enviar: https://usuaris.tinet.cat/sag/rus_menjars.htm Envia: https://usuaris.tinet.cat/sag/rus_menjars.htm?recepta=col (o qualsevol
    Sharing debugger

    Facebook Sharing Debugger

    Pagines increibles : grafiques modernes, 15 taulers movent-se

    Son alucinants :

    If you need to handle browser differences and missing features, then the best way of dealing with it is to use a technique called feature detection, rather than browser detection.

    Pendent

    Dubtes

    Links


    Valid HTML 4.01! or provide URL to validator.w3.org   Valid CSS!

    		Escriu-me !
    Updated 20240418  
    		v page bottom