HTML 👀📝
,

HTML – Marcas de Hipertexto

Los estandares de HTML estan bajo el Consorcio World Wide Web (W3C), el cual nos ofrece w3schools como herramienta para aprender todo sobre HTML

HTML utiliza lo que llamamos etiquetas de marca para indicar al browser del Web cómo mostrar el texto. Las etiquetas de marca que usamos en HTML consisten en un corchete izquierdo( < ), (el símbolo “menor que”), al que sigue el nombre de la etiqueta y cerrado por un corchete derecho( > ).

¿Qué encontrarás aquí?

En esta entrada pretendo compartir mis apuntes sobre html. De muy seguramente me deje alguna marca, dejo aquí esta pagina con mas información y referencias 😉

Prometo actualizar con todo el contenido lo antes posible.

Estructura HTML

<head>

<body>

listas

Tablas

Bloques divisores

Texto

formularios

Otros bloques

  • <img>
  • <canvas>
  • <iframe>
  • <address>
  • <details> & <summary>
  • <object>
  • <audio>
  • <video>
  • <footer>

Referencias

Estructura HTML

HTML es la estructura de la web, este lenguaje de hipertexto funciona con la misma lógica con la que leemos nosotros. Es decir, la web empezara a construirse de arriba abajo.

Los elementos en linea son ordenados asi a partir de las propiedades con CSS.

🦾Empezemos!

Template estructura básica html.

HTML tiene un léxico simple i variado, cada tag tiene su función y nos permiten dar una estructura solida y adaptable según las necesidades, a continuación expondré de manera ilustrativa como funcionan y sus distintos usos.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
    <title>Document</title>
    <meta name="author" content="John Doe">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="description" content="Free Web tutorials for HTML and CSS">
    <link rel="stylesheet" href="mystyle.css">
    <script src="myscripts.js"></script>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>

Todos los documentos HTML deben comenzar con DOCTYPE.

No es una etiqueta HTML sino una “información” para el navegador sepa el tipo de documento que procesara.

<!DOCTYPE html>

Comentarios

Para añadir comentarios:

<!-- COMENTARIO -->

<html>

La etiqueta representa la raíz de un documento HTML. Es el contenedor de todos los demás elementos HTML.

Siempre debe incluir el atributo lang dentro de la etiqueta, para declarar el idioma de la página web. Esto está destinado a ayudar a los motores de búsqueda y navegadores. Para saber el valor de referencia de cualquier lenguaje podeis verlos aqui!

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Title of the document</title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

<head>

El elemento HTML es un contenedor para los siguientes elementos: , <meta>,<style>, <link>, <script>y <base>.

Metadatos

<meta> define metadatos sobre un documento HTML. Los metadatos son datos (información) sobre datos.

W3school

<meta>

Las etiquetas <meta> siempre van dentro del elemento y normalmente se utilizan para especificar el juego de caracteres, la descripción de la página, las palabras clave, el autor del documento y la configuración de la ventana gráfica.

Codificación de caracteres

Si la fuente no fue previamente definida es necesario hacerlo usando HTML. Así se evita, por ejemplo, que la ñ o las tildes no se muestren correctamente. El meta tag que usaremos es este:

<meta charset="utf-8"/>

Definir palabras clave para motores de búsqueda:

<meta name="keywords" content="HTML, CSS, JavaScript">

Define una descripción de tu página web:

<meta name="description" content="Free Web tutorials for HTML and CSS">

Definir el autor de una página:

<meta name="author" content="John Doe">

Refrescar pagina cada 30 segundos:

<meta http-equiv="refresh" content="30">

Configuración de la ventana gráfica:

La ventana gráfica es el área visible del usuario de una página web. Varía según el dispositivo: será más pequeño en un teléfono móvil que en la pantalla de una computadora. Para que tu dispositivo pueda intuir las dimensiones y la escala de la pagina añadir el siguiente <meta>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Esto le da al navegador instrucciones sobre cómo controlar las dimensiones y la escala de la página.

