Sesion 001 HTML

Sesin de aprendizaje Prof.
Miguel Angel Amaro
Diseo de paginas Web HTML

World Wide Web, es bsicamente un medio de comunicacin de texto, grficos y otros objetos
multimedia a travs de Internet, es decir, la web es un sistema de hipertexto que utiliza Internet como su mecanismo de transporte. Que es un hipertexto.- (en ingls hypertext) es un sistema para escribir y mostrar texto que enlaza a informacin adicional sobre ese texto. HTTP de HyperText Transfer Protocol (Protocolo de transferencia de hipertexto) es el mtodo ms comn de intercambio de informacin en la world wide web, el mtodo mediante el cual se transfieren las pginas web a un ordenador. Qu es HTML?- La abreviatura HTML significa Hypertext Markup Language, traducido al castellano Lenguaje para crear hipertextos. Con el lenguaje HTML se puede dar formato al texto de las pginas Web y lo ms importante, permite interrelacionar unas pginas con otras utilizando hipervnculos para navegar a travs de la informacin y saltar de pgina en pgina para localidar la informacin deseada.
Tabla 2-1 (Cdigos para vocales acentuadas y la ) a i Minscula á é í ó ú ñ Mayscula Á É Í Ó Ú Ñ
1
Diseo de Paginas Web - HTML
1.1 Estructura de un documento HTML <html> (Etiqueta que indica que lo que viene a continuacin es un documento HTML) <head> (Etiqueta de apertura de la Ttulo) Aqu va la informacin sobre el ttulo de la pgina, el autor, palabras clave, etc. que no se presentarn en la ventana del navegador, salvo el ttulo que aparecer en la barra de ttulo de la parte superior </head> (Etiqueta de cierre de la Ttulo) <body> (Etiqueta de apertura del cuerpo) Aqu va el contenido de la pgina que ser lo que se presente en pantalla. </body> (Etiqueta de cierre del cuerpo) </html> (Etiqueta de cierre del documento) -----------------------------------------------------------------------<title>titulo</title> 1.2 Jerarqua del documento 1.2.1 Ttulos.
<H1>Título <H2>Título <H3>Título <H4>Título <H5>Título <H6>Título nivel nivel nivel nivel nivel nivel 1</H1> 2</H2> 3</H3> 4</H4> 5</H5> 6</H6>
1.2.2 Saltos de lnea y prrafos

<br> te quiero pero te llevaste la flor y me dejaste el florero te quiero me dejaste la ceniza y te llevaste el cenicero te quiero pero te llevaste marzo y te rendiste en febrero primero te quiero igual
Sesin de aprendizaje Prof. Miguel Angel Amaro
1.3 Formateo de texto

Negrita: <b> texto en negrita</b> <strong> texto en negrita</strong> Itlica o cursiva. <i>texto en itlica</i> <em></em> Subrayado. <u>texto en subrrayado</u> Subindices y supraindices. <sup> supraindices <sub> subndices Combinar
1
1.4 Color tamao y tipo de letra.

Atributo face: <font face="Arial, Helvetica, sans-serif">Este texto tiene otra tipografa</font> <font face="Courier New, Courier, monospace">Este texto tiene otra tipografia</font> <font face="Georgia, Times New Roman, Times, serif">Este texto tiene otra tipografia</font> <font face="Verdana, Arial, Helvetica, sans-serif">Este texto tiene otra tipografia</font> <font face="Geneva, Arial, Helvetica, sans-serif">Este texto tiene otra tipografia</font> Atributo size: <font size="7">Este texto tiene otra tipografa</font> Atributo color: <font color="red">Este texto tiene otra el color _ _ _ _ _ _</font><br> black teal blue navy lime white purple yellow olive red maroon gray fuchsia green silver aqua #000000 #008080 #0000FF #000080 #00FF00 #FFFFFF #800080 #FFFF00 #808000 #FF0000 #800000 #808080 #FF00FF #008000 #C0C0C0 #00FFFF Negro Teal Azul Azul marino Lima Blanco Prpura Amarillo Oliva Rojo Marrn Gris Fucsia Verde Plata Agua
1.5 Atributos para pagina. Atributos para paginas: bgcolor: <body bgcolor="red"> background <body background="machu.jpg"> Color de texto: text="red" Enlaces: link color de texto que no se haya visitado link=#rrggbb vlink color de los enlaces visitados alink color de los enlaces activos Mrgenes: leftmargin="55" (lados de la pagina) topmargin="0" (superior e inferior de la pagina)
1
Listas:
Las listas son utilizadas para citar, numerar y definir objetos. Listas desordenadas. Listas ordenadas. Listas de definicin. Listas desordenadas: <p>Paises del mundo</p> <ul> <li>Peru</li> <li>Colombia</li> <li>Argentina</li> </ul> <ul type="square"> para definir el tipo de vieta------ circle disc square <li type="square"> Listas ordenadas: <h1>Ejemplo de lista ordenada</h1> <ol> <li>Fichero HTML <li>Fichero de imagen <li>Fichero de sonido <li>Fichero de vdeo <li>Fichero de ejemplo </ol> 1 Para ordenar por nmeros a Por letras del alfabeto A Por letras maysculas del alfabeto
i Ordenacion por nmeros romanos en minscula I Ordenacion por nmeros romanos en mayscula start="10" listas de definicin:
<DL> <DT>Pars <DD>Capital de Francia <DT>Roma <DD>Capital de Italia <DT>Madrid <DD>Capital de Espaa </DL>
1
------------------------------<dl> <dd>Primer nivel de desplazamiento <dl> <dd>Segundo nivel de desplazamiento <dl> <dd>Tercer nivel de desplazamiento </dl> </dl> </dl>
------------------------------<dl> <dd> 1 Primer punto <dl> <dd> 1.1 Desplazado hacia la izquierda <dl> <dd>1.1.1 Mas desplazado hacia la izquierda </dl> </dl> </dl> -------------------------
Anidado de listas <p>Ciudades del mundo</p> <ul> <li>Argentina <ol> <li>Buenos Aires <li>Bariloche </ol> <li>Uruguay <ol> <li>Montevideo <li>Punta del Este </ol> </ul>
Men

