SlideShare una empresa de Scribd logo
1 de 21
LENGUAJE DE
PROGRAMACIÓN DE
PÁGINAS WEB


                  1
ÍNDICE:
   INTRODUCCIÓN
   ¿QUÉ ES HTML?
   CREACIÓN DE PÁGINAS WEB CON HTML SENCILLO
       ESTRUCTURA BÁSICA DEL HTML
       ESCRIBIR TÍTULOS
       ETIQUETAS DE PÁRRAFOS
       ETIQUETAS META
       LENGUAJE SCRIPT
       LISTAS
       INSERCCIÓN DE IMÁGENES
       HIPERENLACES ,HYPERLINKS…
       TABLAS
       SONIDO
   CONCLUSIÓN
   BIBLIOGRAFÍA                            2
INTRODUCCIÓN
El HTML no es más que una aplicación del SGML
   (Standard Generalized Markup Language), un sistema
   para definir tipos de documentos estructurados y
   lenguajes de marcas para representar esos mismos
   documentos. El término HTML se suele referir a ambas
   cosas, tanto al tipo de documento como al lenguaje de
   marcas.

El lenguaje que utilizan las computadoras que están
  conectadas a Internet es HTML.


                                                           3
¿QUÉ ES HTML?
Hyper Text Markup Language (Lenguaje de marcación de
Hipertexto) es el lenguaje de marcas de texto utilizado normalmente
en la www (World Wide Web).
El concepto de Hipertexto (Conocido también como link) permite
conectar dos elementos entre si y el SGML (Lenguaje Estándar de
Marcación General) el cual sirve para colocar etiquetas o marcas en
un texto que indique como debe verse. HTML no es propiamente un
lenguaje de programación como Visual Basic, etc., sino un sistema
de etiquetas. El entorno para trabajar HTML es simplemente un
procesador de texto, como el que ofrecen los sistemas operativos
Windows (Bloc de notas), UNIX (el editor vi o ed) o el que ofrece
MS Office (Word). El conjunto de etiquetas que se creen, se deben
guardar con la extensión .htm o .html
Estos documentos pueden ser mostrados por los visores o
"browsers" de paginas Web en Internet, como Microsoft Internet
Explorer.

                                                                  4
Creación de páginas web con
lenguaje HTML
   Se pueden utilizar varios programas especializados
   Otra forma de diseñar un archivo .html, es copiar
    todo en el Bloc de Notas del WindowsEstructura de
    los documentos de HTML

                         PROGRAMAS
                        ESPECIALIZADOS
                           (ejemplos)




                                    Macromedia
            Microsoft Front Page
                                   Dreamweaver 3.


                                                         5
ESTRUCTURA BÁSICA DEL
HTML
   Toda página Web debe contener la siguiente estructura :
   <HTML> La etiqueta le indica al visualizador que va a
    comenzar a leer un documento HTML y se debe colocar
    siempre al comienzo y al fin del texto.
   <HEAD> Indica un encabezado .
    <TITLE></TITLE> Título
   <BODY>
    </HTML>



                                                          6
ESCRIBIR TÍTULOS
 Para escribir títulos se usa la etiqueta <Hx></Hx> en
  donde x es un número:
<h1>Titulo principal</h1>
<h2>Titulo secundario</h2>
<h3>Titulo terciario</h3>
<h4>Titulo cuarto nivel</h4>

Quedaría:
Título principal
Título secundario
Título terciario
Título cuarto nivel
                                                          7
ETIQUETAS DE PÁRRAFO
   Se utiliza la etiqueta <P> y </P>.



    Este comando es muy útil debido a que si uno escribe
    algo porque el texto siempre va a aparecer en la misma
    línea.




                                                         8
   Para alinear un párrafo se utiliza el comando <ALING> y
    </ALING>, utilizado dentro de la etiqueta <P>. Se puede
    alinear de tres formas diferentes
   <p align="left"> Párrafo... </p> Alinea a la izquierda.
    <p align="center"> Párrafo... </p> Realiza un centrado.
    <p align="right"> Párrafo... </p> Alinea a la derecha.

   Para cambiar de línea sem usa el comando: <BR>.

   Para separar un párrafo de otro: <HR>


                                                          9
