PALETA DE COLORES DE HTML
PALETA DE COLORES HTML - CÓDIGOS HEXADECIMALES
|
|
|
Variantes adicionales
|
|
|
|
viernes, 14 de marzo de 2014
paleta de colores de html
COMO INSERTAR TABLAS EN HTML
TABLAS
|
|
En este tema vamos a ver cómo trabajar con
tablas. Podremos insertar tablas, filas y columnas, y modificar sus
propiedades.
Hoy en dia, la mayoría de las páginas web se basan
en tablas, ya que resultan de gran utilidad al mejorar notablemente las opciones
de diseño.
Todos los objetos se alinean por defecto a la
izquierda de las páginas web, pero gracias a las tablas es posible distribuir el
texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie
de cosas que sin las tablas serían imposibles de realizarse.
|
Las tablas están formadas por
celdas, que son los recuadros que se obtienen como resultado de
la intersección entre una fila y una columna.
Para crear una tabla hay que insertar las
etiquetas <table> y </table>. Entre dichas etiquetas habrá que
especificar las filas y columnas que formarán la tabla.
| ||||||||||||||||||||||||||||||||||||||||||||
Como se estructura una pagina html
COMO SE ESTRUCTURA UNA PAGINA WEB
La estructura básica de una página web es la siguiente:
| <html> <head></head> <body> </body> </html> |
Una estructura HTML se empieza con la etiqueta <html> y acaba con
</html>. Todo lo que esté en medio será la página web. Dentro de
<html></html> se encuentran 2 partes diferenciadas.
La primera <head></head> es la cabecera de la página. Aquí ira
cierta información que no es directamente el contenido de la página. Aquí se
pone el título de la página, los metadatos, estilos, código javascript (todo
esto se estudiará en capítulos venideros). La primera que se suele estudiar es
<title></title>, que indica el título de la página (lo que el
navegador pone en la parte superior izquierda).
La segunda parte es <body></body>. Aquí va propiamente el
contenido de la página: fotos, párrafos, formularios, etc. Por ejemplo,
siguiendo con el ejemplo de la página anterior el
siguiente código.
| <html> <head> <title>Esto es el título de la página.</title> </head> <body> Hola mundo!<br> <b>Esto es negrita.</b><br> <i>Y esto itálica.</i><br> </body> </html> |
generará el siguiente resultado.
Observa el título en la parte superior izquierda de la página.
Además, dentro de <body></body> distinguimos varias
etiquetas:
<br> Indica salto de línea. En HTML un salto de línea normal (púlsando la tecla Enter) no produce un salto de línea en el resultado. Es necesario escribir <br> (u otra etiqueta similar).
<b></b> => Indica comienzo y fin de negrita.
<i></b> => Itálica.
También observamos el código &iaacute; Esto indica que queremos poner una "i" con acento, es decir, "í".
Es importante mencionar que las etiquetas se pueden escribir indistintamente en mayúsculas o minúsculas, es decir <b>Esto es negrita.</b> y <B>Esto es negrita.</B> produce el mismo resultado. Por otro lado, toda etiqueta que se abre (es decir, se pone la etiqueta sin la barra /) debe cerrarse (es decir, poner su equivalente con el símbolo /), si no, el navegador podría dar resultados inesperados. Excepciones a esto son algunas etiquetas que no lo necesitan, como <br> o <hr>.
<br> Indica salto de línea. En HTML un salto de línea normal (púlsando la tecla Enter) no produce un salto de línea en el resultado. Es necesario escribir <br> (u otra etiqueta similar).
<b></b> => Indica comienzo y fin de negrita.
<i></b> => Itálica.
También observamos el código &iaacute; Esto indica que queremos poner una "i" con acento, es decir, "í".
Es importante mencionar que las etiquetas se pueden escribir indistintamente en mayúsculas o minúsculas, es decir <b>Esto es negrita.</b> y <B>Esto es negrita.</B> produce el mismo resultado. Por otro lado, toda etiqueta que se abre (es decir, se pone la etiqueta sin la barra /) debe cerrarse (es decir, poner su equivalente con el símbolo /), si no, el navegador podría dar resultados inesperados. Excepciones a esto son algunas etiquetas que no lo necesitan, como <br> o <hr>.
Creacion de Paginas Web
CREACION DE UNA PAGINA WEB
Para crear una página web se pueden utilizar varios programas especializados en esto, como por ejemplo, el Microsoft Front Page o el Macromedia Dreamweaver Otra forma de diseñar un archivo html, es copiar todo en el Bloc de Notas del Windows, ya que este sencillo programa cumple con un requisito mínimo que es la posibilidad de trabajar con las etiquetas con las que trabaja este lenguaje.
A continuación les mostraremos las etiquetas mas comunes que deben aprenderse para hacer una pagina Web.
Estructura de los documentos de HTML
Si se tiene en cuenta el contenido del documento, todos los documentos de HTML bien escritos comparten una estructura en común. Un documento de HTML empieza con la etiqueta <HTML>, que es la que encerrará el documento actual. Contiene dos secciones primordiales: la cabecera y el cuerpo encerradas respectivamente por los elementos <HEAD> cabeza y <BODY> cuerpo.
La cabecera puede contener información y siempre contiene el titulo del documento encerrado por el elemento < TITLE>.
En el cuerpo se encuentra todo el contenido del documento, ya sea, texto, imágenes, sonidos, hipervínculos, etc.
Un documento escrito en HTML contiene las siguientes etiquetas en el siguiente orden:
Ejemplo:Si se tiene en cuenta el contenido del documento, todos los documentos de HTML bien escritos comparten una estructura en común. Un documento de HTML empieza con la etiqueta <HTML>, que es la que encerrará el documento actual. Contiene dos secciones primordiales: la cabecera y el cuerpo encerradas respectivamente por los elementos <HEAD> cabeza y <BODY> cuerpo.
La cabecera puede contener información y siempre contiene el titulo del documento encerrado por el elemento < TITLE>.
En el cuerpo se encuentra todo el contenido del documento, ya sea, texto, imágenes, sonidos, hipervínculos, etc.
Un documento escrito en HTML contiene las siguientes etiquetas en el siguiente orden:
<HTML>
<HEAD>
<TITLE> Título de mi página de Internet </TITLE>
</HEAD>
<BODY>
< H1> <CENTER> Primera pagina </CENTER> </H1>
< HR>
Para escribir títulos se usa la etiqueta <Hx></Hx> en donde x es un número.
Ejemplo:
<h1>Titulo principal</h1>
< h2>Titulo secundario</h2>
<h3>Titulo terciario</h3>
<h4>Titulo cuarto nivel</h4>
< h5>Titulo quinto</h5>
<h6>Titulo sexto</h6>
Quedaría mas o menos así:
Titulo principal
Titulo secundario
Titulo terciario
Titulo cuarto nivel
Titulo quinto
Titulo sexto
6. Como insertar una imagen
A la hora de crear una página Web podemos introducir gráficos de forma muy sencilla, sólo hay que tener en cuenta que las imágenes deben tener formato Gif o JPEG.
La etiqueta utilizada para agregar imágenes a una página Web es <IMG> y va acompañada de un atributo fundamental "SCR", que indica la ruta donde se encuentra el archivo que contiene la imagen a insertar.
Es decir:
<IMG SRC="lugar donde guardo la imagen">
Supongamos que tenemos la imagen dragonball.gif, que está presente en el mismo directorio en donde está la página y que la queremos insertar. La etiqueta apropiada sería:
<IMG SRC="dragonball.gif">
Y el usuario verá en el browser:
Para poner la imagen en la izquierda escribir:
<IMG ALIGN=LEFT SRC=" dragonball.gif ">
A la derecha: <IMG ALIGN=RIGHT SRC=" dragonball.gif">
Y si se quiere poner la imagen en el centro:
<P ALIGN=CENTER> <IMG SRC=" dragonball.gif"> </P>
<IMG ALIGN=LEFT SRC=" dragonball.gif ">
A la derecha: <IMG ALIGN=RIGHT SRC=" dragonball.gif">
Y si se quiere poner la imagen en el centro:
<P ALIGN=CENTER> <IMG SRC=" dragonball.gif"> </P>
Hiperenlaces, Hyperlinks, Anclas o Links
Para definir un enlace es necesario marcar con la etiqueta <a> el objeto del cual va a partir dicho enlace. Dicha directiva debe incluir el parámetro href="URL" para especificar el destino del enlace. Es decir, que antes del objeto elegido debemos abrir con < a href="URL">, y después cerrar con </a>. Por ejemplo, si queremos que el texto "pulse aquí para visitar la NASA" nos conduzca a la "home page" de la NASA, debemos escribir en nuestro texto HTML:
<a href="http://www.nasa.gov/">Pulse aquí para visitar a la NASA</a>
Para definir un enlace es necesario marcar con la etiqueta <a> el objeto del cual va a partir dicho enlace. Dicha directiva debe incluir el parámetro href="URL" para especificar el destino del enlace. Es decir, que antes del objeto elegido debemos abrir con < a href="URL">, y después cerrar con </a>. Por ejemplo, si queremos que el texto "pulse aquí para visitar la NASA" nos conduzca a la "home page" de la NASA, debemos escribir en nuestro texto HTML:
<a href="http://www.nasa.gov/">Pulse aquí para visitar a la NASA</a>
Que se vería de esta forma: Pulse aquí para visitar a la NASA
Si queremos que el texto "Foto" nos lleve a una imagen tenemos que escribir:
< a href="imagen.gif">Foto</a> entonces al hacer clic en el texto Foto nos abrirá la imagen.gif.
Si queremos que el texto "Foto" nos lleve a una imagen tenemos que escribir:
< a href="imagen.gif">Foto</a> entonces al hacer clic en el texto Foto nos abrirá la imagen.gif.
También se puede ir a otro enlace por medio de una imagen. Lo único que se debe hacer es cambiar el texto por una imagen:
<a href="http://www.altavista.com"><img src="Logo.jpg"></a>
Con esto tendremos por resultado que cuando se pase el puntero del mouse por arriba del Logo.jpg (que podría ser el logo del Altavista) y se convierta en una "manito", al hacer clic nos envíe al buscador Altavista.
Si se quiere hacer un link para que nos manden un E-Mail se debe hacer de la siguiente manera:
<a href="mailto:pfravioli[arroba]fibertel.com.ar">Mandame un Email</a>
Entonces cuando se haga clic sobre esta palabra Mandame un Email se abrirá (por defecto) el Microsoft Outlook Express con la dirección del destinatario ya escrita.
<a href="http://www.altavista.com"><img src="Logo.jpg"></a>
Con esto tendremos por resultado que cuando se pase el puntero del mouse por arriba del Logo.jpg (que podría ser el logo del Altavista) y se convierta en una "manito", al hacer clic nos envíe al buscador Altavista.
Si se quiere hacer un link para que nos manden un E-Mail se debe hacer de la siguiente manera:
<a href="mailto:pfravioli[arroba]fibertel.com.ar">Mandame un Email</a>
Entonces cuando se haga clic sobre esta palabra Mandame un Email se abrirá (por defecto) el Microsoft Outlook Express con la dirección del destinatario ya escrita.
sábado, 22 de febrero de 2014
programacion html
HTML, siglas de HyperText Markup Language («lenguaje de marcas de hipertexto»), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia para la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, etc. Es un estándar a cargo de la W3C, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Es el lenguaje con el que se definen las páginas web.
El lenguaje HTML basa su filosofía de desarrollo en la referenciación. Para añadir un elemento externo a la página (imagen, vídeo, script, etc.), este no se incrusta directamente en el código de la página, sino que se hace una referencia a la ubicación de dicho elemento mediante texto. De este modo, la página web contiene sólo texto mientras que recae en el navegador web (interpretador del código) la tarea de unir todos los elementos y visualizar la página final. Al ser un estándar, HTML busca ser un lenguaje que permita que cualquier página web escrita en una determinada versión, pueda ser interpretada de la misma forma (estándar) por cualquier navegador web actualizado
INTRODUCCIÒN
Mi nombre es Nayeli Arriaga, curso el Quinto Cuatrimestre de la Licenciatura de sistemas computacionales en la universidad cesom este sera un tutorial de creacion de paginas web en este blog encontraras,una serie de pasos para realizar una pagina, encontraras imagenes, tips, contenidos, videos. Etc
Suscribirse a:
Entradas (Atom)