y - Mente Interactiva
Anuncio
HTML • HTML (HyperText Markup Language) • Creado en 1989 por el físico nuclear TIM BERNERSLEE • Se elaboró un protocolo para soportar e envío de información por la red. • HTTP (Hyper Text Transfer Protocol) HTML • Lenguaje que permite definir un formato a documentos de texto. • Define sintaxis y ubicación de imágenes, texto, instrucciones y objetos del navegador. • Posibilidad de conectar un documento con otros o con distintos recursos de Internet. • Hiperlinks • URL: Uniform Resource Locator Dirección de un objeto en el Web HTML Reglas básicas Etiquetas (tags) Atributos Valores apertura <xxx> cierre </xxx> <P> ……. </P> Modifican la funcionalidad de las tags <body BGCOLOR...> Definen el valor del atributo <P ALIGN="center">...</P> Estructura General <html> <head> <title>Título del Documento</title> </head> <body> ... </body> </html> Estructura General HEAD Contiene las etiquetas TITLE, META; los scripts y las hojas de estilo (CSS) BODY Contiene el contenido que ve el usuario en una pagina web: textos, imágenes, tablas, enlaces, formularios. <HTML> <HEAD> <TITLE>Título de la página</TITLE> Aquí van otras etiquetas como las META, scripts y estilos </HEAD> <body> Aquí va lo que se mostrará en pantalla del documento HTML </body> </HTML> Entre las etiquetas <html> y <head> se suelen colocar otras opcionales, como por ejemplo: <meta name="description" content=“xxx"> <meta name="keywords" content=“abc,def,"> <meta http-equiv="Content-Type“ content="text/html; charset=ISO-8859-1"> • En este caso las etiquetas le indican a los buscadores el contenido de nuestras páginas (description) y algunas palabras clave (keywords) para su localización. HEAD. CABECERA. • La cabecera es la sección comprendida entre <head> y </ head>. • Dentro de la cabecera también se suele incluir código en JavaScript, y CSS (Hojas de Estilo) que se reconocen porque va comprendido entre las etiquetas <script language="JavaScript"> <!– Aquí iría el código // --> </script> <link href="estilo.css" rel="stylesheet" type="text/css"> BODY. CUERPO. • El cuerpo (body) del documento html es normalmente lo más importante. Es aquí donde debemos colocar el contenido de nuestra página: texto, fotos, etc. Atributos de “body” BGCOLOR - color de fondo de la página. Formato: #rrggbb <BODY BGCOLOR=#0000FF> o <BODY BGCOLOR=blue> TEXT - color del texto por omisión. Defecto: negro BACKGROUND - ruta y nombre de archivo (URL) de la imagen que será usada como fondo del documento. HEADERS. ENCABEZADOS. Los títulos o encabezados se emplean al comienzo de una sección. Las etiquetas que se usan son: <h1> Título </h1> .. <h6> Titulo H6 </h6> ESTILOS DE FUENTES Estilos de fuentes – algunos de los existentes son: <B>Texto en Negrita</b> <I>Itálica</i> <B><I>Negrita e Itálica</i> HOLA</b> <U>Subrayado</u> <EM>Enfatizado</em> <STRONG>Fuerte</strong> Texto en Negrita Itálica Negrita e Itálica Subrayado Enfatizado Fuerte Tipos y Tamaños de fuentes Tamaños de fuentes – dos maneras número del 1 al 7 (de más pequeño a más grande) ! <font size=1> Esta es la letra más pequeña que se puede conseguir </font> ! referencia relativa (tamaño por defecto 3) ! <font size="+1"> Esto es igual que poner size=4 </font> Tipos de fuentes ! <font face="Courier">Eso se verá en la fuente Courier</font> PÁRRAFOS Y BLOQUES <P> Se utiliza para que los párrafos queden separados por una línea en blanco. Atributos: ALIGN="left" , ALIGN="right" , ALIGN="center" y ALIGN="justify" <BR> punto y aparte. No tiene etiqueta de cierre <HR> Se emplea para representar una línea horizontal (no tiene cierre) Listas No Ordenadas (viñetas). Unordered Lists <ul> <li>Primer término de la lista</li> <li>Segundo término</li> <li>Tercer término</li> </ul> • Primer término de la lista • Segundo término • Tercer término Listas Ordenadas. Ordered Lists. <ol> <li>Primer término de la lista</li> <li>Segundo término</li> <li>Tercer término</li> </ol> 1. Primer término de la lista 2. Segundo término 3. Tercer término ENLACES. HIPERVÍNCULOS. <A HREF="URL"> Texto del enlace </A> El texto del enlace es lo que se visualizará en el navegador. La URL es la dirección donde redirecciona la liga. ENLACES. HIPERVÍNCULOS. Tipos: 1) Enlace a otro lugar del mismo documento (anclas) <A HREF="#inicio"> Ir al Inicio </A> Y en el sitio exacto adonde queremos saltar, debemos poner la siguiente etiqueta: 2) Enlace a otra página local (relativo) <a href=“html/pagina2.htm">Ir a pagina 2</a> <a href=“../pagina2.htm">Ir a pagina 2</a> ENLACES. HIPERVÍNCULOS. Tipos: 3) Enlace a una página externa (absoluto) <a href=“http://www.google.com">Ir a GOOGLE</a> 4) Enlace a un email <a href=“mailto:correo@menteinteractiva.com“>Manda email</a> Imágenes <IMG SRC="URL" /> (no tiene etiqueta de cierre) <IMG SRC="http://www.grupobgl.com/logo.jpg" /> Atributos: ALT="Texto que aparece al situar el cursor sobre la imagen" ALIGN WIDTH=80, HEIGTH=100 - Indican la anchura y altura de la imagen en píxels BORDER=2 - Añade un borde, a modo de marco, a la imagen HSPACE=10 , VSPACE=15 - Especifican el espacio horizontal y vertical que separa la imagen del texto Los mas utilizados: GIF, JPG y PNG en entorno Web Tablas <TABLE> y </TABLE> son las etiquetas donde está contenida la tabla <TR> y </TR> son las etiquetas que indican el comienzo y fin de una fila (<th> y </th> si es una fila de cabecera) <TD> y </TD> señalan una celda. Ejemplo: <TABLE > <TR> <TD>1 </TD> <TD> 2 </TD> </TR> <TR> <TD>3 </TD> <TD> 4</TD> </TR> </TABLE> 1 2 3 4 Tablas. Atributos. Tablas – Atributos BORDER="4". Indica el tamaño del borde en píxels, en este caso 4. Si no se indica nada carece de borde WIDTH="5" o WIDTH="50%". Es el ancho de la tabla, puede especificarse en valor absoluto (5 píxels) o como un porcentaje (50% del ancho disponible) CELLSPACING="2". Es el espacio entre las celdas, por defecto es 2 CELLPADDING="5". Es el espacio entre el contenido de las celdas y el borde de las mismas, por defecto es 1 ALIGN=" left", "right", "center". Atributos de las etiquetas de fila y celda WIDTH="30". Ancho de toda la fila o celda. También se puede dar en % ALIGN=" left", "right", "center". VALIGN="top" , "middle" o "bottom". Alinea el contenido verticalmente arriba, en medio o abajo BGCOLOR="#AACCEE". Pone un fondo del color especificado a la celda o fila COLSPAN=3. Especifica el número de columnas que abarca la fila ROWSPAN=2. Especifica el número de filas que abarca la columna HTML de tipo BLOCK Etiquetas de tipo bloque: <h1>, <p>, <ul>, <table> HTML de tipo BLOCK Etiquetas de tipo bloque: <div> HTML de tipo INLINE Etiquetas de tipo inline: <b>, <td>, <a>, <img> HTML de tipo INLINE Etiquetas de tipo inline: <b>, <td>, <a>, <img> Enfoques para hacer layouts: • Enfoque basado en tablas • Enfoque basado en DIVs Tablas DIVs Herramientas Útiles • Firebug para Firefox o Chrome • Adobe Kuler
