Chicas Digitalers WEB

Introducción a HTML (link al documento de PAME)
¿Qué es HTML?
HTML, que significa Lenguaje de Marcado de Hipertexto (por sus siglas en inglés «HyperText Markup Language»), es el lenguaje estándar utilizado para crear y diseñar páginas web. Es un lenguaje de marcado que define la estructura y el contenido de una página web mediante el uso de etiquetas y atributos.
Estructura Básica de una Etiqueta HTML:
Una etiqueta HTML consta de varias partes:
Nombre de la Etiqueta: Especifica el tipo de elemento que estás creando. Por ejemplo, <p> para un párrafo, <h1> para un encabezado de nivel 1, <a> para un enlace, etc.
Atributos: Algunas etiquetas pueden tener atributos que proporcionan información adicional sobre el elemento. Los atributos se definen dentro del par de comillas dobles después del nombre de la etiqueta. Por ejemplo, el atributo href en un elemento <a> define la URL a la que el enlace apunta.
Contenido: Es el contenido dentro de la etiqueta. Por ejemplo, en una etiqueta de párrafo <p>, el contenido es el texto que se mostrará como un párrafo en la página web.
Etiqueta de Cierre: Algunas etiquetas, como <p>, <a>, <div>, no necesitan una etiqueta de cierre explícita, mientras que otras, como <h1>, <p>, <div>, sí la necesitan. La etiqueta de cierre tiene el mismo nombre que la etiqueta de apertura pero precedido por una barra diagonal, por ejemplo </p>.

¿QUÉ SON LOS ATRIBUTOS DE LAS ETIQUETAS?

Las etiquetas son la estructura básica del HTML. Estas etiquetas se componen y contienen otras propiedades, como son los atributos y el contenido.
En la actualidad, HTML define un total de 142 etiquetas. Sin embargo, una etiqueta por sí sola a veces no contiene la suficiente información para estar completamente definida. Para ello contamos con los atributos. Estos están compuestos de un par nombre-valor que se encuentran separados por «=» y escritos en la etiqueta inicial de un elemento después del nombre del elemento. El valor puede estar encerrado entre «comillas dobles» o ‘simples’. Existen, también, algunos atributos que afectan al elemento por su presencia en la etiqueta de inicio.

Atributos Básicos Los atributos básicos se utilizan en la mayoría de las etiquetas HTML y XHTML, aunque adquieren mayor sentido cuando se utilizan hojas de estilo en cascada (CSS):

SECCIONES EN HTML
Las páginas web se trabajan con lo que se conoce como un esquema. El esquema (outline) de una página web es un índice de los apartados de una página web que muestra la relación de jerarquía entre los diferentes apartados y subapartados.

<section>: se utiliza para representar una sección «general» dentro de un documento o aplicación, como un capítulo de un libro. Puede contener subsecciones y si lo acompañamos de h1-h6 podemos estructurar mejor toda la página creando jerarquías del contenido, algo muy favorable para el buen posicionamiento web.
<article>: representa un componente de una página que consiste en una composición autónoma en un documento, página, aplicación, o sitio web con la intención de que pueda ser reutilizado y repetido.
<aside>: representa una sección de la página que abarca un contenido relacionado con el contenido que lo rodea, por lo que se le puede considerar un contenido independiente. Este elemento puede utilizarse para efectos tipográficos, barras laterales, elementos publicitarios u otro contenido que se considere separado del contenido principal de la página. 40
<header>: representa un grupo de artículos introductorios o de navegación. Está destinado a contener por lo general la cabecera de la sección (un elemento h1-h6 o un elemento hgroup).
<nav> : representa una sección de una página que enlaza a otras páginas o a otras partes dentro de la página. No todos los grupos de enlaces en una página necesita estar en un elemento nav, sólo las secciones que constan de bloques de navegación principales son apropiadas para el elemento de navegación.
<footer> : representa el pie de una sección, con información acerca de la página/sección que poco tiene que ver con el contenido de la página, como el autor, el copyright o el año.
<hgroup> : representa el encabezado de una sección. El elemento se utiliza para agrupar un conjunto de elementos h1-h6 cuando el título tiene varios niveles, tales como subtítulos o títulos alternativos.
ETIQUETA DIV
La etiqueta div se conoce como etiqueta de división. Esta etiqueta se usa en HTML para hacer divisiones de contenido en la página web como (texto, imágenes, encabezado, pie de página, barra de navegación, etc.). La etiqueta div tiene etiquetas de apertura (
) y de cierre (
) y es obligatorio cerrar la etiqueta. Div es la etiqueta más útil en el desarrollo web porque nos ayuda a separar datos en la página web y podemos crear una sección particular para datos o funciones particulares en las páginas web. Cabe aclarar que la etiqueta div genera un salto de línea.
• La etiqueta Div es una etiqueta de nivel de bloque
• Es una etiqueta de contenedor genérica
• Se utiliza para agrupar varias etiquetas de HTML para que se puedan crear secciones y aplicarles estilo en conjunto.

