Introduccion a html
15
@ joaquinls Introducción a HTML Joaquín Lara Sierra Introducción a HTML by Joaquin Lara Sierra is licensed under a Creative Commons Reconocimiento-CompartirIgual 4.0 Internacional License. Puede hallar permisos más allá de los concedidos con esta licencia en http://www.unitecnologica.edu.co 1
-
Upload
joaquin-lara-sierra -
Category
Education
-
view
257 -
download
0
description
Introducción a HTML Joaquin Lara Sierra Universidad Tecnológica de Bolivar
Transcript of Introduccion a html
@joaquinls
Introducción a HTML
Joaquín Lara Sierra
Introducción a HTML by Joaquin Lara Sierra is licensed under a Creative Commons Reconocimiento-CompartirIgual 4.0 Internacional License.
Puede hallar permisos más allá de los concedidos con esta licencia en http://www.unitecnologica.edu.co
1
@joaquinls
De que hablar
• ¿Qué es HTML?
• Contexto Histórico
• Historia de html
• ¿Por qué aprender HTML?
2
@joaquinls
HTML, siglas de HyperText Markup Language («lenguaje
de marcas de hipertexto»), hace referencia al lenguaje de
marcado para la elaboración de páginas web. Es un
estándar que sirve de referencia para la elaboración de
páginas web en sus diferentes versiones, define una
estructura básica y un código (denominado código HTML)
para la definición de contenido de una página web, como
texto, imágenes, etc. Es un estándar a cargo de la W3C,
organización dedicada a la estandarización de casi todas
las tecnologías ligadas a la web, sobre todo en lo referente
a su escritura e interpretación. Es el lenguaje con el que se
definen las páginas web.
Contexto Porqué html? Iniciando Estructura Enfoques Ejemplos¿Qué es?
3
@joaquinls
HTML5, la última versión del Hypertext Markup Language
(HTML), es la versión más radical del lenguaje a la fecha.
Esta presenta muchos recursos nuevos en una variedad
de áreas. Algunas de las adiciones más notables incluyen:
• Etiquetas integradas multimedia para audio y video
• Un bastidor para dibujar contenido en el navegador
• Formatos más inteligentes que le permiten hacer cosas
como validación mediante el uso de un atributo
requerido
Contexto Porqué html? Iniciando Estructura Enfoques Ejemplos¿Qué es?
4
@joaquinls
Contexto
• Tim Berners-Lee creó el HTML original en 1989 para
solucionar las deficiencias de los métodos existentes para
acceder a información en Internet. Desde que se concibió,
encontrar su camino en Internet era una tarea difícil.
• HTTP es un protocolo de servicio utilizado para entregar
contenido.
• La combinación de HTTP y HTML ofrece una navegación
rápida y fácil por el contenido en Internet, al permitirle
simplemente hacer clic en los enlaces de texto para
navegar entre documentos.
• Después de crear estas dos tecnologías, Berners-Lee
continuó y fundó el World Wide Web Consortium (W3C)
Porqué html? Iniciando Estructura Enfoques Ejemplos¿Qué es?
5
@joaquinls
Cada página web que ves está escrita en un lenguaje
llamado HTML. Imagina que HTML es el esqueleto que le
da estructura a cada página web. En este curso, usaremos
HTML para añadir párrafos, encabezados, imágenes y
enlaces a una página web.
Contexto Porqué html? Iniciando Estructura Enfoques Ejemplos¿Qué es?
6
@joaquinls
Sin importar las capacidades de sus navegadores objetivo,
usted debe decirle al navegador que usted desea que su
contenido sea presentado usando la especificación
HTML5. Usted hace esto usando la declaración doctype.
Afortunadamente, la declaración doctype se ha
simplificado bastante en HTML5. De hecho es sólo una.
Para que su navegador presente en pantalla usando la
especificación HTML5
Contexto Navegadores Iniciando Estructura Enfoques Ejemplos¿Qué es?
<!DOCTYPE html>
7
@joaquinls
El HTML se escribe en forma de
«etiquetas», rodeadas por corchetes
angulares (<,>). HTML también
puede describir, hasta un cierto
punto, la apariencia de un
documento, y puede incluir o hacer
referencia a un tipo de programa
llamado script, el cual puede afectar
el comportamiento de navegadores
web y otros procesadores de HTML.
Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es?
8
@joaquinls
Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es?
9
<!DocType html> Declaración de tipo documento
<html> Define el inicio del documento html
</html> Define el final del documento html
<head> Define el encabezado del documento html
</head> Define el cierre del encabezado del documento html
<body> Define el cuerpo del documento html
</body> Define el cierre del cuerpo del documento html
<h1> Define tipos de encabezados del documento html
</h1> Define el cierre del encabezado h1
Mi Primera Pagina Web Texto para el encabezado h1
<p> Define apertura para el párrafo …
</p> Define cierre de párrafo …
Mi Primera Pagina Web Texto para párrafo
<title> Define el titulo del documento html
</title> Define el cierre del titulo del documento htmlMi titulo Web Titulo que aparece en barra de navegacion
@joaquinls
La razón para crear nuevas
etiquetas estructurales es
dividir las páginas Web en
partes lógicas que describan el
tipo de contenido que incluyen.
Conceptualmente, piense en la
página Web como un
documento. Los documentos
tienen encabezados, pies de
página, capítulos y otras
convenciones diferentes que
dividen el documento en partes
lógicas.
Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es?
10
@joaquinls
De HTML 4
Si usted ha creado incluso los documentos HTML más
simples, entonces estará familiarizado (a) con la etiqueta
div . La etiqueta div es el principal mecanismo de la era
pre-HTML5 para crear bloques de contenido en un
documento HTM.
Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es?
11
Header
Footer
Content
@joaquinls
De HTML 4
Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Una página HTML simple usando Divs</title>
</head>
<body>
<div id='header'>Header</div>
<div id='content'>Content</div>
<div id='footer'>Footer</div>
</body>
</html>
12
@joaquinls
De HTML 5
HTML5 responde a este problema proporcionando un
conjunto de etiquetas que definen con mayor claridad los
bloques principales de contenido que componen un
documento HTML.
Las nuevas etiquetas son:
• header
• section
• article
• aside
• footer
• nav
Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es?
13
<div id = “header”>
<div id = “nav”>
<div id = “footer”>
<div id = “sction”> <div id = “aside”>
<div id = “article”>
@joaquinls
El área header
<!DOCTYPE html>
<html>
<head>
<title> Una página HTML simple </title>
</head>
<body>
<h1>Encabezado General</h1>
<h2>Encabezado General</h2>
<h3>Encabezado General</h3>
<h4>Encabezado General</h4>
<h5>Encabezado General</h5>
<h6>Encabezado General</h6>
<p>Escriba párrafo aquí </p>
</body>
</html>
14
Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es?
@joaquinls
Gracias
15
