SlideShare une entreprise Scribd logo
1  sur  12
InstItucIón EducatIva MunIcIpal
    luIs Eduardo Mora osEjo




       Nombre: guiovanny romo
    Correo: puper3092@hotmail.com
       Grado: 10 computación j-m
          Área: Programación
     Nombre: Jairo S Inagan Gomez
crEacIón dE págInas WEb con HtMl

Para crear páginas Web con los códigos HTML debemos seguir algunos pasos:

   1. abrir el bloc de notas que es el programa a usar:::




   2. Debemos usar unas etiquetas para empezar y abrir nuestros
       documentos
   Estas etiquetas debemos abrir con un mayor y un menor que (< y >) y al
   finalizar cada una debemos anteponerle el slash así las más importantes
   son:
3. Donde esta las etiquetas title en medio de estas ponemos el titulo que
   saldrá en la parte de arriba del navegador y en medio de las etiquetas
   body que quiere decir cuerpo podemos escribir todo nuestro contenido
   con otras etiquetas que ayudan a modificar la pagina como podemos
   ver::




4. la etiqueta body tiene algunos atributos que modifiquen el texto como
   estas:
5. Agregamos a body estos atributos los más convenientes para modificar
   nuestra pagina como por ejemplo cambiarle el color de fondo y el color
   del texto se puede con códigos de colores o simplemente en color en
   ingles y esto siempre entre comillas:
6.Podemos utilizar también los protocolos más importantes como miramos
acontinuación para modificar texto: como <p> </p>para salto de línea y demas:
6. Podemos mirar algunos cambios con esta información y añadir a nuestra
   pagina para mejorar el texto en todo su formato….:
Y nos resulta así:
7. Pero tenemos en cuenta que ala hora de guardar tenemos que hacerlo
   con lo que tu quieras de nombre y al finalizar siempre debe ir .html y
   guardar como tipo todos los archivos así:
….ESTO FUE LO MAS BASICO EN LA CREACION DE TU PRIMERA PAGINA
CON HML

Para mejorar y modificar nuestra primera página tenemos en cuenta algunos
aspectos diferentes al texto…como agregar imagen u otra página enlazada
animaciones, videos, etc.….

Para imagen….copiamos el código respectivo y agregamos en una misma
carpeta la imagen deseada…
Para un enlace hacemos casi lo mismo… copiamos el código adecuado y la
dirección correcta y lo agregamos a nuestra pagina…




Para un video en nuestra pagina copiamos el código embebido o (embed) de
cualquier servidor gratuito de videos como YOUTUBE entre otros y lo
colocamos en nuestro bloc y actualizamos respectivamente.
Así nos quedara nuestra página con video:




Pero a medida que vamos avanzando nuestro aprendizaje con HTML podemos
ir mejorando nuestra página y modificando de acuerdo con nuestra
necesidad….
Eso es todo...
Espero que sea entendible a las prácticas a realizar,
GRACIAS...

Contenu connexe

Tendances (16)

Html
HtmlHtml
Html
 
2° pagina web html5
2° pagina web html52° pagina web html5
2° pagina web html5
 
Producto 3 "Diseño de una pagina web"
Producto 3 "Diseño de una pagina web" Producto 3 "Diseño de una pagina web"
Producto 3 "Diseño de una pagina web"
 
Pagina web con doctype
Pagina web con doctypePagina web con doctype
Pagina web con doctype
 
Html
HtmlHtml
Html
 
presentación de código html.pptx
presentación de código html.pptxpresentación de código html.pptx
presentación de código html.pptx
 
Manual
ManualManual
Manual
 
Rudy google sitio
Rudy google sitioRudy google sitio
Rudy google sitio
 
Html 101
Html 101Html 101
Html 101
 
Codigos html y como crear una pagina Web
Codigos html y como crear una pagina WebCodigos html y como crear una pagina Web
Codigos html y como crear una pagina Web
 
Etiquetas básicas de html
Etiquetas básicas de htmlEtiquetas básicas de html
Etiquetas básicas de html
 
Html 1
Html 1Html 1
Html 1
 
Guia 4 lenguaje html
Guia 4   lenguaje htmlGuia 4   lenguaje html
Guia 4 lenguaje html
 
Leslie rios y natasha saravia
Leslie rios y natasha saraviaLeslie rios y natasha saravia
Leslie rios y natasha saravia
 
Tutorial creacion Pagina Web
Tutorial creacion Pagina WebTutorial creacion Pagina Web
Tutorial creacion Pagina Web
 
Html 3° medio
Html 3°  medioHtml 3°  medio
Html 3° medio
 

En vedette

Reflexion
ReflexionReflexion
Reflexion
diego
 
Marquesina Direccion Url
Marquesina Direccion UrlMarquesina Direccion Url
Marquesina Direccion Url
Kathrym
 
Family album french
Family album  frenchFamily album  french
Family album french
MirkaGarcia
 
4p 10cjm Deisyrosero Programacion Tarea02
4p 10cjm Deisyrosero Programacion Tarea024p 10cjm Deisyrosero Programacion Tarea02
4p 10cjm Deisyrosero Programacion Tarea02
guest063eec
 
Cap 22 Sentidos Especiales
Cap 22   Sentidos EspecialesCap 22   Sentidos Especiales
Cap 22 Sentidos Especiales
marizhg
 
Incumbencias Del Ingeniero Agrónomo[1]
Incumbencias Del  Ingeniero  Agrónomo[1]Incumbencias Del  Ingeniero  Agrónomo[1]
Incumbencias Del Ingeniero Agrónomo[1]
Alessio Bocco
 

En vedette (20)

Anticoncepcion curso medicina
Anticoncepcion curso medicinaAnticoncepcion curso medicina
Anticoncepcion curso medicina
 
Tunis Open: Le quotidien
Tunis Open: Le quotidienTunis Open: Le quotidien
Tunis Open: Le quotidien
 
Bloque I Significado de rostro y corazón
Bloque I Significado de rostro y corazónBloque I Significado de rostro y corazón
Bloque I Significado de rostro y corazón
 
Reflexion
ReflexionReflexion
Reflexion
 
Bloque 2 ilustracion
Bloque 2   ilustracionBloque 2   ilustracion
Bloque 2 ilustracion
 
Inauguration privée Etincelle Coworking
Inauguration privée Etincelle CoworkingInauguration privée Etincelle Coworking
Inauguration privée Etincelle Coworking
 
Internet[1]
Internet[1]Internet[1]
Internet[1]
 
Ricardo Arjona
Ricardo ArjonaRicardo Arjona
Ricardo Arjona
 
De Corazon
De CorazonDe Corazon
De Corazon
 
Marquesina Direccion Url
Marquesina Direccion UrlMarquesina Direccion Url
Marquesina Direccion Url
 
Grupo Numero 3
Grupo Numero 3Grupo Numero 3
Grupo Numero 3
 
Informe final a.cano m. huaraz- 680
Informe final a.cano m. huaraz- 680Informe final a.cano m. huaraz- 680
Informe final a.cano m. huaraz- 680
 
Grupo 3
Grupo 3Grupo 3
Grupo 3
 
Family album french
Family album  frenchFamily album  french
Family album french
 
Informe semanal de Cortal Consors
Informe semanal de Cortal ConsorsInforme semanal de Cortal Consors
Informe semanal de Cortal Consors
 
Témoignages pour Lucien Morisset : artistes Saint-Paul-de-Vence
 Témoignages pour Lucien Morisset : artistes Saint-Paul-de-Vence  Témoignages pour Lucien Morisset : artistes Saint-Paul-de-Vence
Témoignages pour Lucien Morisset : artistes Saint-Paul-de-Vence
 
4p 10cjm Deisyrosero Programacion Tarea02
4p 10cjm Deisyrosero Programacion Tarea024p 10cjm Deisyrosero Programacion Tarea02
4p 10cjm Deisyrosero Programacion Tarea02
 
Cap 22 Sentidos Especiales
Cap 22   Sentidos EspecialesCap 22   Sentidos Especiales
Cap 22 Sentidos Especiales
 
Hardware y software EDGAR M.C.
Hardware y software EDGAR M.C.Hardware y software EDGAR M.C.
Hardware y software EDGAR M.C.
 
Incumbencias Del Ingeniero Agrónomo[1]
Incumbencias Del  Ingeniero  Agrónomo[1]Incumbencias Del  Ingeniero  Agrónomo[1]
Incumbencias Del Ingeniero Agrónomo[1]
 

Similaire à pagina html (20)

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
 
Practicas html
Practicas htmlPracticas html
Practicas html
 
Escuela Abierta - Taller de Html
Escuela Abierta - Taller de HtmlEscuela Abierta - Taller de Html
Escuela Abierta - Taller de Html
 
Curso html
Curso htmlCurso html
Curso html
 
Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02
 
Manual html
Manual htmlManual html
Manual html
 
Manual html
Manual htmlManual html
Manual html
 
Manual de html
Manual de htmlManual de html
Manual de html
 
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
 
Tpd 02
Tpd 02Tpd 02
Tpd 02
 
Consulta de html
Consulta de html Consulta de html
Consulta de html
 
Clase 1
Clase 1Clase 1
Clase 1
 
Guia de html
Guia de  htmlGuia de  html
Guia de html
 
Manual html
Manual htmlManual html
Manual html
 
HTML
HTMLHTML
HTML
 
HTML
HTMLHTML
HTML
 
Semana 5 html
Semana 5  htmlSemana 5  html
Semana 5 html
 
html
htmlhtml
html
 
El mejor curso de html lección no.1
El mejor curso de html lección no.1El mejor curso de html lección no.1
El mejor curso de html lección no.1
 

Plus de diana

Instituci%C3%B3n%20 Educativa%20 Municipal%20 Luis%20 Eduardo%20 Mora%20 Osej...
Instituci%C3%B3n%20 Educativa%20 Municipal%20 Luis%20 Eduardo%20 Mora%20 Osej...Instituci%C3%B3n%20 Educativa%20 Municipal%20 Luis%20 Eduardo%20 Mora%20 Osej...
Instituci%C3%B3n%20 Educativa%20 Municipal%20 Luis%20 Eduardo%20 Mora%20 Osej...
diana
 
Instituci%C3%B3n%20 Educativa%20 Municipal%20 Luis%20 Eduardo%20 Mora%20 Osej...
Instituci%C3%B3n%20 Educativa%20 Municipal%20 Luis%20 Eduardo%20 Mora%20 Osej...Instituci%C3%B3n%20 Educativa%20 Municipal%20 Luis%20 Eduardo%20 Mora%20 Osej...
Instituci%C3%B3n%20 Educativa%20 Municipal%20 Luis%20 Eduardo%20 Mora%20 Osej...
diana
 

Plus de diana (11)

diana estefania huertas
diana estefania huertasdiana estefania huertas
diana estefania huertas
 
diana estefania huertas villota
diana estefania huertas villotadiana estefania huertas villota
diana estefania huertas villota
 
diana estefania huertas villota
diana estefania huertas villotadiana estefania huertas villota
diana estefania huertas villota
 
diana estefania huertas villota
diana estefania huertas villotadiana estefania huertas villota
diana estefania huertas villota
 
diana estefania huertas
diana estefania huertasdiana estefania huertas
diana estefania huertas
 
diana estefania huertas
diana estefania huertasdiana estefania huertas
diana estefania huertas
 
diana estefania huerta
diana estefania huertadiana estefania huerta
diana estefania huerta
 
diana estefania huertas villota
diana estefania huertas villotadiana estefania huertas villota
diana estefania huertas villota
 
diana estefania huertas villota
diana estefania huertas villotadiana estefania huertas villota
diana estefania huertas villota
 
Instituci%C3%B3n%20 Educativa%20 Municipal%20 Luis%20 Eduardo%20 Mora%20 Osej...
Instituci%C3%B3n%20 Educativa%20 Municipal%20 Luis%20 Eduardo%20 Mora%20 Osej...Instituci%C3%B3n%20 Educativa%20 Municipal%20 Luis%20 Eduardo%20 Mora%20 Osej...
Instituci%C3%B3n%20 Educativa%20 Municipal%20 Luis%20 Eduardo%20 Mora%20 Osej...
 
Instituci%C3%B3n%20 Educativa%20 Municipal%20 Luis%20 Eduardo%20 Mora%20 Osej...
Instituci%C3%B3n%20 Educativa%20 Municipal%20 Luis%20 Eduardo%20 Mora%20 Osej...Instituci%C3%B3n%20 Educativa%20 Municipal%20 Luis%20 Eduardo%20 Mora%20 Osej...
Instituci%C3%B3n%20 Educativa%20 Municipal%20 Luis%20 Eduardo%20 Mora%20 Osej...
 

Dernier

redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
nicho110
 

Dernier (12)

Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
 
investigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIinvestigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXI
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptx
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 

pagina html

  • 1. InstItucIón EducatIva MunIcIpal luIs Eduardo Mora osEjo Nombre: guiovanny romo Correo: puper3092@hotmail.com Grado: 10 computación j-m Área: Programación Nombre: Jairo S Inagan Gomez
  • 2. crEacIón dE págInas WEb con HtMl Para crear páginas Web con los códigos HTML debemos seguir algunos pasos: 1. abrir el bloc de notas que es el programa a usar::: 2. Debemos usar unas etiquetas para empezar y abrir nuestros documentos Estas etiquetas debemos abrir con un mayor y un menor que (< y >) y al finalizar cada una debemos anteponerle el slash así las más importantes son:
  • 3. 3. Donde esta las etiquetas title en medio de estas ponemos el titulo que saldrá en la parte de arriba del navegador y en medio de las etiquetas body que quiere decir cuerpo podemos escribir todo nuestro contenido con otras etiquetas que ayudan a modificar la pagina como podemos ver:: 4. la etiqueta body tiene algunos atributos que modifiquen el texto como estas:
  • 4. 5. Agregamos a body estos atributos los más convenientes para modificar nuestra pagina como por ejemplo cambiarle el color de fondo y el color del texto se puede con códigos de colores o simplemente en color en ingles y esto siempre entre comillas:
  • 5. 6.Podemos utilizar también los protocolos más importantes como miramos acontinuación para modificar texto: como <p> </p>para salto de línea y demas:
  • 6. 6. Podemos mirar algunos cambios con esta información y añadir a nuestra pagina para mejorar el texto en todo su formato….:
  • 8. 7. Pero tenemos en cuenta que ala hora de guardar tenemos que hacerlo con lo que tu quieras de nombre y al finalizar siempre debe ir .html y guardar como tipo todos los archivos así:
  • 9. ….ESTO FUE LO MAS BASICO EN LA CREACION DE TU PRIMERA PAGINA CON HML Para mejorar y modificar nuestra primera página tenemos en cuenta algunos aspectos diferentes al texto…como agregar imagen u otra página enlazada animaciones, videos, etc.…. Para imagen….copiamos el código respectivo y agregamos en una misma carpeta la imagen deseada…
  • 10. Para un enlace hacemos casi lo mismo… copiamos el código adecuado y la dirección correcta y lo agregamos a nuestra pagina… Para un video en nuestra pagina copiamos el código embebido o (embed) de cualquier servidor gratuito de videos como YOUTUBE entre otros y lo colocamos en nuestro bloc y actualizamos respectivamente.
  • 11. Así nos quedara nuestra página con video: Pero a medida que vamos avanzando nuestro aprendizaje con HTML podemos ir mejorando nuestra página y modificando de acuerdo con nuestra necesidad….
  • 12. Eso es todo... Espero que sea entendible a las prácticas a realizar, GRACIAS...