Scribd
Cargar
114 vistas22 páginas

HTML

HTML5 es un lenguaje de marcas para el desarrollo de páginas web que define la estructura y contenido de una página. HTML5 especifica elementos como encabezados, párrafos, enlaces, imágenes, entre otros. Los estilos visuales se definen mediante CSS y el comportamiento dinámico mediante JavaScript.

Cargado por

Kristian Rojas
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPT, PDF, TXT o lee en línea desde Scribd
114 vistas22 páginas

HTML

HTML5 es un lenguaje de marcas para el desarrollo de páginas web que define la estructura y contenido de una página. HTML5 especifica elementos como encabezados, párrafos, enlaces, imágenes, entre otros. Los estilos visuales se definen mediante CSS y el comportamiento dinámico mediante JavaScript.

Cargado por

Kristian Rojas
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPT, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 22

HTML5

• ¿Qué es HTML5?
• Es un lenguaje de marcas utilizado para el desarrollo
de páginas web.
• Define la estructura y contenido que debe tener una
web.
• No define el estilo visual que tendrá para eso se usará
CSS.
• Ha sido establecido como estándar de diseño web por
el W3C.
• Los navegadores deben saber interpretar este lenguaje
de manera correcta (no siempre IE)
• Sobre HTML se desarrollan tecnologías para facilitar a
los usuarios el diseño de una web.
HTML5

• El concepto de elemento HTML


• Los elementos son los componentes fundamentales del
HTML
• Cuentan con 2 propiedades básicas:
• Atributos
• Contenido
• En general se conforman con una Etiqueta de Apertura
y otra Cierre.
• Los atributos se colocan dentro la etiqueta de apertura,
y el contenido se coloca entre la etiqueta de apertura y
la de cierre.
HTML5

• El concepto de elemento HTML

Elemento
Etiqueta de Apertura Contenido Etiq. de Cierre

<p class=“texto”>Curso HTML CEMA </p>


Nombre Valor
Atributo
HTML5

• Tipos de elementos HTML


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

• Estructura base de un documento html.

<!DOCTYPE html>
<html lang="es">
<head>
<title>Título</title>
<!– Encabezado de la web. Aquí incluiremos metainformación y
cargaremos componentes y estilos utilizados en la web-->
</head>
<body>
<!– Cuerpo de la web. Aquí escribiremos el contenido-->
…..
</body>
</html>
HTML5

• Definir un documento HTML.


• El primer paso es crear un fichero html o xhtml.
• Una vez creado deberemos especificar el tipo
de documento, para ello la primera línea debe
ser:
• <!DOCTYPE html> si es HTML
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> si es XHTML

• Una vez realizado esto podremos comenzar


con el contenido de nuestro fichero HTML
• HTML layout
HTML5

• La sección HEAD
• Contiene metainformación de la página
• Establecemos título y palabras clave para los
buscadores
• Incluimos hojas de estilo (CSS) a utilizar en la página
• Podemos introducir código javascript a usar en nuestra
página.
• Referencia:
http://www.w3schools.com/html/html_head.asp
HTML5

• La sección BODY
• Alberga el "contenido" real de la página.
• Establece cómo se visualizan los elementos.
• Hace uso de los scripts y hojas de estilo definidos en la
sección HEAD.
• En este punto tenemos a nuestra disposición de todos
los tags disponibles para maquetar nuestra página.
• Referencia: Elementos HTML
CSS3

• El lenguaje HTML está limitado a la hora de


aplicarle forma a un documento.
• Sus estructuras tienen poca flexibilidad a la hora de
dar forma al contenido mostrado.
• HTML se creó originariamente para uso científico y
posteriormente fue adoptado para el desarrollo
web.
• Para "maquetar" se utilizan elementos HTML en un
uso diferente de su objetivo (tablas por ejemplo).
• Todos estos problemas dieron lugar al origen de
CSS.
CSS3

• El lenguaje HTML está limitado a la hora de


aplicarle forma a un documento.
• Sus estructuras tienen poca flexibilidad a la hora de
dar forma al contenido mostrado.
• HTML se creó originariamente para uso científico y
posteriormente fue adoptado para el desarrollo
web.
• Para "maquetar" se utilizan elementos HTML en un
uso diferente de su objetivo (tablas por ejemplo).
• Todos estos problemas dieron lugar al origen de
CSS.
CSS3

