HTML, CSS, JAVASCRIPT: Crea tu web Responsive 1

Web basica HTML

El esqueleto de nuestra web con codigo HTML sera asi:

<!DOCTYPE html>

<html>

<head>

<title>

Mi primera web

</title>

</head>

<body>

</header>

<nav>

</nav>

</article>

</section>
<ASIDE>
</ASIDE>
<footer>
</footer>

</body>

</html>

Pon el codigo anterior en el editor de textos y grabalo como index.html, asi se suele nombrar la pagina principal.

Si ejecutas dicha pagina en un navegador web o desde el menu de Notepad++ le damos a “ejecutar / lanzar en …” podremos ver que el contenido de la web esta en blanco, excepto el titulo que aparecera en la ventana superior o solapa del navegador.

El código es básico, pero tiene todas las etiquetas que forman la estructura de nuestra pagina web, como observais las etiquetas suelen ir emparejadas una abre y otra cierra, con algunas excepciones que ya iremos viendo.

El inicio del documento <!DOCTYPE> es la declaración del documento.

Despues tenemos la etiqueta <html> que abre y cierra toda nuestra web </html>, engloba todo el documento.

En <head> se incluye la parte de declaración no visible de la web en si, donde enlazamos con el documento CSS para dar estilo a la web, ponemos su titulo e incluimos las descripciones y palabras claves, las llamadas “metas”, esta etiqueta se cierra con </head>.

Pasamos ahora a la etiqueta <body> aquí es donde va todo el contenido visible de nuestra web, donde incluiremos textos, imágenes, videos, etc; se cierra con </body>.

Dentro del body o cuerpo de la web tenemos:

· Header, donde situamos la cabecera de la web, logotipo, titulo principal, etc.

· Nav, aquí incluiremos la barra de menus o navegación de nuestra web.

· Section, en esta etiqueta incluiremos los contenidos, dentro de ella usaremos los Article, es la parte principal de la web.

· Aside, es como la parte complementaria de la web, donde ponemos las redes sociales, publicidad, etc, no es la parte imprescindible de la web.

· Footer, es el pie de nuestra pagina web, donde se suele poner el contador de visitas o el copyright entre otros.

Una vez vista la base de nuestra web, pasamos a ver y preparar cada etiqueta.

Head

En el head vamos a poner las metas indicando las palabras claves, descripción, lenguaje usado, autor, código para los caracteres y enlace al documento CSS que dara formato a nuestra web, el código del head es:

<html>

<head>

<meta charset="UTF-8">

<meta name="language" content="Spanish">

<meta name="author" content="Jose Ojeda">

<meta name="description" content="mi primera web">

<meta name="keywords" content="web,diseño,html,css">

<link rel="stylesheet" href="css/estilos.css" type="text/css"/>

<title>

Mi primera web

</title>

</head>

Como se ve en el código las metas tienen su nombre y el contenido, en charset hemos puesto utf-8 para que no se vean raros los caracteres con acentos o “ñ”, en link hemos puesto la referencia o enlace al documento CSS que crearemos una vez terminada la estructura.

Header

En el header vamos a introducir el titulo de nuestra web, poniendo en su código lo siguiente:

<header>

<h1>Mi Web</h1>

<p>diseñada por Jose Ojeda</p>

</header>

En el código hemos introducido un titulo h1 y un párrafo, los títulos van numerados en orden de tamaño a h1, h2, h3…

Nav

En la barra de navegación vamos a incluir botones de menu a Inicio, Blog, Nosotros y Contacto, quedando el código asi:

<nav>

<ul>

<li><a href="#">Inicio</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">Nosotros</a></li>

<li><a href="#">Contacto</a></li>

</ul>

</nav>

Para esto hemos usado la etiqueta <ul> de listas desordenadas en la que incluimos los ítems mediante <li> y dentro de estos los enlaces mediante la etiqueta <a> apuntando al documento que pongamos en sustitución de “#” que cambiaremos en cuanto lo preparemos mas adelante; para mostrar el texto que aparecerá en el enlace lo hacemos mediante las palabras incluidas entre <a> y </a>.

Section, Article

En este apartado incluiremos el contenido principal de nuestra web, la sección “section” podrá contener varios artículos “article”, el código base lo formamos de la siguiente forma:

<section>

<article>

<hgroup>

<h2>Titulo del articulo</h2>

</hgroup>

<p>Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

</p>

<p>Parrafo2 de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

</p>

</article>

</section>

Hemos incluido dentro de “Article” la etiqueta “hgroup” donde englobamos los encabezados, en este caso incluimos un encabezado de orden 2, “h2”.

Despues incluimos la etiqueta de párrafo “p” y cada salto de línea con “br”, en el ejemplo incluimos dos párrafos para que se vea bien el contenido.

Aside

Como indicamos al principio, en este apartado se incluirá el contenido secundario de nuestra web, como pueden ser enlaces a otras webs, redes sociales, publicidad, etc.

<aside>

<div id="enlacesexternos">

<h2>Enlaces:</h2>

<ul>

<li><a href="materialpalette.com">Paleta de Colores</a></li>

<li><a href="http://www.ticoticotaa.es">Tutoriales</a></li>

</ul>

</div>

<div id="redessociales">

<h2>Sigueme:</h2>

</div>

</aside>

Como veis en esta ultima parte de código, hemos introducido dentro del “aside” dos “divs” con sus respectivos nombres diferenciadores para poder manejarlos cuando entremos con CSS, un div lo vamos a dedicar a los enlaces externos y el otro a las redes sociales.

Footer

Llegamos ya a la parte final de nuestra web, el pie de pagina, en este caso incluiremos el copyright y quien diseña la plantilla, mediante dos “divs” que diferenciaremos con CSS, el código del footer es:

<footer>

<div id="creacion"><cite>Plantilla creada por Jose Ojeda</cite></div>

</footer>

Con el ejemplo que estamos realizando, actualmente nuestra web se ve de la siguiente forma:

El código html completo es el siguiente:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="language" content="Spanish">

<meta name="author" content="Jose Ojeda">

<meta name="description" content="mi primera web">

<meta name="keywords" content="web,diseño,html,css">

<link rel="stylesheet" href="css/estilos" type="text/css"/>

<title>

Mi primera web

</title>

</head>

<body>

<header>

<h1>Mi Web</h1>

<p>diseñada por Jose Ojeda</p>

</header>

<nav>

<ul>

<li><a href="#">Inicio</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">Nosotros</a></li>

<li><a href="#">Contacto</a></li>

</ul>

</nav>

<section>

<article>

<hgroup>

<h2>Titulo del articulo</h2>

</hgroup>

<p>Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

</p>

<p>Parrafo2 de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

</p>

</article>

</section>

<aside>

<div id="enlacesexternos">

<h2>Enlaces:</h2>

<ul>

<li><a href="materialpalette.com">Paleta de Colores</a></li>

<li><a href="http://www.ticoticotaa.es">Tutoriales</a></li>

</ul>

</div>

<div id="redessociales">

<h2>Sigueme:</h2>

</div>

</aside>

<footer>

<div id="creacion"><cite>Plantilla creada por Jose Ojeda</cite></div>

</footer>

</body>

</html>

Una vez llegado a este punto, podemos proceder a dar formato a nuestra web usando CSS, lo veremos en la proxima entrada. Gracias.

miércoles, 26 de abril de 2017

Crea tu web Responsive 1

Web basica HTML

Head

Header

Nav

Section, Article

Aside

Footer

No hay comentarios:

Publicar un comentario

Vistas de página en total

Licencia