Archive for HTML

Como hacer un menu horizontal con html5 y css3

En esta practica les traigo como hacer un menu horizontal utilizando html5 y css3 naturalmente, a continuación el video tutorial  y posteriormente el codigo de la practica para que puedan replicarlo en sus casas.

Video tutorial

Codigo CSS

/*Body*/
body
{
	margin:0px;
	padding-top:5px;
}

#main_container
{
	width:90%;
	margin-left:5%;
	padding-top:5px;
	padding-bottom:5px;
	float:left;
	border: 3px outset;
}

/*Content*/

.content{
	width:90%;
	margin-top:5px;
	margin-left:5%;
	padding-bottom:50px;
	background:#ffffff;
	border: 1px dashed;
	height: auto;
	float:left;
}

.content article
{
	padding: 3%;

}

.content article h2
{

}

/*Header*/

.header
{
	width:90%;
	margin-top:5px;
	margin-left:5%;
	background:#ffffff;
	border: 3px outset;
	height: 200px;
	float:left;
}

/*Menu */
.top_menu ul
{
	list-style:none;
	float:left;
	border: 1px dashed;
	padding: 2%;
	width:95%;
}

.top_menu ul li
{
	float:left;
	margin-right:20px;
	margin-bottom:10px;
	background: #ff812d;
	padding:5px;
	border-radius: 15%;
}
.top_menu ul li a
{
	color: #FFFFFF;
	text-decoration:none;
}
.top_menu ul li a:hover
{
	color: blue;
}

/*Footer*/
.footer
{
	width:90%;
	margin-top:5px;
	margin-left:5%;
	background:#ffffff;
	border: 3px outset;
	height: 110px;
	float:left;
}

.footer_msg
{
	margin-top: 40px;
float: left;
margin-left: 5%;
font-size: 0.8em;
color: rgb(126, 126, 126);
}

 Codigo html:

<!DOCTYPE  html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Codigoprogramacion.com</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<section id="main_container">
		<header class="header">
			<h1>Tutoriales - Html/Css</h1>
			<nav class="top_menu">
				<ul>
					<li><a href="#">Item 1</a></li>
					<li><a href="#">Item 2</a></li>
					<li><a href="#">Item 3</a></li>
					<li><a href="#">Item 1</a></li>
					<li><a href="#">Item 2</a></li>
					<li><a href="#">Item 3</a></li>
				</ul>
			</nav>
		</header>

		<section class="content">
			<article>
				<h2>Lorem Ipsum</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet scelerisque arcu, vitae mattis turpis.
				 Cras dictum nisl non vulputate mollis. Vestibulum in elit vel sapien venenatis aliquam tincidunt nec arcu. 
				Pellentesque non consequat felis, ac accumsan tellus. Donec sem magna, sagittis nec erat fringilla, commodo aliquet massa.
				Mauris risus lectus, ornare vel venenatis a, rutrum at augue. Nam eget turpis at metus commodo dignissim sit amet id lectus. 
				Aliquam consectetur sem eget sem vehicula, nec laoreet felis pellentesque. Vivamus turpis ipsum, rutrum facilisis est semper,
				egestas congue nibh. Maecenas sodales leo sed quam lacinia luctus. Aliquam scelerisque rutrum nisi, ut tincidunt lorem pharetra in.
				 Curabitur malesuada dolor ac accumsan ornare. Curabitur pellentesque gravida ipsum, at elementum tortor convallis nec. Aenean
				  condimentum, nunc ac tincidunt tristique, odio ante euismod ligula, et ullamcorper mauris nisi ut ligula. Vivamus faucibus mattis
				   turpis ac aliquet. Nam elementum velit ut lectus vestibulum, eu pretium turpis vehicula.
				</p>
			</article>
		</section>
		<footer class="footer">
			<span class="footer_msg"> Este es el pie de página - codigoprogramacion.com</span>
		</footer>
	</section>
</body>	
</html>

 

