SlideShare una empresa de Scribd logo
1 de 17
HTML Son las iniciales de Hiper Text
Markup Language. Es un conjunto o serie
de etiquetas incluidas en archivos de
texto que definen la estructura de un
documento WWW y sus vínculos con
otros documentos.
Los navegadores WWW leen estos
archivos de texto e interpretan esas
etiquetas para determinar como desplegar
la página web.
Es usado para describir la estructura y el
contenido en forma de texto, así como
para complementar el texto con objetos
tales como imágenes .
El código HTML se escribe en forma de
etiquetas, rodeadas por corchetes
angulares (<>).
Una página web esta compuesta de 2 partes: el
encabezamiento y el cuerpo de la página, existen tres
etiquetas fundamentales, en el archivo HTML de manera
obligatoria que son:
<html> </html> Indica al navegador que el documento
texto que esta leyendo es un documento se abre al inicio del
archivo y se cierra al final del mismo.
<head> </head> Acá se detalla el encabezado de la página
WEB. Esta etiqueta se abre luego de <html>.
<title> </title> Titulo de la ventana.
<body> </body> Cuerpo de la página donde se despliega el
contenido global. Esta etiqueta se abre luego de cerrar el
encabezamiento con </head> y se extiende hasta el
final de la página, cerrándose antes de </HTML>.
CODIFICACIÒN:
<HTML>
    <HEAD>
       <TITLE>
       EJERCICIO N1
       </TITLE>
     </HEAD>
<BODY>
    <BR>
     YADIRA HARO
</BODY>
</HTML>
DIRECTIVAS    TIPOS       FUNCION
   <BR>      ABIERTA   SALTO DE LINEA
 <CENTER>    CERRADA     CENTRADO
                          ELABORA
   <P>       CERRADA     PARRAFOS
   <B>       CERRADA      NEGRITA
<STRONG>     CERRADA      NEGRITA
   <I>       CERRADA      CURSIVA
   <U>       CERRADA    SUBRAYADO
DIRECTIVAS    TIPOS        FUNCION
   <S>       CERRADA       TACHADO
 <H1,H6>     CERRADA   TAMAÑO DE LETRA
<MARQUEE>    CERRADA     MOVIMIENTO
  <HR>       ABIERTA      LINEAS RECTAS
                          HORIZONTALES
  <OL>       CERRADA        CREA LISTAS
                           NUMERADAS
  <UL>       CERRADA   LISTAS CON VIÑETAS
   <LI>      ABIERTA    CREAR UNA LISTA
DIRECTIVAS     TIPOS             FUNCION
  <TABLE>      CERRADA        DEFINE UNA TABLA

    <a>        CERRADA       ELABORA PARRAFOS

    <TR>       ABIERTA        FILA DE UNA TABLA

    <TD>       CERRADA       CELDA DE UNA TABLA

                           PARA COLOCAR EL ESTILO
  <STYLE>      CERRADA      INTERNO DE LA PÁGINA.

                           ESTABLECE EL ESTILO DEL
                         BORDE DE UN ELEMENTO. ESTA
BORDER-STYLE   ABIERTA    DEBE SER ESPECIFICADA PARA
                           QUE EL BORDE SEA VISIBLE.
ETIQUETA BODY                    FUNCION

  BGCOLOR       Define el color de fondo de la página

BORDERCOLOR Define el color del borde

     TEXT       Define el color del texto de la página

BACKGROUND      Define el archivo gráfico que será desplegado
                como fondo

  BGSOUND       Define el archivo de audio que se tocará en la
                página.

    EMBED       Define el archivo de video que se visualizara
                en la página
ETIQUETA                    FUNCION
  BODY
  IMG      Requiere del atributo src, que indica la ruta en
           la que se encuentra la imagen.
   SRC     Indica dónde está el fichero a reproducir.

  LOOP     Permite hacer repeticiones.

 HEIGHT    Define la altura de la tabla en pixels o
           porcentajes.

 WIDTH     Define la anchura de la tabla en pixels       o
           porcentajes .

 P ALING   Alinea horizontalmente la tabla con respecto a
           su entorno
