Creacion de paginas web con html (Diana Lopez)

18
CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web... ¿Sabias que puedes crear una página web sencilla con el Bloc de Notas? Aquí aprenderás como hacerlo, solo necesitas saber HTML...

Transcript of Creacion de paginas web con html (Diana Lopez)

Page 1: Creacion de paginas web con html (Diana Lopez)

CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web...

¿Sabias que puedes crear una página web sencilla con el Bloc de Notas?

Aquí aprenderás como hacerlo, solo necesitas saber HTML...

Page 2: Creacion de paginas web con html (Diana Lopez)

¿Que es una página web?

Es un documento electrónico que cuenta con imágenes, texto, video, audio y demás recursos multimediales para comunicar información a través de la web o internet.

y... ¿para que me sirve una página web?

CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web...

Page 3: Creacion de paginas web con html (Diana Lopez)

¿Para que sirve una página web?

Las páginas web, te permiten navegar de una página de documento a otra, compartir informacion con millones de personas en el mundo asi como también ellos pueden ver la información de tu página. Son creadas básicamente con código HTML.

ahora... ¿conoce el HTML?

CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web...

Page 4: Creacion de paginas web con html (Diana Lopez)

¿Que es HTML?HTML (HyperText Markup Language ó Lenguaje de Marcado de Hipertexto).

Es el lenguaje con que se definen las páginas web, contiene un conjunto de instrucciones que sirven para incluir el texto y otros elementos que contienen la página web.

¿Como utilizar el HTML?

CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web...

Page 5: Creacion de paginas web con html (Diana Lopez)

Estructura LógicaToda página web empieza con la etiqueta <HTML> dentro de la cual se almacena todo el código de la página web.

Recuerda que las instrucciones HTML deben abrirse con los operadores < > y cerrarse con </ >, asi como se muestra en la imagen.

¿Que es el Head?

CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web...

Page 6: Creacion de paginas web con html (Diana Lopez)

Estructura LógicaA continuación se ubica el <HEAD>, o cabecera, dentro de la cual se ubica el título de la página web, este es reconocido, en una de sus pestañas, por el navegador que permite visualizarla.

¿Que es el Body?

Titulo de la pagina web

CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web...

Page 7: Creacion de paginas web con html (Diana Lopez)

Estructura LógicaEl <Body> permite almacenar todo el código que necesitas para insertar tablas, párrafos, imágenes, colores, enlaces, y demás recursos que necesite tu página web, lo que se encuentre aquí se visualizará en pantalla.

No olvides que todas las instrucciones que abras (<body>) necesitaran cerrarse (</body>).

!Hagamos una página web!

CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web...

Page 8: Creacion de paginas web con html (Diana Lopez)

HAGAMOS UNA PÁGINA WEBA continuación crearemos una página web paso a paso, para que puedas comprender mejor.

PASO 1.Abrir el editor de texto sin formato (bloc de notas).

!Hagamos una página web!

CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web...

Page 9: Creacion de paginas web con html (Diana Lopez)

HAGAMOS UNA PÁGINA WEBPASO 2.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.

!Hagamos una página web!

CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web...

Page 10: Creacion de paginas web con html (Diana Lopez)

HAGAMOS UNA PÁGINA WEBPASO 3.Ubicate 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.

!Hagamos una página web!

CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web...

Page 11: Creacion de paginas web con html (Diana Lopez)

HAGAMOS UNA PÁGINA WEBPASO 4.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á MIPAGINA, sin espacios.

!Hagamos una página web!

CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web...

Page 12: Creacion de paginas web con html (Diana Lopez)

HAGAMOS UNA PÁGINA WEB

PASO 5.

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>.

!Hagamos una página web!

CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web...

Page 13: Creacion de paginas web con html (Diana Lopez)

HAGAMOS UNA PÁGINA WEBPASO 6.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.

!Hagamos una página web!

CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web...

Page 14: Creacion de paginas web con html (Diana Lopez)

HAGAMOS UNA PÁGINA WEBPASO 7.Aun dentro de la instrucción <body> agrega párrafos con la instrucción <p>, no olvides cerrarla </p>.

Escríbe un pequeño párrafo.

!Hagamos una página web!

CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web...

Page 15: Creacion de paginas web con html (Diana Lopez)

HAGAMOS UNA PÁGINA WEBPASO 8.Le hace falta un color de fondo ¿verdad?Utiliza la instrucción Bgcolor, añade al <body> asi como se muestra en la imagen.El color debe escribirse en ingles o hexadecimal (es el color codificado en letras y números).

!Hagamos una página web!

CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web...

Page 16: Creacion de paginas web con html (Diana Lopez)

GUARDAR LA PÁGINA WEBHaz clic en Archivo, Guardar Como:

Index.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.

¡Y a Guardar y ejecutar nuestra página web!

CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web...

Page 17: Creacion de paginas web con html (Diana Lopez)

¡PROBEMOS!

Si ubicaste el archivo en el escritorio de tu computador, solo debes ir allí y hacer doble clic en el archivo, el cual tendrá un icono con la imagen de tu navegador.Y a disfrutar de tu pequeña pagina web.

CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web...

Veamos como resultó la pagina web... por ahora

Page 18: Creacion de paginas web con html (Diana Lopez)

¡PROBEMOS!¡MI PAGINA WEB!

CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web...

Vé y practica más diseños a tu gusto...