HTML 2

SERVICIO NACIONAL DE APRENDIZAJE
TECNICO EN SISTEMAS
UGO ANDRES SANCHEZ BAEZA
INSTRUCTOR SENA
INTEGRACION CON LA MEDIA TECNICA
I.M.T. SENA
Competencia
220501900 Aplicar herramientas ofimáticas,
redes sociales y colaborativas de acuerdo con
el proyecto a desarrollar.
Competencia Especifica
220500190001 utilizar un lenguaje de
programación orientado a eventos y
manejador de Base de Datos, combinados con
herramientas Ofimáticas de acuerdo con las
necesidades del cliente.
Resultados de Aprendizaje
Utiliza en forma responsable un lenguaje de
programación orientado a eventos y manejador de
base de datos, combinados con herramientas
ofimáticas aplicando las estructuras propias de
estos en la resolución de problemas de acuerdo con
las necesidades del clientes y las tendencias de las
tecnologías de la información y de la comunicación.
HTML
HTML
HTML Permite crear tu propia

pagina web.
Hypertext Markup Language.
Lenguaje de marcación de
hipertexto.
Es un lenguaje fácil de
aprender.
Hipertexto : Texto sonido he

imágenes al mismo tiempo.
<> </>
El < y el > indican un comando. Todo lo que se
</body> abre se debe cerrar.
<html>
<HTML> abre el archivo html (se coloca
<head> cortésmente para indicar que se trabaja
</head> usando este tipo de interpretación , HTML).
<body> <head> marca el inicio de la cabeza. (no se
publica )
</head> cierra el encabezado.
<h1>Mi primera titulo</h1> <body > marca el inicio del cuerpo , aparece
publicado.
<p>Mi primer Párrafo </p>
Todo lo que se abre se cierra.
</body> </body> Cierra el cuerpo del documento.

</html> </HTML>cierra el archivo html.
<!DOC type
• Según el W3C (y WDG) los
ficheros HTML (páginas
Web normales) deben
tener una serie de
"cabeceras" o
identificadores de la
versión que se utiliza.
Aunque esto no es
estrictamente necesario,
la W3C lo recomienda
para que se siga la
"norma".
>
Ejemplo :
<!DOCTYPE HTML PUBLIC "-

//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/stric
t.dtd">
Esto declara el documento para ser HTML 4.01

estricto. El HTML 4.01 estricto es ajustado abajo
de la versión del HTML 4.01 que acentúa la
estructura sobre la presentación. Los elementos
y las cualidades (cualidades más presentational
incluyendo), los marcos, y las blancos
desaprobados del acoplamiento no se permiten
en HTML 4 terminante. Escribiendo a HTML 4
terminante, los autores pueden alcanzar los
documentos accesibles, estructural ricos que se
adaptan fácilmente a las hojas del estilo y a
diversas situaciones el hojear. Sin embargo,
desde muchos browsers el apoyo total de la
carencia para el estilo cubre, HTML 4 que los
documentos terminantes pueden parecer suaves
en más viejos browsers visuales tales como
Netscape Navigator 3.x.
<head>
Head = Cabeza
El encabezado es lo que
no aparece al ser
publicada la pagina.
Aquí encontramos cosas
como el titulo.
Las meta-marcas y los
encabezados del css.
Metatags 1
• Las metatags son etiquetas html que se
incorporan en el encabezado de una
página web y que resultan invisibles para
un visitante normal, pero de gran utilidad
para navegadores, motores de busqueda u
otros programas que puedan valerse de
esta información.
• Su propósito es el de incluir información

(metadatos) de referencia sobre la página:
autor, título, fecha, palabras clave,
descripción, etc.
• Sintaxis
<meta name="" content=""/>
<meta name="keywords"
content="Metatags,Buscador,HTML,Págin
a web" />
Metatags 2
<HEAD>
Ubicación de la pagina Web
profile="http://www.juanvaldez.com/hojadevi
da/">
Titulo de la pagina Web

<TITLE>Pagina personal de Juan
Perez</TITLE>
Autor de la pagina
<META name="author" content="Juan Perez">
Idioma de la pagina
<META name=“language" content=“es">
Metatags 3
Hacer el copyright
<META name="copyright" content="©
2011 juan valdez.">
Palabras Clave
<META name="keywords" content=“hoja de
vida, informacion personal, datos
laborales">
Fecha de la pagina
<META name="date" content=“2010-11-
06T08:49:37+00:00">
Identificación en los motores de

