Progreso
En la proxima leccion : Mas divisiones de la pagina. Atributos background-color, text-align, width, margin
ir a sigiente leccion
- inicio »»
- Creando el Index »»
- Carpetas y Archivos
Las Carpetas y los Archivos de tu sitio WEB
De aqui en adelante veras en la parte derecha un menu que se llama "progreso"; este menu te ira
mostrando el progreso que vas adquiriendo con el transcender del curso; las explicaciones estan agrupadas en numeros
que iran ascendiendo deacuerdo al avance que vas obteniendo, busca en el menu "progreso" el numero correpondiente a la
explicacion y veras la aplicacion.
Recuerda seguir el orden del curso, veras que no tendras problemas y el progreso sera rapido. El primer paso sera crear
una carpeta que contendra todos los archivos que compondran tu sitio WEB.
Crea una carpeta en el
escritorio que se llame "WEB", y dentro de esta carpeta otra que se llame "img"
Ya debes de tener instalado el programa editor HTML (AceHTML). Debiste haberlo descargado si has seguido el curso paso
a paso pues fue tema de una leccion anterior, si quieres volver a la leccion has clic en Editor HTML, o si desea puedes descargarlo desde este enlace AceHTML.
El Index
El index es el nombre que debe de llevar toda pagina principal de un sitio WEB. Cuando escribes
la direccion de un sitio WEB en la barra de direccion de un navegador, por ejemplo http//wbien.zxq.net, se busca el index
entre todas las paginas que contenga el sitio.
Ejecuta el AceHTML. Clic en el menu "File" (archivo), se desplegara un menu, elige "new" (nuevo).
Se abrira una nueva ventana, selecciona el segundo icono "HTML Document" y le das clic al boton "Ok". Despues, nuevamente
elige "File" y a continuacion "Save" (guardar), como nombre elige "index".
En la parte inferior izquierda (izquierda tuya) veras dos pestañas : "Editor" y "Viewer", en "editor" escribiras el codigo
fuente de la pagina WEB, y en "Viewer" (visor) podras ver la apariencia lograda con esas lineas de codigo fuente. por el
momento veras solo una pagina en blanco.
Un archivo HTML esta constituido por un "head" (cabecera) y un "body" (cuerpo).
Lo que se escribe en "head" es de caracter informativo lo que significa que no se ve en la pagina, a axcepcion del tag
"Tittle". En el head se agrega la informacion necesaria para poder mostrar la pagina correctamente; como por ejemplo en el
se relacionan las hojas de estilos "CSS" y los "Script"
Para aclarar las cosas recuerda que el HTML es un Lenguaje de Marcado de Hipertexto, y este lenguaje hace uso de etiquetas
para representar los elementos tanto visible como los no en una pagina, es decir para el "marcado" se hace uso de las
etiquetas. Las etiquetas son la representacion en el codigo HTML de los elementos visibles en tu pagina WEB. Asi por
ejemplo el contenido de un menu debera ir marcado con la etiqueta "ul"; o un parrafo debera ir marcado con la etiqueta
<p>. Las etiquetas se reconocen por estar entre signo "menor que" y "mayor que" : "< >"
Etiqueta Div (Division)
El elemento Div es un contenedor o divisor, sirve para seccionar la pagina, es asi como puedes
crear un div para contener el menu, otro div para mostrar el contenido del tema, otro para la barra de navegacion, entre
otros. Por ejemplo en esta pagina que estas viendo existen mas de cinco div`s, uno de ellos lo puedes identificar en la
parte izquierda (izquierda tuya), tiene un color de fondo gris, como titulo lleva "El Index" y esta en color blanco; este
div se llama menu y es el contenedor del menu correspondiente al tema seleccionado en la barra de navegacion, (la barra
de navegacion es tambien un div que se encuentra ubicado en la parte superior, es delgada, horizontal y de fondo gris.
Por regla general todo documento HTML debe empezar con la etiqueta <HTML>.
Dale clic a la pestaña "Editor" para ver el documento HTML, selecciona todo el contenido y eliminalo. Vamos a empezar con el
documento en blanco, entonces escribe lo siguiente para dar partida a lo explicado.
<html> <head> </head> <body> <div> </div> </body> </html>
La hoja de estilo
La hoja de estilo permiten a la pagina WEB tener una amplia accion de mejoramiento en su apariencia,
Como ya sabes en el lenguaje de marcado de hipertexto (HTML) es necesario en un documento html escribir el "marcado",
es decir el tag (etiqueta) al cual corresponda el elemento que queramos "ver" en la pagina WEB, no obstante es necesario
tambien que este tag con sigo lleve atributos que le permitiran ser visibles.
Como podras apreciar no resulto nada visible en las lineas que has escrito en el documento html a pesar de que ya creamos un
<div>. Bien, para ver este div debemos de decirle al documento que caracteristicas "atributos" debe de tener , para
ello vas a crear una hoja de estilos donde especificaremos los atributos que queramos.
En el AceHTML clic en nuevo, o si quieres mas rapido "Ctrl+N"; se desplegara la ventana de seleccion de tipo de documento
que queremos crear, elige "CSS document" y seguidamente Ok. ahora guarda con el nombre "estilopag"; guarda en la carpeta
"web".
Seguido a lo anterior en el documento de estilo escribe las siguientes lineas:
#menu {border:black 1px solid; height:300px}
Conforme vallas avanzando por las paginas del curso podras ver un menu llamado "Atributos", alli
encontraras los link correspondientes a los atributos aplicados en la leccion que te encuentres, en estos link podras ver
el detalle de los atributos y sus aplicaciones.
Ahora complementa el documento html agregando una etiqueta link, debe de ir entre <head> y </head>. Con esta
linea hacemos especificacion al archivo html para que busque los atributos correspondientes al documento html en el
documento estilopag.css
<head> <link rel="stylesheet" href="estilopag.css" type="text/css" media="all"> </head>
Ahora si se podra apreciar el producto de la creacion de esta hoja estilo. Pero antes debes de complementar el div que habias creado; ya en la hoja de estilo se indico que atributos deben de tener los div que se llamen "menu". Entonces complementa:
<html> <head> <link rel="stylesheet" href="estilopag.css" type="text/css" media="all"> </head> <body> <div id="menu"> </div> </body> </html>
| Anterior | Siguiente |
| Creando el Index | Pagina Estructurada |