width=device-width parte establece el ancho de la página para seguir el ancho de pantalla del dispositivo (que variará según el dispositivo).

initial-scale=1.0 parte establece el nivel de zoom inicial cuando el navegador carga la página por primera vez.

<base>

Especifique una URL predeterminada y un destino predeterminado para todos los enlaces en una página:

<head>
  <base href="https://www.progmaker-blog.eric-sama.com/" target="_blank">
</head>

<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>

Solo puede haber un único <base>elemento en un documento, y debe estar dentro del elemento <head>.

<title>

Estrictamente hablando, este no es ningún meta-tag, sino una etiqueta autónoma de HTML (HTML Tag), aunque, debido a su significado a la hora de interactuar con los agentes de usuario es común que sea mencionada como parte de los metadatos. Como elemento obligado en el encabezado del HTML, el título se sitúa, por regla general, por encima de todas las demás etiquetas. Los navegadores lo leen y aparece en la barra del título de una pestaña o una ventana como nombre estándar de la página en la lista de favoritos y en el historial del navegador.

Según Google, el título se incluye entre los cerca de 200 factores que se tienen en cuenta en el cálculo del ranking en la búsqueda orgánica. Es por esto que, en el marco de la optimización OnPage, este no debe sobrepasar la longitud máxima de 55 caracteres que pueden mostrar los buscadores.

<title> Progmaker | Blog a la informatica </title>

Icono web

Toda web que se precie tenda el logo en su icono. Puedes crear un icono gracias a la web favicon o paginas como flaticon con un amplio catalogo de iconos gratuitos que podemos usar en nuestros proyectos.

Para añadir un icono incrustar el siguiente codigo:

<link rel="icon" type="image/x-icon" href="/images/favicon.ico">

<script> & <noscript>

El elemento <script> contiene declaraciones de secuencias de comandos o apunta a un archivo de secuencia de comandos externo a través del atributo src.

<noscript> aporta contenidos alternativos al elemento script. las aplicaciones de usuario que no soporten scripts deben mostrar en su lugar el contenido de este elemento.

<script src="/javascript/listado.js" type="text/javascript"></script>

<noscript>
   <p> el script no se soporta visite este link  
      <a href="/datos/listado.html">listado</a> 
      alternativo. 
   </p>
</noscript>

<style>

Podemos añadir los estilos css dentro del html o utilizar la propiedad <link> para leer los estilos en otro archivo.

<html>
<head>

<link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" />
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</head>
<body>

<h1>Hey</h1>
<p>Lorem ipsum dolor et amet</p>

</body>
</html>

<body>

El elemento body representa el contenido de un documento HTML. Solo puede haber un elemento body en un documento HTML.

<header>

El elemento <header> representa un contenedor de contenido introductorio o un conjunto de enlaces de navegación. Normalmente contiene:

  • Uno o mas elementos de encabezado (H1-H6)
  • Logotipo o icono
  • Informacion de autoría
   <header>
       <h1>Main page heading here</h1>
       <p>Posted by John Doe</p>
    </header>

<main>

La etiqueta <main> especifica el contenido principal de un documento.

El contenido dentro del elemento <main> debe ser exclusivo del documento. No debe contener ningún contenido que se repita en documentos como barras laterales, enlaces de navegación, información de derechos de autor, logotipos de sitios y formularios de búsqueda.

Nota: No debe haber más de un elemento <main> en un documento. El elemento NO debe ser descendiente de un elemento <article>,<aside> ,<footer> , <header> o <nav>.

<body>

<main>
  <h1>Most Popular Browsers</h1>
  <p>Chrome, Firefox, and Edge are the most used browsers today.</p>
  <article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
  </article>
</main>

</body>

<nav>

Esta etiqueta define un conjunto de enlaces de navegación. El
elemento <nav> está destinado solo para el bloque principal de enlaces de navegación.

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>

<aside>

Representa una parte de un documento cuyo contenido solo está indirectamente relacionado con el contenido principal del documento. Los apartes se presentan con frecuencia como barras laterales o cuadros de llamada.