HTML – Introducción/ Practica no. 1

¡Hola! Bienvenidos al curso de HTML en esta nueva serie de artículos vamos a aprender todo lo referente a HTML, sus funciones, sus beneficios, como trabajar correctamente en dicho lenguaje y ¡Lo mejor! es que podrás realizar tu propio espacio web. Muy bien ¡Comencemos!

¿Que es HTML?

Es el lenguaje de programación predominante para el desarrollo de paginas webs. Como sus siglas denotan HTML (HyperText Markup Language) el cual su traducción seria Lenguaje de marcado de Hiper Textos . HTML no es propiamente un lenguaje de programación como C++, Visual Basic, etc., sino un sistema de etiquetas. HTML no presenta ningún compilador, por lo tanto algún error de sintaxis que se presente éste no lo detectará y se visualizara en la forma como éste lo entienda. El lenguaje Html como se aclaro anteriormente es una lenguaje de Etiquetas por tanto se trabaja de la siguiente forma, Abrimos nuestra etiqueta Dentro de la etiqueta va el contenido que desees dentro de ella y cerramos la etiqueta para indicar que finalizamos nuestro etiquetado.

¡Un poco de Historia!

La primera descripción de HTML disponible públicamente fue un documento llamado HTML Tags o Etiquetas HTML, publicado por primera vez en Internet por Tim Berners Lee en 1991. Describe 22 elementos que incluyen el diseño inicial y relativamente simple de HTML. Trece de estos elementos todavía existen en HTML.

Nocion Basica

El lenguaje HTML puede ser creado y editado con cualquier editor de textos básico, como lo podría ser el Bloc de Notas en Windows. En la actualidad existen editores de Textos mas avanzados y con herramientas que te permite ahorrar tiempo y trabajo como lo serian: DreamWeaver, FrontPage, Expression Web, entre otros.

Herramientas Necesarias

Las herramientas necesarias para trabajar este lenguaje son muy básicas pero realmente esenciales, como lo serian tu navegador de preferencia y como anteriormente mencionado un editor de texto. Recomendamos que utilices un navegador actualizado como lo seria Google Chrome, Mozilla FireFox, Safari, entre otros. Al igual que el editor de Texto, Nuestra recomendación es “Sublime Text 2″ un editor de texto de bajo consumo de recursos y muy eficaz, debemos aclarar que dicho editor de texto es pago, por tanto tenemos que pagar una mínima cantidad para adquirirlo o trabajarlo en modo de prueba, ¿Existen Alternativas Gratuitas Similares? Definitivamente, puedes utilizar Notepad++ el cual tiene una interfaz muy minimalista el cual te permitirá adaptarte muy rápido y sobre todo con una excelente eficacia.

Es hora de la practica

Luego de un poco de teoría es necesario entrar en la practica para complementar nuestros conocimientos. Muy bien veamos como estructurar correctamente una pagina web con HTML.

La estructura de HTML se basa de 2 partes el cual seria HEAD como bien su nombre menciona es la Cabeza de la pagina, donde irán etiquetados adicionales como lo serian el titulo de la pagina, los estilos de la pagina, sus metas tags entre otras cosas. El Body que no es mas que el Cuerpo de la pagina, aquí es donde irán todo lo que queremos sea visual de nuestra pagina, es decir, nuestro entorno de trabajo.

Estructura

Finalizamos la practica, espero te halla gustado esta pequeña introducción. Saludos

Efecto Parallax HTML5

Uno de los trends de diseño más importante en los últimos meses o el último año es el efecto Parallax. Muchas grandes agencias de diseño han construido sitios dignos de un awwward basados en este patrón.

El efecto Parallax, en general, se refiere a elementos dentro de un objeto visible que se mueven a distinta velocidad, así pues, es posible que el ejemplo más claro de Parallax lo hayamos visto jugando, por lo general, en un juego el fondo se mueve más lento que los personajes y/o assets, eso es Parallax. En diseño esto se ha aplicado en efectos vistosos, para ejemplo ésta página de Nike que muestra una aplicación que usa javascript para construir un efecto muy vistoso con elementos moviéndose y mostrándose en el foco a distintas velocidades.

