Prepa Ibero INTRODUCCIÓN AL HTML PROGRAMACIÓN EN HTML/ TEMA 2

En este tema, se explicaremos qué es HTML de manera más profunda y cuál es su papel para

programar una página web y a su vez un sitio web.

Es importante, para comprender la estructura de una página web, sus fórmulas y códigos para

poder construirla y también encontrar errores y componerlos en caso de que los tenga.

El uso se trata de construir páginas en un editor que se llama DREAM WEAVER. Con este software

es muy sencillo hacer documentos HTML (páginas web), pero para comprender su funcionamiento

y estructura, es necesario primero hacer ejercicios en el BLOC DE NOTAS.

LO QUE DEBES SABER Y RECORDAR:

1.- El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web.

Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma

estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento

del documento.

2.- Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido,

vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia.

3.- Los documentos HTML deben tener la extensión html o htm, para que puedan ser visualizados

en los navegadores (programas que permiten visualizar las páginas web). Es decir, se deben

guardar así: nombredeldocumento.html o nombredeldocumento.htm.

4.- Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar

a los usuarios las páginas web resultantes del código interpretado.

EMPEZAR A PROGRAMAR CON EL BLOC DE NOTAS:

1.- Para abrir el bloc de notas, se hace desde el menú inicio: , al colocar el cursor sobre

Programas aparece otra lista, buscar Accesorios, seguidamente Bloc de notas, hacer clic sobre

este, o en el caso de Windows Vista en:

Menú inicio y luego

escribir “Bloc de notas”.

Siempre que se abre el bloc de notas aparece un documento en blanco. Es recomendable insertar

una nueva línea para cada nueva etiqueta HTML, ya que resulta más fácil trabajar de este modo.

2.- En un primer ejercicio, vamos a escribir como TITLE de la página “Curso HTML Ibero”, como

BODY “Mensaje de prueba en la página de la Prepa Ibero”.

3.- En este siguiente ejercicio se escribirá una segunda línea y un segundo párrafo.

3.1.- En general, cuando trabajamos en Word, se produce un salto de línea al pulsar la

tecla Enter. Si pulsamos Enter en un documento HTML, el salto de línea se producirá en el código,

pero no se mostrará en el navegador. En lugar de pulsar la tecla Enter hay que insertar la

etiqueta <br> donde se desee que se produzca el salto.

Head. Indica que empieza

la cabecera de la página.

TITLE. Es el título del

documento

Indica el inicio del código.

Body. Es el cuerpo del

texto que se escribe en la

página.

OJO. Todos los códigos empiezan con

palabras encerradas en < >. Pero para

marcar que el código termina, las

mimas palabras se vuelven a escribir y

encierran en </ >.

Aquí se hace el salto

de línea.

La etiqueta <br> no precisa ninguna etiqueta de cierre. No hay que insertar la etiqueta </br>

después de ella, ya que dicha etiqueta no existe.

3.2.- El texto de una página puede agruparse en párrafos. Para ello, el texto de cada uno de los

párrafos debe insertarse entre las etiquetas <p> y </p>.

3.3.- Las etiquetas para darles distintos estilos al texto para resaltarlo. Recordando que todas las

etiquetas tienen un código de inicio y uno de fin.

Etiquetas Significado Ejemplo

<b> </b> negrita curso HTML

<i> </i> cursiva curso HTML

<u> </u> subrayado curso HTML

<s> </s> tachado curso HTML

Por ejemplo, si quiero escribir:

La preparatoria Ibero fue mi primera elección para estudiar el nivel medio superior.

El código en el bloc de notas se debe escribir así:

La preparatoria <b>Ibero</b> fue mi <b>primera elección</b> para estudiar el <b>nivel

medio superior</b>.

La etiqueta <p> para el

salto del párrafo.