SlideShare una empresa de Scribd logo
Ing. Dulce Mónica Castillo
Corona
OBJETIVO

 EL ALUMNO CONOCERÁ LOS ELEMENTOS
INDISPENSABLES PAR CREAR UNA PÁGINA
WEB.
HTML

 HTML, siglas de HyperText Markup Language
(Lenguaje de Marcas de Hipertexto), es el lenguaje que
se utiliza para la creación de páginas web. Nos
permite agrupar textos, imágenes y sonidos lo que es
una ventaja en comparación a los libros o revistas
impresos. Así como el uso de enlaces a otras páginas
 El código HTML consta básicamente de un elemento llamado etiqueta o
marca que nos van a servir para incluir desde texto , sonido, tablas,etc.
Casi todas tiene 2 partes, el comienzo y el fin entre ellas esta el elemento
que caracterizan, las de apertura se simbolizan así < y las de cierre así >
pero cabe mencionar que a las de cierre se les debe anteponer una /. Con
lo que nuestras etiquetas quedan de la sig. manera…
<etiqueta>…….</etiqueta>

 Al programar nuestra página lo haremos en un editor de textos en
donde pondremos todas la etiquetas que se requieran pero el usuario al
abrir la página en un explorador en este solo no se verán ya que este va a
interpretar la etiquetas y sus atributos para mostrar como resultado final
la página pero sin etiquetas.
 Existen diferentes tipos de navegadores Mozilla firefox, Opera, Kmeleon, Netscape, Maya, Internet explorer, browserX, Chrome,
Safari,etc.
 Para guardar un archivo HTML debemos poner la extensión en el
nombre del archivo es decir , practica2.html
Ejemplo de código HTML
<HTML>
<HEAD> <TITLE>TODO SOBRE NAVEGADORES!!!! </TITLE>
</HEAD>
<BODY>
<!-- aqui comenzo aprogramar mi página -->
<H1>¿QUE ES UN NAVEGADOR??? </H1>
<H2>¿CUAL ES EL MEJOR?</H2>
<H3>NOMBRES DE NAVEGADORES</H3>
<H4>¿DE DONDE LOS DESCARGO?</H4>
<H5>TITULO----5 </H5>
<H6>TITULO----6 </H6>
<H2>
<P ALIGN =CENTER> "NAVEGADORES"</H2>
<br>
<br>
<P ALIGN =CENTER>
<IMG SRC= "./NAVEGADORES.jpg" >
<P>Un navegador o navegador web, conocido internacionalmente como browser, es un software que permite el acceso a Internet,
<br> interpretando la información de archivos y sitios web para que éstos puedan ser leídos.
<P>La funcionalidad básica de un navegador web es permitir la visualización de documentos de texto,
<br>posiblemente con recursos multimedia incrustados. Además, permite visitar páginas web y hacer actividades en ella,
<br>es decir, podemos enlazar un sitio con otro, imprimir, enviar y recibir correo, entre otras funcionalidades más.
<P>Los documentos que se muestran en un browser pueden estar ubicados en la computadora en donde está el usuario,
<br> pero también pueden estar en cualquier otro dispositivo que esté conectado en la computadora del usuario o a
<br>través de Internet, y que tenga los recursos necesarios para la transmisión de los documentos
<br>(un software servidor web).
<P>Tales documentos, comúnmente denominados páginas web, poseen hipervínculos que enlazan una porción de texto o
<br>una imagen a otro documento, normalmente relacionado con el texto o la imagen.
<P>El seguimiento de enlaces de una página a otra, ubicada en cualquier computadora conectada a Internet, se llama navegación,
<br> de donde se origina el nombre navegador (aplicado tanto para el programa como para la persona que lo utiliza,
<br> a la cual también se le llama cibernauta). Por otro lado, hojeador es una traducción literal del original en inglés,
<br> browser, aunque su uso es minoritario. <BR>
<P><B> ALGUNOS DE LOS NAVEGADORES MAS UTILIZADOS SON INTERNET EXPLORER,GOOGLE CHROME Y MOZILLA FIREFOX</B>
<P>Otro parrafo, y lo que querramos seguir anexando a nuestra página
<P><A HREF= "http://windows.microsoft.com/es-mx/internet-explorer/ie-11-worldwide-languages ">INTERNET EXPLORER</A>
<P> <A HREF= "https://support.google.com/chrome/answer/95346?hl=es-419 ">GOOGLE CHROME</A>
<P> <A HREF= "http://www.mozilla.org/es-MX/firefox/new/ ">MOZILLA FIREFOX</A>
.....
</BODY>
</HTML>


Etiquetas de texto más utilizadas
<B>
<I>
<U>
<SUB>
<SUP>
<S>
<BLINK>
<TT>

