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

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
<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">

<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>
<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>

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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Introducción a la creación de páginas web

Similar a Introducción a la creación de páginas web (20)

Último

Último (8)

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