HTML

Hyper Text Markup Language

HTML es un lenguaje utilizado para describir la estructura de páginas webs.

Documento HTML

Se encuentra dividido en dos partes, la cabecera y el cuerpo.

Etiquetas

HTML utiliza etiquetas para marcar los elementos que componen un sitio web .

<nombredelaetiqueta>
    Contenido de la etiqueta
</nombredelaetiqueta>

Elemento: HTML

Es el elemento raíz de nuestro documento HTML

<html>
    ...
    ...
    ...
</html>

Elemento: HEAD

Define la meta-data del documento HTML

<html>
    <head>
        ...
        ...
        ...
    </head>
</html>

Elemento: TITLE

Define el título del documento HTML

<html>
    <head>
        <title>Hola Mundo!</title>
    </head>
</html>

Elemento: BODY

Define el cuerpo del documento HTML

<html>
    <head>
        <title>Hola Mundo!</title>
    </head>
    <body>
        ...
        ...
        ...
    </body>
</html>

Elemento: P

Define párrafos dentro del documento

<html>
    <head>
        <title>Hola Mundo!</title>
    </head>
    <body>
        <p>Hola Mundo!</p>
    </body>
</html>

Elementos: H1-H6

Define los títulos del documento

<h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 4</h3>
<h4>Título 5</h4>
<h5>Título 5</h5>
<h6>Título 6</h6>

Elementos: OL, UL y LI

Definen los listados dentro del documento

<ul>
    <li>UL Uno</li>
    <li>UL Dos</li>
    <li>UL Tres</li>
</ul>

<ol>
    <li>OL Uno</li>
    <li>OL Dos</li>
    <li>OL Tres</li>
</ol>

Elemento: STRONG

Se utiliza para enfatizar el contenido.

<strong>Hola Mundo!</strong>

Elemento: B

Se utiliza para marcar texto en negrita.

<p>Hola <b>Mundo!</b></p>

Elemento: I

Se utiliza para marcar texto en italica.

<p>Hola <i>Mundo!</i></p>

Elemento: SMALL

Se utiliza para disminuir el tamaño del texto.

<p>Hola <small>Mundo!</small></p>

Elementos: DL, DT y DD

Se utilizan para definir listas descriptivas donde DL define el inicio de la lista, DT el titulo o nombre a describir y DD el contenido descrito.

<dl>
  <dt>HEAD</dt>
  <dd>Cabecera del documento HTML</dd>
  <dt>BODY</dt>
  <dd>Cuerpo del documento HTML</dd>
</dl>

Elemento: HEADER

Define el contenedor de la cabecera del documento.

<header>
    ...
    ...
    ...
</header>

Elemento: SECTION

Define una seccion dentro del documento

<section>
    ...
    ...
    ...
</section>

Elemento: FOOTER

Define pie de página dentro del documento

<footer>
    ...
    ...
    ...
</footer>

Elemento: DIV

Define contenedores dentro del documento

<div>
    ...
    ...
    ...
</div>

Elemento: NAV

Define las barras de navegación dentro del documento

<nav>
    ...
    ...
    ...
</nav>

Atributos

Nos proveen información respecto al elemento.

Lo describen.

<p NombeAtributo="ValorAtributo"> ... </p>

Atributo: ID

Es utilizado para identificar de forma única

a los elementos HTML.

<p id="uno"> contenido 1 </p>

<p id="dos"> contenido 2 </p>

Atributo: CLASS

Es utilizado para identificar un grupo

de elementos HTML

<p class="grupo1"> contenido 1 </p>

<p class="grupo1"> contenido 2 </p>

<p class="grupo2"> contenido 2 </p>

Elemento: IMG

Define una imagen dentro del documento.

<img src="http://goo.gl/jbPljG">

Elemento: A

Define un link o enlance dentro del documento

<a href="http://www.google.com.ar">Google!</a>

Elemento: META

Define información sobre el documento

<meta name="keywords" content="HTML, Que es HTML?"> 

<meta name="description" content="Curso de HTML"> 

<meta charset="UTF-8"> 

<meta name="author" content="Neri Güidi">
<a>, <abbr>, <acronym>, <b>, <basefont>, <bdo>, <big>,
<br>, <cite>, <code>, <dfn>, <em>, <font>, <i>, <img>,
<input>, <kbd>, <label>, <q>, <s>, <samp>, <select>,
<small>, <span>, <strike>, <strong>, <sub>, <sup>,
<textarea>, <tt>, <u>, <var>

Elementos en Linea

Elementos en bloque

<address>, <blockquote>, <center>, <dir>, <div>, <dl>,
<fieldset>, <form>, <h1>, <h2>, <h3, <h4>, <h5>, <h6>,
<hr>, <isindex>, <menu>, <noframes>, <nos-cript>, <ol>,
<p>, <pre>, <table>, <ul>

DOCTYPE

Define de que tipo de documento soy.

<!DOCTYPE html>
<!DOCTYPE html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Si quiero estrictamente HTML 4.

Made with Slides.com