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.
Introducción a Lenguaje HTML 3
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>
Introducción a Lenguaje HTML 4
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...
Introducción a Lenguaje HTML 5
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.
Introducción a Lenguaje HTML 6
[Link]
<HTML>
<HEAD>
<TITLE>Titulo de la página</TITLE>
</HEAD>
<BODY>
Cuerpo de la página
</BODY>
</HTML>
Introducción a Lenguaje HTML 7
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...
Introducción a Lenguaje HTML 8
Etiquetas para Formato de Texto
<B> Negrita</B>
<SUB> M Subíndice</SUB>
<I>Cursiva</I>
<SUP> M Superíndice </SUP>
Introducción a Lenguaje HTML 9
Etiquetas para Formato de Texto
<U> Subrayado</U>
<TT>Maquina escribir</TT>
<S> Tachado </S>
Introducción a Lenguaje HTML 10
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.
Introducción a Lenguaje HTML 11
[Link]
• <HTML>
<HEAD>
<TITLE>Formatos físicos</TITLE>
</HEAD>
<BODY>
<B>Este texto esta en negrita</B>
<I>en cambio este esta en cursiva</I>
<U>también se puede subrayar</U>
<S>y tachar</S>
<B><I><U>Se pueden usar</U> varios a</I> la vez</B>
Ejemplo superíndice: 6<SUP>2</SUP>= 36
Ejemplo subíndice: X<SUB>1</SUB> + X<SUB>2</SUB> = Z
</BODY>
</HTML>
Introducción a Lenguaje HTML 12
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 <FONT> y el atributo SIZE con el valor
7:
<FONT Size = 5>Texto fuente 5</FONT>
Introducción a Lenguaje HTML 13
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.
Introducción a Lenguaje HTML 14
Tamaño del Texto, Font Size
<FONT Size=1>El tamaño de letra es 2</FONT>
<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
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
<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
Color del Texto, Font Color
<FONT Color=Blue>Esta frase es de color Azul</FONT>
Esta frase es de color Azul
<FONT Color="#0000ff">Esta frase también es de color
Azul</FONT>
Esta frase también es de color Azul
<FONT Color=Red Size=5>Esta frase es de color
Rojo</FONT>
Esta frase es de color Rojo
Introducción a Lenguaje HTML 17
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.
<FONT Face="Comic Sans MS" Size=5>Tipos de fuente</FONT>
Introducción a Lenguaje HTML 18
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.
<FONT Face="Arial,Comic Sans MS" Size=5>Tipos de
fuente</FONT>
Introducción a Lenguaje HTML 19
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.
Introducción a Lenguaje HTML 20
[Link]
<FONT Size=1>El tamaño de letra es 2</FONT>
<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>
<FONT Color=Red Size=7 Face="Comic Sans MS,Arial“>Ejercicio 5<BR> </FONT>
<FONT Color="#33ccaa" Size=5>Atributos<BR></FONT>
<FONT Color="#bb22ff" Size=+3 Face="Courier New“></FONT>
Introducción a Lenguaje HTML 21
Justificación del Texto
Justificado a la Izquierda:
<p align=“left”> Texto alineado a la izquirda</p>
Justificado al Centro:
<p align=“center”> Texto alineado al centro</p>
Justificado a la derecha:
<p align=“right”> Texto alineado a la derecha</p>
Introducción a Lenguaje HTML 22
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).
Introducción a Lenguaje HTML 23
Ejemplo de la etiqueta <DIV>
<p align=“left”>Parraro1</p>
<p align=“left”>Parraro2</p>
<p align=“left”>Parraro3</p>
Es equivalente a:
<div align=“left”>
<p>Parraro1</p>
<p>Parraro2</p>
<p>Parraro3</p>
</div>
Introducción a Lenguaje HTML 24
Aplicar fondo de Página
<body bgcolor=“red”>
Aplicar color de fondo a la página.
<body background=“[Link]”>
Coloca imagen de fondo a la página.
Introducción a Lenguaje HTML 25
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
Introducción a Lenguaje HTML 26
Cuarto Ejemplo
Para el desarrollo del cuarto ejercicio realice los
siguientes pasos.
1. Abra el archivo llamado [Link]
2. Modifique el código aplique un fondo de página y
márgenes.
3. Puede basarse en el siguiente ejemplo
Introducción a Lenguaje HTML 27
[Link]
<html>
<body topmargin=0 leftmargin=0 marginheight=0
marginwidth=0 bgcolor=“ffffff”>
<table width=100% bgcolor=ff6666><tr><td>
<h1> Ejemplo4</h1>
<br>
Esta es una tabla sencilla de una fila.<br>
</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
Introducción a Lenguaje HTML 29
