Introduccion HTML

HTML
Hyper Text Markup Language

Vista de la pgina en un navegador de Internet
Vista del cdigo fuente de la pgina
Hyper Text Markup Language: lenguaje de marcas de hipertexto
HTML funciona a travs de etiquetas, las cuales son

interpretadas por el navegador.
As podemos ver imgenes, texto, prrafos y otras estructuras en

una pgina web, y no el simple cdigo.
Los navegadores como Chrome o Firefox y otros, son traductores
de HTML que digieren todo este cdigo y lo convierten en algo
visible para nosotros.
<img src=/graficos/pingui.jpg width=140 height=210 border=0

alt=Una foto >
Cada etiqueta tiene un nombre y encierra en ella un determinado
significado. Las etiquetas se escriben con los signos mayor y menor
<html> es la etiqueta de apertura y </html> es la etiqueta de cierre.
No todas las etiquetas se cierran.
Las etiquetas que se cierran, se tienen que cerrar de acuerdo a como se

abren.
Indentar es una buena prctica tambin en html

Por ejemplo, la etiqueta <title> define el ttulo de un documento.
Esta etiqueta es obligatoria dentro de la seccin head.
La etiqueta <title> se muestra en la barra superior del navegador.
<title> Somos el Grupo C de IP </title>

Para crear nuestra primera pgina web, vamos a abrir el Bloc de notas
de Windows. El archivo lo debemos guardar con extensin html.
Usuarios Mac:
Pueden utilizar el TextEdit
Lo podemos nombrar: index.html Est en Aplicaciones

Una pgina tiene dos secciones muy definidas, que son la
cabecera y el cuerpo.
<head>
<title>Somos el grupo C de IP</title>
<head>
<body>
Cuerpo de la pgina
</body>
La etiqueta <html> en este caso est indicando el inicio de un
documento HTML, y esta informacin es leda por el navegador.
<html>
<head>
<title>Somos el grupo C de IP</title>
<head>
<body>
Cuerpo de la pgina
</body>
</html>
A continuacin algunas etiquetas que debemos aprender:
Salto de lnea <br> Imgenes dentro de una pgina <img>
Prrafo <p> Lista ordenada (<ol>)
Lista no ordenada (<ul>)

Ttulos <h1><h2><h3>
Otras etiquetas HTML <div> <span> <table>
Hipervnculo a otro sitio de internet <a>
La primera lnea debe ser el DOCTYPE
Es obligatorio ponerla, y muy importante.
No es una etiqueta, y por eso es tan rara, va en maysculas, y no se

cierra.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Iniciemos con la prctica:
<html>
<head>
<title>La ciudad de Villahermosa</title>
<head>
<body>
<h1>Villahermosa, la esmeralda del Sureste</h1>
<h3>Tierra de los Olmecas</h3>
<br />
<p>Es una ciudad rodeada por el agua.</p>
<p>Por lo mismo contamos con diversos recursos naturales.</p>
</body>
</html>
Hasta aqu hemos visto algunos
elementos bsicos.
Sigamos avanzando agreguemos

una imagen.
Nota: el archivo de imagen de nombre cabeza.jpg debe copiarse en la misma
carpeta que est nuestro archivo index.html
<html>
<head>
<head>
<body>
<h1>Villahermosa, la esmeralda del Sureste</h1>
<img src="cabeza.jpg" alt="Cabeza Olmeca" border=2>
<br />
<p>Es una ciudad rodeada por el agua.</p>
</body>
</html>
Conceptos bsicos de hojas de estilo: CSS (Cascade Style Sheet)
Es una tecnologa que separa el contenido de la presentacin.
Utilizando HTML disponemos del contenido y con CSS

definimos la presentacin de ese contenido.
Para asignarle color al prrafo podemos hacer algo as:
<p style="color:#888888;background-color:#ffffdd">
Pgina con los cdigos de color en hexadecimal:
http://www.december.com/html/spec/colorsafe.html
<html>
<head>
<head>
<body>
<h1 style="color:cc6600;font-size:34px">Villhaermosa, la esmeralda del Sureste</h1>
<br />
<p style="color:#ff0033;background-color:#cccc33;font-size:18px">Es una
ciudad rodeada por el agua.</p>
</body>
</html>
La etiqueta <div> se utiliza para definir una seccin dentro del documento.
<body>
<h1 style="color:#cc6600;font-size:34px">Villhaermosa, la esmeralda del Sureste</h1>
<br />
<p style="color:#ff0033;background-color:#cccc33;font-size:18px">Es una ciudad rodeada
por el agua.</p>
<div style="color:#ffffff;background-color:#ff9900;height:150px">
Busquemos Villahermosa en google:
</div>
</body>
</html>
La etiqueta <a> define un ancla y puede ser usado para establecer un vnculo a otro documento.
<h1 style="color:#cc6600;font-size:34px">Villhaermosa, la esmeralda del Sureste</h1>

<br />
<p style="color:#ff0033;background-color:#cccc33;font-size:18px">Es una ciudad rodeada por
el agua.</p>
<a href="http://google.com">Busquemos Villahermosa en google</a>
</div>
</body>
</html>
La etiqueta <ul> se utiliza para crear una lista desordenada.
<p style="color:#ff0033;background-color:#cccc33;font-size:18px">Es una ciudad

rodeada por el agua.</p>
<a href="http://google.com">Busquemos Villahermosa en google</a>
<p>Podemos buscar aspectos relacionados con:</p>
<ul>
<li>Petrleo</li>
<li>Ganadera</li>
<li>Agricultura</li>
<li>Educacin</li>
</ul>
</div>
</body>
</html>

Introduccion HTML

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Introduccion HTML

Cargado por

Copyright:

Formatos disponibles

HTML

Hyper Text Markup Language

HTML funciona a travs de etiquetas, las cuales son

As podemos ver imgenes, texto, prrafos y otras estructuras en

<img src=/graficos/pingui.jpg width=140 height=210 border=0

<html> es la etiqueta de apertura y </html> es la etiqueta de cierre.

No todas las etiquetas se cierran.

Las etiquetas que se cierran, se tienen que cerrar de acuerdo a como se

Indentar es una buena prctica tambin en html

La etiqueta <title> se muestra en la barra superior del navegador.

<title> Somos el Grupo C de IP </title>

Pueden utilizar el TextEdit

Lo podemos nombrar: index.html Est en Aplicaciones

Salto de lnea <br> Imgenes dentro de una pgina <img>

Prrafo <p> Lista ordenada (<ol>)

Lista no ordenada (<ul>)

Es obligatorio ponerla, y muy importante.

No es una etiqueta, y por eso es tan rara, va en maysculas, y no se

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Sigamos avanzando agreguemos

Es una tecnologa que separa el contenido de la presentacin.

Utilizando HTML disponemos del contenido y con CSS

Para asignarle color al prrafo podemos hacer algo as:

<h1 style="color:#cc6600;font-size:34px">Villhaermosa, la esmeralda del Sureste</h1>

<p style="color:#ff0033;background-color:#cccc33;font-size:18px">Es una ciudad

También podría gustarte