ETIQUETA SPAN
El elemento span HTML es un contenedor en línea genérico para elementos y contenido en línea. Se usa para agrupar elementos con fines de compartir un determinado estilo (mediante el uso de los atributos de clase o id). La mejor manera de usarlo es cuando no hay ningún otro elemento semántico disponible. Esta etiqueta es muy similar a la etiqueta div, pero se diferencian en que div es una etiqueta a nivel de bloque y span es una etiqueta en línea. La etiqueta span es una etiqueta emparejada, lo que significa que tiene una etiqueta de apertura (<) y de cierre (>), y es obligatorio cerrar la etiqueta. La etiqueta span se utiliza para agrupar elementos en línea y no realiza ningún cambio visual por sí misma.

TABLAS EN HTML

Una tabla es un conjunto de celdas organizadas dentro de las cuales podemos alojar distintos contenidos. HTML dispone de una gran variedad de etiquetas para crear tablas, con sus atributos.
Como veremos a continuación, existen diversas etiquetas que se deben utilizar en una forma determinada para la creación de tablas. Por ello, puede que en un principio nos resulte un poco complicado trabajar con estas estructuras, pero con un poco de práctica podremos crear tablas con absoluta soltura.
Si deseamos mostrar datos de una manera sencilla de leer, dispuestos en filas y columnas, tarde o temprano observaremos que las tablas son la mejor solución y apreciaremos las posibilidades nos ofrecen.

Para empezar, las tablas son definidas por las etiquetas y su cierre. Dentro de estas dos etiquetas colocaremos todas las otras etiquetas de las tablas, hasta llegar a las celdas.
Dentro de las celdas ya es permitido colocar textos e imágenes que darán el contenido a la tabla. Las tablas son descritas por líneas de arriba a abajo (y luego por filas de izquierda a derecha). Cada una de estas líneas, llamadas columnas, es definida por otra etiqueta y su cierre: (table row: columna de tabla).
Asimismo, dentro de cada línea, habrá diferentes celdas.
<table>
<tr>
<td>Nombre</td>
<td>Edad</td>
<td>Artista</td>
</tr>
<tr>
<td>Florencia</td>
<td>13 años</td>
<td>Taylor Swift</td>
</tr>
<tr>
<td>Lucia</td>
<td>16 años</td>
<td>Stray kids</td>
</tr>
<tr>
<td>Luana</td>
<td>13 años</td>
<td>Bad Bunny</td>
</tr>
<tr>
<td>Lourdes</td>
<td>17 años</td>
<td>Maria Becerra</td>
</tr>
<tr>
<td>Julieta</td>
<td>18 años</td>
<td>Cuarteto de Nos</td>
</tr>
</table>

FORMULARIOS HTML

Los formularios son esas famosas cajas de texto y botones que podemos encontrar en muchas páginas web. Son muy utilizados para realizar búsquedas o bien para introducir datos personales por ejemplo en sitios de comercio electrónico. Los datos que el usuario introduce en estos campos son enviados al correo electrónico del administrador del formulario o bien a un programa que se encarga de procesarlo automáticamente.
ETIQUETA INPUT
Las cajas de texto son colocadas por medio de la etiqueta <input>. Dentro de esta etiqueta hemos
de especificar el valor de dos atributos: type y name.
<input type=»text» name=»nombre»>
ATRIBUTO TYPE
Como hemos visto el atributo type nos sirve para especificar el tipo de dato que se va a ingresar en nuestro input, en el ejemplo anterior lo habíamos puesto como tipo text, para que sea una caja de texto y poder ingresar texto. Pero existen otros tipos de valores para el atributo type.
NUMBER
Este tipo permite al usuario ingresar números. Los navegadores vienen con validaciones para evitar que el usuario ingrese algo que no sea números.
<input type=»number»>

DATE
Este le permite al usuario ingresar una fecha, ya sea mediante una caja de texto o una interfaz gráfica con selector de fecha.
EMAIL
Este tipo permite al usuario ingresar un mail. Los navegadores vienen con validaciones para validar que se esté ingresando con el formato correcto de un mail.
<input type=»email»>
TEXTO OCULTO
Hay determinados casos en los que podemos desear esconder el texto escrito en el campo input, por medio de círculos negros, de manera que aporte una cierta confidencialidad. Para esto vamos a usar el type password.
<input type=»password»>
ATRIBUTO NAME
El nombre del elemento del formulario es de gran importancia para poder identificarlo en nuestro programa de procesamiento (por ejemplo Java).

Ejemplo de clase:
<div title=»formulario de chicas programadoras»>
<h6>Registro de chicas programadoras:</h6>
<form action=»enviarform»>
<!– contenido de formulario –>
<input type=»text» name=»nombre» maxlength=»4″>
<input type=»number» name=»edad»>
<input type=»password» name=»contraseña»>

</form>
</div>