Ingeniería en Desarrollo de Software

Curso de HTML5 (2)

Aquí el autor habla de estructuración de la página web, las etiquetas HTML involucradas y hacer una página web estructurada. El link es el siguiente:

Una página web básica tendrá las siguientes etiquetas:

<!DOCTYPE html>

<html>….</html>

<head>….</head>

<title>….</title>

Ahora bien, la estructura básica es la que sigue:

<!DOCTYPE html>
<html>
<head>
<title> Mi primer sitio web estructurado </title>
</head>
<body>
Hola mundo. Ahora estamos usando c&#243digo html limpio.
<br>
El buen c&#243digo es para su f&#225cil revisi&#243n.
</body>
</html>

 

Hice lo que el autor dijo al pie de la letra y como esperaba, no pude hacer que explorador mostrara bien los acentos o mejor dicho las tildes de las palabras que tienen acento ortográfico. Lo he solucionado poniendo el número de código correspondiente a las «ó» y a la «a». Les pongo la tablita que tomé de http://www.tutorialspoint.com/html5/html5_entities.htm

ISO 8859-1 Character Entities

Result Description Entity Name Number Code
À capital a, grave accent &Agrave; À
Á capital a, acute accent &Aacute; Á
 capital a, circumflex accent &Acirc; Â
à capital a, tilde &Atilde; Ã
Ä capital a, umlaut mark &Auml; Ä
Å capital a, ring &Aring; Å
Æ capital ae &AElig; Æ
Ç capital c, cedilla &Ccedil; Ç
È capital e, grave accent &Egrave; È
É capital e, acute accent &Eacute; É
Ê capital e, circumflex accent &Ecirc; Ê
Ë capital e, umlaut mark &Euml; Ë
Ì capital i, grave accent &Igrave; Ì
Í capital i, acute accent &Iacute; Í
Î capital i, circumflex accent &Icirc; Î
Ï capital i, umlaut mark &Iuml; Ï
Ð capital eth, Icelandic &ETH; Ð
Ñ capital n, tilde &Ntilde; Ñ
Ò capital o, grave accent &Ograve; Ò
Ó capital o, acute accent &Oacute; Ó
Ô capital o, circumflex accent &Ocirc; Ô
Õ capital o, tilde &Otilde; Õ
Ö capital o, umlaut mark &Ouml; Ö
Ø capital o, slash &Oslash; Ø
Ù capital u, grave accent &Ugrave; Ù
Ú capital u, acute accent &Uacute; Ú
Û capital u, circumflex accent &Ucirc; Û
Ü capital u, umlaut mark &Uuml; Ü
Ý capital y, acute accent &Yacute; Ý
Þ capital THORN, Icelandic &THORN; Þ
ß small sharp s, German &szlig; ß
à small a, grave accent &agrave; à
á small a, acute accent &aacute; á
â small a, circumflex accent &acirc; â
ã small a, tilde &atilde; ã
ä small a, umlaut mark &auml; ä
å small a, ring &aring; å
æ small ae &aelig; æ
ç small c, cedilla &ccedil; ç
è small e, grave accent &egrave; è
é small e, acute accent &eacute; é
ê small e, circumflex accent &ecirc; ê
ë small e, umlaut mark &euml; ë
ì small i, grave accent &igrave; ì
í small i, acute accent &iacute; í
î small i, circumflex accent &icirc; î
ï small i, umlaut mark &iuml; ï
ð small eth, Icelandic &eth; ð
ñ small n, tilde &ntilde; ñ
ò small o, grave accent &ograve; ò
ó small o, acute accent &oacute; ó
ô small o, circumflex accent &ocirc; ô
õ small o, tilde &otilde; õ
ö small o, umlaut mark &ouml; ö
ø small o, slash &oslash; ø
ù small u, grave accent &ugrave; ù
ú small u, acute accent &uacute; ú
û small u, circumflex accent &ucirc; û
ü small u, umlaut mark &uuml; ü
ý small y, acute accent &yacute; ý
þ small thorn, Icelandic &thorn; þ
ÿ small y, umlaut mark &yuml; ÿ

En la página proporcionada hay más tablas.

Abriendo el documento index.html con firefox el resultado es lo siguiente:

Como ven lo que metimos en <title>…</title> aparece tanto en la parte más alta del explorador como también en la más baja. El resto del texto es texto normal en dos renglones ya que usamos un <br>. Además ya aparecen las tildes.

Pues ya hicimos una página básica. Pasemos a otra lección…

ISO 8859-1 Character Entities