http://www.f lashvortex.com
Flashvortex es una elemento muy decorativo donde
podremos encontrar menús en f lash, banners, botones y
texto animado que podremos agregar al blog o pagina
web, y que además, nos permite personalizar los
elementos con animación f lash.
Còdigo
<scriptsrc="http://h1.f lashvortex.com/display.php?id=2
_1304693351_44505_305_18719_405_39_8_1_45"type="tex
t/javascript"></script>
Las tablas nos permiten representar y ordenar
cualquier elemento de nuestra presentación en
diferentes filas y columnas de modo que podamos
resumir grandes cantidades de información de una
manera que puede representarse rápida y fácilmente.
Cada fila de la tabla se indica mediante las
<tr>.....</tr>. Las tags <th> y <td> con sus
correspondientes tags de cierre, para indicar las filas
individuales dentro de cada fila. Las tags
<th>.....</th> indican que se trata de celdas que
sirven como encabezado de tabla y suelen
visualizarse en negrita. Las tags <td>.....</td>
indican que se trata de celdas comunes.
CÒDIGO:
<table border= 4>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>
Los atributos COLSPAN y ROWSPAN nos
permiten crear celdas que se extiendan varias
columnas o varias filas.
<table width="100%" border="1" cellpadding="0" cellspacing="0"
bordercolor="#000000">
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
<th>Encabezado 3</th>
</tr>
<tr>
<td rowspan="2" valign="middle" align="left">Este texto está alineado al
centro verticalmente y a la izquierda horizontalmente</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
</table>
FIN DE LAS
PRESENTACIONES




   GRACIAS

Más contenido relacionado

La actualidad más candente

HTML: Una introducción.
HTML: Una introducción.HTML: Una introducción.
HTML: Una introducción.
Ramón RS
 
Listado de etiquetas y atributos html
Listado de etiquetas y atributos htmlListado de etiquetas y atributos html
Listado de etiquetas y atributos html
julyovalle
 

La actualidad más candente (19)

HTML 2011
HTML 2011HTML 2011
HTML 2011
 
El lenguaje html
El lenguaje htmlEl lenguaje html
El lenguaje html
 
Html, Css y JavaScript
Html, Css y JavaScriptHtml, Css y JavaScript
Html, Css y JavaScript
 
HTML
HTMLHTML
HTML
 
Manual intencivo de htlm
Manual intencivo de htlmManual intencivo de htlm
Manual intencivo de htlm
 
Html5
Html5Html5
Html5
 
Unidad # 1
Unidad # 1Unidad # 1
Unidad # 1
 
Introduccion a Lenguaje HTML, Programacion Web
Introduccion a Lenguaje HTML, Programacion WebIntroduccion a Lenguaje HTML, Programacion Web
Introduccion a Lenguaje HTML, Programacion Web
 
HTML: Una introducción.
HTML: Una introducción.HTML: Una introducción.
HTML: Una introducción.
 
05 Introduccion a HTML
05 Introduccion a HTML05 Introduccion a HTML
05 Introduccion a HTML
 
Etiquetas head y body
Etiquetas head y bodyEtiquetas head y body
Etiquetas head y body
 
Listado de etiquetas y atributos html
Listado de etiquetas y atributos htmlListado de etiquetas y atributos html
Listado de etiquetas y atributos html
 
Taller de HTML
Taller de HTMLTaller de HTML
Taller de HTML
 
Html
HtmlHtml
Html
 
Conociendo mas sobre HTLM
Conociendo mas sobre HTLMConociendo mas sobre HTLM
Conociendo mas sobre HTLM
 
Curso HTML y CSS, parte 2
Curso HTML y CSS, parte 2Curso HTML y CSS, parte 2
Curso HTML y CSS, parte 2
 
Creacion y publicacion de paginas Web
Creacion y publicacion de paginas WebCreacion y publicacion de paginas Web
Creacion y publicacion de paginas Web
 
Presentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTMLPresentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTML
 
Definición de html
Definición de htmlDefinición de html
Definición de html
 

Destacado

Guia de html 3 y 4 periodo
Guia de html 3 y 4  periodoGuia de html 3 y 4  periodo
Guia de html 3 y 4 periodo
Macepla822
 
Nociones Básicas del Html
Nociones Básicas del HtmlNociones Básicas del Html
Nociones Básicas del Html
Henry Valle
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
up
 
Guia de aprendizaje 01 generalidades sobre html
Guia de aprendizaje 01   generalidades sobre htmlGuia de aprendizaje 01   generalidades sobre html
Guia de aprendizaje 01 generalidades sobre html
Ing Yeison Fabian
 
Etiquetas Diapositivas.
Etiquetas Diapositivas.Etiquetas Diapositivas.
Etiquetas Diapositivas.
asdi
 

Destacado (20)

Guia de html 3 y 4 periodo
Guia de html 3 y 4  periodoGuia de html 3 y 4  periodo
Guia de html 3 y 4 periodo
 
