Curso HTML CSS Sesion 2/4

60 %
40 %
Information about Curso HTML CSS Sesion 2/4

Published on November 6, 2008

Author: matias.alejo.garcia

Source: slideshare.net

Description

Curso HTML CSS Sesion 2/4

Curso HTML / CSS Segunda Sesión

Presentación Matías Alejo García mailto: [email_address] msn:matias_alejo@hotmail.com http://linkedin.com/in/matias

Primera Sesión Introducción HTML. Historia. Versiones. CSS. HTTP y tipos de sitios web. HTML Estructura y sintaxis. Secciones y elementos. Elementos. Clasificación. Ejemplos CSS Referencia. Sintaxis. Elementos y selectores. Layout tipicos SEO

Introducción

HTML. Historia. Versiones. CSS.

HTTP y tipos de sitios web.

HTML

Estructura y sintaxis.

Secciones y elementos.

Elementos.

Clasificación. Ejemplos

CSS

Referencia. Sintaxis.

Elementos y selectores.

Layout tipicos

SEO

HTML | Sintaxis

HTML | Sintaxis Caracteres de control: Mayor y menor < > Punto y coma ; Ampersand & Comillas “ Utiliza tags SGML <> <div> <form> </div> <p> <div id=”123”> Comentarios <!-- un comentario --> Pueden expandirse varias líneass No pueden anidarse

Caracteres de control:

Mayor y menor < >

Punto y coma ;

Ampersand &

Comillas “

Utiliza tags SGML <>

<div> <form> </div> <p> <div id=”123”>

Comentarios

<!-- un comentario -->

Pueden expandirse varias líneass

No pueden anidarse

HTML | Sintaxis Entidades Permiten representar caracteres especiales, mediante un código numérico o un nombre. Hay un total de 252 entidades con nombre, por ejemplo: &quot; &rarr; &copy; &xE1; Ver ejemplo. Entidad errónea. Más entidades

Entidades

Permiten representar caracteres especiales, mediante un código numérico o un nombre.

Hay un total de 252 entidades con nombre, por ejemplo:

&quot; &rarr; &copy;

&xE1;

Ver ejemplo. Entidad errónea. Más entidades

HTML | Sintaxis Entidades Además, las entidades permiten representar los caracteres de control. <p> 4 < 3 [ERROR!] <p> 4 &lt; 3 [OK] <p> AT&T; IBM y HP [ERROR] <p> AT&amp;T IBM y HP [OK]

Entidades

Además, las entidades permiten representar los caracteres de control.

<p> 4 < 3 [ERROR!]

<p> 4 &lt; 3 [OK]

<p> AT&T; IBM y HP [ERROR]

<p> AT&amp;T IBM y HP [OK]

HTML | Sintaxis Los espacios/tabs/retornos múltiples (HTML) son condensados! <p> Hola Juan <p> Hola Juan Todos los elementos pueden tener los atributos: id : Identifica al elemento. DEBE ser único class : Clasifica al elemento asignandole una o más clases.

Los espacios/tabs/retornos múltiples (HTML) son condensados!

<p> Hola Juan

<p> Hola Juan

Todos los elementos pueden tener los atributos:

id : Identifica al elemento. DEBE ser único

class : Clasifica al elemento asignandole una o más clases.

HTML | Sintaxis Ejemplos <p id=”para1” class=”muyimportante azul”> <p class=”masd123”> <p id=”a123” id=”a434”> <p class=”a123” class=”a434”> Probar validación.

Ejemplos

<p id=”para1” class=”muyimportante azul”>

<p class=”masd123”>

<p id=”a123” id=”a434”>

<p class=”a123” class=”a434”>

Probar validación.

HTML | Estructura

HTML | Estructura !Doctype html head title meta body

!Doctype

html

head

title

meta

body

HTML | Estructura !Doctype Define el tipo de documento HTML o XHTML html Raíz del todos los elementos. Puede tener el atributo “lang”. head Encabezado del documento title Título del documento. No aparece en el documento. meta Metainformación: autores, descripción, keywords, etc. body Cuerpo del documento

!Doctype Define el tipo de documento HTML o XHTML

html Raíz del todos los elementos. Puede tener el atributo “lang”.

head Encabezado del documento

title Título del documento. No aparece en el documento.

meta Metainformación: autores, descripción, keywords, etc.

body Cuerpo del documento

HTML | Header Head tiene usualmente los elementos: Title, Meta y Link Title define el título del documento. NO puede tener elementos internos. SI entidades. Meta se utiliza para definir metaformación, por ejemplo: <meta name=”author” content=”Juan Rios”> Los “names” posible son: authors, copyright, keywords, description, También puede utilizarse para definir headers HTTP <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1”> Links define referencias externas al documento.

