Introduccion HTML

Curso de regularización
HTML, CSS & JavaScript

</TITLE>
¿Porqué estamos aquí?
• Estandarizar el desarrollo Web en base a las
mejores prácticas utilizando:
– HTML
– CSS
– JavaScript
• Esto no es un curso para aprender HTML, CSS
o JavaScript
¿Para que se usan?
• Crear interfaces de usuario
• Páginas Web
• Código ejecutado del lado del usuario
Partes de la interfaz de usuario
• Estructura: HTML
• Presentación: CSS
• Comportamiento: JavaScript
Codificación
1996 2002 2005
HTML CSS JavaScript

Beneficios de las mejores prácticas
• Accesibilidad
• Portabilidad
• Mantenimiento
• Reducir latencia
• Degradantes “con gracia” (Degrading
gracefully)
• “WYSIWYG” y no “WYSIWTF?”
¿Y luego qué?
HTML 5 CSS 3
<!doctype html> etiqueta
<html>
<head>
{
</head> column-count:2;
<body> column-gap:22px;
<header>
</header> column-span:all;
<nav> box-shadow:3px 3px 7px #777;
</nav>
}
<section>
<video></video>
<email></email>
<time></time>
<date></date>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
HTML
HyperText Markup Language
¿Qué es “realmente” HTML?
• Define el contenido y la estructura
• No es un lenguaje de programación, es un
lenguaje de formato, da significado a tu
contenido
Etiquetas y su anatomía
<etiqueta atributo=“valor”>
Contenido
</etiqueta>
<p id=“id” class=“clase”>

Lorem ipsum dolorem…
</p>
<etiqueta atributo=“valor” />
<img src=“imagen.jpg” alt=“logotipo” />
• Las etiquetas y sus atributos deben de escribirse con minúsculas, siempre

deben cerrarse y los valores de los atributos deben de estar entre
comillas.
¿Cómo abordarlo y utilizarlo?
• Tus datos definen tu contenido
• Enfocarse en la semántica, no en la
presentación
• Primero HTML (Estructura), después CSS
(Presentación)
Etiquetas y semántica
Titulares Semántica (documento)
<h1>Titular 1</h1> Título
<h2>Titular 2</h2> Sección
<h3>Titular 3</h3> Subsección
… …
<h6>Titular 6</h6> ¿Sub sub sub subsección?
Otras etiquetas
Etiqueta Semántica
<p>Párrafo<p> Párrafo, texto
<ul> Listado sin orden (sin numeración)
<li>Elemento</li>
…
</ul>
<ol> Lista ordenada (con numeración)
<li>Elemento</li>
…
</ol>
Liga (link)
<a href=“url”>Texto</a>
<em>Texto</em> Texto enfatizado
<strong>Texto</strong> Texto importante
¿Diferencias <em>|<i> y <strong>|<b>?
• Diferencia importante: la semántica
• <em> se enfoca en enfatizar el texto, <i> se
enfoca en que el texto se vea en itálicas
• <strong> se enfoca en resaltar el texto, <b> se
enfoca en que el texto se vea en negritas
• Enfocarse en la semántica, no en la
presentación
Tablas y su “verdadero uso”
<table>
<tr>
<th>Nombre</th> Cabeceras (table header)
<th>Edad</th>
</tr>
<tr>
<td>Juan</td> Datos (table data)
<td>25</td>
</tr>
<tr>
<td>María</td>
<td>22</td>
</tr>
<tr>
<td>Antonio</td>
<td>32</td>
</tr>
</table>
Tablas y su “mal uso”
<table> <form action=“url”>
<tr> <table>
<th>Nombre</th> <tr>
<td>Juan</td> <td>Nombre</td>
</tr> <td><input /></td>
<tr> </tr>
<th>Edad</th> <tr>
<td>25</td> <td>Edad</td>
<tr> </tr>
<th>Sexo</th> <tr>
<td>Masculino</td> <td>Sexo</td>
</table> </tr>
</table>
• ¿Donde están lo múltiples elementos? ¿Está </form>
dando presentación?
• ¿Dando presentación a un formulario?
Etiquetas de semánticas vs presentación
• Semántica • Presentación
<p>…</p> <font>…</font>
<em>…</em> <i>…</i>
<strong>…</strong> <b>…</b>
<label>…</label> <small>…</small>
<span>…</span> <span>…</span>
<br /> <br />
¿Semántica o presentación? <span>…</span> y <br />
<span>…</span> <br />
• Encierra un texto para darle • Crea un salto de línea para dar
presentación “más espacio entre un párrafo u
ó otro” (da presentación)
• Encierra un texto para darle un ó
significado especial usando los • Ese salto de línea puede ser parte
atributos class o id (semántica) del contenido, como una pausa
(ejemplo: poema o canción)
<p>
Mi nombre es María y mi número <p>
de teléfono es <span Verso 1<br/>
class=“telefono”>81-1234- Verso 2<br/>
5678</span> Verso 3<br/>
</p> Verso 4
</p>
Tipos de HTML
• Se usa la etiqueta DOCTYPE para declarar que
versión de HTML se está utilizando para definir
las reglas y se pueda validar (HTML 2.0, 3.2, 4.0,
4.01 o XHTML 1.0, 1.1, 2.0, 4.0 y 5)
<!DOCTYPE HTML PUBLIC “~//W3C//DTD HTML

4.01//EN”
http://www.w3.org/TR/html4/strict.dtd>
<!DOCTYPE html> (mínimo, HTML5)

Validador W3C
• W3C es la organización que define los
estándares para la WWW (World Wide Web)
• El validador permite verificar que tu página
cumpla con la estructura correcta en base a
los estándares definidos por la W3C
• Hace uso del dtd definido en el DOCTYPE
http://validator.w3.org/
Referencias
• http://www.w3schools.com/ : referencias de HTML,
CSS y JavaScript, informa que características están
soportadas en qué navegadores (Nota: no importa lo
que te hayan enseñado antes, IE6 no es un navegador,
aún no sabemos qué es ni porqué lo crearon)
• http://validator.w3.org/ : validador de la W3C para
HTML
• http://www.yourhtmlsource.com/myfirstsite/tagrefere
nce.html : etiquetas y su explicación
• http://code.google.com/edu/submissions/html-css-
javascript/ : Curso del que está basado este curso (por
no decir copiado)

Introduccion HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Introduccion HTML

Transféré par

Droits d'auteur :

Formats disponibles

Curso de regularización

HTML, CSS & JavaScript

1996 2002 2005

HTML CSS JavaScript

<p id=“id” class=“clase”>

<etiqueta atributo=“valor” />

<img src=“imagen.jpg” alt=“logotipo” />

• Las etiquetas y sus atributos deben de escribirse con minúsculas, siempre

<!DOCTYPE HTML PUBLIC “~//W3C//DTD HTML

<!DOCTYPE html> (mínimo, HTML5)

Vous aimerez peut-être aussi