paginas web

HTML Y CSS

Estructura


<!doctype>
<html>
<!--todo esto no se vera en el navegador-->
<head>
<title>
pagina web html 5
</title>
</head>
<body>
<h1>hola soy h1</h1>
<h2>hola soy h2</h2>
<h3>hola soy h3</h3>
<p>
hola soy un parrafo echo en html 5
<p>
<ul>
<li>fila 1</li>
<li>fila 2</li>
<li>fila 3</li>
</ul>
<ol>
<li>fila 1</li>
<li>fila 2</li>
<li>fila 3</li>
</ol>
<table border="1">
<tr>
<td> columna 1 fila 1
</td>
<td> columna 2 fila 1
</td>
</tr>
<tr>
<td> columna 1 fila 2
</td>
<td> columna 2 fila 2
</td>
</tr>
</table>
<img src="imagenes/F39Y.jpg"/>
<a href="3.html">ver siguiente pagina</a>
</body>
</html>

Resultado






Pagina en HTML5

ESTRUCTURA

<!DOCTYPE>
<HTML>
<!--RECUERDE QUE ESTE ES EL TAG PARA COMENTARIOS-->
<HEAD>
<TITLE>PAGINA EN HTML 5</TITLE> 
</HEAD> 
<BODY>
<!--el div agrupa una serie de elementos que van a ser cambiados por el maqueteador css-->
<DIV id="TODO">
<header>
<!--header es la cabecera en html5-->
<h1> estructura de una pagina en html5</h1>
<p><h4>aqui aprenderemos a realizar una estructura para paginas web diseñadas en html5</h4> </p>
<!--colocamos el menu para poder navegar empleando el tag nav-->
<nav>
    <ul>
     <li><a href="#"> inicio </a></li>
 <li><a href="#"> sd </a></li>
 <li><a href="#"> fg </a></li>
 <li><a href="#"> gf </a></li>
 <li><a href="#"> gh </a></li>
</ul>
<!--para los bloques que van tanto a la derecha o ala izquierda utilizamos el tag aside-->
<aside id="izquierda">
<p>este es un parrafo que colocaremos a la parte izquierda de nuestra web<p>
</aside>
<aside id="izquierda">
<p>este es un parrafo que ira en la parte derecha de nuestra web</p>
</aside>
<section>
         <article>
 <h1>Articulo uno</h1>
 <p>este articulo pertenece al articulo uno</p>
</article>
                         <article>
 <h1>Articulo dos</h1>
 <p>este articulo pertenece al articulo dos</p>
</article>
                         <article>
 <h1>Articulo tres</h1>
 <p>este articulo pertenece al articulo tres</p>
</article>
</section>
                 <!--el pie de pagina se escribe con el tag footer -->
                 <footer>
                <h6><font color="#33CC00"> aqui colocaremos nuestro pie de pagina</h6>
                 </footer>
</nav>
</div>
</BODY>
</HTML>

RESULTADO


Estructura de audio y video

estructura

<!DOCTYPE>
<HTML>
<!--RECUERDE QUE ESTE ES EL TAG PARA COMENTARIOS-->
<HEAD>
<TITLE>PAGINA EN HTML 5</TITLE> 
</HEAD> 
<BODY>
<!--el div agrupa una serie de elementos que van a ser cambiados por el maqueteador css-->
<DIV id="TODO">
<header>
<!--header es la cabecera en html5-->
<h1> Estructura de una pagina en html5</h1>
<p>aqui aprenderemos a realizar una estructura para paginas web diseñadas en html5 </p>
<NAV>
<UL>
<!--HACEMOS UNA 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="#">TELEFONICA</A> </LI>
</nav>
</UL>
<!--PARA LOS BLOQUES QUE VAN A QUFDAR A LA DERECHA O A LA IZQUIERDA DE LA PAGINA WEB-->
<ASIDE ID="IZQUIERDA">
<P> ESTE ES UN PARRAFO QUE COLOCAREMOS EN LA PARTE IZQUIERDA DE NUESTRA WEB </P>
</ASIDE>
<ASIDE ID="derecha">
<P> ESTE ES UN PARRAFO QUE COLOCAREMOS EN LA PARTE DERECHA DE NUESTRA WEB </P>
</ASIDE>
<!--LOS ARTICULOS PRINCIPALES SE UBICAN CON UN TAG LLAMADO SECTION-->
<SECTION>
<ARTICLE>
<H1>ARTICULO UNO</H1>
<P> ESTE ES UN PARRAFO QUE PERTENECE AL ARTICULO 1 </P>
<video width="400" height="200" controls="controls" proload="proload">
     <source src="imagenes/Ñengo Flow   No Dice Na (Video Oficial).mp4">
 </source>
  </video>
</ARTICLE>
<ARTICLE>
<H1>ARTICULO DOS</H1>
<P> ESTE ES UN PARRAFO QUE PERTENECE AL ARTICULO 2 </P>
</ARTICLE>
<audio controls="controls" src="imagenes/Plan B   Se Cree Mala ( Vídeo Oficial ) La Formula.mp3">
si no sirve utilice otro servidor
</audio>
<ARTICLE>
<H1>ARTICULO TRES</H1>
<P> ESTE ES UN PARRAFO QUE PERTENECE AL ARTICULO 3 </P>
</ARTICLE>
<ARTICLE>
<H1>ARTICULO CUATRO</H1>
<P> ESTE ES UN PARRAFO QUE PERTENECE AL ARTICULO 4 </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>

Resultado


Clic aqui RSS

Clic aqui XML

5 comentarios:

Suscribirse a: Entradas (Atom)