Elaborado por: Daniel Alexander Santacruz Ricardo

Horario: Mircoles 18:00 a 21:00, Sede Galeras, Saln 404

Fecha: Agosto 19 de 2015

ESTRUCTURA BSICA DE UNA PGINA WEB

1. HTML
El HTML es un lenguaje de programacin que se emplea para el desarrollo
de pginas web de internet, se compone por una serie de etiquetas que el
navegador interpreta y da forma en pantalla, maneja hipervnculos, los
cuales nos permiten navegar entre pginas, hacer saltos de lnea, etc.
Las siglas HTML, Hypertext Markup Language, significan lenguaje de
marcas de hipertexto, que podra decirse es Lenguaje de formato de
documentos para hipertexto, el HTML se encarga de desarrollar una
descripcin sobre los contenidos que aparecen como textos y sobre su
estructura, complementando el texto con diversas herramientas multimedia.
Es un lenguaje muy simple y general que define otros lenguajes que tienen
que ver con el formato de los documentos.
Para la escritura de este lenguaje, se hacen etiquetas que aparecen
especificadas con corchetes o parntesis angulares, usa elementos que le
dan forma a la estructura esencial del lenguaje, estos tienen dos
propiedades, el contenido en s mismo y sus atributos.
Una de las funcionalidades del HTML es permitir el uso de cdigos que se
denominan Scripts, los cuales brindan instrucciones especficas a los
navegadores, entre los Scripts que se pueden utilizar los ms
representativos son JavaScript y PHP.
Algunos usos:

Permitir el desarrollo de pginas web en internet

Hacer pginas web dinmicas y con ambientes agradables para
usuarios
Permitir el uso de otras herramientas en la misma pgina web que se
est viendo
Permitir la implementacin de archivos multimedia que
complementan la informacin que se est observando en una pgina
web.

2. Versiones HTML
Diferencias entre HTML4 y HTML5:
Hay bastantes diferencias entre estos dos lenguajes, herramientas
agregadas y otras eliminadas dejan la innovacin de este lenguaje de
programacin.

1. Sintaxis simplificada: En HTML5 se usa la sintaxis <DOCTYPE HTML!

>, esto es compatible con HTML4 y XHTML1 pero no con SGML.
2. Elemento <canvas>: Este elemento sirve para la representacin de
grficos (Reemplazando a Flash), aunque no ofrece todas las ventajas
que Flash puede ofrecer.
3. Elemento <header> y <footer>: Este par de etiquetas refleja mejor la
anatoma de los sitios web, estn diseados especficamente para
marcar las partes superior e inferior de un sitio web, con este desarrollo
ya no es necesario identificar los elementos con la etiqueta <div>.
4. Elemento <section> y <article>: Estos elementos sirven para marcar
reas de la pgina como tal, ayudan a la pgina en SEO (Search Engine
Optimization) ya que para los motores de bsqueda ser ms fcil el
ranking de la pgina.
5. Elemento <men> y <figure>: El elemento <menu> se usa para los
mens convencionales, barras de herramientas y mens contextuales, el
elemento <figure> sirve para organizar el texto y las imgenes de
manera profesional.
6. Elemento <audio> y <video>: Permiten la insercin de archivos de
audio y video, adems con el elemento <track> (nuevo tambin) permite
ofrecer pistas de texto para el elemento de video.
7. Nuevas caractersticas en elemento <form> y <forminput>: Estos
dos elementos vienen con nuevos atributos y modificaciones.
8. Desaparicin de <b> y <Font>: Segn directrices oficiales se dice que
estos elementos se manejan mejor en CSS.
9. Desaparicin de <frame>, <center> y <big>: Etiquetas poco utilizadas.
Tabla comparativa de elementos HTML4 y HTML5
Etiqueta

Descripcin

<!>

Para incrustar comentarios

<!DOCTYPE>

Para indicar el tipo de documento

<a>

El hipervnculo de toda la vida

<abbr>

Para abreviaciones

<acronym>

No soportado. Define un acrnimo

<address>

Define un elemento de la direccin

<applet>

No soportado. Define un applet

<area>

Define un rea dentro de un mapa de imagen

<article>

Define un artculo

<aside>

Define el contenido, aparte de contenido de la pgina

<audio>

Define el contenido de sonido

<b>

Define texto en negrita

<base>

Define una URL base para todos los enlaces en una pgina

<basefont>

No soportado. Usar CSS en lugar

<bdo>

Define la direccin de la pantalla de texto

<big>

No soportado. Define texto grande

<blockquote>

