SlideShare una empresa de Scribd logo
1 de 15
ALEXA GUERRERO
CREA TU PAGINA WEB
(HTML)
QUE ES HTML
HTML: (HyperText Markup Language).
Lenguaje de marcado de Hipertexto. Es el
lenguaje estándar para describir el contenido
y la apariencia de las páginas en el WWW.
Paso 1 Abrir bloc de notas
Primero abrir el bloc de notas desde el
explorador Windows.
Paso 2 <html></html>
Iniciar la estructura de la página web con
el código HTML.Abre la instrucción
<html> y no olvides cerrarla
</html>.Dentro de ella se almacenara
todo el código de la página HTML.
PASO 3 <head></head>
Ubícate dentro de las instrucciones
<html> y abre una nueva instrucción:
<head>, no olvides cerrarla
</head>.Aquí ubicaremos el título de la
página que aparecerá en una pestaña
del navegador.
PASO 4 <title></title>
Dentro de las instrucciones <head>
ubicamos una nueva: <title> la cual
establecerá el título de la página, no
olvides cerrarla </title>.Puedes
escribir el título de tu página dentro de
estas instrucciones. En este caso se
llamará CRUZ ROJA PILOSITOS..
PASO 5 <body></body>
Abre la instrucción <body> dentro de
esta irá todo el cuerpo de la página
web, solo lo que se enuentre aquí se
pordra visualizar en pantalla, no olvides
cerrarla </body>
PASO 6 <h1> </h1>
Ubícate dentro de la instrucción <body> para
incluir un titulo a tu página, hazlo con la
instrucción <h1> que sirve para agregar
encabezados, no olvides cerrar la intruccion
</h1>.Dentro de ellas puedes escribir un
título.
PASO 7 <p> </p>
Aun dentro de la instrucción <body> agrega párrafos con la instrucción
<p>, no olvides cerrarla </p>.Escribe un pequeño párrafo.
Paso 8 <body bgcolor=?>
Le hace falta un color de fondo ¿verdad?Utiliza la instrucción Bgcolor, añade al
<body> así como se muestra en la imagen. El color debe escribirse en ingles o
hexadecimal (es el color codificado en letras y números).
Paso 9
Dentro del <body> introducimos el siguiente codigo:
<IMG SRC=”imágenes/pilositos.jpg”></IMG>
donde src = "imágenes/pilositos.jpg" Indica el nombre del fichero gráfico a
mostrar.
Paso 10 Marquesina
<MARQUEE> Sirve para animar elementos dentro de una pagina
Permite que el contenido que pongamos dentro de la etiqueta se desplace
horizontalmente por la pagina.
Dentro del
<body>
introducimos el
siguiente
codigo:
Paso 11 <font color =?></font>
Por ultimo introducir el código del color del titulo PILOSITOS usando valor
hexadecimal o nombre directo (blue, green, etc.) dentro <p>…</p> con el siguiente
código: <font color =?></font>
Paso 12 guardar archivo como html
Haz clic en Archivo,
Guardar
Como:Codigo.html porque
es una página de inicio, y
escoges enTipo de
documento: Todos los
archivos.Ubica el archivo
en el escritorio para que
sea de facil acceso.
Mostrar pagina terminada

Más contenido relacionado

La actualidad más candente

La actualidad más candente (11)

Comando y ejercicios para HTML
Comando y ejercicios para HTMLComando y ejercicios para HTML
Comando y ejercicios para HTML
 
Etiquetas del html
Etiquetas del htmlEtiquetas del html
Etiquetas del html
 
Sublime Text: tu aliado para mantener tu web
Sublime Text: tu aliado para mantener tu webSublime Text: tu aliado para mantener tu web
Sublime Text: tu aliado para mantener tu web
 
Como crear una pagina web
Como crear una pagina webComo crear una pagina web
Como crear una pagina web
 
Como crear una pagina web
Como crear una pagina webComo crear una pagina web
Como crear una pagina web
 
Pagina web con doctype
Pagina web con doctypePagina web con doctype
Pagina web con doctype
 
Creacion de pagina web
Creacion de pagina webCreacion de pagina web
Creacion de pagina web
 
Instalar wordpress con fantastico de luxe
Instalar wordpress con fantastico de luxeInstalar wordpress con fantastico de luxe
Instalar wordpress con fantastico de luxe
 
HT 2-4
HT 2-4HT 2-4
HT 2-4
 
2° pagina web html5
2° pagina web html52° pagina web html5
2° pagina web html5
 
Diapositivas
DiapositivasDiapositivas
Diapositivas
 

Destacado

Probabilidad
ProbabilidadProbabilidad
Probabilidadmapezim
 
Presentación1
Presentación1Presentación1
Presentación1Llelismar
 
Tic (feliú, beletti y carmarán)
Tic (feliú, beletti y carmarán)Tic (feliú, beletti y carmarán)
Tic (feliú, beletti y carmarán)Guillermina199
 
Diapositiva 1 trabajo de proyectos
Diapositiva 1 trabajo de proyectosDiapositiva 1 trabajo de proyectos
Diapositiva 1 trabajo de proyectoschone1987
 
Manual%20para%20el%20constructor
Manual%20para%20el%20constructorManual%20para%20el%20constructor
Manual%20para%20el%20constructorEmanuel Flores
 
Chimborazo
ChimborazoChimborazo
Chimborazomishelr
 
Presentación1
Presentación1Presentación1
Presentación1santato
 
Tsunamis
TsunamisTsunamis
Tsunamisviti02
 
Simbolos patrios
Simbolos patriosSimbolos patrios
Simbolos patriosSChigne
 
Planificador de proyectos
Planificador de proyectos Planificador de proyectos
Planificador de proyectos Fabian Gomez
 
Noticia del incendio acaecido en esta Corte en el Portal de Paños, la noche d...
Noticia del incendio acaecido en esta Corte en el Portal de Paños, la noche d...Noticia del incendio acaecido en esta Corte en el Portal de Paños, la noche d...
Noticia del incendio acaecido en esta Corte en el Portal de Paños, la noche d...La Gatera de la Villa
 
Presentacion capitulo 3
Presentacion capitulo 3Presentacion capitulo 3
Presentacion capitulo 3Lorenita Lopez
 

Destacado (19)

Probabilidad
ProbabilidadProbabilidad
Probabilidad
 
Juvenal aguilera youtube
Juvenal aguilera youtubeJuvenal aguilera youtube
Juvenal aguilera youtube
 
Presentación1
Presentación1Presentación1
Presentación1
 
Tic (feliú, beletti y carmarán)
Tic (feliú, beletti y carmarán)Tic (feliú, beletti y carmarán)
Tic (feliú, beletti y carmarán)
 
CleverCV
CleverCVCleverCV
CleverCV
 
Disable stair
Disable stairDisable stair
Disable stair
 
Inventos exoticos
Inventos exoticosInventos exoticos
Inventos exoticos
 
Gmc portafolio actividad_integradora
Gmc portafolio actividad_integradoraGmc portafolio actividad_integradora
Gmc portafolio actividad_integradora
 
Diapositiva 1 trabajo de proyectos
Diapositiva 1 trabajo de proyectosDiapositiva 1 trabajo de proyectos
Diapositiva 1 trabajo de proyectos
 
Aborto
AbortoAborto
Aborto
 
Manual%20para%20el%20constructor
Manual%20para%20el%20constructorManual%20para%20el%20constructor
Manual%20para%20el%20constructor
 
Chimborazo
ChimborazoChimborazo
Chimborazo
 
Presentación1
Presentación1Presentación1
Presentación1
 
Tsunamis
TsunamisTsunamis
Tsunamis
 
Simbolos patrios
Simbolos patriosSimbolos patrios
Simbolos patrios
 
Presentación Planes de gestión de la Red Natura 2000. Doñana
Presentación Planes de gestión de la Red Natura 2000. DoñanaPresentación Planes de gestión de la Red Natura 2000. Doñana
Presentación Planes de gestión de la Red Natura 2000. Doñana
 
Planificador de proyectos
Planificador de proyectos Planificador de proyectos
Planificador de proyectos
 
Noticia del incendio acaecido en esta Corte en el Portal de Paños, la noche d...
Noticia del incendio acaecido en esta Corte en el Portal de Paños, la noche d...Noticia del incendio acaecido en esta Corte en el Portal de Paños, la noche d...
Noticia del incendio acaecido en esta Corte en el Portal de Paños, la noche d...
 
Presentacion capitulo 3
Presentacion capitulo 3Presentacion capitulo 3
Presentacion capitulo 3
 

Similar a Expo html alexandra

Similar a Expo html alexandra (20)

Tutorial ejercicio 1
Tutorial ejercicio 1Tutorial ejercicio 1
Tutorial ejercicio 1
 
Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02
 
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 sistemas 1
Html sistemas 1Html sistemas 1
Html sistemas 1
 
Html sistemas
Html sistemasHtml sistemas
Html sistemas
 
Tpd 02
Tpd 02Tpd 02
Tpd 02
 
Ejercicio html primer año
Ejercicio html primer añoEjercicio html primer año
Ejercicio html primer año
 
Como hacer una página web
Como hacer una página webComo hacer una página web
Como hacer una página web
 
Clase 2 Desarrollo Web
Clase 2 Desarrollo Web Clase 2 Desarrollo Web
Clase 2 Desarrollo Web
 
Practico html
Practico htmlPractico html
Practico html
 
Practico html
Practico htmlPractico html
Practico html
 
Creacion de paginas web con html (Diana Lopez)
Creacion de paginas web con html (Diana Lopez)Creacion de paginas web con html (Diana Lopez)
Creacion de paginas web con html (Diana Lopez)
 
¿Como Hacer una página web? Diana Lopez
¿Como Hacer una página web?  Diana Lopez¿Como Hacer una página web?  Diana Lopez
¿Como Hacer una página web? Diana Lopez
 
Alexander y diego paginas de html
Alexander y diego paginas de htmlAlexander y diego paginas de html
Alexander y diego paginas de html
 
Practicas html
Practicas htmlPracticas html
Practicas html
 
Kevin veloza ne final de año 901 html
Kevin veloza ne final de año 901 htmlKevin veloza ne final de año 901 html
Kevin veloza ne final de año 901 html
 
Colegio nacional nicolás esguerra (1)
Colegio nacional nicolás esguerra (1)Colegio nacional nicolás esguerra (1)
Colegio nacional nicolás esguerra (1)
 
PresentacióN Html
PresentacióN HtmlPresentacióN Html
PresentacióN Html
 
PresentacióN Html
PresentacióN HtmlPresentacióN Html
PresentacióN Html
 
Manual html
Manual htmlManual html
Manual html
 

Más de Leo Montealegre

Más de Leo Montealegre (7)

Entorno Computacional
Entorno ComputacionalEntorno Computacional
Entorno Computacional
 
Formacion por proyectos
Formacion por proyectosFormacion por proyectos
Formacion por proyectos
 
Programación flisol 2013 (1)
Programación flisol 2013 (1)Programación flisol 2013 (1)
Programación flisol 2013 (1)
 
Articulo flisol 2013
Articulo flisol 2013Articulo flisol 2013
Articulo flisol 2013
 
Slideshare presentacion
Slideshare presentacionSlideshare presentacion
Slideshare presentacion
 
Hipi3
Hipi3Hipi3
Hipi3
 
Dropbox
DropboxDropbox
Dropbox
 

Expo html alexandra

  • 1. ALEXA GUERRERO CREA TU PAGINA WEB (HTML)
  • 2. QUE ES HTML HTML: (HyperText Markup Language). Lenguaje de marcado de Hipertexto. Es el lenguaje estándar para describir el contenido y la apariencia de las páginas en el WWW.
  • 3. Paso 1 Abrir bloc de notas Primero abrir el bloc de notas desde el explorador Windows.
  • 4. Paso 2 <html></html> Iniciar la estructura de la página web con el código HTML.Abre la instrucción <html> y no olvides cerrarla </html>.Dentro de ella se almacenara todo el código de la página HTML.
  • 5. PASO 3 <head></head> Ubícate dentro de las instrucciones <html> y abre una nueva instrucción: <head>, no olvides cerrarla </head>.Aquí ubicaremos el título de la página que aparecerá en una pestaña del navegador.
  • 6. PASO 4 <title></title> Dentro de las instrucciones <head> ubicamos una nueva: <title> la cual establecerá el título de la página, no olvides cerrarla </title>.Puedes escribir el título de tu página dentro de estas instrucciones. En este caso se llamará CRUZ ROJA PILOSITOS..
  • 7. PASO 5 <body></body> Abre la instrucción <body> dentro de esta irá todo el cuerpo de la página web, solo lo que se enuentre aquí se pordra visualizar en pantalla, no olvides cerrarla </body>
  • 8. PASO 6 <h1> </h1> Ubícate dentro de la instrucción <body> para incluir un titulo a tu página, hazlo con la instrucción <h1> que sirve para agregar encabezados, no olvides cerrar la intruccion </h1>.Dentro de ellas puedes escribir un título.
  • 9. PASO 7 <p> </p> Aun dentro de la instrucción <body> agrega párrafos con la instrucción <p>, no olvides cerrarla </p>.Escribe un pequeño párrafo.
  • 10. Paso 8 <body bgcolor=?> Le hace falta un color de fondo ¿verdad?Utiliza la instrucción Bgcolor, añade al <body> así como se muestra en la imagen. El color debe escribirse en ingles o hexadecimal (es el color codificado en letras y números).
  • 11. Paso 9 Dentro del <body> introducimos el siguiente codigo: <IMG SRC=”imágenes/pilositos.jpg”></IMG> donde src = "imágenes/pilositos.jpg" Indica el nombre del fichero gráfico a mostrar.
  • 12. Paso 10 Marquesina <MARQUEE> Sirve para animar elementos dentro de una pagina Permite que el contenido que pongamos dentro de la etiqueta se desplace horizontalmente por la pagina. Dentro del <body> introducimos el siguiente codigo:
  • 13. Paso 11 <font color =?></font> Por ultimo introducir el código del color del titulo PILOSITOS usando valor hexadecimal o nombre directo (blue, green, etc.) dentro <p>…</p> con el siguiente código: <font color =?></font>
  • 14. Paso 12 guardar archivo como html Haz clic en Archivo, Guardar Como:Codigo.html porque es una página de inicio, y escoges enTipo de documento: Todos los archivos.Ubica el archivo en el escritorio para que sea de facil acceso.