Programación Web 2

HTML – etiquetas básicas

HTML: HyperText Markup Language
conceptos iniciales

▶ Lenguaje declarativo que describe la estructura de un documento web.

▶ Las posibilidades de formato visual que provee son muy pobres e insuficientes para
el desarrollo de los documentos de la web actual.
▶ Las instrucciones del lenguajes son palabras que deben estar entre los símbolos
menor y mayor.
▶ Una etiqueta o tag, suele tener una etiqueta de cierre con el mismo nombre y
forma, pero con el símbolo barra en la etiqueta final.
<etiqueta>… tipo de contenido … < /etiqueta >
▶ Existen etiquetas sin cierre.
HTML: HyperText Markup
Language
estructura de un documento
▶ Cabecera: contiene etiquetas que no producen una salida
en el documento, es decir, no son visibles, pero que
informan al navegador y buscadores, sobre cómo tratar el
contenido y algunos aspectos especiales como idioma,
codificación de símbolos especiales, etc.
▶ Estas etiquetas suelen llamarse metadatos.
▶ Cuerpo: contiene todas las etiqueta que son visibles en el
navegador. Aunque existen otras que no producen una salida visual pero permiten
organizar las distintas partes del documento.
▶ Se puede controlar con CSS si un elemento o etiqueta es visible o no,
e incluso manipular su comportamiento con JavaScript.
HTML: HyperText Markup Language
estructura de un documento
< html >
< head >
<title>este es el título del documento< /title >
< /head >
< body > aquí se colocan las diferentes etiquetas que
definen la estructura jerárquica del documento, y que
son visibles.

< /body >

< /html >
Tipos de Etiquetas
elementos de bloque y línea
Fundamento:
Un elemento del documento es formado entre una etiqueta de inicio y fin del mismo tipo.
Todos los elementos (etiquetas) tiene implícito una caja envolvente transparente.
Tipo bloque:
Un elemento bloque son aquellas etiquetas que sin importar el tamaño de su contenido, la
caja envolvente ocupa de margen a margen. Y por tanto, el siguiente elemento deberá
aparecer en el siguiente renglón obligatoriamente. Incluso generan una línea en blanco,
antes y después del elemento.
Tipo línea:
Los elementos de línea son aquellas etiquetas donde la caja envolvente ocupa el tamaño
del contenido. Por lo cual si luego de un elemento de este tipo, existe otro del mismo
tipo, continuará en la misma línea, si existe suficiente espacio. De lo contrario realiza un
salto de línea pero sin dejar una línea. Y por tanto, el siguiente elemento deberá aparecer
en el siguiente renglón obligatoriamente. Incluso generan una línea en blanco
Etiquetas básicas de texto
Definición de párrafos y frases:
Cualquier navegador puede mostrar texto sin formato, sin embargo los documentos suelen
tener textos con diferentes tipos de aspectos, como alineación, tipo de letra, tamaño, color,
etc. Por tanto si un texto no es definido con una etiqueta, éste no podrá recibir estilos con
CSS, a menos que los herede de su elemento padre o contenedor.
Los párrafos son etiquetas de tipo bloque, por lo que sin importar el tamaño de su contenido,
la caja envolvente ocupará de margen a margen, por lo tanto el siguiente elemento será
desplazado hacia abajo, dejando una línea en blanco.
<p>… </p> define contenido de párrafo.
Si es necesario crear texto, uno a continuación del otro sin dejar líneas entre ellos, como las frases,
una de las etiquetas más elementales es la siguiente:
<span>… </span> define contenido en línea.
Si a continuación de dicha etiqueta se encuentra cualquier otra de tipo línea, y hay suficiente espacio,
continuará en la misma línea.
Encabezados de HTML
Definición de Títulos o encabezados:
Cualquier documento suele tener títulos y subtítulos, y HTML cuenta con seis niveles de
títulos. Cada uno de ellos definen la jerarquía e importancia, siendo el de nivel 1 el
más importante o título principal de un documento.

A su vez, en forma automática se presentan en diferentes tamaños y formato de negritas.

Como se tratan de elementos de tipo bloque, dejarán una línea en blanco antes y después del
mismo.

< h1>Curso PHP – WEB 2.0</h 1>

< h2>HTML</h 2>
< h3>CSS</h 3>
< h4>Javascript</h 4>
< h5>PHP</h 5>
< h6>MySQL</h 6>
Formato de caracteres en HTML
Formatos básicos:
HTML es un lenguaje que fue evolucionando con el tiempo para brindar la posibilidad de
realizar documentos más complejos como los de hoy en día. Sin embargo aún se
mantienen algunas etiquetas que permiten dar un formato muy básico en el
documento. Aunque esto es completamente desaconsejado y debe ser reemplazado con
CSS, existen algunas circunstancias en las que podrían llegar a ser útiles.

<b>… </b> define contenido en negritas

<i>… </i> define contenido en cursivas

<u>… </u> define contenido en subrayado

<s>… </s> define contenido en tachado

