Crea Edith.

lunes, 2 de marzo de 2015

Pagina web con Frameset

Nos volvemos a encontrar con una pagina web mas, esta vez aprenderemos a trabajar con FRAMESET,que son mas que todo utiles para crear filas o columnas.

Paso 1
Empezaremos creando una carpeta con el el INDEX dentro, que sera nuestra base, y a esa carpeta le iremos añadiendo los demas archivos HTML que necesitamos.
<html>
<head>
<title>pagina principal</title>
</head>
<frameset rows="12%,5%,*" border="0"> */colocamos la etiqueta -frameset- y colocamos atributo -rows- que significa ''filas'' y cada numero después de coma es una fila y asi mismo, le ponemos -border- que es el borde/*
<frame name="bienvenida" src="bienvenida.html">
<frame name="menu" src="menufacil.html" scrolling ="no"> */es scrolling es para que no aparezca la barra de navegacion/*
<frame name="contenido" src="contenido.html"> */debemos ponerle nombre a cada fila y asi mismo la fuente del archivo que se mostrara en cada fila/*
</frameset> */etiqueta de cierre de las filas -frameset-/*
</html>

PASO 2

Crearemos el archivo que ira situado en la fila ''BIENVENIDA''

yo prefiero que sea una imagen, creare una carpeta llamada IMGS en donde este guardada la imagen que deseo. Y luego crearemos un archivo html con la siguiente estructura:

<html>

<head>

<title> Bienvenida </title>

</head>

<h1>

</font>

</body>

</html>

PASO 3

Para el menu, utilizare el anterior hecho, sera mi menu sencillo.
pero de igual forma les dejare la estructura,
este debe de estar en otro archivo html y guardado en la misma carpeta que el INDEX y el Bienvenida.

<html>

<meta charset="utf-8">

<head>

<title> Mi primera Pagina Web </title>

</head>

<body bgcolor="#088A68">

<style type="text/css">

#Menu li{

display: inline;

text align: center;

margin: 20px 20px 0px 0px;

}

#Menu li a{

padding: 2px 7px 2px 7px;

color: red;

background-color: white;

border: 10px solid pink;

text-decoration: none;

}

#Menu li a:hover{

background-color: purple;

color: yellow;

}

#Menu ul{

text-align: center;

}

</style>

<nav>

<div id="menu">

<ul>

<li><a href="texto.html">PRINCIPAL</li></a>

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

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

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

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

</ul>

</div>

</nav>

</body>

</html>

PASO 4

Para el contenido, vamos a crear otro archivo HTML y lo guardaremos en la misma carpeta.
este archivo se llamara CONTENIDO.
yo deseo que sea una imagen, asi que guardare otra imagen en la carpeta IMGS
bajo el nombre de contenido.jpg

La estructura HTML quedara asi.

<html>

<head>

<title> Contenido </title>

</head>

</body>

</html>

PASO 5
nuestra carpeta tuvo que haber quedado asi.

PASO 6

nuestra pagina web tuvo que quedar finalmente asi.

Menu Sencillo en HTML

Hola a todos!
Esta vez aprenderemos a hacer un menú sencillo hecho con HTML y CSS.
Bueno, antes que nada, daré una pequeña explicación sobre lo que es CSS.

CSS es una abreviación en ingles [Cascading style sheet] que significa -Hoja de estilos en cascada-. Que sirve para configurar la presentacion y estilo de una pagina web creada con HTML, XML y XHTML. ya que al programar con estas tres ultimas, no hay mucha variedad de opciones para personalizar una pagina web.
En otras palabras, CSS le añade estilo a la estructura de HTML.

Y como nosotros queremos una pagina web presentable, en este post, añadiremos nuevas etiquetas y la implementacion explicada de CSS.

Empezemos!!

Paso 1
Guardo el archivo como Menusencillo.html

<html>
<meta charset=''utf-8''> */esto sirve para que HTML reconozca codificaciones de lenguaje universal/*
<head> */etiqueta de encabezado/*
<title> */etiqueta para añadir titulo a nuestra web/*
Mi Primera Web
</title> */etiqueta de cierre del titulo/*
</head> */etiqueta de cierre del encabezado/*
<body bgcolor="#088A68"> */con CSS puedo utlizar colores HTML mas variados/*
<h2> */tamaño del texto/*
<center> */etiqueta para que se centre el texto/*
<font color="#04B45F"> REALIZANDO UN MENU SENCILLO */el color del texto/*
</font> */etiqueta de cierre de texto/*
</center> */etiqueta de cierre del centrado/*
</h2> */etiqueta de cierre del tamaño del texto/*

<style type="text/css"> */es para darle estilo a la pagina, trabajando con CSS/*

Paso 2

Ahora vamos a editar el estilo del menú en si.

<html>
<meta charset=''utf-8''> */esto sirve para que HTML reconozca codificaciones de lenguaje universal/*
<head> */etiqueta de encabezado/*
<title> */etiqueta para añadir titulo a nuestra web/*
Mi Primera Web
</title> */etiqueta de cierre del titulo/*
</head> */etiqueta de cierre del encabezado/*
<body bgcolor="#088A68"> */con CSS puedo utlizar colores HTML mas variados/*
<h2>   */tamaño del texto/*
<center> */etiqueta para que se centre el texto/*
<font color="#04B45F"> REALIZANDO UN MENU SENCILLO */el color del texto/*
</font>   */etiqueta de cierre de texto/*
</center> */etiqueta de cierre del centrado/*
</h2>   */etiqueta de cierre del tamaño del texto/*

<style type="text/css">   */es para darle estilo a la pagina, trabajando con CSS/*

#Menu li{ */aqui vamos a editar solo los elementos del menú, y -li- es para quitar el subrayado a cada botón/*

display: inline; */ es para que los elementos salgan uno después de otro/*

text align: center; */sirve para alienar el texto, y queremos que salga centrado/*

margin: 20px 20px 0px 0px; */esto sirve para el margen que debe haber entre cada boton/*

}

Paso 4
Crear el menu

<html>
<meta charset=''utf-8''> */esto sirve para que HTML reconozca codificaciones de lenguaje universal/*
<head> */etiqueta de encabezado/*
<title> */etiqueta para añadir titulo a nuestra web/*
Mi Primera Web
</title> */etiqueta de cierre del titulo/*
</head> */etiqueta de cierre del encabezado/*
<body bgcolor="#088A68"> */con CSS puedo utlizar colores HTML mas variados/*
<h2>   */tamaño del texto/*
<center> */etiqueta para que se centre el texto/*
<font color="#04B45F"> REALIZANDO UN MENU SENCILLO */el color del texto/*
</font>   */etiqueta de cierre de texto/*
</center> */etiqueta de cierre del centrado/*
</h2>   */etiqueta de cierre del tamaño del texto/*

<style type="text/css">   */es para darle estilo a la pagina, trabajando con CSS/*

#Menu li{ */aqui vamos a editar solo los elementos del menú, y -li- es para quitar el subrayado a cada botón/*

display: inline; */ es para que los elementos salgan uno después de otro/*

text align: center; */sirve para alienar el texto, y queremos que salga centrado/*

margin: 20px 20px 0px 0px; */esto sirve para el margen que debe haber entre cada boton/*

}

#Menu li a{   */-a- sirve para indicar que es botón/*
padding: 2px 7px 2px 7px; */borde entre los menús o botones/*
color: red;   */este es el color del texto al ser presionado */
background-color: white; */es el color de fondo del botón/*
border: 10px solid pink; */es el tamaño del borde y su color (grosor y color)/*

text-decoration: none; */la decoración del texto/*
} */siempre se va a abrir y a cerra con { }/*

#Menu li a:hover{   */hover nos permite que cambie de color al pasar el cursos por encima/*
background-color: purple;   */el color del fondo cuando el cursos pase encima/*
color: yellow; */el color del texto cuando el cursor pase encima/*

}   */siempre se va a abrir y a cerra con { }/*

#Menu ul{   */ la etiqueta -ul- nos permite ordenar el listado/*
text-align: center;   */nosotros queremos un listado centrado/*

}

</style> */cerramos la etiqueta de estilo/*
<Nav> */etiqueta que nos permite utilizar un navegador/*
<div id="menu">
<ul> */nos permite crear una lista/*
<li> <a href="texto.htlm"> PRINCIPAL */li-porque es un boton, -a-porque es un link y -href- es hacia donde quiero que me lleve el link al clickearlo, hay que especificar bien donde se encuentra/*
</li> </a> */etiquetas de cierre/*
<li><a href="#"> */aquí ponemos -#- porque queremos que al clickearlo nos dirija a la pagina acutal,(osea que no se cambie de sitio o pagina, no va a tener ninguna accion)/*
AYUDA </li> </a> */nombre del botón y etiquetas de cierre de -li- y -a- lo mismo se hace para los demas botones, solo que con distinto nombre/*
<li><a href="#">PRODUCTOS</li></a>
<li><a href="#">CONTACTOS</li></a>
<li><a href="#">PEDIDOS</li></a>

</ul> */cerramos la lista/*
</div> */etiqueta de cierre de -div-/*
</nav> */etiqueta de cierre del navegador o menu/*

</body> */cerramos el contenido/*
</html> */etiqueta de cierre/*

Paso 5

Guardar el archivo y ver la pagina web.

Espero les haya gustado o les haya quedado bonito su menú.
Cualquier duda, por favor dejen su comentario, Yo con mucho gusto, responderé.
Hasta la próxima!!!
Cuídense.

Paginas en HTML 3

Muy buen día a todos los lectores, en esta tercera entrega de ''Paginas en HTML''
aprenderemos a como insertar una imagen de fondo a nuestra pagina.
Es bien sencillo,

Paso 1
Crear una carpeta nueva en donde alojaremos a nuestro archivo HTML, Mi carpeta se va a llamar WEBBASICA3

Paso 2
Buscamos una imagen que nos guste, para que sea de fondo de nuestra pagina web y la re nombramos con FONDO

Paso 3
Seguido de que ya hayamos elegido nuestro fondo, procederemos a abrir un nuevo archivo en Notepad++.
Empezaremos con la estructura que vimos en la entrada anterior. ''Paginas Básicas en Html 2''

<html> */etiqueta de apertura/*
<head> */encabezado de la pagina/*
<title> */para ponerle titulo a la pagina/*
Mi primera Pagina Web
</title> */etiqueta de cierre del titulo/*
</head> */etiqueta de cierre del encabezado/*
<body background="FONDO.jpg"> */esta vez, ya no utilizamos -bgcolor- si no que esta vez usamos -background- hay que ser específicos con el nombre y extensión de la imagen de fondo/*

la pagina queda así con el fondo que elegimos.

Paso 4
Ahora es momento de incluir el resto del contenido.

<html> */etiqueta de apertura/*
<head> */encabezado de la pagina/*
<title> */para ponerle titulo a la pagina/*
Mi primera Pagina Web
</title>   */etiqueta de cierre del titulo/*
</head> */etiqueta de cierre del encabezado/*
<body background="FONDO.jpg"> */esta vez, ya no utilizamos -bgcolor- si no que esta vez usamos -background- hay que ser específicos con el nombre y extensión de la imagen de fondo/*
<h1> */sirve para darle tamaño a al fuente, puede ser de -h1- hasta -h10-/*
<font color=''yellow''> */-font color- es para darle color a la letra/*
<center> ESTAMOS PROGRAMANDO EN HTML </center>   */la etiqueta -center- es para centrar nuestro texto/*
</font>    */cerramos la etiqueta del texto/*

<h1>
<font color="Pink''>
Mi nombre es Edith   */mi nombre :) /*
</font>

<h4> */-h4- es para que el texto se vuelva mas pequeño/*
<font color="Pink">
Mis apellidos son: Cruz Arias
</font>

<h1>
<font color="white">
Y estudio Perito en Mercadotecnia y Publicidad
</font>
<p> <h4> */la etiqueta -p- se coloca para que el HTML pueda reconocer caracteres especiales/*
</body>   */cerramos el cuerpo/*
</html>    */y cerramos la etiqueta de apertura/*

Guardamos el archivo bajo el nombre de Webbasica3.html

y la Pagina Web nos quedara asi...

Bueno, espero que os haya gustado este pequeño tutorial, si tenéis alguna duda, por favor dejadla en los comentarios de abajo.
pronto subir otro post.
Dios les bendiga, hasta la próxima.

domingo, 1 de marzo de 2015

Paginas Basicas en HTML 2

Hola a todos, en esta segunda entrega usaremos la estructura base de la publicacion anterior, solo que esta vez le agregaremos color para que nuestra pagina web se vea mas ''animada''.

Empezemos..!
Ultimamente hemos estado trabajando con Notepad++
El link para descargar este programa es este.

http://notepad-plus-plus.org/download/v6.7.4.html

Paso 1:

Iniciaremos con la etiqueta de apertura.

<html>
<head> */etiqueta de encabezado/*
<title> */etiqueta de titulo/*
MI PRIMERA PAGINA
</title> */etiqueta de cierre del titulo/*

Paso 2

Esta vez, agregaremos mas texto a la pagina y le pondremos color de fondo, de igual manera conoceremos otras etiquetas.

<html>
<head> */etiqueta de encabezado/*
<title> */etiqueta de titulo/*
MI PRIMERA PAGINA
</title> */etiqueta de cierre del titulo/*
</head> */etiqueta de cierre del encabezado/*
<body bgcolor=''Light Pink'''> */-bgcolor- es para darle color al fondo, y es importante que el color este encerrado en comillas ('' '') para que pueda ser reconocido/*
<h1> */sirve para darle tamaño a al fuente, puede ser de -h1- hasta -h10-/*
<font color=''purple''> */-font color- es para darle color a la letra/*
<center> ESTAMOS PROGRAMANDO EN HTML </center> */la etiqueta -center- es para centrar nuestro texto ''ESTAMOS PROGRAMANDO EN HTML''/*
</font> */cerramos la etiqueta del texto/*

y la pagina nos quedo así.

Paso 3

Luego, procederemos a agregar mas elementos de texto, para esto volveremos a abrir la etiqueta <H1> y <font>

<html>
<head> */etiqueta de encabezado/*
<title> */etiqueta de titulo/*
MI PRIMERA PAGINA
</title> */etiqueta de cierre del titulo/*
</head> */etiqueta de cierre del encabezado/*
<body bgcolor=''Pink'''>   */-bgcolor- es para darle color al fondo, y es importante que el color este encerrado en comillas ('' '') para que pueda ser reconocido/*
<h1> */sirve para darle tamaño a al fuente, puede ser de -h1- hasta -h10-/*
<font color=''purple''> */-font color- es para darle color a la letra/*
<center> ESTAMOS PROGRAMANDO EN HTML </center>   */la etiqueta -center- es para centrar nuestro texto ''ESTAMOS PROGRAMANDO EN HTML''/*
</font>    */cerramos la etiqueta del texto/*

<h1>
<font color="blue''>
Mi nombre es Edith */esta vez, escribí mi nombre :) /*
</font>

<h4> */ahora el texto se hará mas pequeño/*
<font color="red">
Mis apellidos son: Cruz Arias
</font>

<h1>
<font color="green">
Y estudio Perito en Mercadotecnia y Publicidad
</font>
<p> <h4> */la etiqueta -p- se coloca para que el HTML pueda reconocer caracteres especiales propios del español como lo son la & y ; /*
</body> */cerramos el cuerpo/*
</html> */y cerramos la etiqueta de apertura/*

Al final me queda así en Notepad++

Paso 4

Ahora es momento de guardarlo, Yo le pondré por nombre al archivo ''Webbasica2.html''
La pagina finalizada me quedo así.

Bueno, hemos finalizado con este post. Espero que hayan comprendido.
cualquier duda, pueden dejarla en los comentarios de aquí abajo.
Nos vemos!! :D :D

Paginas Basicas en HTML.

Hola, muy Buen Domingo para todos los lectores.
Bueno, en la entrada anterior vimos la estructura de una pagina web algo avanzada.
Pero esta vez, veremos la estructura básica de una pagina web en HTML
Para su mayor entendimiento, lo explicaremos paso a paso.
Empecemos!! :D

Paso 1
Esta vez utilizare un programa nuevo que descargue hace poco, es bastante sencillo, y lo que mas me gusta es que tenga un color especifico para cada etiqueta o atributo que necesite.
Se llama ''Notepad++", pueden descargarlo en este enlace.

Si no te funciono, puedes copiar este link y pegarlo en tu buscador.
http://notepad-plus-plus.org/news/notepad-6.7.4-je-suis-charlie-edition.html

Es la ultima versión conocida por el momento.
La abriremos...

Paso 2

Bueno, ya que tenemos el programa abierto.
empezaremos con la etiqueta de apertura.

<html> */Siempre, toda la vida, empezaremos con esta etiqueta cuando usamos HTML/*

<head> */es la etiqueta de encabezado/*

<title> */utilizamos esta etiqueta para ponerle titulo a nuestra Pagina Web/*
Mi Primera Pagina */ este es el texto del titulo/*

</title> */cerramos la etiqueta del titulo/*

</head> */cerramos la etiqueta del encabezado/*

<body> */ abrimos la etiqueta del contenido/*

Estamos programando en HTML */este texto es el que ira en el cuerpo de la webpage/*

</dody> */cerramos la etiqueta del cuerpo/*

</html> */cerramos la etiqueta de apertura/*

Nos va a quedar algo así.

Lo guardamos bajo el nombre de ''webbasica.html'' en una carpeta cualquiera.

Es muy importante que la guarden con esa extensión para que pueda volverse una pagina web.

Por ultimo nos quedara algo asi, cuando ya la abrimos en el navegador.

Espero les haya servido. En la siguiente publicacion, veremos un diseño mas adornado.
Hasta la proxima!

lunes, 23 de febrero de 2015

Tareas de Computacion -Pagina web con filas, columnas y menu integrado

Hola, muy buen dia a todos.

Bueno, en esta ocasion, voy a mostrarles Como hacer una pagina web con Filas y Columnas.
Soy nueva en esto, asi que me esta tomando bastante trabajo entender cual es el perfecto orden de las etiquetas y demas.
Pero con ayuda de mi Profesor, logre entender esto en un 50%

Bueno, empecemos.
Paso 1:
Para hacer una pagina web a base de HTML, se necesita una aplicacion bastante standar que todo ordenador personal o portatil debe tener pre-instalada en el sistema operativo.
Existen varios programas, como Notepad++, Dreamweaver, etc.
pero esta vez usaremos Notepad

Paso 2:
Muy bien, ahora que ya hemos abierto un archivo nuevo en Notepad, es momento de empezar lo basico, con la etiqueta de apertura

<html>
<head> */esta es la etiqueta de apertura para el encabezado/*
<meta charset="utf-8"> */esta etiqueta establece la codificacion utilizada de la pagina/*
<title> */esta etiqueta nos permite colocarle titulo a la pagina web/*
Mi Primera Pagina Web
</title> */etiqueta de cierre del titulo/*
</head> */etiqueta de cierre de encabezado/*

Nos quedaria algo asi:

Paso 3:
Bueno, hemos terminado de hacer el encabezado, pero aun nos queda por hacer el cuerpo de la pagina, pero como estamos trabajando con frameset, que sirve para crear columnas y filas, empezaremos con la etiqueta

<frameset rows="15%,*"> */ -rows- significa -filas-. definimos el tamaño de la fila con -15%- y al resto del espacio le daremos un tamaño automatico con -*- /*
<frame name="menuteoria.html" src=menuteoria.html"> */bueno, solo queremos una fila, entonces le pondremos nombre y -src- es la fuente de donde saldra el menu, en este caso, yo le puse el nombre de -menuteoria- porque asi se llamara el archivo que crearemos mas adelante./*
<frameset cols="15%,*"> */Ahora, lo que yo necesito son columnas, por ello esta -cols- que significa -columnas- y se repite el mismo proceso que hicimos con las filas>
<frame name="columna1" src="columna1.html"> */ahora creamos una sola columna y le pondremos nombre/*
<frame name="central" src="central.html"> */ pero como yo quiero dos columnas, creamos otra etiqueta con -frame- y su atributo -name- yo le pondre a la columna 2 el nombre de ''central''/*
</frameset> */ terminamos cerrando la etiqueta de columnas y filas/*

Nos quedaria algo asi por el estilo.

terminamos cerrando con la etiqueta </html> y seguiremos al Paso 4

Paso 4:
Guardamos nuestra pagina principal como "Index.html"

Paso 5:
Bueno, anteriormente habiamos hablado de un menu, pero para lograr que se vea en nuestra pagina, debemos crear otro archivo HTML.

y empezaremos con el mismo encabezado de nuestro archivo principal.

solo que, esta vez vamos a agregarle color al fondo del cuerpo y quedaria asi.

<body bgcolor="#F5A9BC"> */etiqueta de apertura del cuerpo de la pagina y -bgcolor- que significa el -color de fondo-/*

<style type="text/css"> */etiqueta -style- para editar el estilo y esto es para cuando estamos trabajando con CSS/*
#menu li{     */-#menu- es para trabajar directamente con el estilo del menu y -li- es para quitarle lo subrayado al hipertexto/*
    display: inline;   */-display- nos sirve para saber ubicar el texto del menu/*
    text-align: center;    */-text align- es para alinear el texto/*
    margin: 0px 20px 0px 0px;     */-margin- es para determinar el margen/*
    }
#menu li a {          */ aqui estamos editando la fuente del texto del menu, y su color, tamaño entre otros/*
    padding: 2px 7px 2px 7px; */ esta es la distancia entre cada boton/*
    color: #9A2EFE;    */es color del enlace/*
    font-family: "Century Gothic"; */estilo del texto/*
    font-size: 20px     */Tamaño del texto/*
    background-color: white;    */Color del fondo del texto/*
    border: 10px solid pink;     */tamaño del borde y color del borde/*
    text-decoration: none;      */decoracion del texto/*
    }
#menu li a:hover{       */atributo -hover- es para cuando el cursor pasa por encima del boton/*
    background-color: #F2EFFB;    */color del fondo del boton cuando pase el cursor/*
    border-radius: 18px 0px 18px 0px;   */como se modifica el borde al pasar el cursor/*
    color: #B40431;   */color del enlace al pasar el cursor/*
    }
#menu ul{
    text-align: center; */permite centrar el listado/*
    }

</style> */etiqueta de cierre del estilo del menu/*

Nos quedaria finalmente asi, y eso que solo esto es el estilo del menu.

Paso 6:
Bien, ahora que ya tenemos el estilo del menu terminado ahora solo faltaria configurar unas cosas mas.
Como..
<NAV> */esta etiqueta sirve para habilitar la barra menu en la pagina web/*
<div id="menu">
<ul>
<li><a href="texto.html">PRINCIPAL</a></li>   */en la etiqueta - href -colocamos el nombre de la otra pagina que se abrira al pulsar el boton PRINCIPAL/*
<li><a href="#">AYUDA</a></li>     */ en este caso y en todos los demas de abajo, se coloca "#" para que al pulsar el boton, el link los lleve a la misma pagina actual/*
<li><a href="#">PRODUCTOS</a></li>
<li><a href="#">CONTACTOS </a></li>
<li><a href="#">PEDIDOS</a></li>
</UL>
</div>
</NAV>

</body>
</html>   */se terminan de cerrar todas las etiquetas antes abiertas y se guarda el documento/*

Lo guardamos en la misma carpeta en la que guardamos -Index.html- bajo el nombre de "menu.html"

finalmente, ahora es momento de abrir la pagina web, con su nuevo menu inegrado.

Gracias, espero que haya sido de su utilidad.