Profesor: Jhon Alexander Holguín Barrerajhon.holguin@gmail.com
Bienvenidos a mi Primera PaginaINICIO                              AUTOR                        GOOGLEXXXXXXXXXXXXXXXXXXXX...
<!DOCTYPE>Es la primera parte de una página web, aún antes que la etiqueta <html>.Le indica al navegador que especificació...
<html></html>Abre y cierra un documento HTML<head></head>Encabezado de la página - aquí se coloca titulo, metatags, e info...
•<head>: define la cabecera del documento HTML; esta cabecera suele contener información sobre el documento que no semuest...
•<h1> a <h6>: encabezados o títulos del documento con diferente relevancia.•<table>: define una tabla.•<tr>: fila de una t...
Nombre del atributo                                      Posibles valores                                            Ejemp...
PÁRRAFOS - TEXT                                                                                                           ...
FONDO - BACKGROUND                                                                                                        ...
BOX - CAJA                                                                                                                ...
Upcoming SlideShare
Loading in …5
×

20. practica html

530 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
530
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

20. practica html

  1. 1. Profesor: Jhon Alexander Holguín Barrerajhon.holguin@gmail.com
  2. 2. Bienvenidos a mi Primera PaginaINICIO AUTOR GOOGLEXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX Mensaje Ventana Introducción a la Ingeniería de Sistemas y Telecomunicaciones Jhon Alexander Holguín B.
  3. 3. <!DOCTYPE>Es la primera parte de una página web, aún antes que la etiqueta <html>.Le indica al navegador que especificación de HTML se está utilizandoHTML 4.01: los tipos de documento que define son: strict, transitional y frameset.StrictSe usa cuando se utilizan CSS.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">TransitionalPresenta 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.dtd">FramesDebe usarse en documentos que incluyen frames<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> Introducción a la Ingeniería de Sistemas y Telecomunicaciones Jhon Alexander Holguín B.
  4. 4. <html></html>Abre y cierra un documento HTML<head></head>Encabezado de la página - aquí se coloca titulo, metatags, e informacion parabuscadores entre otras cosas. Está información no es visible.<body></body>Dentro de esta etiqueta va toda la parte visible de la página web. Introducción a la Ingeniería de Sistemas y Telecomunicaciones Jhon Alexander Holguín B.
  5. 5. •<head>: define la cabecera del documento HTML; esta cabecera suele contener información sobre el documento que no semuestra directamente al usuario. Como por ejemplo el título de la ventana del navegador. Dentro de la cabecera <head>podemos encontrar:• <title>: define el título de la página. Por lo general, el título aparece en la barra de título encima de la ventana.• <link>: para vincular el sitio a hojas de estilo o iconos. Por ejemplo:<link rel="stylesheet" href="/style.css" type="text/css">.• <style>: para colocar el estilo interno de la página; ya sea usando CSS, u otros lenguajes similares.• <meta>: para metadatos como la autoría o la licencia.<body>: define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en elnavegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes.Dentro del cuerpo <body> podemos encontrar numerosas etiquetas. • <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, usando el valor del código de color hexadecimal. • <body link=?>Configura el color de los enlaces, usando el valor del código de color hexadecimal. • <body vlink=?>Configura el color de los enlaces visitadas, usando el valor del código de color hexadecimal • <body alink=?>Configura el color de los enlaces al darle clic, usando el valor del código hexadecimal. Introducción a la Ingeniería de Sistemas y Telecomunicaciones Jhon Alexander Holguín B.
  6. 6. •<h1> a <h6>: encabezados o títulos del documento con diferente relevancia.•<table>: define una tabla.•<tr>: fila de una tabla.•<td>: celda de una tabla (debe estar dentro de una fila).•<a>: hipervínculo o enlace, dentro o fuera del sitio web. Debe definirse el parámetro de pasada por medio del atributo href. Porejemplo: <a href="http://www.wikipedia.org" title="Wikipedia" target="_blank”>Texto</a>.•<div>: división de la página. Se recomienda, junto con css, en vez de <table> cuando se desea alinear contenido.•<img>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la imagen. Por ejemplo:<img src=“…" />. Es conveniente, por accesibilidad, poner un atributo alt="texto alternativo".•<li><ol><ul>: etiquetas para listas.•<b>: texto en negrita (etiqueta desaprobada. Se recomienda usar la etiqueta <strong>).•<i>: texto en cursiva (etiqueta desaprobada. Se recomienda usar la etiqueta <em>).•<s>: texto tachado (etiqueta desaprobada. Se recomienda usar la etiqueta <del>).•<u>: texto subrayado. Introducción a la Ingeniería de Sistemas y Telecomunicaciones Jhon Alexander Holguín B.
  7. 7. Nombre del atributo Posibles valores Ejemplos FUENTES - FONT color: #009900;color valor RGB o nombre de color color: red;Sirve para indicar el color del texto. Lo admiten casi todas las etiqetas de HTML. No todos los nombres de colores son admitidos en el estandar, esaconsejable entonces utilizar el valor RGB. xx-small | x-small | small | medium | large | x-large font-size:12pt;font-size | xx-large font-size: x-large; Unidades de CSSSirve para indicar el tamaño de las fuentes de manera más rígida y con mayor exactitud. serif | sans-serif | cursive | fantasy | monospace font-family:arial,helvetica;font-family Todas las fuentes habituales font-family: fantasy;Con este atributo indicamos la familia de tipografia del texto. Los primeros valores son genéricos, es decir, los exploradores las comprenden y utilizan lasfuentes que el usuario tenga en su sistema.También se pueden definir con tipografías normales, como ocurría en html. Si el nombre de una fuente tiene espacios se utilizan comillas para que seentienda bien. normal | bold | bolder | lighter | 100 | 200 | 300 | font-weight:bold;font-weight 400 | 500 | 600 | 700 | 800 | 900 font-weight: 200;Sirve para definir la anchura de los caracteres, o dicho de otra manera, para poner negrillas con total libertad.Normal y 400 son el mismo valor, así como bold y 700. font-style:normal;font-style normal | italic | oblique font-style: italic; Introducción a la Ingeniería de Sistemas y Telecomunicaciones Jhon Alexander Holguín B.
  8. 8. PÁRRAFOS - TEXT line-height: 12px;line-height normal y unidades CSS line-height: normal;El alto de una línea, y por tanto, el espaciado entre líneas. Es una de esas características que no se podrían modificar utilizando HTML. text-decoration: none;text-decoration none | [ underline || overline || line-through ] text-decoration: underline;Para establecer la decoración de un texto, es decir, si está subrayado, sobrerayado o tachado. text-align: right;text-align left | right | center | justify text-align: center;Sirve para indicar la alineación del texto. Es interesante destacar que las hojas de estilo permiten el justificado de texto, aunque recuerda que no tiene por quefuncionar en todos los sistemas. text-indent: 10px;text-indent Unidades CSS text-indent: 2in;Un atributo que sirve para hacer sangrado o márgenes en las páginas. Muy útil y novedosa. text-transform: none;text-transform capitalize | uppercase | lowercase | none text-transform: capitalize;Nos permite transformar el texto, haciendo que tenga la primera letra en mayúsculas de todas las palabrs, todo en mayúsculas o minúsculas. Introducción a la Ingeniería de Sistemas y Telecomunicaciones Jhon Alexander Holguín B.
  9. 9. FONDO - BACKGROUND background-color: green;Background-color Un color, con su nombre o su valor RGB background-color: #000055;Sirve para indicar el color de fondo de un elemento de la página. El nombre de la imagen con su camino relativo o background-image: url(mármol.gif) ;Background-image absoluto background-image: url(http://www.x.com/fondo.gif) Introducción a la Ingeniería de Sistemas y Telecomunicaciones Jhon Alexander Holguín B.
  10. 10. BOX - CAJA margin-left: 1cm;Margin-left Unidades CSS margin-left: 0,5in;Indicamos con este atributo el tamaño del margen a la izquierda margin-right: 5%;Margin-right Unidades CSS margin-right: 1in;Se utiliza para definir el tamaño del margen a la derecha margin-top: 0px;Margin-top Unidades CSS margin-top: 10px;Indicamos con este atributo el tamaño del margen arriba de la página margin-bottom: 0pt;Margin-bottom Unidades CSS margin-top: 1px;Con el se indica el tamaño del margen en la parte de abajo de la página padding-left: 0.5in;Padding-? Unidades CSS padding-left: 1px;Indica el espacio insertado, por la izquierda, entre el borde del elemento-continente y el contenido de este. Es parecido a el atributo cellpadding de las tablas.El espacio insertado tiene el mismo fondo que el fondo del elemento-continente. border-color: red;Border-color color RGB y nombre de color border-color: #ffccff;Para indicar el color del borde del elemento de la página al que se lo aplicamos. Se puede poner colores por separado con los atributos border-top-color, border-right-color, border-bottom-color, border-left-color. border-style: solid;Border-style none | dotted | solid | double | groove | ridge | inset | outset border-style: double;El estilo del borde, los valores significan: none=ningun borde, dotted=punteado (no parece funcionar), solid=solido, double=doble borde, y desde groove hasta outset son bordes con variosefectos 3D. border-width: 10px;border-width Unidades CSS border-width: 0.5in;El tamaño del borde del elemento al que lo aplicamos.Para ver otros ejemlos de Box pulsar aquífloat none | left | right float: right;Sirve para alinear un elemento a la izquierda o la derecha haciendo que el texto se agrupe alrededor de dicho elemento. Igual que el atributo align en imagenes en sus valores right y left. Introducción a la Ingeniería de Sistemas y Telecomunicaciones Jhon Alexander Holguín B.

×