introduccion a lenguaje html, programacion web
TRANSCRIPT
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
Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
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
Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
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.
Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
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
Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
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
Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
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
Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
Ejemplo1.html
<HTML>
<HEAD>
<TITLE>Titulo de la página</TITLE>
</HEAD>
<BODY>
Cuerpo de la página
</BODY>
</HTML>
7
Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
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
Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
Etiquetas para Formato de Texto
<B> Negrita</B>
<SUB> M Subíndice</SUB>
<I>Cursiva</I>
<SUP> M Superíndice </SUP>
9
Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
Etiquetas para Formato de Texto
<U> Subrayado</U>
<TT>Maquina escribir</TT>
<S> Tachado </S>
10
Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
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
Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
Ejemplo2.html• <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>
12
Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
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>
13
Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
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ñodirectamente. El tamaño (n) va desde uno a siete dondeuno es el valor de letra más pequeño y siete el másgrande.
14
Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
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>
15
Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
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>
16
Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
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 colorAzul</FONT>
Esta frase también es de color Azul
<FONT Color=Red Size=5>Esta frase es de colorRojo</FONT>
Esta frase es de color Rojo
17
Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
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>
18
Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
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>
19
Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
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
Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
Ejemplo3.html
<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>
21
Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
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>
22
Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
Etiqueta DIV
• Una forma de simplificar el código y evitarintroducir continuamente el tributo align sobrecada etiqueta es utilizando la etiqueta <DIV>.
• Esta etiqueta por sí sola no sirve para nada. Tieneque estar acompañada del atributo align y nospermite alinear cualquier elemento (párrafo oimagen).
23
Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
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>
24
Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
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
Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
Márgenes de Página
• leftmargin: para indicar el margen a los lados de lapágina.
• topmargin: para indicar el margen arriba y debajo de lapágina.
• marginwidth: para contrapartida de leftmargin paraNetscape.
• marginheight: igual que topmargin, pero para Netscape
26
Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
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
Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
Ejemplo4.html
<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> 28
Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
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
Introducción a Lenguaje HTML
Diseño y Desarrollo De Sitios Web Dinámicos
Web master: Pedro Antonio Villalta
Desarrollo de Sitios Web Dinámicos
con PHP, Java Script, HTML5, CSS
Si la presentación fue útil, compártela y recomienda el blog.