Guia 01 html
Guia 01 htmlGuia 01 html
Guia 01 html
 
Paginas web 1
Paginas web 1Paginas web 1
Paginas web 1
 
Nociones Básicas del Html
Nociones Básicas del HtmlNociones Básicas del Html
Nociones Básicas del Html
 
Guia html
Guia htmlGuia html
Guia html
 
El corel draw
El corel drawEl corel draw
El corel draw
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
GUIA DE HTML
GUIA DE HTMLGUIA DE HTML
GUIA DE HTML
 
Guía Completa de CSS3
Guía Completa de CSS3Guía Completa de CSS3
Guía Completa de CSS3
 
Guia de aprendizaje 01 generalidades sobre html
Guia de aprendizaje 01   generalidades sobre htmlGuia de aprendizaje 01   generalidades sobre html
Guia de aprendizaje 01 generalidades sobre html
 
Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTML
 
Guía html5
Guía html5Guía html5
Guía html5
 
Corel draw x5
Corel draw x5Corel draw x5
Corel draw x5
 
Comandos de Corel DRAW
Comandos de Corel DRAWComandos de Corel DRAW
Comandos de Corel DRAW
 
Manual de corel x5
Manual de corel x5Manual de corel x5
Manual de corel x5
 
Presentacion de etiquetas "HTML"
Presentacion de etiquetas "HTML"Presentacion de etiquetas "HTML"
Presentacion de etiquetas "HTML"
 
Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTML
 
Entorno del coreldraw
Entorno del coreldrawEntorno del coreldraw
Entorno del coreldraw
 
Guia sobre corel draw x5
Guia sobre corel draw x5Guia sobre corel draw x5
Guia sobre corel draw x5
 
Etiquetas Diapositivas.
Etiquetas Diapositivas.Etiquetas Diapositivas.
Etiquetas Diapositivas.
 

Similar a MANUAL BASICO EN HTML (20)

Html
HtmlHtml
Html
 
Que es html
Que es htmlQue es html
Que es html
 
HTML
HTMLHTML
HTML
 
Introducción a Html
Introducción a HtmlIntroducción a Html
Introducción a Html
 
Unidad # 1
Unidad # 1Unidad # 1
Unidad # 1
 
Comandos html
Comandos htmlComandos html
Comandos html
 
comandos de pagina web
comandos de pagina webcomandos de pagina web
comandos de pagina web
 
Ppp jjj 1002
Ppp jjj 1002Ppp jjj 1002
Ppp jjj 1002
 
Jillian
JillianJillian
Jillian
 
Deber k riss
Deber k rissDeber k riss
Deber k riss
 
Deber vero
Deber veroDeber vero
Deber vero
 
Elianyyyyy
ElianyyyyyElianyyyyy
Elianyyyyy
 
Elianyyyyy
ElianyyyyyElianyyyyy
Elianyyyyy
 
Guia rapida html
Guia rapida htmlGuia rapida html
Guia rapida html
 
Clase 1 - Comandos HTML.PDF
Clase 1 - Comandos HTML.PDFClase 1 - Comandos HTML.PDF
Clase 1 - Comandos HTML.PDF
 
Programación avamzada 1
Programación avamzada 1Programación avamzada 1
Programación avamzada 1
 
Páginas html
Páginas htmlPáginas html
Páginas html
 
Páginas web con html
Páginas web con htmlPáginas web con html
Páginas web con html
 
HTML
HTMLHTML
HTML
 
Diapositivashtml 091118065750 Phpapp02
Diapositivashtml 091118065750 Phpapp02Diapositivashtml 091118065750 Phpapp02
Diapositivashtml 091118065750 Phpapp02
 