<p>Salamanders are a group of amphibians with a lizard-like appearance, including short legs and a tail in both larval and adult forms.</p>

<aside>
    <p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
</aside>

<p>Several species of salamander inhabit the temperate rainforest of the Pacific Northwest, including the Ensatina, the Northwestern Salamander and the Rough-skinned Newt. Most salamanders are nocturnal, and hunt for insects, worms and other small creatures.</p>

<footer>

Define el pie de página para un documento o sección. un elemento footer normalmente contiene:

  • información de autoría
  • informacion registrada
  • Información del contacto
  • mapa del sitio
  • volver a los enlaces superiores
  • documentos relacionados
<footer>
  <p>Author: Hege Refsnes</p>
  <p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>

Listas

Las listas en HTML nos permite crear conjuntos de elementos en forma de lista dentro de una página, todos los cuales irán precedidos, generalmente, por un guión o número.

Los tipos de listas en HTML son los siguientes:

No ordenadas

Las listas desordenadas en HTML nos sirven para mostrar los elementos sin ningún tipo de orden, simplemente precedidos por una viñeta que puede ser un punto, un cuadrado,…

<ul>

Para definir una lista desordenada en HTML utilizamos el elemento ul.

<ul> ... </ul>

<li>

Para representar los elementos de la lista desordenada utilizamos el mismo elemento que con las listas ordenadas, es decir, el elemento li.

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  ...
  <li>Elemento N</li>
</ul>

Listas ordenadas

Las listas en HTML ordenadas son aquellas que nos muestran los elementos de la lista en orden. Para representar el orden tendremos los elementos numerados. Es decir, cada uno de los elementos irá precedido de un número o letra que establezca su orden.

<ol>

Las listas en HTML ordenadas se representan mediante el elemento OL. Un ejemplo de lista ordenada sería el siguiente:

<ol>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  ...
  <li>Elemento N</li>
</ol>

Número de inicio de la lista: start

<ol start="5">
  <li>Julio</li>
  <li>Carmen</li>
  <li>Ignacio</li>
  <li>Elena</li>
</ol>

// RESULTADO:

5. Julio
6. Carmen
7. Ignacio
8. Elena

Tipo de lista ordenada: type

De igual manera podemos indicar el tipo de lista ordenada en HTML que queremos representar.

Entre los tipos de listas que podemos representar tenemos:

  • 1 – Listas decimales
  • a – Listas alfabéticas en minúsculas
  • A – Listas alfabéticas en mayúsculas
  • i – Listas de números romanos en minúsculas
  • I – Listas de números romanos en mayúsculas
<ol type=”A”>
  <li>Julio</li>
  <li>Carmen</li>
  <li>Ignacio</li>
  <li>Elena</li>
</ol>

// RESULTADO:
A. Julio
B. Carmen
C. Ignacio
D. Elena

Listas de Definiciones

Las listas en HTML de definiciones en HTML nos sirven para montar listas en las que tenemos la estructura valor y definición. Suelen ser listas para definir términos, como si fuese un diccionario, si bien pueden ser cualquier par valor-definición.

<dl>

Las listas en HTML de definiciones en HTML se construyen mediante el elemento dl.

<dl> ... </dl>

<dd>

En este caso, dentro de las listas en HTML de definiciones tenemos dos elementos anidados, el que representa al valor dt y el que representa a la definición dd. De esta forma la estructura de las listas en HTML de definiciones es la siguiente:

<dl>
  <dt>Término1</dt>
  <dd>Definición 1</dd>
  <dt>Término 2</dt>
  <dd>Definición 2</dd>
  ...
  <dt>Término N</dt>
  <dd>Definición N</dd>
</dl>

Listas anidadas

Cuando estemos manejando listas podemos anidar unas en otras independientemente del tipo de lista que estemos anidando.

El esquema de listas sería parecido al siguiente:

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>
    <ol>
      <li>Elemento 2.1</li>
      <li>Elemento 2.2</li>
      ...
      <li>Elemento 2.N</li>
    </ol>
  </li>
  <li>Elemento 3</li>
  ...
  <li>Elemento N</li>
