Unidad1AppsMoviles.pptx

UNIDAD 1
Fundamentos de HTML y CSS

INTRODUCCIÓN
• La creación, diseño y programación de páginas web está en constante evolución.
• Nada tienen que ver las primeras páginas web de hace unos años a las que se hacen ahora.
• La web se ha vuelto más dinámica, mas interactiva. Frente a las páginas antiguas, que eran
estáticas, donde había poco más que un texto con imágenes para poder consultar, las páginas de
hoy en día permiten al usuario muchas más posibilidades: hacer compras o gestiones con la
administración, poder consultar datos personales o de empresa mediante el uso de contraseñas,
participar en juegos colectivos, etc.
• Cada vez son más los usuarios de la web que se conectan a la misma desde un móvil.
• Es evidente que un móvil no es lo mismo que una computadora de sobremesa, y que no lo
utilizamos para las mismas cosas cuando nos conectamos a Internet.
• Esto hace que el diseño y la estructura de las páginas para ser visualizadas en un móvil no sea la
misma que las que deben ser visualizadas en una computadora.

¿Qué es HTML?
• El HTML (Hyper Text Markup Language) es el lenguaje con el que se
escriben las páginas web
• Es un lenguaje de hipertexto, es decir, un lenguaje que permite
escribir texto de forma estructurada, y que está compuesto por
etiquetas, que marcan el inicio y el fin de cada elemento del
documento
• Puede contener imágenes, sonido, vídeos, etc., por lo que el
resultado puede considerarse como un documento multimedia

Componentes Básicos de HTML5
HTML5 es considerado el producto de la combinación de HTML, CSS y
Javascript. Estas tecnologías son altamente dependientes y actúan como una
sola unidad organizada bajo la especificación de HTML5.
• HTML está a cargo de la estructura
• CSS presenta esa estructura y su contenido en la pantalla.
• Javascript hace el resto.

ESQUEMA BÁSICO
• Los documentos HTML se encuentran
estrictamente organizados.
• Cada parte del documento está
diferenciada, declarada y
determinada por etiquetas
específicas.

<!DOCTYPE>
En primer lugar necesitamos indicar el tipo de documento que estamos creando.
<!DOCTYPE html>
Esta línea debe ser la primera línea del archivo, sin espacios o líneas que la
precedan.
De esta forma, el modo estándar del navegador es activado y las
incorporaciones de HTML5 son interpretadas siempre que sea posible, o
ignoradas en caso contrario.

<html>
• Luego de declarar el tipo de documento, debemos comenzar a construir la estructura HTML.
• Como siempre, la estructura tipo árbol de este lenguaje tiene su raíz en el elemento .
• Este elemento envolverá al resto del código:
• El atributo lang en la etiqueta de apertura <html> es el único atributo que necesitamos especificar en
HTML5. Este atributo define el idioma humano del contenido del documento que estamos creando,
en este caso es por español.
• La mayoría de las etiquetas HTML se utilizan en pares, una etiqueta de apertura y una de cierre, y el
contenido se declara entre ellas.
Palabra clave
atributo
atributo
Etiqueta de cierre

<head> <body>
• El código HTML insertado entre las etiquetas <html> tiene que ser dividido entre dos secciones
principales.
• La primera sección es la cabecera <head>
• La segunda el cuerpo <body>
• El siguiente paso, por lo tanto, será crear estas dos secciones en el código usando los elementos y
ya conocidos. El elemento va primero, por supuesto, y al igual que el resto de los elementos
estructurales tiene una etiqueta de apertura y una de cierre

La etiqueta <meta> application-name:
descripción de una aplicación Web
Está exclusivamente pensada para describir el nombre de una aplicación Web.
Su valor es cualquier cadena de texto que sirva para dar un nombre a la aplicación y
solo puede aparecer una vez.
No se debe incluir si no estamos dentro de una aplicación Web.
Ejemplo: <meta name="application-name" content="Servicio web de base de datos 1.0" />

La etiqueta <meta> author: ¿quién es el autor?
• Esta meta etiqueta sirve para describir al autor de la página web.
• Su valor es cualquier cadena de texto.
• Su uso es muy importante y debe de incluir siempre además de realizar otras
acciones específicas como relacionar al autor de un documento como su perfil de
Google+ pero esta no es una acción que sea haga con metadatos.
• Solo puede haber una metaetiqueta de este tipo.
Ejemplo: <meta name="author" content="Javier Iglesia Aparicio" />