ETIQUETAS PARA FORMATO DE
TEXTO
   <B> y </B> Sirve para colocar un texto en Negrita.
    <U> y < /U> Sirve para subrayar un texto
    <STRIKE> y </STRIKE> Sirve para tachar un texto.
    <STRONG> y </STRONG> Cumple la misma función que <B>
    <I> y <I> Para colocar un texto en cursiva.
    <EM>texto con énfasis</EM> texto con énfasis
    <CITE>citación</CITE> citación
    <DFN>definición</DFN> definición
    <KBD>teclado</KBD> teclado
    <SAMP>ejemplo</SAMP> ejemplo
    SIZE: Regula el tamaño de los caracteres.

   FACE: fuente (arial…)



                                                           10
   COLORES :

   <FONT> :Regula el color del texto:
    1.Especificación de los valores RGB del color deseado en forma
       hexadecimal (RGB=Red/Green/Blue, valores Rojo/Verde/Azul)
    2. Nombre del color en inglés
   <body bgcolor=#808080></body> :para el color de fondo.

  text="#número" Para el color del texto.
 link="#número" Para el color de los enlaces. vlink="#número" El
   color con que aparecerán los enlaces ya visitados.
 alink="#número" Color del enlace cuando lo pulsamos.

La combinación de números depende del color que se quiera,


                                                                     11
ETIQUETAS META
   Usadas para poner meta-información del documento.


   Indica el nombre de la persona que elabora la pagina
    WEB
    <META NAME = "keywords" content = “Ana
    Fernández">




                                                           12
LENGUAJE SCRIPT
   DEFINICIÓN:

   Un lenguaje de script es un pequeño lenguaje de programación
    cuyo código se inserta dentro del documento HTML. Este código se
    ejecuta en el navegador del usuario al cargar la página, o cuando
    sucede algo especial como puede ser el pulsar sobre un enlace.

   CARACTERÍSTICAS:

   Permiten variar dinámicamente el contenido del documento,
    modificar el comportamiento normal del navegador, validar
    formularios etc...
   Se ejecutan en el navegador del usuario y no en la máquina donde
    están alojadas.


                                                                 13
LISTAS
   Las listas pueden ser:

Lista desordenada, <UL> (Unordered List).
Lista ordenada, <OL> (Ordered List).
Lista con círculos:
<li type=circle>
Lista con cuadrados:
<li type=square>



                                            14
INSERCCIÓN DE UNA IMAGEN
   La etiqueta utilizada para agregar imágenes a una
    página Web es <IMG> , va acompañada de un atributo
    fundamental "SCR", que indica la ruta donde se
    encuentra el archivo a insertar .


   Es decir:
    <IMG SRC="lugar donde guardo la imagen">




                                                         15
HIPERENLACES,HYPERLINKS O
LINKS
   Para definir un enlace es necesario marcar con la etiqueta <a> el
    objeto del cual va a partir dicho enlace. Debe incluir :href="URL"
    para especificar el destino del enlace. Es decir, que antes del objeto
    elegido debemos abrir con <a href="URL">, y después cerrar con </
    a>.
   Ejemplo: queremos que el texto "pulse aquí para visitar tienda
    ONLIE" nos conduzca a la "home page" de la tienda onlie, debemos
    escribir en nuestro texto HTML:
    <a href="http://www.tienda.onlie/">Pulse aquí para visitar a la tienda
    onlie</a>
   Se vería : Pulse aquí para visitar a la tienda onlie

   Si queremos foto:<a href="imagen.gif">Foto</a> entonces al hacer
    clic en el texto Foto nos abrirá la imagen.gif.



                                                                       16
