Scribd
Cargar
66 vistas

Introducción A HTML

Este documento introduce los conceptos básicos de HTML, incluyendo etiquetas, marcado, formularios y hojas de estilo. Explica elementos como <body>, <head> y <html>, así como atributos y enlaces. También cubre temas como comentarios, metaetiquetas y CSS.

Cargado por

m
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
66 vistas

Introducción A HTML

Este documento introduce los conceptos básicos de HTML, incluyendo etiquetas, marcado, formularios y hojas de estilo. Explica elementos como <body>, <head> y <html>, así como atributos y enlaces. También cubre temas como comentarios, metaetiquetas y CSS.

Cargado por

m
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 3

Introducción a HTML

¿Qué es HTML?
HTML (HiperText Markup Languaje) y se traduce literalmente como “Lenguaje de marcado de hipertexto”.

https://www.youtube.com/watch?time_continue=73&v=X7Tm0YjhfCQ

Marcado HTML
El marcado HTML se realiza mediante etiquetas de apertura y cierre. Todo lo que se encuentra dentro de una etiqueta de apertura y cierre
se encuentra afectado por ella, incluyendo texto plano y cualquier otra etiqueta que pueda contener.
 Una etiqueta de apertura se define con un nombre de etiqueta encerrado entre los corchetes angulares < y > (signo “menor
que” y signo “mayor que”)
Ejemplo <body>
 Una etiqueta de cierre se define con el corchete angular de apertura “<” seguido del carácter barra /, el nombre de etiqueta y
finalmente el corchete angular de cierre.
Ejemplo </body>
 Entre la etiqueta de apertura y la de cierre, se encuentra el contenido. El contenido puede ser texto u otras etiquetas. Una
etiqueta con contenido tiene el siguiente formato:
Ejemplo: <etiqueta>contenido</etiqueta>
 Si entre la etiqueta de apertura y la de cierre no se añade ningún contenido, se puede declarar con un corchete angular de
apertura “<” seguido del nombre de la etiqueta, una barra / y finalmente el corchete angular de cierre.
 Ejemplo: <br />
 Los atributos añaden información adicional a una etiqueta. Cada etiqueta admite una serie de atributos. Se añaden
únicamente a las etiquetas de apertura, justo después del nombre. Se admite más de un atributo por etiqueta. Siguen el
esquema clave / valor de la siguiente forma: clave: “valor”.
Ejemplo: <img src= “logo.gif”></img>

En el material descargable, puedes conocer algunos ejemplos de aplicación de los conocimientos sobre marcado que
hemos visto hasta ahora.
https://miriadax.net/documents/90717496/90717752/Herramientas+para+trabajar+con+HTML5.pdf/3c67ce20-1c0a-4754-8686-
928ad6ac2882?version=1.0

Etiquetas principales del estándar HTML

Algunos de los elementos más comunes de una página web que pueden crearse mediante etiquetas HTML son: comentarios, la estructura
principal del documento, las etiquetas de la cabecera y las etiquetas del cuerpo.

 Comentarios
Son textos que no serán interpretados por el navegador. Únicamente se utilizan para añadir información útil para el desarrollador.

 Estructura principal del documento. Tres etiquetas marcan la estructura de un documento:


o html: etiqueta que define la raíz del documento. Todos los elementos de la página deben estar contenidos en la etiqueta
HTML.
o header: contiene las cabeceras de la página HTML. Las cabeceras contienen información adicional para el navegador. Pueden
ser, por ejemplo, el título de la página, enlaces a hojas de estilo, codificación de caracteres, etc.
o body: es el cuerpo de la página. Dentro de esta etiqueta se encuentra el contenido que vamos a mostrar al usuario.
  Etiquetas de la cabecera. Los elementos que pueden incluirse en la cabecera son:
o title: título de la página. Se muestra en la barra de título del navegador (o en una pestaña si usamos un navegador con
pestañas). Solo se puede añadir una vez por documento.
o meta (cambia en HTML5): añade información adicional a la página de naturaleza variopinta. Podemos indicar la codificación
de caracteres del documento, información sobre el autor, palabras clave para los motores de búsqueda, etc. Se pueden añadir
los meta que sean necesarios, pero sin repetirlos.
o style: añade hojas de estilo explícitamente en el propio documento HTML.
o link (cambia en HTML5): lo podemos utilizar para referenciar ficheros externos, por ejemplo, ficheros con hojas
de estilo.
o script (cambia en HTML5): también se puede añadir dentro del cuerpo. Permite añadir un script en la propia
página, o referenciar un fichero que contiene scripts y es específico para ello. Esta segunda forma, suele ser más
adecuada puesto que el código del script está totalmente separado del documento HTML.
 Etiquetas del cuerpo
El cuerpo y las etiquetas que incluye una página definen el contenido que se muestra al usuario. Todas las etiquetas
del cuerpo del documento (excepto script) pueden llevar los diferentes atributos: los que definen un párrafo, los que
definen un título, los que definen tipos de listas, etc.
En el documento descargable de esta página, puedes ampliar información sobre la creación de estos elementos y las diferentes etiquetas.

