SlideShare una empresa de Scribd logo
1 de 7
LICEO DE CERVANTES
ÁREA DETECNOLOGÍA E INFORMÁTICA
GRADO QUINTO
2017
 Para empezar nuestro capitulo de HTML es
necesario utilizar el programa sublime text que
podemos descargar desde este vínculo:
https://www.sublimetext.com/3
 Recuerden que antes de empezar a digitar el
código, es necesario guardar el archivo
finalizando con la extensión .html
 Luego de esto, utilizando el asistente de texto
predictivo, al colocar la etiqueta <html> y
oprimir la tecla enter el programa nos aparecerá
la estructura principal de una pagina html:
 <!DOCTYPE html>
 <html>
 <head>
 <title></title>
 </head>
 <body>
 </body>
 </html>
 Recuerden que las etiquetas <!DOCTYPE
html>, <head>, <title>, <body> son etiquetas
que definen las partes principales de la pagina
web y deben abrirse y cerrarse como muestra
la diapositiva anterior.
 A partir de este punto, y dentro de cada una
de las partes del archivo HTML deben
colocarse las demás etiquetas,
principalmente en la etiqueta <body>
 En el encabezado de la página web solo
hemos visto una etiqueta:
<title>titulo de la página</title>
 Recuerden que el texto que aparece entre las
dos etiquetas será el título de la pagina web.
 En el cuerpo de la página web hemos visto las siguientes etiquetas:
 <h1> para colocar títulos en el cuerpo de la página, debe cerrarse con
</h1>
 <p> para indicarle al computador que vamos a escribir un parrafo, debe
cerrarse con </p>
 <img src=“ubicación” width=“000” height=“000”> para colocar imágenes
en la página web, dentro de las comillas frente al src debe colocarse la
dirección donde se encuentra la imágen, en las comillas de width y heigth
deben colocarse los valores en pixeles para cambiar el tamaño de la
imágen.
 <a ref=“dirección de la página”> esta etiqueta sirve para colocar vinculos
a otras paginas web ya sean externas o internas, debe cerrarse con </a>
 Los atributos de las etiquetas que hemos visto hasta el momento se aplican de la
siguiente manera:
 Cambiar tamaño de una imagen: Dentro de la etiqueta <img src=“dirección”> se
añaden las palabras width y height con sus valores en pixeles para cambiar el
tamaño de la imagen, tal como se vio en la diapositiva anterior.
 Centrar un texto: Dentro de las etiquetas <h1> o <p> pueden añadirse los
atributos necesarios para centrar el contenido, por ejemplo, si quiero colocar un
titulo centrado puedo hacerlo de la siguiente manera: <h1 align=center>ESTE ES
ELTÍTULO</H1>. El comando align me sirve para cambiar la alineación de un
texto, puedo utilizar las palabras claves center, rigth, left o justify.
 Cambiar el color del fondo de la página web: para cambiar el color del fondo de la
pagina web es necesario añadir el tributo a la etiqueta <body> de la siguiente
forma: <body bgcolor=“000000”>. Recuerden que los numeros hacen referencia a
la cantidad de colores rojo verde y azul con los que deseo crear el nuevo color.
Les recomiendo visitar la pagina www.adobekuler.com para copiar el código del
color que desean en su documento web.

Más contenido relacionado

La actualidad más candente (20)

Html5 y php5
Html5 y php5Html5 y php5
Html5 y php5
 
Tutorial de Prezi
Tutorial de PreziTutorial de Prezi
Tutorial de Prezi
 
paul walker nissa
paul walker nissa paul walker nissa
paul walker nissa
 
Tip Tictac Calendar Colegio Las Cumbres
Tip Tictac Calendar Colegio Las Cumbres Tip Tictac Calendar Colegio Las Cumbres
Tip Tictac Calendar Colegio Las Cumbres
 
Caracteristicas 2
Caracteristicas 2Caracteristicas 2
Caracteristicas 2
 
Vincular google calendar
Vincular google calendarVincular google calendar
Vincular google calendar
 
Introducción html5
Introducción html5Introducción html5
Introducción html5
 
