HTML Contenedores y tipos de elementos
maxymiliano
6,552 views
25 slides
Sep 05, 2010
Slide 1 of 25
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
About This Presentation
Formalización y tipo de Documento HTML Doctype. Contenedores y tipos de elementos según sus comportamientos como Elementos de Bloque y elementos de linea.
Slide Content
<!-- Nombre Curso URL -->
Quiz
Escribir la estructura de en
HTML del siguiente contenido
Quiz
Escribir la estructura de en
HTML del siguiente contenido
<!-- Nombre Curso URL -->
Quiz•20 minutos
•Imágenes similares
•Textedit
•Entrega vía email a
[email protected]
Escribir la estructura de en
HTML del siguiente contenido
Quiz•20 minutos
•Imágenes similares
•Textedit
•Entrega vía email a
[email protected]
Escribir la estructura de en
HTML del siguiente contenido
HTML
Contenedores y tipos de
elementos
Computación Multimedia I - Clase 3
Maximiliano Martin - DUOC 2010
Contenedores y tipos de
elementos
Computación Multimedia I - Clase 3
Maximiliano Martin - DUOC 2010
Declaración / DOCTYPE
www.maximiliano.cl
www.maximiliano.cl
Declaración / DOCTYPE
www.maximiliano.clNo es una etiqueta sino una instrucción •Definición del Tipo de Documento (DTD)
•El DTD especifica las reglas para el
lenguaje de marcado •XHTML 1.0 Strict / XHTML 1.0 Transitional
•XHTML 1.1
•HTML 4.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-strict.dtd">
www.maximiliano.clNo es una etiqueta sino una instrucción •Definición del Tipo de Documento (DTD)
•El DTD especifica las reglas para el
lenguaje de marcado •XHTML 1.0 Strict / XHTML 1.0 Transitional
•XHTML 1.1
•HTML 4.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-strict.dtd">
www.maximiliano.cl
<head> o cabeceraContiene información sobre el documento que:
no se muestra directamente al usuario
<head> o cabeceraContiene información sobre el documento que:
no se muestra directamente al usuario
www.maximiliano.cl
<head> o cabeceraContiene información sobre el documento que:
no se muestra directamente al usuario <html>
<head>
<title>Guía de Referencia Rápida XHTML</title>
</head>
<body>
...elementos del body...
</body>
</html> <title>
<head> o cabeceraContiene información sobre el documento que:
no se muestra directamente al usuario <html>
<head>
<title>Guía de Referencia Rápida XHTML</title>
</head>
<body>
...elementos del body...
</body>
</html> <title>
www.maximiliano.cl
<head> o cabeceraContiene información sobre el documento que:
referencia a metaetiquetas
<head> o cabeceraContiene información sobre el documento que:
referencia a metaetiquetas
www.maximiliano.cl
<head> o cabeceraContiene información sobre el documento que:
referencia a metaetiquetas <meta name="Description" content="Qué es HTML y para qué sirve" />
<meta name="Keywords" content="HTML,XHTML,tutorial HTML" />
<meta name="Author" content="Maximiliano Martin" />
<meta name="Copyright" content="... <meta>
<head> o cabeceraContiene información sobre el documento que:
referencia a metaetiquetas <meta name="Description" content="Qué es HTML y para qué sirve" />
<meta name="Keywords" content="HTML,XHTML,tutorial HTML" />
<meta name="Author" content="Maximiliano Martin" />
<meta name="Copyright" content="... <meta>
www.maximiliano.cl
<head> o cabeceraContiene información sobre el documento que:
relaciona mediante vínculos a otras URL o archivos
<head> o cabeceraContiene información sobre el documento que:
relaciona mediante vínculos a otras URL o archivos
www.maximiliano.cl
<head> o cabeceraContiene información sobre el documento que:
relaciona mediante vínculos a otras URL o archivos <link type="text/css" rel="stylesheet" href="css/base.css" />
<link type="text/css" media="print" rel="stylesheet" href="css/print.css" />
<link type="text/css" media="aural" rel="stylesheet" href="css/aural.css" /> <link>
<head> o cabeceraContiene información sobre el documento que:
relaciona mediante vínculos a otras URL o archivos <link type="text/css" rel="stylesheet" href="css/base.css" />
<link type="text/css" media="print" rel="stylesheet" href="css/print.css" />
<link type="text/css" media="aural" rel="stylesheet" href="css/aural.css" /> <link>
www.maximiliano.cl
<body> o cuerpoDefine el contenido del documento. Lo que se
muestra a través del navegador
<body> o cuerpoDefine el contenido del documento. Lo que se
muestra a través del navegador
<body>...
...</body> www.maximiliano.cl
<body> o cuerpoDefine el contenido del documento. Lo que se
muestra a través del navegador Elementos en bloque Elementos en linea
...</body> www.maximiliano.cl
<body> o cuerpoDefine el contenido del documento. Lo que se
muestra a través del navegador Elementos en bloque Elementos en linea
<body>...
...</body> www.maximiliano.cl
<body> o cuerpoDefine el contenido del documento. Lo que se
muestra a través del navegador Elementos en bloque Elementos en linea
...</body> www.maximiliano.cl
<body> o cuerpoDefine el contenido del documento. Lo que se
muestra a través del navegador Elementos en bloque Elementos en linea
<body>...
...</body> www.maximiliano.cl
<body> o cuerpoDefine el contenido del documento. Lo que se
muestra a través del navegador Elementos en bloque Elementos en linea
...</body> www.maximiliano.cl
<body> o cuerpoDefine el contenido del documento. Lo que se
muestra a través del navegador Elementos en bloque Elementos en linea
<body>...
...</body> www.maximiliano.cl
<body> o cuerpoDefine el contenido del documento. Lo que se
muestra a través del navegador Elementos en bloque Elementos en linea
...</body> www.maximiliano.cl
<body> o cuerpoDefine el contenido del documento. Lo que se
muestra a través del navegador Elementos en bloque Elementos en linea
<body>...
...</body> www.maximiliano.cl
<body> o cuerpoDefine el contenido del documento. Lo que se
muestra a través del navegador Elementos en bloque Elementos en linea p, div, ol, ul, li, h1,
h2, h3, etc. a, img, em,
strong, span, etc.
...</body> www.maximiliano.cl
<body> o cuerpoDefine el contenido del documento. Lo que se
muestra a través del navegador Elementos en bloque Elementos en linea p, div, ol, ul, li, h1,
h2, h3, etc. a, img, em,
strong, span, etc.
<body>...
...</body> www.maximiliano.cl
<body> o cuerpoDefine el contenido del documento. Lo que se
muestra a través del navegador Elementos en bloque Elementos en linea p, div, ol, ul, li, h1,
h2, h3, etc. a, img, em,
strong, span, etc.
...</body> www.maximiliano.cl
<body> o cuerpoDefine el contenido del documento. Lo que se
muestra a través del navegador Elementos en bloque Elementos en linea p, div, ol, ul, li, h1,
h2, h3, etc. a, img, em,
strong, span, etc.
www.maximiliano.cl
Valores de AtributosPropiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots) <a> vínculo o ancla </a>
Valores de AtributosPropiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots) <a> vínculo o ancla </a>
www.maximiliano.cl
Valores de AtributosPropiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots) <a> vínculo o ancla </a> <a href=”http://www.wikipedia.com/ancla/”
title=”Definición de Wikipedia” rel=”External”> vínculo o
ancla </a> •href
•title
•class
•id •hreflang
•accesskey
•rel
•tabindex
Valores de AtributosPropiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots) <a> vínculo o ancla </a> <a href=”http://www.wikipedia.com/ancla/”
title=”Definición de Wikipedia” rel=”External”> vínculo o
ancla </a> •href
•title
•class
•id •hreflang
•accesskey
•rel
•tabindex
www.maximiliano.cl
Valores de AtributosPropiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots) <img src=”URI” /> •scr
•alt
•class
•id <img src=”http://www.w3c.es/img/eslogo-20030729.png” alt="Oficina
española del W3C" height="52" width="279" /> •height
•width
•longdesc
Valores de AtributosPropiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots) <img src=”URI” /> •scr
•alt
•class
•id <img src=”http://www.w3c.es/img/eslogo-20030729.png” alt="Oficina
española del W3C" height="52" width="279" /> •height
•width
•longdesc
www.maximiliano.cl
+ ElementosPropiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots) •Estructura: body, head, html, title
•Texto: abbr, acronym, address, blockquote, br, cite,
code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre,
q, samp, span, strong, var
•Presentación: b, big, hr, i, small, sub, sup, tt
•Formularios: button, fieldset, form, input, label,
legend, select, optgroup, option, textarea
•Tablas: caption, col, colgroup, table, tbody, td, tfoot,
th, thead, tr
•Mapa de Imagen del lado Cliente: area, map
•Mapa de Imagen del lado Servidor: Attribute
ismap on img •Hipertexto: a
•Lista: dl, dt, dd, ol, ul, li
•Objetos: object, param
•Edición: del, ins
•Texto Bidireccional: bdo
•Módulo de Imagen: img
•Metainformación: meta
•Scripting: noscript, script
•Hoja de Estilo: style element
•Link: link
•Base: base
+ ElementosPropiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots) •Estructura: body, head, html, title
•Texto: abbr, acronym, address, blockquote, br, cite,
code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre,
q, samp, span, strong, var
•Presentación: b, big, hr, i, small, sub, sup, tt
•Formularios: button, fieldset, form, input, label,
legend, select, optgroup, option, textarea
•Tablas: caption, col, colgroup, table, tbody, td, tfoot,
th, thead, tr
•Mapa de Imagen del lado Cliente: area, map
•Mapa de Imagen del lado Servidor: Attribute
ismap on img •Hipertexto: a
•Lista: dl, dt, dd, ol, ul, li
•Objetos: object, param
•Edición: del, ins
•Texto Bidireccional: bdo
•Módulo de Imagen: img
•Metainformación: meta
•Scripting: noscript, script
•Hoja de Estilo: style element
•Link: link
•Base: base
www.maximiliano.cl
+ ElementosPropiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots) •Estructura: body, head, html, title
•Texto: abbr, acronym, address, blockquote, br, cite,
code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre,
q, samp, span, strong, var
•Presentación: b, big, hr, i, small, sub, sup, tt
•Formularios: button, fieldset, form, input, label,
legend, select, optgroup, option, textarea
•Tablas: caption, col, colgroup, table, tbody, td, tfoot,
th, thead, tr
•Mapa de Imagen del lado Cliente: area, map
•Mapa de Imagen del lado Servidor: Attribute
ismap on img •Hipertexto: a
•Lista: dl, dt, dd, ol, ul, li
•Objetos: object, param
•Edición: del, ins
•Texto Bidireccional: bdo
•Módulo de Imagen: img
•Metainformación: meta
•Scripting: noscript, script
•Hoja de Estilo: style element
•Link: link
•Base: base Comments
<!-- Comment Text -->
Core Attributes
class
id
Note: Core Attributes may not be used
in base, head, html, meta, param,
script, style or title elements.
style
title
Language Attributes
dir
Note: Language Attributes may not be
used in base, br, frame, frameset, hr,
iframe, param or script elements.
lang
Keyboard Attributes
accesskey tabindex
Form Events
onBlur
onChange
onFocus
onReset
onSelect
onSubmit
Window Events
onLoad onUnload
Keyboard Events
onKeydown
onKeypress
onKeyup
Mouse Events
onClick
onDblclick
onMousedown
onMousemove
onMouseout
onMouseover
onMouseup
Document Outline
<!DOCTYPE>
<html>
<head>
<body>
Version of (X)HTML
HTML document
Page information
Page contents
Common Character Entities
"
&
<
>
@
€
•
™
£
 
©
"
&
<
>
@
€
•
™
£
©
Quotation mark
Ampersand
Less than
Greater than
"At" symbol
Euro
Small bullet
Trademark
Pound
Non-breaking space
Copyright symbol
Available free from AddedBytes.com
Links
<a href="">
<a href="mailto:">
<a name="name">
<a href="#name">
Page link
Email link
Anchor
Link to anchor
Empty Elements
<area />
<base />
<br />
<col />
<hr />
<img />
<input />
<link />
<meta />
<param />
Page Information
<base />
<meta />
<title>
<link />
<style>
<script>
Base URL
Meta data
Title
Relevant resource
Style resource
Script resource
Tables
<table>
<caption>
<thead>
<tbody>
<tfoot>
<colgroup>
<col />
<tr>
<th>
<td>
Table
Caption
Table header
Table body
Table footer
Column group
Column
Table row
Header cell
Table cell
Forms
<form>
<fieldset>
<legend>
<label>
<input />
<select>
<optgroup>
<option>
<textarea>
<button>
Form
Collection of fields
Form legend
Input label
Form input
Drop-down box
Group of options
Drop-down options
Large text input
Button
Objects
<object>
<param />
Object
Parameter
Document Structure
<h[1-6]>
<div>
<span>
<p>
<br />
<hr />
Heading
Page section
Inline section
Paragraph
Line break
Horizontal rule
Lists
<ol>
<ul>
<li>
<dl>
<dt>
<dd>
Ordered list
Unordered list
List item
Definition list
Definition term
Term description
Text Markup
<strong>
<em>
<blockquote>
<q>
<abbr>
<acronym>
<address>
<pre>
<dfn>
<code>
<cite>
<del>
<ins>
<sub>
<sup>
<bdo>
Strong emphasis
Emphasis
Long quotation
Short quotation
Abbreviation
Acronym
Address
Pre-formatted text
Definition
Code
Citation
Deleted text
Inserted text
Subscript
Superscript
Text direction
Images and Image Maps
<img />
<map>
<area />
Image
Image Map
Area of Image Map
+ ElementosPropiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots) •Estructura: body, head, html, title
•Texto: abbr, acronym, address, blockquote, br, cite,
code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre,
q, samp, span, strong, var
•Presentación: b, big, hr, i, small, sub, sup, tt
•Formularios: button, fieldset, form, input, label,
legend, select, optgroup, option, textarea
•Tablas: caption, col, colgroup, table, tbody, td, tfoot,
th, thead, tr
•Mapa de Imagen del lado Cliente: area, map
•Mapa de Imagen del lado Servidor: Attribute
ismap on img •Hipertexto: a
•Lista: dl, dt, dd, ol, ul, li
•Objetos: object, param
•Edición: del, ins
•Texto Bidireccional: bdo
•Módulo de Imagen: img
•Metainformación: meta
•Scripting: noscript, script
•Hoja de Estilo: style element
•Link: link
•Base: base Comments
<!-- Comment Text -->
Core Attributes
class
id
Note: Core Attributes may not be used
in base, head, html, meta, param,
script, style or title elements.
style
title
Language Attributes
dir
Note: Language Attributes may not be
used in base, br, frame, frameset, hr,
iframe, param or script elements.
lang
Keyboard Attributes
accesskey tabindex
Form Events
onBlur
onChange
onFocus
onReset
onSelect
onSubmit
Window Events
onLoad onUnload
Keyboard Events
onKeydown
onKeypress
onKeyup
Mouse Events
onClick
onDblclick
onMousedown
onMousemove
onMouseout
onMouseover
onMouseup
Document Outline
<!DOCTYPE>
<html>
<head>
<body>
Version of (X)HTML
HTML document
Page information
Page contents
Common Character Entities
"
&
<
>
@
€
•
™
£
 
©
"
&
<
>
@
€
•
™
£
©
Quotation mark
Ampersand
Less than
Greater than
"At" symbol
Euro
Small bullet
Trademark
Pound
Non-breaking space
Copyright symbol
Available free from AddedBytes.com
Links
<a href="">
<a href="mailto:">
<a name="name">
<a href="#name">
Page link
Email link
Anchor
Link to anchor
Empty Elements
<area />
<base />
<br />
<col />
<hr />
<img />
<input />
<link />
<meta />
<param />
Page Information
<base />
<meta />
<title>
<link />
<style>
<script>
Base URL
Meta data
Title
Relevant resource
Style resource
Script resource
Tables
<table>
<caption>
<thead>
<tbody>
<tfoot>
<colgroup>
<col />
<tr>
<th>
<td>
Table
Caption
Table header
Table body
Table footer
Column group
Column
Table row
Header cell
Table cell
Forms
<form>
<fieldset>
<legend>
<label>
<input />
<select>
<optgroup>
<option>
<textarea>
<button>
Form
Collection of fields
Form legend
Input label
Form input
Drop-down box
Group of options
Drop-down options
Large text input
Button
Objects
<object>
<param />
Object
Parameter
Document Structure
<h[1-6]>
<div>
<span>
<p>
<br />
<hr />
Heading
Page section
Inline section
Paragraph
Line break
Horizontal rule
Lists
<ol>
<ul>
<li>
<dl>
<dt>
<dd>
Ordered list
Unordered list
List item
Definition list
Definition term
Term description
Text Markup
<strong>
<em>
<blockquote>
<q>
<abbr>
<acronym>
<address>
<pre>
<dfn>
<code>
<cite>
<del>
<ins>
<sub>
<sup>
<bdo>
Strong emphasis
Emphasis
Long quotation
Short quotation
Abbreviation
Acronym
Address
Pre-formatted text
Definition
Code
Citation
Deleted text
Inserted text
Subscript
Superscript
Text direction
Images and Image Maps
<img />
<map>
<area />
Image
Image Map
Area of Image Map
Tarea
Publicar un post con:
Tipos de elementos que se pueden anidar dentro de
otros
Ejemplificar utilizando el editor de HTML de
WordPress
Apuntes de la clase, lo que les quedó claro y
los que no y les gustaría ver nuevamente.
Publicar un post con:
Tipos de elementos que se pueden anidar dentro de
otros
Ejemplificar utilizando el editor de HTML de
WordPress
Apuntes de la clase, lo que les quedó claro y
los que no y les gustaría ver nuevamente.
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 6,552
- Slides 25
- Age 5577 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
37 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
40 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
37 views
14
Fertility awareness methods for women in the society
Isaiah47
34 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
32 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
35 views