búsqueda.
<META name=“robots" content=“all">
</HEAD>
</head>
Existen muchísimas formas de usar
los metatags, pero se usan
principalmente para que las paginas
web sean identificadas por los robots
de los motores de búsqueda y así
sean clasificadas e identificadas
correctamente en una búsqueda.
Esto se le llama Search Engine
Optimization (SEO, Posicionamiento
en los motores de búsqueda). Es lo
que hace que un buscador el nombre
de una empresa especifica o servicio
aparezca de primero en la lista .
http://es.wikipedia.org/wiki/Posicionamiento_en_buscadores
<body> </body>
Body = cuerpo
Se abre el contenido del
cuerpo, aquí es donde
trabajamos para que lo que
hacemos se vea en la pagina
web.
El cuerpo es lo que aparece
realmente publicado en la
web. Aquí debemos tener
cuidado con lo que
publicamos y como lo
ordenamos.
Editores para crear una Pagina Web
• Notepad
• Wordpad
• Kompozer
• Notepad ++
• Frontpage
• Zend Studio
• Coda
• Textmate
• Aptana
• Komodo
• Quanta plus
• Dreamweaver
Etc.
• Todos los licenciados claman ser editores
WYSIWYG, What You See Is What You Get
(Lo que ves es lo que obtienes).
Creando una pagina web
<body>
<h1> Los encabezados</h1>
<h3> Los encabezados </h3>
<h5> Los encabezados </h5>
<p>Este es un párrafo >/p>
<a href=“Este es un enlace”> enlace </a>

<img src=”cuadro.jpg” width=“200”
height=”200”/>
</body>
Pagina Web con toda su contenido
HEAD BODY
<HTML> <BODY>
<HEAD> <h1> Los encabezados</h1>
<!Ubicación de la pagina Web > <h2> Los encabezados</h2>
<META profile="http://www.juanvaldez.com/hojadevida/"> <h3> Los encabezados </h3>
<!Titulo de la pagina Web> <h4> Los encabezados</h4>
<TITLE>Pagina personal de Juan Perez</TITLE> <h5> Los encabezados </h5>
<!Autor de la pagina> <h6> Los encabezados</h6>
<META name="author" content="Juan Perez"> <p>Este es un párrafo >/p>
<!Idioma de la pagina> <br>
<META name=“language" content=“es"> <a href=“Este es un enlace”> enlace </a>
<!Hacer el copyright> <img src=”cuadro.jpg” width=“200” height=”200”/>
<META name="copyright" content="© 2011 juan valdez."> </BODY>
<!Palabras Clave> </HTML>
<META name="keywords" content=“hoja de vida, informacion personal,
datos laborales">
<!Fecha de la pagina>
<META name="date" content=“2010-11-06T08:49:37+00:00">
<!Identificación en los motores de búsqueda.>
<META name=“robots" content=“all">
</HEAD>
Editor WEB
Muchas Gracias!
SERVICIO NACIONAL DE APRENDIZAJE – SENA
CENTRO DE ELECTRICIDAD Y AUTOMATIZACION INDUSTRIAL - C.E.A.I
INTEGRACION CON LA MEDIA TECNICA –IMT
INSTRUCTOR
UGO ANDRES SANCHEZ BAEZA
ugoandresprofesor@yahoo.com

HTML 2

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML 2

Uploaded by

Copyright:

Available Formats

SERVICIO NACIONAL DE APRENDIZAJE

HTML Permite crear tu propia

Hypertext Markup Language.

Hipertexto : Texto sonido he

</body> </body> Cierra el cuerpo del documento.

<!DOCTYPE HTML PUBLIC "-

Esto declara el documento para ser HTML 4.01

• Su propósito es el de incluir información

Titulo de la pagina Web

Identificación en los motores de

<a href=“Este es un enlace”> enlace </a>

SERVICIO NACIONAL DE APRENDIZAJE – SENA

CENTRO DE ELECTRICIDAD Y AUTOMATIZACION INDUSTRIAL - C.E.A.I

INTEGRACION CON LA MEDIA TECNICA –IMT

You might also like