Un poco de teoría
sobre Lenguaje HTML, muy básico con el objetivo de comenzar a comprender
su estructura y etiquetado. Al final del post pueden encontrar la presentación
subida en slideshare.
Manual Básico de HTML
•
Qué es HTML
•
Etiquetas HTML de
Formato Físico
•
Etiquetas HTML de
Formato lógico
•
Estructura de HTML
•
Ejemplos
¿Qué es HTML?
Hyper Text Markup
Languaje o
lenguaje de definición de marcas, es un lenguaje
sencillo que permite marcar los documentos de hipertexto mediante unas
etiquetas específicas, de este modo conseguimos darle a los
documentos una cierta estructura.
Etiquetas de HTML
- Para crear los documentos HTML puede usarse cualquier editor de texto, pero en este caso comenzaremos utilizando PSPad o un editor de código que esté disponible en la PC.
- Las etiquetas que se utilizan en HTML, se reconocen en dos tipos, las de apertura y las de cierre, representado simbólicamente así:
Apertura: <Etiqueta> Ej.
<H1> Titulo </H1>
Cierre : </Etiqueta>
Estructura básica de HTML
- El documento HTML se divide en dos partes principales: El encabezado (HEAD) y el cuerpo (BODY). El encabezado es la parte que se encuentra entre las etiquetas <HEAD> y </HEAD>.
- Dentro del mismo se encuentra información sobre nuestro documento, en nuestro caso tenemos el título de la página entre las etiquetas <TITLE> y </TITLE>. En el cuerpo pondremos todo lo que queramos ver en nuestra página texto, imágenes, enlaces, etc.
Primer Ejemplo de HTML
Para el desarrollo del primer ejercicio realice los siguientes pasos.
- Abra el editor de código Note++
- Cree un nuevo documento asegurándose que sea de tipo HTML.
- Observe la estructura básica del nuevo documento generado, después de observarlo, bórrelo y trate de recordarlo escribiéndolo en un nuevo archivo HTML.
Ejemplo1.html
<HTML>
<HEAD>
<TITLE>Titulo de
la página</TITLE>
</HEAD>
<BODY>
Cuerpo de la página
</BODY>
</HTML>
Formato de Texto HTML
Existen dos tipos de
formato para los caracteres: Los formatos físicos y los formatos lógicos.
Formatos físicos
Son los que ordenan
como se va a presentar el texto. Son formatos físicos por ejemplo la negrita, el subrayado...
Etiquetas para formato
de texto físico
<B> Negrita</B>
<SUB> M Subíndice</SUB>
<I>Cursiva</I>
<SUP> M Superíndice
</SUP>
<U>
Subrayado</U>
<TT>Maquina de escribir</TT>
<S> Tachado
</S>
Segundo Ejemplo de HTML
Para el desarrollo del segundo ejercicio realice los siguientes pasos.
- Cree un nuevo archivo de tipo HTML en Note++
- Utilice la estructura básica creada por el programa para aumentar más código HTML a la página web.
- Utilice las etiquetas descritas anteriormente.
Ejemplo2.html
<HTML>
<HEAD>
<TITLE>Formatos físicos</TITLE>
</HEAD>
<BODY>
<B>Este texto esta en negrita</B>
<I>En cambio este esta en cursiva</I>
<U>También se puede subrayar</U>
<S>y tachar</S>
<B><I><U>Se pueden usar</U> varios a</I> la vez</B>
Ejemplo superíndice: 6<SUP>2</SUP>= 36
Ejemplo subíndice: X<SUB>1</SUB> + X<SUB>2</SUB> = Z
</BODY>
</HTML>
<HEAD>
<TITLE>Formatos físicos</TITLE>
</HEAD>
<BODY>
<B>Este texto esta en negrita</B>
<I>En cambio este esta en cursiva</I>
<U>También se puede subrayar</U>
<S>y tachar</S>
<B><I><U>Se pueden usar</U> varios a</I> la vez</B>
Ejemplo superíndice: 6<SUP>2</SUP>= 36
Ejemplo subíndice: X<SUB>1</SUB> + X<SUB>2</SUB> = Z
</BODY>
</HTML>
Tamaño y Color del Texto
Usamos la etiqueta
FONT y la propiedad SIZE. Para ponerle a una palabra un tamaño 7 pondríamos la
etiqueta <FONT> y el
atributo SIZE con el valor 7:
<FONT Size = 5>Texto fuente 5</FONT>
Atributos de la
etiqueta FONT
SIZE
- Este atributo sirve para cambiar el tamaño de las fuentes. Hay varias maneras de utilizarlo: Size = n
- De esta manera estamos asignando un tamaño directamente. El tamaño (n) va desde uno a siete donde uno es el valor de letra más pequeño y siete el más grande.
Tamaño del Texto, Font Size
<FONT Size=1>El tamaño de letra es 2</FONT>
<FONT Size=4>El tamaño de letra es 4</FONT>
<FONT Size=7>El tamaño de letra es 7</FONT>
Tamaño del Texto en Base a 3
Incrementamos o
disminuimos un tamaño (n) relativo al tamaño base que por defecto es 3.
Size=+n ó Size=-n
<FONT Size=-1>Tamaño de letra 2 (3-1)</FONT>
<FONT Size=+3>Tamaño de letra 6 (3+3)</FONT>
Color del Texto, Font Color
<FONT Color=Blue>Esta frase es de
color Azul</FONT>
<FONT Color="#0000ff">Esta
frase también es de color Azul</FONT>
<FONT Color=Red Size=5>Esta frase es
de color Rojo</FONT>
Fuente del Texto, Font Face
Se utiliza para
cambiar el tipo de la fuente. Si no definimos este atributo cada navegador
cargara el documento HTML con la fuente que tenga predeterminada, lo mismo
pasará si el ordenador en que se visualice la página no contiene el tipo de
fuente que definamos en el documento con este atributo.
<FONT Face="Comic Sans MS" Size=5>
Tipos de fuente
</FONT>
Etiqueta Font Face Multiple
Se puede definir más
de un tipo de letra, con el fin de que si un ordenador no contiene el primer
tipo de fuente que contiene el atributo, pruebe con el segundo, tercero y …..
Hasta encontrar una que tenga disponible el navegador.
<FONT Face="Arial,Comic Sans MS" Size=5>
Tipos de fuente
</FONT>
Tercer Ejemplo de HTML
Para el desarrollo del tercer ejercicio realice los siguientes pasos.
- Cree un nuevo archivo de tipo HTML en Note++
- Copie el código del ejercicio dos en el nuevo archivo creado y modifíquelo agregando el siguiente código con etiquetas para tamaño, color y tipo de fuente.
Ejemplo3.html
<FONT Size=1>El tamaño de letra es 2</FONT>
<FONT Size=4>El tamaño de letra es 4</FONT>
<FONT Size=7>El tamaño de letra es 7</FONT>
<FONT Size=-1>Tamaño de letra 2 (3-1)</FONT>
<FONT Size=+3>Tamaño de letra 6 (3+3)</FONT>
<FONT Color=Blue>Esta frase es de color Azul</FONT>
<FONT Color="#0000ff">
Esta frase también es de color Azul</FONT>
<FONT Color=Red Size=5>Esta frase es de color Rojo</FONT>
<FONT Color=Red Size=5>Esta frase es de color Rojo</FONT>
<FONT Color=Red Size=7 Face="Comic Sans MS,Arial“>
Ejercicio 5<BR> </FONT>
<FONT Color="#33ccaa" Size=5>Atributos<BR></FONT>
<FONT Color="#bb22ff" Size=+3 Face="Courier New“></FONT>
<FONT Color="#bb22ff" Size=+3 Face="Courier New“></FONT>
Justificación del Texto
Justificado a la Izquierda:
<p align=“left”> Texto alineado a la
izquirda</p>
Justificado al Centro:
<p align=“center”> Texto alineado al
centro</p>
Justificado a la derecha:
<p align=“right”> Texto alineado a la
derecha</p>
Etiqueta DIV
•
Una
forma de simplificar el código y evitar introducir continuamente el tributo
align sobre cada etiqueta es utilizando la etiqueta <DIV>.
•
Esta
etiqueta por sí sola no sirve para nada. Tiene que estar acompañada del
atributo align y nos permite alinear cualquier elemento (párrafo o imagen).
Ejemplo de la etiqueta <DIV>
<p align=“left”>Parraro1</p>
<p align=“left”>Parraro2</p>
<p align=“left”>Parraro3</p>
Es equivalente a:
<div align=“left”>
<p>Parraro1</p>
<p>Parraro2</p>
<p>Parraro3</p>
</div>
Aplicar color o imagen de fondo a la Página
<body
bgcolor=“red”>
<body
background=“fondo.jpg”>
Márgenes de Página
•
leftmargin: para indicar el
margen a los lados de la página.
•
topmargin: para indicar el
margen arriba y debajo de la página.
•
marginwidth: para contrapartida de
leftmargin para Netscape.
•
marginheight: igual que topmargin,
pero para Netscape
Cuarto Ejemplo de HTML
Para el desarrollo del cuarto ejercicio realice los siguientes pasos.
- Abra el archivo llamado ejercicio3.html
- Modifique el código aplique un fondo de página y márgenes.
- Puede basarse en el siguiente ejemplo
Ejemplo4.html
<html>
<body topmargin=0 leftmargin=0
marginheight=0 marginwidth=0 bgcolor=“ffffff”>
<table width=100%
bgcolor=ff6666><tr><td>
<h1> Ejemplo4</h1>
<br>
Esta es una tabla sencilla de una
fila.<br>
</td></tr>
</table>
</body>
</html>
Introducción a Lenguaje HTML en Slideshare.net
Descarga y Comparte
Introduccion a Lenguaje HTML, Programacion Web from Pedro Antonio Villalta (Pavillalta)
Practica Sugerida de HTML
- Leer guía sobre etiquetas usadas para la creación de formularios.
- Crear un formulario usando las etiquetas de formularios.
- Crear estructura de página usando etiquetas HTML
Desarrollo de sitios web con php, java script, html5, css, tiendas virtuales, manejadores de contenido cms, wordpress y joomla.
Buen tutorial! Saludos
ResponderBorrar