Índice
¿Qué es HTML?
HTML es un lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet. Se trata de la sigla que corresponde a HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto, que podría ser traducido como Lenguaje de Formato de Documentos para Hipertexto.
Un dato curioso es que HTML no incluye el diseño gráfico de las páginas web, sólo sirve para indicar cómo va ordenado el contenido de una página web.
No existen reglas para dicha organización, por eso se dice que es un sistema de formato abierto.
A diferencia de un lenguaje de scripting o programación que usa secuencias de comandos para realizar procesos, un lenguaje de marcado utiliza etiquetas (tags) para identificar el contenido.
Ejemplo: <p> Hola, esto es un párrafo :D </p>
Las etiquetas aparecen especificadas dentro de los caracteres menor que “<” y mayor que “>”, ejemplo: <Aquí dentro va el nombre de la etiqueta>. Entre sus componentes, los elementos dan forma a la estructura esencial del lenguaje, ya que tienen dos propiedades (el contenido en sí mismo y sus atributos).
La capacidad de programar usando HTML es esencial para cualquier profesional de internet. Adquirir esta habilidad debería ser el punto de partida para cualquiera que esté aprendiendo cómo crear contenido para la web.
Como dijimos antes, HTML sirve para crear la estructura del sitio web, y para que la página tenga un estilo completo como tienen las páginas web populares, debemos de emplear otros lenguajes de programación junto al HTML para darle estilo y funcionamiento a la página.
HTML: Estructura.
CSS: Presentación.
JavaScript: Comportamiento.
PHP o similar: Back-end.
CMS: gestión de contenidos.
Un lenguaje de marcado o lenguaje de marcas es una forma de codificar un documento que, junto con el texto, incorpora etiquetas o marcas que contienen información adicional acerca de la estructura del texto o su presentación. El lenguaje de marcas más extendido es el HTML.
Los lenguajes de marcado suelen confundirse con lenguajes de programación. Sin embargo, no son lo mismo, ya que el lenguaje de marcado no tiene funciones aritméticas o variables, como poseen los lenguajes de programación.
CSS (siglas en inglés de Cascading Style Sheets), en español "Hojas de estilo en cascada", es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado.
JavaScript (comúnmente JS) es un lenguaje de programación interpretado. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico.
JavaScript es un lenguaje de programación, al igual que PHP, aunque tiene diferencias importantes con éste, JavaScript se utiliza principalmente del lado del cliente (es decir, se ejecuta en nuestro ordenador, no en el servidor) permitiendo crear efectos atractivos y dinámicos en las páginas web.
XML, siglas en inglés de eXtensible Markup Language, traducido como "Lenguaje de Marcado Extensible" o "Lenguaje de Marcas Extensible", es un meta-lenguaje que permite definir lenguajes de marcas desarrollado por el World Wide Web Consortium (W3C) utilizado para almacenar datos en forma legible.
DHTML o HTML Dinámico (del inglés Dynamic HTML) designa el conjunto de técnicas que permiten crear sitios web interactivos utilizando una combinación de: lenguaje de marcado estático (como HTML) lenguaje interpretado en el lado del cliente (como JavaScript) lenguaje de hojas de estilo en cascada (CSS) la jerarquía de objetos de un Document Object Model (DOM).
XHTML (eXtensible HyperText Markup Language), es básicamente HTML expresado como XML válido. Es más estricto a nivel técnico, pero esto permite que posteriormente sea más fácil al hacer cambios o buscar errores entre otros.
Estructura web actual
Lenguajes utilizados junto a HTML
Otros tipos de lenguaje de marcado
Estructura básica HTML
La estructura de un documento HTML tiene etiquetas de apertura y de cierre. Estas etiquetas están entre las etiquetas <html> (apertura) y </html> (cierre).
Un dato curioso es que en un documento HTML, todo se encuentra dentro de la etiqueta <html> que vimos antes. De igual manera, para cerrar una etiqueta se utiliza el slash (/) delante del nombre de la misma.
Dentro de estas etiquetas se encuentran todas las demás etiquetas que ayudan a que darle la estructura a la página.
Algunas de ellas son como:
<head>
Justo después de la etiqueta HTML de apertura encontraras la cabecera del documento. La cabecera (head) de un archivo HTML contiene todos los elementos no visuales que ayudan a que la pagina funcione correctamente.
<html>
<head> … </head>
</html>
<title>
Para colocar en la pestaña un titulo que describa la pagina web, añade un elemento <title> en tu sección head.
<html>
<head>
<title> Mi primera página web :P </title>
</head>
</html>
Luego de colocar eso en la etiqueta title, el nombre de la pestaña tendrá el texto que pusimos.
<body>
Esta etiqueta sigue luego de la etiqueta head. Todos los elementos visuales-estructurales están contenidos en esta etiqueta, es decir, esta etiqueta define el contenido principal del documento HTML.
Encabezados, párrafos, listas, citas, imágenes e hipervínculos son algunos de los elementos que puede contener la etiqueta body.
<html>
<head> … </head>
<body>
...
</body>
</html>
Archivos HTML
Unos conceptos muy importante y que debemos de tener en cuenta son los archivos HTML. Los archivos HTML son archivos de texto, por lo que puedes usar cualquier editor de texto para crear tu primera pagina Web, incluso puedes usar el bloc de notas.
Para cambiar un archivo .txt (archivo de texto) hacia un archivo .html, solo basta con cambiarle la extensión ".txt" que aparece en el archivo y ponerle ".html".
Elementos básicos
Un archivo HTML puede tener un sin fin de elementos para darle la estructura deseada a la página web. Pero en esta sección mencionaremos los elementos básicos que puede tener un archivo HTML, que de hecho lo vemos en casi todas las páginas web de la actualidad.
Párrafos
Para crear un párrafo, simplemente escribe dentro del elemento <p>, entre las etiquetas de apertura y cierre. Los exploradores web automáticamente agregan una línea antes y después del párrafo, así que no tienes que preocuparte por ello.
<html>
<head>
<title> Mi primera pagina web :P </title>
</head>
<body>
<p> Hola, soy un parrafo </p>
<p> Hola, soy el dopplenganger del parrafo 1 </p>
</body>
</html>
Saltos de línea
En Word, un salto de línea es terminar una linea y comenzar en otra, y es lo mismo en HTML. Los saltos de línea se usan aquí para darle formato y organización a las lineas de un párrafo.
Un dato curioso es que en HTML tienes que indicar donde quieres que se haga el salto de línea, de lo contrario el texto seguirá hacia la derecha sin limite alguno.
Usa la etiqueta <br/> para agregar un salto de línea sin empezar un nuevo párrafo. Tanto <br/> como <br>, son equivalentes y pueden ser utilizados en HTML, pero en XHTML no soporta <br>.
NOTA: el elemento <br/> es un elemento HTML vacío. No tiene etiqueta de cierre.
<html>
<head>
<title> Mi primera pagina web :P </title>
</head>
<body>
<p> Hola, soy un <br> salto de linea </p>
</body>
</html>
Elementos de Formato
En HTML, hay una lista de elementos que especifican el estilo de texto. Los elementos de formato fueron diseñados para mostrar tipos especiales de texto:
Dato curioso: los exploradores muestran <strong> como <b>, y <em> como <i>. Pero los significados de estas difieren, ya que <b> e <i> definen texto en negrita y cursiva, mientras <strong> y <em> indican que el texto es “importante”.
Encabezados
HTML incluye seis niveles de encabezados, los cuales están clasificados de acuerdo a su importancia. Estos son <h1>, <h2>, <h3>, <h4>, <h5> y <h6>.
<html>
<head>
<title> Mi primera pagina web :P </title>
</head>
<body>
<h1> Hola, soy el encabezado h1 </h1>
<h2> Hola, soy el encabezado h2 </h2>
<h3> Hola, soy el encabezado h3 </h3>
<h4> Hola, soy el encabezado h4 </h4>
<h5> Hola, soy el encabezado h5 </h5>
<h6> Hola, soy el encabezado h6 </h6>
</body>
</html>
No es recomendable que uses encabezados sólo para convertir el texto en negrita, ya que los motores de búsqueda usan los encabezados para indexar la estructura de la página web y el contenido.
Es recomendable utilizar el h1 o el h2 para el título del tema y el h3 para el subtítulo dentro de las páginas web.
Líneas horizontales
Para crear una línea horizontal, usa la etiqueta <hr/>. NOTA: en HTML5, la etiqueta <hr> define un cambio de tema.
Comentarios
Los comentarios ayudan a documentar el código HTML para agregar descripciones, recordatorios y otras notas. Es importante saber que no son desplegados por los exploradores web.
<html>
<head>
<title> Mi primera pagina web :P </title>
</head>
<body>
<p> Hola, soy un parrafo </p>
<p> Hola, soy el dopplenganger del parrafo 1 </p>
<!-- recuerda, un dopplenganger es el doble de una persona viva -->
</body>
</html>
Hay un signo de exclamación (!) en la etiqueta de apertura pero no en la de cierre.
Tener comentarios en el código ayuda a mantener la idea de lo que se ha hecho y para que otros puedan entender tu trabajo.
Los atributos proveen información adicional sobre un elemento o etiqueta, a la vez que lo modifican. La mayoría de atributos tienen un valor; el valor modifica el atributo.
Dimensiones
Por ejemplo podemos modificar una línea horizontal para que tenga un ancho de 50 pixeles. Esto se puede hacer usando el atributo "width" que se traduce al español como "ancho". Y como dice su nombre, modificaremos el ancho de nuestra línea.
<html>
<head>
<title> Mi primera pagina web :P </title>
</head>
<body>
<hr width="50px" />
</body>
</html>
Pero si queremos, en el width podemos poner porcentaje en vez de pixeles.
<hr width="50%" />
Align
El atributo align es usado para especificar como alinear el texto. Dentro de los valores de la etiqueta, se pone "right" para alinearlo a la derecha, "center" para alinearlo al centro, y "left" para alinearlo a la izquierda, aunque todos los elementos que insertamos en un HTML vienen por defecto alineados a la izquierda. En el siguiente ejemplo tenemos un párrafo que está alineado al centro, y una línea que está alineada a la derecha.
<html>
<head>
<title> Mi primera pagina web :P </title>
</head>
<body>
<p align="center"> Hola, soy un parrafo <br>
<hr width="10%" align="right">
Hola, soy el dopplenganger del parrafo 1
</p>
</body>
</html>
Ojo, el atributo de alineación <p> no está soportado en HTML.
¿Qué sucede si intentamos aplicar atributos contradictorios dentro del mismo elemento?
La contradicción está en que lo creado dentro de <p> y </p> debería de estar alineado al centro, pero la etiqueta <hr> crea su propia regla alineando a la izquierda.
Atributos básicos
Multimedia
Todos vemos en blogs y páginas de nuestros videojuegos favoritos, elementos multimedia que hace que la pagina tenga un toque más creativo e interesante. Y ahora aprenderemos a cómo insertar elementos multimedia en HTML.
Ya cuando termines de leer esta página, podrás completar el desafío de Videolandia en la página de inicio y en la sección "Desafíos" para ponerte a prueba!
Imágenes
La etiqueta <img> es usada para insertar una imagen. Contiene solo atributos y no tiene una etiqueta de cierre. La URL de la imagen (dirección) puede ser definida usando el atributo "src".
La sintaxis HTML de una imagen se ve así:
<img src= “image.jpg” />
En caso de que la imagen no pueda ser mostrada, el atributo "alt" especifica un texto alternativo que describe la imagen en palabras. El atributo "alt" es requerido.
De igual manera, para que el explorador web pueda desplegar la imagen, necesitamos colocar dentro de las comillas la ubicación de la imagen como valor del atributo "src". Por ejemplo, tenemos una foto llamada “computadora.png” en la misma carpeta que el archivo HTML, tu código debería verse así:
<html>
<head>
<title> Mi primera pagina web :P </title>
</head>
<body>
<hr width="50px" />
</body>
</html>
Pero si queremos, en el width podemos poner porcentaje en vez de pixeles.
<hr width="50%" />
Align
El atributo align es usado para especificar como alinear el texto. Dentro de los valores de la etiqueta, se pone "right" para alinearlo a la derecha, "center" para alinearlo al centro, y "left" para alinearlo a la izquierda, aunque todos los elementos que insertamos en un HTML vienen por defecto alineados a la izquierda. En el siguiente ejemplo tenemos un párrafo que está alineado al centro, y una línea que está alineada a la derecha.
<html>
<head>
<title> Mi primera pagina web :P </title>
</head>
<body>
<p align="center"> Hola, soy un parrafo <br>
<hr width="10%" align="right">
Hola, soy el dopplenganger del parrafo 1
</p>
</body>
</html>
Ojo, el atributo de alineación <p> no está soportado en HTML.
Al insertar una imagen en el archivo, se verá en el formato original de la imagen, puede que se vea o demasiado pequeño o demasiado grande, y para ello podemos modificar el tamaño de la imagen.
Para definir el tamaño de una imagen, usa los atributos width y height (ancho y alto).
Algunos puntos que tienes que tener en cuenta son que la carga de imágenes toma tiempo. Usar imágenes grandes puede volver lenta tu pagina (úsalas con precaución).
Bordes de la imagen
Por defecto, una imagen no tiene bordes. Para crear un alrededor de la imagen, utiliza el atributo “border” dentro de la etiqueta “img”.
img src="bob-esponjaa.jpg" alt="Bob Esponja y Gary"
border="10px" height="400px" width="600px">
Imagen con subtitulo
Para agregar una descripción de la imagen debajo de la misma utiliza la etiqueta <figcaption>.
<img src="bob-esponjaa.jpg" alt="Bob Esponja y Gary"
border="10px" height="400px" width="600px">
<figcaption> Bob con su mascota Gary </figcaption>
Hipervínculos
Los hipervínculos también son una parte fundamental de cualquier página web. Puedes agregar hipervínculos tanto a textos como a imágenes que le permitirán al usuario hacer click sobre ellos y para ser redirigidos a otro archivo o página web.
En HTML los hipervínculos son definidos usando la etiqueta <a>.
Usa el atributo href para definir la dirección de destino del hipervínculo.
<a href=""></a>
NOTA: para vincular una imagen a otro documento, simplemente introduce la etiqueta <img> entre las etiquetas <a>.
Pongamos un ejemplo de un hipervínculo que nos re-direcciona a la página principal de Wix:
<a href="https://www.wix.com/">Link del Inicio de Wix.</a>
Una vez que el código ha sido guardado, “Link del Inicio de Wix” será mostrado como un hipervínculo que te podrá re-direccionar a dicha página. Ten en cuenta que debes agregar el link completo de la página, incluyendo “https://”.
Con el atributo "target", se específica donde abrir el documento vinculado. Este puede tener uno de los siguientes valores:
blank: abre el documento en una nueva ventana o pestaña.
self: abre el documento en la misma ventana/pestaña donde fue seleccionada.
parent: abre el documento en el marco padre.
top: abre el documento en el cuerpo completo de la ventana.
framename: abre el documento en el marco nombrado.
Dato curioso: la sintaxis correcta seria agregar _ (underscore) antes del target, ya que si no usas el target correcto, siempre abrirá en una nueva ventana/pestaña.
Audios
Antes de HTML5, no había un estándar para reproducir archivos de audio en una página web. El elemento HTML5 <audio> especifica un estándar para agregar audio en una página. Hay dos maneras diferentes de especificar la url de origen del audio. El primero usa el atributo source:
<audio src="arrowversetheme.mp3" controls>
este temazo no esta soportado por tu navegador, lo sentimos :C
</audio>
Siendo la oración del medio un texto alternativo que aparecerá si el audio no es soportado por el navegador del usuario.
La segunda forma usa el elemento <source> dentro del elemento <audio>:
<audio controls>
<source src="arrowversetheme.mp3" type="audio/mp3">
<source src="arrowversetheme.mp3" type="audio/ogg">
</audio>
NOTA: múltiples elementos <source> pueden ser enlazados a diferentes archivos de audio. El explorador usará el primer formato reconocido.
Formato de audio soportados por navegadores.
-
Internet Explorer 9.0 o superior soportan archivos MP3, WebM, M4A y AAC
-
Chrome 6.0 o superior soportan archivos Ogg Vorbis, MP3 y WAV
-
Firefox soportan archivos Ogg Vorbis, WebM y WAV
-
Safari 5.0 o superior soportan archivos MP3, AAC y WAV
-
Ópera 10.0 o superior soportan archivos Ogg Vorbis y WAV
Atributos
<audio>
El elemento <audio> crea un reproductor de audio dentro del explorador. Mientras que el atributo control.
<controls>
Especifica que controles de audio deberían ser desplegados (como el botón de play, pause, etc..)
<audio controls>
<loop>
Este atributo es usado para que el audio se vuelva a reproducir cada vez que finaliza.
<audio controls autoplay loop>
NOTA: Actualmente hay tres formatos de archivos soportados para el elemento <audio>: MP3, WAV y OGG.
Videos
El elemento video es similar al elemento audio. Se puede especificar la URL de origen del video usando un atributo en un elemento de video, o usando elementos source dentro del elemento video:
<video controls>
<source src="temporada6_intro.mp4" type="video/mp4">
<source src="temporada6_intro.mov" type="video/mov">
Este video no es soportado por tu explorador :C
</video>
NOTA: otro aspecto que los elementos de audio y video tienen en común es que los exploradores no soportan los mismos tipos de archivos. Si el explorador no soporta el primer archivo, seguirá con el segundo.
Formato de video soportado por navegadores
-
INTERNET EXPLORER: MP4;
-
GOOGLE CHROME: MP4, WEBM;
-
FIREFOX: MP4, WEBM; nota: antes de Firefox 21, mp4 no era soportado.
-
SAFARI: MP4;
-
OPERA: WEBM;
Atributos
Otro aspecto compartido por los elementos audio y video es que cada uno tiene atributos: controls, autoplay y loop.
<autoplay>
Reproducción automática del video.
<loop>
Video empieza nuevamente tras haber terminado.
<controls>
especifica los controles a ser desplegados.
<controlsList> = "no download"
deshabilita la opción de descarga del video.
<height> y <width>
valores en px que definen el alto y el ancho del video.
<muted>
video empieza en mute.
<preload>
carga la data del video por adelantado.
<poster>
imagen de poster para el video.
Elemento <progress>
El elemento <progress> (progreso) provee la habilidad de crear barras de progreso en la web. Este elemento puede ser usado con encabezados, párrafos, o en cualquier otra parte del body.
Atributos del elemento <progress>
<value>
especifica cuanto de la tarea ha sido completado.
<max>
especifica cuando trabajo la tarea requiere en total.
NOTA: usa la etiqueta <progress> en conjunto con JavaScript para mostrar dinámicamente el progreso de una tarea.
Formas SVG
SVG significa gráficos vectoriales escalables (Scalable Vectorial Graphics), y es usado para dibujar formas con estilo de marcado HTML.
SVG ofrece varios métodos para dibujar trazos, rectángulos, círculos, textos e imágenes.
NOTA: ya que SVG no está basado en pixeles, este puede ser magnificado infinitamente sin que se pierda la calidad.
Dibujando un círculo
Para dibujar formas con SVG, primero necesitamos crear una etiqueta de elemento SVG con dos atributos: ancho y largo.
<svg width="2000 height="2000"> </svg>
Para crear un círculo, agregamos una etiqueta <circle>
<svg width="2000 height="2000">
<circle cx="80" cy="80" r="50" fill="green" />
</svg>
Cada atributo tiene su característica, cx mueve el centro del círculo horizontalmente, cy mueve el centro del círculo verticalmente, r define el radio del círculo, fill asigna un color a la figura y stroke agrega un marco.
Dibujando otros elementos
<rect>
Define un rectángulo.
<svg width="2000 height="2000">
<rect width="300" heght="100" x="20" y="20" fill="green" />
</svg>
<line>
Define un elemento de línea.
<svg width="2000 height="2000">
<line x1="10" y1="10" x2="200" y2="100"
style="stroke: #00000000; stroke-linecap: round;
stroke-width: 20" />
</svg>
NOTA: (x1, y1) define las coordenadas de inicio de la línea, y (x2, y2) define las coordenadas finales.
<ellipse>
El elemento <ellipse> es similar al elemento <circle>, pero con una excepción:
Puedes modificar independientemente los ejes horizontales y verticales de su radio usando los atributos rx y ry.
<svg width="2000 height="2000">
<ellipse cx="200" cy="100" rx="150" ry="70"
style="fill: green" />
</svg>
Animaciones de forma
Las animaciones SVG pueden ser creadas utilizando el elemento <animate>.
El siguiente ejemplo crea un rectángulo que cambiara de posición en 3 segundos y luego repetirá la animación dos veces:
NOTA: attributeName especifica cual atributo será afectado por la animación (plano cartesiano), from especifica el valor de comienzo el atributo, to especifica valor final del atributo, dur es tiempo en que corre la animación, fill especifica si el valor del atributo debe o no retornar a su valor inicial cuando la animación termina (Valores: “remove” recetea el valor; “freeze” conserva el valor), repeatCount especifica cuantas veces se repite la animación; (utiliza “undefined” para repetir la animación indefinidamente), y begin="click" y end="click", que empieza la animación cuando se hace “click” sobre esta o la finaliza respectivamente. (también se puede usar “mouseover” en lugar de click para iniciar y finalizar la animación cuando el cursor pasa por arriba de la figura/animación).
Un dato curioso es que puedes también hacer que una figura cambie de color con la siguiente animación:
Listas y tablas
En un documento HTML podemos crear listas y tablas para organizar las informaciones para brindarle más estética y organización a la página web.
Listas
Las listas son una sucesión de datos que se crean para nombrar datos se forma ordenada. Existen dos tipos de listas, ordenadas y no ordenadas.
Ordenadas
Una lista ordenada empieza con la etiqueta <ol> y cada ítem es definido por la etiqueta <il>. Estos están marcados automáticamente con números.
Otra manera de utilizar las listas ordenadas si quieres utilizar otro tipo de conteo es creando un tipo a la lista:
<ol type="a"> para contar: a,b,c…
<ol type="A"> para contar: A,B,C…
<ol type="i"> para contar números romanos en minúsculas.
<ol type="I"> para contar números romanos en mayúsculas.
También puedes comenzar desde un número diferente de 1 utilizando:
<ol type start="3"> empezará a contar desde el número 3.
NOTA: Esta forma también funciona con letras.
No ordenadas
Una lista sin ordenar comienza con la etiqueta <ul>. Los ítem de esta lista estarán marcados con viñetas. Estas utilizan la misma estructura que las listas ordenadas, es decir, usan las mismas etiquetas <li> para separar los datos.
Tablas
Las tablas son definidas utilizando la etiqueta <table>. Las tablas son divididas en filas utilizando la etiqueta <tr> (Table Row). Las filas de la tabla son divididas en columnas (datos de la tabla) utilizando la etiqueta <td> (Table Data). Así mismo, se crean encabezados para cada columna (en negrita) utilizando la etiqueta <th> (Table Header).
Las etiquetas de datos de las tablas <td> actúan como contenedores de datos dentro de la tabla. Estas pueden contener todo tipo de elementos HTML como texto, imágenes, listas, otras tablas, y demás.
Atributos
Atributo Border
Un borde puede ser agregado utilizando el atributo border dentro de la etiqueta table:
<table border="2">
Atributo Bordercolor
Un bordercolor puede cambiar el color del borde, utilizando la siguiente sintaxis:
<table bordercolor="blue">
Dato curioso: Podemos poner tanto el nombre en inglés del color que queremos usar tanto el código de color del mismo.
Atributo Bgcolor
Para poner un color de fondo dentro de una celda de la tabla se utiliza el atributo bgcolor. NOTA: en el caso de dar estilo a los elementos, CSS es más efectivo que HTML.
Atributo Colspan
La celda de una tabla puede expandirse entre dos o más columnas con el atributo "colspan".
Atributo Align
Pasos para crear una tabla
-
Abre un programa de edición de texto. Normalmente se usa el Bloc de notas en Windows y TextEdit en Mac.
-
Escribe <table> y presiona ↵ Enter. La etiqueta <table> indica el inicio de una tabla. Al presionar ↵ Enter tu editor de texto iniciará una nueva línea.
-
Escribe <tr> y presiona ↵ Enter. Este comando sirve para crear un elemento específico de la tabla.
-
Agrégale una columna a la tabla. Escribe <th> para crear una columna, luego escribe la etiqueta de la columna, luego </th> para cerrarla y finalmente ↵ Enter.
-
Agrega más columnas. Este paso varía dependiendo de cuántas columnas quieras que tenga la tabla. Una vez que hayas agregado todas las columnas que quieras, continúa con el próximo paso.
-
Escribe </tr> y presiona ↵ Enter. Este comando sirve para indicar que se han creado todas las columnas y para cerrar esa sección de código de la tabla.
-
Escribe <tr> otra vez y presiona ↵ Enter. Ahora le agregarás las filas a la tabla.
-
Agrégale una celda a la tabla. Escribe <td> para agregar información debajo de la primera columna, escribe la información, agrega </td> para cerrar la celda y presiona ↵ Enter. Por ejemplo, para crear una celda con el número "23", deberás escribir <td>23</td> en tu editor de texto.
-
Agrégale más celdas a la tabla. La cantidad de celdas de la fila deberá estar relacionada con la cantidad de columnas. Por ejemplo, si tienes tres columnas, deberás tener tres celdas en cada fila. Una vez que hayas creado toda una fila, podrás continuar.
-
Cierra la fila actual. Escribe </tr> y presiona ↵ Enter para cerrar la fila. Ahora puedes abrir una nueva fila escribiendo <tr> y presionando ↵ Enter. Luego agrega nuevas celdas individuales y cierra la fila.
-
Revisa la tabla.
-
Guarda tu trabajo. Presiona Ctrl+S (Windows) o Comando+S (Mac) para guardar el documento, escribe un nombre y haz clic en Guardar para confirmar.
Para ver si aprendiste, completa el desafío "Sin Limites" en la página de Inicio o en la página de "Desafíos"! Ponte a prueba!
Videos relacinados
Para cambiar la posición de una tabla, usa el atributo align dentro de la etiqueta <table>:
<table align="center">
Caracteres especiales y Elementos Inline y Block
Caracteres especiales
Al escribir texto para mostrar en el navegador los acentos y las “ñ” no aparecen correctamente, en su lugar aparecen caracteres extraños.
Este problema surge porque no hemos definido el juego de caracteres que la pagina web va a manejar, aunque normalmente en un servidor está definido por defecto uno que nos permitirá que la pagina se vea correctamente, pero tampoco está de más incluir la línea de código, por si acaso.
Solo basta con tipear el siguiente código en el apartado <head>:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Con esto hemos añadido una “meta” para definir el juego de caracteres que queremos usar.
De no hacer esto, la otra forma es de ir agregando uno a uno los códigos especiales dentro de la pagina, lo cual, si la misma es muy extensa, sería muy complicado y largo el proceso.
Los códigos especiales son:
á = á
é = é
í = í
ó = ó
ú = ú
ñ = ñ
Elementos Inline y Block
En HTML, la mayoría de elementos son definidos domo elementos a nivel de bloque (block) o en línea (inline).
Los elementos a nivel de bloque empiezan desde una nueva línea.
Ejemplo: <h1>, <ol>, <p>, <table>, etc..
Los elementos en línea (inline) son normalmente desplegados son los saltos de línea.
Ejemplo: <b>, <em>, <img>, etc..
Elemento <div>
El elemento <div> es un elemento a nivel de bloque que es a menudo utilizado como contenedor para otros elementos HTML. Cuando se utiliza en conjunto con CSS, el elemento <div> puede ser utilizado para darle estilo a bloques de contenido:
Elemento <spam>
El elemento <span> es un elemento de línea que es a menudo utilizado como contenedor de algún texto.
Cuando se utiliza en conjunto con CSS puede ser utilizado para darle estilo a partes del texto.
NOTA: Puedes insertar elementos en línea dentro de los elementos de bloque. Por ejemplo, puede tener múltiples elementos <span> dentro de un elemento <div>.
NOTA: los elementos en línea no pueden contener ningún elemento de nivel de bloque.
Formularios
Los formularios HTML son utilizados para recolectar información de los usuarios. Los formularios son definidos utilizando el elemento <form>, con sus etiquetas de apertura y cierre.
Atributo action
Utiliza el atributo "action" para apuntar a una página web que cargará después de que el usuario envíe el formulario.
NOTA: usualmente los formularios son enviados a una página web en un servidor. Un ejemplo de esto sería: el usuario llena una encuesta (que es un tipo de formulario) y esta se envía a una base de datos para ser almacenada para su posterior uso.
Atributo method
El atributo method especifica el método HTTP (GET o POST) a ser usado cuando los formularios son enviados.
Cuando usamos GET, los datos del formulario serán visibles en la dirección de la página. Utiliza POST si el formulario está actualizando datos, o incluye información sensible (contraseñas).
NOTA: POST ofrece mejor seguridad porque los datos enviados no son visibles en la dirección de la página.
Utiliza el atributo "action" para apuntar a una página web que cargará después de que el usuario envíe el formulario.
Elemento <input>
Para capturar los datos de entrada del usuario, necesitamos los elementos del formulario correspondientes, como por ejemplo, los campos de texto.
El elemento <input> tiene muchas variaciones dependiendo del tipo de atributo. Puede ser: texto, contraseña, URL, envío, etc..
<html>
<head>
<title> Mi primera pagina web :P </title>
</head>
<body>
<h1 align="center"> Hola, soy un encabezado h1 <br> </h1>
<form>
<input type="text" name="Usuario" /> <br>
<input type="password" name="Contraseña">
</form>
</body>
</html>
El atributo name especifica un nombre para un formulario.
NOTA: la etiqueta <input> no tiene etiqueta de cierre.
Atributo <label>
Utiliza el atributo <label> para crear una etiqueta antes de introducir datos con <input>.
<form>
<label> Nombre de Usuario </label>
<input type="text" name="Usuario" /> <br>
<label> Contraseña </label>
<input type="password" name="Contraseña" />
</form>
Marcas de agua
Para agregar marcas de agua dentro de los campos de escritura se utiliza el atributo “placeholder”:
<form>
<input type="text" name="Usuario" placeholder="Escribe tu nombre de usuario aquí" /> <br>
<input type="password" name="Contraseña" placeholder="Escribe tu contraseña aquí" />
</form>
Elementos de los formularios
Radio
Si cambiamos el tipo input a radio, permitiremos al usuario seleccionar solo una de un número de opciones desplegadas. Un ejemplo puede ser el apartado donde elegimos nuestro género cuando nos registramos en una página, que solo nos deja seleccionar una de esas opciones.
De igual manera podemos aplicar ese ejemplo en HTML.
<form>
<input type="radio" name="gender" value="male" /> Masculino <br>
<input type="radio" name="gender" value="female" /> Femenino <br>
<input type="radio" name="gender" value="non-binary" /> No binario <br>
</form>
Checkbox
El tipo “checkbox” permite al usuario seleccionar más de una opción. Se podría decir que permite hacer una selección múltiple.
<form>
<input type="checkbox" name="videogame" value="fortnite" /> Fortnite<br>
<input type="checkbox" name="videogame" value="mincraft" /> Minecraft <br>
<input type="checkbox" name="videogame" value="among us /> Among us <br>
</form>
Submit
El tipo “submit” envía un formulario a la dirección especificada en su atributo action.
El Mundo del diseño con HTML5
Cuando se están escribiendo documentos HTML5, una de las primeras nuevas características que se nota es la declaración del DOCTYPE al inicio del documento:
La codificación de caracteres también ha sido simplificada:
La codificación de caracteres es por defecto en HTML5 es UTF-8.
UTF-8 se llama Unicode. Antes se utilizaba ASCII, pero este formato no reconoce caracteres especiales como el árabe, japonés, chino, ruso, letras en español, emojis, etc., por lo que ahora se utiliza Unicode, que si los reconoce.
Notas de las novedades de HTML5
Formularios
La especificación de Formularios Web 2.0 permite la creación de formularios más potentes y con mejor experiencia para los usuarios.
Selectores de fecha, de color y controles de paso numéricos han sido agregados.
Los tipos de campo de entrada ahora incluyen email, búsqueda y URL.
Los métodos de formularios PUT y DELETE son ahora soportados.
API integrada (Interfaces de Programación de Aplicaciones)
Arrastrar y soltar.
Audio y video.
Aplicaciones web sin conexión.
Historial.
Almacenamiento local.
Geolocalización.
Mensajería Web.
¿Qué es un API?
Las API es un conjunto de comandos, funciones y protocolos informáticos que permiten a los desarrolladores crear programas específicos para ciertos sistemas operativos.
Las API simplifican en gran medida el trabajo de un creador de programas, ya que no tiene que “escribir” códigos desde cero, ya que permiten usar funciones predefinidas para interactuar con el sistema operativo o con otro programa.
Todos los videos
Todos los videos
Cómo Ensamblar una PC Barata paso a paso - Guía BIEN EXPLICADA
ARMANDO EL PC MÁS BESTIA!!!!!!! Piezas, componentes y el terrible precio 🥵
Building an All MSI Gaming PC (High-end) - 360Hz Monitor!
Modelos de contenido
Lista de modelos de contenido
En HTML, los elementos pertenecían típicamente al modelo de contenido de bloque o contenido en línea. HTML5 introduce siete modelos de contenido principales.
Metadata.
Embedded (incrustado).
Interactive.
Heading (encabezado).
Phrasing (expresión).
Flow (flujo).
Sectioning (seccionamiento).
NOTA: los modelos de contenido HTML5 son diseñados para hacer la estructura de marcado mas útil para el explorador y el diseñador web.
Algunos modelos de contenido
Metadata, contenido que define la presentación o comportamiento del resto del contenido. Estos elementos son encontrados en el head (la cabecera) del documento.
Elementos: <base>, <link>, <meta>, <noscript>, <script>, <style>, <title>.
Embedded, contenido que importa otros recursos al document.
Elementos: <audio>, <video>, <canvas>, <iframe>, <img>, <math>, <object>, <svg>.
Interactive, contenido específicamente destinado para la interacción del usuario.
Elementos: <a>, <audio>, <video>, <button>, <details>, <embed>, <iframe>, <img>, <input>, <label>, <object>, <select>, <textarea>.
Heading, define un encabezado de sección.
Elementos: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>.
Phrasing, este modelo tiene un número de elementos en línea en común con HTML4.
Elementos: <img>, <span>, <strong>, <label>, <br>, <small>, <sub> y más.
NOTA: un mismo elemento puede pertenecer a más de un modelo de contenido.
Estructura básica de una página HTML5
Puede ser que no necesites algunos de estos elementos, dependiendo de la estructura de tu página, algunos elementos serán más importantes que otros.
Elemento <header>
En HTML4, los encabezados se definían:
<div id= “header”>
En HTML5, una simple etiqueta <header> es suficiente.
Este elemento es utilizado dentro de la etiqueta <body>.
<body>
<header>
<h1> Primer encabezado :P </h1>
<h3> Encabezado importante </h3>
</header>
</body>
NOTA: Ten en cuenta que la etiqueta <header> es completamente distinta a la etiqueta <head>.
Elemento <footer>
Generalmente, cuando hablamos del footer, nos referimos a una sección localizada en la parte inferior de la página web.
<footer> … </footer>
Usualmente, dentro de esta etiqueta se provee con la siguiente información:
-
¡Información de contacto.
-
¡Política de privacidad.
-
¡Iconos de redes sociales.
-
¡Términos de servicios.
-
¡Información de derechos de autor.
-
¡Mapa del sitio y documentos relacionados.
Elemento <nav>
Esta etiqueta representa una sección de una página que conecta a otras páginas o ciertas secciones dentro de la página. Esto sería una sección con hipervínculos de navegación.
<body>
<nav>
<ul>
<li><a href="#"> Inicio </a></li>
<li><a href="#"> Sobre nosotros </a></li>
<ul>
</nav>
</body>
NOTA: no todos los hipervínculos en un documento deberían estar dentro de un elemento <nav>. Este elemento está hecho para bloques grandes de hipervínculos. Típicamente, el elemento <footer> tiene una lista de hipervínculos que no necesitan estar dentro del elemento <nav>.
Elementos Article, Section y Aside
Elemento Article
El elemento <article> es una pieza autónoma, de contenido independiente que puede ser usada y distribuida separadamente del resto de la página o sitio.
Este elemento podría ser:
-
Un post de un foro
-
Una revista o un artículo de revista
-
Una entrada de blog
-
Un comentario
-
Un Widget interactivo o gadget
-
O cualquier otra pieza de contenido.
El elemento <article> reemplaza al elemento <div> que fue ampliamente usado en HTML4, junto con id o una clase.
<article>
<h1> Esto es el encabezado del articulo </h1>
<p> Contenidos del elemento articulo </p>
</article>
NOTA: cuando un elemento <article> es anidado, el elemento interior representa un artículo relacionado al elemento exterior.
Ejemplo: comentarios de un post dentro de un blog.
Elemento <section>
<section> es un contenedor lógico de la pagina web o artículo. Las secciones pueden ser usadas para dividir contenido dentro de un artículo.
Por ejemplo, una página principal puede tener una sección para introducir a la compañía, otra para ítems de noticias, y otra para la información de contacto.
Cada <section> debería ser identificada, típicamente incluyendo un encabezado como hijo de un elemento <section>.
<article>
<h1> Bienvenidos :P </h1>
<section>
<h1> Este es un encabezado </h1>
<p> Titulo o imagen </p>
</section>
</article>
NOTA: en HTML5 la semántica es muy importante, ya que puedes dividir tu página en partes lógicas. Para esto se usan <article> y <section>. Si te fijas en las páginas web, estas contienen: cabecera, navegación, contenido y pie de página.
Tienes etiquetas para header, nav y footer, ¿pero como divides el resto de la pagina? Si usas un HTML antiguo, usaras la etiqueta “div” para todo el contenido, lo cual será un total desastre sin lógica. Para remediar esto está: <section> para las partes y <article> para los contenidos.
También de esta manera, si sabes que es que, puedes utilizar CSS de manera mas sencilla otorgando colores a los valores.
Ejemplo:
-
article {background-color: lightblue;}
-
section { background-color: green;}
Elemento <aside>
El elemento <aside> es contenido secundario que podría ser considerado separado pero indirectamente relacionado al contenido principal.
Este tipo de contenido es a veces representado en barras laterales. Cuando una etiqueta <aside> es usada dentro de una etiqueta <article>, el elemento de <aside> debería estar específicamente relacionado a ese artículo.
NOTA: cuando una etiqueta <aside> es utilizada fuera de una etiqueta <article>, su contenido debería estar relacionado al contenido que está a su alrededor.
NOTA: aunque la etiqueta <aside> es similar a la etiqueta <p>, estos son diferentes para los motores de búsquedas, ya que estos deben ser capaces de separar el contenido principal de los menos importantes.