|
|
LENGUAJE
HTML Para crear una página de internet, sólo vas a necesitar el block de notas (o cualquier editor de textos) para escribir el código que es interpretado por un navegador gracias al estándar HTML (es decir, no necesitarás ningún programa especial o compilador). Aun si no tienes conocimientos en programación, tener tu propia página en Internet no es tan difícil (de hecho, conozco personas que hacen excelentes páginas con HTML y no saben nada de programación). Básicamente, cuando ves el código de cualquier pagina, (en el menu ver de tu explorador, escojes código fuente), encuentras las llamadas etiquetas, las cuales son interpretadas por el navegador como instrucciones de cómo vamos a estructurar y darle formato a nuestra página, por ejemplo le decimos que queremos escribir un texto, insertar un gráfico, hacer un menú, etc. Una etiqueta va encerrada entre los signos < > y muchas deben llevar su etiqueta de cierre </ > que se distinguen por llevar el signo "/". La etiqueta de cierre es necesaria para encerrar un área en la que la función permanecerá. Vamos a dar ejemplos de las etiquetas principales y esenciales para comenzar a crear páginas, solo da click en el botón para que te aparezca un mensaje descriptivo de su función en el código: Estas son las etiquetas que siempre vienen en un código. Vamos a ver un ejemplo, haciendo una página. El texto lo guardas como index1.html aunque la pagina se va a llamar mi primera pagina, (es el titulo que te aparece en la parte superior de la ventana o cuando lo agregas a favoritos). Este es el esqueleto de una página:
Ahora escribe el texto que quieras en la parte donde esta de color rojo, no te preocupes por lo que pueda pasar, mas adelante veremos como darle formato al texto y todo lo demás. Si
te fijas, el texto aparece como si no le hubieramos dado retorno de carro
(o sea, pasar a otra linea). Una de las cosas del estándar
HTML es que si escribes el texto, solo se toma en cuenta un
solo espacio entre una letra y otra, ni modo, asi es y qué le vamos
a hacer; aunque hay tácticas interesantes para que eso no nos impida
hacer una súper página envidiable por tus amigos y familiares.
Para crear párrafos distintos, los encierras entre las etiquetas <p> y </p>, asi las características de cada párrafo pueden ser distintas. Y si lo que quieres es simplemete dar un brinco, escribes la etiqueta única <br>, la cual no necesita otra de cierre porque simplemente "das un brinco" y ya. Para generar una barra como la de arriba, escribe solamente<hr>. A continuación te muestro las etiquetas para dar formato al texto:
Si eres
observador, notarás que a veces es indistinto poner las comillas,
verdad?. Respecto a los colores en hexagesimal, el código es representado por números hexagesimales (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F) antecedidos por el signo #, y se basa en tres posiciones dobles (seis números) que representan la intensidad de los colores rojo, verde y azul, siendo que 0 representa que no tiene ese color y F que tiene su máxima capacidad, de esta manera podemos hacer combinaciones de colores, he aqui los códigos hexadecimales de algunos colores para que te des una idea.
Hasta ahora hemos hablado del color del texto, pero tambien puedes ponerle un color distinto al fondo de la página con el código que ya conoces para los colores de la siguiente manera. Por ejemplo, para ponerla del color de ésta página, en el body escribes así: <body bgcolor="#ff9900"> En donde dices que el cuerpo tenga un background (fondo) a color. Links o ligas. Notarás que una de las cosas fundamentales de las páginas Web es que tengan ligas que, al dar click con el ratón, nos lleven a:
Esto se logra con las etiquetas: <a
href="mipagina.html">Mi página</a> La sentencia
es casi la misma. Si no se escribe http://www, el navegador tomará
como un hecho de que esa página está en el directorio actual
del servidor de la página en donde se llama. Imágenes. Para insertar la imagen, escribes esta sintáxis, que en este caso será la imagen llamada caracolito.gif. <img src="caracolito.gif"> Que resulta:
Tablas Como te podrás dar cuenta, hasta ahora, hemos puesto todo (texto, imagenes, etc.) de una forma que se acomoda de "como va llegando", sin un formato, una estructura estable. Si no fuera por las tablas, las páginas que has visto como yahoo, altavista, msn, todito, etc., incluso ésta misma, no serían las mismas, sería algo complicado diseñarlas. Esta sección tiene una tabla de una fila por una columna, alineada al centro, con un ancho determinado de 600 pixeles y un borde invisible, así que toda la información se mantiene dentro de este margen y características. Los buenos diseñadores de páginas generan tablas y dentro de ellas más tablas si es necesario, logrando una página bien estructurada. Una tabla puede tener características independientes como si fuera otra página, le podemos cambiar la alineación, el fondo, el tipo de texto, insertar imágenes, texto, banners, videos... lo que sea !. Una tabla básica sería con este formato: <table> En donde <table> encierra la tabla. <tr> indica lo que hay en una nueva fila y <td> en una nueva columna. Analiza y notarás que entre <tr> y <td> no debes insertar nada porque <tr> solo indica que es la primer fila, (es solo un título diciendo "aqui no me metas nada, yo solo dije que aqui está una nueva fila") lo cual siempre debe ir para saber que es una nueva fila o renglón, y en <td> insertas lo que va en la primera columna que vas a trabajar. Es como si fuera un archivero la tabla y el <tr> te indica el número de cajón, y cada <td> serían las divisiones en donde vas a guardar las cosas en cada cajón (como las divisiones que tienen los archiveros) y si no tiene divisiones, el espacio que tiene ese cajón sería una división única. El ejemplo anterior es un archivero de dos cajones y cada cajón tiene dos divisiones. (Es decir, una tabla de 2x2). Si te haces bolas, puedes agregar el atributo border=1 para que te ponga el margen y veas como va la tabla desde el explorador. Para que veas esto en vivo, te invito a ver mi código sin ningún compromiso, da click con el botón derecho del mouse y elije ver codigo fuente. Alineación y Tamaños de imágenes y tablas. Para alinear tanto texto como imagenes, tablas, etc. utlizamos la palabrita "Align", dependiendo si es a la derecha (right), izquierda (left), al centro (center), etc. Prediquemos con ejemplos: <p
align=center>Hola, estoy en el centro de tu corazón</p> Para cambiar el tamaño de una imagen, sería de la sihuiente forma: <img src="caracolito.gif" width=45 height=30> que se vería así:
Si quieres
que el texto aparezca desde arriba cuando la tabla es muy alta, se usa
en las tablas la plabra valign, en donde usamos top para arriba y bottom
para abajo.
Cuando
hayas terminado, y si lo deseas, puedes cambiar el atributo border a 0.
Frames. Los frames, es una forma de poner dos o más páginas incrustadas en una página principal. Cuando llamas a otra página mediante una liga o link desde un menú, notarás que permanece intacto ese menú y solo cambia la parte de abajo o a un lado según sea el caso, verdad?. Esto es porque el llamado de la página se hace desde un frame para que cambie otro frame (para eso le das un apodo o alias y la llamas con el atributo target) sin que afecte al otro frame. La página principal en realidad lo que hace es llamar a 2 sub-páginas si se puede decir así, la de arriba y la de abajo, (o la de cada lado si así es el caso). Claro que se les declara su tamaño de frame y dónde van colocadas (horizontal o verticalmente) , Para que practiques, analiza el código de esta página, dandole Ver, Código Fuente, dejando a tu criterio, conocimientos de inglés y lo aprendido hasta ahora, para que resuelvas la forma en que trabajan los frames. Si te das cuenta, lo complicado de hacer páginas es el diseño, el buen gusto y tu criterio. Si quieres comenzar con la programación, hacer tus páginas es el primer paso, después el Perl. SUERTE ! Donde yo aprendí HTML fué de una página, así que tú puedes también hacerlo. Te recomiendo ésta página para complementar este curso.
|