La etiqueta <meta> description: ¿de qué trata esta
página web?
• Con esta meta etiqueta describimos la página web: qué contiene, cuál es su tema principal, etc.
• Su uso es importante porque es el texto que suele aparecer en los resultados de búsqueda, luego
conviene cuidar su contenido.
• Solo puede haber una metaetiqueta de este tipo.
• Ejemplo: <meta name="description" content="Un blog sobre analítica web, SEO y web
semántica: avanzando hacia un SEO semántico" />
• La longitud del campo descripción se sugiere que tenga una longitud nunca mayor de 160
caracteres, incluidos los espacios en blanco y como mínimo mínimo 50 caracteres.

La etiqueta <meta> generator: ¿con qué
herramienta se ha hecho la página web?
• Esta meta etiqueta sirve para identificar el software con el cual se ha elaborado una página web.
• Sólo se puede utilizar una web y no debe añadirse si el sitio web ha sido elaborado manualmente,
sin utilizar un software o un gestor de contenidos.
• Ejemplo: <meta name="generator" content="Joomla 3.0" />

La etiqueta <meta> keywords: ¿qué palabras
son clave en la página web?
• Contiene la lista de palabras clave, importantes, del contenido de nuestra página web.
• Su contenido tienen que ser un conjunto de palabras separadas por comas.
• Ejemplo: <meta name="keywords" content="analítica web, seo, web semántica, seo semántico,
analytics" />
• La recomendación más extendida es la de no superar un total de 256 caracteres, incluidos los
espacios en blanco.
• Y por palabras es prudente tener entre 5 y 8 palabras clave.
• Cada palabra clave puede estar constituida por hasta 4 o 5 palabras.

La etiqueta <meta> charset: la codificación de
caracteres
• Una metaetiqueta cuya definición es muy importante ya que de esta
etiqueta dependerá la correcta escritura de los diferentes caracteres
en una página.
• HTML 5 designa la codificación utf-8 como el estándar por defecto.
• Ejemplo: <meta charset="UTF-8">

Etiquetas html de contenido y texto
Las etiquetas de contenido
son las que agrupan el
contenido que hay en su
interior.
EJEMPLO

Etiquetas de texto
Las etiquetas de texto son las que dan significado a los
textos que contienen.
EJEMPLO

FORMULARIOS
• Los formularios son los elementos
en los que se integran los botones
y las áreas de texto que se utilizan
para que los usuarios introduzcan
sus datos o que puedan elegir
entre varias opciones.
• El principio y final de un formulario
se define con las etiquetas <form>
y </form>. Dentro de las etiquetas
de apertura y cierre de form se
pueden incluir diferentes
elementos que son enviados para
ser procesados por el servidor
web.
EJEMPLO

FORMULARIOS. Tipos de inputs
Algunos de los inputs o controles más
utilizados son los siguientes: button,
checkbox, color, date, email, file,
image, month, number, password,
radio, range, search, submit, tel, text,
time, url y week.
EJEMPLO

FORMULARIOS. Atributos para la validación de campos en los
formularios
• La validación de los datos introducidos por
los usuarios en los campos de los formularios
es esencial para ofrecer al usuario
información sobre los datos que se están
solicitando.
• Gracias a los nuevos atributos que se
introdujeron en HTML5 no es necesario
utilizar JavaScript obligatoriamente para la
validación de los campos ya que se validan
de forma automática al pulsar en el botón de
tipo submit
EJEMPLO

Etiquetas html para el
contenido incrustado
El contenido incrustado se
utiliza para mostrar recursos
externos como, por ejemplo,
mapas, previsiones
meteorológicas, fórmulas
matemáticas, vídeos y audios,
entre otros. Este método
permite utilizar un servicio o
interfaz de terceros

Unidad1AppsMoviles.pptx

Recomendados

Recomendados

Más contenido relacionado

Similar a Unidad1AppsMoviles.pptx

Similar a Unidad1AppsMoviles.pptx (20)

Último

Último (20)

Unidad1AppsMoviles.pptx

Notas del editor