texto en negrita
texto en cursiva
texto subrayado
subíndice
superíndice
texto tachado
texto interminente
monoespaciada

</B>
</I>
</U>
</SUB>
</SUP>
</S>
</BLINK>
</TT>

Tamaño de fuente
<FONT size=4> TEXTO </FONT >

Color de fuente

<FONT size=+1> TEXTO </FONT >

<FONT color="red"> TEXTO </FONT >
<FONT color="#ff000"> TEXTO </FONT >
<FONT face="Arial"> TEXTO </FONT >

Si se lo agregamos a nuestra página nos quedaría de la siguiente manera:
<FONT color="#ff000"face ="CENTURY GOTHIC" size= "7">
<P><B> ALGUNOS DE LOS NAVEGADORES MAS UTILIZADOS SON </FONT>
<FONT color="BLUE" face ="COURIER NEW" size= "5">
INTERNET EXPLORER,GOOGLE CHROME Y MOZILLA FIREFOX<B></FONT>
P no 2
P no 2
P no 2
P no 2
P no 2
P no 2
P no 2
P no 2
P no 2
P no 2
P no 2
P no 2
P no 2

Más contenido relacionado

PPTX
Elementos básicos y estructura de una página web
PDF
Manual html1 (Informatica Aplia Educa)
PDF
Práctica no2
DOC
Info practico 6
PDF
Generalidades php
PPT
Navegadores web
Elementos básicos y estructura de una página web
Manual html1 (Informatica Aplia Educa)
Práctica no2
Info practico 6
Generalidades php
Navegadores web

La actualidad más candente (18)

PPTX
COMO CREAR UNA PAGINA WEB EN HTML SUS PRIMEROS PASOS
PPTX
Trabajo de html
PPTX
Publicar presentaciones PowerPoint
DOCX
PPTX
Código HTML
PDF
DOCX
Colegio nacional nicolas esguerra
DOCX
Etiquetas De AutoríA Web
PPTX
Tipos de navegadores
PPTX
Estructura.html 1
PPTX
Photo slideshow creator es una herramienta de creación de pases de diapositivas
DOCX
Trabajo practico n ° 7
PDF
TP informatica
PPTX
Formas de navegar en internet
PDF
Clase 2 Desarrollo Web
DOCX
Colegio nacional nicolas esguerra
PPTX
Diseño web
COMO CREAR UNA PAGINA WEB EN HTML SUS PRIMEROS PASOS
Trabajo de html
Publicar presentaciones PowerPoint
Código HTML
Colegio nacional nicolas esguerra
Etiquetas De AutoríA Web
Tipos de navegadores
Estructura.html 1
Photo slideshow creator es una herramienta de creación de pases de diapositivas
Trabajo practico n ° 7
TP informatica
Formas de navegar en internet
Clase 2 Desarrollo Web
Colegio nacional nicolas esguerra
Diseño web
Publicidad

Similar a P no 2 (20)

DOCX
Colegio nicolas esguerra222
DOCX
Colegio nicolas esguerra222
DOCX
Colegio nicolas esguerra222
DOCX
Colegio nicolas esguerra222
DOCX
Colegio nicolas esguerra222
DOCX
Qué es html
DOCX
Colegio nacional nicolas esguerra
DOCX
Colegio nacional nicolas esguerra eseses
DOCX
Colegio nacional nicolas esguerra html
DOCX
Colegio nacional nicolas esguerra eseses
DOCX
Colegio nacional nicolas esguerra
DOCX
Html
DOCX
Colegio nacional nicolás esguerra
DOCX
Colegio nacional nicolás esguerra
DOCX
Colegio nacional nicolás esguerra
DOCX
Colegio nacional nicolas esguerra
PDF
Manual de html
PDF
Manual de html
PDF
Manual de html
Colegio nicolas esguerra222
Colegio nicolas esguerra222
Colegio nicolas esguerra222
Colegio nicolas esguerra222
Colegio nicolas esguerra222
Qué es html
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerra eseses
Colegio nacional nicolas esguerra html
Colegio nacional nicolas esguerra eseses
Colegio nacional nicolas esguerra
Html
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
Colegio nacional nicolas esguerra
Manual de html
Manual de html
Manual de html
Publicidad

Más de Monica Castillo (20)

PDF
2 ex parcial_b_gpo1115
PDF
2 ex parcial_a_gpo1115
PDF
2 ex parcial_b_respuestas
PDF
2 ex parcial_a_respuestas
PDF
PDF
Serie algoritmos
PDF
Serie pseint
PDF
Linux esquema
PDF
Linux practica 4
PPS
PDF
Arreglos
PDF
Práctica no3
PDF
Tema 5 3
2 ex parcial_b_gpo1115
2 ex parcial_a_gpo1115
2 ex parcial_b_respuestas
2 ex parcial_a_respuestas
Serie algoritmos
Serie pseint
Linux esquema
Linux practica 4
Arreglos
Práctica no3
Tema 5 3