Head tiene usualmente los elementos: Title, Meta y Link

Title define el título del documento. NO puede tener elementos internos. SI entidades.

Meta se utiliza para definir metaformación, por ejemplo:

<meta name=”author” content=”Juan Rios”>

Los “names” posible son:

authors, copyright, keywords, description,

También puede utilizarse para definir headers HTTP

<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1”>

Links define referencias externas al documento.

HTML | Header Ver ejemplos en Firefox <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=ISO-8859-1&quot;> <title>The global structure of an HTML document</title> <link rel=&quot;previous&quot; href=&quot;../types.html&quot;> <link rel=&quot;next&quot; href=&quot;dirlang.html&quot;> <link rel=&quot;contents&quot; href=&quot;../cover.html#toc&quot;> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href= &quot;http://www.w3.org/StyleSheets/TR/W3C-REC&quot;> <link rel=&quot;STYLESHEET&quot; href=&quot;../style/default.css&quot; type=&quot;text/css&quot;> </head>

HTML | Body Body contiene el cuerpo del documento. Los elementos en Body pueden clasificase en: Inline Estan embebidos en el texto. Sólo pueden contener elementos inline. Block-level Comienzan y terminan con un salto de línea. Pueden contener elementos inline o block-level.

Body contiene el cuerpo del documento.

Los elementos en Body pueden clasificase en:

Inline Estan embebidos en el texto. Sólo pueden contener elementos inline.

Block-level Comienzan y terminan con un salto de línea. Pueden contener elementos inline o block-level.

HTML | Estructura <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;> <html lang=&quot;es&quot;> <head> <title> Altas Cumbres </title> <meta name=&quot;description&quot; content=&quot;las mas altas cumbres&quot;> <meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=UTF-8&quot;> <meta name=&quot;keywords&quot; content=&quot;cumbres, altas, montañas &quot;> <meta name=&quot;content-language&quot; content=&quot;es_AR&quot;> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/css/altos.css&quot; media=&quot;all&quot;> </head> <body> .... </body> </html>

HTML | Elementos

HTML | Elementos Vamos describir los elementos descriptivos! ( no procedurales) El objetivo es armar HTMLs bien estructurados. Luego nos preocuparemos por la presentación

Vamos describir los elementos descriptivos!

( no procedurales)

El objetivo es armar HTMLs bien estructurados.

Luego nos preocuparemos por la presentación

HTML | Elementos Agrupamiento (div y span) Títulos (h1... h6) Parrafos (p) Links (a) Listas (ul ol li)

Agrupamiento (div y span)

Títulos (h1... h6)

Parrafos (p)

Links (a)

Listas (ul ol li)

HTML | Elementos Agrupamiento <div> : Block-level <span> : Inline Sirven para agrupar información relacionada. A estos grupos es posible asignarles estilos. Clases y ids. Ver ejemplo de grupos

Agrupamiento

<div> : Block-level

<span> : Inline

Sirven para agrupar información relacionada.

A estos grupos es posible asignarles estilos.

Clases y ids.

Ver ejemplo de grupos

HTML | Elementos Headers H1,H2,...H6 En orden de importancia. Todas las páginas debería tener por lo menos un H1 y un H2. inline: por lo que no es recomendable usar elementos “block-level” adentro. Son usados por los robots de indexación. Ver ejemplo.

Headers

H1,H2,...H6

En orden de importancia.

Todas las páginas debería tener por lo menos un H1 y un H2.

inline: por lo que no es recomendable usar elementos “block-level” adentro.

Son usados por los robots de indexación.

Ver ejemplo.

HTML | Elementos Párrafos <p> Lorem ipsum </p> El texto en general no debe estar “suelto”. </p> es opcional en HTML Permite luego alinear, justificar, ocultar con mayor facilidad. Inline

Párrafos

<p> Lorem ipsum </p>

El texto en general no debe estar “suelto”.

</p> es opcional en HTML

Permite luego alinear, justificar, ocultar con mayor facilidad.

Inline

HTML | Elementos Hipervínculos <a href=”URL_DESTINO”> descripción </a> inline URL_DESTINO debe ser un URL relativo, absoluto o canónico. “ ../index.html” [RELATIVO] “ /paginas/seccion2.html” [ABSOLUTO] “ http://otrositio.com/ ” [CANONICO] Mejor Absoluto y canónico

Hipervínculos

<a href=”URL_DESTINO”> descripción </a>

inline

