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
Descargar