Último (20)

PDF
el - LIBRO-PACTO-EDUCATIVO-GLOBAL-OIEC.pdf
PDF
Híper Mega Repaso Histológico Bloque 3.pdf
PDF
Cronograma de clases de Práctica Profesional 2 2025 UDE.pdf
PDF
Salcedo, J. et al. - Recomendaciones para la utilización del lenguaje inclusi...
PPT
Cosacos y hombres del Este en el Heer.ppt
PDF
COMUNICACION EFECTIVA PARA LA EDUCACION .pdf
PDF
DI, TEA, TDAH.pdf guía se secuencias didacticas
PDF
Conecta con la Motivacion - Brian Tracy Ccesa007.pdf
PDF
Gasista de unidades unifuncionales - pagina 23 en adelante.pdf
PDF
ciencias-1.pdf libro cuarto basico niños
PDF
SESION 12 INMUNIZACIONES - CADENA DE FRÍO- SALUD FAMILIAR - PUEBLOS INDIGENAS...
DOCX
III Ciclo _ Plan Anual 2025.docx PARA ESTUDIANTES DE PRIMARIA
PDF
La Evaluacion Formativa en Nuevos Escenarios de Aprendizaje UGEL03 Ccesa007.pdf
PDF
Metodologías Activas con herramientas IAG
PPTX
caso clínico iam clinica y semiología l3.pptx
PDF
IDH_Guatemala_2.pdfnjjjkeioooe ,l dkdldp ekooe
PDF
Educación Artística y Desarrollo Humano - Howard Gardner Ccesa007.pdf
PDF
TRAUMA_Y_RECUPERACION consecuencias de la violencia JUDITH HERMAN
PDF
Habitos de Ricos - Juan Diego Gomez Ccesa007.pdf
PDF
Unidad de Aprendizaje 5 de Matematica 1ro Secundaria Ccesa007.pdf
el - LIBRO-PACTO-EDUCATIVO-GLOBAL-OIEC.pdf
Híper Mega Repaso Histológico Bloque 3.pdf
Cronograma de clases de Práctica Profesional 2 2025 UDE.pdf
Salcedo, J. et al. - Recomendaciones para la utilización del lenguaje inclusi...
Cosacos y hombres del Este en el Heer.ppt
COMUNICACION EFECTIVA PARA LA EDUCACION .pdf
DI, TEA, TDAH.pdf guía se secuencias didacticas
Conecta con la Motivacion - Brian Tracy Ccesa007.pdf
Gasista de unidades unifuncionales - pagina 23 en adelante.pdf
ciencias-1.pdf libro cuarto basico niños
SESION 12 INMUNIZACIONES - CADENA DE FRÍO- SALUD FAMILIAR - PUEBLOS INDIGENAS...
III Ciclo _ Plan Anual 2025.docx PARA ESTUDIANTES DE PRIMARIA
La Evaluacion Formativa en Nuevos Escenarios de Aprendizaje UGEL03 Ccesa007.pdf
Metodologías Activas con herramientas IAG
caso clínico iam clinica y semiología l3.pptx
IDH_Guatemala_2.pdfnjjjkeioooe ,l dkdldp ekooe
Educación Artística y Desarrollo Humano - Howard Gardner Ccesa007.pdf
TRAUMA_Y_RECUPERACION consecuencias de la violencia JUDITH HERMAN
Habitos de Ricos - Juan Diego Gomez Ccesa007.pdf
Unidad de Aprendizaje 5 de Matematica 1ro Secundaria Ccesa007.pdf