URL_DESTINO debe ser un URL relativo, absoluto o canónico.

“ ../index.html” [RELATIVO]

“ /paginas/seccion2.html” [ABSOLUTO]

“ http://otrositio.com/ ” [CANONICO]

Mejor Absoluto y canónico

HTML | Elementos Hipervínculos La descripción y MUY imporante. Define keywords al destino. NO usar “aqui” “este” como descripción: para ver más modelos, hacer click aqui [NO] Ver más modelos [SI] Usar acciones! Cuando son acciones. Sustantivos, cuando son referencias: En el avión hércules se encontraron 23 ...

Hipervínculos

La descripción y MUY imporante. Define keywords al destino.

NO usar “aqui” “este” como descripción:

para ver más modelos, hacer click aqui [NO]

Ver más modelos [SI]

Usar acciones! Cuando son acciones.

Sustantivos, cuando son referencias:

En el avión hércules se encontraron 23 ...

HTML | Elementos Hipervínculos Deben ser identificables como hipervínculos rápidamente. (tratar de preservar color y subrayado estándar). El atributo: target=”_blank” permite abrir en ventanas nuevas. Tienen 4 estados: link visited hover active Es posible asignarle estilos a cada estado por separado.

Hipervínculos

Deben ser identificables como hipervínculos rápidamente. (tratar de preservar color y subrayado estándar).

El atributo: target=”_blank” permite abrir en ventanas nuevas.

Tienen 4 estados:

link

visited

hover

active

Es posible asignarle estilos a cada estado por separado.

HTML | Elementos Listas Permite enumerar un conjunto de items relacionados Es recomendable usarles siempre que sea posible. Por defecto, se muestran como bullets, pero pueden ser muy diferentes. Pueden anidarse.

Listas

Permite enumerar un conjunto de items relacionados

Es recomendable usarles siempre que sea posible.

Por defecto, se muestran como bullets, pero pueden ser muy diferentes.

Pueden anidarse.

HTML | Elementos Listas Ordenadas <ol> Listas sin orden <ul> Item <li> Elemplo: <ul id=”tipos_de_elementos”> <li> Nobles </li> <li> Metálicos </li> <li> No metálicos </li> <li> Tierras raras </li> </ul>

Listas Ordenadas <ol>

Listas sin orden <ul>

Item <li>

Elemplo:

<ul id=”tipos_de_elementos”>

<li> Nobles </li>

<li> Metálicos </li>

<li> No metálicos </li>

<li> Tierras raras </li>

</ul>

HTML | Elementos Ejercicios HTML que describa un cuestionario HTML que describa un producto

Ejercicios

HTML que describa un cuestionario

HTML que describa un producto

HTML | Elementos más!

HTML | + Elementos Emphasis <em> Marca una porción de texto como especial => Ud. esta en <em> miCurso</em>. Es descriptivo, no procedural! Es el mejor ejemplo para reemplazar <i> (en muchos browsers tiene el mismo efecto)

Emphasis <em>

Marca una porción de texto como especial

=> Ud. esta en <em> miCurso</em>.

Es descriptivo, no procedural!

Es el mejor ejemplo para reemplazar <i> (en muchos browsers tiene el mismo efecto)

HTML | + Elementos Acronyms <acronym> Define el comienzo una sigla. <acronym title=”Central General de Trabajadores”>CGT</acronym> <acronym title=”HyperText MetaLanguage”>HTML</acronym> En algunos browsers el title se muestra como popup.

Acronyms <acronym>

Define el comienzo una sigla.

<acronym title=”Central General de Trabajadores”>CGT</acronym>

<acronym title=”HyperText MetaLanguage”>HTML</acronym>

En algunos browsers el title se muestra como popup.

HTML | + Elementos Abbreviations <abbr> Define abreviaciones. <abbr title=”Binary digiT”>Bit</abbr> También se muestra en el title

Abbreviations <abbr>

Define abreviaciones.

<abbr title=”Binary digiT”>Bit</abbr>

También se muestra en el title

HTML | + Elementos Quotations <q> Define citas literales! El me dijo <q> Lo que es moda no incomoda </q> Generalmente de muestran como comillas PERO es descriptivo.

Quotations <q>

Define citas literales!

El me dijo <q> Lo que es moda no incomoda </q>

Generalmente de muestran como comillas PERO es descriptivo.

HTML | + Elementos Citas <cite> Define citas! <p> Y <cite> Juan</cite> dijo <q> No voy a ir!!</q> Se muestra en itálicas.

Citas <cite>

Define citas!

<p> Y <cite> Juan</cite> dijo <q> No voy a ir!!</q>

