SlideShare una empresa de Scribd logo
1 de 13
UNIVERSIDAD CENTRAL DEL ECUADOR
      FACULTAD DE FILOSOFÍA
   ESCUELA DE CIENCIAS EXACTAS
PROGRAMACION VI

DISEÑO DE PAGINAS WEB
¿QUÉ ES HTML?
• HTML es un lenguaje de hipertexto, se dedica a visualizar
  objetos, es vinculada a paginas web.
   En HTML existen directivas (comandos) como son:
• DIRECTIVAS ABIERTAS: estas directivas abiertas se las
  coloca una sola vez en el programa .
   Ejemplo:
   <BR>
    <BODY BACKGROUND>
• DIRECTIVAS CERRADAS: estos comandos cerrados se los
  escribe al comienzo del programa y luego debemos cerrar la
  directiva.
   Ejemplo:
   <CENTER> </CENTER>
   <TABLE BORDER = “ ”> </TABLE>
ESTRUCTURA DE HTML
• <HTML>          INICIO DEL PROGRAMA
• <HEAD>          ENCABEZADO DEL PROGRAMA
• <TITLE>         TITULO DE LA PAGINA
• <META>          INFORMACION SOBRE LA PAGINA
• </HEAD>         CIERRA EL ENCABEZADO DE LA
  PAGINA
• <BODY>          CUERPO DE LA PAGINA


• </BODY>
• </HTML>
DIRECTIVAS DE HTML
       DIRECTIVAS          TIPO              FUNCION

<BR>                      ABIERTA   Da un salto de línea

<P>    </P>               CERRADA   Elabora párrafos

<B>    </B>               CERRADA   Pone en negrita al texto

<I>    </I>               CERRADA   Pone en cursiva al texto

<U>    </U>               CERRADA   Subraya al texto

<S>    </S>               CERRADA   Tacha el texto

<CENTER>      </CENTER>   CERRADA   Centra texto o imágenes
DIRECTIVAS           TIPO                FUNCION

<LI>                         Abierta   Crea viñetas

<OL TYPE = “ ”> </OL>       Cerrado    Crea viñetas según el tipo
                                       que escribas

<HR>                        ABIERTA    Crea una línea horizontal

<MARQUEE> </MARQUEE>        CERRADA    Da movimiento a imágenes y
                                       texto

<FONT FACE =“ “> </FONT>    CERRADA    Da al texto el tipo de letra
                                       requerido

<FONT COLOR =“ “> </FONT>   CERRADA    Da color al texto


<FONT SIZE =“ “> </FONT>    CERRADA    Da tamaño al texto
DIRECTIVAS              TIPO                FUNCION


<BODY BACKGRO = “ ”></BODY >   CERRADO   Coloca imágenes en el fondo


<IMG SRC = “ ”>                ABIERTA   Inserta imágenes en la pagina


<P ALIGN = “ ”> </P>           CERRADO   Alinea al texto o cualquier tipo de
                                         dato (derecha, izquierda, centro)

<TABLE BORDER> </TABLE>        CERRADO   Crea tablas dentro de la pagina


<TR> </TR>                     CERRADO   Crea filas dentro de la tabla


<TD COLSPAN = “ ”> </TD>       CERRADO   Une las columnas según el tipo


<TD ROWSPAN = “ ”> </TD>       CERRADO   Une las filas según el tipo
DIRECTIVAS              TIPO               FUNCION


<EMBED SRC = “   ”>               ABIERTA   Coloca videos en la pagina


<BG SOUND SRC = TEXTO.LOOP = 1>   ABIERTA   Agrega sonido a la pagina



<BODY BGCOLOR =“ ”> </BODY >      CERRADO   Da color al fondo de la pagina
EJEMPLOS DE HTML
Ejemplo de viñetas código HTML:
Ejemplo de como agregar videos en html:
GUIA DE HTML

Más contenido relacionado

La actualidad más candente (15)

Semana 3 Maquetación CSS
Semana 3   Maquetación CSSSemana 3   Maquetación CSS
Semana 3 Maquetación CSS
 
Trabajo para-blog
Trabajo para-blogTrabajo para-blog
Trabajo para-blog
 
Presentación
PresentaciónPresentación
Presentación
 
Elementos básicos y estructura de una página web
Elementos básicos y estructura de una página webElementos básicos y estructura de una página web
Elementos básicos y estructura de una página web
 
Actividad 3 laboratorio de computacion iii jose daniel monarrez rodriguez
Actividad 3 laboratorio de computacion iii jose daniel monarrez rodriguezActividad 3 laboratorio de computacion iii jose daniel monarrez rodriguez
Actividad 3 laboratorio de computacion iii jose daniel monarrez rodriguez
 
