Introduccion a Lenguaje HTML, Programacion Web

Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
Blog de Programación Web http://miw2012.blogspot.com/
Desarrollo de Sitios Web Dinámicos
con PHP, Java Script, HTML5, CSS

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
2

3
¿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>
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...
5

Primer Ejemplo
Para el desarrollo del primer ejercicio realice los siguientes pasos.
1. Abra el editor de código Note++
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.
6

Ejemplo1.html
<HTML>
<HEAD>
<TITLE>Titulo de la página</TITLE>
</HEAD>
<BODY>
Cuerpo de la página
</BODY>
</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...
8

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

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

Segundo Ejemplo
Para el desarrollo del segundo ejercicio realice los
siguientes pasos.
1. Cree un nuevo archivo de tipo HTML en Note++
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.
11

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>
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 y el atributo SIZE con el valor
7:
Texto fuente 5
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.
14

Tamaño del Texto, Font Size
El tamaño de letra es 2
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
Tamaño de letra 2 (3-1)
Tamaño de letra 6 (3+3)
16

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
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.
Tipos de fuente
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.
Tipos de
fuente
19

Tercer Ejemplo
Para el desarrollo del tercer ejercicio realice los
siguientes pasos.
1. Cree un nuevo archivo de tipo HTML en Note++
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.
20

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 

21

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
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).
23

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

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

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
27

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> 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
29

Web master: Pedro Antonio Villalta
pavillalta@gmail.com
pavillalta@ugb.edu.sv
Desarrollo de Sitios Web Dinámicos
con PHP, Java Script, HTML5, CSS
Si la presentación fue útil, compártela y recomienda el blog.

Introduccion a Lenguaje HTML, Programacion Web

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (16)

Similar a Introduccion a Lenguaje HTML, Programacion Web

Similar a Introduccion a Lenguaje HTML, Programacion Web (20)

Más de Pedro Antonio Villalta (Pavillalta)

Más de Pedro Antonio Villalta (Pavillalta) (20)

Último

Último (20)

Introduccion a Lenguaje HTML, Programacion Web