HTML

Introducción a Lenguaje HTML
Contenido
Un poco de teoría sobre lenguaje HTML, muy básico
con el objetivo de comenzar a comprender su
estructura y etiquetado.
• Qué es HTML
• Etiquetas HTML de Formato Físico
• Etiquetas HTML de Formato lógico
• Estructura de HTML
• Ejemplos
Introducción a Lenguaje HTML 2

¿Qué es HTML?
Hyper Text Markup Languaje o lenguaje de

definición de marcas, es un lenguaje sencillo que
permite marcar los documentos de hipertexto
mediante unas etiquetas especificas, de este modo
conseguimos darle a los documentos una cierta
estructura.

Etiquetas de HTML
• Para crear los documentos HTML puede usarse
cualquier editor de texto, pero en este caso
comenzaremos utilizando PSPad o un editor de
código que esté disponible en la PC.
• Las etiquetas que se utilizan en HTML, se

reconocen en dos tipos, las de apertura y las de
cierre, representado simbólicamente así:
Apertura: <Etiqueta> Ej. <H1> Titulo </H1>

Cierre : </Etiqueta>

Estructura básica de HTML
• El documento HTML se divide en dos partes
principales: El encabezado (HEAD) y el cuerpo
(BODY). El encabezado es la parte que se encuentra
entre las etiquetas <HEAD> y </HEAD>.
• Dentro del mismo se encuentra información sobre

nuestro documento, en nuestro caso tenemos el título de
la página entre las etiquetas <TITLE> y </TITLE>. En
el cuerpo pondremos todo lo que queramos ver en
nuestra página texto, imágenes, enlaces...

Primer Ejemplo
Para el desarrollo del primer ejercicio realice los siguientes pasos.
1. Abra el editor de código block de notas
2. Cree un nuevo documento asegurándose que sea de tipo HTML.
3. Observe la estructura básica del nuevo documento generado,

después de observarlo, bórrelo y trate de recordarlo escribiéndolo
en un nuevo archivo HTML.

Ejemplo1.html
<HTML>
<HEAD>
<TITLE>Titulo de la página</TITLE>
</HEAD>
<BODY>
Cuerpo de la página
</BODY>
</HTML>

Formato de Texto
Existen dos tipos de formato para los caracteres: Los

formatos físicos y los formatos lógicos..
• Formatos físicos:
Son los que ordenan como se va a presentar el
texto. Son formatos físicos por ejemplo la negrita,
el subrayado...

Etiquetas para Formato de Texto
 Negrita
 M Subíndice
Cursiva
 M Superíndice 

Etiquetas para Formato de Texto
 Subrayado
<TT>Maquina escribir</TT>
<S> Tachado </S>

Segundo Ejemplo
Para el desarrollo del segundo ejercicio realice los

siguientes pasos.
1. Cree un nuevo archivo de tipo HTML en bloc de Notas

2. Utilice la estructura básica creada por el programa
para aumentar más código HTML a la página web.
3. Utilice las etiquetas descritas anteriormente.

Ejemplo2.html
• <HTML>
<HEAD>
<TITLE>Formatos físicos</TITLE>
</HEAD>
<BODY>
Este texto esta en negrita
en cambio este esta en cursiva
también se puede subrayar
<S>y tachar</S>
Se pueden usar varios a la vez
Ejemplo superíndice: 62= 36
Ejemplo subíndice: X1 + X2 = Z
</BODY>
</HTML>

Tamaño y Color del Texto
Usamos la etiqueta FONT y la propiedad SIZE.
Para ponerle a una palabra un tamaño 7 pondríamos

la etiqueta y el atributo SIZE con el valor
7:
Texto fuente 5

Atributos de la etiqueta FONT
SIZE
• Este atributo sirve para cambiar el tamaño de las fuentes.
Hay varias maneras de utilizarlo:
• a) Size = n
• De esta manera estamos asignando un tamaño

directamente. El tamaño (n) va desde uno a siete donde
uno es el valor de letra más pequeño y siete el más
grande.

Tamaño del Texto, Font Size
El tamaño de letra es 2

Tamaño del Texto en Base a 3
Incrementamos o disminuimos un tamaño (n)
relativo al tamaño base que por defecto es 3.
b) Size=+n ó Size=-n
Tamaño de letra 2 (3-1)
Tamaño de letra 6 (3+3)

Color del Texto, Font Color
Esta frase es de color Azul
Esta frase es de color Azul
Esta frase también es de color

Azul
Esta frase también es de color Azul
Esta frase es de color

Rojo
Esta frase es de color Rojo

Fuente del Texto, Font Face
Se utiliza para cambiar el tipo de la fuente. Si no definimos este

atributo cada navegador cargara el documento HTML con la
fuente que tenga predeterminada, lo mismo pasará si el
ordenador en que se visualice la página no contiene el tipo de
fuente que definamos en el documento con este atributo.
Tipos de fuente

Etiqueta Font Face Multiple
Se puede definir más de un tipo de letra, con el fin de que

si un ordenador no contiene el primer tipo de fuente que
contiene el atributo, pruebe con el segundo, tercero y …..
Hasta encontrar una que tenga disponible el navegador.
Tipos de

fuente

Tercer Ejemplo
Para el desarrollo del tercer ejercicio realice los

siguientes pasos.
1. Cree un nuevo archivo de tipo HTML en bloc de notas

2. Copie el código del ejercicio dos en el nuevo archivo
creado y modifíquelo agregando el siguiente código
con etiquetas para tamaño, color y tipo de fuente.

Ejemplo3.html
Tamaño de letra 2 (3-1)
Tamaño de letra 6 (3+3)
Esta frase es de color Azul
Esta frase también es de color Azul
Esta frase es de color Rojo

