You are on page 1of 16

Universidad Nacional Experimental Francisco de Miranda

Vice-Rectorado Acadmico
rea Ciencias de la Educacin
Aprendizaje Dialgico Interactivo
Programa:
Matemtica Mencin Informtica
Unidad Curricular: Sistema de Informacin I

HTML

Ing. Eduardo Gmez

- Analizar el uso de las Base de Datos, en el desarrollo o soluciones de problemas.

Universidad Nacional Experimental Francisco de Miranda


Vice-Rectorado Acadmico
rea Ciencias de la Educacin
Aprendizaje Dialgico Interactivo

Programa:
Matemtica Mencin Informtica
Unidad Curricular: Sistema de Informacin I

HTML
Objetivo
Didctico>>

Analizar y desarrollar el uso de la sintaxis


del cdigo fuente de HTML,su estructura bsica y ejecucin,
para la creacin de pginas web

Ing. Eduardo Gmez

- Analizar el uso de las Base de Datos, en el desarrollo o soluciones de problemas.

Universidad Nacional Experimental Francisco de Miranda


Vice-Rectorado Acadmico
rea Ciencias de la Educacin
Aprendizaje Dialgico Interactivo

Programa:
Matemtica Mencin Informtica
Unidad Curricular: Sistema de Informacin I

HTML
Contenido
Didctico>>
- html
- Etiquetas
-Estructura bsica de un archivo html

Ing. Eduardo Gmez

- Analizar el uso de las Base de Datos, en el desarrollo o soluciones de problemas.

Universidad Nacional Experimental Francisco de Miranda


Vice-Rectorado Acadmico
rea Ciencias de la Educacin
Aprendizaje Dialgico Interactivo

Programa:
Matemtica Mencin Informtica
Unidad Curricular: Sistema de Informacin I

HTML
Conocimientos Previos Necesarios
>>
Unidad Curricular: Estructura de Datos
o Conocimientos bsicos del uso del computador
o Uso de un navegador Web
o Programacin bsica

Ing. Eduardo Gmez

Universidad Nacional Experimental Francisco de Miranda


Vice-Rectorado Acadmico
rea Ciencias de la Educacin
Aprendizaje Dialgico Interactivo

Programa:
Matemtica Mencin Informtica
Unidad Curricular: Sistema de Informacin I

Nociones de HTML

HTML, siglas de HiperText Markup


Languaje(Lenguaje de Marcas de Hipertexto)
Es un lenguaje muy sencillo que permite describir hipertexto, es
decir, texto presentado de forma estructurada y agradable, con
enlaces (hyperlinks) que conducen a otros documentos o fuentes de
informacin relacionadas, y con inserciones multimedia (grficos,
sonido...).Las Etiquetas se forman entre los signos < y > y con la barra /
cuando se trata de la segunda etiqueta de un efecto (la de cierre). Por
ejemplo: <efecto> para abrir y </efecto> para cerrar.

Ing. Eduardo Gmez lvarez

Universidad Nacional Experimental Francisco de Miranda


Vice-Rectorado Acadmico
rea Ciencias de la Educacin
Aprendizaje Dialgico Interactivo

Programa:
Matemtica Mencin Informtica
Unidad Curricular: Sistema de Informacin I

Etiquetas
La Etiquetas deciden la naturaleza del formato que se va aplicar
a los documentos HTML.Las etiquetas tienen un conjunto de
atributos (alineacin, tamao,ancho) que deciden la extensin y
el estilo del formato que se va aplicar.Las etiquetas son simples
y fciles de usar. VEAMOS las Etiquetas que utilizaremos
posteriormente en la estructura bsica de un archivo HTML.
<!DOCTYPE> proporciona al navegador la versin de html
con la que coincide el documento las especificaciones del
HTML 3.2 4.0 4.01 sugieren el uso de esta etiqueta no
emparejada(no requieren de una etiqueta de cierre las
etiquetas emparejadas si lo requieren)
Ing. Eduardo Gmez lvarez

Universidad Nacional Experimental Francisco de Miranda