TABLAS
Las tablas son posiblemente la manera más clara de organizar la información.
También es el modo más adecuado de maquetar texto y gráficos de una
manera algo más controlada que con los parámetros ALIGN.

Las tablas se definen de la siguiente manera. Primero, las características de la
tabla, luego las de cada fila y dentro de ésta, cada celda. Así sería un ejemplo
de tabla:

                          <TABLE>
                          <TR>
                          <TD>1,1</TD>
                          <TD>1,2</TD>
                          <TD>1,3</TD>
                          </TR> <TR>
                          <TD>2,1</TD>
                          <TD>2,2</TD>
                          </TR>
                          </TABLE>
                                                                         17
Estas son las cosas que podremos cambiar
     con los atributos de TABLE:
BORDER
Especifica el grosor del borde que se dibujará alrededor
de las celdas. Por defecto es cero, lo que significa que no
dibujará borde alguno.
CELLSPACING
Define el número de pixeles que separarán las celdas.
CELLPADDING
Especifica el número de pixeles que habrá entre el borde
de una celda y su contenido.
WIDTH
Especifica la anchura de la tabla. Puede estar tanto en
pixeles como en porcentaje de la anchura total disponible
para él (pondremos "100%" si queremos que ocupe todo
el ancho de la ventana del navegador).
ALIGN
Alinea la tabla a izquierda (LEFT), derecha (RIGHT) o
centro (CENTER).
                                                              18
SONIDO
   Formatos                             WAV y MID.

   Otros necesitan : plug-in o Real Audio para los archivos RA.
   ModPlug para los MOD y derivados.

   Sonido activado por el usuario

    La manera más sencilla de incluir sonidos es dejando al usuario la
    decisión de escucharlos o no. Para hacerlo incluiremos el sonido en
    el parámetro HREF de un enlace, como si fuera una página HTML:

    Sonido de fondo

   En Explorer, desde la versión 2.0, se pueden incluir fondos sonoros
    utilizando la etiqueta BGSOUND :

    <BGSOUND SRC="musica.mid">
                                                                     19
CONCLUSIÓN
Si no hubiera HTML aun seguiríamos con el antiguo FTP
mandándonos o bajando archivos que a veces ni sabíamos lo que
eran ni lo que contenían, sin poder visualizarlo antes. El lenguaje
de HTML fue un gran avance para el mundo ya que permite a las
personas crear sus propias páginas web de cualquier tipo de
contenido para mostrárselas al resto de los países por medio de
internet.
Con el HTML se logró un gran movimiento económico ya que
muchas empresan unan la red para publicar , ofrecer y vender sus
productos .

También gracias al HTML nacieron muchas empresas que ofrecen
diversos servicios como Yahoo, HotMail, Gmail,Amazon, etc.

Todo el universo de Internet se lo debemos al HTML, ya que todas
las páginas con las que se compone la World Wide Web están
hechas con el lenguaje de programación HTML.
                                                                  20
BIBLIOGRAFÍA
   Clarín
    Guía práctica de Internet
    Buenos Aires
    Editorial Sol 90 Barcelona
    1999


   Sergio Talens Oliag - José Hernández Orallo
    HTML. Manual de Referencia
    Editorial Paraninfo
    1996
   http://www.monografias.com/

   http://www.um.es/docencia/

                                                  21

Más contenido relacionado

La actualidad más candente

La actualidad más candente (17)

Presentacion tics
Presentacion ticsPresentacion tics
Presentacion tics
 
Lenguajes del lado del Servidor y lenguajes del lado del usuario
Lenguajes del lado del Servidor y lenguajes del lado del usuarioLenguajes del lado del Servidor y lenguajes del lado del usuario
Lenguajes del lado del Servidor y lenguajes del lado del usuario
 
Lenguajes de programacion web
Lenguajes de programacion webLenguajes de programacion web
Lenguajes de programacion web
 
