Curso de HTML I (Modo de Compatibilidad)

Instituto San Vicente de Paul Instituto San Vicente de Paul
Prof. Alejandro Woobs

Prof. Gerardo A. Uroz
Programacin I
Curso HTML
Qu es HTML?
En principio, empecemos diciendo que HTML son las siglas de HyperText Markup
Language (o Lenguaje de marcado de hipervnculos o hipertexto).
Una pgina Web abunda en marcas de hipervnculos (enlaces). Generalmente, Una pgina Web abunda 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.
2 Profesor: Gerardo A. Uroz
Curso HTML
Fundamentos:
HTML es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto
presentado de forma estructurada y agradable, con enlaces (hyperlinks) que
conducen a otros documentos o fuentes de informacin relacionadas, y con conducen a 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).
Curso HTML
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.
<HTML>
<HEAD>
<TITLE>Primera pgina</TITLE>
</HEAD>
<BODY>
...
...
...
</BODY>
</HTML>
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.
Curso HTML
Definiciones
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. 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.
Curso HTML
Definiciones
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.
Curso HTML
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 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.
Curso HTML
Componentes de una Pgina Web
La primera instruccin <HTML> indica al explorador de Internet que ah
comienza una pgina Web.
La siguiente instruccin <HEAD> indica el encabezado de la pgina, es decir
el rea de la barra de ttulo.
TITLE> indica el ttulo de la pgina propiamente dicho.
<BODY> 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).
Curso HTML
El signo /
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. 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 instruccin anterior a todas las lneas
inferiores, hasta que se encuentre otra instruccin que modifique las
propiedades actuales.
Curso HTML
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 archivo como una pgina Web. Una pgina Web tiene la extensin HTM, la
cual se debe especificar 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.
Curso HTML
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).
Curso HTML
Ejercicio
El resultado se muestra a continuacin.
Curso HTML
Guardado del archivo como 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 de
textos como Microsoft Word, slo veremos el texto, pero el cdigo no es accesible
para el usuario. 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:
Se hace clic con el botn secundario en un rea que no sea un objeto (como
una imagen, un hipervnculo, etc.)
En el men contextual, se elige la opcin Ver cdigo fuente.
Curso HTML
Estilos de Ttulos
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 ms
pequeo. Aunque el programador tiene la opcin de utilizar un tamao diferente
mediante la instruccin FontSize.
Curso HTML
A continuacin se muestra el cdigo y el resultado de la
utilizacin de ttulos en una pgina Web.
Curso HTML
El resultado de este cdigo se muestra a continuacin.
Curso HTML
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 , para subrayado use con su respectivo signo de cierre.
Ejemplo:
 Estilos Negrita 
 Estilo Cursiva 
Estilo subrayado 
Curso HTML
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 un salto de lnea,
debemos incluir esta instruccin en el lugar donde se desee generar una
nueva lnea.
Curso HTML
El resultado se muestra a continuacin.
Curso HTML
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 Este es un ejemplo de instrucciones de formateo de texto 
Produce este resultado:
Curso HTML
La instruccin funciona de forma similar a . Cuando se aplica , el
texto afectado aparece siempre en estilo cursiva. Por ejemplo, el siguiente cdigo:
Este es un ejemplo de instrucciones de formateo de texto Este es un ejemplo de instrucciones de formateo de texto
Produce el siguiente resultado:
Curso HTML
Ejercicio
Usando las instrucciones conocidas hasta este momento, debes disear la pgina que
se muestra a continuacin.
Curso HTML
Pistas
Se usa el estilo H1 para el ttulo principal,
 o para el remarcado negrita o para el remarcado negrita
y para el subrayado. Doble salto de lnea
 para la separacin de un prrafo con otro.
Curso HTML
Preguntas
????? ?????

Curso de HTML I (Modo de Compatibilidad)

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Curso de HTML I (Modo de Compatibilidad)

Enviado por

Direitos autorais:

Formatos disponíveis

Instituto San Vicente de Paul Instituto San Vicente de Paul

Prof. Alejandro Woobs

Você também pode gostar