Guia 4 de html imagenes
Guia 4 de html   imagenesGuia 4 de html   imagenes
Guia 4 de html imagenes
 
Crear Pagina Web
Crear Pagina WebCrear Pagina Web
Crear Pagina Web
 
Programación en html 1
Programación en html 1Programación en html 1
Programación en html 1
 
El texto
 El texto El texto
El texto
 
Etiquetas Html Udp
Etiquetas Html UdpEtiquetas Html Udp
Etiquetas Html Udp
 
HTML
HTML HTML
HTML
 
Programación básica de html5
Programación básica de html5Programación básica de html5
Programación básica de html5
 
Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTML
 
El blog
El blogEl blog
El blog
 
Explicacion html
Explicacion htmlExplicacion html
Explicacion html
 
HOTMAIL
HOTMAILHOTMAIL
HOTMAIL
 
Manual Cuadro Google Reader
Manual Cuadro Google ReaderManual Cuadro Google Reader
Manual Cuadro Google Reader
 
Trabajo practico n3
Trabajo practico n3Trabajo practico n3
Trabajo practico n3
 

Similar a Etiquetas html

Producto 4 etiquetas basicas joon lee
Producto 4 etiquetas basicas joon leeProducto 4 etiquetas basicas joon lee
Producto 4 etiquetas basicas joon lee
JoonLee2000
 
tutorial para una pagina web
tutorial para una pagina webtutorial para una pagina web
tutorial para una pagina web
karen_malik
 
Codigos HTML...paginas web
Codigos HTML...paginas webCodigos HTML...paginas web
Codigos HTML...paginas web
ABel Palma
 
Como hacer una pagina en HTML
Como hacer una pagina en HTMLComo hacer una pagina en HTML
Como hacer una pagina en HTML
karen_malik
 

Similar a Etiquetas html (20)

Producto 4 etiquetas basicas joon lee
Producto 4 etiquetas basicas joon leeProducto 4 etiquetas basicas joon lee
Producto 4 etiquetas basicas joon lee
 
Html creacion de una pagina. Adriano Mazziotti
Html  creacion de una pagina. Adriano MazziottiHtml  creacion de una pagina. Adriano Mazziotti
Html creacion de una pagina. Adriano Mazziotti
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
El Lenguaje de Marcado de Hipertexto (HTML).pptx
El Lenguaje de Marcado de Hipertexto (HTML).pptxEl Lenguaje de Marcado de Hipertexto (HTML).pptx
El Lenguaje de Marcado de Hipertexto (HTML).pptx
 
Escuela Abierta - Taller de Html
Escuela Abierta - Taller de HtmlEscuela Abierta - Taller de Html
Escuela Abierta - Taller de Html
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Crear una página básica en HTML
Crear una página básica en HTMLCrear una página básica en HTML
Crear una página básica en HTML
 
tutorial para una pagina web
tutorial para una pagina webtutorial para una pagina web
tutorial para una pagina web
 
tutorial
tutorialtutorial
tutorial
 
Unidad 2
Unidad 2Unidad 2
Unidad 2
 
Codigos HTML...paginas web
Codigos HTML...paginas webCodigos HTML...paginas web
Codigos HTML...paginas web
 
HTML.pdf
HTML.pdfHTML.pdf
HTML.pdf
 
U2
U2U2
U2
 
Cuales son las etiquetas de HTML y su función
Cuales son las etiquetas de HTML y su funciónCuales son las etiquetas de HTML y su función
Cuales son las etiquetas de HTML y su función
 
Etiquetas básicas de HTML
Etiquetas básicas de HTMLEtiquetas básicas de HTML
Etiquetas básicas de HTML
 
Como hacer una pagina en HTML
Como hacer una pagina en HTMLComo hacer una pagina en HTML
Como hacer una pagina en HTML
 
Sitio web (html) ejemplos 01
Sitio web (html) ejemplos 01Sitio web (html) ejemplos 01
Sitio web (html) ejemplos 01
 
Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02
 

Último

FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
El Fortí
 
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptxACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
zulyvero07
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...
JonathanCovena1
 
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdfCurso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Francisco158360
 

Último (20)

Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptx
 
proyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niñoproyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niño
 
CALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADCALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDAD
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
 
MAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grande
 
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
 
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptxACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
 
Fe contra todo pronóstico. La fe es confianza.
Fe contra todo pronóstico. La fe es confianza.Fe contra todo pronóstico. La fe es confianza.
Fe contra todo pronóstico. La fe es confianza.
 
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...
 
Estrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptxEstrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptx
 
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdfCurso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.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
 
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
 
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
 
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
 
Ley 21.545 - Circular Nº 586.pdf circular
Ley 21.545 - Circular Nº 586.pdf circularLey 21.545 - Circular Nº 586.pdf circular
Ley 21.545 - Circular Nº 586.pdf circular
 
Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...
 
Valoración Crítica de EEEM Feco2023 FFUCV
Valoración Crítica de EEEM Feco2023 FFUCVValoración Crítica de EEEM Feco2023 FFUCV
Valoración Crítica de EEEM Feco2023 FFUCV
 
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdfTema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
 

Etiquetas html

  • 1. LICEO DE CERVANTES ÁREA DETECNOLOGÍA E INFORMÁTICA GRADO QUINTO 2017
  • 2.  Para empezar nuestro capitulo de HTML es necesario utilizar el programa sublime text que podemos descargar desde este vínculo: https://www.sublimetext.com/3  Recuerden que antes de empezar a digitar el código, es necesario guardar el archivo finalizando con la extensión .html  Luego de esto, utilizando el asistente de texto predictivo, al colocar la etiqueta <html> y oprimir la tecla enter el programa nos aparecerá la estructura principal de una pagina html:
  • 3.  <!DOCTYPE html>  <html>  <head>  <title></title>  </head>  <body>  </body>  </html>
  • 4.  Recuerden que las etiquetas <!DOCTYPE html>, <head>, <title>, <body> son etiquetas que definen las partes principales de la pagina web y deben abrirse y cerrarse como muestra la diapositiva anterior.  A partir de este punto, y dentro de cada una de las partes del archivo HTML deben colocarse las demás etiquetas, principalmente en la etiqueta <body>
  • 5.  En el encabezado de la página web solo hemos visto una etiqueta: <title>titulo de la página</title>  Recuerden que el texto que aparece entre las dos etiquetas será el título de la pagina web.
  • 6.  En el cuerpo de la página web hemos visto las siguientes etiquetas:  <h1> para colocar títulos en el cuerpo de la página, debe cerrarse con </h1>  <p> para indicarle al computador que vamos a escribir un parrafo, debe cerrarse con </p>  <img src=“ubicación” width=“000” height=“000”> para colocar imágenes en la página web, dentro de las comillas frente al src debe colocarse la dirección donde se encuentra la imágen, en las comillas de width y heigth deben colocarse los valores en pixeles para cambiar el tamaño de la imágen.  <a ref=“dirección de la página”> esta etiqueta sirve para colocar vinculos a otras paginas web ya sean externas o internas, debe cerrarse con </a>
  • 7.  Los atributos de las etiquetas que hemos visto hasta el momento se aplican de la siguiente manera:  Cambiar tamaño de una imagen: Dentro de la etiqueta <img src=“dirección”> se añaden las palabras width y height con sus valores en pixeles para cambiar el tamaño de la imagen, tal como se vio en la diapositiva anterior.  Centrar un texto: Dentro de las etiquetas <h1> o <p> pueden añadirse los atributos necesarios para centrar el contenido, por ejemplo, si quiero colocar un titulo centrado puedo hacerlo de la siguiente manera: <h1 align=center>ESTE ES ELTÍTULO</H1>. El comando align me sirve para cambiar la alineación de un texto, puedo utilizar las palabras claves center, rigth, left o justify.  Cambiar el color del fondo de la página web: para cambiar el color del fondo de la pagina web es necesario añadir el tributo a la etiqueta <body> de la siguiente forma: <body bgcolor=“000000”>. Recuerden que los numeros hacen referencia a la cantidad de colores rojo verde y azul con los que deseo crear el nuevo color. Les recomiendo visitar la pagina www.adobekuler.com para copiar el código del color que desean en su documento web.