Scribd Logo
Carica

Benvenuto in Scribd!

  • F2 Informatica 2º Diseño Web

    Caricato da

    Jose Regalado
    16 visualizzazioni5 pagine

    Copyright

    © © All Rights Reserved

    Formati disponibili

    DOCX, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    © All Rights Reserved
    Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    16 visualizzazioni5 pagine

    F2 Informatica 2º Diseño Web

    Caricato da

    Jose Regalado

    Copyright:

    © All Rights Reserved
    Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 5

    Instituto Nacional Tcnico Industrial

    Folleto N 2 de Informtica para 2 ao de Bachillerato Prof. Jos Luis Regalado Nombre: Tema: Diseo Web con HTML N:

    Estructura bsica de un archivo HTML

    <HTML> <HEAD> <TITLE>Mi primera pgina HTML </TITLE> </HEAD> <BODY> Esta es mi primera pgina <B>HTML</B> </BODY> </HTML>

    Etiquetas HTML HEAD TITLE

    Muestra el encabezado de la pgina, generalmente anida a la etiqueta <TITLE> , la cual muestra el titulo en la barra de titulo Encabezados segn importancia, el numero indica el nivel del ttulo, para <H1> muestra el texto en H1 H6 negrita y con gran tamao, <H6> muestra un ttulo con letras ms pequeas BODY Indica el cuerpo de la pgina web Etiqueta de alineacin y separacin, se usa sola anteponiendo al texto a separar o con la sintaxis <P P ALIGN = posicin> , siendo la posicin CENTER, LEFT o RIGHT BR Etiqueta de ruptura de prrafos, se usa para separar oraciones PRE Etiqueta de preformato, todo lo que este dentro de esta etiqueta ser mostrado tal cual se ha escrito B Etiqueta para poner en negrita un texto (bold) I Etiqueta para poner en cursiva un texto (italic) Etiqueta para insertar una imagen, la ruta de la imagen debe ir entre comillas, puede alinearse IMG SRC usando ALIGN=posicin Atributo dentro de la etiqueta BODY, aplica color de fondo, la sintaxis es BGCOLOR <BODY BGCOLOR = #RRGGBB> Aplica una imagen de fondo a la pagina, su sintaxis es <BODY BACKGROUND = ruta de la imagen> BACKGROUND Puede combinarse con BGCOLOR mientras carga la imagen <BODY BACKGROUND = ruta de la imagen BGCOLOR = #RRGGBB> Especifica caractersticas de la letra en la etiqueta: <FONT COLOR = #RRGGBB> especifica el FONT color, <FONT SIZE = # > determina el tamao

    Nombre HTML

    Cdigo hex #RRGGBB

    PaleGoldenrod Khaki DarkKhaki

    EEE8AA F0E68C BDB76B

    DarkGreen YellowGreen OliveDrab Olive DarkOliveGreen MediumAquamarine DarkSeaGreen LightSeaGreen DarkCyan Teal Colores azules Aqua / Cyan LightCyan PaleTurquoise Aquamarine Turquoise MediumTurquoise DarkTurquoise CadetBlue SteelBlue LightSteelBlue PowderBlue LightBlue SkyBlue LightSkyBlue DeepSkyBlue DodgerBlue CornflowerBlue MediumSlateBlue RoyalBlue Blue MediumBlue DarkBlue Navy

    006400 9ACD32 6B8E23 808000 556B2F 66CDAA 8FBC8F 20B2AA 008B8B 008080

    Colores rojos IndianRed LightCoral Salmon DarkSalmon LightSalmon Crimson Red FireBrick DarkRed Colores rosas Pink LightPink HotPink DeepPink MediumVioletRed PaleVioletRed FFC0CB FFB6C1 FF69B4 FF1493 C71585 DB7093 CD5C5C F08080 FA8072 E9967A FFA07A DC143C FF0000 B22222 8B0000

    Colores prpuras Lavender Thistle Plum Violet Orchid Fuchsia / Magenta MediumOrchid MediumPurple BlueViolet DarkViolet DarkOrchid DarkMagenta Purple Indigo SlateBlue DarkSlateBlue Colores verdes GreenYellow Chartreuse LawnGreen Lime LimeGreen PaleGreen LightGreen MediumSpringGreen SpringGreen MediumSeaGreen SeaGreen ForestGreen Green ADFF2F 7FFF00 7CFC00 00FF00 32CD32 98FB98 90EE90 00FA9A 00FF7F 3CB371 2E8B57 228B22 008000 E6E6FA D8BFD8 DDA0DD EE82EE DA70D6 FF00FF BA55D3 9370DB 8A2BE2 9400D3 9932CC 8B008B 800080 4B0082 6A5ACD 483D8B

    00FFFF E0FFFF AFEEEE 7FFFD4 40E0D0 48D1CC 00CED1 5F9EA0 4682B4 B0C4DE B0E0E6 ADD8E6 87CEEB 87CEFA 00BFFF 1E90FF 6495ED 7B68EE 4169E1 0000FF 0000CD 00008B 000080

    Colores naranjas LightSalmon Coral Tomato OrangeRed DarkOrange Orange FFA07A FF7F50 FF6347 FF4500 FF8C00 FFA500 Colores amarillos Gold Yellow LightYellow LemonChiffon FFD700 FFFF00 FFFFE0 FFFACD

    LightGoldenrodYellow FAFAD2 PapayaWhip Moccasin PeachPuff FFEFD5 FFE4B5 FFDAB9

    MidnightBlue

    191970

    Sienna Brown Maroon

    A0522D A52A2A 800000 Colores blancos

    Ivory AntiqueWhite Linen LavenderBlush MistyRose Colores grises Gainsboro LightGrey Silver DarkGray Gray DimGray LightSlateGray SlateGray DarkSlateGray Black

    FFFFF0 FAEBD7 FAF0E6 FFF0F5 FFE4E1

    Colores marrones Cornsilk BlanchedAlmond Bisque NavajoWhite Wheat BurlyWood Tan RosyBrown SandyBrown Goldenrod DarkGoldenrod Peru Chocolate SaddleBrown FFF8DC FFEBCD FFE4C4 FFDEAD F5DEB3 DEB887 D2B48C BC8F8F F4A460 DAA520 B8860B CD853F D2691E 8B4513

    White Snow Honeydew MintCream Azure AliceBlue GhostWhite WhiteSmoke Seashell Beige OldLace FloralWhite

    FFFFFF FFFAFA F0FFF0 F5FFFA F0FFFF F0F8FF F8F8FF F5F5F5 FFF5EE F5F5DC FDF5E6 FFFAF0

    DCDCDC D3D3D3 C0C0C0 A9A9A9 808080 696969 778899 708090 2F4F4F 000000

    Prrafos con etiqueta <p> Para indicarle al navegador que queremos poner ese texto en un prrafo, debemos escribirlo entre las etiquetas <p> y su cierre </p>. As el texto quedar dentro de un prrafo, separado por un espacio en blanco por encima y uno por abajo. El texto del prrafo lo puedes alinear utilizando la etiqueta align utilizando los parmetros center (para alinearlo al centro), right (para alinearlo a la derecha), left (para alinearlo a la izquierda) y justify (para justificar el texto). Un ejemplo de esta etiqueta con sus respectivos parmetros es el siguiente: <p align="center">Este texto se alinear al centro</p> <p align="right">Este texto se alinear a la derecha</p> <p align="left">Este texto se alinear a la izquierda</p> que se ver as: Este texto se alinear al centro Este texto se alinear a la derecha Este texto se alinear a la izquierda

    Etiqueta <br> Existen dos etiquetas para indicar que queremos hacer un salto de lnea normal. Son las etiquetas <br> y <br/> ambas son interpretadas igual por el navegador. Esta etiqueta no hace falta abrirla y cerrarla, slo con escribirla el navegador ya la interpreta. Puedes escribir un texto como este y el navegador no lo interpretar as As pues el texto anterior deberamos escribirlo de la siguiente forma: Puedes escribir un texto como este <br/> y el navegador no lo interpretar as Imgenes con <img> El tag bsico para colocar una imagen es "img". Este tag, a diferencia de la gran mayora de los tags de html, no necesita un cierre. Va acompaado de diferentes atributos que te vamos a explicar a continuacin. El atributo "src" es imprescindible para poder colocar una imagen. Este atributo es el que indica dnde se encuentra alojada la imagen que queremos mostrar. Se escribe as: <img src="x">, siendo "x" la direccin o la url dnde se encuentra situada la foto. La foto podemos alinearla en la pgina como queramos mediante "align", utilizando los atributos "left" para alinearla a la izquierda, "right" para alinearla a la derecha, "top" para alinearla arriba, "bottom" para alinearla abajo y "middle" para alinearla al centro.
    As las cosas, deberemos escribir este cdigo... <img src="ruta de la imagen.extension" >

    Color de fondo: bgcolor El primer parmetro que debes conocer es el del color de fondo, el "bgcolor". A travs de este parmetro podremos definir el color de fondo que queramos que tenga nuestra pgina. Un ejemplo muy simple es el siguiente: Si queremos que nuestra pgina quede con un fondo rojo deberemos escribir: <body bgcolor="#FF0000"></body> Imagen de fondo: background Puede que no quieres que tu pgina tenga un color slo de fondo, sino que quieras que tu pgina tenga una imagen. En ese caso debers indicarlo con la etiqueta "background". La etiqueta quedara de la siguiente manera: <body background="ruta de la imagen"> </body>

    Dnde leemos "ruta de la imagen" deberemos escribir la ruta de la carpeta donde se encuentra la imagen o su direccin web. Una cosa muy importante que debes saber es que si la imagen no es suficientemente grande para rellenar toda la pgina, la imagen se repetir tanto a lo ancho como a lo largo hasta rellenar todo el espacio. Color de texto: text Una vez tenemos el fondo definido, tendremos que predefinir ahora el color del texto de nuestra web. Es decir, tendremos que decirle al navegador de qu color queremos que sea nuestro texto. Esto lo definiremos con el parmetro "text". Como ejemplo vamos a poner que queremos que nuestro texto sea en negro, con lo que escribiremos lo siguiente: <body text= "#000000"></body> Esta etiqueta afecta a todo el texto que se encuentra dentro de <body> sin distincin alguna, para especificar diferentes colores para distintos prrafos usamos:
    <FONT COLOR = #RRGGBB> texto </FONT> Tambin se puede definir el tamao del texto usando la etiqueta size despus de font, la sintaxis es la siguiente: <FONT SIZE = #> texto </FONT>

    Mrgenes: leftmargin, topmargin, rightmargin y bottommargin Para especificar los mrgenes utilizaremos el parmetro margin, con su correspondiente indicacin delante. As encontraremos "leftmargin" para el margen izquierdo, "topmargin" para el margen de arriba, "rightmargin" para el margen de la derecha y "bottommargin" para el margen de abajo. Si queremos que nuestros mrgenes sean de 10 pxeles por todas partes escribiremos lo siguiente: <body leftmargin="10px" topmargin="10px" rightmargin="10px" bottommargin="10px"></body>

    Actividad: Usando el texto de la session anterior, edite lo siguiente: - Inserte como encabezado nivel 1 su nombre completo - Inserte como encabezado nivel 2 su nmero de lista y cdigo - Inserte como encabezado nivel 3 el ttulo del texto (Catelyn) - Inserte una imagen al principio de la pgina - Aplique un color de fondo adecuado - Distinga cada prrafo (o en su defecto, cada 5 lneas de texto) con un color y tamao distinto - Al final de cada prrafo (o en su defecto, cada 5 lneas de texto) inserte una imagen diferente) - Alterne los prrafos usando ITALIC y BOLD - Aplique un margen de 10px a todo el texto

    Potrebbero piacerti anche