Investigación HTML by Juan Uribe https://padlet.com/juancg14/hoodagykyowwb2bk en-us 2023-10-02 21:42:14 UTC 2023-10-02 23:40:14 UTC hello@padlet.com Que es HTML? juancg14 https://padlet.com/juancg14/hoodagykyowwb2bk/wish/2729305273
El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para estructurar y desplegar una página web y sus contenidos. Por ejemplo, sus contenidos podrían ser párrafos, una lista con viñetas, o imágenes y tablas de datos. Como lo sugiere el título, este artículo te dará una comprensión básica de HTML y cúal es su función.

 ¿qué es HTML en realidad?

HTML no es un lenguaje de programación; es un lenguaje de marcado que define la estructura de tu contenido. HTML consiste en una serie de elementos que usarás para encerrar diferentes partes del contenido para que se vean o comporten de una determinada manera. Las etiquetas de encierre pueden hacer de una palabra o una imagen un hipervínculo a otro sitio, se pueden cambiar palabras a cursiva, agrandar o achicar la letra, etc.


Fuente: https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/HTML_basics

]]> 2023-10-02 21:46:13 UTC https://padlet.com/juancg14/hoodagykyowwb2bk/wish/2729305273 Como Funciona HTML? juancg14 https://padlet.com/juancg14/hoodagykyowwb2bk/wish/2729310581
El lenguaje html opera en base a marcadores escritos (que aparecen entre comillas angulares: <html>), a partir de las cuales se cifra la apariencia y orden interno de una página web, así como los scripts o rutinas que operan dentro de ellas. Dicho código fuente hace de ADN de la página Web, diciéndole al navegador de dónde obtener los recursos para su representación y en qué orden, secuencia y modo establecerlos. Y siguiendo el código al pie de la letra, el navegador nos brinda la experiencia de la navegación Web.

Para ello html opera en base a un conjunto de componentes, como son:

  • Elementos. Los ladrillos básicos del lenguaje html, sirven para representar el contenido y sus atributos, así como marcar los parámetros del propio lenguaje, como el punto de inicio de la cadena de comandos y el punto de cierre, o las necesidades especiales.
  • Atributos. Las especificaciones respecto a valor, color, posición, etc. de los elementos incorporados en el código. Por lo general consisten en una serie de instrucciones lógicas o numéricas.


Fuente: https://concepto.de/html/#ixzz8F1RBRqLZ 
]]> 2023-10-02 21:53:36 UTC https://padlet.com/juancg14/hoodagykyowwb2bk/wish/2729310581 juancg14 https://padlet.com/juancg14/hoodagykyowwb2bk/wish/2729319043 El HTML semántico es un concepto para estructurar y escribir código HTML, de manera que el significado del contenido de una página web sea más claro a través de sus etiquetas.

Cómo funciona el HTML semántico
Las etiquetas semánticas pueden utilizarse en lugar de las etiquetas de presentación estándar y esto ayuda a mejorar la legibilidad y la usabilidad, al tiempo que reduce la necesidad de datos estructurados. Esta nueva forma de concebir la programación permite crear sitios web más accesibles y más significativos para los motores de búsqueda. El marcado semántico también es beneficioso porque permite hacer hojas de estilo CSS separadas para cada sección de su sitio web.


Ventajas de HTML semántico
HTML, a lo largo de los años, se volvió más semántico. Esto quiere decir que sus etiquetas adquieren un significado propio y una razón de ser, por ello, las etiquetas definen la naturaleza del contenido que debe incluirse dentro de ellas.

Si tus sitios son construidos con HTML semántico, esto quiere decir que ayudaremos a los motores de búsqueda a entender qué tipo de contenido estamos creando y esto trae las siguientes ventajas:
  1. Posicionamiento en buscadores: Los motores de búsqueda analizan el código de los sitios web para determinar cuál es el contenido que muestran y también saber cómo mostrarlo. La semántica dentro del HTML hace que estos motores entiendan mejor el sitio web que estés construyendo.
  2. Accesibilidad: Los lectores de pantalla para usuarios con debilidad visual organizan la lectura del contenido de acuerdo con la estructura del código. Así que un código con buenas prácticas y semánticas ayuda a que el sitio sea apto para público con diferentes necesidades.
  3. Practicidad: Cuando se trabaja con código semántico es más fácil de entender y, por lo tanto, de mantener. Tu yo del futuro y también tu equipo de trabajo te lo agradecerán.
  4. Reusabilidad: Separar el contenido de la presentación permite que una página se pueda rediseñar con cambiar solamente el CSS