Defines a long quotation Define una larga cita

<body>

Defines the body element Define el cuerpo elemento

<br>

Inserts a single line break Inserta un salto de lnea

<button>

Defines a push button Define un botn

5
5

<canvas>

Defines graphics Define grficos

<caption>

Defines a table caption Define una tabla ttulo

<center>

Not supported. Defines centered text No soportado. Define texto centrado

<cite>

Defines a citation Define una cita

<code>

Define el cdigo de texto

<col>

Define las caractersticas de las columnas de la tabla

<colgroup>

Define grupos de columnas de la tabla

<command>

Define un botn de comando

<datagrid>

Define los datos en una lista de rboles

<datalist>

Define una lista desplegable

<datatemplate>

Define una plantilla de datos

<dd>

Define una descripcin de la definicin

<del>

Define texto suprimido

<details>

Define los detalles de un elemento

<dialog>

Define un cuadro de dilogo (conversacin)

<dir>

No soportado. Define una lista de directorio

<div>

Define una seccin en un documento

<dfn>

Define un trmino definicin

<dl>

Define una lista de definicin

<dt>

Define un trmino definicin

<em>

Define destac texto

<embed>

Define un elemento embebido de contenido interactivo

<eventsource>

Define un objetivo para los eventos enviados por un servidor

<fieldset>

Define un fieldset

<figure>

Define un grupo de los contenidos de los medios, y su leyenda

<font>

Obsoleto. Define texto fuente, el tamao y el color

<footer>

Define un pie de pgina de una seccin o pgina

<form>

Define un formulario

<frame>

No soportado. Define una sub ventana (un marco)

<frameset>

No soportado. Define un conjunto de marcos

<h1> a <h6>

Define tamao de la cabecera 1 a 6

<head>

Provee informacin sobre el documento

<header>

Define un encabezado de una seccin o pgina

<hr>

Define una lnea horizontal

<html>

Define un documento html

<i>

Define texto en cursiva

<iframe>

Define una lnea sub ventana (frame)

<img>

Define una imagen

<input>

Define un campo de entrada

<ins>

Define texto insertado

<isindex>

No soportado. Define un nico campo de entrada de lnea

<kbd>

Define el teclado de texto

<label>

Define una etiqueta para formularios

<legend>

Define un ttulo en un fieldset

<li>

Define un elemento de la lista

<link>

Define un recurso de referencia

<mark>

Define texto marcado

<map>

Define un mapa de imagen

<menu>

Define una lista de men

5
5

5
5

4
5
5

<meta>

Define la informacin de metadatos

<meter>

Define medicin dentro de un rango predefinido

<nav>

Define vnculos de navegacin

<nest>

Define una nestingpoint en un datatemplate

<noframes>

No soportado. Noframe Define una seccin

<noscript>

Define una seccin noscript

<object>

Define un objeto incrustado

<ol>

Define una lista ordenada

<optgroup>

Define un grupo de opciones

<option>

Define una opcin en una lista desplegable

<output>

Define algunos tipos de produccin

<p>

Define un prrafo

<param>

Define un parmetro para un objeto

<pre>

Define texto preformateado

<progress>

Define el progreso de una tarea de cualquier tipo

<q>

Define una breve cita

<rule>

Define las normas de actualizacin de una plantilla

<s>

No soportado. Define texto tachado

<samp>

Define el cdigo de muestra

<script>

Un Script

<section>

Una seccin

<select>

Lista seleccionable

<small>

Texto en pequeo

<source>

Definir un recurso media

<span>

Una seccin del documento

<strike>

No soportado. Define texto tachado

<strong>

Texto en negrita

<style>

Para definir un estilo

<sub>

Para subndices

<sup>

Para superndice

<table>

Para definir una tabla

<tbody>

Cuerpo de la tabla

<td>

Una celda de la tabla

<textarea>

Define una rea de texto

<tfoot>

Pie (Footer) de una tabla

<th>

Define una cabecera de la tabla

<thead>

Define una cabecera de la tabla

<time>

Defina una fecha

<title>

Para el titulo de la pgina web

<tr>

Fila de una tabla

<tt>

No soportado. Define texto teletipo

<u>

No soportado. Define texto subrayado

<ul>

Para listas desordenadas

<var>

Para definir una variable

<video>

Para indicar que queremos incrustar un video

<xmp>

No soportado. Define texto preformateado

5
4

5
5

5
5

5
4

Tomado de: http://miguelvargasgonzalez.blogspot.com/2012/09/diferenciasentre-html-4-y-html-5.html