los diferentes lenguajes de programación para-la-web
 los diferentes lenguajes de programación para-la-web los diferentes lenguajes de programación para-la-web
los diferentes lenguajes de programación para-la-web
 
Los diferentes lenguajes de programación para la web
Los diferentes lenguajes de programación para la webLos diferentes lenguajes de programación para la web
Los diferentes lenguajes de programación para la web
 
Lenguaje de programación web
Lenguaje de programación webLenguaje de programación web
Lenguaje de programación web
 
Clase 2 Lenguajes de Programación Web
Clase 2 Lenguajes de Programación WebClase 2 Lenguajes de Programación Web
Clase 2 Lenguajes de Programación Web
 
Programacion web c5 programacion del lado servidor
Programacion web c5 programacion del lado servidorProgramacion web c5 programacion del lado servidor
Programacion web c5 programacion del lado servidor
 
Programación web
Programación web Programación web
Programación web
 
Clase 1 Introducción al Desarrollo Web
Clase 1 Introducción al Desarrollo WebClase 1 Introducción al Desarrollo Web
Clase 1 Introducción al Desarrollo Web
 
Programacion web-ian
Programacion web-ianProgramacion web-ian
Programacion web-ian
 
Tecnologías Web
Tecnologías WebTecnologías Web
Tecnologías Web
 
Programacion web
Programacion webProgramacion web
Programacion web
 
Php tema 4
Php tema 4Php tema 4
Php tema 4
 
2.2 lenguajes del lado cliente
2.2 lenguajes del lado cliente2.2 lenguajes del lado cliente
2.2 lenguajes del lado cliente
 
Programación del lado del cliente
Programación del lado del clienteProgramación del lado del cliente
Programación del lado del cliente
 
Examen 3.0
Examen 3.0Examen 3.0
Examen 3.0
 

Destacado (19)

Ventajas y desventajas av. tecnologicos
Ventajas y desventajas av. tecnologicosVentajas y desventajas av. tecnologicos
Ventajas y desventajas av. tecnologicos
 
Internet
InternetInternet
Internet
 
la historia de los navegadores
la historia de los navegadoresla historia de los navegadores
la historia de los navegadores
 
Historia del internet
Historia del internetHistoria del internet
Historia del internet
 
Historia de internet y la web
Historia de internet y la webHistoria de internet y la web
Historia de internet y la web
 
Resumen html
Resumen htmlResumen html
Resumen html
 
índice e historia del internet
índice e historia del internetíndice e historia del internet
índice e historia del internet
 
Tecnologias para el desarrollo Web
Tecnologias para el desarrollo WebTecnologias para el desarrollo Web
Tecnologias para el desarrollo Web
 
Introdución a la web: HTTP, URL y HTML
Introdución a la web: HTTP, URL y HTMLIntrodución a la web: HTTP, URL y HTML
Introdución a la web: HTTP, URL y HTML
 
Programas para crear animación
Programas para crear animación Programas para crear animación
Programas para crear animación
 
La evolución de internet
La evolución de internetLa evolución de internet
La evolución de internet
 
Software de animación
Software de animaciónSoftware de animación
Software de animación
 
Tipos de animacion
Tipos de animacionTipos de animacion
Tipos de animacion
 
Historia del internet 1958 2015
Historia del internet 1958 2015Historia del internet 1958 2015
Historia del internet 1958 2015
 
La historia de internet.
La historia de internet.La historia de internet.
La historia de internet.
 
C1 arquitectura.
C1 arquitectura.C1 arquitectura.
C1 arquitectura.
 
Ppt on internet
Ppt on internetPpt on internet
Ppt on internet
 
Diferencias entre internet y www
Diferencias entre internet y wwwDiferencias entre internet y www
Diferencias entre internet y www
 
Slideshare.Com Powerpoint
Slideshare.Com PowerpointSlideshare.Com Powerpoint
Slideshare.Com Powerpoint
 