Vice-Rectorado Acadmico
rea Ciencias de la Educacin
Aprendizaje Dialgico Interactivo

Programa:
Matemtica Mencin Informtica
Unidad Curricular: Sistema de Informacin I

Etiquetas
La parte clave de la etiqueta <!DOCTYPE> es el elemento
Document Type Definition (Definicin de Tipo de Documento
DTD) que le indica a los navegadores la versin HTML que
cumple el documento en el ejemplo HTML 4.0
HTML Transitional define la estructura ms flexible para disear
un documento HTML.
La Etiqueta <HTML> especfica que el documento es un
documento HTML.
La Etiqueta emparejada <HEAD> </HEAD>Informacin acerca
del documento, puede referirse al titulo del documento,scripts
utilizados,definicon estilos
Ing. Eduardo Gmez lvarez

Universidad Nacional Experimental Francisco de Miranda


Vice-Rectorado Acadmico
rea Ciencias de la Educacin
Aprendizaje Dialgico Interactivo

Programa:
Matemtica Mencin Informtica
Unidad Curricular: Sistema de Informacin I

Etiquetas
<b>Hola Mundo</b> negritas
<hr> barra horizotal
<br> salto de linea
<i>Un parrafo completo va justo aqui</i> cursivas
<u>Un parrafo completo va justo aqui</u> subrayado
<!-- Etiquetas de comentarios-->
Etiquetas de parrafos
<p align="center" >
</p>
<p > salto de parrafo</p>
<font size=2> Tamao de la fuente </font>
Ing. Eduardo Gmez lvarez

Universidad Nacional Experimental Francisco de Miranda


Vice-Rectorado Acadmico
rea Ciencias de la Educacin
Aprendizaje Dialgico Interactivo

Programa:
Matemtica Mencin Informtica
Unidad Curricular: Sistema de Informacin I

Estructura Bsica de un archivo html

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN>

<HTML>

<HEAD>

<TITLE>Mi primera pagina web</TITLE>

</HEAD>

<BODY>

Hola Mundo

</BODY>

</HTML>
Crear un documento . html en un editor de texto
aplicaiones--> accesorios-->> editor de textos

Ing. Eduardo Gmez lvarez

Universidad Nacional Experimental Francisco de Miranda


Vice-Rectorado Acadmico
rea Ciencias de la Educacin
Aprendizaje Dialgico Interactivo

Programa:
Matemtica Mencin Informtica
Unidad Curricular: Sistema de Informacin I

Otras Etquetas <table></table>

<center> Universidad Nacional Experimental<br>


"Francisco de Miranda"</center>
<HR width="600" align="left">
<TABLE border=1>
<TR>
<TD>1ra Col de la 1ra Fila</TD>
<TD>1ra Col de la 1ra Fila</TD>
<TD>1ra Col de la 1ra Fila</TD>
</TR>
</TABLE>
Ing. Eduardo Gmez lvarez

- Analizar el uso de las Base de Datos, en el desarrollo o soluciones de problemas.

Universidad Nacional Experimental Francisco de Miranda


Vice-Rectorado Acadmico
rea Ciencias de la Educacin
Aprendizaje Dialgico Interactivo

Programa:
Matemtica Mencin Informtica
Unidad Curricular: Sistema de Informacin

HTML
Autoevaluacin
1.

2.

3.

Para que un texto HTML tenga las propiedades negrita y cursiva, la representacin correcta
de la etiquetas ser <b><i>aqui va el texto</b></i>
a.
Verdadero
b.
Falso
Cul de las siguientes etiquetas nos permite darle un ttulo al documento HTML.
a.
<HEAD>
b.
<BODY>
c.
<TITLE>
d.
<HTML>

Cul de las siguientes etiquetas establece las caracterstica del texto para el documento.

b.

a. <FONT>
<COLOR>
c. <size>

Ing. Eduardo Gmez

Universidad Nacional Experimental Francisco de Miranda


Vice-Rectorado Acadmico
rea Ciencias de la Educacin
Aprendizaje Dialgico Interactivo

