Scribd
Cargar
34 vistas14 páginas

HTML

Este documento proporciona una introducción a HTML, incluyendo una descripción de sus elementos principales como etiquetas de bloque y en línea. También describe cómo crear tablas, hipervínculos y marcos en HTML. Explica los diferentes tipos de hipervínculos como locales, externos y el uso de atributos como href y target.

Cargado por

Wilmer Pérez
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
34 vistas14 páginas

HTML

Este documento proporciona una introducción a HTML, incluyendo una descripción de sus elementos principales como etiquetas de bloque y en línea. También describe cómo crear tablas, hipervínculos y marcos en HTML. Explica los diferentes tipos de hipervínculos como locales, externos y el uso de atributos como href y target.

Cargado por

Wilmer Pérez
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/ 14

INSTITUTO UNIVERSITARIO DE TECNOLOGÍA

“JUAN PABLO PÉREZ ALFONZO”

IUTEPAL

EXTENSION SAN CRISTÓBAL – TÁCHIRA

LENGUAJE HTML

Pérez Mora Wilmer José


INTRODUCCION

HTML son las siglas en inglés de HyperText Markup Lenguage, que significa
Lenguaje de Marcado de HiperTexto, el cual es lenguaje de programación empleado
en la elaboración de páginas Web, y que sirve como estándar de referencia para la
codificación y estructuración de las mismas, a través de un código del mismo nombre
(html).

A continuación, veremos más a fondo que es HTML, sus elementos, y como


crear ciertos tipos de elementos como tablas, marcos e hipervínculos.
HTML es un lenguaje de marcado que define la estructura de tu contenido.
HTML consiste en una serie de elementos que se usan para encerrar diferentes partes
del contenido para que se vean o comporten de una determinada manera. Las
etiquetas de encierre pueden hacer de una palabra o una imagen un hipervínculo a
otro sitio, se pueden cambiar palabras a cursiva, agrandar o achicar la letra, entre
otras cualidades.

Las partes principales del elemento HTML son:

1. La etiqueta de apertura: consiste en el nombre del elemento, encerrado


por paréntesis angulares (< >) de apertura y cierre. Establece dónde
comienza o empieza a tener efecto el elemento.

2. 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.

3. El contenido: este es el contenido del elemento.

4. El elemento: la etiqueta de apertura, más la etiqueta de cierre, más el


contenido equivale al elemento.

Entre los elementos podemos encontrar:

ELEMENTOS DE BLOQUE

Un elemento de bloque ocupa todo el ancho de la página. Siempre comienza una


nueva línea en el documento. Por ejemplo, un elemento de encabezado estará en una
línea separada de un elemento de párrafo.

Todas las páginas HTML utilizan estas tres etiquetas:

1. La etiqueta <html> es el elemento raíz que define todo el documento HTML.

2. La etiqueta <head> contiene información meta como el título y el conjunto de


caracteres de la página.

3. La etiqueta <body> encierra todo el contenido que aparece en la página.

Otras etiquetas de bloque populares son:

 Etiquetas de encabezado. Estas van desde <h1> a <h6>, donde h1 es el


tamaño más grande, disminuyendo a medida que se avanza hasta el h6.
 Etiquetas de párrafo. Todas se encierran utilizando la etiqueta <p>.
 Etiquetas de listas. Tienen distintas variaciones. Usa la etiqueta <ol> para las
listas ordenadas y <ul> para las no ordenadas. Luego, encierra los elementos
individuales de la lista con la etiqueta <li>.

ELEMENTOS EN LÍNEA

Un elemento en línea da formato al contenido interno de los elementos de


bloque, agregando por ejemplo enlaces y texto enfatizado. Los elementos en línea se
utilizan sobre todo para dar formato al texto sin romper el flujo del contenido. Por
ejemplo, una etiqueta <strong> muestra un elemento en negrita, mientras que la
etiqueta <em> lo muestra en cursiva. Los hipervínculos también son elementos en
línea que utilizan una etiqueta <a> y un atributo href para indicar el destino del enlace.

TABLAS EN HTML