Similar a Lenguaje de programación de páginas web

Similar a Lenguaje de programación de páginas web (20)

Diseño web guias 1-3
Diseño web guias 1-3Diseño web guias 1-3
Diseño web guias 1-3
 
Manual de-html
Manual de-htmlManual de-html
Manual de-html
 
1.3.2 elementos del lenguaje html
1.3.2 elementos del lenguaje html1.3.2 elementos del lenguaje html
1.3.2 elementos del lenguaje html
 
Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS
 
Consulta de html
Consulta de html Consulta de html
Consulta de html
 
Unidad # 1
Unidad # 1Unidad # 1
Unidad # 1
 
Unidad # 1
Unidad # 1Unidad # 1
Unidad # 1
 
Diseño de página web
Diseño de página webDiseño de página web
Diseño de página web
 
El lenguaje de programación en las páginas web
El lenguaje de programación en las páginas webEl lenguaje de programación en las páginas web
El lenguaje de programación en las páginas web
 
HTML 2011
HTML 2011HTML 2011
HTML 2011
 
Portafolio de programación Joe Holguin 2c2
Portafolio de programación Joe Holguin 2c2Portafolio de programación Joe Holguin 2c2
Portafolio de programación Joe Holguin 2c2
 
Temas de html
Temas de htmlTemas de html
Temas de html
 
Taller 1 mariana barreto
Taller 1 mariana barretoTaller 1 mariana barreto
Taller 1 mariana barreto
 
Intro html
Intro htmlIntro html
Intro html
 
Conceptos Etiquetas de HTML
Conceptos Etiquetas de HTMLConceptos Etiquetas de HTML
Conceptos Etiquetas de HTML
 
QUE SON CODIGOS HTML.docx
QUE SON CODIGOS HTML.docxQUE SON CODIGOS HTML.docx
QUE SON CODIGOS HTML.docx
 
Html
HtmlHtml
Html
 
Qué es el html
Qué es el htmlQué es el html
Qué es el html
 
Html geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldanaHtml geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldana
 
Curso htm profe. andres l
Curso htm profe.  andres lCurso htm profe.  andres l
Curso htm profe. andres l
 

Último

El uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELEl uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELmaryfer27m
 
definicion segun autores de matemáticas educativa
definicion segun autores de matemáticas  educativadefinicion segun autores de matemáticas  educativa
definicion segun autores de matemáticas educativaAdrianaMartnez618894
 
La era de la educación digital y sus desafios
La era de la educación digital y sus desafiosLa era de la educación digital y sus desafios
La era de la educación digital y sus desafiosFundación YOD YOD
 
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdfIsabellaMontaomurill
 
Presentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadPresentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadMiguelAngelVillanuev48
 
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...FacuMeza2
 
El uso de las tic en la vida ,lo importante que son
El uso de las tic en la vida ,lo importante  que sonEl uso de las tic en la vida ,lo importante  que son
El uso de las tic en la vida ,lo importante que son241514984
 
El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.241514949
 
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6    CREAR UN RECURSO MULTIMEDIAActividad integradora 6    CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA241531640
 
dokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.pptdokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.pptMiguelAtencio10
 
GonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptxGonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptx241523733
 
Plan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxPlan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxpabonheidy28
 
Mapa-conceptual-del-Origen-del-Universo-3.pptx
Mapa-conceptual-del-Origen-del-Universo-3.pptxMapa-conceptual-del-Origen-del-Universo-3.pptx
Mapa-conceptual-del-Origen-del-Universo-3.pptxMidwarHenryLOZAFLORE
 
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfPARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfSergioMendoza354770
 
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptxMedidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptxaylincamaho
 
Arenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptxArenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptxJOSEFERNANDOARENASCA
 
tics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxtics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxazmysanros90
 
FloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptxFloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptx241522327
 
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxCrear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxNombre Apellidos
 
Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024GiovanniJavierHidalg
 