</ul>

Tablas

Una tabla no es más que un medio para organizar datos en filas y columnas. Este concepto ha estado presente en nuestra sociedad durante mucho tiempo y ha sido adoptado por HTML en sus primeras etapas, como una forma de transmitir información que de otro modo podría no ser obvia o fácilmente comprensible.

En los documentos HTML , una tabla puede considerarse, de forma sencilla, como un grupo de filas que contienen cada una un grupo de celdas. Esto es conceptualmente diferente a un grupo de columnas que contiene un grupo de celdas, y esta diferencia tendrá algún impacto en la composición y el comportamiento de la tabla.

<table>

Define una tabla HTML.

Una tabla HTML consta de un elemento <table> y uno o más elementos <tr> <th> <td>.

<tr>

La etiqueta <tr> define una fila en una tabla

Una tabla tiene 2 tipos de celdas

<th>

Celdas de encabezado: contiene información de encabezado

<td>

Celdas de datos: contienen datos. El texto de los elementos <td> es regular y esta alineado a la izquierda de forma predeterminada.

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

<caption>

Define el titulo de la tabla. Esta etiqueta debe insertarse inmediatamente despues de la etiqueta <table>

De forma predeterminada, el título de una tabla se alineará al centro sobre una tabla. Sin embargo, las propiedades CSS text-align y caption-side se pueden usar para alinear y colocar el título.

<table>
  <caption style="text-align:right">My savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
<br>

<colgroup>

La <colgroup> especifica un grupo de una o mas columnas en una tabla para formatear. Es util para aplicar estilos a columnas enteras, en lugar de repetir los estilos para cada celda, para cada fila.

La etiqueta debe ser secundaria de un elemento <table>, después de cualquier elemento <caption> y antes de cualquier elemento <thead>, <tbody>, <tfoot> y <tr>.

para definir diferentes propiedades en una columna dentro de un <colgroup>, use la etiqueta <col> dentro de la <colgroup>.

<table>
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

<thead>

Se utiliza para agrupar el contenido del encabezado en una tabla HTML.

Se usa junto con los elementos <tbody> y <tfoot> para especificar cada parte de una tabla (encabezado, cuerpo y pie de pagina).

Los navegadores pueden usar estos elementos para permitir el desplazamiento del cuerpo de la tabla independientemente del encabezado y el pie de página. Además, al imprimir una tabla grande que abarca varias páginas, estos elementos pueden permitir que el encabezado y el pie de página de la tabla se impriman en la parte superior e inferior de cada página.

<tbody>

Se utiliza para agrupar el contenido del cuerpo en una tabla HTML.

<tfoot>

Se utiliza para agrupar el contenido del pie de página en una tabla HTML.

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}

table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

Bloques divisores

Los elementos HTML, <div>, <section> y <article> son todos elementos de bloque. Pero cada uno tiene una simbología diferente.

<div>

Puede usarse con los atributos class, lang y title para marcar la semántica común a un grupo de elementos consecutivos.
El elemento div se utiliza como elemento de último recurso. De lo contrario, conduce a una mala accesibilidad para el lector.

<section>

El elemento <section> representa una sección genérica de un documento o aplicación.

La página de inicio de un sitio web se puede dividir en secciones para una introducción, noticias e información de contacto.
El elemento de sección no es un elemento contenedor genérico. El elemento de sección es apropiado solo si los contenidos se enumeran explícitamente en el esquema del documento.

<article>

Representa una composición independiente en un documento, página, aplicación o sitio, que está destinado a ser distribuible o reutilizable de forma independiente (por ejemplo, en sindicación). Los ejemplos incluyen: una publicación en un foro, un artículo de revista o periódico, o una entrada de blog, una tarjeta de producto, un comentario enviado por un usuario, un widget o dispositivo interactivo, o cualquier otro elemento de contenido independiente.