Una tabla no es otra cosa más que un medio de organizar datos en filas y
columnas. Este concepto ha estado presente en nuestra sociedad por un largo período
de tiempo y ha sido adoptado por HTML en sus etapas iniciales, como una forma de
transmitir información que, de otro modo, no sería comprendida tan fácilmente.

En documentos HTML una tabla puede ser considerada, resumidamente, como


un grupo de filas donde cada una contiene a un grupo de celdas. Esto es
conceptualmente distinto a un grupo de columnas que contiene a un grupo de filas, y
esta diferencia tendrá un impacto en la composición y comportamiento de la tabla.

Como muchas otras estructuras de HTML, las tablas son construidas utilizando
elementos. En particular, una tabla básica puede ser declarada usando tres
elementos, a saber, table (el contenedor principal), tr (representando a las filas
contenedoras de las celdas) y td (representando a las celdas).
FORMATO DE TEXTO

HIPERVINCULOS EN HTML

 HIPERVÍNCULOS O ENLACES EN HTML. ETIQUETA <A>.

Los enlaces o hipervínculos, también llamados hipertextos son los textos o los
objetos sobre los que podemos hacer clic para que nos lleven a otra parte del
documento, a otra página web en el mismo sitio o a otra página de Internet, entre otras
funciones.

Cuando un visitante hace clic en el hipervínculo, el destino se mostrará en su


navegador web, se abrirá o se ejecutará, en función del tipo de destino. El destino es
con frecuencia otra página web, pero también puede ser una imagen, un archivo
multimedia, un documento de Microsoft Office, un documento PDF, una dirección de
correo electrónico o un programa.
Por tanto, con los hipervínculos podemos establecer “saltos” desde una página
a otra, incluso a puntos concretos dentro de páginas con contenidos extensos. Los
hipervínculos pueden asociarse a imágenes o a textos de modo que haciendo clic
sobre ellos con el botón izquierdo del ratón se accede automáticamente al destino
asociado a ellos.

Lo más habitual es que el cursor tome la forma de una pequeña mano cuando
pasa sobre un hipervínculo.

 HIPERVÍNCULOS LOCALES, MARCADORES O ANCLAS.

Los hipervínculos locales o marcadores son enlaces dentro de la misma


página. Es decir, al hacer clic en uno de ellos nos llevará a una posición distinta dentro
de la misma página que estamos visualizando.

Esta técnica hace que los usuarios accedan de una manera más rápida a la
información.

Para crear este tipo de enlaces hay que hacer dos operaciones:

 Establecer marcadores (anclas) a lo largo de la página (son los lugares a los


que queremos saltar con los enlaces).

 Poner enlaces que salten a los marcadores.

El código de los marcadores se crea con los atributos name (no recomendado) ó
id (recomendado):

<a name="nombre_del_marcador">Texto asociado al marcador</a> (No


recomendado: no es aceptado por las nuevas versiones de HTML, aunque se usó
bastante en el pasado).

<a id="nombre_del_marcador">Texto asociado al marcador</a>

El name ó id de una etiqueta debe ser único, es decir, no puede haber dos etiquetas
cuyo name ó id sea el mismo dentro de un documento HTML.

Por ejemplo, <a id="marcadorDeportes">Los deportes </a>

Por otro lado, el código de un enlace para que salte a un marcador.

Pulsa para volver al <a href="#nombre_del_marcador ">Inicio</a>

 
Hay que tener en cuenta que los marcadores distinguen entre mayúsculas y
minúsculas. También hay que tener en cuenta que dentro de las etiquetas <a> </a>
hay un texto que aparece visible para el usuario, que es el que hemos marcado
subrayado en amarillo. No obstante, es válido no incluir texto alguno como veremos en
el siguiente código.  

 HIPERVÍNCULOS EXTERNOS. ATRIBUTO HREF.

Un hipervínculo externo es un vínculo a otro sitio web en Internet (sitio externo). Es


un vínculo a cualquier otro lugar fuera del sitio actual. Cuando ponemos un vínculo
externo, escribimos la dirección completa de la página incluido http://www.... Estas
rutas que incluyen http://... las denominamos rutas absolutas. Por
ejemplo, <a href="http://www.aprenderaprogramar.com">Acceder a la página web
aprenderaprogramar.com</a>

En el hipervínculo distinguimos las siguientes partes:

- Las etiquetas de apertura y cierre del hipervínculo <a> y </a>

- El atributo href, con un valor que se indica con el símbolo igual y la URL a la que
dirige el hipervínculo dentro de las comillas.

- Un texto que es el que ve el usuario como link.

DESTINO DEL HIPERVÍNCULO. ATRIBUTO TARGET

Cuando creamos un vínculo, por defecto el navegador abrirá la página web destino en
la misma ventana, pero podemos pedirle al navegador que la abra “aparte”, es decir,
en otra ventana. Esto es útil por ejemplo si queremos abrir una página externa a
nuestro sitio pero sin que el visitante pierda la nuestra. Para ello utilizaremos el
atributo target con alguna de las siguientes opciones.

Valores de target más habituales:

•    _blank: Abre el documento vinculado en una ventana nueva del navegador.

•    _self: Es la opción predeterminada o por defecto. Abre el documento vinculado en


el mismo marco o ventana que el vínculo.

Ejemplo: <a href=”http://www.google.com” target=”_blank”>Ir google.com en una


nueva ventana</a>
 
EL ATRIBUTO TITLE PARA HIPERVÍNCULOS

Como última cuestión, debemos tener en cuenta que es muy aconsejable poner
un atributo extra cada vez que pongamos un hipervínculo en nuestras páginas. Este
atributo es ‘title’ y con el pondremos título a nuestro hipervínculo. Con esto
conseguiremos en la mayoría de los navegadores un efecto de ‘tool-tip’ que consiste
en que cuando ponemos el cursor encima del hipervínculo nos aparezca una
información adicional que es la que hayamos puesto en el atributo ‘title’.

 IMÁGENES COMO ENLACES

Para poner una imagen como enlace basta con crear un enlace y añadir en su
interior en lugar de texto, una imagen. Veamos un ejemplo:

<ahref="http://google.com"><img

src="dirección de la imagen"alt="página de inicio de google"></a>

MARCOS EN HTML

Un marco (o frame) es una ventana independiente dentro de la ventana general


del navegador. Cada marco tendrá sus bordes y sus propias barras de
desplazamiento. Así cada página se dividirá en la práctica en varias páginas
independientes.

Para crearlos necesitaremos un documento HTML específico, que llamaremos


documento de definición de marcos. En él especificaremos el tamaño y posición de
cada marco y el documento HTML que contendrá.

 Etiqueta <FRAMESET>

Según el estándar, esta etiqueta sólo debería contener el número y tamaño de


cada marco, pero las extensiones de Netscape y Explorer al estándar obligan a
estudiar un par de parámetros más.

En general, los navegadores dibujan un borde de separación entre los marcos.


Si deseas eliminarlo puedes hacerlo de dos maneras: en las etiquetas <FRAME> de
cada una de los marcos contiguos al borde a eliminar o incluyendo el
parámetro FRAMEBORDER=0 en el <FRAMESET>.
Cuando eliminas ese borde, podrás ver cómo el navegador deja aún un hueco
entre marcos. Este se elimina añadiendo los parámetros FRAMESPACING=0
BORDER=0.

También están los parámetros COLS y ROWS. Deberemos asignarles una lista


de tamaños separada por comas. Se admiten los siguientes formatos de tamaño:

1. Con porcentajes: Al igual que con las tablas, podemos definir el tamaño de un
marco como un porcentaje del espacio total disponible.

2. Absolutos: Si ponemos un número a secas, el marco correspondiente tendrá


el tamaño especificado en pixels.

3. Sobre el espacio sobrante: Si colocamos un asterisco (*) estaremos


indicando que queremos todo el espacio sobrante para ese marco.

 Etiqueta <FRAME>

Esta etiqueta define tan sólo las características de un marco determinado, no


de un conjunto de ellos.
 ACCESO A OTROS MARCOS

Por defecto, cuando pulsamos sobre un enlace situado dentro de un marco, la