MANUAL BASICO EN HTML

  • 1.
  • 2. HTML Son las iniciales de Hiper Text Markup Language. Es un conjunto o serie de etiquetas incluidas en archivos de texto que definen la estructura de un documento WWW y sus vínculos con otros documentos. Los navegadores WWW leen estos archivos de texto e interpretan esas etiquetas para determinar como desplegar la página web.
  • 3. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes . El código HTML se escribe en forma de etiquetas, rodeadas por corchetes angulares (<>).
  • 4. Una página web esta compuesta de 2 partes: el encabezamiento y el cuerpo de la página, existen tres etiquetas fundamentales, en el archivo HTML de manera obligatoria que son: <html> </html> Indica al navegador que el documento texto que esta leyendo es un documento se abre al inicio del archivo y se cierra al final del mismo. <head> </head> Acá se detalla el encabezado de la página WEB. Esta etiqueta se abre luego de <html>. <title> </title> Titulo de la ventana. <body> </body> Cuerpo de la página donde se despliega el contenido global. Esta etiqueta se abre luego de cerrar el encabezamiento con </head> y se extiende hasta el final de la página, cerrándose antes de </HTML>.
  • 5. CODIFICACIÒN: <HTML> <HEAD> <TITLE> EJERCICIO N1 </TITLE> </HEAD> <BODY> <BR> YADIRA HARO </BODY> </HTML>
  • 6. DIRECTIVAS TIPOS FUNCION <BR> ABIERTA SALTO DE LINEA <CENTER> CERRADA CENTRADO ELABORA <P> CERRADA PARRAFOS <B> CERRADA NEGRITA <STRONG> CERRADA NEGRITA <I> CERRADA CURSIVA <U> CERRADA SUBRAYADO
  • 7. DIRECTIVAS TIPOS FUNCION <S> CERRADA TACHADO <H1,H6> CERRADA TAMAÑO DE LETRA <MARQUEE> CERRADA MOVIMIENTO <HR> ABIERTA LINEAS RECTAS HORIZONTALES <OL> CERRADA CREA LISTAS NUMERADAS <UL> CERRADA LISTAS CON VIÑETAS <LI> ABIERTA CREAR UNA LISTA
  • 8. DIRECTIVAS TIPOS FUNCION <TABLE> CERRADA DEFINE UNA TABLA <a> CERRADA ELABORA PARRAFOS <TR> ABIERTA FILA DE UNA TABLA <TD> CERRADA CELDA DE UNA TABLA PARA COLOCAR EL ESTILO <STYLE> CERRADA INTERNO DE LA PÁGINA. ESTABLECE EL ESTILO DEL BORDE DE UN ELEMENTO. ESTA BORDER-STYLE ABIERTA DEBE SER ESPECIFICADA PARA QUE EL BORDE SEA VISIBLE.
  • 9. ETIQUETA BODY FUNCION BGCOLOR Define el color de fondo de la página BORDERCOLOR Define el color del borde TEXT Define el color del texto de la página BACKGROUND Define el archivo gráfico que será desplegado como fondo BGSOUND Define el archivo de audio que se tocará en la página. EMBED Define el archivo de video que se visualizara en la página
  • 10. ETIQUETA FUNCION BODY IMG Requiere del atributo src, que indica la ruta en la que se encuentra la imagen. SRC Indica dónde está el fichero a reproducir. LOOP Permite hacer repeticiones. HEIGHT Define la altura de la tabla en pixels o porcentajes. WIDTH Define la anchura de la tabla en pixels o porcentajes . P ALING Alinea horizontalmente la tabla con respecto a su entorno
  • 11.
  • 12. http://www.f lashvortex.com Flashvortex es una elemento muy decorativo donde podremos encontrar menús en f lash, banners, botones y texto animado que podremos agregar al blog o pagina web, y que además, nos permite personalizar los elementos con animación f lash. Còdigo <scriptsrc="http://h1.f lashvortex.com/display.php?id=2 _1304693351_44505_305_18719_405_39_8_1_45"type="tex t/javascript"></script>
  • 13. Las tablas nos permiten representar y ordenar cualquier elemento de nuestra presentación en diferentes filas y columnas de modo que podamos resumir grandes cantidades de información de una manera que puede representarse rápida y fácilmente. Cada fila de la tabla se indica mediante las <tr>.....</tr>. Las tags <th> y <td> con sus correspondientes tags de cierre, para indicar las filas individuales dentro de cada fila. Las tags <th>.....</th> indican que se trata de celdas que sirven como encabezado de tabla y suelen visualizarse en negrita. Las tags <td>.....</td> indican que se trata de celdas comunes.
  • 14. CÒDIGO: <table border= 4> <tr> <td>Celda 1</td> <td>Celda 2</td> <td>Celda 3</td> </tr> <tr> <td>Celda 4</td> <td>Celda 5</td> <td>Celda 6</td> </tr> </table>
  • 15. Los atributos COLSPAN y ROWSPAN nos permiten crear celdas que se extiendan varias columnas o varias filas.
  • 16. <table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000"> <tr> <th>Encabezado 1</th> <th>Encabezado 2</th> <th>Encabezado 3</th> </tr> <tr> <td rowspan="2" valign="middle" align="left">Este texto está alineado al centro verticalmente y a la izquierda horizontalmente</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td colspan="2">&nbsp;</td> </tr> </table>