Crea tus propias paginas web : Creacion de paginas web con codigo html

DISEÑO DE PÁGINAS WEB DINÁMICAS

DEFINICION DE HTML

Hyper Text Markup Language Lenguaje de Marcas de Hipertexto).

Que sirve para modelar texto y agregarle funciones especiales

Es la base para la creación de

páginas web tradicionales.

HTML

Siglas de HyperText Markup Language (Lenguaje de Marcas de Hipertexto), es el lenguaje de marcado predominante para la construcción de páginas web.

Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>).

el lenguaje html (hypertext markup language) trabaja con etiquetas (tags, en inglés).
cada una de las etiquetas define una parte determinada del contenido de una página web.

</cierre de etiqueta>

Editor de HTML

¿Qué programa utilizo para poder programar en HTML?:

Existen editores de texto para páginas Web, son libres, y se integran a una web independiente de la tecnología, es decir, pueden usarlos en páginas para ASP, ASP .Net, PHP, etc.

Navegador

Los Navegadores mas comunes son:

•Microsoft Internet Explorer

•Netscape Navigator

•Mozilla FireFox

•Google Chrome

El programa que usas para navegar por Internet, no es mas ni menos que un compilador de lenguaje. Que es un programa que comprende el HTML perfectamente, lo lee y procesa, devolviendo como resultado una página. Constituida principalmente por texto e imágenes. Por tanto cada vez que se programe una página en HTML, se necesitará verla dentro de uno de estos navegadores.

Extensiones

Una vez diseñada nuestras páginas en HTML, necesitaremos guardarlas en forma de archivo. Dichos archivos tienen la extensión html o htm. Gracias a dicha extensión nuestro navegador puede conocer que tipo de lenguaje se está utilizando en dicho archivo. Por ejemplo, la mayoría de las páginas iniciales de un sitio web se llaman:

index.htm

De igual forma podría llamarse:

index.html

Todo documento html debe estar incluido dentro de las etiquetas
<html> y </html>. Esto le indica al navegador en qué lenguaje está creado el documento.

<HTML>

COLEGIO DE ESTUDIOS CIENTÍFICOS Y TECNOLÓGICOS DEL ESTADO DE HIDALGO

</HTML>

Dentro de las etiquetas
<HTML> y </HTML>
existen dos partes fundamentales:

la cabecera del documento
<HEAD> </HEAD>

y el cuerpo del documento <BODY></BODY>.

<HTML>

<HEAD>

<TITLE> TITULO DEL PROGRAMA</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

CUERPO
DEL PROGRAMA
<BODY>
</BODY>

Entre estas etiquetas pondremos el contenido de nuestra página web: texto, imágenes, enlaces, tablas, formularios, etc... Cada uno de estos elementos tiene sus propias etiquetas.

ESTRUCTURA BASICA DE HTML

<HTML>

<HEAD>

<TITLE> PRACTICA1</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

PARRAFOS

Cuando llegamos al final de la línea de texto, éste saltará automáticamente a la línea siguiente, pero si queremos crear párrafos separados por una línea en blanco utilizaremos la etiqueta <P> delante del texto. No necesitamos incluir al final del párrafo la etiqueta de cierre. Por ejemplo:

<HTML>
<HEAD>
<TITLE>Párrafos</TITLE>
</HEAD>
<BODY>
<P>Esto es un párrafo dentro de una página web.
<P>Esto es otro párrafo que está separado del anterior por una línea en blanco.
</BODY>
</HTML>

ENCABEZADO

Podemos crear encabezados (también llamados cabeceras) para el texto por ejemplo para señalar los distintos apartados de nuestra página. Los encabezados se escriben entre las etiquetas <H1> y </H1>, <H2> y </H2>, etc. Hay 6 tamaños de encabezados (desde el H1 hasta el H6), el número indica el tamaño del texto. El texto más grande corresponde al H1. Los encabezados aparecen siempre en negrita. Veamos un ejemplo de esto:

ENCABEZADO
EJEMPLO

<HTML>
<HEAD>
<TITLE>Encabezado</TITLE>
</HEAD>
<BODY>
<H1>Encabezado 1</H1>
<H2>Encabezado 2</H2>
<H3>Encabezado 3</H3>
<H4>Encabezado 4</H4>
<H5>Encabezado 5</H5>
<H6>Encabezado 6</H6>
</BODY>
</HTML>

CENTRADO

Para centrar los elementos del documento HTML utilizamos las etiquetas <CENTER> y </CENTER>. Todo lo que está dentro de estas etiquetas aparecerá centrado horizontalmente en la página. Podemos centrar imágenes, texto, tablas, etc... Por ejemplo:

CENTRADO

<HTML>
<HEAD>
<TITLE>Centrado</TITLE>
</HEAD>
<BODY>
<CENTER>CECYTEH</CENTER>
</BODY>
</HTML>

