Publicado el Deja un comentario

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>

</header>

<nav>

</nav>

<section>

<article>

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

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

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

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

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

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

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

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

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

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

Parrafo 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=”https://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=”copyright”><cite>Derechos reservados
2017</cite></div>

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

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

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

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

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

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

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

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

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

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

Parrafo 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=”https://www.ticoticotaa.es”>Tutoriales</a></li>

</ul>

</div>

<div
id=”redessociales”>

<h2>Sigueme:</h2>

</div>

</aside>

<footer>

<div
id=”copyright”><cite>Derechos reservados
2017</cite></div>

<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.
Please follow and like us:

Deja un comentario