<div>
<section>
  <h1>Latest Blog Posts</h1>
  <article>
    <h2>Blog Post Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
  </article>
  <article>
    <h2>Blog Post Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
  </article>
</section>
</div>

Texto

Existen distintas etiquetas para dar valor y contenido a nuestro texto.

<H1>

Las etiquetas <h1> hasta <h6> se utilizan para definir encabezados.

<h1> define el encabezado mas importante y <h6> el menos importante

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

<p>

Añade un párrafo, un parrafo puede contener distintas etiquetas html para enriquezer el texto.

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<hr>

Define una ruptura temática en una página HTML (por ejemplo, un cambio de tema). Suele mostrarse como una regla horizontal que se usa para separar el contenido (o definir un cambio) en una página HTML.

<h1>The Main Languages of the Web</h1>

<p>HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page, and consists of a series of elements. HTML elements tell the browser how to display the content.</p>

<hr>

<p>CSS is a language that describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work, because it can control the layout of multiple web pages all at once.</p>

<hr>

<p>JavaScript is the programming language of HTML and the Web. JavaScript can change HTML content and attribute values. JavaScript can change CSS. JavaScript can hide and show HTML elements, and more.</p>

<br>

Inserta un solo salto de línea. La etiqueta <br> es útil para escribir direcciones o poemas. Es una etiqueta vacía, lo que significa que no tiene una etiqueta final.

<p>Be not afraid of greatness.<br>
Some are born great,<br>
some achieve greatness,<br>
and others have greatness thrust upon them.</p>

<p><em>-William Shakespeare</em></p>

<em>

El contenido dentro de las etiquetas <em> se mostrara por defecto en cursiva.

<span>

Esta etiqueta es un contenedor en línea que se utiliza para marcar una parte de un texto o una parte de un documento.

<p>Mi color azul es el <span style="color:blue">azul</span> del mar.</p>

<a>

Define un hipervínculo, que se utiliza para enlazar de una página a otra.

El atributo más importante es el atributo href, que indica el destino del enlace.
Podemos lanzar nuestros hipervinculos de 3 formas distintas

Abrir en la misma pestaña:

<a href="https://www.eric-sama.com">Visita mi pagina personal!</a>

Abrir en una nueva pestaña:

<a href="https://www.eric-sama.com" target="_blank">eric-sama.com!</a>

Abrir nueva pestaña en Microsoft edge:

<a href="microsoft-edge:https://google.com"> Click Here </a>

Abrir en una nueva ventana del navegador web:

Esta funcionalidad viene con javascript. Para ello utilizaremos el comando 

<script>
        var windowObjectReference = null; // global variable
        function openRequestedPopup(url, windowName) {
            if (windowObjectReference == null || windowObjectReference.closed) {
                windowObjectReference = window.open(url, windowName, "popup");
            } else {
                windowObjectReference.focus();
            };
        }
</script>


<a href="https:www.progmaker-blog.eric-sama.com" target="PromoteFirefoxWindow"
         onclick="openRequestedPopup(this.href, this.target); return false;"
         title="Progmaker-blog | Eric Sanchez March ">
   
         BLOG
</a>

Formularios

Se utiliza un formulario HTML para recopilar la entrada del usuario. La entrada del usuario se envía con mayor frecuencia a un servidor para su procesamiento.


“Me apunto la tarea de crear una nueva entrada sobre formularios”

<!DOCTYPE html>
<html>
<body>

<h1>The label element</h1>

<p>Click on one of the text labels to toggle the related radio button:</p>

<form action="/action_page.php">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTMfL</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

<form>

Es un contenedor para diferentes tipos de elementos de entrada, como: campos de texto, casillas de verificación, botones de opción, botones de envío, etc.

<input> & <label>

<input> Define un campo de entrada.

<label> Define el valor de la entrada.

Estas 2 etiquetas trabajan juntas y el atributo id de <input> tiene que ser el mismo que el for de <label>

<form>  
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTMfL</label>
</form>

Existen distintos tipos de entrada:

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

Referencias

HTML – Marcas de Hipertexto

Post navigation