SEPARADORES HORIZONTALES

Podemos crear una línea horizontal para separar distintas partes de una página web. Para ello utilizamos la etiqueta <HR>, no necesita etiqueta de cierra y crea una línea horizontal que ocupa todo el ancho de la página. ejemplo de cómo se utiliza:

SEPARADOR HORIZONTAL

<HTML>
<HEAD>
<TITLE> Separador horizontal </TITLE>
</HEAD>
<BODY>
<CENTER> Texto centrado </CENTER>
<HR>
</BODY>
</HTML>

CARACTERÍSTICAS DE LOS SEPARADORES HORIZONTALES

Para crear un separador horizontal, utilizando la etiqueta <HR>.

Ahora veremos cómo cambiar las propiedades de esta etiqueta para modificar el ancho, el grosor, la alineación horizontal y el formato (con sombra o sin sombra).

Modificar el ancho del separador horizontal

Para establecer el ancho del separador horizontal tendremos que añadir a la etiqueta <HR> el comando WIDTH="ancho en pixeles o en %".

Un ejemplo:

Modificar el formato del separador horizontal

Si no queremos que el separador horizontal aparezca incrustado en la página, podemos añadir la a la etiqueta <HR> el comando NOSHADE.

Veamos un ejemplo:

Modificar el grosor del separador horizontal

Podemos hacer el separador horizontal más grueso añadiendo el comando SIZE="grueso en pixeles" a la etiqueta <HR>. Si queremos crear un separador horizontal con un grosor de 20 píxeles y son sombra tendríamos que escribir la siguiente línea de código:

Alineación del separador horizontal

Podemos alinear el separador horizontal a la izquierda o a la derecha. Si no especificamos la alineación, el separador aparecerá siempre centrado.

Para alinearlo a la izquierda utilizaremos el comando ALIGN="LEFT" añadiéndolo a la etiqueta <HR>, tal y como puede verse en el ejemplo:

Para alinearlo a la derecha utilizamos el mismo comando pero con la opción RIGHT, como en el siguiente ejemplo:

ETIQUETAS ANIDADAS

Tal y como ocurre con la etiqueta HEAD, que contiene dentro la etiqueta TITLE, podemos anidar unas etiquetas dentro de otras.

El secreto es escribir correctamente el cierre de las etiquetas (siempre que se necesite esa etiqueta de cierre) en el orden correcto para evitar fallos.

Por ejemplo podemos incluir la etiqueta H1 dentro de la etiqueta CENTER para conseguir que el encabezamiento aparezca centrado, la línea de código dentro del cuerpo del documento quedaría así:

EJEMPLO

<HTML>
<HEAD>
<TITLE>ETIQUETAS ANIDADAS</TITLE>
</HEAD>
<BODY>
<CENTER><H1>Curso html</H1></CENTER>
<HR>
</BODY>
</HTML>

FORMATO DE TEXTO

SALTO DE LINEA

Si queremos que el texto pase a la línea siguiente sin dejar una línea en blanco, lo que llamamos un salto de línea, utilizamos la etiqueta <BR> delante del texto.

Esta etiqueta, al igual que la etiqueta <P>, no necesita cierre.

Si escribimos dentro del cuerpo de nuestra página el siguiente código:

EJEMPLO

<HTML>

<HEAD>

<TITLE> Salto de linea </TITLE>

</HEAD>

<BODY>

<HR>

<CENTER><h1> CECYTEH </h1></CENTER>

<BR>

<CENTER><h1> INFORMÁTICA </h1></CENTER>

<BR>

<HR>

</BODY>

</HTML>

NEGRITA Y CURSIVA

Para escribir un texto en negrita lo incluiremos dentro de las etiquetas

<B> y </B>, si escribimos este código:

<B>Texto en negrita</B>

Para escribir un texto en cursiva utilizamos las etiquetas <I> e </I>, por ejemplo:

<I>Texto en cursiva</I>

EJEMPLO

<HTML>

<HEAD>

<TITLE> NEGRITA Y CURSIVA </TITLE>

</HEAD>

<BODY>

<HR>

<CENTER><h1><B><I> CECYTEH </I></B></h1></CENTER>

<BR>

<CENTER><h1> INFORMÁTICA </h1></CENTER>

<BR>

<HR>

</BODY>

</HTML>

TEXTO PREFORMATEADO

Podemos crear un texto que parezca haber sido escrito con una máquina de escribir, para ello utilizamos las etiquetas <PRE> y </PRE>.

El texto aparecerá con el tipo de letra de las máquinas de escribir antiguas (tipo Courier) y respetará los espacios en blanco y los saltos de línea sin necesidad de incluir ninguna etiqueta más. Podemos crear un texto que parezca haber sido escrito con una máquina de escribir, para ello utilizamos las etiquetas

