DISEñO DE PAGINAS CON HTML

DISEO DE PAGINAS CON HTML
CONCEPTOS
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).
NAVEGADORES Interpreta el cdigo HTML de la pgina. Internet Explorer y Netscape Navigator
EDITORES
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.
Editores Visuales: (generan basura)

Macromedia Dreamweaver, Microsoft Frontpage, Adobe Pagemill, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, MsWord otros.
Editores de texto.(solo lo necesario)

Wordpad Block de notas Notepad++ Otros
Estructura de una pgina

<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 .
Algunos atributos de body
<body bgcolor="#0000FF"> <body bgcolor="blue"> <body background="fondo.gif"> <body background="imagenes/fondo.gif"> <body text="#FF0000"> <body leftmargin="20" topmargin="0" marginwidth="20" marginheight="0" >
Colores en hexadecimal
Color Hexadecimal #FFFFFF #000000 #000080 #0000FF #008000 #008080 #00FF00 #00FFFF #800000 #800080 #808000 #808080 #C0C0C0 #FF0000 #FF00FF #FFFF00 Nombre white black navy blue green teal lime aqua maroon purple olive gray silver red fuchsia yellow
Creacin de la primera pagina

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
La pagina resultante es como sigue:
TEXTO
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
. <br>
comentarios Saltos de lnea,no requiere fin de etiqueta texto preformateado. Aparece tal como se lo escribe, no requiere saltos de linea ni espacios en blanco en HTML No permite incluir en el texto etiquetas: <img> (para incluir imgenes), <object> (para incluir objetos como animaciones), <big>, <small>, <sub> ni <sup>
<pre> y </pre>
<hr> Regla horizontal
separar secciones dentro de una misma pgina. no precisa ninguna etiqueta de cierre
algunos atributos de la regla horizontal:
Atributo
Significado alineacin de la regla dentro de la pgina ancho de la regla alto de la regla eliminar el sombreado de la regla
Posibles valores left (izquierda) right (derecha) center (centro) un nmero, acompaado de % cuando se desee que sea en porcentaje un nmero no puede tomar valores
align
width size noshade
Inicio<hr align="left" width=50%" size=10" noshade>Bienvenidos a mi pgina.
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 color size Significado fuente color del texto tamao del texto
propiedades del texto
Posibles valores nombre de la fuente, o fuentes 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">
etiquetas asociadas al tipo de letra:

Etiqueta <b> <i> <u> <s> <tt> <big> <small> Significado negrita cursiva subrayado tachado teletipo (mquina de escribir) aumenta el tamao de la fuente disminuye el tamao de la fuente Ejemplo curso HTML aulaclic curso HTML aulaclic curso HTML aulaclic curso HTML aulaclic curso HTML aulaclic curso HTML aulaclic curso HTML aulaclic
<p> y </p>
Parrfos atributo align: cuyos valores pueden ser left (izquierda), right (derecha), center (centrado) o justify (justificado).
<p align="center">este es un parrafo muy simple (centrado)</p> <p>Aqu&iacute encontra otro prrafo (la separacion es amplia).</p> <div> y </div> agrupar bloques de texto, pero con la diferencia de que la separacin entre ellos es menor. Tiene los mismos atributos de alineacin.
<div align="center">otro parrafo con agrupacion de bloques </div> <div>note que el espacio es menor</div> <center> y </center> Texto centrado
<center>texto centrado</center>
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>
Marquesinas
<marquee> y </marquee>. <marquee bgcolor="#006699" behavior="alternate" direction="right"> <b><font color="#FFFFCC" size="5">Esto es una marquesina </font></b> </marquee> behavior direction alternate scroll slide down up left right
Listas
<li>Perro</li> <li>Gato</li> <li>Periquito</li> Perro Gato Periquito
<ul> y </ul>. <ul type="circle"> <li>Perro</li> <li>Gato</li> <li>Periquito</li> </ul> <ol> y </ol>.
Lista desordenada vieta circle (crculo), disc (disco) o square (cuadrado).
Lista ordenada type 1 (nmeros), a (letras minsculas), A (letras maysculas), i (numeros romanos en minsculas) o I (nmeros romanos en maysculas).
Listas anidadas: combinacin de las anteriores.
Taller Uno
1. Crear una pagina de inicio en blanco 2. Colocar un titulo centrado y subrayado (mi pagina personal) 3. Insertar una marquesina (con fondo rojo, tamao de letra 5, y comportamiento continuo. 4. Insertar un prrafo de texto con sangra a la izquierda y alineacin a la izquierda. 5. Crear una divisin horizontal . 6. Escribir un texto ( prrafo) centrado que indica una frase arbitraria. 7. Insertar una divisin horizontal. 8. Insertar un texto preformateado que introduce a nuestras ocupaciones principales (centrado). 9. Crear una lista que muestra las reas de inters de informacin. 10.Insertar listas anidadas a cada item.
ENLACES
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/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
Correo electrnico:
<a href="mailto:jucelele@hotmail.com">mi e-mail </a> <a href="mailto:jucelele@hotmail.com?subject=el asunto del mensaje"> mi e-mail </a>
Vnculo a ficheros para descarga: <a href="sib1.doc" target=_blank > haz clic aquí para descargar el archivo </a>
IMAGENES
<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.
Los valores del atributo align pueden ser los siguientes: bottom left middle right texttop top inferior izquierda medio derecha texto superior superior
Este <img src="imagenes/gatito.gif" alt="imagen ejemplo" border="4" align="middle"> es un grafico
TABLAS
<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>
Atributos de una tabla:

Atributo width height cellpadding cellspacing border align bgcolor background bordercolor Significado 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 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
<table width="50%" border="2" align="center" cellspacing="0" bordercolor="green" bgcolor="blue">
nombre FIESTA 4 DE JULIO
descripcin POR EL CENTENARIO DE LA FACULTAD
FOTOGRAFIA aqu va texto, imgenes, video
GATITO
GRAFICO EXTRAIDO 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 4 DE JULIO</td> <td>POR EL CENTENARIO DE LA FACULTAD</td> <td>aqu va texto, imgenes, 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>
Atributos de una celda:

Significado ancho de la tabla altura de la tabla alineacin horizontal del contenido de la celda Posibles valores un nmero, acompaado de % cuando se desee que sea en porcentaje un nmero, acompaado de % cuando se desee que sea en porcentaje left (izquierda) right (derecha) center (centro) baseline (lnea de base) bottom (inferior) middle (medio) top (superior) nmero hexadecimal nmero hexadecimal nmero hexadecimal
Atributo width height
align
valign
alineacin vertical del contenido de la celda color de fondo imagen de fondo color del borde
bgcolor background bordercolor
<tr align="center" bgcolor="yellow">
Para toda la fila la alineacin es Centrado y el fondo amarillo
<td bgcolor="purple">GATITO</td> Solo para la celda el fondo es prpura
Titulo de columna
<th> y </th> idntico a td pero centrado y negrilla
Combinacin de celdas
colspan y rowspan colspan especifica el nmero de columnas por las que se extender la celda rowspan especifica el nmero de filas por las que se extender la celda
combinacin de 4 columnas DATOS NOMBRE NOTA 1 JUAN CARLOS LUISA 1.75 3.65 NOTA 2 2.97 2.65 16/AGOSTO/2017 30/AGOSTO/2017 FECHA
<table width="575" border="2" cellspacing="2"> <tr align="center" valign="middle"> <th colspan="4">combinacion de 4 columnas</th> </tr> <tr align="center" valign="middle"> <th rowspan="2">NOMBRE</th> <th colspan="2">DATOS</th> <th rowspan="2">FECHA</th> </tr> <tr align="center" valign="middle"> <th>NOTA 1</th> <th>NOTA 2</th> </tr> <tr align="center" valign="middle"> <td>JUAN CARLOS</td> <td>1.75</td> <td>2.97</td> <td>16/AGOSTO/2017</td> </tr> <tr align="center" valign="middle"> <td>LUISA</td> <td >3.65</td> <td >2.65</td> <td>30/AGOSTO/2017</td> </tr> </table>
MARCOS (FRAME)
<frameset> y </frameset> Define el conjunto de marcos no requiere las etiquetas <body> y </body>
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. yes no un nmero un nmero, acompaado de % cuando se desee que sea en porcentaje nmero hexadecimal Atributo cols 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 aparece o no el borde de los marcos separacin entre los marcos grosor del borde color del borde
rows
frameborder framespacing border bordercolor
<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>
Destino de los enlaces de un marco

Los nombres de los marcos pueden constituirse en el destino De un documento
En la pgina del marco izquierdo (menu.html) crear el siguiente enlace:
<a href="inicio1.html" target="marcoderecho">matematicas</a>
FORMULARIOS
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
ELEMENTOS DE UN FORMULARIO
<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">
BOTON
<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">
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

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

DISEñO DE PAGINAS CON HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

DISEO DE PAGINAS CON HTML

NAVEGADORES Interpreta el cdigo HTML de la pgina. Internet Explorer y Netscape Navigator

Editores Visuales: (generan basura)

Editores de texto.(solo lo necesario)

Estructura de una pgina

Algunos atributos de body

Creacin de la primera pagina

La pagina resultante es como sigue:

Algunos caracteres especiales

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

. <br>

<hr> Regla horizontal

algunos atributos de la regla horizontal:

width size noshade

Inicio<hr align="left" width=50%" size=10" noshade>Bienvenidos a mi pgina.

Una ilustracin simple

propiedades del texto

fuente para todo el documento

etiquetas asociadas al tipo de letra:

<H1> Ttulo 1: HTML

<H4> <H5> <H6>

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

Lista desordenada vieta circle (crculo), disc (disco) o square (cuadrado).

Listas anidadas: combinacin de las anteriores.

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

imagen con borde y con un enlace:

Este <img src="imagenes/gatito.gif" alt="imagen ejemplo" border="4" align="middle"> es un grafico

Atributos de una tabla:

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

nombre FIESTA 4 DE JULIO

descripcin POR EL CENTENARIO DE LA FACULTAD

FOTOGRAFIA aqu va texto, imgenes, video

GRAFICO EXTRAIDO DEL TUTORIAL

PUEDE IR CUALQUIER COSA

Atributos de una celda:

Atributo width height

bgcolor background bordercolor

<tr align="center" bgcolor="yellow">

Para toda la fila la alineacin es Centrado y el fondo amarillo

<td bgcolor="purple">GATITO</td> Solo para la celda el fondo es prpura

frameborder framespacing border bordercolor

indica el documento a cargar en el marco

Atributo frameborder name noresize marginwidth marginheight

Destino de los enlaces de un marco

En la pgina del marco izquierdo (menu.html) crear el siguiente enlace:

<a href="inicio1.html" target="marcoderecho">matematicas</a>

Elementos para type:

<input name="contra" type="password" value="contrasea" size="20" maxlength="15">

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

Anda mungkin juga menyukai