Result Description Entity Name Number Code
À capital a, grave accent &Agrave; À
Á capital a, acute accent &Aacute; Á
 capital a, circumflex accent &Acirc; Â
à capital a, tilde &Atilde; Ã
Ä capital a, umlaut mark &Auml; Ä
Å capital a, ring &Aring; Å
Æ capital ae &AElig; Æ
Ç capital c, cedilla &Ccedil; Ç
È capital e, grave accent &Egrave; È
É capital e, acute accent &Eacute; É
Ê capital e, circumflex accent &Ecirc; Ê
Ë capital e, umlaut mark &Euml; Ë
Ì capital i, grave accent &Igrave; Ì
Í capital i, acute accent &Iacute; Í
Î capital i, circumflex accent &Icirc; Î
Ï capital i, umlaut mark &Iuml; Ï
Ð capital eth, Icelandic &ETH; Ð
Ñ capital n, tilde &Ntilde; Ñ
Ò capital o, grave accent &Ograve; Ò
Ó capital o, acute accent &Oacute; Ó
Ô capital o, circumflex accent &Ocirc; Ô
Õ capital o, tilde &Otilde; Õ
Ö capital o, umlaut mark &Ouml; Ö
Ø capital o, slash &Oslash; Ø
Ù capital u, grave accent &Ugrave; Ù
Ú capital u, acute accent &Uacute; Ú
Û capital u, circumflex accent &Ucirc; Û
Ü capital u, umlaut mark &Uuml; Ü
Ý capital y, acute accent &Yacute; Ý
Þ capital THORN, Icelandic &THORN; Þ
ß small sharp s, German &szlig; ß
à small a, grave accent &agrave; à
á small a, acute accent &aacute; á
â small a, circumflex accent &acirc; â
ã small a, tilde &atilde; ã
ä small a, umlaut mark &auml; ä
å small a, ring &aring; å
æ small ae &aelig; æ
ç small c, cedilla &ccedil; ç
è small e, grave accent &egrave; è
é small e, acute accent &eacute; é
ê small e, circumflex accent &ecirc; ê
ë small e, umlaut mark &euml; ë
ì small i, grave accent &igrave; ì
í small i, acute accent &iacute; í
î small i, circumflex accent &icirc; î
ï small i, umlaut mark &iuml; ï
ð small eth, Icelandic &eth; ð
ñ small n, tilde &ntilde; ñ
ò small o, grave accent &ograve; ò
ó small o, acute accent &oacute; ó
ô small o, circumflex accent &ocirc; ô
õ small o, tilde &otilde; õ
ö small o, umlaut mark &ouml; ö
ø small o, slash &oslash; ø
ù small u, grave accent &ugrave; ù
ú small u, acute accent &uacute; ú
û small u, circumflex accent &ucirc; û
ü small u, umlaut mark &uuml; ü
ý small y, acute accent &yacute; ý
þ small thorn, Icelandic &thorn; þ
ÿ small y, umlaut mark &yuml; ÿ

febrero 6, 2012 Posted by | HTML5 | , , , , , , , , , , | Deja un comentario

Curso de HTML5 (1)

Siempre me ha gustado la programación web y desde hace años, años, años, que compro libros sobre eso. Ahora con el desarrollo de HTML5 y algunos ejemplos de cosas que he visto que se pueden hacer con él, me ha vuelto el ánimo por lo concerniente a la programación web.

Buscando en internet encontré un cursito en youtube acerca de html5 y me gustó la forma de explicar del autor, Dion Dresschers. Está en inglés y aquí les dejo el link:

Aquí les pongo un resumen de qué dice:

Supuestamente vamos a crear nuestro propio website, ¿será?

Requerimientos:

– Web browser que soporte HTML5

– Editor de textos (uso el Gedit -Linux-).

No se necesita:

– Servidor.

– Conexión a internet.

El código que escribí fue el siguiente:

Hello World!!!
<br><br><br>
Este es mi primer sitio web

 

Lo que hice fue salvar el documento en el escritorio con el nombre index que es recomendable que la primer página se llame index, lo último fue aplicarle una extensión html, o sea el nombre completo sería index.html

Después ya se puede abrir con cualquier navegador que soporte el html5. Aquí la vista con Chromium

<br> sirve para darle espacio entre párrafos y podemos poner varias,  yo por eso usé tres para que el espacio fuera  visible.

Para salvar correctamente nuestro archivo debe ser de texto, le ponemos extensión html y el primer archivo siempre se llamará index.html

Vamos a la siguiente lección.

 

 

febrero 6, 2012 Posted by | Uncategorized | , , , , , , | Deja un comentario