Concepto
Creación archivo
Preparados, listos, ...
...ya. Estructura documento HTML
Título y comentarios
Cabeceras
Bloques
Textos
Enlaces
Caracteres especiales
Imágenes
Listas
Tablas
Sinopsis
Una página web es sencillamente un fichero de texto plano (sin formato), con extensión, .HTM o .HTML. En este fichero se escribe el texto que desea mostrarse.
Iniciamos Bloc de notas y en él escribimos:
Este es mi primer ejemplo de página web.
Acto seguido Guardar como... y elegimos el nombre (no olvidemos la extensión html) y el directorio deseado,
y cerramos el Bloc de notas.
Para llevar un orden, emplearemos un nuevo directorio que destinaremos únicamente para las prácticas de estos apuntes. Si aceptamos las recomendaciones de la organización sobre la estructura y organización de las carpetas personales tendremos c:\usr\jrf\directorio_apuntes_web\file1.html, o algo muy parecido.
Si observamos el directorio veremos:
Doble clic en file1, pondremos en marcha el navegador que abrirá file1 y se visualizará:
Hemos construido una página web, y la estamos visualizando con el navegador. Es una página sencilla, pero es una página web.
HTML es un lenguaje de descripción, que sirve para especificar el aspecto que tendrán las páginas web cuando son vistas a través de un navegador.
Según esto, con HTML podremos ampliar nuestro primer ejemplo con las posibilidades que el lenguaje nos ofrece.
Nuevamente tendremos que iniciar el Bloc de notas para poder modificar el archivo, pero lo podemos hacer desde el menú Ver. Código fuente del mismo navegador:
A partir de ahora mantendremos en nuestra pantalla dos ventanas, una con el Bloc de notas, con el código fuente de nuestra página web, y otra con el navegador, que nos mostrará el aspecto de ese código fuente.
Cada vez que rectifiquemos algo en el Bloc de notas, tendremos que emplear Guardar para que tengan efecto los cambios efectuados en el archivo, y en el navegador actualizar los cambios pulsando la tecla F5 (o menú Ver. Actualizar. ) para ver el efecto de los cambios efectuados.
El código HTML se caracteriza por tener unas marcas, etiquetas o directivas que son palabras clave encargadas de delimitar los elementos de un documento. Se escriben entre los símbolos menor que y mayor que, tal así: <nombre_marca>, y se pueden anidar.
La mayoría de las marcas constan de una marca inicial, con el nombre seguida del contenido, y se cierra con la marca final con los símbolos </nombre_marca>.
El texto que tenemos en el Bloc de notas, desde luego no es código HTML, puesto que no tiene estas marcas, lo vemos como tal en el navegador, porque el mismo navegador las supone.
La primera marca de un documento HTML es precisamente <HTML> que se cierra naturalmente con </HTML> y ha de contener todo el documento.
Un documento HTML tiene dos secciones: la cabecera, delimitada con las marcas <HEAD> y </HEAD>, y, el cuerpo del documento, que es lo que contendrá la ventana del navegador, delimitado por <BODY> y </BODY>.
Generalmente los textos que se escriben van organizados en párrafos que quedan delimitados por la etiqueta <P> y </P>.
Completamos nuestro documento, que ahora sí será ya un documento HTML, y podrá ser visto en cualquier navegador, sin que éste tenga que "suponer" nada.
Hechas las modificaciones guardamos el Bloc de notas, y actualizamos el navegador. Tendremos:
El sangrado y los interlineados no son necesarios, y las etiquetas pueden escribirse en mayúsculas o minúsculas. Aquí se emplea el sangrado, líneas en blanco, y las etiquetas se escriben en mayúsculas, para mayor claridad.
Dentro de la sección cabecera la etiqueta <TITLE> y </TITLE> delimita el título que aparecerá en la barra del título de la ventana del navegador.
Otra etiqueta muy interesante es <!> que sirve para incluir comentarios. Se puede colocar en cualquier parte y el navegador no los considera.
Estos son los cambios y el resultado. (No olvidemos guardar y actualizar).
En las páginas web no solamente hay párrafos de texto, HTML también tiene etiquetas para la presentación de cabeceras y títulos. Las parejas de etiquetas <H1> y </H1> a <H6> y </H6> permiten la presentación de cabeceras de párrafos, es decir textos con unas características tipográficas diferentes al párrafo normal.
Podemos marcar zonas (cabeceras y párrafos) con <CENTER> y </CENTER> para indicar que nos aparezcan centradas, con <BLOCKQUOTE> y </BLOCKQUOTE> para efectuar sangrados, emplear la etiqueta <BR> (que no tiene etiqueta de cierre) para hacer un salto de línea dentro de un mismo párrafo, y <HR> (que tampoco tiene etiqueta de cierre) para visualizar una línea horizontal de separación.
La marca <FONT> y </FONT> nos permite definir el aspecto del texto a través de varios atributos de la misma.
Los atributos son los parámetros que puede recibir la marca. Generalmente, los atributos tienen la forma: Nombre=valor, aunque en algunos casos solo es necesario el nombre del atributo.
Un atributo que se usa mucho es el color: color="#rrggbb". Los valores "rrggbb" indican la mezcla de colores, siendo rr = rojo, gg = verde y bb = azul (red, green, blue = RGB). Estas iniciales deben ser sustituidas por números hexadecimales entre 00 y FF (0 y 255 en decimal). El color "#000000" es negro, y el "#FFFFFF" es blanco.
La marca <FONT> utilizada anteriormente también nos permite, además de indicar el color como hemos hecho, permite cambiar la fuente y el tamaño de la letra:
La etiqueta<A>y </A>, es un caso especial de marcado que se utiliza para indicar que un texto hace referencia a otra pagina. El atributo HREF se utiliza para especificar la dirección (URL) del nuevo documento.
Vamos a construir otra página en el mismo directorio donde tenemos la primera, marcando un texto (en este caso Volver) como enlace a esta última.
Una vez guardada la podemos visualizar con el navegador y podemos observar como el texto de enlace (Volver) aparece diferenciado (en color y subrayado).
Volviendo a nuestra página inicial construiremos un enlace a la segunda, y desde ésta podremos volver a la primera.
Probamos el mecanismo de enlace.
El valor del parámetro HREF también puede ser :
Los caracteres especiales pueden escribirse por medio de los códigos universales.
Si escribimos el signo < dentro de un archivoHTML el navegador lo tomará como el inicio de una etiqueta, para que lo tome como el signo que es, lo tendremos que escribir como < (referencia por nombre) o como < (referencia numérica).
Las tildes y otros caracteres propios del castellano pueden escribirse por medio de estos códigos universales de modo que se tenga la seguridad de que serán visibles en navegadores antiguos de otros países.
Para incluir imágenes se emplea la etiqueta <IMG>, que no tiene etiqueta de cierre, con el atributo SRC=imagen para indicar el archivo de la imagen deseada, y ALT=nombre_imagen, para visualizar un texto en caso de que la imagen no pudiera recuperarla el navegador. Los formatos más comunes son imágenes GIF y JPG.
Para probar esta etiqueta copiamos dos imágenes en nuestro directorio de trabajo.
Puedes copiar 
y 
haciendo clic derecho sobre las mismás y seleccionando Guardar imagen como ... del menú contextual que aparece, eligiendo el directorio adecuado en el cuadro de diálogo Guardar imagen,
Pasamos a editar el código HTML.
Podemos observar el resultado que provoca el atributo ALT al tratar de visualizar la imagen no.gif, que no la puede cargar el navegador, en este caso, sencillamente porque no existe.
La imagen irDcha la hemos convertido en un enlace al anidarla dentro de la etiqueta <A>.
Las listas son formás de presentar información muy usadas.
HTML nos permite utilizar listas ordenadas (numeradas) marcadas con <OL> y </OL> y listas sin numeración (<UL> y </UL>). En ambas, cada elemento de la lista se marca con <LI> y </LI>.
Otra forma de lista en la de definición que está marcada con <DL> y </DL>, y en la que se emplea <DT> y </DT> para especificar el término, y <DD> y </DD> para su definición.
Uno de los elementos más importantes de los documentos HTML son las tablas, que permiten presentar la información de manera muy flexible. Una tabla queda marcada por <TABLE> (con el atributo BORDER si se desea se vean los bordes de las celdas) y </TABLE>, cada fila de celdas se marca con <TR> y </TR>,y los datos deben aparecer entre <TD> y </TD>.
A partir de la versión standar HTML 5 el uso de tablas se considera obsoleto, por tanto no se recomienda.
<!--Comentario-->
<HTML> y </HTML>, marca inicial y final del archivo.
<HEAD> y </HEAD>, marca inicial y final de la cabecera del archivo.
<TITLE> texto_titulo </TITLE> elemento de la cabecera que indica el título de la página.
<BODY> y </BODY>, marca inicial y final del cuerpo de la página.
<P> texto_párrafo[ </P>], para separar párrafos.
<Hx> texto_titulo </Hx>, para los encabezados o títulos.
<CENTER> y </CENTER>, marcan la zona que debe quedar centrada.
<BLOCKQUOTE> texto </BLOCKQUOTE>, actúa como un sangrado.
<BR> , salto línea.
<HR>, línea horizontal.
<B> texto </B>: Establece el texto en negrita.
<BIG> texto </BIG>: Establece un texto grande.
<CITE> texto </CITE>: Indica una cita, y generalmente se representa en cursiva.
<CODE> texto </CODE>: código dentro del texto. Suele usar el tipo de letra de caja fija.
<I> texto </I>: Establece el texto en cursiva.
<SMALL> texto </SMALL>: Establece un texto pequeño.
<STRIKE>textp</STRIKE>: tachado.
<STRONG> texto </STRONG>: Denota énfasis fuerte y generalmente va en negrita.
<SUB> texto </SUB>: Establece texto subíndice.
<SUP> texto </SUP>: Establece texto superíndice.
<TT>texto</TT>: letra de teletipo.
<FONT [SIZE=número][ FACE="fuente_tipográfica"][ COLOR="#rrggbb"]> y </FONT>, fuente.
<A HREF="url"> elemento_para_salto </A>, hiperenlace.
<A HREF="mailto:nombre@correo.es">Mi_correo_electrónico</A> enlace a correo.
<IMG SRC="fichero_imagen" [ALT="titulo si no se carga"]>, imagen
<UL> y </UL>, Lista desordenada o Unordered List.
<LI> línea_o_descripción</LI> elemento de la lista.
<OL> y </OL>, Lista ordenada u Ordered List.
<LI> línea_o_descripción</LI> elemento de la lista.
<DL> y </DL>, Lista de definición o Definition List.
<DT> y </DT> (Definition Term) para definir el elemento, y
<DD> y </DD> (Definition Data) para especificar su descripción.
<TABLE [BORDER]> y </TABLE>, tablas.
<TR> y </TR>, para cada fila de celdas. Table Row.
<TD> y </TD>, Table Data. Entre estas marcas deben aparecer los datos.