Manual de usuario de power point
Manual de usuario de power pointManual de usuario de power point
Manual de usuario de power point
 
Sesión 09 ci
Sesión 09 ci Sesión 09 ci
Sesión 09 ci
 
Prueba
PruebaPrueba
Prueba
 
sesion 9
sesion 9sesion 9
sesion 9
 
Prueba
PruebaPrueba
Prueba
 
Estudio de mercado
Estudio de mercado Estudio de mercado
Estudio de mercado
 
Pagina Web III
Pagina Web IIIPagina Web III
Pagina Web III
 
Imagenes graficas
Imagenes graficasImagenes graficas
Imagenes graficas
 
Una Página WEB
Una Página WEBUna Página WEB
Una Página WEB
 
Creacion de diapositivas con efectos especiales en power point
Creacion de diapositivas con efectos especiales en power pointCreacion de diapositivas con efectos especiales en power point
Creacion de diapositivas con efectos especiales en power point
 

Destacado

MANUAL BASICO EN HTML
MANUAL BASICO EN HTMLMANUAL BASICO EN HTML
MANUAL BASICO EN HTML
princesyadi27
 
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
 

Destacado (20)

MANUAL HTML BASICO.
MANUAL HTML BASICO.MANUAL HTML BASICO.
MANUAL HTML BASICO.
 
manual de html
manual de htmlmanual de html
manual de html
 
HTML5
HTML5HTML5
HTML5
 
Cuestionario Preparatorio Html, css y html 5
Cuestionario Preparatorio Html, css y html 5Cuestionario Preparatorio Html, css y html 5
Cuestionario Preparatorio Html, css y html 5
 
Apuntes de XML
Apuntes de XMLApuntes de XML
Apuntes de XML
 
Apuntes de DTD
Apuntes de DTDApuntes de DTD
Apuntes de DTD
 
Chuleta de DTD
Chuleta de DTDChuleta de DTD
Chuleta de DTD
 
Tutorial de DTD en PDF
Tutorial de DTD en PDFTutorial de DTD en PDF
Tutorial de DTD en PDF
 
Chuleta de XML
Chuleta de XMLChuleta de XML
Chuleta de XML
 
MANUAL BASICO EN HTML
MANUAL BASICO EN HTMLMANUAL BASICO EN HTML
MANUAL BASICO EN HTML
 
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
 
Guia html
Guia htmlGuia html
Guia html
 
Nociones Básicas del Html
Nociones Básicas del HtmlNociones Básicas del Html
Nociones Básicas del Html
 
Paginas web 1
Paginas web 1Paginas web 1
Paginas web 1
 
El corel draw
El corel drawEl corel draw
El corel draw
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Test de XML
Test de XMLTest de XML
Test de XML
 
Ficha de codigos HTML
Ficha de codigos HTMLFicha de codigos HTML
Ficha de codigos HTML
 
Apuntes de HTML
Apuntes de HTMLApuntes de HTML
Apuntes de HTML
 

Similar a GUIA DE HTML (20)

Programación basica en html
Programación basica en htmlProgramación basica en html
Programación basica en html
 
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
 
Deber k riss
Deber k rissDeber k riss
Deber k riss
 
Deber vero
Deber veroDeber vero
Deber vero
 
Comandos de html
Comandos de htmlComandos de html
Comandos de html
 
Manual de html
Manual de htmlManual de html
Manual de html
 
HTML
HTMLHTML
HTML
 
presentacion html
presentacion htmlpresentacion html
presentacion html
 
Que es html
Que es htmlQue es html
Que es html
 
Estructura html
Estructura htmlEstructura html
Estructura html
 
Manual html1 (Informatica Aplia Educa)
Manual html1 (Informatica Aplia Educa)Manual html1 (Informatica Aplia Educa)
Manual html1 (Informatica Aplia Educa)
 
comandos de pagina web
comandos de pagina webcomandos de pagina web
comandos de pagina web
 
Prsentacion
Prsentacion Prsentacion
Prsentacion
 
Introducción a Html
Introducción a HtmlIntroducción a Html
Introducción a Html
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Html
HtmlHtml
Html
 
[modo de compatibilidad] HTML
[modo de compatibilidad] HTML[modo de compatibilidad] HTML
[modo de compatibilidad] HTML
 
Pamela montece html, css, codigos
Pamela montece html, css, codigosPamela montece html, css, codigos
Pamela montece html, css, codigos
 
Elianyyyyy
ElianyyyyyElianyyyyy
Elianyyyyy
 

Último

TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
jlorentemartos
 
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxConcepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Fernando Solis
 
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docxTALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
NadiaMartnez11
 

Último (20)

