Scribd Logo
Importer

Bienvenue sur Scribd !

  • HTML

    Transféré par

    Fredy Alejandro Guevara Gómez
    11 vues14 pages

    Titre original

    2. HTML

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    11 vues14 pages

    HTML

    Transféré par

    Fredy Alejandro Guevara Gómez

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 14

    Programacin Web

    HTML
    Introduccin
    El HTML es el lenguaje con el que se definen las pginas web. Bsicamente se trata de un conjunto de etiquetas que sirven para definir la forma en la que presentar el texto y otros elementos de una pgina. El HTML se cre en principio con objetivos divulgatorios. No se pens que la web llegara a ser un rea de ocio con carcter multimedia, de modo que, el HTML se cre sin dar respuesta a todos los posibles usos que se le iba a dar y a todos los colectivos de gente que lo utilizara en el futuro. Sin embargo, pese a esta deficiente planificacin, s que se han incorporado modificaciones con el tiempo, estos son los estndares del HTML. Numerosos estndares se han presentado ya, sin embargo se puede encontrar informacin actualizada en www.w3.org, donde se publican estndares sobre todo lo relacionado con tecnologas para el world wide web (www). El HTML es un lenguaje fcil de aprender, lo que permite que cualquier persona, aunque no haya programado en su vida pueda enfrentarse a la tarea de crear en web. HTML es fcil y pronto dominaremos este lenguaje. Ms adelante se conseguirn resultados profesionales gracias a la capacidad de diseo y tu vena artstica. Una vez que conocemos el concepto del HTML, vamos a ver un poquito de cosas ms. Este lenguaje se escribe en un documento de texto, por eso se necesita un editor de texto para escribir una pgina web. As pues, el archivo donde est contenido el cdigo HTML es un archivo de texto, con la peculiaridad, que tiene extensin .html o .htm (es indiferente cul de ellos usar). De modo que cuando programemos en HTML trabajaremos en un notepad por ejemplo y guardaremos los archivos como mipagina.html. El principio esencial del lenguaje HTML es el uso de las etiquetas (tags).

    ETIQUETAS
    Funcionan de la siguiente manera: <nombre_etiqueta atributo=XXXX> </nombre_etiqueta > Este es el inicio de una etiqueta.

    Este es el cierre de una etiqueta.

    Programacin Web
    Las letras de la etiqueta pueden estar en maysculas o minsculas, indiferentemente. Lo que haya entre ambas etiquetas estar influenciada por ellas. El atributo es opcional y es acorde a la etiqueta que estemos referenciando, estos atributos definen caractersticas especficas como color, ancho, alto, alineacin, etc aspectos que se retomarn en sesiones siguientes.

    ESTRUCTURA DE UNA PGINA


    Todo documento HTML est formado por los bloques. En primer lugar se debe especificar que el archivo de texto que se est escribiendo es un documento HTML, para ello se utilizarn las etiquetas <HTML>: <HTML> Cdigo de la pgina </HTML> El cdigo de la pgina est formado a su vez por dos grandes bloques, el encabezado y el cuerpo de la pgina (contenido). El encabezado se delimita por la etiqueta <head> y el cuerpo por la etiqueta <body>:

    Encabezado
    <HEAD> Elementos de encabezamiento </HEAD> En el encabezamiento se introduce toda aquella informacin que afectar a toda la pgina. En un principio se limitar al ttulo de la pgina que se indicar con la etiqueta <title>:

    Ttulo del documento


    <TITLE> Ttulo de la pgina </TITLE> El ttulo debe ser breve y descriptivo de su contenido, pues ser lo que vean los dems cuando aadan nuestra pgina a su bookmark (o agenda de direcciones) o en la pestaa de ttulo en el explorador.

    Programacin Web

    Cuerpo
    <BODY> Cuerpo de la pgina </BODY> Dentro del cuerpo est todo lo que queremos que aparezca en la pantalla principal (texto, imgenes, etc.)

    Ejercicio 1. Estructura de un documento HTML


    La estructura de un documento HTML queda de esta manera: <HTML> <HEAD> <TITLE> Mi primera pgina Web </TITLE> </HEAD> <BODY> Hola a todos, como han deducido por el ttulo esta es la primera pgina web que hago, espero que les guste. Robbie. </BODY> </HTML>

    TABLAS
    El objetivo fundamental de las tablas es mostrar una serie de datos en forma ordenada, organizado en filas y columnas. Algo importante es que no utilizaremos las tablas para organizar la pgina completa (esto se hace en la actualidad mediante CSS, es decir hojas de estilo. Para crear una tabla se hace necesario usar la etiqueta <table> <TABLE> Otras etiquetas </TABLE>

    Programacin Web
    Dentro de la tabla se define la estructura cuanto al total de filas y columnas: Filas <TR> Otras etiquetas </TR> La etiqueta TR permite la insercin de una fila en la tabla, por cada fila se hace necesaria definir un TR (para N cantidad de filas N cantidad de TR). Columna <TD> Contenido de la celda </TD> La etiqueta TD permite la definicin de una columna (celda - casilla) dentro de una fila, la etiqueta TD va incluida dentro de un TR. En ah donde se ubica el contenido en la tabla.

    Ejercicio 2. Tablas Creacin de una tabla de 2 filas y 3 columnas


    Columna 1 F1 - C1 F2 - C2 Columna 2 F1 C2 F2 C2 Inicio de la tabla Columna 3 F1 C3 F2 C3 Fila 1 Fila 2

    <TABLE>

    <TR> Inicio de la primera fila <TD>F1-C1</TD> Primera columna de la primera fila <TD>F1-C2</TD> Segunda columna de la primera fila <TD>F1-C3</TD> Tercera columna de la primera fila </TR> Fin primera fila <TR> Inicio de la segunda fila <TD>F2-C1</TD> Primera columna de la segunda fila <TD>F2-C2</TD> Segunda columna de la segunda fila <TD>F2-C3</TD> Tercera columna de la segunda fila </TR> Fin segunda fila </TABLE>
    Fin de la tabla

    Programacin Web

    Para poder visualizar los bordes de las tablas, se hace necesaria la utilizacin de un atributo a la etiqueta. Borde de una tabla Para colocar el borde a una tabla, se aade el atributo BORDER un atributo a la etiqueta <TABLE>. Este atributo puede tomar un valor en pixeles que representa el grosor del borde a mostrar. equivalente a BORDER=1. <TABLE BORDER=5> Otras etiquetas </TABLE> La etiqueta anterior crea una tabla y le coloca un borde de 5 pixeles. Ejercicio 3. Borde de una tabla Aplicando borde 5 al ejercicio anterior <TABLE BORDER=5>
    Inicio de la tabla

    Si incluimos BORDER sin ningn valor, es

    <TR> Inicio de la primera fila <TD>F1-C1</TD> Primera columna de la primera fila <TD>F1-C2</TD> Segunda columna de la primera fila <TD>F1-C3</TD> Tercera columna de la primera fila </TR> Fin primera fila <TR> Inicio de la segunda fila <TD>F2-C1</TD> Primera columna de la segunda fila <TD>F2-C2</TD> Segunda columna de la segunda fila

    Programacin Web
    <TD>F2-C3</TD> Tercera columna de la segunda fila </TR> Fin segunda fila </TABLE>
    Fin de la tabla

    Ancho de una tabla El atributo WIDTH proporciona el ancho de la tabla. <TABLE WIDTH=500> Otras etiquetas </TABLE> La etiqueta anterior crea una tabla cuyo ancho es de 500 pixeles. Ejercicio 4. Ancho de una tabla <TABLE BORDER=5 WIDTH=600> Especifica un ancho de la tabla de 600 pixeles <TR> <TD>F1-C1</TD> <TD>F1-C2</TD> <TD>F1-C3</TD> </TR> <TR> <TD>F2-C1</TD> <TD>F2-C2</TD> <TD>F2-C3</TD> </TR> </TABLE>

    Programacin Web

    Ancho de una columna en una tabla El atributo WIDTH proporciona el ancho de una columna en una tabla. <TD WIDTH=600> Contenido de la celda </TD> El atributo anterior especifica el ancho de la columna en 600 pixeles. Ejercicio 5. Ancho de una columna en una tabla <TABLE BORDER=5 WIDTH=600> <TR> <TD WIDTH=100>F1-C1</TD> Ancho de la primera columna 100 px <TD WIDTH=300>F1-C2</TD> ancho de la segunda columna 300 px <TD WIDTH=200>F1-C3</TD> Ancho de la tercera columna 200 px </TR> <TR> <TD>F2-C1</TD> <TD>F2-C2</TD> <TD>F2-C3</TD> </TR> </TABLE> La sumatoria de los anchos de las columnas equivale al valor del ancho de la tabla.

    Programacin Web

    Alto de una tabla El atributo HEIGHT proporciona el alto de la tabla. <TABLE HEIGHT=500> Otras etiquetas </TABLE> La etiqueta anterior crea una tabla cuyo ancho es de 500 pixeles. Ejercicio 6. Alto de una tabla <TABLE BORDER=5 WIDTH=600 HEIGHT=500> Especifica un alto de 700 px <TR> <TD>F1-C1</TD> <TD>F1-C2</TD> <TD>F1-C3</TD> </TR> <TR> <TD>F2-C1</TD> <TD>F2-C2</TD> <TD>F2-C3</TD> </TR> </TABLE>

    Programacin Web

    Alto de una fila en una tabla El atributo HEIGHT proporciona el alto de una fila en una tabla. <TD HEIGHT=300> Contenido de la celda </TD> El atributo anterior especifica el alto de la fila en 300 pixeles. Ejercicio 7. Alto de una fila en una tabla <TABLE BORDER=5 WIDTH=600 HEIGHT=500> <TR HEIGHT=100> Alto de la primera fila 100 px <TD WIDTH=100>F1-C1</TD> <TD WIDTH=300>F1-C2</TD> <TD WIDTH=200>F1-C3</TD>

    Programacin Web
    </TR> <TR HEIGHT=400> <TD>F2-C1</TD> <TD>F2-C2</TD> <TD>F2-C3</TD> <TR> </TABLE> La sumatoria de los altos de las filas equivale al valor del alto de la tabla.
    Alto de la primera fila 400 px

    COLORES WEB
    La paleta de colores RGB (RVA en espaol) consta, bsicamente, de tres colores primarios aditivos: Rojo-Verde-Azul. Estos colores primarios aditivos, en HTML, estn representados por tres pares hexadecimales del tipo 0xHH-HH-HH segn el siguiente formato: (los colores bsicos o primarios, no aquellos que son resultantes de mezclas) #RRGGBB (= #RRVVAA)

    10

    Programacin Web CODIGOS DE COLORES HTML Y HEXADECIMAL


    Colores Amarillos Gold Yellow LightYellow LemonChiffon FFD700 FFFF00 FFFFE0 FFFACD Colores Azules Aqua/Cyan LightCyan PaleTurquoise Aquamarine Turquoise 00FFFF E0FFFF AFEEEE 7FFFD4 40E0D0 Colores Marrones Cornsilk FFF8DC

    BlanchedAlmond FFEBCD Bisque NavajoWhite Wheat BurlyWood Tan RosyBrown SandyBrown Goldenrod DarkGoldenrod Peru Chocolate SaddleBrown Sienna Brown Maroon FFE4C4 FFDEAD F5DEB3 DEB887 D2B48C BC8F8F F4A460 DAA520 B8860B CD853F D2691E 8B4513 A0522D A52A2A 800000

    LightGoldenrodYellow FAFAD2 PapayaWhip Moccasin PeachPuff PaleGoldenrod Khaki DarkKhaki FFEFD5 FFE4B5 FFDAB9 EEE8AA F0E68C BDB76B

    MediumTurquoise 48D1CC DarkTurquoise CadetBlue SteelBlue LightSteelBlue PowderBlue LightBlue SkyBlue LightSkyBlue DeepSkyBlue DodgerBlue CornflowerBlue 00CED1 5F9EA0 4682B4 B0C4DE B0E0E6 ADD8E6 87CEEB 87CEFA 00BFFF 1E90FF 6495ED

    MediumSlateBlue 7B68EE RoyalBlue Blue MediumBlue DarkBlue Navy MidnightBlue Colores Naranja ghtSalmon Coral Tomato OrangeRed DarkOrange Orange FFA07A FF7F50 FF6347 FF4500 FF8C00 FFA500 Pink LightPink HotPink DeepPink 4169E1 0000FF 0000CD 00008B 000080 191970 Colores Rojos IndianRed LightCoral Salmon DarkSalmon LightSalmon Crimson Red FireBrick DarkRed CD5C5C F08080 FA8072 E9967A FFA07A DC143C FF0000 B22222 8B0000

    Colores Rosas FFC0CB FFB6C1 FF69B4 FF1493

    MediumVioletRed C71585 PaleVioletRed DB7093

    11

    Programacin Web
    Colores Grises Gainsboro LightGrey Silver DarkGray Gray DimGray LightSlateGray SlateGray DarkSlateGray Black Colores Prpura Lavender Thistle Plum Violet Orchid Fuchsia / Magenta MediumOrchid MediumPurple BlueViolet DarkViolet DarkOrchid DarkMagenta Purple Indigo SlateBlue DarkSlateBlue E6E6FA D8BFD8 DDA0DD EE82EE DA70D6 FF00FF BA55D3 9370DB 8A2BE2 9400D3 9932CC 8B008B 800080 4B0082 6A5ACD 483D8B DCDCDC D3D3D3 C0C0C0 A9A9A9 808080 696969 778899 708090 2F4F4F 000000 White Snow Honeydew MintCream Azure AliceBlue GhostWhite WhiteSmoke Seashell Beige OldLace FloralWhite Ivory AntiqueWhite Linen Colores Blancos FFFFFF FFFAFA F0FFF0 F5FFFA F0FFFF F0F8FF F8F8FF F5F5F5 FFF5EE F5F5DC FDF5E6 FFFAF0 FFFFF0 FAEBD7 FAF0E6 Colores Verdes GreenYellow Chartreuse LawnGreen Lime LimeGreen PaleGreen LightGreen ADFF2F 7FFF00 7CFC00 00FF00 32CD32 98FB98 90EE90

    MediumSpringGreen 00FA9A SpringGreen MediumSeaGreen SeaGreen ForestGreen Green DarkGreen YellowGreen OliveDrab Olive DarkOliveGreen 00FF7F 3CB371 2E8B57 228B22 008000 006400 9ACD32 6B8E23 808000 556B2F

    LavenderBlush FFF0F5 MistyRose FFE4E1

    MediumAquamarine 66CDAA DarkSeaGreen LightSeaGreen DarkCyan Teal 8FBC8F 20B2AA 008B8B 008080

    12

    Programacin Web

    Color de fondo El atributo BGCOLOR permite la colocacin del color de fondo, puede emplearse tanto el nombre red o su equivalente en hexadecimal #FF0000. <body bgcolor=red> coloca color rojo de fondo de la pgina </body> Ejercicio 8. Colores a la pgina y tablas <HTML> <HEAD> <TITLE> Tablas</TITLE> </HEAD> <BODY bgcolor="#FAF0E6"> color de fondo LINEN a toda la pgina <TABLE border="5" width="600" height="500" bgcolor="red"> color de fondo
    ROJO toda la tabla

    <TR height="100" bgcolor="#EE82EE">


    primera fila

    color de fondo VIOLETA a la

    <TD width="100">F1-C1</TD> <TD width="300">F1-C2</TD> <TD width="200">F1-C3</TD> </TR> <TR height="400"> <TD>F2-C1</TD> <TD bgcolor=" LAWNGREEN ">F2-C2</TD> color de fondo
    LAWNGTREEN a la segunda columna de la segunda fila

    <TD>F2-C3</TD> </TR> </TABLE> </BODY> </HTML>

    13

    Programacin Web

    14

    Vous aimerez peut-être aussi