pagina web con doctype

4

Click here to load reader

Upload: cristian-guevara

Post on 08-Jul-2015

132 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Pagina web con doctype

Pagina web Primero abrimos NOTEPAD ++

Estando en el notepad++ colocamos en el encabezado <! DOCTYPE>

Debemos seguir con la estructura de HTML explicaremos para que sirven algunos

codigos del lenguaje HTML como lo son:

HEAD:es el titulo de la pestaña en el navegador

BODY: es el div agrupa una serie de elementos que van a ser cambiados por el

maqueteador CSS

P: para poner el texto en la imagen

HEADER: Esta es una etiqueta de HTML

NAV:empleamos un menu para navegar empleando el tag nav

UL: Es un lista no ordenada en el menu

Page 2: Pagina web con doctype

ASIDE:este es para los bloques de la izquierda a la derecha se emplea el tag aside

FOOTER:Este se utiliza para crear el pie de pagina

Empleando los tags anteriores la pagina nos queda de esta manera

<!DOCTYPE

>

<html>

<!----RECUERDE QUE ESTE ES EL TAG PARA COMENTATRIOS----

>

<HEAD>

<!----es el titulo de la pestaña que va a salir en el navegador--->

<title>pagina en html</title>

</HEAD>

<body>

<!--el div agrupa una serie de elememtos que van a ser cambiados por el

maqueteadorcss --->

<div div="todo">

<header>

<h1>ESTRUCTURA DE UNA PAGINA EN HTML 5</h1>

<p>aqui aprendemos a realizar una esctructura para paginas </p>

<!--colocamos un menu para poder navegar empleando el tagnav --->

<nav>

<ul>

<!--lista no ordenada de nuestro menu--->

<li><a href="">INICIO </a></li>

<li><a href="">CONSOLA </a></li>

<li><a href="">INFORMATICA </a></li>

<li><a href="">TELEFONIA </a></li>

</ul>

</nav>

<!--PARA LOS BLOQUES TANTO DE LA DERECHA COMO LA

IZQUIERDA SE EMPLEA EL TAG ASIDE--->

<aside id="izquierda">

<p>este es un parrafo que colocaremos en la parte izquierda de nuestra

web</p>

</aside>

Page 3: Pagina web con doctype

<aside id="DERECHA">

<p>este es un parrafo que colocaremos en la parte derecha de nuestra

web</p>

</aside>

<!---los tiutlos principales se ubican con un tagllamdosection--->

<section>

<article>

<h1>ARTICULO UNO</h1>

<p>este es un parrafo que pertenece al articulo uno</p>

</article>

<article>

<h1>ARTICULO DOS</h1>

<p>este es un parrafo que pertenece al articulo dos</p>

</article>

<article>

<h1>ARTICULO TRES</h1>

<p>este es un parrafo que pertenece al articulo tres</p>

</article>

<article>

<h1>ARTICULO CUATRO</h1>

<p>este es un parrafo que pertenece al articulo cuatro</p>

</article>

</section>

<!---EL PIE DE PAGINA SE ESCRIBE CON EL TAG FOOTER----->

<footer>

<p>aqui colocaremos nuestro pie de pagina</p>

</footer>

</header>

</div>

</body>

</html>

Al ejecutar el anterior codigo la pagina queda de esta manera

Page 4: Pagina web con doctype