Programación web HTML

PROGRAMADOR WEB
INICIAL: FRONT END

DEVELOPER
HTML
Temario:
● ¿Qué es?
● Estructura básica de un documento.
● Etiquetas semánticas.
● Etiquetas multimedia.
● Formularios.
¿Qué es?
HTML es un lenguajes de marcado o marcas como su nombre indica: HTML significa
Hypertext Markup Language (Lenguaje de marcas e hipertexto).
Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento
está diferenciada, declarada y determinada por etiquetas específicas.
Estas etiquetas suelen tener etiquetas de inicio y cierre para los diferentes formatos que se
quieren aplicar. De esta forma se indica cuando tiene que empezar y finalizar el formato.
<etiqueta> </etiqueta>
Ejemplo
<p> Esta etiqueta es para indicar que este texto es un párrafo</p>
<title>Esta es la etiqueta donde colocaremos el título de la página</title>
Las partes principales del elemento son:
● La etiqueta de apertura: consiste en el nombre del elemento (en este caso, p),
encerrado por paréntesis angulares (< >) de apertura y cierre. Establece dónde
comienza o empieza a tener efecto el elemento —en este caso, dónde es el comienzo
del párrafo.
● La etiqueta de cierre: es igual que la etiqueta de apertura, excepto que incluye una
barra de cierre (/) antes del nombre de la etiqueta. Establece dónde termina el
elemento —en este caso dónde termina el párrafo—.
● El contenido: este es el contenido del elemento, que en este caso es sólo texto.
● El elemento: la etiqueta de apertura, más la etiqueta de cierre, más el contenido
equivale al elemento.
Estructura básica de un documento
La estructura para empezar a trabajar es la siguiente:
<!DOCTYPE html> Definición del tipo de documento.
<html> </html> Especifica el principio y fin del documento HTML, entre las etiquetas de
principio y fin del documento se ubican las etiquetas correspondientes al encabezado y
cuerpo del documento cuyas etiquetas correspondientes son <head> y <body>.
<head> </head> Este elemento actúa como un contenedor de todo aquello que quieres
incluir en la página HTML que no es contenido visible por los visitantes de la página. Incluye
cosas como palabras clave (keywords), una descripción de la página que quieres que
aparezca en resultados de búsquedas, código CSS para dar estilo al contenido,
declaraciones del juego de caracteres, etc.
<meta charset="utf-8"> Este elemento establece el juego de caracteres que nuestro

documento usará en utf-8, que incluye casi todos los caracteres de todos los idiomas
humanos.
<title> </title> Especifica el título de tu documento, es el que aparece en la pestaña o en la

barra de título del navegador cuando la página es cargada, y se usa para describir la página
cuando es añadida a los marcadores o como favorita.
<body> </body> Es donde se encuentra todo el contenido que deseas mostrar a los usuarios
web que visiten tu página, ya sea textos, imágenes, videos, audios, formulario, etc.
Etiquetas
Etiqueta <h1> - <h6>
Las siguientes etiquetas permiten la definición de encabezados o títulos dentro del
documento web.
La etiqueta se representa mediante las etiquetas <hx></hx> , siendo X un número entre 1 y

6, que establece el nivel del encabezado.
La presentación visual de los elementos de encabezado, suele ser en letra negrita, y

dependiendo de su nivel, de 1 a 3 suele ser mayor que la letra base establecida, mientras
que los niveles de 4 a 6 suele ser de tamaño menor a la letra establecida como base.
Etiqueta <p>
Se utilizan para encerrar párrafos de texto; los usaremos frecuentemente para el marcado de
contenido de texto.
Etiqueta <ul>
La etiqueta <ul>, permite definir una lista desordenada (“Unordered List”). Esta etiqueta es a
su vez contenedora de otras etiquetas, siendo estas últimas las que componen cada uno de
los elementos de los que está compuesta la lista.
Para especificar un elemento en la lista se ha de utilizar la etiqueta <li> </li>, en la que se ha

de especificar el texto que compone el elemento de la lista.
La etiqueta <ol> permite definir listas o viñetas ordenadas (“Ordered List”), bien con
numeración o alfabéticamente. Esta etiqueta es a su vez contenedora de otras etiquetas,
siendo estas últimas las que componen cada uno de los elementos de los que está
compuesta la lista.
Para especificar un elemento en la lista se ha de utilizar la etiqueta <li> </li>, en la que se ha

