hola que tal amigos de taringa hoy les vengo ofreciendo una pequeña clase de el curso html en este manual basico aprenderan a construir paginas web por medio de html bueno espero que les sea de su agrado
Manual Básico de HTML
Creación y Estructura de Páginas WEB
comenzemos
Requerimientos y material
Internet es un medio que no precisa de mucho conocimiento, el prerequisito inmediato para
poder usar este manual es tener conocimientos básicos de manejo de Windows, un editor de texto
y haber utilizado alguna vez un navegador de Internet.
Para la aplicación de los ejemplos de este manual usted necesitara:
• Un navegador de Internet
• Un editor de texto, preferentemente el Block de notas (Notepad)
• Un medio físico para grabar los ejemplos, ya sea un disquete o una carpeta en su
disco duro.
• Un archivo para fondo, llamado fondo.gif.
• Un archivo gráfico, llamado foto.jpg.
¿Por dónde comenzar?
Lo primero es saber donde crear el archivo texto que contendrá las instrucciones HTML
(Hipertexto), para lo cual tenemos varias opciones:
1. Utilizar programas creados para desarrollo de páginas WEB, entre los que podemos
citar:
• Microsoft Front Page
• Hot Dog
Páginas WEB
El Hipertexto es un archivo de texto que contiene instrucciones que pueden ser interpretadas por
un navegador de Internet. Estas instrucciones son denominadas Etiquetas.
Etiquetas
Una etiqueta cumple su función de la siguiente manera:
<nombre de la etiqueta> Apertura de una etiqueta siempre entre “< >”
texto/gráfico/etiquetas A la cual se aplica la etiqueta
</nombre de la etiqueta> Cierra de la etiqueta siempre entre “</ >”
Estructura básica de una página WEB
Una página web esta compuesta de 2 partes: el encabezamiento y el cuerpo de la página.
Paralelamente a esto, existen tres etiquetas fundamentales, las mismas que deben estar incluidas
en el archivo HTML de manera obligatoria. Estas tres etiquetas fundamentales son:
<html> </html> Indica al navegador que el documento texto que esta leyendo es un documento
HTML. Esta etiqueta se abre al inicio del archivo y se cierra al final del
mismo.
<head> </head> Acá se detalla el encabezado de la página WEB. Esta etiqueta se abre luego de
<html>.
<body> </body> Cuerpo de la página donde se despliega el contenido global. Esta etiqueta se
abre luego de cerrar el encabezamiento con </head> y se extiende hasta el
final de la página, cerrándose antes de </HTML>.
Ejemplo 1:
<html>
<head> </head>
<body>
Bienvenidos al curso de HTML
</body>
</html>
Importante:
Como se ve en el ejemplo 1. Toda etiqueta abierta debe cerrarse. En caso de no cerrarse el error
podría causar confusión al navegador.
Etiqueta: <title> </title>
Esta etiqueta va en la parte del encabezamiento de la página web, es decir en el HEAD, y define
en su contenido el título de la página web, mismo que aparecerá en la parte superior izquierda de
la pantalla de su navegador.
Sin cerrar nuestro navegador de Internet, volvemos al editor de texto e incluimos el campo
<title> entre las etiquetas de apertura y cierre del encabezado (head).
Ejemplo 2:
<html>
<head> <title>Curso de HTML</title> </head>
<body>
Bienvenidos al curso de HTML
</body>
Etiqueta <body> </body>
Todo el texto, las imágenes y el formato visibles al usuario deben encontrarse entre las etiquetas
<body>...</body>. Esta etiqueta cuenta con los siguientes atributos:
• Bgcolor define el color de fondo de la página
• Text define el color del texto de la página
• Link define el color de los vínculos en la página
• Alink define el color del vínculo actual o activado en la página
• Vlink define el color del vínculo ya visitado
• Background define el archivo gráfico que será desplegado como fondo
• Bgsound define el archivo de audio que se tocará en la página.IE
• Bgproperties define el movimiento vertical del fondo.IE
Los atributos se incluyen en la etiqueta de apertura, separados por un espacio.
¿Cómo se utilizan los colores en HTML?
Se pueden llegar a tener 16 millones de colores en una página web.
Existen dos formas para aplicar colores a una página web:
1. Se especifica el color deseado directamente con el nombre del color en ingles: Ej: blue,
green, yellow
2. Se especifica el color deseado mediante números hexadecimales mediante la siguiente
estructura:
#RRVVAA
El color tiene un signo de numeral # antecediendo a los 6 números.
Existen dos números para cada color principal: rojo, verde y azul.
Cada uno de los números varía hexadecimal mente {0,1,2....,9,A,B,...F}.
Ejemplos de Colores:
Utilizando estos datos, haremos una página con fondo celeste y letras negras. Usaremos para este
efecto los atributos bgcolor y text. :
Ejemplo 3:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor=”#C0D9D9” text=”#000000”>
Bienvenidos al curso de HTML
</body>
</html>
Grabe este archivo seleccionando la opción de Guardar/Grabar de su editor de texto, de modo
que se mantenga el nombre index.html. Cuando usted vaya a su navegador WWW y seleccione
la opción de Actualizar, notara el cambio.
Cómo cambiar la apariencia de una página.
Color de fondo.
Para cambiar el color de fondo de nuestras páginas usaremos un nuevo atributo de la, ya conocida, etiqueta BODY.
El nuevo atributo se llama BGCOLOR y debe ser añadido a la etiqueta BODY existente:
<body bgcolor="#RRGGBB">
Por ejemplo para crear una página con el fondo de color azul podemos usar:
<body bgcolor="#0000FF">
Etiqueta <hr>
La etiqueta <hr> dibuja de manera predeterminada una regla horizontal alineada
automáticamente, con una apariencia de tercera dimensión. Esta etiqueta especial, por que no
necesita de cierre, tiene los siguientes atributos:
• Align establece que la regla se alinee a la izquierda, centro o derecha
LEFT,CENTER o RIGHT
• NOSHADE quita el sombreado predeterminado de la regla
• WIDTH permite especificar el ancho de la regla (en pixeles o porcentaje)
• SIZE permite especificar el alto de la regla (en pixeles)
Imágenes en HTML
Hasta este momento se ha trabajado solamente con texto. Comenzemos a introducir gráficos en
nuestra página HTML.
Se deben tener dos consideraciones importantes para trabajar con gráficos:
Los únicos formatos, que por ahora soportan los visualizadores son: *.gif y *.jpg o *.jpeg.
Las imágenes no deben ser de tamaño grande por que el visualizador o navegador puede demorar
demasiado en bajarlas.
Etiqueta <img>
Se trata de otra etiqueta especial, pues no necesita de etiqueta de cierre. Esta etiqueta instruye al
navegador para que exhiba la imagen especificada. El formato básico para incluir un gráfico es:
<img src=”imagen.ext”>
Frames
Ofrece la posibilidad de utilizar marcos y varias páginas en una sola.
Etiqueta <frameset> </frameset>
Define la disposición gráfica de los marcos en la pantalla.
Atributos:
• Rows Determina el alto de las filas
• Cols Determina el ancho de las columnas.
• Framespacing Espacio entre frames
Etiqueta <frame></frame>
Define un solo marco que forma parte del conjunto de marcos definidos en <frameset>.Sus
atributos son:
• Rows Determina el alto de las filas
• Cols Determina el ancho de las columnas.
• Framespacing Espacio entre frames
Etiqueta <var> </var>
Indica al navegador que exhiba el texto especificado en una fuente más pequeña, de ancho fijo.
Sintaxis de ejemplo:
<var>Este texto será mas pequeño y de formato especial</var>
Atributo bgproperties=”fixed ” del BODY
Indica a su navegador Internet Explorer que mantenga el fondo constante y no móvil de forma
vertical.
Sintaxis de ejemplo:
<body text=”#FFFFFF” bgcolor=”#000000” background=”fondo.gif”
bgproperties=”fixed”>
consejo no te desesperes si no te sale bien mejor relajate y vusca tu error con calma porque sino vas a dejar tu pagina a medias y con errores
espero que les haya gustado y recuerda
comentar es agradecer
Manual Básico de HTML
Creación y Estructura de Páginas WEB
comenzemos
Requerimientos y material
Internet es un medio que no precisa de mucho conocimiento, el prerequisito inmediato para
poder usar este manual es tener conocimientos básicos de manejo de Windows, un editor de texto
y haber utilizado alguna vez un navegador de Internet.
Para la aplicación de los ejemplos de este manual usted necesitara:
• Un navegador de Internet
• Un editor de texto, preferentemente el Block de notas (Notepad)
• Un medio físico para grabar los ejemplos, ya sea un disquete o una carpeta en su
disco duro.
• Un archivo para fondo, llamado fondo.gif.
• Un archivo gráfico, llamado foto.jpg.
¿Por dónde comenzar?
Lo primero es saber donde crear el archivo texto que contendrá las instrucciones HTML
(Hipertexto), para lo cual tenemos varias opciones:
1. Utilizar programas creados para desarrollo de páginas WEB, entre los que podemos
citar:
• Microsoft Front Page
• Hot Dog
Páginas WEB
El Hipertexto es un archivo de texto que contiene instrucciones que pueden ser interpretadas por
un navegador de Internet. Estas instrucciones son denominadas Etiquetas.
Etiquetas
Una etiqueta cumple su función de la siguiente manera:
<nombre de la etiqueta> Apertura de una etiqueta siempre entre “< >”
texto/gráfico/etiquetas A la cual se aplica la etiqueta
</nombre de la etiqueta> Cierra de la etiqueta siempre entre “</ >”
Estructura básica de una página WEB
Una página web esta compuesta de 2 partes: el encabezamiento y el cuerpo de la página.
Paralelamente a esto, existen tres etiquetas fundamentales, las mismas que deben estar incluidas
en el archivo HTML de manera obligatoria. Estas tres etiquetas fundamentales son:
<html> </html> Indica al navegador que el documento texto que esta leyendo es un documento
HTML. Esta etiqueta se abre al inicio del archivo y se cierra al final del
mismo.
<head> </head> Acá se detalla el encabezado de la página WEB. Esta etiqueta se abre luego de
<html>.
<body> </body> Cuerpo de la página donde se despliega el contenido global. Esta etiqueta se
abre luego de cerrar el encabezamiento con </head> y se extiende hasta el
final de la página, cerrándose antes de </HTML>.
Ejemplo 1:
<html>
<head> </head>
<body>
Bienvenidos al curso de HTML
</body>
</html>
Importante:
Como se ve en el ejemplo 1. Toda etiqueta abierta debe cerrarse. En caso de no cerrarse el error
podría causar confusión al navegador.
Etiqueta: <title> </title>
Esta etiqueta va en la parte del encabezamiento de la página web, es decir en el HEAD, y define
en su contenido el título de la página web, mismo que aparecerá en la parte superior izquierda de
la pantalla de su navegador.
Sin cerrar nuestro navegador de Internet, volvemos al editor de texto e incluimos el campo
<title> entre las etiquetas de apertura y cierre del encabezado (head).
Ejemplo 2:
<html>
<head> <title>Curso de HTML</title> </head>
<body>
Bienvenidos al curso de HTML
</body>
Etiqueta <body> </body>
Todo el texto, las imágenes y el formato visibles al usuario deben encontrarse entre las etiquetas
<body>...</body>. Esta etiqueta cuenta con los siguientes atributos:
• Bgcolor define el color de fondo de la página
• Text define el color del texto de la página
• Link define el color de los vínculos en la página
• Alink define el color del vínculo actual o activado en la página
• Vlink define el color del vínculo ya visitado
• Background define el archivo gráfico que será desplegado como fondo
• Bgsound define el archivo de audio que se tocará en la página.IE
• Bgproperties define el movimiento vertical del fondo.IE
Los atributos se incluyen en la etiqueta de apertura, separados por un espacio.
¿Cómo se utilizan los colores en HTML?
Se pueden llegar a tener 16 millones de colores en una página web.
Existen dos formas para aplicar colores a una página web:
1. Se especifica el color deseado directamente con el nombre del color en ingles: Ej: blue,
green, yellow
2. Se especifica el color deseado mediante números hexadecimales mediante la siguiente
estructura:
#RRVVAA
El color tiene un signo de numeral # antecediendo a los 6 números.
Existen dos números para cada color principal: rojo, verde y azul.
Cada uno de los números varía hexadecimal mente {0,1,2....,9,A,B,...F}.
Ejemplos de Colores:
Utilizando estos datos, haremos una página con fondo celeste y letras negras. Usaremos para este
efecto los atributos bgcolor y text. :
Ejemplo 3:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor=”#C0D9D9” text=”#000000”>
Bienvenidos al curso de HTML
</body>
</html>
Grabe este archivo seleccionando la opción de Guardar/Grabar de su editor de texto, de modo
que se mantenga el nombre index.html. Cuando usted vaya a su navegador WWW y seleccione
la opción de Actualizar, notara el cambio.
Cómo cambiar la apariencia de una página.
Color de fondo.
Para cambiar el color de fondo de nuestras páginas usaremos un nuevo atributo de la, ya conocida, etiqueta BODY.
El nuevo atributo se llama BGCOLOR y debe ser añadido a la etiqueta BODY existente:
<body bgcolor="#RRGGBB">
Por ejemplo para crear una página con el fondo de color azul podemos usar:
<body bgcolor="#0000FF">
Etiqueta <hr>
La etiqueta <hr> dibuja de manera predeterminada una regla horizontal alineada
automáticamente, con una apariencia de tercera dimensión. Esta etiqueta especial, por que no
necesita de cierre, tiene los siguientes atributos:
• Align establece que la regla se alinee a la izquierda, centro o derecha
LEFT,CENTER o RIGHT
• NOSHADE quita el sombreado predeterminado de la regla
• WIDTH permite especificar el ancho de la regla (en pixeles o porcentaje)
• SIZE permite especificar el alto de la regla (en pixeles)
Imágenes en HTML
Hasta este momento se ha trabajado solamente con texto. Comenzemos a introducir gráficos en
nuestra página HTML.
Se deben tener dos consideraciones importantes para trabajar con gráficos:
Los únicos formatos, que por ahora soportan los visualizadores son: *.gif y *.jpg o *.jpeg.
Las imágenes no deben ser de tamaño grande por que el visualizador o navegador puede demorar
demasiado en bajarlas.
Etiqueta <img>
Se trata de otra etiqueta especial, pues no necesita de etiqueta de cierre. Esta etiqueta instruye al
navegador para que exhiba la imagen especificada. El formato básico para incluir un gráfico es:
<img src=”imagen.ext”>
Frames
Ofrece la posibilidad de utilizar marcos y varias páginas en una sola.
Etiqueta <frameset> </frameset>
Define la disposición gráfica de los marcos en la pantalla.
Atributos:
• Rows Determina el alto de las filas
• Cols Determina el ancho de las columnas.
• Framespacing Espacio entre frames
Etiqueta <frame></frame>
Define un solo marco que forma parte del conjunto de marcos definidos en <frameset>.Sus
atributos son:
• Rows Determina el alto de las filas
• Cols Determina el ancho de las columnas.
• Framespacing Espacio entre frames
Etiqueta <var> </var>
Indica al navegador que exhiba el texto especificado en una fuente más pequeña, de ancho fijo.
Sintaxis de ejemplo:
<var>Este texto será mas pequeño y de formato especial</var>
Atributo bgproperties=”fixed ” del BODY
Indica a su navegador Internet Explorer que mantenga el fondo constante y no móvil de forma
vertical.
Sintaxis de ejemplo:
<body text=”#FFFFFF” bgcolor=”#000000” background=”fondo.gif”
bgproperties=”fixed”>
consejo no te desesperes si no te sale bien mejor relajate y vusca tu error con calma porque sino vas a dejar tu pagina a medias y con errores
espero que les haya gustado y recuerda
comentar es agradecer