Continuamos con el análisis del código HTML para aprender a programar páginas WEB
<?php echo '<?xml version="1.0" encoding="utf-8"?>'; ?>
Éste código es para escritura, los navegadores interpretan el código utf-8 como protocolo para el idioma español, aceptando tildes y ñ sin código especial (ASCII)
Nota: Como lo estamos utilizando como hosting el disco duro no funciona, entonces debemos usar código ASCII.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
Éste texto identifica que el idioma a utilizar es español y hace que se pueda escribir por ejemplo la palabra "página" sin necesidad de escribirla "págnina"
Es también el inicio de html
<head>
Encabezado
<title>Aprendiendo html</title>
El título o nombre que llevará la página web independiente de la URL
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-type|default-style|refresh">
content-type: Especifica la codificación de los caracteres para el documento.
Ejemplo:
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
default-style: Especifica la hoja preferida de estilo para usar.
Ejemplo:
<meta http-equiv="default-style" content="the document's preferred stylesheet">
Nota: El valor del atributo de contenido anterior debe coincidir con el valor del atributo de título en un elemento de enlace en el mismo documento, o debe coincidir con el valor del atributo de título en un elemento de estilo en el mismo documento.
refresh: Define un intervalo de tiempo para que el documento se autorefresque.
Ejemplo:
<meta http-equiv="refresh" content="300">
Nota: El valor "refresh" Debe ser utilizado con mucho cuidado, ya que toma el control de la página lejos del usuario. Usar "refresh" podría causar falla en W3C's Web Content Accessibility Guidelines, como por ejemplo no actualizar más y quedar con una página en blanco.
<meta name="keywords" content="html,página web,diseño web" />
Se trata de las palabras claves con las que serán encontrados por los motores de búsqueda
<meta name="description" content="HTML es un lenguaje utilizado para organizar la presentación de información en diferentes dispositivos que buscan la información por internet" />
Es una descripción general de la página web, también encontrada por los motores de búsqueda
</head>
Cierre del encabezado
<body bgcolor="#032505">
Inicio del cuerpo del documento, "bgcolor" significa color de respaldo background color, en éste caso se está utilizando el código de color #032505 también se pueden utilizar los nombres de los colores en inglés
<div align="center">
div es una agrupación, lo que esté entre <div> y </div> tendrá las mismas características, en éste caso se está indicando que tenga alineación central con align="center", se puede a la derecha align="right", a la izquierda align="left" y justificado align="justify"
<font face="arial" size="12px" color="black"><b>Título de la página</b></font>
font es la definición de las características de la fuente para todo el texto que se encuentre entre <font> y </font>
face="arial" está identificando el tipo de letra a utilizar en éste caso arial, puede usarse arial, verdana, times roman, etc...
size="12px" tamaño de la letra en pixeles si no lleva px es interpretado de otra manera pero también como tamaño
color="black" en éste caso el color de la letra es negro, se puede colocar el color en inglés o por código de colores html.
Si quiero resaltar con color atrás coloco el siguiente código antes y después del texto <span style="background-color:orange">texto a resaltar</span>
De la misma manera para cambiar atributos del texto colocamos códigos así:
<b>Texto en negrilla</b> o <strong>Texto en negrita</strong>
<i>Texto en cursiva</i> o <em>Texto en cursiva</em>
<u>Texto subrayado</u>
<strike>Texto tachado</strike>
<code>Texto en forma de código tipo courier</code> o <kbd>Texto en forma de código tipo courier</kbd>
</div>
Cierre de la agrupación
<table>
Inicio de tabla
<tr>
Inicio de fila
<td width="300" heigh="20">
Inicio de columna, celda con ancho widt="300" y alto heigh="20"
<img src="file:///C:/Users/DOCENTE/Desktop/paginahtml/imagena.jpg" width="300">
Inicio de imagen, src llama el lugar donde está guardado el archivo
<br>
Bajar un renglón
Acá encontramos un texto por defecto, no se le ha especificado propiedades y aparece así<br>
Hubo necesidad de colocar toda la dirección para que encontrara el archivo de la imagen.
El texto que quiere mostrar
á
|
|
á
|
é
|
|
é
|
í
|
|
í
|
ó
|
|
ó
|
ú
|
|
ú
|
</td>
Final de celda columna
<td width="400" heigh="20"><div align="center"><font face="arial" size="4px">Tenemos una celda de una tabla en tamaño 4 px, normal, sin negrilla, centrado</font></div>
</td>
<td> El atributo tr se utiliza para cambiar o agregar filas, td para cambiar o agregar columnas en la tabla. Br se utiliza para cambiar de renglón.<br>
Observe el código de programación de la página y compárelo con el resultado de la misma y analice los componentes del código.
</td>
</tr>
Final de fila
<tr>
<td colspan="3" bgcolor="white">
Celda conformada por tres columnas
<div align="justify">
<font face="verdana" size="5px">
En éste renglón se han unido tres columnas, se hizo mediante el comando <b>"colspan"</b>, también se ha colocado texto con negrilla, ubique el código que lo hace posible.
</font>
</div>
</td>
</tr>
<tr>
<td>
</td>
<td colspan="2">Note que hay unos errores en las palabra "dirección" y en la palabra "página". Encuentre el error y corríjalo.<br>
También note que se han unido dos columnas a la derecha, ubique el código que lo hace posible.
</td>
</tr>
</table>
Cierre de tabla
<br>
<br>
<font face="arial" size="2">Para finalizar envíe los hallazgos al correo de la clase. Éxitos con el desarrollo de la clase.<br>
<br>
Cordial saludo
<br>
Henry Garzón
</html>
Cierre de código html
