of 20
7/23/2019 CursoHTML de Goxcon Blas
1/20
7/23/2019 CursoHTML de Goxcon Blas
2/20
mailxmail - Cursos para compartir lo que sabes
Manual HTML
Autor: Silvestre Goxcon Blas1
7/23/2019 CursoHTML de Goxcon Blas
3/20
7/23/2019 CursoHTML de Goxcon Blas
4/20
mailxmail - Cursos para compartir lo que sabes
Presentacin del curso
HTML es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto
presentado de forma estructurada y agradable, con enlaces (hyperlinks) que conducena otros documentos o fuentes de informacin relacionadas, y con inserciones
multimedia (grficos, sonido...).
La descripcin se basa en especificar en el texto la estructura lgica del contenido
(ttulos, prrafos de texto normal, enumeraciones, definiciones, citas, etc) as como los
diferentes efectos que se quieren dar (cursiva, negrita, o un grfico determinado).
2
7/23/2019 CursoHTML de Goxcon Blas
5/20
7/23/2019 CursoHTML de Goxcon Blas
6/20
mailxmail - Cursos para compartir lo que sabes
1. Introduccin
En principio, empecemos diciendo que HTML son las siglas de HyperText Markup
Language (o Lenguaje de marcado de hipervnculos o hipertexto). Una pgina Webabunda en marcas de hipervnculos (enlaces). Generalmente, cuando movemos el
Mouse sobre una lnea de texto, encontramos palabras o expresiones subrayadas, con
color azul (aunque pueden tener otros colores). Cuando hacemos clic sobre alguna
palabra o expresin de hipervnculo, el explorador de Internet nos remite a otro sitio o
pgina Web.
Cuando hablamos de pginas Web, nos referimos a las pginas que se utilizan en los
exploradores de Internet, que, a primera vista, tiene las mismas propiedades. Cabe
aclarar que actualmente se pueden crear pginas Web en muchos programas, en
procesadores de texto como Microsoft Word, Excel, PowerPoint, Access, Corel Draw,Publisher, etc. Sin embargo, cuando se disea la estructura de una pgina Web en
estos programas, el cdigo que permite dar forma a la pgina Web para ser accedida
desde cualquier explorador, queda oculto a los ojos del diseador de la pgina.
HTML es un lenguaje que utiliza los cdigos estandarizados para la creacin de
pginas Web. Sin embargo, desde este punto no se utilizan objetos para colocar en
pantalla, todo lo que se desee hacer y representar, debe ser pensado y previsto antes
de codificar.
Procedimientos iniciales para crear una pgina Web Antes de entrar en detalle acerca
de la creacin de pginas Web, es necesario entender cmo se escribe el cdigo y en
qu programa. El cdigo se puede escribir en cualquier procesador de textos, aunque
es recomendable hacerlo en un programa que no maneje estilos de texto que pueden
no ser reconocidos por el explorador de Internet puede ser un programa como
WordPad, el Bloc de notas o Microsoft Word.
3
7/23/2019 CursoHTML de Goxcon Blas
7/20
7/23/2019 CursoHTML de Goxcon Blas
8/20
mailxmail - Cursos para compartir lo que sabes
2. Estructura de una pgina Web
Estructura de una pgina Web
Toda pgina Web tiene una estructura que permite al programador saber de antemano
qu tipo de informacin necesita introducir. Esto ayuda a que la pgina que disea sea
claramente legible y se pueda modificar ms fcilmente. Si una pgina Web es
complicada en su diseo, habr muy pocos que sepan dar el mantenimiento adecuado.
Abajo se muestra la estructura lgica de una pgina Web.
Primera pgina ... ... ...
Estas lneas son permanentes en una pgina Web. Siempre van a estar presentes no
importando qu tan corta o tan larga sea la pgina y el contenido.La primera instruccin indica al explorador de Internet que ah comienza una
pgina Web. La siguiente instruccin indica el encabezado de la pgina, es
decir el rea de la barra de ttulo. indica el ttulo de la pgina propiamente
dicho. es una instruccin que indica al explorador de Internet que ah empieza
el rea de contenido de la pgina (es decir el cuerpo de la pgina).
En el lenguaje HTML, muchas instrucciones se cierran con el signo / (diagonal) para
indicar al programa que las propiedades aplicadas con esa instruccin se terminan ah
donde se pone el signo diagonal. Si el signo de cierre (/) no se aplica
convenientemente, el programa seguir aplicando las propiedades de la instruccinanterior a todas las lneas inferiores, hasta que se encuentre otra instruccin que
modifique las propiedades actuales.
4
7/23/2019 CursoHTML de Goxcon Blas
9/20
7/23/2019 CursoHTML de Goxcon Blas
10/20
3. Guardado del archivo como pgina Web
Guardado del archivo como pgina Web
Cuando se haya escrito el cdigo de la pgina Web, es necesario guardar el archivo
como una pgina Web. Una pgina Web tiene la extensin HTM, la cual se debeespecificar en el momento de guardar la pgina. Una vez guardado el archivo con la
extensin HTM, se puede crear un acceso directo para este archivo o se puede abrir
directamente desde el sitio en el que se guard.
Ejercicio
Abre el Bloc de notas y copia el siguiente cdigo que se muestra. Cuando hayas
terminado de capturar el cdigo, gurdalo como Primera.htm (si existe y pide
reemplazar el archivo, responde afirmativamente).
El resultado se muestra a continuacin.
mailxmail - Cursos para compartir lo que sabes
5
7/23/2019 CursoHTML de Goxcon Blas
11/20
7/23/2019 CursoHTML de Goxcon Blas
12/20
mailxmail - Cursos para compartir lo que sabes
4. Modificacin de una pgina Web
Una vez creada nuestra pgina Web, ser necesario modificarla. Para ello,
necesitamos abrir el cdigo de la pgina. Si se abre la pgina en un procesador detextos como Microsoft Word, slo veremos el texto, pero el cdigo no es accesible para
el usuario.
Si deseamos obtener el cdigo, ser necesario abrir el bloc de notas y abrir la pgina
desde ah, utilizando la opcin Abrir, y en el cuadro de dilogo Abrir, se elige Todos los
archivos, en la lista Tipo (esto porque la pgina tiene una extensin diferente al filtro
mostrado). Sin embargo, una manera ms cmoda y rpida, es acceder al cdigo
desde la pgina Web abierta. Para ello, se hace lo siguiente:
1.- Se hace clic con el botn secundario en un rea que no sea un objeto (como una
imagen, un hipervnculo, etc.)
2.- En el men contextual, se elige la opcin Ver cdigo fuente.
6
7/23/2019 CursoHTML de Goxcon Blas
13/20
7/23/2019 CursoHTML de Goxcon Blas
14/20
5. Estilos de ttulo
HTML maneja seis estilos de ttulo aplicables al texto. Cuando se aplica un estilo, el
programa interpreta el estilo y lo aplica mientras no encuentre un signo de cierre.
Los estilos de ttulo se enumeran de H1 a H6, siendo H1 el ms grande y H6 el mspequeo. Aunque el programador tiene la opcin de utilizar un tamao diferente
mediante la instruccin FontSize.
A continuacin se muestra el cdigo y el resultado de la utilizacin de ttulos en una
pgina Web.
El resultado de este cdigo se muestra a continuacin.
De aqu en adelante, slo se mostrar la ventana de resultados en los ejercicios. El
alumno tiene la obligacin de usar las instrucciones que se van explicando para
obtener los resultados requeridos en los ejercicios.
mailxmail - Cursos para compartir lo que sabes
7
7/23/2019 CursoHTML de Goxcon Blas
15/20
7/23/2019 CursoHTML de Goxcon Blas
16/20
6. Comandos bsicos de formateo de texto
Negrita, Cursiva, Subrayado
Al igual que otros programas, en HTML puede aplicar el efecto Negrita, Cursiva o
Subrayado al texto. Para el efecto negrita use , para cursiva use , parasubrayado use con su respectivo signo de cierre.
Ejemplo:
Estilos Negrita
Estilo Cursiva
Estilo subrayado
La instruccin
de las lneas de arriba se utiliza para insertar un retorno de
carro.
Si no se incluye esta instruccin en cada lnea de texto, la pgina Web juntar las tres
lneas de texto en una sola lnea. Esto significa que cada vez que deseemos insertar unsalto de lnea, debemos incluir esta instruccin en el lugar donde se desee generar una
nueva lnea.
El resultado se muestra a continuacin.
Existe una instruccin que permite remarcar partes de un prrafo, esta instruccin es la
instruccin STRONG. Por ejemplo, este cdigo:
Este es un ejemplo de instrucciones de formateo de texto
Produce este resultado:
mailxmail - Cursos para compartir lo que sabes
8
7/23/2019 CursoHTML de Goxcon Blas
17/20
La instruccin funciona de forma similar a . Cuando se aplica , el texto
7/23/2019 CursoHTML de Goxcon Blas
18/20
afectado aparece siempre en estilo cursiva. Por ejemplo, el siguiente cdigo:
Este es un ejemplo de instrucciones de formateo de texto
Produce el siguiente resultado:
Ejercicio
Usando las instrucciones conocidas hasta este momento, debes disear la pgina que
se muestra a continuacin.
Se usa el estilo H1 para el ttulo principal, o para el remarcado negrita
y para el subrayado. Doble salto de lnea
para la separacin de un prrafo
con otro.
mailxmail - Cursos para compartir lo que sabes
9
7/23/2019 CursoHTML de Goxcon Blas
19/20
7/23/2019 CursoHTML de Goxcon Blas
20/20
7. Marcador de prrafo
Cuando se desee indicar a HTML un inicio de prrafo y utilizar una alineacin junto con
la instruccin, se debe utilizar
. Este comando se usa junto con las instrucciones de
alineacin , o para modificar la posicin del texto en pantalla.
Por ejemplo, la siguiente lnea de cdigo, centra el texto en la pantalla.
Texto centrado en la pantalla
El siguiente cdigo:
Produjo el resultado que se muestra a continuacin.
Si se desea alinear texto a la derecha, debe introducir una expresin como sta:
Texto justificado a la derecha
Para trazar una lnea de separacin utilice el comando . Esta instruccin sin
modificadores, traza una lnea horizontal predeterminada. Si se incluyen modificadores,se podr personalizar la apariencia de la lnea.
Ejemplo:
Traza una lnea horizontal.
Para modificar la apariencia predeterminada, haga esto:
Traza una lnea de ancho de pantalla (en pxeles) de 200 pxeles. Esta lnea de cdigoproducira una lnea como sta:
mailxmail - Cursos para compartir lo que sabes
10
