introducción a la creación de páginas web

<h1>Introducción al lenguaje marcado<h1>

{ Antonio Guridi } www.antonioguridi.com

Hyper

Text

Language

Markup

Otros lenguajes marcados son:

XML XHTML

I. ¿Qué es un lenguaje marcado?

Un lenguaje marcado es un conjunto de etiquetas.

HTML es un lenguaje con marcas que sirven para describir documentos (páginas web).

Los documentos en HTML son descritos por las etiquetas HTML

Cada etiqueta HTML describe un contenido diferente del documento

www.antonioguridi.com

II. Estructura de un documento html

<!DOCTYPE html> <html> <head> <title>Mi primera web</title> </head> <body> <h1>Mi primer encabezado</h1> <p>Mi primer párrafo.</p> </body> </html>



Visualización en navegador

Estructura de un sitio web


III. Etiquetas útiles y estilos

<h1>Mi primer encabezado</h1> <h2>Mi primer encabezado</h2> <h3>Mi primer encabezado</h3> <h4>Mi primer encabezado</h4> <h5>Mi primer encabezado</h5> <p>Lorem ipsum dolor sit amet</p> </br> <p>Sed ut perspiciatis unde omnis</p> </br> <a href="http://www.google.com/es/">Esto es un enlace</a> <img src="otonyo.jpg" alt="Paisaje de Otoño" width="204" height="242">


III. Etiquetas útiles y estilos <h3> Ejemplo de lista</h3> <ul> <li> Lorem Ipsum dolor sit amet.</li> <li> Consectetuer adipiscing elit.</li> <li> Sed ut perspiciatis unde omnis</li> <li> Nemo enim ipsam voluptatem quia.</li> </ul> <h3> Ejemplo de tabla</h3> <table border="1"> <tr> <th># ID</th> <th>Name</th> <th>User</th> </tr> <tr> <td>1</td> <td>Nombre1</td> <td>Usuario1</td> </tr> <tr> <td>2</td> <td>Nombre2</td> <td>Usuario2</td> </tr> <tr> <td>3</td> <td>Nombre3</td> <td>Usuario3</td> </tr> </table>



<h3>Ejemplo de Formulario</h3> Nombre: <input type="text" name="nombre" /></br> </br> Apellido: <input type="text" name="apellido" /><br /> </br> <input type="submit" name="enviar" value="Enviar" /> <input type="reset" name="borrar" value="Borrar" /> <h3>Ejemplo de script</h3> <p id="demo"></p> <script type="text/javascript" > document.getElementById("demo").innerHTML = Date(); </script>



<h1 style="text-align:center">Mi primer encabezado</h1> <h2 style="font-family:verdana">Mi primer encabezado</h2> <h3 style="color:blue">Mi primer encabezado</h3> <h4 style="background-color:lightgrey">Mi primer encabezado</h4> <h5>Mi primer encabezado</h5> <p style="font-family:verdana">Lorem ipsum dolor sit amet</p> </br> <p style="font-size:160%"><b>Sed ut</b> perspiciatis unde omnis</p> </br>



<html> <head> <style> body {background-color:lightgrey} h1 {color:blue} p {color:green} </style> </head> <body> <h1>Esto es un encabezado</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p> </body> </html>



<html> <head> <link rel="stylesheet" href="estilos.css"> </head> <body> <h1>Esto es un encabezado</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p> </body> </html>

Archivo html y hoja de estilos:


IV. Ejemplo de plantilla de sitio web


Puedes crear webs sencillas

Puedes jugar con el código de otras páginas

Sirve para escribir en Internet e incrustar contenido de otras web

Es cultura general

Aprender es crecer

V. Conclusión

¿Por qué aprender HTML?


<h1><b>¡¡ Muchas Gracias!!</b><h1>


gracias.html