Inicio Noticias o Recientes o Ms ledas o Ms valoradas Artculos 1. XHTML 2. CSS 3. JavaScript 4. Otros Contacto Email nombre@direccion.com Telfono 984743258 Fax 974251245
1
<h1>Men</h1> <ul> <li>Inicio</li> <li> <strong>Noticias</strong> <ul> <li><u>Recientes</u></li> <li><strong>Ms ledas</strong></li> <li><em>Ms valoradas</em></li> </ul> </li> <li type="square"> Artculos <ol> <li><strong>XHTML</strong></li> <li>CSS</li> <li>JavaScript</li> <li>Otros</li> </ol> </li> <li> Contacto <dl> <dt><em>Email</em></dt> <dd><strong>nombre@direccion.com</strong></dd> <dt><em>Telfono</em></dt> <dd>984743258</dd> <dt><em>Fax</em></dt> <dd>974251245</dd> </dl> </li> </ul>
CARACTERES ESPECIALES Smbolo Cdigo < (menor que) < > (mayor que) > & (ampersand) & " (comillas) " Letra Cdigo á é í ó ú Letra Cdigo Á É Í Ó Ú Letra Cdigo ñ Ñ
1
Enlaces en HTML
Enlaces internos: los que se dirigen a otras partes dentro de la misma pagina Enlaces locales: del mismo sitio web Enlaces remotos: los dirigidos hacia paginas de otros sitios web. Enlaces con direcciones de correo: dirigido a una direccin electrnica. Enlaces con archivos: para realizar download.
Enlaces internos: <A href="#abajo ">Ir abajo </A> <A name="abajo"> </A> Enlaces locales: <A href="archivo.html">pagina numero 2</A> <A href="seccion1/pagina/yyy.html">contenido</A> Desde xxx,html hasta yyy.html <A href="../seccion1/pagina/yyy.html">contenido</A> Desde yyy,html hasta xxx.html <A href="../../seccion2/xxx.html">contenido</A> Mi web Seccion1 Paginas Yyy.html Seccion2 xxx.html Index.html <A href="pagina2.html#abajo">contenido</A> Enlaces externos, de correo y hacia archivos:
Enlaces remoto: Enlaces a direcciones de correo:
<A href="http://www.welcomecusco.com">ir a welcome cusco</A> <A href="mailto:miguelamaro@hotmail.com"> miguelamaro@hotmail.com </A>
Enlaces con archivos:
<A href="fichero.zip">Descarga mi archivo </A> Imgenes en html <IMG src="imagen.jpg" alt="Texto alternativo" align="top/middle/botton/left/rigth" border="0" height="Tamao" width="Tamao" hspace="margen" vspace="margen"> Centrar imagen:
<div align=center><img src=logo.gif</div>
1
Fomatos gaficos para apginas web:

.jpg .gif
Tablas html
<table> <tr> <td>celda 1</td> <td>celda 2</td> <td>celda 3</td> </tr> <tr> <td>celda 4</td> <td>celda 5</td> <td>celda 6</td> </tr> <tr> <td>celda 7</td> <td>celda 8</td> <td>celda 9</td> </tr> </table> Atributos para celdas: align="center" left right bgcolor="red" bordercolor="blue" width="100" ancho height="50" altura 50% valign="top" arriba middle centro bottom abajo colspan expande la celda horizontalmente en td rowspan expande la celda horizontalmente en td <table border="1"> <tr> <td colspan="2">1</td> </tr> <tr> <td>2</td> <td>3</td> </tr> </table> <table border="1"> <tr> <td rowspan="2">1</td> <td>2</td> </tr> <tr>
<td>2</td> </tr> </table> <table width="448" border="1"> <tr> <td colspan="4"><div align="center">Hoteles en Cusco</div></td> </tr> <tr> <td width="136">Hotel Jose Antonio</td> <td width="62" rowspan="2">2 estrellas</td> <td width="135">Habitacion doble</td> <td width="87">$. 80.00</td> </tr> <tr> <td>Hotel El Puma</td> <td>Habitacion triple</td> <td>$. 120.00</td> </tr> <tr> <td>Hotel Posada del Inka</td> <td>3 estrellas</td> <td>Habitacion doble</td> <td>$. 150</td> </tr> </table>
1
Hoteles en Cusco Hotel Jose Antonio Hotel El Puma 2 estrellas Habitacion doble Habitacion triple $. 80.00 $. 120.00 $. 150
Hotel Posada del Inka 3 estrellas Habitacion doble
Formularios:
Su utilidad se basa fundamentalmente en el envio de datos a programas. Podriamos decir que los formularios son el interface mediante el cual una persona introduce datos en un programa.
1
Nombre Apellidos F. Nacimiento Calle y Nmero Cdigo postal Provincia Sexo Idiomas Comentarios Personales Pulse aqui
enviar los datos borrar los datos
Telfono Hombre Espaol Mujer Francs Estado Civil Ingls Alemn
Cuerpo del formulario: <form action="elemento_destino" method="metodo"> (cuerpo del formulario, con sus distintos elementos) </form> Casillas de verificacin:
<input type="checkbox" name="valor1" checked >1</input>
Sesin de aprendizaje Prof. Miguel Angel Amaro Radiobotones
<input type="radio" name="x" value="1">1</input> <input type="radio" name="x" value="2">2</input> <input type="radio" name="x" value="3">3</input>
Mens
1
<select name="x" > <option>1 <option>2 <option>3 </select>

Entrada de texto de 1 linea <input type="text" name="email" size="10" maxlength="50"> Entrada de texto de mltiples lineas <textarea name="direccion" rows="5" cols="50"> Escribe aqu tu direccin completa </textarea> Botones de envio y borrado
<input type="submit" value="Enviar los datos"> <input type="reset" value="Borrar datos">
Marcos (frames)
<FRAMESET COLS="20%, 80%"> <FRAME SRC="frame1.htm" NAME="left"> <FRAME SRC="frame2.htm" NAME="right"> </FRAMESET>
<FRAMESET ROWS="20%, 80%"> <FRAME SRC="frame1.htm" NAME="left"> <FRAME SRC="frame2.htm" NAME="right"> </FRAMESET>
10
<FRAMESET COLS="20%, 80%"> <FRAME SRC="frame1.htm" NAME="left"> <FRAMESET ROWS="50%, 50%"> <FRAME SRC="frame2.htm" NAME="upper_right"> <FRAME SRC="frame3.htm" NAME="lower_right"> </FRAMESET>
1
Designacin de un marco con un hipervnculo Para mostrar vnculos en uno de los marcos, use el atributo TARGET en la etiqueta <A HREF ..> para especificar el nombre del marco dado por el atributo NAME en la etiqueta <FRAME>). Por ejemplo: <A HREF="page.htm" TARGET="left"> Valor Accin _self _parent _blank _top Accin Muestra el destino en el mismo marco que el vnculo Muestra el destino en el marco de nivel superior siguiente Muestra el destino en una nueva ventana Muestra el destino en toda la ventana del navegador
11

Sesion 001 HTML

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Sesion 001 HTML

Hochgeladen von

Copyright:

Verfügbare Formate

Sesin de aprendizaje Prof.

Miguel Angel Amaro

Diseo de paginas Web HTML

1.2.2 Saltos de lnea y prrafos

Sesin de aprendizaje Prof. Miguel Angel Amaro

1.3 Formateo de texto

1.4 Color tamao y tipo de letra.

Sesin de aprendizaje Prof. Miguel Angel Amaro

Sesin de aprendizaje Prof. Miguel Angel Amaro

Sesin de aprendizaje Prof. Miguel Angel Amaro

Sesin de aprendizaje Prof. Miguel Angel Amaro

<A href="http://www.welcomecusco.com">ir a welcome cusco</A> <A href="mailto:miguelamaro@hotmail.com"> miguelamaro@hotmail.com </A>

Sesin de aprendizaje Prof. Miguel Angel Amaro

Enlaces con archivos:

Fomatos gaficos para apginas web:

Sesin de aprendizaje Prof. Miguel Angel Amaro

Hotel Posada del Inka 3 estrellas Habitacion doble

Sesin de aprendizaje Prof. Miguel Angel Amaro

Telfono Hombre Espaol Mujer Francs Estado Civil Ingls Alemn

<input type="checkbox" name="valor1" checked >1</input>

Sesin de aprendizaje Prof. Miguel Angel Amaro Radiobotones

<select name="x" > <option>1 <option>2 <option>3 </select>

<input type="submit" value="Enviar los datos"> <input type="reset" value="Borrar datos">

Sesin de aprendizaje Prof. Miguel Angel Amaro

Das könnte Ihnen auch gefallen