• Principales características
• Permite definir el estilo de cada elemento
HTML de manera exacta.
• Permite escalar tamaños en función del
tamaño de la pantalla.
• Aísla el contenido de la presentación.
• Permite incorporar cierta lógica a los estilos
aplicados (LESS y SASS).
• Permite crear plantillas de estilos que pueden
importarse en otros HTML.
CSS3

• Los estilos CSS deben darse de alta en un fichero


acorde para ello, no obstante:
• Pueden declararse dentro de un HTML
mediante la etiqueta <style>
• Pueden aplicarse directamente sobre un
elemento concreto en la propiedad "style".
• Lo correcto es llevar los estilos a un o unos ficheros
css, pero se permite añadir pequeños retoques
directamente sobre el HTML.
CSS3

• Cómo se define un estilo en css:

Declaración
Selector { propiedad: valor; ...}

Ejemplo:
H1 {color:#CC9900;}
CSS3

• Un selector es un identificador para saber sobre qué


elemento HTML debemos aplicar el estilo.
• Existen diferentes tipos de selectores.
• Se pueden crear jerarquías de estilos.
• Podemos definir estilos por defecto para los elementos
HTML estándar.
• Los estilos pueden sobreescribir a otro, el orden de
sobreescritura es el mismo en el que se cargan los ficheros
css o se lee el fichero.
• Si queremos que un estilo prevalezca sobre el resto,
podemos indicarlo con !important
CSS3

• Tipos de selectores:
• De elemento HTML:
• h1, table, div, span…
• De identificador
• Todos los elementos HTML cuya propiedad "id"
tenga un determinado valor, tendrán ese estilo.
• De clase
• Todos los elementos HTML cuya propiedad "class"
tenga un determinado valor tendrán ese estilo.
CSS3

• Normalmente se le aplica un estilo por defecto a los


elementos HTML para conformar una plantilla.
• La personalización definitiva se suele realizar haciendo uso
de la propiedad "class".
• No es recomendado usar el selector por id. Sólo se
recomienda cuando el componente, además de estilo
realiza alguna funcionalidad javascript.
• Cuando incluyamos plantillas en un fichero HTML hay que
estar seguros que no incorporan estilos CSS que
sobreescriban los nuestros.
• En caso de conflicto, debemos asegurar que nuestros
estilos quedan situados por encima de los otros (aunque no
siempre es posible)
CSS3

• CSS3 como mejora de CSS incorpora propiedades para una


mejor maquetación y decoración de los elementos.
• Se han añadido propiedades para aplicar efectos de
pintado.
• Se permiten realizar animaciones.
• Habilita el uso de lógica en los CSS.
• Ejemplo de dibujado HTML + CSS: Minion
• Índice
• HTML
• CSS
• Javascript
• Bootstrap
Javascript

• Inicialmente se llamaba LiveScript.


• Lenguaje de guiones (script).
• Con el respaldo de SUN en 1995 pasó a llamarse
JavaScript.
• Es un lenguaje interpretado.
• Se ejecuta en el cliente, nunca en el servidor.
• Parte de un conjunto limitado de objetos y clases
• No permite interacción cliente-servidor,
únicamente opera en el cliente (Conseguido con
jQuery).
Javascript

• Diseñado para programas sencillos y pequeños.


• Muy utilizado para validación de datos.
• Utilizado junto con CSS para poner efectos en las
páginas de Web.
• Es independiente de la plataforma.
• Es bajamente tipado.
• Fácil de aprender, pero difícil de depurar.
• Gran parecido con Java pero mucho más limitado.
Javascript

• Javascript se integra en HTML de dos maneras:


• Como fichero *.js incluido en la misma sección
que los CSS.
• Como código directamente en el fichero HTML
haciendo uso de la etiqueta <script>
• Algunos navegadores no soportan scripts por lo
que tendremos que tenerlo en cuenta.
• Para tratar el problema haremos uso de la
etiqueta <noscript>

También podría gustarte