<PRE> y </PRE>. El texto aparecerá con el tipo de letra de las máquinas de escribir antiguas (tipo Courier) y respetará los espacios en blanco y los saltos de línea sin necesidad de incluir ninguna etiqueta más.

EJEMPLO

<HTML>

<HEAD>

<TITLE>TEXTO PREFORMATEADO</TITLE>

</HEAD>

<BODY>

<HR>

<CENTER><h1>MECATRONICA</h1></CENTER>

<HR>

<PRE>

Podemos crear un texto que parezca haber sido escrito con una máquina de escribir,

para ello utilizamos las etiquetas

El texto aparecerá con el tipo de letra de las máquinas de escribir antiguas (tipo Courier)

respetará los espacios en blanco y los saltos de línea sin necesidad de incluir ninguna etiqueta más.

</PRE>

</BODY>

</HTML>

<PRE>

Podemos crear un texto que parezca haber sido escrito con una máquina de escribir,

para ello utilizamos las etiquetas

El texto aparecerá con el tipo de letra de las máquinas de escribir antiguas (tipo Courier)

respetará los espacios en blanco y los saltos de línea sin necesidad de incluir ninguna etiqueta más.

</PRE>

TEXTO CON TAMAÑO MENOR

Con las etiquetas <TT> y </TT> conseguimos un texto con un tamaño menor y con la apariencia de un texto escrito a máquina, pero en este caso no se formatea el texto, sólo afecta al tipo de letra.

EJEMPLO

<HTML>

<HEAD>

<TITLE>TEXTO MENOR TAMAÑO</TITLE>

</HEAD>

<BODY>

<HR>

<CENTER><h1><B><I>CECYTEH</I></B></h1></CENTER>

<CENTER><h1>INFORMATICA</h1></CENTER>

<HR>

<TT>

Podemos crear un texto que parezca haber sido escrito con una máquina de escribir,

para ello utilizamos las etiquetas

El texto aparecerá con el tipo de letra de las máquinas de escribir antiguas (tipo Courier)

respetará los espacios en blanco y los saltos de línea sin necesidad de incluir ninguna etiqueta más.

</TT>

</BODY>

</HTML>

CITAS TEXTUALES

Utilizando las etiquetas <BLOCKQUOTE> y </BLOCKQUOTE> conseguimos que el texto escrito entre ambas aparezca con márgenes a izquierda y derecha. Normalmente se utiliza esta etiqueta para introducir citas textuales y destacarlas del texto general.

EJEMPLO

<HTML>

<HEAD>

<TITLE>CITA TEXTUAL</TITLE>

</HEAD>

<BODY>

<HR>

<CENTER><h1>MECATRONICA</h1></CENTER>

<HR>

<BLOCKQUOTE>Isamel. Hace años, no importa cuántos exactamente, hallándome con poco o ningún dinero en la bolsa y sin nada de especial interés que me retuviera en tierra, pensé que lo mejor sería darme a la mar por una temporada para ver la parte acuática del mundo. </BLOCKQUOTE>

</BODY>

</HTML>

Modificar el tipo y tamaño de letra

Uno de los elementos para darle carácter a una página web es el tipo y tamaño de fuente que utilicemos.

Hasta ahora hemos escrito el texto utilizando simplemente párrafos o texto preformateado.

Veremos cómo determinar el tipo de fuente para nuestra página.

La etiqueta que utilizaremos es <FONT></FONT>. Esta etiqueta admite varios atributos: tamaño de fuente, tipo de fuente y color. Para determinar el tipo de fuente añadiremos a esta etiqueta el atributo SIZE="número tamaño letra". Los tamaños de letra van, de menor a mayor, del 1 al 7. Si dentro de cuerpo del documento escribimos lo siguiente:

<P><FONT SIZE="5">Tamaño 5</FONT>

El tamaño por defecto es el 3 y podemos cambiar el texto con respecto a este tamaño base utilizando -1 para un tamaño algo menor, +1 para un tamaño algo mayor que el 3 y +2 para un tamaño aún mayor. ejemplo:

<P><FONT > el tamaño base</FONT>

<P><FONT SIZE="-1"> menor</FONT>

<P><FONT SIZE="+1"> mayor</FONT>

<P><FONT SIZE="+2">grande</FONT>

También podemos especificar un tamaño base para todo el documento incluyendo la etiqueta

<BASEFONT SIZE="número de tamaño"> al comienzo del documento, justo debajo de la etiqueta <BODY>. Por ejemplo:

De esta manera estableceríamos un tamaño base 2 para todo el documento y después podríamos utilizar -1, +1, +2, etc para modificar algunas partes del texto.

Crea tus propias paginas web

lunes, 1 de junio de 2015

Creacion de paginas web con codigo html

No hay comentarios:

Publicar un comentario

Archivo del blog