Último (20)

El uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELEl uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFEL
 
definicion segun autores de matemáticas educativa
definicion segun autores de matemáticas  educativadefinicion segun autores de matemáticas  educativa
definicion segun autores de matemáticas educativa
 
La era de la educación digital y sus desafios
La era de la educación digital y sus desafiosLa era de la educación digital y sus desafios
La era de la educación digital y sus desafios
 
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdf
 
Presentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadPresentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidad
 
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
 
El uso de las tic en la vida ,lo importante que son
El uso de las tic en la vida ,lo importante  que sonEl uso de las tic en la vida ,lo importante  que son
El uso de las tic en la vida ,lo importante que son
 
El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.
 
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6    CREAR UN RECURSO MULTIMEDIAActividad integradora 6    CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
 
dokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.pptdokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.ppt
 
GonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptxGonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptx
 
Plan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxPlan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docx
 
Mapa-conceptual-del-Origen-del-Universo-3.pptx
Mapa-conceptual-del-Origen-del-Universo-3.pptxMapa-conceptual-del-Origen-del-Universo-3.pptx
Mapa-conceptual-del-Origen-del-Universo-3.pptx
 
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfPARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
 
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptxMedidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
 
Arenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptxArenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptx
 
tics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxtics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptx
 
FloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptxFloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptx
 
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxCrear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
 
Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024
 

