Top Banner
CURSO DE HTML MAYDIS www.maydis.es https://www.facebook.com/maydisweb @maydisweb HOLA MUNDO
14

TUTORIAL MAYDIS HTML. HOLA MUNDO

Jul 10, 2015

Download

Education

Silvya Arroyo

Primer Tutorial Maydis de HTML.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: TUTORIAL MAYDIS HTML. HOLA MUNDO

CURSO DE HTML

MAYDIS

www.maydis.es

https://www.facebook.com/maydisweb

@maydisweb

HOLA MUNDO

Page 2: TUTORIAL MAYDIS HTML. HOLA MUNDO

INTRODUCCION

• ¿Qué significa HTML?– HyperText Markup Language («lenguaje de

marcas de hipertexto»).– HTML es un texto escrito con una sintaxis

particular que el navegador es capaz de leer y aplicar

Page 3: TUTORIAL MAYDIS HTML. HOLA MUNDO

HERRAMIENTAS

• Es el lenguaje que se utiliza para hacer las paginas web

• Las paginas web se pueden hacer a través de 2 herramientas:

– Programas como Adobe Dreamweaber– Editores de texto como Notepad ++: Lo vamos

a utilizar en este tutorial.

Page 4: TUTORIAL MAYDIS HTML. HOLA MUNDO

ELEMENTOS DEL LENGUAJE

• El lenguaje HTML consta de etiquetas como <img>, atributos como <id> y elementos anteriores como <center>.

• En los siguientes tutoriales las iremos explicando hasta lograr nuestra pagina web.

Page 5: TUTORIAL MAYDIS HTML. HOLA MUNDO

EMPEZAMOS

• Para crear una pagina web es muy sencillo.

• Solo hay que tener en cuenta que:– La pagina web consta de 2 partes:

• <head>• <body>

Page 6: TUTORIAL MAYDIS HTML. HOLA MUNDO

<!DOCTYPE>

• Nada mas abrir nuestro editor de texto, lo primero que vamos a poner es lo siguiente:

– <!DOCTYPE html>– ¿Qué significa esto?

• Con esto le estamos indicando a nuestro navegador que interprete el lenguaje HTML, para que nosotros podamos visualizar correctamente nuestra futura pagina web.

Page 7: TUTORIAL MAYDIS HTML. HOLA MUNDO

<HTML>

• A continuación empezamos poniendo la etiqueta <html>, que indica el comienzo de nuestra pagina web.

• No debemos olvidar en cerrar esta etiqueta de esta forma </html>

• Todo lo que haya dentro de estas etiquetas sera nuestra pagina web.

Page 8: TUTORIAL MAYDIS HTML. HOLA MUNDO

<HEAD>

• A continuación dentro de <html> ponemos la etiqueta <head>, que significa cabeza.

• Todo lo que ponemos dentro de esta etiqueta es invisible para los usuarios que ven nuestra pagina web, pero no para nuestro código fuente.

• No se nos tiene que olvidar el cerrar la etiqueta </head>

Page 9: TUTORIAL MAYDIS HTML. HOLA MUNDO

<HEAD>

• Dentro de esta etiqueta pondremos los siguientes elementos:– <title></title>: Este es el texto que sale en la

pestaña de nuestro navegador– Metadatos: Estos datos solo son necesarios

para hacer estrategias SEO

Page 10: TUTORIAL MAYDIS HTML. HOLA MUNDO

<BODY>

• Significa cuerpo.

• Aquí pondremos todo lo que es visible en nuestra pagina web.

• No se debe olvidar el cerrarla: </body>

Page 11: TUTORIAL MAYDIS HTML. HOLA MUNDO

HOLA MUNDO

• Para que el texto “Hola Mundo” se vea en nuestra pagina web, vamos a utilizar la etiqueta de parrafo: <p>

• Esta etiqueta le dice al navegador que escriba la frase que pongamos dentro de esta etiqueta.

• No hay que olvidarse de cerrarla: </p>

• Mira el ejemplo:

Page 12: TUTORIAL MAYDIS HTML. HOLA MUNDO

NUESTRO CODIGO FUENTEAsí quedaría todo nuestro código fuente escrito en nuestro editor de texto

Page 13: TUTORIAL MAYDIS HTML. HOLA MUNDO

AHORA GUARDA ESE CODIGO FUENTE CON EL SIGUIENTE PROCEDIMIENTO:Pinchamos en Lenguaje y seleccionamos H, y a continuación HTMLGuardamos el documento en: Archivo-Guardar Como, y le pones el nombre quierasUna vez guardado, ejecutas en el ordenador el documento guardado y mira el resultadoYa tienes tu primera pagina web!!!Sencillo no…!!!

No olvides mirar el siguiente tutorial: Como poner una imagen

Page 14: TUTORIAL MAYDIS HTML. HOLA MUNDO

HASTA LA PROXIMA!!

www.maydis.es