HTML. HTML (HyperText Markup Language) Creado en 1989 por el físico nuclear TIM BERNERS- LEE

Tamaño: px

Comenzar la demostración a partir de la página:

Download "HTML. HTML (HyperText Markup Language) Creado en 1989 por el físico nuclear TIM BERNERS- LEE"

Paula Villanueva Navarro
hace 8 años
Vistas:

2 HTML HTML (HyperText Markup Language) Creado en 1989 por el físico nuclear TIM BERNERS- LEE Se elaboró un protocolo para soportar e envío de información por la red. HTTP (Hyper Text Transfer Protocol)

3 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

4 HTML Reglas básicas Etiquetas (tags) apertura <xxx> cierre </xxx> <P>. </P> Atributos Modifican la funcionalidad de las tags <body BGCOLOR...> Valores Definen el valor del atributo <P ALIGN="center">...</P>

5 Estructura General <html> <head> <title>título del Documento</title> </head> <body>... </body> </html>

6 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>

7 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 "> 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.

8 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">

9 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.

10 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>

11 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

12 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>

13 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)

14 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

15 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

16 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.

17 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>

18 ENLACES. HIPERVÍNCULOS. Tipos: 3) Enlace a una página externa (absoluto) <a href= a GOOGLE</a> 4) Enlace a un <a href= mailto:correo@menteinteractiva.com >Manda </a>

19 Imágenes <IMG SRC="URL" /> (no tiene etiqueta de cierre) <IMG SRC=" /> 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

20 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>

21 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

22 HTML de tipo BLOCK Etiquetas de tipo bloque: <h1>, <p>, <ul>, <table>

23 HTML de tipo BLOCK Etiquetas de tipo bloque: <div>

24 HTML de tipo INLINE Etiquetas de tipo inline: <b>, <td>, <a>, <img>

25 HTML de tipo INLINE Etiquetas de tipo inline: <b>, <td>, <a>, <img>

26 Enfoques para hacer layouts: Enfoque basado en tablas Enfoque basado en DIVs

28 Tablas

29 DIVs

30 Herramientas Útiles Firebug para Firefox o Chrome Adobe Kuler

Documentos relacionados

Tema 5: La red de redes: Internet

Tema 5: La red de redes: Internet > Qué es Internet? Todo el mundo habla de Internet: se hace referencia en clase, en revistas de moda, entre amigos... Acceder a una página web, hablar con los amigos a