Diseño de Paginas Con HTML

HTML (Hyper Text Markup Language)
Lenguaje con el que se escriben paginas web.

Es un lenguaje de hipertexto. Permite escribir texto de forma estructurada. Compuesto por etiquetas (marcan el inicio y fin de
cada elemento del documento) Documento hipertexto contiene texto, imgenes sonido y video (documento multimedia).
Interpreta el cdigo HTML de la pgina.
Internet Explorer y Netscape Navigator
Programa que permite redactar documentos.

Editores visuales. Evitan la escritura de cdigo HTML (la pagina se construye). Editores de texto. La pagina se crea a travs del cdigo HTML.
<html>
<head> ... <title> Curso de HTML </title> </head> <body> ... </body> </html>
Entre las etiquetas <html> y </html> esta comprendido el resto del cdigo HTML de la pgina <head> y </head>. Cabecera de la pagina puede contener <link>, <style>, <script> <meta> <title> El cuerpo del documento contiene la informacin propia del documento (el texto de la pgina, las imgenes, los formularios, etc. color o la imagen de fondo de la pgina .
Color
Hexadecimal #FFFFFF #000000 #000080 #0000FF #008000 #008080 #00FF00
Nombre white black navy blue green teal lime
#00FFFF
#800000 #800080 #808000 #808080 #C0C0C0 #FF0000 #FF00FF #FFFF00
aqua
maroon purple olive gray silver red fuchsia yellow
Crear un directorio de trabajo para la pagina.(ejm. mipagina) en mis
documentos
Con el bloc de notas escribir el siguiente codigo:
<html> <head> <title>pagina de inicio</title> </head> <body bgcolor="99CC99" > </body> </html>
Guardar el archivo guardar como con el nombre inicio.html en la carpeta mipagina
Se requiere dar formato al texto
<y>
indican inicio y fin de etiqueta

Carcter Representacin
< >
< > á Á
Algunos caracteres especiales
é
É í Í ó
Se puede escribir directamente sin la representacin en HTML &nbsp espacio en blanco
Ó
ú Ú ñ Ñ
Una ilustracin simple
<html> <head> <title>pagina de inicio</title> </head> <body bgcolor="99CC99" background="imagenes/fondopatas.gif" leftmargin="40" topmargin="40" marginwidth="40" marginheight="40"> hola mundo este es un texto comn como estn, cancin&oacute<br> cuando se esta pensando <pre>Hola, BIENVENIDOS esta ES MI PGINA WEB y esto un texto preformateado</pre> Inicio de un separador horizontal<hr align="left" width="50%" size="10" noshade>Bienvenidos a mi pgina. </body> </html>
<font> y </font>
Atributo face Significado fuente
propiedades del texto
Posibles valores nombre de la fuente, o fuentes
color
size
color del texto

tamao del texto
nmero hexadecimal o texto predefinido

valores del 1 al 7, siendo por defecto el 3, o desplazamiento respecto al tamao por defecto, aadiendo + o - delante del valor
<font color="#993366" size="4" face="Arial"> Bienvenidos a mi pgina, texto con propiedades </font>
fuente para todo el documento

<body> <basefont color="#006699" size="4" face="Arial">
:
Etiqueta <b> Significado negrita Ejemplo curso HTML aulaclic
<i>
<u> <s> <tt> <big> <small>
cursiva
subrayado tachado
curso HTML aulaclic

curso HTML aulaclic curso HTML aulaclic curso HTML aulaclic curso HTML aulaclic curso HTML aulaclic
teletipo (mquina de escribir)

aumenta el tamao de la fuente
disminuye el tamao de la fuente
Encabezados - Ttulos
Etiqueta Ejemplo
<H1> Ttulo 1: HTML

<H2>
Ttulo 2: HTML
Ttulo 3: HTML
Ttulo 4: HTML
Ttulo 5: HTML
Ttulo 6: HTML
<H3>
<H4> <H5> <H6>
<H2 align="center">El lenguaje HTML</H2><H4>Apartado 1: Las etiquetas</H4>
hiperenlace, hipervnculo, o vnculo
<a> y </a>.
href especifica la pgina a la que est asociado el enlace
Referencia absoluta: Conduce a una ubicacin externa al sitio
<a href="http://www.aulaclic.com">Visita www.aulaclic.com</a>

Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio
<a href="inicio1.html">cambiar a otro documento "ref. relativa"</a> <a href="../mipagina/imagenes/inicio1.html">otra carpeta </a>
<a href="//D:/diplomado/tutoriales/www.aulaclic.es/html/index.htm">navegar por el tutorial</a>
Destino del enlace

determina en qu ventana va a ser abierta la pgina vinculada atributo target _blank Abre el documento vinculado en una ventana nueva del navegador. _self Abre el documento vinculado en el mismo marco o ventana que el vnculo
<a href="inicio1.html" target="_blank"> cambiar a otro documento "ref. relativa"</a> <br>
Anclas o puntos de fijacin

permite ir directamente al apartado deseado en un documento extenso
<a name="miancla"></a>Texto con ancla <a href="#miancla">Enlace al ancla</a> define el ancla lleva al ancla
<img> src : especifica el nombre de la imagen Las imgenes pueden ser de formatos diferentes: bmp, gif, jpg, etc
<img src="imagenes/gatito.gif" alt="imagen ejemplo">

<img src="imagenes/foto.gif" alt="mi fiesta">
El atributo border puede tomar valores numricos <img src="imagenes/gatito.gif" alt="imagen ejemplo" border="4">
imagen con borde y con un enlace:

<a href="inicio1.html" target="_blank" > <img src="imagenes/gatito.gif" border="4" > </a>
tamao de la imagen
width (anchura) y height (altura)
<img src="imagenes/foto.gif" alt="mi fiesta" width="500" height="400">
Alineacion de la imagen
align
Este atributo indica la alineacin de las imgenes con respecto a la lnea de texto en la que se encuentran.
<table> y </table> <tr> y </tr> <td> y </td>
INICO Y FIN DE TABLA Inicio y fin de fila columna o celda inicio de tabla inicio de fila 1 celda 1 de la fila 1 celda 2 de la fila 1 fin de la fila 1 inicio de fila 2 celda 1 de la fila 2 celda 2 de la fila 2 fin de la fila 2 fin de la tabla
<table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> .. </table>
Atributo
Significado
Posibles valores un nmero, acompaado de % cuando se desee que sea en porcentaje un nmero, acompaado de % cuando se desee que sea en porcentaje un nmero un nmero un nmero left (izquierda) right (derecha) center (centro) nmero hexadecimal nmero hexadecimal nmero hexadecimal
width
height cellpadding cellspacing border align bgcolor background bordercolor
ancho de la tabla
altura de la tabla espacio entre el contenido de las celdas y el borde espacio entre celdas grosor del borde alineacin de la tabla dentro de la pgina color de fondo imagen de fondo color del borde
<table width="50%" border="2" align="center" cellspacing="0" bordercolor="green" bgcolor="blue">
nombre FIESTA 3 DE JULIO
descripcin POR EL CENTENARIO DE LA FACULTAD
FOTOGRAFIA aqui va texto, imagenes, video
GATITO
GRAFICO EXTARIDO DEL TUTORIAL
OTRO CUALQUIERA
PUEDE IR CUALQUIER COSA
O SIMPLEMENTE TEXTO
<table border="2"> <tr> <td>nombre</td> <td>descripocion</td> <td>FOTOGRAFIA</td> </tr> <tr> <td>FIESTA 3 DE JULIO</td> <td>POR EL CENTENARIO DE LA FACULTAD</td> <td>aqui va texto, imagenes, video</td> </tr> <tr> <td>GATITO</td> <td>GRAFICO EXTARIDO DEL TUTORIAL</td> <td><img src="imagenes/gatito.gif" alt="imagen ejemplo" border="4"></td> </tr> <tr> <td>OTRO CUALQUIERA</td> <td>PUEDE IR CUALQUIER COSA</td> <td>O SIMPLEMENTE TEXTO</td> </tr> </table>
<frameset> y </frameset> Define el conjunto de marcos no requiere las etiquetas <body> y </body>
Atributo Significado tamao de cada una de las columnas en que se divide el documento tamao de cada una de las columnas en que se divide el documento Posibles valores un nmero (acompaado de % cuando se desee que sea en porcentaje) por cada columna, separados por comas. un nmero (acompaado de % cuando se desee que sea en porcentaje) por cada fila, separados por comas.
cols
rows
frameborde r
framespaci ng border bordercolor
aparece o no el borde de los marcos

separacin entre los marcos grosor del borde color del borde
yes no
un nmero un nmero, acompaado de % cuando se desee que sea en porcentaje nmero hexadecimal
<frame>
indica el documento a cargar en el marco

atributos de un marco:
Atributo frameborder name noresize marginwidth marginheight
Significado aparece o no el borde del marco nombre del marco si aparece, el usuario no podr redimensionar el tamao de este marco anchura del margen con respecto a los bordes del marco altura del margen con respecto a los bordes del marco se mostrar o no la barra de desplazamiento cuando la pgina del marco no se pueda visualizar completamente en l documento que se cargar en el marco
Posibles valores yes o 1 no o 0 cualquier valor no puede tomar valores un nmero, acompaado de % cuando se desee que sea en porcentaje un nmero, acompaado de % cuando se desee que sea en porcentaje yes no auto ruta y nombre del documento
scrolling
src
<frameset rows="90,*" framespacing="3" frameborder="yes" border="3" bordercolor="blue"> <frame src="titulo.html" name="marcosuperior" frameborder="yes" scrolling="yes" noresize> <frameset cols="150,*" framespacing="3" frameborder="yes" border="3" bordercolor="red"> <frame src="menu.html" name="marcoizquierdo" scrolling="yes" noresize> <frame src="inicio.html" name="marcoderecho"> </frameset> </frameset>
Permite recoger datos introducidos por el usuario.
Un formulario est formado, entre otras cosas, por etiquetas, campos de texto, mens desplegables, y botones
<form> y </form> indican el inicio y fin de un formulario
El atributo action indica una direccin de correo electrnico o la direccin del programa que se encargar de procesar el contenido del formulario. El atributo method indica el metodo mediante el que se transfieren las variables del formulario. Su valor puede ser get o post
<textarea> y </textarea>
rea de texto
<textarea name=area1" cols="30" rows="3"> Aqu se escribe el texto</textarea>

<input> elemento de entrada atributo name indica el nombre del elemento de entrada
atributo type indica el tipo de elemento de entrada. El atributo size indica el nmero de caracteres
El atributo maxlenght indica el nmero de caracteres
El atributo value indica el valor inicial del campo de texto
Elementos para type:

TEXTO <input name="campo" type="text" value="Campo de texto" size="20" maxlength="15">
CONTRASEA
<input name="contra" type="password" value="contrasea" size="20" maxlength="15"> <input name="boton" type="submit" value="Enviar"> <input name="casilla" type="checkbox" value="acepto" checked> <input name="prefiere" type="radio" value="estudiar" checked> <input name="prefiere" type="radio" value="trabajar">
BOTON
CASILLA DE VERIFICACION
BOTON DE OPCION
SELECION MULTIPLE
<select name="animal" size="3" multiple> <option selected>---Elige animales---</option> <option value="ave">Loro</option> <option>Perro</option> <option>Gato</option> <option>Pez</option> </select>
RESTABLECER
<input name="borrar" type="reset" id="borrar" value="borrar">

Diseño de Paginas Con HTML

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Diseño de Paginas Con HTML

Caricato da

Copyright:

Formati disponibili

HTML (Hyper Text Markup Language)

Lenguaje con el que se escriben paginas web.

Interpreta el cdigo HTML de la pgina.

Internet Explorer y Netscape Navigator

Programa que permite redactar documentos.

Hexadecimal #FFFFFF #000000 #000080 #0000FF #008000 #008080 #00FF00

Nombre white black navy blue green teal lime

Crear un directorio de trabajo para la pagina.(ejm. mipagina) en mis

Guardar el archivo guardar como con el nombre inicio.html en la carpeta mipagina

Se requiere dar formato al texto

indican inicio y fin de etiqueta

&lt; &gt; &aacute; &Aacute;

Algunos caracteres especiales

Se puede escribir directamente sin la representacin en HTML &nbsp espacio en blanco

Una ilustracin simple

propiedades del texto

Posibles valores nombre de la fuente, o fuentes

color del texto

nmero hexadecimal o texto predefinido

fuente para todo el documento

curso HTML aulaclic

teletipo (mquina de escribir)

disminuye el tamao de la fuente

<H1> Ttulo 1: HTML

<H4> <H5> <H6>

<H2 align="center">El lenguaje HTML</H2><H4>Apartado 1: Las etiquetas</H4>

hiperenlace, hipervnculo, o vnculo

Referencia absoluta: Conduce a una ubicacin externa al sitio

<a href="http://www.aulaclic.com">Visita www.aulaclic.com</a>

Destino del enlace

<a href="inicio1.html" target="_blank"> cambiar a otro documento "ref. relativa"</a> <br>

Anclas o puntos de fijacin

<img src="imagenes/gatito.gif" alt="imagen ejemplo">

imagen con borde y con un enlace:

<table> y </table> <tr> y </tr> <td> y </td>

<table width="50%" border="2" align="center" cellspacing="0" bordercolor="green" bgcolor="blue">

nombre FIESTA 3 DE JULIO

descripcin POR EL CENTENARIO DE LA FACULTAD

FOTOGRAFIA aqui va texto, imagenes, video

GRAFICO EXTARIDO DEL TUTORIAL

PUEDE IR CUALQUIER COSA

aparece o no el borde de los marcos

indica el documento a cargar en el marco

Atributo frameborder name noresize marginwidth marginheight

Permite recoger datos introducidos por el usuario.

<textarea name=area1" cols="30" rows="3"> Aqu se escribe el texto</textarea>

El atributo value indica el valor inicial del campo de texto

Elementos para type:

<input name="borrar" type="reset" id="borrar" value="borrar">

Potrebbero piacerti anche

< > á Á