Cargando...


Manual Básico de HTML, Programación Web




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.

introduccion-a-lenguaje-HTML-1
  

Contenido 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.

  1. Abra el editor de código Note++
  2. Cree un nuevo documento asegurándose que sea de tipo HTML.
  3. 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


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.

  1. Cree un nuevo archivo de tipo HTML en Note++
  2. Utilice la estructura básica creada por el programa para aumentar más código HTML a la página web.
  3. 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>

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.

  1. Cree un nuevo archivo de tipo HTML en Note++
  2. 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=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>


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.
  1. Abra el archivo llamado ejercicio3.html
  2. Modifique el código aplique un fondo de página y márgenes.
  3. 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>


El contenido del Post en PDF, Slideshare.net
Descarga y Comparte
Introduccion a Lenguaje HTML, Programacion Web from Pedro Antonio Villalta (Pavillalta)


Practica Sugerida
  • 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 





Haga clic aquí para ver los comentarios 1 Comentarios:

Gracias por tu comentario

Gracias por sus comentarios

Etiquetas

Abrir HTMl dentro de DIV addthis.com app nativas App para moviles Bases de Datos MySql Botones de Compartir Cajas CSS Cascading Style Sheets CHECKBOX Clasificacion CSS CMS Comentarios en PHP comparacion prestashop y magento Conectar con Base De Datos MySql Convenciones de PHP Creación de Formularios css Declarar Estilos CSS Desventajas de Magento Desventajas de Prestashop Diseño paginas web en barcelona Diseño y Desarrollo Web DIV y SPAN Documento Hojas de Estilo ejemplo css ejemplo estilo css Ejemplo Etiquetas Form Ejemplos HTML Ejercicio CSS El Sistema ha Devuelto: (111) Error de Conexión a::1 Fallida Estilos CSS Estructura de HTML Etapas del Diseño Web Etiqueta DIV Etiqueta SPAN Etiquetas HTML Eventos de Formularios HTML Fases del Desarrollo Web Fases del Diseño Web FORM formulario de contacto Formulario de Contacto HTML Formularios HTML framework móviles Framework para Móviles Funcion mail() de PHP Funciones Mysql PHP Glosario de Términos Guia Basica CSS Guia CSS Hoja de Estilo en Cascada hojas de estilo Hojas de Estilo Externas HTML HTML a Texto Plano HTML y PHP HTTP HTTPS Ingeniería Web INPUT Introducción HTML JavaScrip Javascript jquery touch jquerymovile Lenguaje HTML Lenguaje PHP Magento Manejadores de Contenido Marketing Web Marqueting web barcelona Mysql Mysql_Connect Mysql_Query Mysql_Select_Db Objeto Button Objeto Checkbox Objeto Form Objeto Hidden Objeto Password Objeto Radio Objeto Select Objeto Text Objeto Textarea Objetos de Formularios HTML phoneGap PHP plantilla css Plantilla Web con CSS Posicionamiento con Hojas de Estilo Posicionamiento CSS position: static position:absolute position:relative Prestashop Prestashop vs Magento Programación Web Propiedades CSS Propiedades de Formularios Propiedades Y Métodos Puertos para Apache Qué es HTML Que es PhoneGap RADIO Reglas CSS Reglas de PHP Segundo Ejemplo CSS Selectores CSS sencha touch SEO Servidor Web shareaholic.com Sintaxsis PHP Stylesheet TEXTAREA Tiendas En Linea Tipos de CSS titanium appcelerator Uso de los DIV Variables PHP Ventajas de Magento Ventajas de Prestashop Webmaster Widget Xampp Conexión Refused

Directorios Web. Publicar Blogs


En estos sitios puedes promocionar tus sitios web y blog
Directorio de Blogs Blogazos.com Directorio Mexicano Directorio 360dir

Formulario de Contacto

Nombre

Correo electrónico *

Mensaje *