swap_vertical_circle

HTML & CSS / Recursos - Parte 1




HTML / Ayuda

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;">
<h1>Títol 1</h1>
<p>Paragrafo</p>
</body>
<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>
  • Elemento 1
  • Elemento 2
  • Elemento 3
  • Elemento 4
  • Elemento 5
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>
  • Linea 1
  • Linea 2
  • Linea 3
  • Linea 4
  • Linea 5
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>
  • Linea 1
  • Linea 2
  • Linea 3
  • Linea 4
  • Linea 5
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>
  • Linea 1
  • Linea 2
  • Linea 3
  • Linea 4
  • Linea 5

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>
  1. Elemento A
  2. Elemento B
  3. Elemento C
  4. Elemento D
  5. Elemento E
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<>
  1. Linea 1
  2. Linea 2
  3. Linea 3
  4. Linea 4
  5. Linea 5
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>
  1. Linea 1
  2. Linea 2
  3. Linea 3
  4. Linea 4
  5. Linea 5
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>
  1. Linea 1
  2. Linea 2
  3. Linea 3
  4. Linea 4
  5. Linea 5
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>
  1. Linea 1
  2. Linea 2
  3. Linea 3
  4. Linea 4
  5. Linea 5
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>
  1. Linea 1
  2. Linea 2
  3. Linea 3
  4. Linea 4
  5. Linea 5


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/