Guía Complementaria de HTML

Universidad Pedaggica Nacional Francisco Morazn
Instituto Espaa Jess Milla Selva Col. Kennedy, Tegucigalpa M.D.C
Prof. Titular: Josu Alejandro Izaguirre
Prof. Practicante: Luis Orlando Iras Gua Complementaria de HTML
Con el propsito de finalizar la temtica sobre HTML se prepar este documento con ejemplo del uso para algunas funciones bsicas de HTML. Lea detenidamente los encabezados y las instrucciones de ejemplo las lneas de color azul son las lneas de la nueva instruccin a ejemplificar Para crear un documento HTML abra el bloc de notas Todo documento HTML est conformado por etiquetas las etiquetas son comandos internos que hacen funciones especficassobre el comportamiento de una pgina web Las etiquetas se escriben encerradas entre <> las primera tres etiquetas que trabajaremos son <HTML></HTML> Abre y cierra un documento HTML <HEAD></HEAD> Abre y cierra Encabezado de la pgina. Entre la apertura y cierre del Encabezado se coloca el titulo de la pgina que es la que se muestra en la barra de titulo de la ventana del explorador web <BODY></BODY> Dentro de esta etiqueta va toda la parte visible de la pgina web. Para guardar el documento del bloc de notas como pagina web en el men archivo selecciona guardar como
En el cuadro de dialogo guardar como ingresara el nombre del archivo seguido de un punto y HTML
Esto har que se guarde un documento que al abrirlo se ver en el explorador predeterminado.
Ejemplo: En un documento del bloc de notas escriba el siguiente codigo Cdigo HTML <HTML> <HEAD> <TITLE>Mi primer pgina web</TITLE> </HEAD> <BODY> Luis Orlando Irias </BODY> </HTML> Vista Previa en el explorador
Para usar Formato prediseados encierre el texto a dar formato en <Hx> y </Hx> donde x es un numero de 1 a 6 ejemplo Cdigo HTML <HTML> <HEAD> <TITLE>Mi primer pgina web</TITLE> </HEAD> <BODY> <H6>Luis Orlando Irias</H6> </BODY> </HTML> Vista Previa en el explorador
Para insertar una lnea horizontal se utiliza la etiqueta <HR> en el lugar donde se desea que aparezca la lnea esta etiqueta no tiene cierre ejemplo Cdigo HTML <HTML> <HEAD> <TITLE>Mi primer pgina web</TITLE> </HEAD> <BODY> Luis Orlando Irias<HR> </BODY> </HTML> Para centrar un texto encirrelo entre <CENTER></CENTER> Cdigo HTML <HTML> <HEAD> <TITLE>Mi primer pgina web</TITLE> </HEAD> <BODY> <CENTER> Luis Orlando Irias</CENTER><HR> </BODY> </HTML> Vista Previa en el explorador Vista Previa en el explorador
Para hacer un cambio de lnea se utiliza la etiqueta <P> en el lugar donde se desea que cambie de rengln esta etiqueta no tiene cierre ejemplo
Cdigo HTML Vista Previa en el explorador <HTML> <HEAD> <TITLE>Mi primer pgina web</TITLE> </HEAD> <BODY> <CENTER> Luis Orlando Irias </CENTER><HR> Profesor practicante <p> Instituto Espaa "Jess Milla Selva" </BODY> </HTML> Para cambiar y personalizar el tipo de fuente a utilizar encierre el texto entre <FONT FACE="Nombre de la fuente"
SIZE=Tamao de la fuente COLOR="color de fuente"> y </Font> ejemplo
Cdigo HTML <HTML> <HEAD> <TITLE>Mi primer pgina web</TITLE> </HEAD> <BODY> <CENTER> Luis Orlando Irias</CENTER><HR> <FONT FACE="Lucida Handwriting" SIZE=6 COLOR="red">Profesorpracticante</Font><p> InstitutoEspaa "JessMillaSelva" </BODY> </HTML> Para Para usar negrita en un texto encirrelo entre <B> y </B> Ejemplo Codigo HTML <HTML> <head> <title>Ejemplo#2</title> </head> <body> <FONT FACE="Brush Script Std" SIZE=10 COLOR="Blue"> <center> "Trabajando con Tablas"</center><hr> <B> Este texto debe de verse en Negrita </B> </Font> </body> </HTML>
Vista Previa en el explorador
Para usar cursiva en un texto encirrelo entre <I> y </I> Ejemplo
Codigo HTML <HTML> <head> <title>Ejemplo#2</title> </head> <body> <FONT FACE="Brush Script Std" SIZE=10 COLOR="Blue"> <center> "Trabajando con Tablas"</center><hr> <I> Este texto debe de verse en Cursiva </I> </Font> </body> </HTML>
Para usar Tablas encirrelo entre <TableBorder> y </Table>, luego para crear una fila encirrelo entre <TR> y </TR>y par escribir en lacelda encierre el texto que contendr entre <TD> y </TD>por ejemplo para crear una tabla como la siguiente Celda1 Celda2 Celda3 Celda 4 Celda5 Celda6
<Ejemplo Codigo HTML <HTML> <head> <title>Ejemplo#2</title> </head> <body> <FONT FACE="Brush Script Std" SIZE=10 COLOR="Blue"> <center> <I><B> "Trabajando con Tablas"</B></I> <Table Border> <TR> <TD>Celda1</TD><TD>Celda2</TD><TD>Celda3</TD> </TR> <TR> <TD>Celda4</TD><TD>Celda5</TD><TD>Celda6</TD> </TR> </Table> </center> </Font> </body> </HTML> Vista Previa en el explorador
Para combinar celdas agregue en el encabezado de la celda <TD ROWSPAN=N de filas a combinar>por ejemplo para escribir la tabla siguiente donde se combinaran la celda 2 y la celda 5 haciendo que una celda tenga el alto de dos filas
Celda1 Celda2 y Celda 5 Celda3 Celda4 Celda65