Sesión de clase APC: Los dos testigos.pdf
Sesión de clase APC: Los dos testigos.pdfSesión de clase APC: Los dos testigos.pdf
Sesión de clase APC: Los dos testigos.pdf
 
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxPLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
 
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
 
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptPINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
 
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
 
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxConcepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptx
 
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfFeliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
 
Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024
 
Supuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docxSupuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docx
 
Tema 17. Biología de los microorganismos 2024
Tema 17. Biología de los microorganismos 2024Tema 17. Biología de los microorganismos 2024
Tema 17. Biología de los microorganismos 2024
 
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLAACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
 
activ4-bloque4 transversal doctorado.pdf
activ4-bloque4 transversal doctorado.pdfactiv4-bloque4 transversal doctorado.pdf
activ4-bloque4 transversal doctorado.pdf
 
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICABIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
 
Infografía EE con pie del 2023 (3)-1.pdf
Infografía EE con pie del 2023 (3)-1.pdfInfografía EE con pie del 2023 (3)-1.pdf
Infografía EE con pie del 2023 (3)-1.pdf
 
Revista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdfRevista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdf
 
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADOTIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
 
Power Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptxPower Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptx
 
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docxTALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
 
La Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración AmbientalLa Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración Ambiental
 

GUIA DE HTML

  • 1. UNIVERSIDAD CENTRAL DEL ECUADOR FACULTAD DE FILOSOFÍA ESCUELA DE CIENCIAS EXACTAS
  • 3. ¿QUÉ ES HTML? • HTML es un lenguaje de hipertexto, se dedica a visualizar objetos, es vinculada a paginas web. En HTML existen directivas (comandos) como son: • DIRECTIVAS ABIERTAS: estas directivas abiertas se las coloca una sola vez en el programa . Ejemplo: <BR> <BODY BACKGROUND> • DIRECTIVAS CERRADAS: estos comandos cerrados se los escribe al comienzo del programa y luego debemos cerrar la directiva. Ejemplo: <CENTER> </CENTER> <TABLE BORDER = “ ”> </TABLE>
  • 4. ESTRUCTURA DE HTML • <HTML> INICIO DEL PROGRAMA • <HEAD> ENCABEZADO DEL PROGRAMA • <TITLE> TITULO DE LA PAGINA • <META> INFORMACION SOBRE LA PAGINA • </HEAD> CIERRA EL ENCABEZADO DE LA PAGINA • <BODY> CUERPO DE LA PAGINA • </BODY> • </HTML>
  • 5. DIRECTIVAS DE HTML DIRECTIVAS TIPO FUNCION <BR> ABIERTA Da un salto de línea <P> </P> CERRADA Elabora párrafos <B> </B> CERRADA Pone en negrita al texto <I> </I> CERRADA Pone en cursiva al texto <U> </U> CERRADA Subraya al texto <S> </S> CERRADA Tacha el texto <CENTER> </CENTER> CERRADA Centra texto o imágenes
  • 6. DIRECTIVAS TIPO FUNCION <LI> Abierta Crea viñetas <OL TYPE = “ ”> </OL> Cerrado Crea viñetas según el tipo que escribas <HR> ABIERTA Crea una línea horizontal <MARQUEE> </MARQUEE> CERRADA Da movimiento a imágenes y texto <FONT FACE =“ “> </FONT> CERRADA Da al texto el tipo de letra requerido <FONT COLOR =“ “> </FONT> CERRADA Da color al texto <FONT SIZE =“ “> </FONT> CERRADA Da tamaño al texto
  • 7. DIRECTIVAS TIPO FUNCION <BODY BACKGRO = “ ”></BODY > CERRADO Coloca imágenes en el fondo <IMG SRC = “ ”> ABIERTA Inserta imágenes en la pagina <P ALIGN = “ ”> </P> CERRADO Alinea al texto o cualquier tipo de dato (derecha, izquierda, centro) <TABLE BORDER> </TABLE> CERRADO Crea tablas dentro de la pagina <TR> </TR> CERRADO Crea filas dentro de la tabla <TD COLSPAN = “ ”> </TD> CERRADO Une las columnas según el tipo <TD ROWSPAN = “ ”> </TD> CERRADO Une las filas según el tipo
  • 8. DIRECTIVAS TIPO FUNCION <EMBED SRC = “ ”> ABIERTA Coloca videos en la pagina <BG SOUND SRC = TEXTO.LOOP = 1> ABIERTA Agrega sonido a la pagina <BODY BGCOLOR =“ ”> </BODY > CERRADO Da color al fondo de la pagina
  • 10. Ejemplo de viñetas código HTML:
  • 11.
  • 12. Ejemplo de como agregar videos en html: