HTML Estructura.

Slides:



Advertisements
Presentaciones similares
¿QUÉ ES HTML? Hipertext Markup Language. Lenguaje de ordenador.
Advertisements

Repaso desde HTML a XHTML
Curso : Programación Web 1 Profesor : Aníbal Martínez Aguas Tema: Etiquetas básicas Capitulo 3 Semestre: 1.
MAPAS CONCEPTUALES.
HTML PROGRAMACION WEB.
CI-2413 Desarrollo de Aplicaciones para Internet
COORDINACIÓN TRABAJOS DE TÍTULOS VIRTUAL
Elaboró: Paola Elizabeth Oviedo Lara
Propuesta Gráfica de Website
SESIÓN 3 APRENDIENDO HTML.
INTRODUCCION A CSS.
DOM ( Document Object Model) Prof. Franklin Cedeño.
CSS: Cascading Style Sheets
CSS WALC 2004 – Track 2 Pep Turró Cuzco, octubre de 2004.
Introducción a Lenguajes web
Etiqueta Título Los títulos o encabezamientos se emplean al comienzo de una sección. Las etiquetas que se usan son: Los títulos o encabezamientos se emplean.
CSS Prioridad. Selectores CSS El selector aplica a todos los elementos HTML de la página con esa etiqueta (p). El selector múltiple de CSS, incluye varios.
Curso de Diseño Web Profesor: Mario Figge. Vamos a construir un sitio  Para construir un sitio necesitamos 3 cosas:  1. Un nombre misitio.com  2. Un.
Crear Carpetas.
Introducción al desarrollo de proyectos RIA.
Ing. Cleyver Vazquez Jijon
HTML/CSS Mi primera página.
HTML/CSS Marcas básicas.
Estructura de Documento Atributos 1. Atributos Básicos id, class, style, title 2. Atributos para Internacionalización lang, xml:lang, dir 3. Atributos.
CSS Módulo V. Funcionamiento Visor Web Servidor Web Documentos Página Web Solicitud Entrega.
Hojas de Estilo Una hoja de estilo es un documento es un documento independiente, donde se definen todos los estilos que se utilizarán en todas las páginas.
Hypertext Markup Language HTML
Curso de Diseño Web Profesor: Mario Figge. El Modelo de Cajas (Box Model)
PLANTILLAS Tutorial de práctica. Plantillas en DW Las plantillas son archivos que estandarizan la forma en que se ven los sitios web, de esta manera podremos.
En ocasiones podemos desear añadir comentarios aclaratorios dentro del código, de manera que no sean visualizados en el navegador, pero sí a la hora de.
Desarrollo CSS.
Usabilidad, navegación y arquitectura de información
CSS div.
 El primer navegador Web incluía un lenguaje de estilo interno que utilizaba dicho navegador para mostrar las páginas HTML.  Sin embargo estos primeros.
CSS Estructura.
Por principio un DIV, aunque su contenido sea muy pequeño ocupa todo el ancho de su padre generalmente el body, ya que son elementos de bloque. Recordar.
POWERPOINT.
POW Tema 4: Mas sobre Hojas de Estilo. 2 Posicionamiento y Visualización Los factores que se tienen en cuenta para generar cada caja de las que se muestran.
 Un lenguaje que permite asociar estilos de composición a documentos estructurados, como HTML y aplicaciones XML  Un conjunto de propiedades y valores.
Manual Dreamweaver. Barra de herramientas. El primero botón que aparece en la barra es la de vista de código, que hace que en la ventana del documento.
Estudio de accesibilidad de la tienda online de adolfodominguez.com
DOM Document Object Model Fernando Rodrìguez. Que es DOM Dom es una plataforma o interfaz neutral que permite a los programas y scripts accesar o modificar.
CSS: CASCADING STYLE SHEETS
Etiquetas para el trabajo con Marcos
¿Qué es Internet? Internet puede ser definida como una red mundial de comunicaciones basada en computadores que comparten sus recursos e información a.
ETIQUETAS. Importante Que es una Etiqueta: Son elementos que tienen dos propiedades básicas: atributos y contenidose crea de esta forma, Se cierra de.
El lenguaje HTML Este lenguaje nos permite estructurar documentos. La mayoría de los documentos tienen estructuras comunes (títulos, parrafos, listas...)
“Trabajando en Notepad”
Es un programa sorprendente con un diseño mejor y más eficaz que el de las versiones anteriores. Pero quizás le resulte poco familiar. Por ese motivo.
Creado por: Ángela Pico
DISEÑO DE PAGINAS RUBEN DARIO CORDOBA.
Estructura de un documento HTML Opcionalmente los documentos escritos en HTML empezarán por la marca y finalizarán con la marca. Esta marca tan solo sirve.
INFORMÁTICA SOCIEDAD Y ORGANIZACIÓN
CSS Cascading Style Sheets
EXPOSICIÓN DE WEB Y MULTIMEDIA ESTILOS CSS INTEGRANTES:BERMEO JOHNNEY CHIMBO BRYAN CORREA CARLOS GUAYA CESAR ROBLES DARIO VILLA LUISA.
H1 { color : black; } Sintaxis de CSS Regla CSS
Manual de usuari0 de Wordpress. Administración de Entradas Las entradas son noticias que se mostrarán en orden cronológico inverso en la página de inicio.
@josedlujan. Director de Desarrollo M.T.I. José Dimas Luján Castillo
GUIA DE CSS 3 BASICA AUTOR: CARLOS BERBECI QUE ES CSS3 ? CSS es un lenguaje para definir el estilo o la apariencia de las páginas web, escritas con HTML.
DISEÑO DE PÁGINAS WEB HTML Y CSS Tema 6: CSS Jose Miguel Vidagany Igual.
Texto Estructurar La forma más sencilla de estructurar un texto consiste en separarlo por párrafos. Además, HTML permite incluir títulos que delimitan.
TEXTO. Para introducir un texto en una pagina web Basta con introducir lo que queremos visualizar, aunque bien es cierto que sólo podremos visualizarlo.
Web y Multimedia II Integrantes: Piero Álvarez Mayra Atience Jhonney Bermeo Johanna Cabrera Gabriela Cango.
Texto Marcado genérico del texto El estándar HTML incluye numerosas etiquetas para marcar los contenidos de texto. No obstante, la infinita variedad de.
USB-Ingeniería de Sistemas Programación en Internet Agosto 2015 Introducción al Html.
1. Introducción ¿Qué es HTML? HTML, siglas de HyperText Markup Language («lenguaje de marcado hipertextual»), hace referencia al lenguaje para la elaboración.
Módulo III.- Recursos en UPSA VIRTUAL Este módulo explica como configurar los distintos recursos que pueden encontrarse en un curso de MOODLE. Recurso:
ANDRES MAURICIO QUINTERO MACEA Programación Web Lic. Informática y medios audiovisuales Facultad de educación y ciencias humanas Universidad de Córdoba.
HTML & CSS. 15 Qué es HTML FCC-BUAP Verano 2016BMB - RAM  Es un lenguaje de marcas para formatear y estructurar un documento, que puede leerse en cualquier.
Selecctores CSS SELECTORES
Transcripción de la presentación:

HTML Estructura

Estructura HTML Los elementos html pueden visualizarse como bloque o como en línea. Los elementos bloques block ocupan todo el ancho de la página y fuerzan a una nueva línea antes y después. <article> <aside> <canvas> <div> <footer> <h1>, <h2>, <h3>, <h4>, <h5>, <h6> <header> <p> <pre> <section> <ul>… Los elementos en línea inline sólo ocupan el ancho necesario y no fuerzan nuevas líneas. <em> <a> <br> <img> <span> <button> <input> <select> <textarea>…      https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements https://developer.mozilla.org/en-US/docs/HTML/Inline_elements

Estructura HTML DIV El elemento <div> es un elemento de bloque que se emplea contener en su interior otros elementos HTML.  El elemento <div> no tiene ningún significado, es semánticamente neutro.  Empleando CSS, el elemento <div> se puede utilizar para estructurar el documento en grandes bloques de contenido. El div es la propuesta para sustituir a los elementos <table> para el diseño. El propósito del elemento <table> es para mostrar datos tabulados.     

<div> <div> define bloque un genérico empleado para formatear con CSS. <div id="caja" class="cabecera"> ……………. </div> Atributo ID: identifica unívocamente un elemento HTML en una página. Un elemento HTML solo debe tener un atributo ID y este debe ser único en la página. El selector CSS #caja se refiere al elemento con atributo id="caja”, como en #caja {color:blue} Atributo CLASS: define una clase de elementos HTML. Un elemento puede tener varios atributos CLASS. El selector CSS .cabecera se refiere a todos los elemento de la clase cabecera (que llevan el atributo class="cabecera"), como en .cabecera {color:red}      No tienen valores por defecto Id y código de barras http://css-tricks.com/the-difference-between-id-and-class/

Estructura HTML SPAN El elemento HTML <span> es un elemento en línea que se emplea como un contenedor de texto. El elemento <span> no tiene ningún significado especial, es semánticamente neutro. . Cuando se utiliza junto con CSS, el elemento <span> se puede utilizar para establecer los atributos de estilo para las partes del texto mediante un identificador ID o una clase class.     

CSS Los elementos <DIV> y <SPAN> se emplean para definir normas de estilo más específicas. El atributo id se emplea para identificar un elemento único. El atributo class cuando hay más de un elemento que mantienen una relación significativa, puede ser compartir el estilo.     

Estructura HTML En HTML5, los bloques son sustituidos por bloques semánticos que muestran significado por si mismos.      <header> <nav> <section> <article> <aside> <footer>

Estructura HTML Una página de este tipo realizada con <div> quedaría de la siguiente manera. Es habitual una caja contenedor para impedir que ocupe toda la página cuando la ventana de la navegador es muy grande o controlar la disposición de los elementos cuando es muy pequeña.      + CSS

Estructura HTML Una página de este tipo realizada con los nuevos bloques semánticos del HTML5 quedaría.      + CSS

Estructura HTML La estructura HTML, debe realizarse en el sentido lógico de lectura del documento, cuando la página se vea sin aplicar los estilos no pierda su significado.     

Herencia CSS Para entender como funcionan los selectores y la herencia CSS es necesario entender qué es el árbol del documento.     

Herencia CSS el árbol del documento del ejemplo anterior: html head      html head body title div .caja header nav article footer h1 ul li li li a a a

Herencia CSS Ancestor es un elemento conectado pero más arriba en la estructura del documento      html head body title div .caja Ancestor header nav article footer h1 ul descendientes li li li a a a

Herencia CSS Descendientes son los elementos conectados pero más abajo en la estructura del documento.      html head body title div .caja Ancestor header nav article footer h1 ul descendientes li li li a a a

Herencia CSS Parent es el elemento conectado y directamente sobre un elemento en la estructura del documento.      html head body title div .caja header nav article footer h1 ul Parent descendientes li li li a a a

Herencia CSS Child es el elemento conectado y directamente debajo de un elemento en la estructura del documento.      html head body title div .caja Child header nav article footer h1 ul li li li a a a

Herencia CSS Siblings son los elementos que comparten un mismo padre en la estructura del documento.      html head body title div .caja header nav article footer h1 ul Parent Siblings li li li

Herencia CSS Si definimos un estilo en el body, todos los elementos situados debajo en el árbol del documento, heredan esa propiedad.     

HTML Fin del tema

Ejercicio Realiza un esquema sencillo de este documento HTML a su estructura tipo árbol, que resuma brevemente las relaciones directas entre elementos de la página, clarificando la jerarquía del árbol. <!doctype html> <html> <head> <meta charset="utf-8"> <title>Ejercicio opcional árbol</title> </head> <body> <header> <img src="logotipo.jpg" alt="Firefox Logo" width="100" height="100"> </header> <nav> <ul> <li>Menú 1</li> <li>Menú 2</li> <li>Menú 3</li> </ul> </nav> <article> <h1>Titular de nivel 1</h1> <p>Contenido de la página</p> </article> <footer>Pie de página</footer> </body> </html>       

Ejercicio 1.- Cuál de las siguientes etiquetas NO es de bloque block: a) <h1> b) <hr> c) <span> d) <p>  2.- Cuál de las siguientes etiquetas NO es de bloque block: a) <p> b) <hr> c) <ul> d) <strong> 3.- Cuál de las siguientes etiquetas NO es en línea inline: a) <em> b) <span> c) <pre> d) <a> 5.- Cuál de las siguiente etiqueta de estructura no es semántica HTML5 a) <header> b) <section> c) <pie> d) <aside> Analizar el árbol del siguiente documento HTML <!doctype html><html><head><meta charset="utf-8“><title>Herencia CSS</title></head> <body><ul><li>Elemento de lista 1</li><li>Elemento de lista 2</li><li>Elemento de lista 3</li></ul></body></html>  6.- la etiqueta ul seria el "parent " de: a) Body b) el propio ul c) los li d) html 7.- body es "ancestor" de title: a) SI b) NO <body><ul><li>Elemento de lista 1</li><li>Elemento de lista 2</li><li>Elemento de lista 3</li></ul> <p>Esto es un párrafo</p></body></html> 8.- la etiqueta p seria el hijo "child" de: a) Body b) ul c) el último li d) de todos los anteriores 9.- la etiquetas serian hermanos "siblings": a) los tres li b) los tres li y el p c) ul d) las respuestas a y b son correctas 10.- Cuál de las siguientes afirmaciones es incorrecta a) ul es hijo "child" de body b) p es hijo "child" de body c) p es hijo "child" de ul d) li es hijo "child" de ul       

Ejercicio - Soluciones 1.- Cuál de las siguientes etiquetas NO es de bloque block: a) <h1> b) <hr> c) <span> d) <p> C  2.- Cuál de las siguientes etiquetas NO es de bloque block: a) <p> b) <hr> c) <ul> d) <strong> D 3.- Cuál de las siguientes etiquetas NO es en línea inline: a) <em> b) <span> c) <pre> d) <a> C 5.- Cuál de las siguiente etiqueta de estructura no es semántica HTML5 a) <header> b) <section> c) <pie> d) <aside> C Analizar el árbol del siguiente documento HTML <!doctype html><html><head><meta charset="utf-8“><title>Herencia CSS</title></head> <body><ul><li>Elemento de lista 1</li><li>Elemento de lista 2</li><li>Elemento de lista 3</li></ul></body></html>  6.- la etiqueta ul seria el "parent " de: a) Body b) el propio ul c) los li d) html C 7.- body es "ancestor" de title: a) SI b) NO B <body><ul><li>Elemento de lista 1</li><li>Elemento de lista 2</li><li>Elemento de lista 3</li></ul> <p>Esto es un párrafo</p></body></html> 8.- la etiqueta p seria el hijo "child" de: a) Body b) ul c) el último li d) de todos los anteriores A 9.- la etiquetas serian hermanos "siblings": a) los tres li b) los tres li y el p c) ul d) las respuestas a y b son correctas A 10.- Cuál de las siguientes afirmaciones es incorrecta a) ul es hijo "child" de body b) p es hijo "child" de body c) p es hijo "child" de ul d) li es hijo "child" de ul C