Fuente: Platzy
]]> 2023-10-02 22:06:39 UTC https://padlet.com/juancg14/hoodagykyowwb2bk/wish/2729319043 Etiqueta DOCTYPE juancg14 https://padlet.com/juancg14/hoodagykyowwb2bk/wish/2729320199 Doctype

<!DOCTYPE> informa al navegador qué versión de HTML (o XML) se usó para escribir el documento. Doctype es una declaración no una etiqueta. Además, podemos referirnos a ella como "document type declaration" o por las siglas "DTD".

]]> 2023-10-02 22:08:38 UTC https://padlet.com/juancg14/hoodagykyowwb2bk/wish/2729320199 HTML, HEAD, BODY juancg14 https://padlet.com/juancg14/hoodagykyowwb2bk/wish/2729321685
Ya que conoces qué incluye la estructura HTML básica, te mostramos de forma más desglosada un ejemplo que te servirá para visualizar mejor los elementos previamente mencionados. 

Cualquier página web debe contener al menos este código para desarrollarse correctamente. Te explicamos al detalle el significado y contenido de cada etiqueta a continuación. 

  • <!DOCTYPE html>: se utiliza para indicar la versión HTML 5.0 (la usada actualmente). 
  • <html> </html>: es el elemento raíz y es el más importante dentro de la estructura HTML, pues es el que contendrá el resto de las etiquetas de atributos de la página web. 
  • <head> </head>: es la etiqueta principal que incluye metadatos; son atributos que no se muestran al usuario, solo describen referencias de la página, por ejemplo, título o página CSS. 
  • <body> </body>: es la etiqueta para desarrollar todo el cuerpo de la página web y engloba datos desde textos hasta enlaces.

Dentro de la etiqueta <body> se desglosan más etiquetas y elementos como: 

  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: que representan las etiquetas de títulos. 
  • <p>: sirve para indicar la apertura y cierre de un párrafo.
  • <div>: significa «división» y funciona para crear secciones o agrupar contenidos. 
  • <span>: su traducción es «abarcar» y sirve para aplicar estilo al texto o agrupar elementos en línea.
  • <b>, <i>, <u>: para agregar un texto en negritas, cursiva y subrayado, correspondientemente. 
  • <a>: permite agregar un vínculo o enlace. 
  • <img>, <audio>, <video>, <iframe>: dentro de la estructura HTML estas etiquetas sirven para insertar una imagen, audio, video o incrustar un documento HTML. 
  • <form>: funciona para insertar un formulario. 
  • <label>: representa la etiqueta para un elemento en una interfaz de usuario. 
  • <input>: crea controles interactivos para formularios, con el fin de recibir datos del usuario. 

Cada etiqueta, debe tener una apertura y un cierre; de lo contrario, el código marcará error y los cambios no se visualizarán correctamente en la página web. 


En la siguiente imagen te compartimos un ejemplo más elaborado de cómo se vería la estructura HTML ya conformada con mayor contenido. Recuerda que esta solo representa elementos muy básicos. 



De esta manera puedes estructurar tu página web con tantos elementos y etiquetas que consideres necesarios. Si has cometido algún error en la apertura o cierre de alguna etiqueta podrás darte cuenta al visualizar una página de error, que el navegador se quede en blanco o simplemente al no ver configurado ningún cambio. 


Para hacer una estructura HTML es necesario crear un documento HTML con la extensión .html. Hacerlo es más simple de lo que crees, pues solo debes abrir algún desarrollador de texto, como lo puede ser el bloc de notas de tu sistema y comenzar a escribir el texto y las etiquetas necesarias para desarrollar tu página web. También puedes hacer uso de otras herramientas en línea como Tryit Editor de W3Schools. 

]]> 2023-10-02 22:11:07 UTC https://padlet.com/juancg14/hoodagykyowwb2bk/wish/2729321685 Etiquetas basicas de HTML juancg14 https://padlet.com/juancg14/hoodagykyowwb2bk/wish/2729351794 ¿Cuáles son las etiquetas HTML básicas?
Hay una serie de etiquetas que son las más usadas para crear cualquier documento HTML, a continuación las explicamos:

  • <body> para el contenido
  • <head> para información sobre el documento
  • <div> división dentro del contenido
  • <a> para enlaces
  • <strong> para poner el texto en negrita
  • <br> para saltos de línea
  • <H1>…<H6> para títulos dentro del contenido
  • <img> para añadir imágenes al documento
  • <ol> para listas ordenadas, <ul> para listas desordenadas, <li> para elementos dentro de la lista
  • <p> para parágrafos
  • <span> para estilos de una parte del texto