de especificar el texto que compone el elemento de la lista. Una lista puede contener como
elemento de lista, otra lista, es decir se pueden crear listas anidadas.
Etiqueta <a>
Sirve para definir y crear un hiperenlace, el cual permite realizar enlaces del documento web
con otros documentos o recursos disponibles.
Por defecto los navegadores suelen visualizar los enlaces con una serie de colores
predefinidos, aunque estos se pueden cambiar.
Los enlaces no visitados se visualizan normalmente con el color azul, los enlaces visitados
con el color púrpura y por último los enlaces activos mediante el color rojo.
Por defecto al pulsar sobre un enlace, el contenido al cual se está accediendo se ha de

mostrar en la misma ventana del navegador, sustituyendo el documento web actual por el
que se quiere acceder. La sintaxis para esta etiqueta con todos sus atributos es la siguiente:
href: Este atributo permite establecer la URL en la que se encuentra el documento el cual se
quiere enlazar, con el documento web. Se puede especificar una URL absoluta, relativa o un
ancla “enlace” en el mismo documento.
target: El atributo permite especificar el destino por defecto para todos los enlaces. El más
común es: _blank que especifica que el destino sea una nueva ventana del navegador, o una
nueva pestaña.
Etiqueta <img>
La etiqueta <img> , permite definir una imagen en el documento web.
Técnicamente la imagen no está insertada dentro del documento, ya que lo que se hace es
realizar un enlace a la misma, encargándose el navegador de situar en el documento.
Entre los formatos más populares de imagen aceptados, sin duda se encuentran el formato
JPEG, y el formato PNG. Aunque se pueden utilizar muchos más formatos.
src: permite especificar el origen de la imagen, es decir su ubicación, bien mediante una ruta
absoluta o relativa.
alt: permite especificar un texto alternativo para la imagen. Este texto alternativo es
visualizado cuando se produce un error en el atributo src, la conexión fuese muy lenta o si el
usuario utiliza un lector de pantalla.
Etiqueta <svg>
Gráficos vectoriales escalables (SVG) es un lenguaje de marcado XML para describir gráficos
vectoriales en dos dimensiones. Básicamente, es a los gráficos lo que HTML es al texto.
Etiqueta <div>
La etiqueta <div> sirve para crear secciones o agrupar contenidos.
Etiquetas semánticas
Estas etiquetas semánticas sirven para organizar los contenidos del documento en partes
lógicas.
Etiqueta <header>
Representa un grupo de ayudas introductorias o de navegación. Puede contener algunos
elementos de encabezado, así como también un logo, un formulario de búsqueda, un nombre
de autor y otros componentes.
Etiqueta <nav>
Representa una sección de una página cuyo propósito es proporcionar enlaces de
navegación, ya sea dentro del documento actual o a otros documentos.
Etiqueta <aside>
Representa una sección de una página que consiste en contenido que está indirectamente
relacionado con el contenido principal del documento. Estas secciones son a menudo
representadas como barras laterales o como inserciones y contienen una explicación al
margen como una definición de glosario, elementos relacionados indirectamente, como
publicidad, la biografía del autor, o en aplicaciones web, la información de perfil o enlaces a
blogs relacionados.
Etiqueta <footer>
Permite definir un pie de página de un documento Contiene información acerca de los datos
de derechos de autor o enlaces a documentos relacionados, iconos de las redes sociales.
Etiqueta <main>
Representa el contenido principal del <body> de un documento o aplicación. El área principal
del contenido consiste en el contenido que está directamente relacionado, o se expande
sobre el tema central de un documento o la funcionalidad central de una aplicación. Este
contenido debe ser único en el documento.
Etiqueta <section>
Representa una sección genérica de un documento. Sirve para determinar qué contenido
corresponde a qué parte de un esquema. Piensa en el esquema como en el índice de
contenido de un libro; un tema común y subsecciones relacionadas.
Etiqueta <article>
Permite especificar contenido independiente o autónomo. Se indica que su posible utilización
podría ser para mensajes de foros, noticias, artículos de blog, comentarios, etc.
Etiquetas multimedia
Etiqueta <audio>
Se usa para insertar contenido de audio en un documento HTML.
src: El origen de donde se encuentra el audio que se va a insertar.
controls: Si está presente este atributo, el navegador ofrecerá controles para permitir que el
usuario controle la reproducción de video, incluyendo volumen, búsqueda y pausar/reanudar
reproducción .
Etiqueta <video>
Se utiliza para incrustar vídeos.
poster: Una URL que indica un marco de póster para mostrar el resultado hasta que el
usuario reproduzca o busque. Si este atributo no se especifica, no se muestra nada hasta
que el primer cuadro está disponible, entonces se muestra el primer marco como el marco
de póster.
src: El origen de donde se encuentra el vídeo que se va a insertar.
controls: Si está presente este atributo, el navegador ofrecerá controles para permitir que el
usuario controle la reproducción de video, incluyendo volumen, búsqueda y pausar/reanudar
reproducción .
Formularios
Etiqueta <form>
Permite definir un formulario de datos, utilizados para transferir datos al servidor. Un
formulario puede contener a su vez, elementos de entrada como pueden ser campos de
texto, casillas de verificación, botones de radio, botones de envío, listas de selección, áreas
de texto, etc.
Etiqueta <input>
Es una de las etiquetas más importante para la solicitud de datos mediante formularios, ya
que es la que permite especificar los tipos de datos que se quieren solicitar para su posterior
envío.
La etiqueta permite mediante uno de sus atributos especificar el tipo de dato a solicitar, de
forma que se pueda componer un formulario que solicite los datos acordes a una estructura
idónea para la recepción de los mismos por parte del servidor.
Distintos tipos de datos:
text: Campo de texto de línea simple. Los saltos de línea son eliminados
automáticamente del valor introducido.·
checkbox: Casilla de selección. Se debe usar el atributo value para definir el valor
que se enviará por este elemento. Se pueden seleccionar varios a la vez.
file: Control que permite al usuario seleccionar un archivo.
hidden: Control que no es mostrado en pantalla, pero cuyo valor es enviado al