Codigo HTML Vista Previa en el explorador
<HTML> <head> <title>Ejemplo#2</title> </head> <body> <FONT FACE="Brush Script Std" SIZE=10 COLOR="Blue"> <center> <I><B> "Trabajando con Tablas"</B></I><hr> <TABLE BORDER> <TR> <TD>Celda1</TD> <TD ROWSPAN=2>Celda2 y Celda 5</TD> <TD>Celda3</TD> </TR> <TR> <TD>Celda4</TD><TD>Celda65</TD> </TR> </TABLE> </center> </Font> </body> </HTML>
Para combinar celdas agregue en el encabezado de la celda <TD COLSPAN=N decolumnas a combinar>por ejemplo para escribir la tabla siguiente donde se combinaran las tres columnas de una tabla en la primera fila as Aulas Aula1 Aula 4
Aula2 Aula5
Aula3 Aula6
Cdigo HTML <HTML> <head> <title>Ejemplo#2</title> </head> <body> <FONT FACE="Brush Script Std" SIZE=10 COLOR="Blue"> <center> <I><B> "Trabajando con Tablas"</B></I> </Font> <hr> <Table Border> <TR> <TD COLSPAN=3>Aulas</TD> </TR> <TR> <TD>Aula1</TD><TD>Aula2</TD><TD>Aula3</TD> </TR> <TR> <TD>Aula4</TD><TD>Aula5</TD><TD>Aula6</TD>
</TR> </Table> </center> </body> </HTML> Para cambiar el tamao del borde de la tabla en la etiqueta se agrega entre comillas el tamao del borde <TableBorder= Ancho de borde > Ejemplo <TableBorder= 5 > Cdigo HTML Vista Previa en el explorador <HTML> <head><title>Ejemplo#2</title> </head> <body> <FONT FACE="Brush Script Std" SIZE=10 COLOR="Blue"><center> <I><B> "Trabajando con Tablas"</B></I></Font><hr> <Table Border=5> <TR> <TD COLSPAN=3>Aulas</TD> </TR> <TR> <TD>Aula1</TD><TD>Aula2</TD><TD>Aula3</TD> </TR> <TR> <TD>Aula4</TD><TD>Aula5</TD><TD>Aula6</TD> </TR> </Table></center></body> </HTML> Lo siguiente son un par de atributos llamados CELLPADDING (ANCHURA INTERIOR DE CELDA) y CELLSPACING (ESPACIO ENTRE CELDAS). Las dos se usan en la etiqueta <TABLE>. CELLPADDING es la cantidad de espacio entre el borde interior de la celda y el contenido de la celda.
Ejemplo <TABLE BORDER=3 CELLPADDING=12> <TABLE BORDER=2CELLSPACING=8> <TABLE BORDER=4CELLSPACING=12 CELLPADDING=12>
Cdigo HTML <HTML> <head><title>Ejemplo#2</title> </head> <body> <FONT FACE="Brush Script Std" SIZE=10 COLOR="Blue"><center> <I><B> "Trabajando con Tablas"</B></I></Font><hr>
<TABLE BORDER=3 CELLPADDING=12> <TR> <TD>Heidy</TD> <TD>Luis</TD> <TD>Jose</TD> </TR> <TR> <TD>Eduardo</TD> <TD>Yadira</TD> <TD>Walter</TD> </TR>
</Table></center></body>
</HTML> Cdigo HTML <HTML> <head><title>Ejemplo#2</title> </head> <body> <FONT FACE="Brush Script Std" SIZE=10 COLOR="Blue"><center> <I><B> "Trabajando con Tablas"</B></I></Font><hr>
<TABLE BORDER=2 CELLSPACING=8> <TR> <TD>Heidy</TD> <TD>Luis</TD> <TD>Jose</TD> </TR> <TR> <TD>Eduardo</TD> <TD>Yadira</TD> <TD>Walter</TD> </TR>
</Table></center></body> </HTML> Cdigo HTML <HTML> <head><title>Ejemplo#2</title></head> <body> <FONT FACE="Brush Script Std" SIZE=10 COLOR="Blue"><center> <I><B> "Trabajando con Tablas"</B></I></Font><hr>
<TABLE BORDER=4 CELLSPACING=12 CELLPADDING=12> <TR> <TD>Heidy</TD> <TD>Luis</TD> <TD>Jose</TD> </TR> <TR> <TD>Eduardo</TD> <TD>Yadira</TD> <TD>Walter</TD> </TR>
</Table></center></body> </HTML> Para dar color de fondo a un celda utilice la etiqueta <td bgcolor="cdigo de color"></td> Para dar alineacin al texto de una celda utilice la etiqueta <td align="Tipo de alineacin"></td> el tipode alineacin puede ser {left (izquierda), right (derecha), center (centro)},estas etiquetas pueden ser usadas en todos la fila as<tR bgcolor="cdigo de color"></tr>, <tr align="Tipo de alineacin"></tr>, para los colores slidos puede usar la palabras en ingls como lo hace en la etiqueta Font por ejemplo <td bgcolor="Red">
Listado de codigos de color