Programa:
Matemtica Mencin Informtica
Unidad Curricular: Sistema de Informacin

HTML

Resumen>>

Un archivo HTML tendr extensin .htm O .html. Dado que el


navegador web lee el archivo por medio de etiquetas HTML
especficas, la pgina web mostrada como salida al usuario puede
variar de un navegador a otro navegador
Cualquier cdigo HTML comprende dos componentes: etiquetas y
atributos. Mientras que las etiquetas permiten que el texto HTML
lleve a cabo un determinado proceso como formatear o enlaces, los
atributos controlan la presentacin y aspecto de los textos.
Se han desarrollado una variedad de editores HTML que
proporcionan una forma fcil de desarrollar documentos HTML.
Algunas ventajas del HTML
.- Se puede compartir grandes cantidades de datos a travs del
mundo.
.- El HTML es fcil de aprender ya que tiene un conjunto de
etiquetas

Ing. Eduardo Gmez

Universidad Nacional Experimental Francisco de Miranda


Vice-Rectorado Acadmico
rea Ciencias de la Educacin
Aprendizaje Dialgico Interactivo

Programa:
Matemtica Mencin Informtica
Unidad Curricular: Sistema de Informacin

HTML

Proxima asesora>>

rowswpan=n
Se asignan ala etiqueta <TD>, denota
el nmero de filas que se van
extenden en una celda.por ejemplo,
rowspan=6 fusiona seis filas
colswpan=n
Se asignan a la etiqueta <TD>, denota
el nmero de columnas que se van
extenden en una celda.por ejemplo,
colspan=6 fusiona seis columnas
Ing. Eduardo Gmez

Universidad Nacional Experimental Francisco de Miranda


Vice-Rectorado Acadmico
rea Ciencias de la Educacin
Aprendizaje Dialgico Interactivo

Programa:
Matemtica Mencin Informtica
Unidad Curricular: Sistema de Informacin

HTML

rowswpan=n
Enlaces

Proxima asesora>>

colswpan=n

asignan ala etiqueta <TD>, denota Se asignan a la etiqueta <TD>, denota


<aSe
href=http://www.unefm.edu.ve>UNEFM</a>

el nmero de filas que se van


extenden en una celda.por ejemplo,
rowspan=6 fusiona seis filas
Etiqueta Atributo
Direccin
Ancla

el nmero de filas que se van


extenden en una celda.por ejemplo,
colspan=6 fusiona seis columnas
Texto de
Cerrar
enlace
etiqueta

<a href=sintesiscuriicula.html>Curruculum Vitae</a>

Ing. Eduardo Gmez

Universidad Nacional Experimental Francisco de Miranda


Vice-Rectorado Acadmico
rea Ciencias de la Educacin
Aprendizaje Dialgico Interactivo

Programa:
Matemtica Mencin Informtica
Unidad Curricular: Sistema de Informacin

HTML

Proxima asesora>>

Imagenes
La Etiqueta <IMG>
La referencia a la imagen se denomina sorce (fuente) y esta
Indicada por el atributo src=..., apunta a un archivo de
imagen
Otros atributos alt=.., height=..., width=... border =n
align=...

<IMG src=http://www.unefm.edu.ve/imagenes/francisco.jpg alt=Francisco de


Miranda
>

<IMG src=logo.jpg> el nombre del archivo de la imagen esta en la


misma carpeta del documento html
Ing. Eduardo Gmez

Universidad Nacional Experimental Francisco de Miranda


Vice-Rectorado Acadmico
rea Ciencias de la Educacin
Aprendizaje Dialgico Interactivo

Programa:
Matemtica Mencin Informtica
Unidad Curricular: Sistema de Informacin

HTML

Asignacin>>

Disear una pgina web que contenga lo siguiente:


Una tabla con 3 columnas y 2 filas en la primera fila ,
primera columna,segunda columna, tercera columna
NOMBRE-APELLIDO-CEDULA(negritas y cursivas) y debajo
sus datos respectivos.

Ing. Eduardo Gmez