https://miriadax.net/documents/90717496/90717764/Etiquetas+principales+del+estandar+HTML.pdf/fee08111-d6b5-4687-b14d-85e7e3b1c098?
version=1.0

Caso práctico "Etiquetas HTML"


A continuación, te presentamos un caso práctico relacionado con las etiquetas HTML. Lee  atentamente el enunciado del caso y
desarrolla su solución. Cuando lo hayas completado puedes compartirlo en el foro con tus compañeros.
Para visualizar el contenido, pulsa aquí. https://miriadax.net/documents/76357813/76357842/Etiquetas+HTML/d5281305-deb4-4662-9998-fb74dffe64fe
Formularios HTML
¿Qué son los formularios HTML?
Los formularios HTML son elementos que permiten recoger datos del cliente desde una página web (en el lado del cliente) y enviarlos
al servidor.
Dentro del formulario, podemos introducir componentes HTML de distintas naturalezas para este fin. Por ejemplo, campos y cajas de
texto, selectores, checkbox, radio, etc.
Desde un formulario podemos, incluso, mandar ficheros al servidor.
Usando formularios, tenemos un mecanismo para que el usuario pueda interactuar con nuestra aplicación. Un formulario también
puede ser utilizado para mostrar datos al cliente.

Características de formularios HTML


Un formulario permite enviar al servidor la información recogida por los diferentes elementos quelo componen.
Los datos se envían como una lista de parámetros. Cada parámetro se corresponde con un elemento del formulario.
La lista de parámetros se envía en formato clave / valor, donde la clave es el nombre del elemento del formulario al que corresponde y el
valor es la información introducida o seleccionada por el usuario.
La información de un formulario se envía en una petición HTTP, por lo que debemos indicar en el formulario cual va a ser la URL del
servidor que va a atender nuestra petición.
Una petición HTTP admite varios métodos o verbos. Podemos indicar en el formulario si la información se va a enviar usando el
método GET o POST. Si no se especifica el método, por defecto se envía por GET.
 Método GET: la información recogida del formulario se envía en la propia URL de la petición con el siguiente formato:
url?param_1=valor_1&param_2=valor2&…param_n=valor_n
Al enviarse en la propia URL, los parámetros serian visibles para el usuario.

 Método POST: los datos del formulario se envían dentro del cuerpo del mensaje HTTP.
 Con el siguiente vídeo y el material descargable de la página, podrás completar información relativa a la creación de formularios y a los elementos que lo
conforman.
https://www.youtube.com/watch?v=K28CjX1m7ag

Descarga documento formularios https://miriadax.net/documents/90717496/90717784/Formularios.pdf/ff7e7733-8b38-4b34-9817-2780c7103264?version=1.0


Hojas de estilo: CSS

¿Qué es CSS?
CSS (Cascading Style Sheets) es un lenguaje usado para definir la presentación de un documento HTML. La idea que
subyace detrás del CSS es separar la estructura de un documento de su presentación.

Cuando usamos HTML, todos los elementos mostrados tienen un estilo por defecto definido. CSS redefine estos atributos para mejorar la
presentación de una página o, incluso permite visualizar un mismo HTML de varias formas diferentes.

Tipos de CSS

 Inline: Consiste en usar CSS directamente sobre el elemento HTML que queremos modificar. Se realiza usando la etiqueta style
de los elementos HTML, y como valor, se añaden todos los estilos CSS que queramos aplicar separados por el carácter punto y
coma. Usar CSS inline no es lo más recomendable; debe usarse para cosas muy puntuales, ya que su mantenimiento es
complicado (esta sobre la propia página, hay que buscarlo). Sin embargo, para hacer pruebas o ejemplos pequeños es muy útil.
 Internal: Usando la etiqueta style en el área head del documento HTML para redefinir el estilo de los elementos HTML. Parece
algo más adecuado que inline puesto que unifica todos los estilos de una página en un mismo sitio. Sin embargo, sigue sin
permitir reutilizar estilos entre distintas páginas de nuestro sitio web.
 External: Usando ficheros externos que posean la configuración CSS que queramos aplicar. Es el sistema más recomendado ya
que fomenta la reutilización y el mantenimiento de las hojas de estilo en diferentes paginas HTML.

En el material descargable que ponemos a tu disposición, conocerás más detalles sobre cómo definir diferentes estilos.
En el siguiente vídeo puedes ver un ejemplo del posicionamiento flotante dentro de una página web.
https://www.youtube.com/watch?v=Y_-ali--KfQ
Descargar documento: Creacion de hojas de estilo.pdf
https://miriadax.net/documents/90717496/90717796/Creacion+de+hojas+de+estilo.pdf/a3e3927e-0d29-4d03-a698-470cfcef0b14?version=1.0

También podría gustarte