<body> </body>
Indica la parte del cuerpo del contenido de un documento HTML. Es una etiqueta esencial para cualquier documento ya que indica donde empieza el contenido visible del documento.

<head></head>
La parte superior del documento HTML, es donde podremos indicar los metadatos: título del documento, hojas de estilos, javaScript, CSS…

<div> </div>
Un elemento que es usado mayoritariamente para agrupar otros elementos y actuar como plantilla de otros controles. La etiqueta <div> nos ayuda a estructurar el documento en secciones.

<a> </a>
Es una etiqueta que nos ayuda a poder crear un enlace a una página web. El atributo principal de la etiqueta HTML es href, donde pondremos el enlace al que queremos conectar. Otro atributo muy usado es target, el cual nos sirve para indicar si el enlace se abrirá en una nueva ventana o en la misma.

<strong> </strong>
Si tienes mucho texto, es importante poder dar énfasis a una parte en concreto, con la etiqueta strong lo podemos hacer.

<br>
Con esta etiqueta HTML le podemos decir al navegador que viene un salto de línea. Nos sirve para hacer el texto más leíble.

<H1> </H1> …. <H6> </H6>
Hay diferentes niveles de títulos, del 1 al 6. Las etiquetas <H + número> nos permiten indicar la importancia del título y para estructurar el contenido, de esta forma ayudamos a los bots a entender la importancia del contenido.

<IMG> </IMG>
Usamos la etiqueta IMG para mostrar imágenes dentro del contenido. Necesita el atributo src para funcionar, ya que será donde indicaremos desde donde tiene que mostrar la imagen.

<OL> <li></li> <OL> | <UL> <li></li> <UL>
Las etiquetas OL y LI nos sirven para crear listas, OL para listas ordenadas y UL para listas sin orden. Dentro de las listas, los elementos se identifican con la etiqueta LI.

Fuente: https://www.iebschool.com/blog/que-es-etiqueta-html-analitica-usabilidad/

]]> 2023-10-02 23:01:53 UTC https://padlet.com/juancg14/hoodagykyowwb2bk/wish/2729351794 Listas HTML juancg14 https://padlet.com/juancg14/hoodagykyowwb2bk/wish/2729362461 Listas no ordenadas
Una lista no ordenada en HTML se hace usando la etiqueta <ul>. Y cada elemento dentro de ella son etiquetas <li>.

Listas no ordenadas - marcador
Con la propiedad de CSS list-style-type podemos cambiar el marcador de cada elemento de la lista

  • disc: es un círculo relleno
  • circle: es una circunferencia
  • square: es un cuadrado
  • none: no sale marcador
Listas ordenadas
Una lista ordenada en HTML se hace usando la etiqueta <ol> y los elementos de dentro de ella usan la etiqueta <li>

Listas ordenadas - atributo type
El atributo type se usa para definir el marcador.

  • type=”1”: Con números (es la opción por defecto)
  • type=”A”: Con letras mayúsculas
  • type=”a”: Con letras minúsculas
  • type=”I”: Con números romanos en mayúsculas
  • type=”i”: Con números romanos en minúsculas
Listas de descripción
HTML también admite listas de descripción.

Una lista de descripción es una lista de términos, con una descripción de cada término.

La etiqueta <dl> define la lista de descripción, la etiqueta <dt> define el término (nombre) y la etiqueta <dd> describe cada término

Control del conteo en la lista
Por defecto una lista ordenada empieza por el número 1, pero esto se puede cambiar usando el atributo start.


Fuente: https://kikopalomares.com/clases/como-crear-listas-ordenadas-y-desordenadas-en-html


]]> 2023-10-02 23:20:31 UTC https://padlet.com/juancg14/hoodagykyowwb2bk/wish/2729362461 Links HTML juancg14 https://padlet.com/juancg14/hoodagykyowwb2bk/wish/2729365017 Una de las ventajas de HTML es que permite enlazar varios textos de manera dinámica. Este enlace se denomina Link.
Un link es una referencia (una manera de llegar) desde la página actual a otra página que puede estar en el mismo directorio, en otro directorio o aún en otro computador. Incluso, es posible hacer un link a una parte específica dentro de otra página.

Forma General de un Link

Para insertar un link en un texto HTML se utiliza el comando <A> (de anchor).
Este comando tiene modificadores, es decir, no basta con colocar el comando, es necesario especificarle ciertos parámetros. Uno de estos parámetros es HREF con el cual le indicamos hacia dónde debe seguir el link. Con </A> terminamos el comando, y lo que queda encerrado entre <A> y </A> quedará subrayado indicando que es un link.
Por ejemplo, un link simple a otra página HTML es
	<A HREF="otra_pagina.html"> Este es un link </A>