Formato de caracteres en HTML
Otros formatos:
Existen algunos formatos definidos por etiquetas que resultan muy útiles ya que no
existen como formato visual, es decir, no se establecen con CSS, ya que estas etiquetas
definen un tipo de contenido especial, por ejemplo:

^… define un superíndice

_… define un subíndice

<cite>… </cite> define una cita

<address>… </address> define una dirección
<dl>… </dl> define una lista de definiciones o términos

<dt>… </dt> define nombre del término

<dd>… </dd> define la descripción o definición del término

 Entidades HTML
Entidad html:
Se trata de un código especial asignado a cada carácter disponible, y que puede ser utilizado
en circunstancias en las que no es posible mostrar el mismo, por ejemplo, caracteres como
vocales con tildes, eñes y símbolo que no se encuentran en el teclado como © ® ¼ y otros

Forma genérica: &código;

▶ todas las entidades inician con el símbolo ampersand &
▶ continúan con el código de la entidad código
▶ finalizan con el símbolo punto y coma ;
 Entidades útiles
Ejemplo de entidades
á &aacute; ä &auml;
é &eacute; í ë &euml; ï
&iacute; ó &iuml; ö
&oacute; ú &ouml; ü
&uacute; ñ &uuml; €
&ntilde; Ñ &euro;
&Ñtilde; ' &apos;
< &lt; £ &gt;
> &gt; ¥ &reg;
® &reg;
© &copy; TM
&trade; “ &quot;
& &amp;
espacio &nbsp;
Formato de caracteres en HTML
Formato con fuente, tamaño y color
Existe una etiqueta inicial, que permitía establecer el tipo de fuente, el tamaño y el
color de la misma. Sin embargo se encuentra en completo desuso, incluso es posible
que no se produzca el efecto deseado, ya que al ser una etiqueta obsoleta,
dependiendo del nivel de HTML que se le especifique al navegador, por medio de una
instrucción o directiva especial, será omitida o no.
Para realizar esos efectos, hoy en día es necesario utilizar CSS.
<font face=“fuente1,fuente2,…,fuenten” size=“n” color=“color | #rrggbb”>
contenido formateado < /font >

<font face=“arial,helvetica,sans-serif” size=“2” color=“green | #00ff00”>

contenido formateado en arial tamaño 2 y color verde < /font >
la tabla de Hollerith
memoria de núcleos
sistemas numéricos y representación binaria
sistemas numéricos y representación binaria
Formatos de Imágenes en HTML
Formato de imágenes
Existen muchos tipos de formatos de imágenes, incluso los navegadores están
comenzando a incorporar algunos formatos de cámaras fotográficas
profesionales (archivos raw). Sin embargo los tres tipos de formatos estándar
y clásicos son .gif, .jpg y .png.

Formato Prof. de color Animación Transparencia

.gif 8 bits Sí Sí
.jpg 24bits No No

.png 32bits (24+8) No Sí

Concepto de URL
Uniform Resource Locator
La url se refiere a la ruta para ubicar el archivo de imagen (en este caso).

method://domain/path/file
método://dominio/ruta/archivo
https://www.flickr.com/photos/imagen.jpg Etiqueta para
imágenes:

<img=“url” width=“n” height=“n” title=“texto” alt=“texto” >

Ejemplo de Vínculos
▶ Formato genérico

<a href=“url”>elemento de enlace</a>

<a href=“url” target=“_blank”>elemento de enlace</a>

Ejemplo de Marcadores

▶ Formato genérico

<a href=“#marcador”>elemento de enlace</a>

<a name=“marcador” >elemento marcado</a>

<a href=“url#marcador”>elemento de enlace</a>

Tipos de Listas
Listas desordenadas Listas ordenadas
Unorder List Order List

<ul> <ol>
<li>texto</li> <li>texto</li>
<li>texto</li> <li>texto</li>
<li>texto</li> <li>texto</li>
<li>texto</li> <li>texto</li>
</ul> </ol>

<ul type=“disc | circle | square”> <ol type=“1 | A | a | I | i”>

<li>texto</li> <li>texto</li>
<li>texto</li> <li>texto</li>
<li>texto</li> <li>texto</li>
<li>texto</li> <li>texto</li>
</ol>
</ul>
Tablas
<table> < table border=“1” cellspacing=“1”>
<tr> < tr >
<th>Nombre</th> < th>Nombre</th >
<th>Dirección</th> < th>Dirección</th >
<th>Teléfono</th> < th>Teléfono</th >
<th>Departamento</th> < th>Departamento</th >
</tr> < /tr >
<tr> < tr >
<td>Pedro</td> < td>Pedro</td >
<td>Av. Rivera 898</td> < td>Av. Rivera 898</td >
<td>29028876</td> < td>29028876</td >
<td>Montevideo</td> < td>Montevideo</td >
</tr> < /tr >
<tr> < tr >
<td>Ana</td> < td>Ana</td >
<td>Marruecos 2454</td> < td>Marruecos 2454</td >
<td>26023475</td> < td>26023475</td >
<td>Montevideo</td> < td>Montevideo</td >
</tr> < /tr >
</table> </table>