Por lo general, el efecto se construye utilizando javascript, si bien puedes logar esa clase de resultados utilizando “javascript crudo”, es decir, sin plugins, en la web ya hay gente que ha pasado por esto y ha decidido regalarnos algunos plugins, entre los más populares:

Stellar.js: Échale un vistazo porque es la librería que utilizamos en el tutorial.

Scrollorama: Esta librería me parece genial, y un ejemplo de lo que puedes hacer con ella, lo encuentras en éste enlace.

Pasemos al código.

El código del tutorial es bastante sencillo, deduciendo que ya tienes la estructura de tu HTML, de la página a la que le aplicarás el efecto, vamos a enlazar un par de scripts, el primero es jQuery y el segundo Stellar.js

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script src='https://raw.github.com/markdalgleish/stellar.js/master/jquery.stellar.js'></script>

 

Ahora que tenemos listas las librerías, queda ejecutar la función de stellar para que ejecute los efectos correspondientes:

<script>
$(function(){
$(window).stellar();
});
</script>

 

Una vez hecho esto, stellar tomará una serie de atributos para definir el movimiento de los elementos al hacer el scroll, estos atributos son atributos data de HTML5, los valores de estos atributos van desde el 0 que significa sin movimiento, hasta cualquier valor entero, donde el 1 significa moverse a velocidad normal, y el 2 moverse al doble de velocidad que el resto de la página. Los atributos son:

  • data-stellar-ratio: Que define el movimiento de un elemento
  • data-stellar-background-ratio: Que define el movimiento del fondo de un elemento.

Existen más atributos para modificar el comportamiento de la página, y puedes checarlos en la documentación del plugin.

Sin más, quiero dejarte con un enlace para el vídeo tutorial en mi canal sobre este post.

Introduccion a html

Introducción a HTML

Bien en este curso antes de comenzar, quiero explicar que estaremos a lo largo de los tutoriales creando una página web sencilla utilizando primeramente html y posteriormente css para dar formato y diseño. Esto esta dirigido a principiantes, opcionalmente al final se podrá utilizar otros lenguajes como javascript o posiblemente php.

El curso se estara llevando a cabo en formato video y texto.

Video: Como crear una página web desde cero parte 1:

Codigo ejemplo en html:

A continuación pueden copiar y pegar este codigo ejemplo en HTML tal cual como se aprecia en el video:

<html>

<head>

<title>Titulo de mi pagina web</title>

</head>

<body>

<h2>Subtitulo</h2>

<p>Mi primera frase en mi pagina web</p>

<p>Mi segunda frase en mi pagina web</p>

<ul>

<li>opcion1</li><li>opcion2</li>

</ul>

</body>

</html>

¿Que es HTML?

HTML es un lenguaje de programación web, sus siglas significan HyperText Markup Language en inglés. En pocas palabaras HTML nos servirá para dar un orden y estructura a nuestra página web, a pesar de que en el no se define  el “diseño” que tendrá nuestra página, es muy importante porque en el se declaran todos los objetos y etiquetas que forman nuestro sitio web.

Comenzando por lo mas basico en HTML se utilizan etiquetas para colocar contenido, podemos declarar el inicio y el fin del documento, la cabecera del documento, el cuerpo, y dentro del mismo podemos tener muchos elementos como titulos, contenedores, texto, parrafos, enlaces, listas, menus y mucho mas.

 

¿Que es CSS?

CSS (Cascade style sheets) se puede decir que es como un lenguaje de programación web muy sencillo, sin embargo no es un lenguaje de programación como tal ya que su unico proposito es definir el estilo y los diseños que tendrá una página web, por le momento lo omitiremos ya que añadiremos diseño a nuestra página web mas adelante en este curso.