Ejercicio 5 
Atributos 


Justificación del Texto
Justificado a la Izquierda:
 Texto alineado a la izquirda
Justificado al Centro:
 Texto alineado al centro
Justificado a la derecha:
 Texto alineado a la derecha

Etiqueta DIV
• Una forma de simplificar el código y evitar

introducir continuamente el tributo align sobre
cada etiqueta es utilizando la etiqueta <DIV>.
• Esta etiqueta por sí sola no sirve para nada. Tiene

que estar acompañada del atributo align y nos
permite alinear cualquier elemento (párrafo o
imagen).

Ejemplo de la etiqueta <DIV>
Parraro1
Es equivalente a:
<div align=“left”>
Parraro1
Parraro2
Parraro3
</div>

Aplicar fondo de Página
<body bgcolor=“red”>
Aplicar color de fondo a la página.
<body background=“fondo.jpg”>
Coloca imagen de fondo a la página.

Márgenes de Página
• leftmargin: para indicar el margen a los lados de la
página.
• topmargin: para indicar el margen arriba y debajo de la

página.
• marginwidth: para contrapartida de leftmargin para

Netscape.
• marginheight: igual que topmargin, pero para Netscape

Cuarto Ejemplo
Para el desarrollo del cuarto ejercicio realice los

siguientes pasos.
1. Abra el archivo llamado ejercicio3.html

2. Modifique el código aplique un fondo de página y
márgenes.
3. Puede basarse en el siguiente ejemplo

Ejemplo4.html
<html>
<body topmargin=0 leftmargin=0 marginheight=0
marginwidth=0 bgcolor=“ffffff”>
<table width=100% bgcolor=ff6666><tr><td>
<h1> Ejemplo4</h1>
 
Esta es una tabla sencilla de una fila. 
</td></tr>
</table>
</body>
</html> a Lenguaje HTML
Introducción 28
Practica Sugerida
• Leer guía sobre etiquetas usadas para la

creación de formularios.
• Crear un formulario usando las etiquetas de
formularios.
• Crear estructura de página usando etiquetas
HTML

HTML

Cargado por

Información del documento

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

HTML

Cargado por

Copyright:

Formatos disponibles

Introducción a Lenguaje HTML

Introducción a Lenguaje HTML 2

Hyper Text Markup Languaje o lenguaje de

Introducción a Lenguaje HTML 3

• Las etiquetas que se utilizan en HTML, se

Apertura: <Etiqueta> Ej. <H1> Titulo </H1>

Introducción a Lenguaje HTML 4

• Dentro del mismo se encuentra información sobre

Introducción a Lenguaje HTML 5

1. Abra el editor de código block de notas

2. Cree un nuevo documento asegurándose que sea de tipo HTML.

3. Observe la estructura básica del nuevo documento generado,

Introducción a Lenguaje HTML 6

Introducción a Lenguaje HTML 7

Existen dos tipos de formato para los caracteres: Los

Introducción a Lenguaje HTML 8

<SUP> M Superíndice </SUP>

Introducción a Lenguaje HTML 9

<S> Tachado </S>

Introducción a Lenguaje HTML 10

Para el desarrollo del segundo ejercicio realice los

1. Cree un nuevo archivo de tipo HTML en bloc de Notas

Introducción a Lenguaje HTML 11

Introducción a Lenguaje HTML 12

Para ponerle a una palabra un tamaño 7 pondríamos

<FONT Size = 5>Texto fuente 5</FONT>

Introducción a Lenguaje HTML 13

• De esta manera estamos asignando un tamaño

Introducción a Lenguaje HTML 14

<FONT Size=4>El tamaño de letra es 4</FONT>

<FONT Size=7>El tamaño de letra es 7</FONT>

Introducción a Lenguaje HTML 15

<FONT Size=-1>Tamaño de letra 2 (3-1)</FONT>

<FONT Size=+3>Tamaño de letra 6 (3+3)</FONT>

Introducción a Lenguaje HTML 16

<FONT Color="#0000ff">Esta frase también es de color

<FONT Color=Red Size=5>Esta frase es de color

Introducción a Lenguaje HTML 17

Se utiliza para cambiar el tipo de la fuente. Si no definimos este

<FONT Face="Comic Sans MS" Size=5>Tipos de fuente</FONT>

Introducción a Lenguaje HTML 18

Se puede definir más de un tipo de letra, con el fin de que

<FONT Face="Arial,Comic Sans MS" Size=5>Tipos de

Introducción a Lenguaje HTML 19

Para el desarrollo del tercer ejercicio realice los

1. Cree un nuevo archivo de tipo HTML en bloc de notas

Introducción a Lenguaje HTML 20

<FONT Size=4>El tamaño de letra es 4</FONT>

<FONT Size=7>El tamaño de letra es 7</FONT>

<FONT Size=-1>Tamaño de letra 2 (3-1)</FONT>

<FONT Size=+3>Tamaño de letra 6 (3+3)</FONT>

<FONT Color=Blue>Esta frase es de color Azul</FONT>

<FONT Color="#0000ff">Esta frase también es de color Azul</FONT>

<FONT Color=Red Size=5>Esta frase es de color Rojo</FONT>

Introducción a Lenguaje HTML 21

Introducción a Lenguaje HTML 22

• Una forma de simplificar el código y evitar

• Esta etiqueta por sí sola no sirve para nada. Tiene

Introducción a Lenguaje HTML 23

Introducción a Lenguaje HTML 24

Introducción a Lenguaje HTML 25

• topmargin: para indicar el margen arriba y debajo de la

• marginwidth: para contrapartida de leftmargin para

• marginheight: igual que topmargin, pero para Netscape