Y se verá como
Este es un link

Links Locales

Como en el ejemplo anterior, un link puede hacer referencia hacia un archivo en el mismo directorio. Sin embargo, si el archivo al cual queremos referenciar esta en otro directorio, podemos especificarlo en el modificador HREF utilizando .. como el directorio padre, y / como separador de directorios.
Por ejemplo, si el archivo está en el directorio padre:
	<A HREF="../otra_pagina.html">Este archivo esta en el directorio padre </A>
lo cual aparece como
Este archivo esta en el directorio padre

Ahora, si el archivo está en el directorio textos (subdirectorio del directorio donde estamos):
	<A HREF="textos/otra_pagina.html">Este archivo esta en el subdirectorio textos </A>
lo cual aparece como
Este archivo esta en el subdirectorio textos

Fuente: https://users.dcc.uchile.cl/~ahevia/html/links.html

]]> 2023-10-02 23:24:33 UTC https://padlet.com/juancg14/hoodagykyowwb2bk/wish/2729365017 Etiquetas semanticas juancg14 https://padlet.com/juancg14/hoodagykyowwb2bk/wish/2729366428 Las etiquetas HTML semánticas son etiquetas que definen el significado del contenido que engloban. 


Por ejemplo, etiquetas como <header>, <article> y <footer> son etiquetas HTML semánticas. Indican claramente la funcionalidad de su contenido.


En cambio, etiquetas como <div> y <span> son ejemplos típicos de elementos HTML no semánticos. Aunque albergan contenido, no indican qué tipo de contenido contienen ni qué función desempeña esa pieza en la página.

¿Por Qué Son Importantes las Etiquetas HTML Semánticas?
Las etiquetas HTML semánticas no solo son más fáciles de leer y comprender por los buscadores y desarrolladores web, sino que son más accesibles para los lectores con deficiencias visuales y mejoran tu posicionamiento en los buscadores.


Fuente: https://es.semrush.com/blog/html-semantico/
]]> 2023-10-02 23:26:44 UTC https://padlet.com/juancg14/hoodagykyowwb2bk/wish/2729366428 Tablas en HTML juancg14 https://padlet.com/juancg14/hoodagykyowwb2bk/wish/2729369496
Dentro del lenguaje de diseño web, las tablas HTML se crean usando las etiquetas <table> y </table>. En ella se incluyen dos etiquetas importantes: <tr>, que es para crear filas de tablas y <td>, para crear celdas de datos. Todo lo que esté dentro de ambas etiquetas es el contenido de la celda de la tabla. 


Entre otras etiquetas utilizadas al momento de trabajar con tablas HTML son: <th>, para agregar encabezados, <caption>, para insertar subtítulos, <thead> para añadir un encabezado separado a la tabla, <tbody>, que sirve para mostrar el cuerpo inicial de la tabla y <tfoot>, para crear un pie de página separado de la tabla.


El uso de tablas HTML en el diseño se ha vuelto muy común, pues las etiquetas permiten la creación de contenido web de una forma menos compleja; lo cual brinda más oportunidades de diseño.

¿Cómo hacer tablas en HTML?
  1. Crea un tabla sencilla
  2. Agrega un encabezado
  3. Proporciona un estilo
1. Crea un tabla sencilla
Como lo mencionamos al inicio, todo el contenido de las tablas HTML está delimitado por las etiquetas <table> y </table>. Estas serán las principales etiquetas que usarás en el cuerpo de tu editor de texto.


A continuación, debes comenzar a agregar la etiqueta <td> (datos de tabla) e incluir tu primer contenido.
Si quieres agregar una fila con más columnas, solo debes copiar la etiqueta <td> las veces que desees, actualizando el contenido de tu tabla.
Para colocar una segunda fila, debes añadir nuevamente la etiqueta <tr>. Y repite el proceso anterior con la actualización de datos que desees. Recuerda que cada fila debe estar dentro de la etiqueta <tr> con cada celda contenida en un archivo <td>.

2. Agrega un encabezado 

Si bien la tabla anterior ya muestra contenido organizado, lo cierto es que es poco entendible, ¿cierto? Para ello, es necesario agregar un encabezado y lo puedes hacer colocando nuevamente las etiquetas <tr> y <td>. 

3. Proporciona un estilo 

Si además de incluir un encabezado a tu tabla HTML, quieres darle un poco de estilo, por ejemplo, incorporar algún color a alguna columna, también es posible.
Para definir la información de estilo a una columna completa debes hacer uso de las etiquetas <col> y <colgroup>. 

