Ejemplos codigo html, css y javascript. Formato web y etiquetas HTML5.
viernes, 29 de enero de 2016
lunes, 25 de enero de 2016
Html5 - 7. Dando estilo con CSS
Retomamos la plantilla web que hemos creado en los apartados anteriores, introduciendo el codigo de enlace que le dara formato (CSS).
Por lo que para continuar, creamos en notepad ++ un archivo llamado hojadeestilo.css, que reproduzco bajo estas lineas:
La etiqueta "*" es un selector comodin o universal que pone todos los valores de la web como le indiquemos, para despues ir cambiando en cada etiqueta detalladamente.
Como pueden observar he puesto 2 etiquetas nuevas en el head del documento html, meta y link, con meta en este caso le decimos al navegador el formato que queremos en cuanto a tipo de escritura, para que no aparezcan simbolos raros con acentos y demas; con link ponemos el enlace a la hoja CSS que dara formato a nuesta pagina.<!DOCTYPE html><html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="hojadeestilo.css">
<title>Mi primera Web</title>
</head>
<body>
<header>
<h1>Cabecera de Mi Web</h1>
<figure><img src="milogo.jpeg"/></figure>
</header>
<nav>
<ul>
<li><a href="index.html">Inicio</a></li><li><a href="acercade.html">Acerca de</a></li>
</ul>
</nav>
<section>
<article>
<hgroup>
<h1>Aqui va el encabezado grande</h1>
<h2>Aqui un encabezado mas pequeño</h2>
</hgroup>
<p>Aqui ponemos un parrafo que es el contenido de nuestra pagina.</p>
<p>Este puede ser un segundo parrafo de nuestra web.</p></article>
<article>
<hgroup>
<h1>Aqui va el encabezado grande del segundo Article</h1>
<h2>Aqui un encabezado mas pequeño</h2></hgroup>
<p>Aqui ponemos un parrafo que es el contenido de nuestra pagina.</p>
<p>Este puede ser un segundo parrafo de nuestra web.</p></article>
</section>
<aside><h1>Siguenos en:</h1>
<ul>
<li><a href="facebook.html">Facebook</a>
</li><li><a href="twitter.html">Twitter</a></li>
</ul></aside>
<footer>
<p>Pagina creada por Ticoticotaa @2016</p>
<ul>
<li><a href="contacto.html">Contacto</a>
</li><li><a href="mapaweb.html">Mapa Web</a></li>
</ul></footer>
</body>
</html>
Por lo que para continuar, creamos en notepad ++ un archivo llamado hojadeestilo.css, que reproduzco bajo estas lineas:
*{En el codigo CSS ponemos la etiqueta seguida de corchetes y dentro de estos los atributos a modificar, en el codigo introduzco margenes, anchos, altos, alineaciones, tamaño de fuentes, colores de fondo y texto, etc.
margin:0 auto;
font-family:Arial;
background-color:yellow;
padding:5px;
}
body {
text-align:center;
}
nav ul li {
display:inline-block;
margin-right:20px;
color:red;
cursor:pointer;
padding:5px;
text-decoration:none;
}
nav ul li a:hover{
color:green;
border-radius:5px;
}
section {
width:79%;
background-color:black;
margin-bottom:10px;
text-align:left;
border-radius:20px;
padding:2px;
box-shadow:0px 0px 20px rgba(0,0,0,0.5);
float:left;
}
aside{
width:19%;
border-radius:10px;
margin-left:3px;
float:right;
}
footer{
clear:both;
width:100%;
height:120px;
margin-top:15px;
border-radius:20px;
padding:10px;
}
h1{
font-size:3em;
color:green;
font-family:'Russo One';
}
h2{
font-size:2m;
color:blue;
font-family:'Russo One';
}
p{
color:black;
}
La etiqueta "*" es un selector comodin o universal que pone todos los valores de la web como le indiquemos, para despues ir cambiando en cada etiqueta detalladamente.
Html5 - Aplicacion Android
Os pongo enlace a la Aplicacion Android para ver este blog directamente desde el movil o tablet.
sábado, 23 de enero de 2016
Html5 - Video Primera Web
En este video se inicia la web como plantilla con todas las etiquetas que hemos visto hasta ahora, desde "header" a "footer".
jueves, 21 de enero de 2016
Html5 - 6. Footer
Hoy pasamos a ver la etiqueta "footer", es la que ponemos al final, para incluir el llamado pie de pagina, donde ponemos los datos de contacto, copyright, etc.
Partiendo del codigo anterior, introducimos esta etiqueta, quedando el codigo de la siguiente forma:
Partiendo del codigo anterior, introducimos esta etiqueta, quedando el codigo de la siguiente forma:
<!DOCTYPE html><html>
<head>
<title>Mi primera Web</title>
</head>
<body>
<header>
<h1>Cabecera de Mi Web</h1>
<figure><img src="milogo.jpeg"/></figure>
</header>
<nav>
<ul>
<li><a href="index.html">Inicio</a></li><li><a href="acercade.html">Acerca de</a></li>
</ul>
</nav>
<section>
<article>
<hgroup>
<h1>Aqui va el encabezado grande</h1>
<h2>Aqui un encabezado mas pequeño</h2>
</hgroup>
<p>Aqui ponemos un parrafo que es el contenido de nuestra pagina.</p>
<p>Este puede ser un segundo parrafo de nuestra web.</p></article>
<article>
<hgroup>
<h1>Aqui va el encabezado grande del segundo Article</h1>
<h2>Aqui un encabezado mas pequeño</h2></hgroup>
<p>Aqui ponemos un parrafo que es el contenido de nuestra pagina.</p>
<p>Este puede ser un segundo parrafo de nuestra web.</p></article>
</section>
<aside><h1>Siguenos en:</h1>
<ul>
<li><a href="facebook.html">Facebook</a>
</li><li><a href="twitter.html">Twitter</a></li>
</ul></aside>
<footer>
<p>Pagina creada por Ticoticotaa @2016</p>
<ul>
<li><a href="contacto.html">Contacto</a>
</li><li><a href="mapaweb.html">Mapa Web</a></li>
</ul></footer>
</body>
</html>
En el pie de pagina o footer hemos introducido 2 enlaces a la web de contacto y a la del mapa de nuestro sitio (paginas que habra que crear para que enlacen), junto con un texto del autor de la web.
Con todo este codigo ya disponemos de la base para crear una web, conociendo sus apartados.
Espero os sea util, y practicad mucho.
miércoles, 20 de enero de 2016
Html5 - 5. Aside
Llegados a este punto, pasamos a explicar la etiqueta "aside", en esta etiqueta se suele incluir contenido que complementa a la parte principal de la web, pero que no es imprescindible, como por ejemplo enlaces a otras webs, publicidad, redes sociales, etc.
Ponemos el codigo del apartado anterior y le agregamos la etiqueta "aside", quedando asi:
Espero practiqueis con lo que ya hemos aprendido, en la proxima entrada hablaremos de "footer".
Ponemos el codigo del apartado anterior y le agregamos la etiqueta "aside", quedando asi:
Como podeis observar hemos introducido una lista en aside, con dos items, simulando un enlace a facebook y twitter para seguirnos, es un ejemplo de lo que suele añadirse a "aside".<!DOCTYPE html><html>
<head>
<title>Mi primera Web</title>
</head>
<body>
<header>
<h1>Cabecera de Mi Web</h1>
<figure><img src="milogo.jpeg"/></figure>
</header>
<nav>
<ul>
<li><a href="index.html">Inicio</a></li><li><a href="acercade.html">Acerca de</a></li>
</ul>
</nav>
<section>
<article>
<hgroup>
<h1>Aqui va el encabezado grande</h1>
<h2>Aqui un encabezado mas pequeño</h2>
</hgroup>
<p>Aqui ponemos un parrafo que es el contenido de nuestra pagina.</p>
<p>Este puede ser un segundo parrafo de nuestra web.</p></article>
<article>
<hgroup>
<h1>Aqui va el encabezado grande del segundo Article</h1>
<h2>Aqui un encabezado mas pequeño</h2></hgroup>
<p>Aqui ponemos un parrafo que es el contenido de nuestra pagina.</p>
<p>Este puede ser un segundo parrafo de nuestra web.</p></article>
</section>
<aside><h1>Siguenos en:</h1>
<ul>
<li><a href="facebook.html">Facebook</a>
</li><li><a href="twitter.html">Twitter</a></li>
</ul></aside>
</body>
</html>
Espero practiqueis con lo que ya hemos aprendido, en la proxima entrada hablaremos de "footer".
lunes, 18 de enero de 2016
Html5 - 4. Section + Article
En esta entrada explico las etiquetas "section" y "article".
La etiqueta "section" puede englobar una o varias etiqutas "article", se trata de la parte principal, la que lleva el contenido esencial de la pagina web que estamos creando.
El codigo del que partimos es el siguiente:
Es autoexplicativo, escribirlo en vuestro software para realizar el archivo html, para practicar y observar como se ve dicho codigo en el navegador que tengais.
Espero sea util, gracias.
La etiqueta "section" puede englobar una o varias etiqutas "article", se trata de la parte principal, la que lleva el contenido esencial de la pagina web que estamos creando.
El codigo del que partimos es el siguiente:
<!DOCTYPE html><html>Como podeis observar he introducido 2 article para que se vea bien la forma de usarlos, dentro de cada article he puesto un hgroup que agrupa 2 encabezados o titulos del parrafo, y seguidamente 2 parrafos con la etiqueta "p".
<head>
<title>Mi primera Web</title>
</head>
<body>
<header>
<h1>Cabecera de Mi Web</h1>
<figure><img src="milogo.jpeg"/></figure>
</header>
<nav>
<ul>
<li><a href="index.html">Inicio</a></li><li><a href="acercade.html">Acerca de</a></li>
</ul>
</nav>
<section>
<article>
<hgroup>
<h1>Aqui va el encabezado grande</h1>
<h2>Aqui un encabezado mas pequeño</h2>
</hgroup>
<p>Aqui ponemos un parrafo que es el contenido de nuestra pagina.</p>
<p>Este puede ser un segundo parrafo de nuestra web.</p></article>
<article>
<hgroup>
<h1>Aqui va el encabezado grande del segundo Article</h1>
<h2>Aqui un encabezado mas pequeño</h2></hgroup>
<p>Aqui ponemos un parrafo que es el contenido de nuestra pagina.</p>
<p>Este puede ser un segundo parrafo de nuestra web.</p></article>
</section>
</body>
</html>
Es autoexplicativo, escribirlo en vuestro software para realizar el archivo html, para practicar y observar como se ve dicho codigo en el navegador que tengais.
Espero sea util, gracias.
domingo, 17 de enero de 2016
Html5 - 3. Nav
Para ello introduciremos dentro de esta etiqueta una lista, que en html se forma con "ul" (unorder list) y dentro de esta los items que queramos con la etiqueta "li" (item list).
Para que estas listas sean enlaces a otro sitio ya sea externo o interno de nuestra web, le pondremos la etiqueta "a" con su atributo "href".
Hay que tener claro el cierre de cada etiqueta </>.
Tomamos el codigo del apartado anterior y añadimos "nav" con lo que el codigo quedaria de la siguiente forma:
<!DOCTYPE html><html>Introducir este codigo en notepad ++ y grabarlo por ejemplo como ejemplonav.html, abrirlo despues con el navegador web para ver el resultado.
<head>
<title>Mi primera Web</title>
</head>
<body>
<header>
<h1>Cabecera de Mi Web</h1>
<figure><img src="milogo.jpeg"/></figure>
</header>
<nav>
<ul>
<li><a href="index.html">Inicio</a></li><li><a href="acercade.html">Acerca de</a></li>
</ul>
</nav>
</body>
</html>
Aun no tiene diseño, porque estamos estableciendo la base o la estructura, en cuanto terminemos con este inicio procedere a empezar con CSS para dar formato a la web, colores, estilo, posicion, etc.
viernes, 15 de enero de 2016
Html5 - 2. Header
En header se suele incluir el logo o cabecera de la web, por lo que podriamos tener un codigo parecido a este:
La etiqueta "h1" es para colocar titulos en tamaños mayores al texto normal, en este caso lo utilizaremos para el titulo.
Se introduce tambien la etiqueta "figure" que indica que vamos a poner algo que no es el texto, se suele usar para incluir imagenes, videos, sonidos.
La etiqueta "img" introduce la imagen que le indiquemos con "src", este es un ejemplo de etiqueta html con atributo, en este caso el atributo es "src" con el valor "milogo.jpeg".
Puedes probar este codigo en el navegador y realizar algunos cambios para ir practicando.
Una vez veamos todos los apartados de este codigo, empezaremos a ver un poco de CSS, para poder dar forma a la web que estamos desarrollando y darle tambien el formato requerido.
<!DOCTYPE html><html>Casi todas las etiquetas de html se abren y se cierran, algunas veces no hace falta, como en el caso de la etiqueta "img" que vemos en el codigo anterior.
<head>
<title>Mi primera Web</title>
</head>
<body>
<header>
<h1>Cabecera de Mi Web</h1>
<figure><img src="milogo.jpeg"/></figure>
</header>
</body>
</html>
La etiqueta "h1" es para colocar titulos en tamaños mayores al texto normal, en este caso lo utilizaremos para el titulo.
Se introduce tambien la etiqueta "figure" que indica que vamos a poner algo que no es el texto, se suele usar para incluir imagenes, videos, sonidos.
La etiqueta "img" introduce la imagen que le indiquemos con "src", este es un ejemplo de etiqueta html con atributo, en este caso el atributo es "src" con el valor "milogo.jpeg".
Puedes probar este codigo en el navegador y realizar algunos cambios para ir practicando.
Una vez veamos todos los apartados de este codigo, empezaremos a ver un poco de CSS, para poder dar forma a la web que estamos desarrollando y darle tambien el formato requerido.
Html5 - 1. Primeros pasos
Para realizar una web no necesitamos mas software que un simple bloc de notas, particularmente utilizo Notepad++.
Vamos a crear paso a paso una web con la siguiente estructura:
.
Introducimos el codigo anterior, que es el codigo base, en el documento que estamos creando y lo guardamos como "miarchivo.html", normalemente el archivo que inicia nuestro sitio web se suele llamar "index.html"; una vez guardado lo podemos abrir con cualquier navegador web y ya tenemos nuestra primera web simple, pero que nos enseña la base de cualquier documento web que queramos crear.
En la proxima entrada explicare "header".
Aparte de Notepad++, recomiendo instalar WampServer en windows, que nos servira para simular un servidor web y ejecutar en una carpeta propia de nuestro pc, tanto las pruebas html como php. Os pongo enlace al video que indica como instalarlo:
Vamos a crear paso a paso una web con la siguiente estructura:
.
Poco a poco explicare cada apartado de este sencillo diseño de una web.
Todo documento html se compone de:
Abrimos nuestro software para crear la web, en este caso Notepad++.<!DOCTYPE html><html><head><title>Titulo de la pagina</title></head><body>Aqui va todo el contenido de la web</body>
</html>
Introducimos el codigo anterior, que es el codigo base, en el documento que estamos creando y lo guardamos como "miarchivo.html", normalemente el archivo que inicia nuestro sitio web se suele llamar "index.html"; una vez guardado lo podemos abrir con cualquier navegador web y ya tenemos nuestra primera web simple, pero que nos enseña la base de cualquier documento web que queramos crear.
En la proxima entrada explicare "header".
Aparte de Notepad++, recomiendo instalar WampServer en windows, que nos servira para simular un servidor web y ejecutar en una carpeta propia de nuestro pc, tanto las pruebas html como php. Os pongo enlace al video que indica como instalarlo:
Suscribirse a:
Entradas (Atom)