servidor.
password: Control de línea simple cuyo valor permanece oculto.
radio: Botón radio. Se debe usar el atributo value para definir el valor que se enviará
por este elemento. Los botones radio que tengan el mismo valor para su atributo name
están dentro del mismo "grupo de botones radio". Solo un botón radio dentro de un
grupo puede ser seleccionado a la vez.
submit: Botón que envía el formulario.

Etiqueta <label>
Representa una etiqueta para un elemento en una interfaz de usuario.
Etiqueta <select>
Representa un control que muestra un menú de opciones. Las opciones contenidas en el
menú son representadas por elementos <option>.
Etiqueta <textarea>
Representa un control para la edición multilínea de texto sin formato.
Bibliografía:
● Castillo. Lucía Iniciación al diseño Web. Editorial Dinámica. 2013.
● Gauchat, Juan Diego. El gran libro de HTML5, CSS3 y Javascript. 1era Edición. 2012

Programación web HTML

Cargado por

Información del documentohacer clic para expandir la información del documento

Copyright:

Formatos disponibles

Programación web HTML

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Programación web HTML

Cargado por

Copyright:

Formatos disponibles

PROGRAMADOR WEB

INICIAL: FRONT END

<p> Esta etiqueta es para indicar que este texto es un párrafo</p>

<title>Esta es la etiqueta donde colocaremos el título de la página</title>

Las partes principales del elemento son:

<!DOCTYPE html> Definición del tipo de documento.

<meta charset="utf-8"> Este elemento establece el juego de caracteres que nuestro

<title> </title> Especifica el título de tu documento, es el que aparece en la pestaña o en la

La etiqueta se representa mediante las etiquetas <hx></hx> , siendo X un número entre 1 y

La presentación visual de los elementos de encabezado, suele ser en letra negrita, y

Para especificar un elemento en la lista se ha de utilizar la etiqueta <li> </li>, en la que se ha

Para especificar un elemento en la lista se ha de utilizar la etiqueta <li> </li>, en la que se ha

Por defecto al pulsar sobre un enlace, el contenido al cual se está accediendo se ha de

src: El origen de donde se encuentra el audio que se va a insertar.

src: El origen de donde se encuentra el vídeo que se va a insertar.

Distintos tipos de datos:

file: Control que permite al usuario seleccionar un archivo.

hidden: Control que no es mostrado en pantalla, pero cuyo valor es enviado al

password: Control de línea simple cuyo valor permanece oculto.

submit: Botón que envía el formulario.

También podría gustarte