White rgb=#FFFFFF Red rgb=#FF0000 Green rgb=#00FF00 Blue rgb=#0000FF Magenta rgb=#FF00FF Cyan rgb=#00FFFF Yellow rgb=#FFFF00 Black rgb=#000000 Aquamarine rgb=#70DB93 Baker's Chocolate rgb=#5C3317 Blue Violet rgb=#9F5F9F Brass rgb=#B5A642 Bright Gold rgb=#D9D919 Brown rgb=#A62A2A Bronze rgb=#8C7853 Bronze II rgb=#A67D3D Cadet Blue rgb=#5F9F9F Cool Copper rgb=#D98719 Copper rgb=#B87333 Coral rgb=#FF7F00 Corn Flower Blue rgb=#42426F Dark Brown rgb=#5C4033 Dark Green rgb=#2F4F2F Dark Green Copper rgb=#4A766E Dark Olive Green rgb=#4F4F2F Dark Orchid rgb=#9932CD Dark Purple rgb=#871F78 Dark Slate Blue rgb=#6B238E Dark Slate Grey rgb=#2F4F4F Dark Tan rgb=#97694F Dark Turquoise rgb=#7093DB Dark Wood rgb=#855E42 Dim Grey rgb=#545454 Dusty Rose rgb=#856363 Feldspar rgb=#D19275 Firebrick rgb=#8E2323 Forest Green rgb=#238E23 Gold rgb=#CD7F32 Goldenrod rgb=#DBDB70 Grey rgb=#C0C0C0 Green Copper rgb=#527F76 Green Yellow rgb=#93DB70 Hunter Green rgb=#215E21 Indian Red rgb=#4E2F2F Khaki rgb=#9F9F5F Light Blue rgb=#C0D9D9 Light Grey rgb=#A8A8A8 Light Steel Blue rgb=#8F8FBD Light Wood rgb=#E9C2A6 Lime Green rgb=#32CD32 Mandarian Orange rgb=#E47833 Maroon rgb=#8E236B Medium Aquamarine rgb=#32CD99 Medium Blue rgb=#3232CD Medium Forest Green rgb=#6B8E23 Medium Goldenrod rgb=#EAEAAE Medium Orchid rgb=#9370DB Medium Sea Green rgb=#426F42 Medium Slate Blue rgb=#7F00FF Medium Spring Green rgb=#7FFF00 Medium Turquoise rgb=#70DBDB Medium Violet Red rgb=#DB7093 Medium Wood rgb=#A68064 Midnight Blue rgb=#2F2F4F Navy Blue rgb=#23238E Neon Blue rgb=#4D4DFF Neon Pink rgb=#FF6EC7 New Midnight Blue rgb=#00009C New Tan rgb=#EBC79E Old Gold rgb=#CFB53B Orange rgb=#FF7F00 Orange Red rgb=#FF2400 Orchid rgb=#DB70DB Pale Green rgb=#8FBC8F Pink rgb=#BC8F8F Plum rgb=#EAADEA Quartz rgb=#D9D9F3 Rich Blue rgb=#5959AB Salmon rgb=#6F4242 Scarlet rgb=#8C1717 Sea Green rgb=#238E68 Semi-Sweet Chocolate rgb=#6B4226 Siennargb=#8E6B23 Silverrgb=#E6E8FA Sky Blue rgb=#3299CC Slate Blue rgb=#007FFF Spicy Pink rgb=#FF1CAE Spring Green rgb=#00FF7F Steel Blue rgb=#236B8E Summer Sky rgb=#38B0DE Tan rgb=#DB9370 Thistle rgb=#D8BFD8 Turquoise rgb=#ADEAEA Very Dark Brown rgb=#5C4033 Very Light Grey rgb=#CDCDCD Violet rgb=#4F2F4F Violet Red rgb=#CC3299 Wheat rgb=#D8D8BF Yellow Green rgb=#99CC32
Cdigo HTML <HTML> <head><title>Ejemplo#2</title> </head> <body> <FONT FACE="Brush Script Std" SIZE=10 COLOR="Blue"><center> <I><B> "Trabajando con Tablas"</B></I></Font><hr> <TABLE BORDER=4 > <TR> <td bgcolor="rgb=#FFFF00">Heidy</TD> <TD align="right">Luis</TD> <TD>Jose</TD> </TR> <TR bgcolor="green"> <TD>Eduardo</TD> <TD>Yadira</TD> <TD>Walter</TD> </TR> </Table></center></body> </HTML> Para crear hipervnculos o enlaces a otras pginas utilice la etiqueta
<A HREF="direccin URL de la pgina">texto a utilizar para el enlace</A>. Ejemplo si se desea hacer un enlace al buscador Goole se escribe <A HREF="http://www.google.com">Google</A>.este elemento lo puede incluir en cualquier parte del cuerpo de un documento HTML Cdigo HTML <HTML> <head><title>Ejemplo#2</title> </head> <body> <FONT FACE="Brush Script Std" SIZE=10 COLOR="Blue"><center> <I><B> "Trabajando con Enlaces"</B></I></Font><hr> <TABLE BORDER=4 > <TR bgcolor="Yellow"> <TD><A HREF="http://www.google.com"> Google </A></TD> <TD><A HREF="http://www.Yahoo.com"> Yahoo </A></TD> <TD><A HREF="http://www.Hotmail.com"> Hotmail </A></TD> </TR> </Table> <A HREF="http://es.youtube.com"> Buscar Videos</A>. </center></body> </HTML> Vista Previa en el explorador
Para insertar imgenes se utiliza <imgsrc="Nombre de la imagen">, la imagen debe deestar en el la misma carpeta del documento HTML, la instruccin src Hace que aparezca una x cuando la imagen no se encuentra, Para cambiar el tamao de la imagen se utiliza las instrucciones <imgsrc="Nombre de la imagen" width="Ancho deseado" height="alto deseado"> Para alinear al imagen utilice la etiqueta<img scr="Nombre de la imagen" align="Valor de alineacin">los valores de alineacin estn en la tabla siguiente
Valor absbottom absmiddle baseline bottom left middle right texttop top Significado inferior absoluta medio absoluta lnea de base inferior izquierda medio derecha texto superior superior
Cdigo HTML <HTML> <head><title>Ejemplo#2</title> </head> <body> <FONT FACE="Brush Script Std" SIZE=10 COLOR="Red"><center> <I><B> "Trabajando con Imagenes"</B></I></Font><hr> <TABLE width="50%" > <TR bgcolor="Yellow"> <TD><A HREF="http://www.google.com"> Google </A></TD> <TD><A HREF="http://www.Yahoo.com"> Yahoo </A></TD> <TD><A HREF="http://www.Hotmail.com"> Hotmail </A></TD> </TR> </Table> </center> <img src="gato.jpg"><p><p> <img src="otrogato.jpg" width="50" height="100"><p><p> <img src="gatoestudiando.jpg" align="right" > </body> </HTML>
Proyecto Utilizando la mayor cantidad de etiquetas vistas en clase y en esta gua cree una pgina web personal que lleve Datos personales, preferencias, estudios, conocimientos y dems opciones que sean ordenados y decorada de tal manera que sea su prestacin persona.
No hay triunfo sin renuncia, victoria sin sufrimiento, libertad sin sacrificio. Autor annimo
VoBoProfesor Titular
VoBoProfesor Supervisor

Guía Complementaria de HTML

Diunggah oleh

Informasi Dokumen

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

Guía Complementaria de HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Universidad Pedaggica Nacional Francisco Morazn

Instituto Espaa Jess Milla Selva Col. Kennedy, Tegucigalpa M.D.C

Prof. Titular: Josu Alejandro Izaguirre

Prof. Practicante: Luis Orlando Iras Gua Complementaria de HTML

Vista Previa en el explorador

Vista Previa en el explorador

Para usar cursiva en un texto encirrelo entre <I> y </I> Ejemplo

Vista Previa en el explorador

Celda1 Celda2 y Celda 5 Celda3 Celda4 Celda65

Vista Previa en el explorador

Vista Previa en el explorador

Vista Previa en el explorador

Vista Previa en el explorador

Listado de codigos de color

Vista Previa en el explorador

Vista Previa en el explorador

Anda mungkin juga menyukai