Lenguaje de programación de páginas web

  • 2. ÍNDICE:  INTRODUCCIÓN  ¿QUÉ ES HTML?  CREACIÓN DE PÁGINAS WEB CON HTML SENCILLO  ESTRUCTURA BÁSICA DEL HTML  ESCRIBIR TÍTULOS  ETIQUETAS DE PÁRRAFOS  ETIQUETAS META  LENGUAJE SCRIPT  LISTAS  INSERCCIÓN DE IMÁGENES  HIPERENLACES ,HYPERLINKS…  TABLAS  SONIDO  CONCLUSIÓN  BIBLIOGRAFÍA 2
  • 3. INTRODUCCIÓN El HTML no es más que una aplicación del SGML (Standard Generalized Markup Language), un sistema para definir tipos de documentos estructurados y lenguajes de marcas para representar esos mismos documentos. El término HTML se suele referir a ambas cosas, tanto al tipo de documento como al lenguaje de marcas. El lenguaje que utilizan las computadoras que están conectadas a Internet es HTML. 3
  • 4. ¿QUÉ ES HTML? Hyper Text Markup Language (Lenguaje de marcación de Hipertexto) es el lenguaje de marcas de texto utilizado normalmente en la www (World Wide Web). El concepto de Hipertexto (Conocido también como link) permite conectar dos elementos entre si y el SGML (Lenguaje Estándar de Marcación General) el cual sirve para colocar etiquetas o marcas en un texto que indique como debe verse. HTML no es propiamente un lenguaje de programación como Visual Basic, etc., sino un sistema de etiquetas. El entorno para trabajar HTML es simplemente un procesador de texto, como el que ofrecen los sistemas operativos Windows (Bloc de notas), UNIX (el editor vi o ed) o el que ofrece MS Office (Word). El conjunto de etiquetas que se creen, se deben guardar con la extensión .htm o .html Estos documentos pueden ser mostrados por los visores o "browsers" de paginas Web en Internet, como Microsoft Internet Explorer. 4
  • 5. Creación de páginas web con lenguaje HTML  Se pueden utilizar varios programas especializados  Otra forma de diseñar un archivo .html, es copiar todo en el Bloc de Notas del WindowsEstructura de los documentos de HTML PROGRAMAS ESPECIALIZADOS (ejemplos) Macromedia Microsoft Front Page Dreamweaver 3. 5
  • 6. ESTRUCTURA BÁSICA DEL HTML  Toda página Web debe contener la siguiente estructura :  <HTML> La etiqueta le indica al visualizador que va a comenzar a leer un documento HTML y se debe colocar siempre al comienzo y al fin del texto.  <HEAD> Indica un encabezado . <TITLE></TITLE> Título  <BODY> </HTML> 6
  • 7. ESCRIBIR TÍTULOS  Para escribir títulos se usa la etiqueta <Hx></Hx> en donde x es un número: <h1>Titulo principal</h1> <h2>Titulo secundario</h2> <h3>Titulo terciario</h3> <h4>Titulo cuarto nivel</h4> Quedaría: Título principal Título secundario Título terciario Título cuarto nivel 7
  • 8. ETIQUETAS DE PÁRRAFO  Se utiliza la etiqueta <P> y </P>.  Este comando es muy útil debido a que si uno escribe algo porque el texto siempre va a aparecer en la misma línea. 8
  • 9. Para alinear un párrafo se utiliza el comando <ALING> y </ALING>, utilizado dentro de la etiqueta <P>. Se puede alinear de tres formas diferentes  <p align="left"> Párrafo... </p> Alinea a la izquierda. <p align="center"> Párrafo... </p> Realiza un centrado. <p align="right"> Párrafo... </p> Alinea a la derecha.  Para cambiar de línea sem usa el comando: <BR>.  Para separar un párrafo de otro: <HR> 9
  • 10. ETIQUETAS PARA FORMATO DE TEXTO  <B> y </B> Sirve para colocar un texto en Negrita. <U> y < /U> Sirve para subrayar un texto <STRIKE> y </STRIKE> Sirve para tachar un texto. <STRONG> y </STRONG> Cumple la misma función que <B> <I> y <I> Para colocar un texto en cursiva. <EM>texto con énfasis</EM> texto con énfasis <CITE>citación</CITE> citación <DFN>definición</DFN> definición <KBD>teclado</KBD> teclado <SAMP>ejemplo</SAMP> ejemplo SIZE: Regula el tamaño de los caracteres.  FACE: fuente (arial…) 10
  • 11. COLORES :  <FONT> :Regula el color del texto: 1.Especificación de los valores RGB del color deseado en forma hexadecimal (RGB=Red/Green/Blue, valores Rojo/Verde/Azul) 2. Nombre del color en inglés  <body bgcolor=#808080></body> :para el color de fondo.  text="#número" Para el color del texto.  link="#número" Para el color de los enlaces. vlink="#número" El color con que aparecerán los enlaces ya visitados.  alink="#número" Color del enlace cuando lo pulsamos. La combinación de números depende del color que se quiera, 11
  • 12. ETIQUETAS META  Usadas para poner meta-información del documento.  Indica el nombre de la persona que elabora la pagina WEB <META NAME = "keywords" content = “Ana Fernández"> 12
  • 13. LENGUAJE SCRIPT  DEFINICIÓN:  Un lenguaje de script es un pequeño lenguaje de programación cuyo código se inserta dentro del documento HTML. Este código se ejecuta en el navegador del usuario al cargar la página, o cuando sucede algo especial como puede ser el pulsar sobre un enlace.  CARACTERÍSTICAS:  Permiten variar dinámicamente el contenido del documento, modificar el comportamiento normal del navegador, validar formularios etc...  Se ejecutan en el navegador del usuario y no en la máquina donde están alojadas. 13
  • 14. LISTAS  Las listas pueden ser: Lista desordenada, <UL> (Unordered List). Lista ordenada, <OL> (Ordered List). Lista con círculos: <li type=circle> Lista con cuadrados: <li type=square> 14
  • 15. INSERCCIÓN DE UNA IMAGEN  La etiqueta utilizada para agregar imágenes a una página Web es <IMG> , va acompañada de un atributo fundamental "SCR", que indica la ruta donde se encuentra el archivo a insertar .  Es decir: <IMG SRC="lugar donde guardo la imagen"> 15
  • 16. HIPERENLACES,HYPERLINKS O LINKS  Para definir un enlace es necesario marcar con la etiqueta <a> el objeto del cual va a partir dicho enlace. Debe incluir :href="URL" para especificar el destino del enlace. Es decir, que antes del objeto elegido debemos abrir con <a href="URL">, y después cerrar con </ a>.  Ejemplo: queremos que el texto "pulse aquí para visitar tienda ONLIE" nos conduzca a la "home page" de la tienda onlie, debemos escribir en nuestro texto HTML: <a href="http://www.tienda.onlie/">Pulse aquí para visitar a la tienda onlie</a>  Se vería : Pulse aquí para visitar a la tienda onlie  Si queremos foto:<a href="imagen.gif">Foto</a> entonces al hacer clic en el texto Foto nos abrirá la imagen.gif. 16
  • 17. TABLAS Las tablas son posiblemente la manera más clara de organizar la información. También es el modo más adecuado de maquetar texto y gráficos de una manera algo más controlada que con los parámetros ALIGN. Las tablas se definen de la siguiente manera. Primero, las características de la tabla, luego las de cada fila y dentro de ésta, cada celda. Así sería un ejemplo de tabla: <TABLE> <TR> <TD>1,1</TD> <TD>1,2</TD> <TD>1,3</TD> </TR> <TR> <TD>2,1</TD> <TD>2,2</TD> </TR> </TABLE> 17
  • 18. Estas son las cosas que podremos cambiar con los atributos de TABLE: BORDER Especifica el grosor del borde que se dibujará alrededor de las celdas. Por defecto es cero, lo que significa que no dibujará borde alguno. CELLSPACING Define el número de pixeles que separarán las celdas. CELLPADDING Especifica el número de pixeles que habrá entre el borde de una celda y su contenido. WIDTH Especifica la anchura de la tabla. Puede estar tanto en pixeles como en porcentaje de la anchura total disponible para él (pondremos "100%" si queremos que ocupe todo el ancho de la ventana del navegador). ALIGN Alinea la tabla a izquierda (LEFT), derecha (RIGHT) o centro (CENTER). 18
  • 19. SONIDO  Formatos WAV y MID.  Otros necesitan : plug-in o Real Audio para los archivos RA.  ModPlug para los MOD y derivados.  Sonido activado por el usuario La manera más sencilla de incluir sonidos es dejando al usuario la decisión de escucharlos o no. Para hacerlo incluiremos el sonido en el parámetro HREF de un enlace, como si fuera una página HTML: Sonido de fondo  En Explorer, desde la versión 2.0, se pueden incluir fondos sonoros utilizando la etiqueta BGSOUND : <BGSOUND SRC="musica.mid"> 19
  • 20. CONCLUSIÓN Si no hubiera HTML aun seguiríamos con el antiguo FTP mandándonos o bajando archivos que a veces ni sabíamos lo que eran ni lo que contenían, sin poder visualizarlo antes. El lenguaje de HTML fue un gran avance para el mundo ya que permite a las personas crear sus propias páginas web de cualquier tipo de contenido para mostrárselas al resto de los países por medio de internet. Con el HTML se logró un gran movimiento económico ya que muchas empresan unan la red para publicar , ofrecer y vender sus productos . También gracias al HTML nacieron muchas empresas que ofrecen diversos servicios como Yahoo, HotMail, Gmail,Amazon, etc. Todo el universo de Internet se lo debemos al HTML, ya que todas las páginas con las que se compone la World Wide Web están hechas con el lenguaje de programación HTML. 20
  • 21. BIBLIOGRAFÍA  Clarín Guía práctica de Internet Buenos Aires Editorial Sol 90 Barcelona 1999  Sergio Talens Oliag - José Hernández Orallo HTML. Manual de Referencia Editorial Paraninfo 1996  http://www.monografias.com/  http://www.um.es/docencia/ 21