49
Creación Paginas Web HIPI III

Html

Embed Size (px)

Citation preview

Page 1: Html

Creación Paginas Web

HIPI III

Page 2: Html

H yper

Text

Markup

Language

«etiquetas», rodeadas por corchetes angulares (<,>)

MIME: Multipurpose Internet Mail Extensions

[Lenguaje de Marcado de Hipertexto ]

Page 3: Html

HTML Tags (Etiquetas HTML), Tim Berners-Lee en 1991

Boceto Hypertext Markup Language de Berners-Lee y Dan Connolly, el cual incluía una Definición de Tipo de Documento

SGML para definir la gramática

IETF Internet EngineeringTaskForce (Grupo Especial sobre Ingeniería de Internet1 )

SGML son las siglas de Standard Generalized Markup Language o "Estándar de Lenguaje de Marcado Generalizado"

Page 4: Html

El W3C (World Wide Web Consortiun) es un consorcio internacional donde Organizaciones miembro, Personal Full-time y el público en general trabajan para

desarrollar Estándares Web. La misión del W3C es la de maximizar el potencial de la WWW desarrollando

protocolos y guías que aseguren el crecimiento futuro de la Web.

W3C

Page 5: Html
Page 6: Html

NOCIONES BÁSICAS DE HTML

El lenguaje HTML puede ser creado y editado con cualquier editor de textos básico, como

puede ser Gedit en Linux, el Bloc de notas de Windows, o cualquier otro editor que admita

texto sin formato como GNU Emacs, Microsoft Wordpad, TextPad, Vim, Notepad++, entre otros.

Page 7: Html

Algunos tipos de Elementos:

Estructurales:Describen el propósito del texto y no denotan ningún formato específico. Por ejemplo: <h1>Curso HTML</h1> Presentacion:Describen la apariencia del texto, independientemente de su función. Por ejemplo: <b>Curso HTML</b> Los elementos de presentación se encuentran obsoletos desde la aparición del CSS. HiperTexto:Relaciona una parte del documento a otros documentos. Por ejemplo: <a href=“http://www.cema.edu.ar”>Universidad del Cema</a>

Tipos de Elementos

Page 8: Html

Toda página web empieza con la etiqueta <HTML> dentro de la cual se almacena todo el código de la página web.Las instrucciones HTML deben abrirse con los operadores < > y cerrarse con </ >.

Estructura Lógica

Page 9: Html

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

Page 10: Html

El <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.Todas las instrucciones que abras (<body>)

necesitaran cerrarse (</body>)

Page 11: Html

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

Page 12: Html

PASO 2.Iniciar la estructura de la página web con el código HTML

Page 13: Html

PASO 3.Ubicate dentro de las instrucciones <html> y abre una nueva instrucción: <head>, no olvides cerrarla </head>.

Page 14: Html

PASO 4.Dentro de las instrucciones <head> ubicamos una nueva: <title> la cual establecerá el título de la página, no olvides cerrarla </title>

Page 15: Html

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>

Page 16: Html

PASO 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 instrucción </h1>.Dentro de ellas puedes escribir un título

Page 17: Html

PASO 7.Aun dentro de la instrucción <body> agrega párrafos con la instrucción <p>, no olvides cerrarla </p>

Page 18: Html

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!

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.

Page 19: Html
Page 20: Html
Page 21: Html
Page 22: Html
Page 23: Html
Page 24: Html
Page 25: Html
Page 26: Html

PASO 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)

Page 27: Html
Page 28: Html
Page 29: Html
Page 30: Html
Page 31: Html
Page 32: Html
Page 33: Html
Page 34: Html
Page 35: Html
Page 36: Html
Page 37: Html
Page 38: Html
Page 39: Html
Page 40: Html
Page 41: Html
Page 42: Html
Page 43: Html
Page 44: Html
Page 45: Html
Page 46: Html
Page 47: Html
Page 48: Html
Page 49: Html

<!doctype html><html><head><script type=