|
||
Inglés | Castellano | Función |
---|---|---|
<p> </p> | Paragrafo | |
<hx> </hx> | Títulos h1 a h6 | <h1> tan solo puede quedar uno como en la película Highlander. |
<b> </b> y <strong> </strong> | texto en negrita | b en desuso, strong semantic |
<i> </i> y <em> </em> | texto en cursiva | i en desuso, reemplazado en css |
<s> </s> y <del> </del> | Pone el texto tachado | Reemplazado en css |
<sub> </sub> y <sup> </sup> | texto indice | sub subindex o superindex |
<small> </small> | texto en pequeño | |
<blockquote> </blockquote> | Referenciado | |
<!--> Aqui va el comentario --> | Comentario | Dentro del STYLE se pone /* Comentario */ |
<u> </u> y <ins> </ins> | texto en subrallado | u en desuso, reemplazado en css |
<br> o </br> | Salto de línea. No tiene cierre. | |
<hr> o </hr> | Hace una línea horizontal. No tiene cierre. | |
Pone en negrita | <b>...</b> o <strong>...</strong> | <b>...</b> solo pone en negrita. <strong>...</strong> a más de negrita es semantic, google lo referencia. |
Enlace | Abrir enlace wwww.microdeltasoft.com en una nueva ventana (target="_blank") | <a href="https://www.microdeltasoft.com" target="_blank" >Clic aqui para enlace en una nueva ventana</a> |
<ul> | <ul> <li>Elemento 1</li> <li>Elemento 2</li></ul> | lista desordenada |
<ol> | <ol> <li> Elemento1 </li> <li> Elemento2 </li></ol> | lista ordenada |
<img src="img/foto.jpg" alt="Descripción"> | Imagen foto.jpg en el directorio /img si a la raíz directamente el nombre de la foto. Alt muy importante para el referenciado de Google. |
|
.PNG .JPG .BMP .TIFF .WEBP | Formatos de imagénes | Formatos utilizadas por internet por tamaño reducido .PNG .JPG .WEBP (optimización en https://squoosh.app/ |
Nombres de archivos | En relación. Sin espacio sin accentuación | |
<style> | Estilo | <body style="background-color:#cccccc;"> |
<style> | Estilo | <body style="background-color:#cccccc;"> <h1>Títol 1</h1> <p style="color:#CCC345;"> Paragrafo </p> </body> |
<style> | Estilo básico. Imagen | <body style="width:500px; height:600px;"> </body> |
<table> | <table <tr <th <td </tr </th </td</table | Abrir las tablas por filas |
<rowspan> | Compartir lineas | |
<colpan> | Compartir columnas | colspan="2" |
color | color del texto | Es color y no text-color que no existe. |
head | De 50 a 60 caracteres | |
meta name author | <meta name="author" content="Gabriele De Prato Panadés"> | |
meta description | <meta name="description" content="Descripción"> | |
Estilo CSS al head | <head> <style> h1, h2, h3 { color:#c3c3c3; } </style> </head> |
|
head Referencias externas | <link rel="stylesheet" href="> <head> h1, h2, h3 { color:#c3c3c3;} </style> </head> |
Ir a buscar las fuentes, favicon etc |
favicon | Icono de la pestaña | <link rel="icon" type="image/x-icon" href="/images/favicon.ico"> |
<div> | Contenedor sin significado semántic | |
<div> especificos. | <header> <nav> <section> <aside> <footer> | |
<div> | Margin Border Padding Contenedor (Height / Width) | Margin: Del inicio al Border Padding: Del Border al Contenedor Contenedor: Altura (Height) y Anchura (Width) |
<span> | Estilos con selectores. Selector class | <span class="text-negre">bla bla bla</span> |
<span> | Estilos con selectores. Selector class | <header> <style> .text-negre { font-weight: bold; color:#023e00; } </style> </header> |
background-color | color de fondo | |
border | borde | |
line | linea | |
padding | relleno | |
margin | margen | |
style | estilo | |
Los colores | ||
Colores en Hexadecimal | #xxxxxx | Dónde x es un valor de 0 a 9 / A a F. https://htmlcolorcodes.com/ |
Colores en rgb() | rgb (r,g,b) | Dónde los valores r,g,b van de 0 a 255 / r=red (rojo), g=green (verde), b=blue (azúl) |
Color del texto en blanco: | color: #FFFFFF; o formato abreviado color: #FFF; (al repetirse 6 veces se puede marcar sobre 3 dígitos color: rgb(255, 255, 255); color: white; |
|
green | verde | |
blue | azúl | |
red | rojo | |
yellow | amarillo | |
white | blanco | |
black | negro |
Resumen de la lista desordenada | ||
---|---|---|
Lista desordenada (por defecto)<ul>es lo mismo que <ul style="list-style-type:disc;"> |
<ul> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> <li>Elemento 4</li> <li>Elemento 5</li> </ul> |
|
Lista desordenada (circle) |
<ul style="list-style-type:circle;"> <li>Linea 1</li> <li>Linea 2</li> <li>Linea 3</li> <li>Linea 4</li> <li>Linea 5</li> </ul> |
|
Lista desordenada (square) |
<ul style="list-style-type:square;"> <li>Linea 1</li> <li>Linea 2</li> <li>Linea 3</li> <li>Linea 4</li> <li>Linea 5</li> </ul> |
|
Lista desordenada (none) |
<ul style="list-style-type:none;"> <li>Linea 1</li> <li>Linea 2</li> <li>Linea 3</li> <li>Linea 4</li> <li>Linea 5</li> </ul> |
|
Resumen de la lista ordenada | ||
---|---|---|
Lista ordenada (por defecto)
<ol> es lo mismo que <ol type="1>" |
<ol type="1"> <li>Elemento A</li> <li>Elemento B</li> <li>Elemento C</li> <li>Elemento D</li> <li>Elemento E</li> </ol> |
|
Lista ordenada
(Letras mayusculas) |
<ol type="A"> <li>Linea 1</li> <li>Linea 2</li> <li>Linea 3</li> <li>Linea 4</li> <li>Linea 5</li> </ol<> |
|
Lista ordenada
(Letras minúsculas) |
<ol type="a"> <li>Linea 1</li> <li>Linea 2</li> <li>Linea 3</li> <li>Linea 4</li> <li>Linea 5</li> </ol> |
|
Lista ordenada
(Números romanos mínusculas) |
<ol type="i"> <li>Linea 1</li> <li>Linea 2</li> <li>Linea 3</li> <li>Linea 4</li> <li>Linea 5</li> </ol> |
|
Lista ordenada
(Números romanos mayúsculas) |
<ol type="I"> <li>Linea 1</li> <li>Linea 2</li> <li>Linea 3</li> <li>Linea 4</li> <li>Linea 5</li> </ol> |
|
Lista ordenada
(Números a partir de 3) |
<ol type="1" start="3"> <li>Linea 1</li> <li>Linea 2</li> <li>Linea 3</li> <li>Linea 4</li> <li>Linea 5</li> </ol> |
|
Resumen de las tablas | ||||
---|---|---|---|---|
Las tablas empiezan y funcionan por línea
<table> <tr> <th>Título</th> <td>Datos</td> <td>Datos</td> <td>Datos</td> </tr> </table> |
<table> <tr> <th>Título 1</th> <th>Título 2</th> <th>Título 3</th> <th>Título 4</th> <th>Título 5</th> </tr> <tr> <td>Elemento A</td> <td>Elemento B</td> <td>Elemento C</td> <td>Elemento D</td> <td>Elemento E</td> </tr> <tr> <td>Elemento I</td> <td>Elemento II</td> <td>Elemento III</td> <td>Elemento IV</td> <td>Elemento V</td> </tr> <tr> <td>Elemento 1</td> <td>Elemento 2</td> <td>Elemento 3</td> <td>Elemento 4</td> <td>Elemento 5</td> </tr> </table> |
swap_vertical_circle Recursos de interés | ||
---|---|---|
Categoría | Nombre | URL |
Recursos Web | WebExperto | https://webexperto.com/ |
Directorios Web | Sitios España | https://www.sitiosespana.com/webmasters/ |
Recursos Web | ABCdatos | https://www.abcdatos.com/ |
Recursos Web | La Webera | https://www.lawebera.es/ |
Banco de imágenes | Pexel | https://www.pexels.com/es-es/ |
Banco de imágenes | Freepik | https://www.freepik.es/ |
Banco de imágenes | Pixabay | https://pixabay.com/ |
Directorio banco de imágenes | Canva | https://www.canva.com/ |