Se muestra en itálicas.

HTML | Elementos Tablas

HTML | Tablas Tablas <table> Sólo para contenidos que sean tablas!! Captions <caption> headers <thead> footers <tfoot> body <tbody> Table Cell <td> Table header <th> Table row <tr>

Tablas <table>

Sólo para contenidos que sean tablas!!

Captions <caption>

headers <thead>

footers <tfoot>

body <tbody>

Table Cell <td>

Table header <th>

Table row <tr>

HTML | Tablas Ejemplo < table border=&quot;1&quot;> <thead> <tr><th>Artist</th><th>Title</th></tr> </thead> <tfoot> <tr><th colspan=&quot;2&quot;>This is my CD collection</th></tr> </tfoot> <tbody> <tr> <td><span datafld=&quot;artist&quot;></span></td> <td><span datafld=&quot;title&quot;></span></td> </tr> </tbody> </table>

Ejemplo

HTML | Tablas Spanning No siempre la vida de cuadrada! http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_span colspan=”2” rowspan=”2”

Spanning

No siempre la vida de cuadrada!

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_span

colspan=”2”

rowspan=”2”

HTML | Elementos FORMS!

HTML | Forms! FORMS Los forms permiten interactuar con el usuario mediante un conjunto predefinido de componentes de entrada. <form action=”URL” method=”GET”> Nombre: <input type=”text” name=”nombre”><BR> Apellido: <input type=”text” name=”apellido”><BR> </form>

FORMS

Los forms permiten interactuar con el usuario mediante un conjunto predefinido de componentes de entrada.

<form action=”URL” method=”GET”> Nombre: <input type=”text” name=”nombre”><BR> Apellido: <input type=”text” name=”apellido”><BR> </form>

HTML | Forms! FORMS Tipos de entrada: BUTTON CHECKBOX RADIO SELECT FILE HIDDEN

FORMS

Tipos de entrada:

BUTTON

CHECKBOX

RADIO

SELECT

FILE

HIDDEN

HTML | Elementos FORMS!

HTML | Validación Demo W3C

Demo W3C

Add a comment

Related presentations

Related pages

Curso de HTML y CSS | Curso Online - DevCode | Aprende a ...

En este curso aprenderemos a maquetar sitios Web con HTML5 y a brindar estilos con CSS. No necesitas conocimientos previos, ... Curso de HTML y CSS.
Read more

Sesion 3 Curso basico HTML y CSS: modelo de cajas y ...

Sesion 3 Curso basico HTML y CSS: modelo de cajas y posicionamiento ... Curso Basico de CSS ... tutorial html y css ...
Read more

CSS cursor property - W3Schools Online Web Tutorials

The cursor property specifies the type of cursor to be displayed when pointing on an element. Default value: ... HTML, CSS, JavaScript, PHP, jQuery, ...
Read more

Curso de HTML e CSS para iniciantes - Aula 9 - YouTube

Neste vídeo vou mostrar como usar DIVs e como criar um layout simples com HTML e CSS Acompanhe ... Curso HTML e CSS ... (HTML/CSS/PHP) #1
Read more

Cursos de XHTML - La Web del Programador

Listado de cursos de XHTML. ... HTML y XHTML 1.5. HTML y CSS ... El primer documento HTML 2.3. Etiquetas y atributos 2.4. Elementos HTML 2.5.
Read more

Iniciar sesión - OpenWebinars.net - Cursos Online de ...

Cursos; Tutoriales; Blog | Con desde Sevilla, España Camino de los Descubrimientos, 17. Pabellón de Francia. 41092 Sevilla. 611 467 467 ...
Read more

HTML(5) Tutorial - W3Schools Online Web Tutorials

This HTML tutorial contains hundreds of HTML examples. ... HTML, CSS, JavaScript, PHP, jQuery, Bootstrap and XML Certifications. COLOR PICKER. LEARN MORE:
Read more

Comenzando con HTML + CSS - World Wide Web Consortium (W3C)

Para HTML y CSS, lo único que necesitamos son archivos en texto plano. El paso 1 consiste en abrir tu editor de texto (Notepad, TextEdit, HTML Kit o el ...
Read more

Make a Website | Codecademy

Make a Website. Explore HTML & CSS fundamentals as you build a website in this introductory course to web development. ... HTML & CSS; JavaScript; jQuery ...
Read more

HTML5 - World Wide Web Consortium

Work on evolutions of this specification proceeds at http://www.w3.org/TR/html/. The HTML5 ... 8.2.4.61 Between ... 10.2 The CSS user agent ...
Read more