introducción a la creación de páginas web
Post on 16-Apr-2017
185 Views
Preview:
TRANSCRIPT
<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>
www.antonioguridi.com
II. Estructura de un documento html
www.antonioguridi.com
II. Estructura de un documento html
Visualización en navegador
Estructura de un sitio web
www.antonioguridi.com
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">
www.antonioguridi.com
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>
www.antonioguridi.com
III. Etiquetas útiles y estilos
<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>
www.antonioguridi.com
III. Etiquetas útiles y estilos
<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>
www.antonioguridi.com
III. Etiquetas útiles y estilos
<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>
www.antonioguridi.com
III. Etiquetas útiles y estilos
<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:
www.antonioguridi.com
IV. Ejemplo de plantilla de sitio web
www.antonioguridi.com
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?
www.antonioguridi.com
top related