Pero, ¿qué es el hipertexto? Según el diccionario de la lengua de la Real Academia Española hipertexto es: conjunto estructurado de textos, gráficos etcétera, unidos entre sí por enlaces y conexiones lógicas. Un texto normal como por ejemplo, un libro, normalmente está limitado a una organización lineal o secuencial. Sin embargo, el hipertexto permite saltar de un punto a otro, en un mismo texto, o a otro texto a través de referencias. De este modo, en lugar de leer el texto de forma continua, en el hipertexto ciertos términos están relacionados y el texto se puede leer siguiendo diferentes caminos. Las relaciones en el hipertexto se establecen entre lo que se suele llamar como referencias, enlaces, vínculos o hipervínculos.
Y, ¿qué es la hipermedia? El término hipermedia no figura en el diccionario de la lengua española de la RAE pero, podemos buscar un término relacionado con hipermedia, multimedia. Según el diccionario de la Lengua Española, multimedia es un adjetivo que significa: que utiliza conjunta y simultáneamente diversos medios como imágenes, sonidos y texto, en la transmisión de una información.
Por tanto, un sistema multimedia es un sistema de comunicación en el que se emplean dos o más medios de comunicación distintos de forma concurrente. Un sistema multimedia puede integrar texto, voz, audio, fotografías, gráficos interactivos, vídeos, realidad virtual y otros.
Un sistema multimedia proporciona una gran riqueza y una mayor flexibilidad a la hora de comunicar la información. La calidad multimedia no está restringida al mundo de los ordenadores así, por ejemplo, un libro acompañado de un CD de música ya es una obra multimedia. Para algunos autores, hipermedia es un término que nace de la unión del hipertexto más la multimedia, por tanto, si juntamos las definiciones de hipertexto y multimedia, podemos obtener la siguiente definición de hipermedia: conjunto estructurado de diversos medios como textos, gráficos, imágenes y sonidos unidos entre sí por enlaces y conexiones lógicas para la transmisión de una información.
Si la multimedia proporciona una gran riqueza a la información, el hipertexto aporta una estructura que permite que la información pueda presentarse y explorarse siguiendo distintas secuencias de acuerdo a las necesidades y preferencias del usuario. Existen muchos sistemas que se basan en el hipertexto y la hipermedia pero, la web es el sistema más conocido y por eso la web se ha convertido en sinónimo de hipertexto e hipermedia.
Los lenguajes de etiquetas, también conocidos como lenguajes de marcado o de marcas, son los que nos permiten estructurar un documento mediante el uso de etiquetas. Los lenguajes de etiquetas no se identifican con los de programación; esto ocurre principalmente porque los lenguajes de etiquetas no definen algunos aspectos básicos presentes en los lenguajes de programación, como es el caso de funciones aritméticas o el uso de variables, por citar algunos ejemplos.
Cuando queremos crear o dar formato a una página web, se nos presentan múltiples herramientas, pero todas tienen algo en común: el lenguaje de marcas.
El lenguaje de marcas más conocido y extendido es el HTML (“HyperText Markup Language”, “Lenguaje de Marcado de Hipertexto”) y es el mismo que Tim Berners-Lee a inicios de 1990 creó como un subconjunto de SGML (Standard Generalized Markup Language, otro lenguaje de marcado). HTML es el lenguaje de etiquetas que funciona como una de las piedras angulares de la World Wide Web, llamado también como la Web, que no es más que un conjunto de documentos de hipertexto y/o hipermedios (páginas web) enlazados entre sí y accesibles desde internet.
HTML ha tenido muchas actualizaciones a lo largo del tiempo, y la última versión de HTML es HTML5. En HTML5 se destacan sus características semánticas, las posibilidades multimedia que incorpora, las nuevas funciones para formulario y las características que se definen para poder integrarse con tecnologías que permitirán abrir una nueva etapa en Internet, en lo que se refiere a la arquitectura de las aplicaciones.
Es importante que todo el mundo tenga acceso a la web, pero también es fundamental que todos comprendamos las herramientas que utilizamos para acceder a ella. Usamos navegadores web como Mozilla Firefox, Google Chrome, Microsoft Edge y Apple Safari todos los días, pero ¿entendemos qué son y cómo funcionan?
Un navegador web te lleva a cualquier lugar de Internet. Recupera información de otras partes de la web y la muestra en tu escritorio o dispositivo móvil. La información se transfiere mediante el Protocolo de Transferencia de Hipertexto (HTTP), que define cómo se transmiten el texto, las imágenes y el video en la web. Esta información debe compartirse y mostrarse en un formato consistente para que las personas que utilizan cualquier navegador, en cualquier parte del mundo, puedan ver la información.
Lamentablemente, no todos los fabricantes de navegadores eligen interpretar el formato de la misma manera. Para los usuarios, esto significa que un sitio web puede funcionar y verse diferente. Crear una experiencia consistente entre navegadores, para que los usuarios puedan disfrutar de internet, sin importar el navegador que elijan, se llama estándares web.
Cuando el navegador web obtiene datos de un servidor conectado a Internet, utiliza un software llamado motor de renderizado para traducir esos datos en texto e imágenes. Estos datos están escritos en "lenguaje de marcas de hipertexto" (HTML) y los navegadores web leen este código para construir lo que vemos, escuchamos y experimentamos en Internet.
Los hipervínculos permiten a los usuarios seguir una ruta a otras páginas o sitios en la web. Cada página web, imagen y video tiene su propio Localizador Uniforme de Recursos (URL), que también se conoce como dirección web. Cuando un navegador visita un servidor en busca de datos, la dirección web le dice al navegador dónde buscar cada elemento que se describe en el html, que luego le dice al navegador dónde situarlo en la página web.
Un editor de texto es un programa informático que permite crear, abrir, ver y modificar el contenido de un documento. Los editores de texto se proporcionan con los sistemas operativos y paquetes de desarrollo de programación. El ejemplo de editor de texto más simple es Bloc de Notas, que está integrado en el software de Windows. Puedes crear, editar y ver archivos de texto simples con el bloc de notas. Un editor de texto simple tiene las siguientes características:
● cortar, copiar y pegar,
● Dar formato a un texto,
● buscar y reemplazar,
● Deshacer y Rehacer.
Los editores de texto son utilizados por una amplia variedad de propósitos y por una gran variedad de personas. Cualquiera que necesite escribir, editar o leer texto puede simplemente usar editores de texto como el bloc de notas. Los programadores de software, los desarrolladores web y de aplicaciones utilizan editores de texto para leer, escribir y editar el código fuente de muchos lenguajes de programación y marcado. El uso del editor de texto para el código fuente es el propósito principal de los editores de texto y hay muchas otras características del software de edición de texto creadas para ayudar a estos usuarios a leer y escribir código. Como vamos a aprender el lenguaje HTML también necesitamos un editor de texto. Un editor de texto en línea son editores de textos pero al cual puedes acceder desde cualquier navegador web. Algunos de estos editores de textos te permiten crear cuentas personales de tal manera que no necesitas guardar en el ordenador en el que trabajas ningún documento, todo se guarda en tu cuenta personal y puedes tener accesos en cualquier momento a tu proyecto o trabajo desde cualquier ordenador y desde cualquier lugar donde esté. Una de las grandes ventajas que tiene con respecto a los editores de texto que instalas en el ordenador es que de alguna manera puedes hacer a un lado las restricciones de hardware o software del ordenador para editar, modificar, crear algún archivo o documento.
Antes que nada, debes saber que el código HTML se compone de etiquetas o marcas. Las etiquetas en HTML son palabras clave que se escriben entre los signos <> y que el navegador entiende. Normalmente las etiquetas se componen de una etiqueta de apertura (entre los signos <>), una etiqueta de cierre (entre los signos </>) y un contenido. El contenido puede ser texto u otras etiquetas. Aunque existen algunas etiquetas que no tienen ni contenido ni etiqueta de cierre, son una excepción. La sintaxis sería la siguiente:
HTML es un lenguaje que se compone por elementos que permiten definir la estructura del documento. Estos elementos son los que nos posibilitan determinar cómo estará armada la página y sus secciones. Las etiquetas nos brindan la oportunidad de definir los elementos en el código.
Todos los elementos se dividen en dos categorías:
Estos son los elementos que estructuran la parte principal de la página web, dividiendo una página en bloques coherentes. Un elemento a nivel de bloque siempre comienza con una nueva línea y ocupa todo el ancho de la página web, de izquierda a derecha.
Ejemplo.
<p>
Este párrafo es un elemento en bloque
</p>Los elementos en línea son aquellos elementos que diferencian la parte de un texto dado y le proporcionan una función particular. Estos elementos no comienzan con una nueva línea y toman el ancho según el requisito. Los elementos en línea se utilizan principalmente con otros elementos.
Ejemplo.
<p>
Este párrafo es un <b> elemento en línea</b>
</p>Un atributo en HTML son palabras especiales utilizadas dentro de la etiqueta de apertura,
para controlar el comportamiento del elemento. Los atributos HTML brindan información
adicional sobre el elemento. Cada atributo HTML tiene su nombre y valor:
Algunos elementos no tienen etiqueta final ni contenido, estos elementos se denominan elementos vacíos o elementos de cierre automático.
Veamos algunos atributos y cuál es su función.
Ejemplo. Usamos el elemento con el atributo href y valor https://pilares.cdmx.gob.mx/inicio
<a href="https://www.pilares.cdmx.gob.mx/inicio">Esto es un link </a>Ejemplo. Usamos el elemento con el atributo scr y el valor pilares.jpg
<img scr="pilares.jpg" height="200px" width="200px">El ejemplo anterior también tiene atributos de height y width, que definen el alto y el ancho de la imagen en la página web.
En HTML5, también puede omitir el uso de comillas alrededor de los valores de los
atributos.
Ejemplo. Usamos el elemento con el atributo scr y el valor pilares.jpg
<img scr=pilares.jpg height=200px width=200px><a href=https://www.pilares.cdmx.gob.mx/inicio>Esto es un link </a>En 2004, Ian Hickson, el autor de la especificación de HTML5, analizó 1.000.000.000 de páginas web utilizando el motor de Google, intentando identificar la manera en la que la web real estaba construida. Uno de los resultados de este análisis, fue la publicación de una lista con los nombres de clases más utilizados. Este estudio revela que los desarrolladores utilizan clases o IDs comunes para estructurar los documentos. Esto llevó a considerar que quizás fuese una buena idea crear etiquetas concretas para reflejar estas estructuras: la web semántica.
En cualquier idioma, es esencial comprender el significado de las palabras durante la comunicación. Y si se trata de una comunicación informática, se vuelve aún más crítica. HTML5 proporciona elementos semánticos que facilitan la comprensión del código.
En este sentido, la semántica define el significado de palabras y frases, es decir, tener elementos semánticos es equivalente a tener elementos con significado. Los elementos semánticos tienen un significado simple y claro tanto para el navegador como para el desarrollador.
¿Por qué usar elementos semánticos? En primer lugar, porque es mucho más fácil de leer. Esta es probablemente la primera cosa que notará al mirar el primer bloque de código usando elementos semánticos. Como programador podría estar leyendo cientos o miles de líneas de código. Cuanto más fácil sea leer y comprender ese código, más fácil será su trabajo.
Tiene mayor accesibilidad. No serás el único que encuentre los elementos semánticos más fáciles de entender. Los motores de búsqueda y las tecnologías de asistencia (como lectores de pantalla para usuarios con discapacidad visual) también podrán comprender mejor el contexto y el contenido de tu sitio web, lo que significa una mejor experiencia para los usuarios.
En general, los elementos semánticos también conducen a un código más consistente.
HTML5 introduce elementos específicos para poder definir secciones del documento y también características que pretenden hacer de la semántica una capacidad importante para el lenguaje.
En lo que se refiere a la estructura del documento, en HTML4 estábamos acostumbrados a definir las partes del cuerpo mediante el uso de la etiqueta div. El problema se planteaba en la imposibilidad de asignarles la semántica correspondiente a las diferentes partes. Por ejemplo, si bien podíamos aplicar una id con el valor nav o footer (barra de navegación y pie), esto no era más que el valor de un atributo y no le daba un significado semántico diferente al elemento.
A partir de HTML5 se definen etiquetas que nos permiten estructurar el cuerpo de una página con una semántica específica para cada elemento: header hgroup nav section article aside footer figure figcaption time details summary mark, etiquetas que nos permiten definir una estructura semántica en nuestros documentos HTML y a la vez un código mucho más claro de leer, tanto para los desarrolladores como también para los agentes informáticos (robots de los buscadores, dispositivos electrónicos para facilitar las características de accesibilidad).
A continuación comparamos dos códigos HTML, uno usando una versión anterior a HTML5 y el otro usando HTML5.
<div id=”header”>
<h1>Header</h1>
</div>
<div id=”nav”>
<p>Nav</p>
</div>
<div id=”section”>
<p>section</p>
</div>
<div id=”aside”>
<p>aside</p>
</div>
<div id=”footer”>
<p>footer</p>
</div> Ahora usando HTML5:
<header>
<h1>Header</h1>
</header>
<nav>
<p>Nav</p>
</nav>
<section>
<p>section</p>
</section>
<aside>
<p>aside</p>
</aside>
<footer>
<p>footer</p>
</footer>La semántica de HTML5 aporta mucha claridad
Vamos ahora a estructurar una página en HTML5 desde cero. En este punto ya debimos de haber realizado maquetas del sitio, analizado la necesidades, así como haber verificado aspectos de usabilidad, accesibilidad y navegabilidad. Teniendo esto, partimos a andar en el camino de estructurarlo con HTML5. Una recomendación que se hace en estos casos es realizar primero la estructura HTML de las secciones más importantes del cuerpo del documento (cabecera, contenido principal, barra de navegación, pie, etcétera) y, luego, ir agregando los elementos que se incorporan en ellas.
A continuación, veremos el ejemplo de un código básico de estructura semántica de HTML5. En este caso, trabajaremos el código del cuerpo del documento con un encabezado header, una barra de navegación nav, seguido de un bloque principal denominado section que contiene dos artículos article, una barra con información adicional aside y también un pie footer:
<header>
<h1>Título del encabezado</h1>
<p><strong>Texto del encabezado</strong></p>
</header>
<nav>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>
</nav>
<section>
<article>
<h2>Título del artículo 1</h2>
<p>Texto del artículo 2</p>
</article>
<article>
<h2>Título del artículo 2</h2>
<p>Texto del artículo 2</p>
</article>
</section>
<aside>
<h3>Título del Aside</h3>
<p>Contenido del Aside</p>
</aside>
<footer>
<p>Texto de pie de página</p>
</footer>Antes de continuar, vale aclarar que esta es simplemente la estructura HTML, y que todo lo relacionado con la apariencia y modo de representación de los elementos en pantalla, lo manejaremos a través de CSS, cuyas reglas veremos en detalle en el capítulo siguiente.
Volviendo a nuestro ejemplo, vamos a comenzar con el header. En este caso, aplicamos la etiqueta h1 al título del sitio o blog, que aparece en su página principal, ya que es el elemento de texto más importante. Debajo, utilizamos la etiqueta p y la destacamos con strong para el texto de descripción que suelen tener los sitios.
Algunos sitios utilizan imágenes en el encabezado; en esos casos, por una cuestión de accesibilidad es recomendable utilizar en la etiqueta img los atributos alt y title para describir el texto relativo a dicha imagen.
Ahora pasamos a la barra de navegación nav, que bien podría estar a la izquierda de la sección de contenido o por encima de ella. En general, si creamos un menú, podremos estructurarlo con una lista, como en este caso, en la que los ítems están constituidos por la enumeración de los elementos. Luego, por medio de CSS, le daremos el estilo que deseemos.
En este ejemplo, section contiene el resumen de los artículos. En esta estructura simplificada, vemos dos article; cada uno de ellos cuenta con un título h2 y un texto en un párrafo p para la breve descripción de la noticia.
En este caso, el aside ha sido simplificado en un título h3 y un texto en un p.
Tengamos en cuenta que el pie de página, el cual se encuentra definido con el footer, puede tener un texto sobre el autor, copyright, enlaces internos o hacia sitios amigos, etcétera.
La estructura que hemos visto aquí puede adaptarse, fácilmente, a cualquier tipo de necesidad, ya sea un e-commerce, una red social, un foro o cualquier otra opción que podamos imaginar. Luego será solo cuestión de incorporar los elementos para personalizar nuestro proyecto y, con ellos, terminar de darle la estructura deseada a cada página.
Cuando empezamos a escribir código HTML en el editor, primero tenemos que dar el Tipo de Documento. Este tipo de documento le dice al navegador qué tipo de código está escrito en el archivo. Este tipo de documento se denomina como doctype en HTML. Todo documento HTML debe comenzar con doctype. La sintaxis para escribir doctype es la siguiente:
<!doctype>Tenemos que especificar aún más el nombre y la versión de HTML en la etiqueta anterior. Ya que usaremos HTML 5 en estas notas, la sintaxis de HTML5 doctype es la siguiente:
No tiene ni contenido ni etiqueta de cierre, simplemente indica al navegador que el documento es de tipo HTML5.
Justo después de esta irá la etiqueta html. La etiqueta html sirve para indicar que el
documento es un documento HTML y el navegador lo interpretara como tal. Esta
segunda etiqueta sí que tiene etiqueta de cierre /html y englobará todo el contenido
de la página.
Justo después de esta irá la etiqueta . Esta etiqueta contiene elementos que ayudarán a que nuestra página funcione correctamente y generalmente dentro de esta etiqueta van elementos que no se visualizan en el navegador.
Dentro de las etiquetas y , colocaremos las etiquetas <title> y </title> de la siguiente manera:
<!doctype html>
<html>
<head>
<title> Mi primer titulo </title>
</head>
</html>title contiene el título de la página y esta se muestra en la pestaña de los navegadores, más no se ve en el cuerpo de la página.
Después de la cabecera sigue el cuerpo de la página y se indica mediante la etiqueta body, el cuerpo o body contiene prácticamente los elementos visuales de nuestra página, aquí irán los textos de encabezado o títulos, subtítulos, párrafos, listas, tablas, formularios, multimedia, etc. Es decir el contenido de la página, todo lo que queremos que se vea en el navegador.
<!doctype html>
<html>
<head>
<title> Mi primer titulo </title>
</head>
<body>
...cuerpo de la página...
</body>
</html>Finalmente la estructura básica HTML quedará de la siguiente manera:
<!doctype html>
<html>
<head>
<title> Mi primer titulo </title>
</head>
<body>
...cuerpo de la página...
</body>
</html>Para poder visualizar el resultado de lo anterior es necesario que abras un editor de texto y escribas el código de arriba, al finalizar, guarda el documento asociándole un nombre y al final agrega .html y guárdalo en alguna carpeta. Abre la carpeta donde guardaste el documento HTML y da doble click sobre el archivo. Automáticamente te abrirá el navegador predeterminado (Edge, Mozilla FireFox, u otro) y visualizarás algo como lo siguiente:
Reto. Escribe un programa en html para imprimir tu nombre completo con tu número de teléfono agregando como título de página "Información de contacto".
Estos títulos que nos van a permitir resaltar información en tamaño y visibilidad, además de cuestiones de SEO.
Generar una etiqueta heading
<h1> Bienvenidos compañeros </h1>
<h2> Bienvenidos compañeros </h2>
<h3> Bienvenidos compañeros </h3>El valor que corresponde a la letra “h” puede ir del 1 al 6, permite ordenar estos títulos del más importante al menos importante, por ejemplo, un h2 puede utilizarse en títulos y subtítulos.
El valor de estas “h” están estrictamente relacionados con la jerarquía de las búsquedas en internet, si dos páginas tuvieran un mismo heading pero uno tuviera h1 y otro h6, el navegador le daría prioridad al h1, por lo que aparecería entre las primeras búsquedas en el navegador, debido a que lo considera como información importante y valiosa.
Nota: No te olvides que para desplegar tu proyecto y poder visualizarlo debes crear una carpeta con tu archivo html y abrirlo en tu navegador
Te permiten ingresar información, y su etiqueta se muestra de la siguiente manera:
<p>contenido</p> Donde tenemos el contenido podemos poner la información que queremos que se visualice en nuestro navegador, pero recuerda aún sin estilos, porque eso lo veremos en otra lección.
Podemos agregar un párrafo adicional con salto de línea por defecto, pero si queremos poner párrafos separados dentro del mismo, sin el salto de línea podemos ajustarlo con la siguiente etiqueta:
<br>Y se conoce como break line.
Tenemos también la opción de hr, esta etiqueta además de crear un espacio dibujara una línea.
Podemos darle un formato básico al texto haciendo negritas y cursivas los elementos seleccionados, solo consideemos que los títulos y subtítulos ya estan en negritas. Este es un formato básico, el formato avanzado lo realizaremos con CSS.
Negritas.
<p>Este texto esta en <b>negritas</b></p>Usamos la etiqueta b (de bold) o strong, con apertura y cierre..
Cursiva Usamos la etiqueta i o em, con apertura y cierre.
<p>Este texto esta en <i>cursivas</i></p>NOTA: Podemos combinar varias etiquetas a un solo elemento, solo debemos recordar que se aplica la ley del sandwitch, etiqueta que abre es la que cierra.
<p>Este texto esta en <b><i>negritas y en cursivas</i></b></p>Te permite colocar un link como si fuera un hipervínculo, por medio de una palabra o varias podrás dirigirte al link que le indiques al usuario, utilizando la siguiente etiqueta
<a href="https://github.com/LaunchX-InnovaccionVirtual" target="blank">Link a LaunchX</a>
<br>La letra “a” hace referencia al atributo que indica hacia donde te va a dirigir. Dentro de la misma etiqueta podemos agregar otro atributo, por ejemplo, un target= blank lo que nos permite abrir en una pestaña nueva la página del link que indicamos.
Es muy útil cuando queremos llevar al usuario a ciertas páginas estratégicas, por ejemplo, a nuestras redes sociales, la compra de algún producto, etc.
<img src="https://i.imgur.com/84QT6os.jpeg" alt="Perritos lindos" width="350px" height="350px">Contiene dos atributos, source o bien "src" que se refiere a la fuente de donde vamos a usar la imagen, la cuál puede ser de forma local o una imagen de internet y "alt" que significa texto alternativo, este texto alternativo le va a dar la descripción a la imagen. También podemos usar otros atributos como "width" y "height" donde vamos a poner una cantidad en pixeles que son el alto y el ancho de la imagen.
Utiliza la etiqueta como enlace a otra página. También podemos enlazar una
imagen con otra página o podemos usar una imagen como enlace. Para hacer esto,
coloque la etiqueta
dentro de la etiqueta .
Las listas HTML se utilizan para especificar listas de información. Todas las listas pueden contener uno o más elementos de lista. Hay tres tipos diferentes de listas HTML:
● Lista Ordenada o Lista Numerada (ol)
● Lista desordenada o lista con viñetas (ul)
● Lista de descripción o Lista de definición (dl)
Lista desordenada en HTML o lista con viñetas (ul). En la lista desordenada de HTML, todos los elementos de la lista están marcados con viñetas. También se conoce como lista con viñetas. La lista desordenada comienza con la etiqueta ul y los elementos de la lista comienzan con la etiqueta li.
<ul>
<li>Café</li>
<li>Arroz</li>
<li>leche</li>
<li>huevos</li>
</ul>ul significa "unordered list" es decir una lista que no tiene orden.
Lista Ordenada o Lista Numerada (lo). En las listas HTML ordenadas, todos los elementos de la lista están marcados con números de forma predeterminada. También se conoce como lista numerada. La lista ordenada comienza con la etiqueta ol y los elementos de la lista comienzan con la etiqueta li.
<ol>
<li>Alumno1</li>
<li>Alumno2</li>
<li>Alumno3</li>
</ol>ol significa "ordered list" y te mostrara una lista en orden jerárquico.
Lista de descripción HTML o Lista de definiciones (dl). La lista de descripción se se conoce también como lista de definiciones donde las entradas se enumeran como un diccionario o una enciclopedia. La lista de definiciones es muy apropiada cuando se desea presentar un glosario, una lista de términos u otra lista de nombres y valores. La lista de definiciones en HTML contiene las siguientes tres etiquetas: ● La etiqueta dl : define el inicio de la lista. ● La etiqueta dt : define un término. ● La etiqueta dd : define la definición del término (descripción).
<dl>
<dt>Enchiladas</dt>
<dd>- Tortilla frita con salsa, rellena de pollo</dd>
<dt>Molletes</dt>
<dd>- Bolillo con frijoles y queso</dd>
</dl>
HTML5 también admite la etiqueta video. La etiqueta de video en HTML se usa para transmitir archivos de video, como clips de películas, clips de canciones, en la página web. Actualmente, hay tres formatos de video compatibles con la etiqueta de video HTML:
● mp4
● webM
● ogg
Ejemplo.
<video controls>
<source src=ADIP.mp4 type=video/mp4>
tu navegador no admite la etiqueta de video html.
</video>Nota que incluimos una ruta a los medios que queremos mostrar usando el atributo src; podemos incluir otros atributos para especificar información como el ancho (width) y la altura (heigh) del video; si queremos que se reproduzca automáticamente (autoplay) o se reproduzca en bucle (loop), también está el atributo controls si queremos mostrar los controles de video predeterminados del navegador, muted se utiliza para silenciar la salida de vídeo,etc.
Para los videos de youtube tenemos que entrar al video y en compartir dar en la opción compartir, copiar la etiqueta e incorporar en nuestra página.
<iframe width="560" height="315" src="https://www.youtube.com/embed/UZDWwjV1STo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>La etiqueta de table en HTML se utiliza para mostrar datos en forma tabular (fila * columna). Puede haber muchas columnas en una fila.
Podemos crear una tabla para mostrar datos en forma tabular, usando el elemento table, con la ayuda de los elementos tr, td y th.
En cada tabla, la fila de la tabla está definida por la etiqueta tr, el encabezado de la tabla está definido por th y los datos de la tabla están definidos por las etiquetas td.
Las tablas en HTML se utilizan para gestionar el diseño de la página, por ejemplo, sección de encabezado, barra de navegación, contenido del cuerpo, sección de pie de página, etc. Pero se recomienda usar la etiqueta div sobre table para administrar el diseño de la página.
<table>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Puntaje</th>
</tr>
<tr>
<td>Sonoo</td>
<td>Jaiswal</td>
<td>60</td>
</tr>
<tr>
<td>James</td>
<td>William</td>
<td>80</td>
</tr>
<tr>
<td>Swati</td>
<td>Sironi</td>
<td>82</td>
</tr>
<tr>
<td>Chetna</td>
<td>Singh</td>
<td>72</td>
</tr>
</table>
Atributo de borde en HTML. Puedes usar el atributo border de la etiqueta table en HTML para especificar el borde de una tabla.
Ejemplo.
<table border=1>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Puntuaje</th>
</tr>
<tr>
<td>Sonoo</td>
<td>Jaiswal</td>
<td>60</td>
</tr>
<tr>
<td>James</td>
<td>William</td>
<td>80</td>
</tr>
<tr>
<td>Swati</td>
<td>Sironi</td>
<td>82</td>
</tr>
<tr>
<td>Chetna</td>
<td>Singh</td>
<td>72</td>
</tr>
</table>
Ancho de la tabla en HTML. Podemos ajustar el ancho de nuestra tabla según nuestras necesidades. El atributo style y width son usados en la etiqueta table para especificar el ancho de la tabla, este puede especificado en píxeles o porcentaje.
Ejemplo.
<table style=width:100% border=1>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Puntuaje</th>
</tr>
<tr>
<td>Sonoo</td>
<td>Jaiswal</td>
<td>60</td>
</tr>
<tr>
<td>James</td>
<td>William</td>
<td>80</td>
</tr>
<tr>
<td>Swati</td>
<td>Sironi</td>
<td>82</td>
</tr>
<tr>
<td>Chetna</td>
<td>Singh</td>
<td>72</td>
</tr>
</table>
Tabla en HTML con colspan. Si deseas que una celda abarque más de una columna, puedes usar el atributo colspan sobre la etiqueta th. El atributo dividirá una celda/fila en varias columnas, y el número de columnas dependerá del valor del atributo colspan.
Ejemplo.
<table style=width:100% border=1>
<tr>
<th>Nombre</th>
<th colspan=2>No. Movil</th>
</tr>
<tr>
<td>Omar Montoya</td>
<td>55123456</td>
<td>55654321</td>
</tr>
</table>
Tabla en HTML con rowspan. Si deseas que una celda abarque más de una fila, puedes usar el atributo rowspan sobre la etiqueta th. Este dividirá una celda en varias filas. El número de filas divididas dependerá de los valores de intervalo de filas.
Ejemplo.
<table style=width:100% border=1>
<tr>
<th>Nombre</th><td>Omar Montoya</td>
</tr>
<tr>
<th rowspan=2>No. Movil</th><td>55123456</td>
</tr>
<tr>
<td>55654321</td>
</tr>
</table>
Tabla en HTML con caption. El título de una tabla en HTML se muestra encima de la tabla. Para colocarlo debe usarse la etiqueta caption solo después de la etiqueta table.
Ejemplo.
<table border=1 style=width:100%>
<caption>Registros de estudiantes</caption>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Puntaje</th>
</tr>
<tr>
<td>Leticia</td>
<td>Lopez</td>
<td>70</td>
</tr>
<tr>
<td>Miguel</td>
<td>Cortes</td>
<td>60</td>
</tr>
<tr>
<td>Erica</td>
<td>Robles</td>
<td>42</td>
</tr>
<tr>
<td>Ignacio</td>
<td>Torres</td>
<td>62</td>
</tr>
</table>
Un formulario en HTML es una sección de un documento que contiene controles como campos de texto, campos de contraseña, casillas de verificación, botones de radio, botón de envío, menús, etc.
Un formulario en HTML facilita al usuario ingresar datos que se enviarán al servidor para su procesamiento, como nombre, dirección de correo electrónico, contraseña, número de teléfono, etc.
Se requieren formularios de HTML si desea recopilar algunos datos del visitante del sitio.
Por ejemplo: si un usuario desea comprar algunos artículos en Internet, debe completar un formulario, como la dirección de envío y los detalles de la tarjeta de crédito/débito, para que el artículo pueda enviarse a la dirección indicada. La sintaxis de un formulario en HTML es como sigue:
El elemento en HTML es un elemento fundamental de la etiqueta form. Se utiliza para crear campos de formulario, para recibir información del usuario. El siguiente es un ejemplo para mostrar la entrada de texto simple.
<form>
Introduce tu nombre <br>
<input type="text" name="username">
</form>Si escribimos en nuestro editor de texto el código anterior y guardamos y ejecutamos, se visualizaría algo parecido a lo siguiente:
El atributo type="text" de la etiqueta de entrada crea un control de campo de texto, también conocido como control de campo de texto de una sola línea. El atributo name es opcional, pero se requiere para el componente del lado del servidor. Ejemplo.
<form>
Nombre: <input type="text" name="firstname"/> <br/>
Apellido: <input type="text" name="lastname"/> <br/>
</form>Si escribimos en nuestro editor de texto el código anterior y guardamos y ejecutamos, se visualizaría algo parecido a lo siguiente:
Si omites el atributo name, la entrada de texto archivada no se enviará al servidor.
La etiqueta <textarea> en form.La etiqueta <textarea> en HTML se usa para insertar texto de varias líneas en un formulario. El tamaño de <textarea> se puede especificar usando el atributo rows o cols. Ejemplo.
<form>
Ingresa tu dirección:<br>
<textarea rows="2" cols="20"></textarea>
</form>Si escribimos en nuestro editor de texto el código anterior y guardamos y ejecutamos, se visualizaría algo parecido a lo siguiente:
La etiqueta en form. Se considera usar label en form ya que hace que el código sea amigable para el analizador/navegador/usuario.
Si haces clic en la etiqueta label, se centrará en el control de texto (en la caja donde se introduce el texto), esto es tiene mayor funcionalidad en pantallas táctiles. Para hacerlo, debes tener el atributo for en la etiqueta label cuyo valor debe ser el mismo que el valor del atributo id de la etiqueta input.
Ejemplo.
<form>
<label for="firstname">Nombre: </label>
<input type="text" id="firstname" name="firstname"/><br/>
<label for="lastname">Apellido: </label>
<input type="text" id="lastname" name="lastname"/><br/>
</form>Control de campo de password en form. La contraseña no es visible para el usuario en el control de campo de password que se pone como valor en el atributo type de la etiqueta input. Ejemplo.
<form>
<label for="password">Contraseña: </label>
<input type="password" id="password" name="password"/> <br/>
</form>Si escribimos en nuestro editor de texto el código anterior y guardamos y ejecutamos, se visualizaría algo parecido a lo siguiente:
Control de campo email en form. El campo email es nuevo en HTML 5. Valida el texto para introducir la dirección de correo electrónico correctamente. Debes utilizar @ (arroba) y . (punto) en este campo. Ejemplo.
<form>
<label for="email">Email: </label>
<input type="email" id="email" name="email"/> <br/>
</form>Si escribimos en nuestro editor de texto el código anterior y guardamos y ejecutamos, se visualizaría algo parecido a lo siguiente:
Note que si no se introduce una dirección de correo en el formato correspondiente mostrará una alerta de error.
Control de botón de radio en form. El botón de radio se utiliza para seleccionar una opción entre múltiples opciones. Se utiliza para la selección de género, preguntas de prueba, etc. Si usas un nombre para multiples botones de radio, solo se podrá seleccionar un botón de radio a la vez. Ejemplo.
<form>
<label for="gender">Genero: </label>
<input type="radio" id="gender" name="gender" value="male"/>Masculino
<input type="radio" id="gender" name="gender" value="female"/>Femenino
<input type="radio" id="gender" name="gender" value="other"/>Otro <br/>
</form>Si escribimos en nuestro editor de texto el código anterior y guardamos y ejecutamos, se visualizaría algo parecido a lo siguiente:
<form>
Pasatiempo:<br>
<input type="checkbox" id="sing" name="sing" value="sing"/>
<label for="sing">Cantar</label><br>
<input type="checkbox" id="football" name="football" value="football"/>
<label for="football">Futbol</label><br>
<input type="checkbox" id="reading" name="reading" value="reading"/>
<label for="reading">Leer</label>
</form>Si escribimos en nuestro editor de texto el código anterior y guardamos y ejecutamos, se visualizaría algo parecido a lo siguiente:
Control de checkbox en form. El control checkbox se utiliza para marcar múltiples opciones de casillas de verificación dadas. Ejemplo.
Aquí type=submit está especificando que es un botón de Enviar. El atributo value puede ser cualquier cosa que escribamos en el botón de la página web. El atributo name puede ser omitido aquí. Ejemplo.
<form>
<label for="name">Introducir nombre</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Introducir contraseña</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="Enviar">
</form>Si escribimos en nuestro editor de texto el código anterior y guardamos y ejecutamos, se visualizaría algo parecido a lo siguiente:
El elemento fieldset en HTML.
El elemento fieldset en HTML se usa para agrupar la información relacionada de un formulario. Este elemento se usa con el elemento
que proporciona un título para los elementos agrupados.<form>
<fieldset>
<legend>Información del usuario:</legend>
<label for="name">Introducir nombre</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Introducir contraseña</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="Enviar">
</fieldset>
</form> Si escribimos en nuestro editor de texto el código anterior y guardamos y ejecutamos, se visualizaría algo parecido a lo siguiente:
- placeholder El atributo plaholder en la etiqueta input le da un prellenado que se borra al posicionarnos en el input, solo aplica a input de tipo texto
- required Hace obligatorio el llenado del input al que se le aplica
- Reset Al hacer un boton type reset borrara la información
- minlength y maxlength en tipos texto nos permiten establecer un mínimo y máximo de caracteres a recibir.
- size Nos permite hacer más grande el campo del type. Hay varios tipos más de formularios, como select, que permite desplegar una lista de opciones, de tipo file que permite anexar un archivo adjunto al formulario, date que permite ingresar la fecha y algunos otros que nos permiten generar formularios super completos.
El elemento header como contenedor.
El elemento header representa un contenedor de contenido introductorio o un conjunto de enlaces de navegación. Un elemento header normalmente contiene:
● uno o más elementos de encabezado (h1 ─ h6)
● logotipo o icono,
● información de autoría.
El elemento nav como contenedor.
El elemento nav define un conjunto de enlaces de navegación.
Ten en cuenta que NO todos los enlaces de un documento deben estar dentro de un elemento nav. El elemento
está diseñado solo para el bloque principal de enlaces de navegación.El elemento section como contenedor.
El elemento section define una sección en un documento. De acuerdo con la documentación HTML de W3C: "Una sección es una agrupación temática de contenido, generalmente con un encabezado". Ejemplos de dónde se puede usar un elemento section:
● Capítulos
● Introducción
● Noticias
● Información del contacto
Ejemplo:
El elemento article como contenedor.
El elemento article especifica un contenedor independiente. Un artículo debe tener sentido por sí mismo y debe ser posible distribuirlo independientemente del resto del sitio web. Ejemplos de dónde se puede usar el elemento article:
● Mensajes del foro
● Publicaciones de blog
● Comentarios del usuario
● Tarjetas de productos
El elemento aside como contenedor.
El elemento aside define algún contenido además del contenido en el que se coloca (como una barra lateral).
El contenido aside debe estar indirectamente relacionado con el contenido circundante.
● Artículos del periódico
Ejemplo:
El elemento footer como contenedor.
El elemento footer define un pie de página para un documento o sección. Un elemento footer normalmente contiene:
● Información de autoría
● Información derechos de autor
● Información del contacto
● Mapa del sitio
● Volver a los enlaces superiores
● Documentos relacionados
Ahora vamos a la carpeta ejercicios y ejercicio en clase para maquetar la página del proyecto!!!!!