• Save
DEBER N°2 blog blogger blogspot
Upcoming SlideShare
Loading in...5
×
 

DEBER N°2 blog blogger blogspot

on

  • 250 views

ETIQUETAS DE HTML DEBER N°2

ETIQUETAS DE HTML DEBER N°2

Statistics

Views

Total Views
250
Views on SlideShare
184
Embed Views
66

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 66

http://lissyce.blogspot.com 65
http://www.lissyce.blogspot.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

DEBER N°2 blog blogger blogspot DEBER N°2 blog blogger blogspot Presentation Transcript

  • HTML• <html></html> Alprincipio y al final detodo documento.HEAD• <head> </head> Cabecera deldocumento. Dentro del head seponen las etiquetas:• <title> </title> indica el título dela página para el navegador.• <meta> permite aportarmetainformación aldocumento, para su mejoridentificación e indexación porlos motores de búsqueda.BODY• <body> </body> Dentro de estaetiqueta se insertan los contenidosdel documento.• El cierre de la etiqueta </body> secoloca justo antes del cierre</html>.ETIQUETAS DE HTMLMARCASBÁSICAS
  • La etiqueta <body>puede llevar incluidainformación sobre laspropiedades de lapágina:<body bgcolor="#xxyyzz">define el color de fondo dela página.<body text="#xxyyzz">define el color pordefecto del texto en lapágina.<bodylink="#xxyyzz">define el color de losenlaces.<body vlink="#xxyyzz">define el color de losenlaces visitados.<body alink="#xxyyzz">define el color de losenlaces activos.<bodybackground="imagen.gif">establece una imagenpara el fondo de lapágina.Todos estosparámetros sepueden agrupar enuna única etiqueta<body>.<!-- comentarios --> Sirvepara anotar aclaracionesprivadas del autor de lapágina.PROPIEDADES DELA PÁGINA
  • FORMATODETEXTOS<b> </b>negrita (tambiénsirve la etiqueta<strong>…</strong>)<i> </i>cursiva (tambiénsirve la etiqueta<em>…</em>)<u> </u>subrayado<font size=”X”> </font>marca el tamaño de loscaracteres, donde X es un valordel 1 a 7, o un valor relativo (+ 1-7).<Fontcolor=”#XXYYZZ”></font>define el color del texto, dondeXXYYZZ es un valor formado porletras y números que indica elcolor.<font face=”arial”> </font>determina el tipo de la fuente.La etiqueta <font>puede incluir los tresparámetros(tamaño, fuente ycolor):<font size=Xcolor=#XXYYZZface=fuente escogida>…</font><pre> preformateado.Respeta espacios, saltosde línea y los retornosutilizados.<blink> hace parpadearel texto (no paraExplorer)
  • FORMATODEPÁRRAFOS<p>salto depárrafo </p><br>salto delínea<blockquote></blockquote> sangrado.<center>centrarel texto.<palign=center>párrafocentrado.<p align=left>párrafoalineado a laizquierda.<palign=right>párrafoalineado a laderecha.
  • •<ul>•<ul><li>primer elemento de lalista</li>•<li>segundo elemento de lalista</li>•<li>tercer elemento de lalista</li>•</ul> cierra listaLISTA NONUMERADA•<ol>•<li>primer elemento de lalista</li>•<li>segundo elemento de lalista</li>•</ol> cierra lista.LISTANUMERADA•<dl>•<dt>término que se va adefinir</dt>•<dd>definición deltérmino</dd>•</dl> cierra lista.LISTA DE GLOSARIOO DEFINICIÓNCREACIÓN DE LISTAS
  • LÍNEASHORIZONTALESSEPARADORAS• <hr> línea horizontal.• <hr width="x%">anchura de la línea enporcentaje.<hr width=x>anchura de lalínea enpíxeles.• <hr size=x> altura de lalínea en píxeles.• <hr align=center> líneaalineada en el centro.•<hr align=left> líneaalineada a la izquierda.•<hr align=right> líneaalineada a la derecha.<hr noshade>línea sin efectode sombra.
  • IMÁGENES<img src="direcciónde la imagen” ">indica la ruta de laimagen.<img ...border=”X">establece unborde de Xpixels en tornoa la imagen.<img ... height="XX"width="YY">establece un tamañode la imagen (alturayanchura) en pixels.<img ... alt="textoexplicativo"> semuestra un texto alpasar elcursorsobre laimagen.img ...align="bottom">alineación inferiordel texto respectode la imagen.<img ... align="middle">alineación del textoen el medio de laimagen.<img ...align="top">alineaciónsuperior deltexto respectode la imagen.<img ... align="left">alineación izquierdade la imagen en elpárrafo.<img ...align="right">alineaciónderecha de laimagen en elpárrafo.<img ...hspace=X>espaciohorizontalentre la imageny el texto.<img ... vspace=y>espacio verticalentre la imagen yel texto.
  • TABLASútiles para componer lapágina y para presentardatos tabulares.<table>……</table>Define dónde comienzay termina la tabla<table width="XX%">Determina la anchura de latabla. Puede darse enpíxeles(no lleva el símbolo %), o enporcentaje de la página.<table height="XX>Determina la altura dela tabla en píxeles.<table border="X">Establece el grosor enpíxeles del borde de latabla<table height="XX> Determina laaltura de la tabla en píxeles.<table border="X"> Establece elgrosor en píxeles del borde de latabla<table height="XX>Determina la alturade la tabla en píxeles.<table border="X">Establece el grosoren píxeles del bordede la tabla
  • EJEMPLO DE TABLA<table width="100%" height="200" border="1" cellspacing="3"cellpadding="5"><tr><td>primera columna de la fila 1</td><td>segunda columna de la fila 1</td><td>tercera columna de la fila 1</td></tr><tr><td>primera columna de la fila 2</td><td>segunda columna de la fila 2</td><td>tercera columna de la fila 2</td></tr></table>Dentro de cada celda se puedealinear el texto o cualquiercontenido, cambiar elcolor de fondo, con las etiquetashabituales para texto, párrafos oimágenes.<td rowspan="2">&nbsp;</td> unedos celdas de dos filas adyacentes,en unaúnica celda.<td colspan="2">&nbsp;</td> une dosceldas de dos columnas adyacentesen unasola celda.
  • CREACIÓN DE ENLACES<ahref=”http://www.servidor.com/directorio/pagina.htm”>Enunciado delenlace</a>.<a href=”mailto:direcciónde mail”> Vínculo a unadirección de correo-e.<a name=”marcador”> defineun marcador (ancla) en unpunto concreto de unapágina, para poder enlazarloposteriormente.<a href=”#marcador”> dirigeun enlace interno al puntodónde está el marcador.<a href=”direcciónpágina#marcador”> dirige el enlace aun punto concreto de otrapágina.Dentro del a href:target="_blank" Abre la página en unnuevo navegador.target=”_top” Abre lapágina en toda la pantallapara evitar los frames.title=”texto descriptivo delenlace” permite incluir unadescripción del destino delenlace
  • PÁGINA CON MARCOS (no lleva body)<html><head><title>título de la página</title></head><frameset cols="20%, 80%"> (divide la página en dosmarcos en forma decolumnas, cada una con su anchura correspondiente enporcentaje)<frame src="menu.htm" name="navegacion"> (archivomenu.htm quecorresponde al marco de la izquierda, llamado“navegación”, 20% de anchura)<frame src="principal.htm" name="contenidos"> (archivoprincipal.htm quecorresponde al marco de la derecha, llamado“contenidos”, 80% de anchura)</frameset></html>Las páginas también se pueden dividir en marcoshorizontales con<frameset rows=" , ">
  • Frameborder="NO" evita que se vea el borde entre los marcosframespacing="2" establece 2 pixels de separación entre losmarcosscrolling="NO" evita que aparezca una barra de scroll dentrodel marcoscrolling="auto" mostrará la barra de scroll sólo si esnecesarioEjemplo de una página con tres marcos en forma de filas. Lasuperior y la inferiortienen un tamaño fijo de 80 pixels; la del medio es adaptable.No se muestran losbordes entre los marcos<frameset rows="80,*,80" frameborder="NO" border="0"framespacing="0"><frame src="navegacion_up.htm" name="topFrame"scrolling="NO"><frame src="principal.htm" name="mainFrame"><frame src=" navegacion_down.htm " name="bottomFrame"scrolling="NO"></frameset>