Your SlideShare is downloading. ×
Etiquetas html
Etiquetas html
Etiquetas html
Etiquetas html
Etiquetas html
Etiquetas html
Etiquetas html
Etiquetas html
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Etiquetas html

484

Published on

trabajo de programación web

trabajo de programación web

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
484
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Universidad Laica Eloy Alfaro De Manabí Nombre: María Alexandra Molina Ordoñez Etiquetas html El lenguaje HTML es un lenguaje de marcas, estas marcas serán fragmentos de texto destacado de una forma especial que permiten la definición de las distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje. A estas marcas las denominaremos etiquetas y serán la base principal del lenguaje HTML ETIQUETAS HTML APERTURA ACCION<! DOCTYPE> Es la primera parte de una página web, que va antes de la etiqueta <HTML>. Le indica al navegador que especificación de HTML se está utilizando HTML 4.01: los tipos de documento que define son: strict, transitional y frameset.STRICT Se usa cuando se utilizan CSS. <! DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dt d">TRANSITIONAL Presenta elementos en proceso de transición de acuerdo a los estándares del W3C. <! DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dt d">FRAMES Debe usarse en documentos que incluyen frames <!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/framese t.dtd"><html></html> Al principio y al final del documento.
  • 2. Universidad Laica Eloy Alfaro De Manabí Nombre: María Alexandra Molina Ordoñez<head></head> Abre y cierra un documento HTML Cabecera del documento - aquí se coloca título, metatags, e información para buscadores. Dentro del head se ponen las etiquetas.</body> Permite el cierre de la etiqueta y se coloca justo antes del cierre </html><body></body> Dentro de esta etiqueta va toda la parte visible de la página web. Se inserta todo el contenido del documento. ATRIBUTOS DE LA ETIQUETA BODYLa etiqueta <body> puede llevar incluida información sobre las propiedades de lapágina:<body bgcolor=?> Configura el color de fondo de la página, usando el valor del código de color hexadecimal.<body text=?> Configura el color por defecto del texto en la página, usando el valor del código de color hexadecimal.<body link=?> Configura el color de las ligas o enlaces, usando el valor del código de color hexadecimal.<body vlink=?> Configura el color de las ligas o enlaces visitados, usando el valor del código de color hexadecimal.<body alink=?> Configura el color de las ligas o enlaces activos al darle clic, usando el valor del código hexadecimal.<body background="imagen.gif"> Establece una imagen para el fondo de la página.Todos estos parámetros se pueden agrupar en una única etiqueta <body>:<body bgcolor=? text=?link=? vlink=?alink=?><!-- comentarios --> Sirve para anotar aclaraciones privadas del autor de la página. Lo que seescribe dentro de esta etiqueta es ignorado por el navegador y no se muestra en la página. ETIQUETAS DEL ENCABEZADO<title></title> Indica el título de la página web.<meta> Permite aportar meta información al documento, para su mejor
  • 3. Universidad Laica Eloy Alfaro De Manabí Nombre: María Alexandra Molina Ordoñez Identificación e indexación por los motores de búsqueda. TIPOS DE <META>:<meta name="description" content="Frase descriptiva de los contenidos de laPágina"><meta name="keywords" content="Palabras clave que resuman la temática de los contenidosde la página”><meta name="author" content="Nombre/s del autor/es de la página"> ETIQUETAS O FORMATOS HTML DE TEXTO<pre></pre> Texto pre-formateado<hl></hl> sirve para que el título sea más grande<h6></h6> es para que el título sea más pequeño<b></b> Negritas. (También sirve la etiqueta <strong>… </strong>)<u></u> es para un subrayado<i></i> Cursivas.(También sirve la etiqueta <em>…</em>)<tt></tt> Es tipo máquina de escribir<cite></cite> Cita, en cursiva<em></em> Resalta una palabra, negrita o cursiva<strong></strong> Resalta una palabra o grupo de palabras<font face=?></font> Coloca el tipo de letra o fuente: por ejemplo, arial, verdana, courier, etc.<font size=”x”></font> Coloca tamaño de letra, donde X es un valor del 1 al 7<font color=?></font> Configura el color, usando valor hexadecimal o nombre directo formado por letras y números que indica el color (blue, green, etc.)La etiqueta <font> puede incluir los tres parámetros (tamaño, fuente y color):<font size=Xcolor=? face=?fuente escogida> …… </font><pre> pre formateado. Respeta espacios, saltosde línea y los retornos utilizados.<blink> hace parpadear el texto (no para Explorer) LIGAS<a href="URL"></a> Hipervínculo<a href="mailto:EMAIL"></a> Hipervínculo mailto (para envío de correo)
  • 4. Universidad Laica Eloy Alfaro De Manabí Nombre: María Alexandra Molina Ordoñez<a name="name"></a> Ancla en el mismo documento<a href="#name"></a> Liga hacia algún lugar dentro del mismo sitio. FORMATO Y PRESENTACIÓN DE PÁRRAFO<p></p> Nuevo párrafo, salto de párrafo.<br> Inserta un interlineado suave. Crea otra línea o salta de línea<blockquote></blockquote> Sangría.<center> Centrar el texto.<p align=center> Párrafo centrado.<p align=left> Párrafo alineado a la izquierda.<p align=right> Párrafo alineado a la derecha.<p align=> Alinea el párrafo hacia la izquierda, derecha o al centro CREACIÓN DE LISTAS Lista no numerada:<ul>entrada de una lista<li>primer elemento de la lista</li><li>segundo elemento de la lista</li><li>tercer elemento de la lista</li></ul> cierra lista Lista numerada:<Ol>entra lista<li>primer elemento de la lista</li><li>segundo elemento de la lista</li></Ol>cierra lista. Lista de glosario:<dl> entra lista<dt>término que se va a definir</dt><dd>definición del término</dd></dl> cierra lista. Lista de definiciones del glosario:<li></li> Lista ordenada<ol></ol> Precede cada definición.<dt> Precede a cada término en definiciones<dd> Lista con viñetas sin ordenar<dl></dl> Texto indentado de ambos lados.
  • 5. Universidad Laica Eloy Alfaro De Manabí Nombre: María Alexandra Molina Ordoñez<div align=?> Para formato a porciones grandes del documento html, incluyendo hojas de estilo. LÍNEAS HORIZONTALES SEPARADORAS<hr> Línea horizontal.<hr width="x%"> Anchura de la línea en porcentaje.<hr width=x> Anchura de la línea en píxeles.<hr size=x> Altura de la línea en píxeles.<hr align=center> Línea alineada en el centro.<hr align=left> Línea alineada a la izquierda.<hr align=right> Línea alineada a la derecha.<hr noshade> Línea sin efecto de sombra. ELEMENTOS GRÀFICOS<img src="dirección de la imagen” "> Indica la ruta de la imagen.<img src="name" border=?> Determina el contorno de la imagen. Un valor 0 no tendrá contorno.<img src="name"> Incorpora una imagen<img ... height="XX" width="YY"> establece un tamaño de la imagen (altura y anchura) en pixels<img src="name" align=?> Alinea la imagen: izquierda, derecha y centro.<img ... alt="texto explicativo"> Se muestra un texto al pasar el cursorsobre la imagen.<img ... align="bottom"> Alineación inferior del texto respecto de la imagen.<img ... align="middle"> Alineación del texto en el medio de la imagen<img ... align="top"> Alineación superior del texto respecto de la imagen.<img ... align="left"> Alineación izquierda de la imagen en el párrafo.<img ...align="right"> Alineación derecha de la imagen en el párrafo<img ... hspace=X> Espacio horizontal entre la imagen y el texto.<img ... vspace=y> espacio Espacio vertical entre la imagen y el texto.<map></map> Mapa de imágenes<body background="URL o ruta de Coloca la imagen como fondo de laarchivo"></body> página<hr> Linea horizontal<hr size=?> Tamaño de una línea horizontal<hr width=?> Ancho de línea horizontal, ya sea porcentaje o valor absoluto.<hr noshade> Línea horizontal sin sombra
  • 6. Universidad Laica Eloy Alfaro De Manabí Nombre: María Alexandra Molina Ordoñez TABLASÚtiles para componer la página y para presentar datos tabulares.<table></table> Crea tabla y define como comienza y termina la tabla<tr></tr> Crea filas en una tabla<td></td> Crea celda o columnas dentro de las fila<th></th> Encabezado de tabla, texto normal, negrita y centrado ATRIBUTOS DE TABLAS<table border=#> Coloca contorno en las celdas de la tabla<table cellspacing=#> Espacio en pixeles entre las celdas y textos de una tabla<table cellpadding=#> Espacio entre el contorno de una celda y su contenido<table width=# or %> Ancho de la tabla, puede darse en pixeles o porcentaje del ancho de la página (no lleva %)<table border="X"> Establece el grosor en píxeles del borde de la tabla<table height="XX> Determina la altura de la tabla en píxeles<tr align=?> or <tdalign=?> Alineación para las celdas, izquierda derecha, centro.<tr valign=?> or <td valign=?> Alineación vertical de las celdas, arriba, abajo, en medio.<td colspan=#> Expansión de una celda, en número de columnas<td rowspan=#> Expansión de una celda, en número de celdas<td nowrap> Texto contínio dentro de una celda. MARCOS (FRAMES)<frameset></frameset> Substituye a la etiqueta HTML body en documentos con frames. Puede insertarse en otrosframesets.<frameset rows="value,value"> Número de líneas en un frameset, usando pixeles o porcentaje de ancho.<frameset cols="value,value"> Número de columnas en un frameset, usando pixeles o porcentaje de ancho.<frame> Frame singular dentro de un framset.
  • 7. Universidad Laica Eloy Alfaro De Manabí Nombre: María Alexandra Molina Ordoñez<noframes></noframes> Texto que aparecerá en navegadores que no soportan frames. ATRIBUTOS DE FRAMES<frame src="URL"> Especifica que página html se muestra.<frame name="name"> Nombra al frame para que sea identificado por otros frames y accesado.<frame marginwidth=#> Margen izquierdo y derecho de un grame, debe ser igual o mayor que 1.<frame marginheight=#> Margen superior e inferior de un grame, igual o mayor a 1.<frame scrolling=VALUE> Determina si un frame tiene barra de desplazamiento, Puede ser yes, no, auto, el cual es por defecto.<frame noresize> No permite al usuario modificar el tamaño de un frame. FORMAS<form></form> Forma<select name="name"></select> Menú desplegable<option> Opción del menú desplegable<textarea name="name" cols=40 Crea una caja de texto, columnas esrows=8></textarea> el ancho y las líneas la altura (cols y rows)<input type="checkbox" name="name"> Crea un checkbox<input type="radio" name="name" value="x"> Crea botón de radio<input type=text name="name" size=20> Crea una opción de texto para entrada de información o despliegue<input type="submit" value="name"> Crea botón de envío de forma tipo submit<input type="image" border=0 name="name" Crea botón de envío con imagensrc="name.gif"><input type="reset"> Crea botón de limpieza (reset). Vacía la forma OTRAS ETIQUETAS HTML<EMBED SRC="url o ruta de archivo" VOLUME="50" Incorpora sonido con panel deHEIGHT="50" WIDTH="130"> control en la pantalla
  • 8. Universidad Laica Eloy Alfaro De Manabí Nombre: María Alexandra Molina Ordoñez< object width="600" height="300"> Para insertar una pelicula flash swf<param name="movie" value="miarchivo.swf"> en html<embed src="miarchivo.swf" width="600"height="300"></embed></object><!-- Este es un comentario --> Inserta comentarios no visibles en la página.< iframe src ="/mipagina.html"> ... </iframe>> Inserta un frame dentro de una página. Inline Frame.< script type="text/javascript"> Inserta un script dentro de unadocument.write("<h2>bienvenido!</h2>" página html.</script><span style="color: #00FFFF;"></span>. Aplica a un grupo de texto un estilo, por ejemplo font, tamaño, color. CREACIÓN DE ENLACES<a href=”http://www.servidor.com/directorio/pagina.htm”>Enunciado delenlace</a><a href=”mailto:dirección de mail”> Vínculo a una dirección de correo-e.<a name=”marcador”> Define un marcador (ancla) en un punto concreto de una página, para poder enlazarlo posteriormente.<a href=”#marcador”> Dirige un enlace interno al punto dónde está el marcador.<a href=”dirección página#marcador Dirige el enlace a un punto concreto de otra página. DENTRO DEL A HREF:target="_blank" Abre la página en un nuevo navegador.target=”_top Abre la página en toda la pantalla para evitar los frames.title=”texto descriptivo del enlace” Permite incluir una descripción del destino del enlace.

×