nueva página a la que queremos acceder la veremos encerrada en ese mismo marco.
Es posible que deseemos que esto no ocurra. Por ejemplo, si tenemos un marco que
no sirve de índice y otro donde mostramos los contenidos sería deseable que los
enlaces del marco índice se abrieran en el otro marco. Esto es posible hacerlo gracias
al parámetro TARGET. Este parámetro se puede colocar en tres
etiquetas: <A>, <AREA> y <BASE>. En las dos primeras sirve para indicar el marco en
el que abriremos ese enlace en particular y el último modificaremos el marco en el que
por defecto se nos muestran todos los enlaces. Pero para que un parámetro funcione,
es habitual que le asignemos un valor, y TARGET no es una excepción. Para indicarle
el marco que deseamos le asignaremos el nombre del mismo.

FORMULARIOS EN HTML

Un formulario HTML es una caja de texto que puede contener casillas de


verificación, botones y campos alfanuméricos. Suelen encontrarse en los sitios web
para recolectar los datos personales de los usuarios interesados en la oferta del sitio.
Estos datos posteriormente se envían a una base de datos para ser procesados.

Un formulario HTML no requiere tantas etiquetas y atributos, siempre y cuando


lo mantengas con un formato básico.

1. Form

Sus etiquetas son <form> y </form>

Dentro de ellas, se agregan todos los atributos necesarios para dar estructura a
tu formulario, los cuales son: 

 Action: especifica la acción asociada al formulario.

 Method: indica el método de acceso de la acción del formulario.

 Enctype: determina el tipo de codificación nombre/valor.


2. Input 

Su etiqueta es <input>. Cuenta con diferentes tipos de entrada:

 Texto: se expresa como <input type=text> y es por defecto la entrada de una


sola línea. También puede tener otros atributos: <input maxlenght> que limita
los campos a introducir; <input size> para indicar el espacio a disponer para
cada campo y finalmente <input value> que indica el valor inicial de campo. 

 Caja de selección: se expresa como <input type=checkbox> y sirve para


representar opciones como «Sí/No». 

 Botón: su etiqueta es <input type=radio>; representa un conjunto de varios


elementos de este tipo con el mismo nombre con un campo de selección
múltiple. 

 Botón de envío: se expresa como <input type=submit> y representa la opción


de lo que tiene que hacer el usuario, que es, en este caso, enviar el formulario.

3. Select

Su etiqueta es <select>. Se utiliza para reducir una lista de valores, por


ejemplo:

 Multiple: indica que puede haber más de una opción.

 Name: nombre de campo.

 Size: número de ítems visibles.

4. Text area

Su etiqueta es <textarea>. Representa el espacio donde puedes añadir todo el


texto que requieras y puede tener los siguientes atributos:

 Cols: número de columnas visibles.

 Name: nombre del campo.

 Rows: número de líneas visibles.

5. Fieldset
Fieldset es un elemento que sirve para agrupar varios datos relacionados entre
sí mismos. Su etiqueta es <fieldset>. Por ejemplo, si necesitas varios campos
personales en un formulario.

6. Legend

Legend es un elemento que sirve para etiquetar o identificar una agrupación de


campos. Su etiqueta es <legend>.
CONCLUSION

Como pudimos apreciar, HTML es el lenguaje más utilizado en la actualidad


para la creación de contenido y páginas web, ya que cuenta con diversos atributos que
lo destacan del resto de lenguajes de programación existentes.

Con la ayuda de elementos muy útiles como son los marcos, tablas y
encabezados, se pueden hacer páginas web de gran calidad y fácil entendimiento en
cuanto a código nos referimos.
BIBLIOGRAFIA

 https://www.aprenderaprogramar.com/index.php?
option=com_content&view=article&id=480:formatos-de-texto-html-negrita-
cursiva-tachado-subrayado-superindice-subindice-b-y-strong-
cu00713b&catid=69&Itemid=192
 https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/
HTML_basics
 https://www.hostinger.es/tutoriales/que-es-
html#Las_etiquetas_y_elementos_HTML_mas_utilizados
 https://www.aprenderaprogramar.com/index.php?
option=com_content&view=article&id=508:hipervinculos-links-o-enlaces-html-
etiqueta-a-atributos-href-target-y-title-tipos-de-links-img-
cu00717b&catid=69&Itemid=192#:~:text=HIPERV%C3%8DNCULOS%20O
%20ENLACES%20EN%20HTML,de%20Internet%2C%20entre%20otras
%20funciones.

También podría gustarte