P no 2

  • 1. Ing. Dulce Mónica Castillo Corona
  • 2. OBJETIVO   EL ALUMNO CONOCERÁ LOS ELEMENTOS INDISPENSABLES PAR CREAR UNA PÁGINA WEB.
  • 3. HTML   HTML, siglas de HyperText Markup Language (Lenguaje de Marcas de Hipertexto), es el lenguaje que se utiliza para la creación de páginas web. Nos permite agrupar textos, imágenes y sonidos lo que es una ventaja en comparación a los libros o revistas impresos. Así como el uso de enlaces a otras páginas
  • 4.  El código HTML consta básicamente de un elemento llamado etiqueta o marca que nos van a servir para incluir desde texto , sonido, tablas,etc. Casi todas tiene 2 partes, el comienzo y el fin entre ellas esta el elemento que caracterizan, las de apertura se simbolizan así < y las de cierre así > pero cabe mencionar que a las de cierre se les debe anteponer una /. Con lo que nuestras etiquetas quedan de la sig. manera… <etiqueta>…….</etiqueta>  Al programar nuestra página lo haremos en un editor de textos en donde pondremos todas la etiquetas que se requieran pero el usuario al abrir la página en un explorador en este solo no se verán ya que este va a interpretar la etiquetas y sus atributos para mostrar como resultado final la página pero sin etiquetas.  Existen diferentes tipos de navegadores Mozilla firefox, Opera, Kmeleon, Netscape, Maya, Internet explorer, browserX, Chrome, Safari,etc.  Para guardar un archivo HTML debemos poner la extensión en el nombre del archivo es decir , practica2.html
  • 5. Ejemplo de código HTML <HTML> <HEAD> <TITLE>TODO SOBRE NAVEGADORES!!!! </TITLE> </HEAD> <BODY> <!-- aqui comenzo aprogramar mi página --> <H1>¿QUE ES UN NAVEGADOR??? </H1> <H2>¿CUAL ES EL MEJOR?</H2> <H3>NOMBRES DE NAVEGADORES</H3> <H4>¿DE DONDE LOS DESCARGO?</H4> <H5>TITULO----5 </H5> <H6>TITULO----6 </H6> <H2> <P ALIGN =CENTER> "NAVEGADORES"</H2> <br> <br> <P ALIGN =CENTER> <IMG SRC= "./NAVEGADORES.jpg" > <P>Un navegador o navegador web, conocido internacionalmente como browser, es un software que permite el acceso a Internet, <br> interpretando la información de archivos y sitios web para que éstos puedan ser leídos. <P>La funcionalidad básica de un navegador web es permitir la visualización de documentos de texto, <br>posiblemente con recursos multimedia incrustados. Además, permite visitar páginas web y hacer actividades en ella, <br>es decir, podemos enlazar un sitio con otro, imprimir, enviar y recibir correo, entre otras funcionalidades más. <P>Los documentos que se muestran en un browser pueden estar ubicados en la computadora en donde está el usuario, <br> pero también pueden estar en cualquier otro dispositivo que esté conectado en la computadora del usuario o a <br>través de Internet, y que tenga los recursos necesarios para la transmisión de los documentos <br>(un software servidor web). <P>Tales documentos, comúnmente denominados páginas web, poseen hipervínculos que enlazan una porción de texto o <br>una imagen a otro documento, normalmente relacionado con el texto o la imagen. <P>El seguimiento de enlaces de una página a otra, ubicada en cualquier computadora conectada a Internet, se llama navegación, <br> de donde se origina el nombre navegador (aplicado tanto para el programa como para la persona que lo utiliza, <br> a la cual también se le llama cibernauta). Por otro lado, hojeador es una traducción literal del original en inglés, <br> browser, aunque su uso es minoritario. <BR> <P><B> ALGUNOS DE LOS NAVEGADORES MAS UTILIZADOS SON INTERNET EXPLORER,GOOGLE CHROME Y MOZILLA FIREFOX</B> <P>Otro parrafo, y lo que querramos seguir anexando a nuestra página <P><A HREF= "http://windows.microsoft.com/es-mx/internet-explorer/ie-11-worldwide-languages ">INTERNET EXPLORER</A> <P> <A HREF= "https://support.google.com/chrome/answer/95346?hl=es-419 ">GOOGLE CHROME</A> <P> <A HREF= "http://www.mozilla.org/es-MX/firefox/new/ ">MOZILLA FIREFOX</A> ..... </BODY> </HTML>
  • 6.
  • 7.
  • 8. Etiquetas de texto más utilizadas <B> <I> <U> <SUB> <SUP> <S> <BLINK> <TT> texto en negrita texto en cursiva texto subrayado subíndice superíndice texto tachado texto interminente monoespaciada </B> </I> </U> </SUB> </SUP> </S> </BLINK> </TT> Tamaño de fuente <FONT size=4> TEXTO </FONT > Color de fuente <FONT size=+1> TEXTO </FONT > <FONT color="red"> TEXTO </FONT > <FONT color="#ff000"> TEXTO </FONT > <FONT face="Arial"> TEXTO </FONT > Si se lo agregamos a nuestra página nos quedaría de la siguiente manera: <FONT color="#ff000"face ="CENTURY GOTHIC" size= "7"> <P><B> ALGUNOS DE LOS NAVEGADORES MAS UTILIZADOS SON </FONT> <FONT color="BLUE" face ="COURIER NEW" size= "5"> INTERNET EXPLORER,GOOGLE CHROME Y MOZILLA FIREFOX<B></FONT>