Si bien puedes añadir varios estilos, encontrarás algunas limitaciones en cuanto a propiedades, por ejemplo: borde, fondo, ancho y visibilidad. Si quisieras agregar estas y más propiedades debes diseñar cada <td> o <th> en la columna. Sin embargo, esta opción es más compleja que la que te hemos presentado anteriormente.

Este proceso es un tanto complicado, ya que debes repetir la información de estilo en las tres celdas de la columna. Para hacer esta actividad más dinámica puedes especificar la información una sola vez con la etiqueta <col> dentro de un <colgroup>.

Si quieres lograr el mismo estilo en la tabla HTML que hicimos anteriormente, pero sin tantas repeticiones.

Si quisieras aplicar la misma información de estilo a ambas columnas, solo debes incluir la etiqueta <col> con un atributo de intervalo.

El elemento span sirve para tomar un valor numérico sin unidades que ayuda a especificar el número de columnas a las que deseas que se aplique el mismo estilo.

Fuente: https://blog.hubspot.es/website/tablas-html#:~:text=Dentro%20del%20lenguaje%20de%20dise%C3%B1o,la%20celda%20de%20la%20tabla.

]]> 2023-10-02 23:31:28 UTC https://padlet.com/juancg14/hoodagykyowwb2bk/wish/2729369496 Formularios HTML juancg14 https://padlet.com/juancg14/hoodagykyowwb2bk/wish/2729372068
Un formulario HTML es una caja de texto que puede contener casillas de verificación, botones y campos alfanuméricos. Suelen encontrarse en los sitios web para recolectar los datos personales de los usuarios interesados en la oferta del sitio. Estos datos posteriormente se envían a una base de datos para ser procesados.

¿Para qué sirven los formularios HTML?

Como puedes ver, el objetivo de un formulario es la interacción del usuario con la empresa. Por ello, es importante que no los satures de campos y solicitudes de información que realmente no necesitas.
Desde el punto de vista del usuario, debes pensar en la usabilidad y la pertinencia de tus formularios, para que no provoquen el efecto contrario al que buscas: entablar una relación con un cliente potencial.

Estructura de un formulario HTML y sus elementos

Un formulario HTML no requiere tantas etiquetas y atributos, siempre y cuando lo mantengas con un formato básico.

1. Form

Sus etiquetas son <form> y </form>
Dentro de ellas, se agregan todos los atributos necesarios para dar estructura a tu formulario, los cuales son: 

  • Action: especifica la acción asociada al formulario.
  • Method: indica el método de acceso de la acción del formulario.
  • Enctype: determina el tipo de codificación nombre/valor.
2. Input 

Su etiqueta es <input>. Cuenta con diferentes tipos de entrada:

  • Texto: se expresa como <input type=text> y es por defecto la entrada de una sola línea. También puede tener otros atributos: <input maxlenght> que limita los campos a introducir; <input size> para indicar el espacio a disponer para cada campo y finalmente <input value> que indica el valor inicial de campo. 
  • Caja de selección: se expresa como <input type=checkbox> y sirve para representar opciones como «Sí/No». 
  • Botón: su etiqueta es <input type=radio>; representa un conjunto de varios elementos de este tipo con el mismo nombre con un campo de selección múltiple. 
  • Botón de envío: se expresa como <input type=submit> y representa la opción de lo que tiene que hacer el usuario, que es, en este caso, enviar el formulario.
3. Select

Su etiqueta es <select>. Se utiliza para reducir una lista de valores, por ejemplo:

  • Multiple: indica que puede haber más de una opción.
  • Name: nombre de campo.
  • Size: número de ítems visibles.
4. Text area

Su etiqueta es <textarea>. Representa el espacio donde puedes añadir todo el texto que requieras y puede tener los siguientes atributos:

  • Cols: número de columnas visibles.
  • Name: nombre del campo.
  • Rows: número de líneas visibles.
5. Fieldset

Fieldset es un elemento que sirve para agrupar varios datos relacionados entre sí mismos. Su etiqueta es <fieldset>. Por ejemplo, si necesitas varios campos personales en un formulario
6. Legend

Legend es un elemento que sirve para etiquetar o identificar una agrupación de campos. Su etiqueta es <legend>.

Con estos elementos tus formularios lucirán mejor y mejorarán su usabilidad, con lo cual los usuarios se sentirán más cómodos.

Fuente: https://blog.hubspot.es/website/crear-formulario-html

]]> 2023-10-02 23:35:47 UTC https://padlet.com/juancg14/hoodagykyowwb2bk/wish/2729372068