Introducción al lenguaje
HTML
LMSGI, módulo del ciclo de FP de Grado Superior,
Administración de Sistemas Informáticos en Red
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Introducción histórica
• http://prezi.com/eumjkezdlwhj/?utm_campaign=share&
utm_medium=copy&rc=ex0share
• Detalles principales:
• HTML ha tenido numerosas versiones
• Ya predomina la 5, pero hay dos versiones todavía bastente
presentes: HTML 4 y XHTML
• Una página web incorpora numerosos tipos de componentes
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Introducción histórica.
Mejoras a lo largo del tiempo
• Etiquetas poderosas: capas, tablas, marcos, imágenes, vídeo, sonido
• JavaScript, JavaScript, JavaScript
• Tecnologías de servidor: PHP, ASP, JSP, CGI
• Lenguajes de estilo: CSS
• AJAX
• Elementos avanzados de cliente: Flash y Applets
• Semántica
• Capacidades muy avanzadas: posicionamiento, animaciones, dibujos,…
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
[1] Herramientas para escribir
código HTML y CSS
LMSGI, módulo del ciclo de FP de Grado Superior,
Administración de Sistemas Informáticos en Red
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Herramientas
• Editores de texto plano: Bloc de notas, Nano
• Editores multipropósito: Sublime Text, Atom, VIM, Emacs ,
Visual Studio Code
• Editores HTML: Brackets, Webstorm
• Editores XML: Oxygen
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Herramientas
• Entornos completos de programación (IDE): Eclipse,
Netbeans, Intelli J Idea
• Editores online
• Editores visuales: Adobe Dreamweaver, Adobe Muse
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
[2] Normalización y
estándares. Versiones de
HTML
LMSGI, módulo del ciclo de FP de Grado Superior,
Administración de Sistemas Informáticos en Red
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Normalización y estándares
• Guerra de los navegadores: Lucha por dominar el
navegador preferido
• Cada navegador tiene sus particularidades al interpretar
HTML
• Actual: http://gs.statcounter.com/#all-browser-ww-
monthly-201309-201409
• Estandarización: W3C, pretende un estándar total
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Normalización y estándares.
Versiones de HTML
• HTML+ 1993
• HTML 2.0: 1995
• HTML 3.0: Primera de la W3C, poco implantada
• HTML 3.2: 1997, primer estándar considerado
• HTML 4.0: Diciembre de 1997, muy aceptada
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Normalización y estándares.
Versiones de HTML
• HTML 4.01: 1999, casi desaparecido. Pretendió ser el
último HTML
• XHTML: Es HTML con reglas HTML, bastante usado
todavía
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
HTML 5
• Estandar actual
• Grandes mejoras
• Lanzado por Apple, Google y Mozilla
• Estandarizado por el WHATWG
• Numerosas ampliaciones continuamente (estándar vivo)
• Triunfó gracias a los smartphones
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
HTML 5
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Indicar del estándar HTML en uso
• HTML 4.01
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01
Transitional//EN” http://www.w3.org/TR/html4/loose.dtd>
• XHTML 1.0
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”es”>
• HTML 5
<!DOCTYPE html>
<html lang=”es”>
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Validar código
• Oficial de la W3C: validator.w3.org
• Validar es importante:
• Nos permite coger buenos hábitos
• Asegura compatibilidad futura
• htmltidyValidador descargable
• La mayoría de herramientas ya incorporan un validador
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
HTML 5. Compatibilidad
• caniuse.com Nos dice qué funciona en cada navegador
• html5test.com Test para nuestro navegador de conformidad
con HTML 5
• fmip.comIndica lo que nuestro navegador es capaz de hacer
• modernizr.com Librería JavaScript que detecta las
capacidades del navegador del cliente
• normalize.js Librería JavaScript que asegura que la página
estéticamente se ve igual en todos los navegadores
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
referencia HTML 5. Ayuda
• http://www.w3schools.com/tags/ Ayuda muy completa y
fácil de entender
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element
Ayuda oficial de Mozilla, muy completa y al día
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
[3]
Introducción al
funcionamiento y publicación
de páginas web
LMSGI, módulo del ciclo de FP de Grado Superior,
Administración de Sistemas Informáticos en Red
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
http
• Protocolo TCP/IP encargado de transportar páginas
web
• Es del tipo petición/respuesta, se pide un recurso y se
recibe respuesta
• Normalmente se pide un documento HTML y se recibe
dicho documento y todo lo que necesita (imágenes,
JavaScript, CSS, sonido, vídeo) para visualizarse en el
navegador
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
URL
• Uniform Resource Locator
• Proporciona dirección única a cada recurso de Internet
• Formato: protocolo://servidor:puerto/rutaAlRecurso
• http://www.centrodonbosco.es/web/index.php/doc/doc
_download/96-villamuriel-18-de-abril
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
publicación
• Sitio web=Páginas web y recursos de las mismas
asociadas a una dirección en Internet
• Publicar un sitio web, posibilidades:
• FTP
• WebDAV
• RDS
• Cualquier otra forma de transmitir ficheros
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Fundamentos básicos de
[4]
HTML
LMSGI, módulo del ciclo de FP de Grado Superior,
Administración de Sistemas Informáticos en Red
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
etiquetas y elementos
• Un elemento lo forman la etiqueta y su contenido
• Siempre se cierra primero la última etiqueta abierta:
• <strong><em>negrita y cursiva</strong></em> ¡¡Error!!
• <strong><em>negrita y cursiva</em></strong> ¡¡Correcto!!
• Hay elementos que no tienen cierre:
• <br> Forma clásica de HTML
• <br /> Forma XHTML (se cierra en la propia apertura)
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
atributos
• Los atributos son propiedades que se pueden asignar a
algunos elementos
• Se usan así: atributo=“valor”
• Se ponen siempre en la apertura de la etiqueta
• Ejemplo:
<p class=“rojo”>Este es un texto</p>
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Estructura básica de una página HTML 5
<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”UTF-8” >
<title>Título página</title>
</head>
<body>
</body>
</html>
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Estructura básica de una página HTML 5
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Estructura básica de una página HTML 5.
Partes
• línea DOCTYPE. Avisa de que el documento sigue las
normas de HTML 5
• elemento html. Abarca todo el documento
• elemento head. Cabecera. Para elementos que no
escriben como los meta, archivos externos, título,…
• elemento body. Cuerpo. Contenido en sí de la página
web
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Estructura básica de una página HTML 5.
codificación
• Recomendable utf-8
• En HTML 5 se indica con:
<meta charset=”UTF-8”>
• En XHTML y HTML inferior al 5:
<meta http-equiv=”content-type”
content=”text/html; charset=UTF-8”>
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Reglas de espacios en blanco
• No se respetan los espacios en blanco, saltos de línea ni
tabuladores (solo el primero)
• La etiqueta pre permite indicar texto y respetar sus
espacios, tabuladores y saltos de línea
• marca un espacio obligatorio
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Atributos comunes
• Se pueden utilizar en cualquier elemento HTML
• id identificador de un elemento (no se puede repetir)
• title título del elemento
• lang lenguaje
• accesskey tecla alternativa
• class clase CSS
• style formato directo CSS
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Atributos comunes
• draggable se marca que el elemento se puede
arrastrar(requiere programar en JavaScript)
• hidden el elemento es invisible
• contenteditable con valor true se permite modificar el
contenido
• spellcheck si vale true se puede corregir con herramientas
especiales
• class clase CSS
• onclick, ondbl, onkeyup,… permiten lanzar JavaScript ante un
evento
LMSGI-Unidad 1-Lenguajes de marcas
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Idioma
• La indicación la realiza el atributo lang (en cualquier elemento)
• El idioma general de la página se indica en el elemento raíz
html
• Se puede indicar en otros elementos para señalar que su
contenido está escrito en otro lenguaje
• Ejempl
Crear cuenta
Comentarios de: Introducción al lenguaje HTML (0)
No hay comentarios