Indice

  • introduccion
  • Elementos Básicos
  • Ejemplo de documento HTML
  • Etiquetas para texto
  • Otros atributos para texto
  • Ejemplos de combinacion de etiquetas para texto
  • Listas de Elementos
  • Listas de elementos combinados
  • Enlaces, Ligas ó links
  • Imagenes
  • tablas
  • Caracteres especiales
  • Primer documento HTML
  • Atributos al texto
  • Otros Caracteres
    •

    TUTORIAL BASICO HTML

    Introducción

     

    Es un lenguaje que nos permite agregar atributos a los documentos de texto simple, crear documentos de hypertexto para publicar en el WWW (World Wide Web), así como combinar texto con gráficas. HTML es un lenguaje basado en "etiquetas". La mayoría de las funciones o comandos tienen una etiqueta inicial y una etiqueta final. Ejemplo: Texto<B>remarcado</B>, en este caso sólo la palabra remarcado se desplegaría con el atributo de remarcado (bold) a la hora de utilizar un navegador (browser).No todos los navegadores (browsers) soportan todas las funciones o comandos de HTML.El objetivo primordial de este lenguaje es crear una forma universal de almacenar y desplegar la información. Un documento en HTML puede ser creado en cualquier editor o procesador de texto, siempre y cuando sea grabado en formato ASCII. En la actualidad existen una gran variedad de editores especialmente para el web. Algunos de ellos funcionan independientemente y otros a través de un software, como por ejemplo Word. 

    Elementos Básicos

    <HTML> Es la etiqueta que identifica a un documento HTML. Es obligatoria debe incluirse la etiqueta <HTML> en la primera línea y </HTML> al finalizar el documento.
    <HEAD>

    Esta etiqueta contiene información acerca del documento. El único elemento obligatorio es <TITLE>. <TITLE> Es donde se especifica la título del documento, este se despliega en la parte superior de la pantalla de Netscape o de tu navegador.

    Nota: Se recomienda que el título sea lo más breve y explícito posible, pues es aquel que queda registrado en las listas de lugares visitados (history lists) y en el registro de ligas o enlaces (Add Bookmark). Solo es permitido un título para cada documento.
    <BODY> Es el cuerpo del documento y por lo tanto dentro de esta etiqueta deberán estar todos sus elementos: texto, imágenes o gráficas, enlaces, etc. <BODY> también controla el fondo (background), color del texto.

    Ejemplo de un documento HTML:

    <HTML>

    <HEAD>

    <TITLE>Este es mi primer documento HTML</TITLE>

    </HEAD>

    <BODY>PRACTICA # 1</BODY>

    </HTML>

    Etiquetas para texto

    ETIQUETA FUNCION EJEMPLO RESULTADO
    <ADDRESS> Se utiliza para agregar el efecto de "itálico" al texto <ADDRESS>Mi direccion es:</ADDRESS> Mi direccion es:
    <B> Negritas o remarcado (bold). <B>Este es un texto remarcado</B>
    		 Este es un texto remarcado
    <BASE FONT SIZE=n>

    Define el tamaño inicial del texto.


    Nota: El tamaño base del texto por omisión es 3, pero con esta etiqueta se puede modificar, incrementar o disminuir.

    En los ejemplos 1 y 2, se obtiene el mismo resultado, ya que la base es 3. Resulta lo mismo definir la base a 4 que sumar 1 al valor por omisión (3).

    <BASE FONT SIZE=4>Texto base # 4</FONT>

    <BASE FONT SIZE=+1>Texto base +1</FONT>

     

    <BASE FONT SIZE=+2>Texto base +2</FONT>


    <BASE FONT SIZE= -1>Texto base -1</FONT>

    Texto base # 4

     

    Texto base +1

     

    Texto base +2

     

    Texto base -1

     
    <BLINK> Texto parpadeante (blinking) <BLINK>Este texto debe apagar y prender</BLINK> Este texto debe apagar y prender
    <CENTER> Centrar <CENTER>Texto centrado</CENTER>

    Texto centrado
    <EM> Itálico o enfatizado <EM>Este es un texto itálico</EM> Este es un texto itálico
    <FONT SIZE=n>

    Define el tamaño del texto.

    Nota: El tamaño del texto por omisión es 3, pero con esta etiqueta se puede modificar, incrementar o disminuir.

    En los ejemplos 1 y 2, se obtiene el mismo resultado, ya que la base es 3. Resulta lo mismo definir el tamaño a 4 que sumar 1 al valor por omisión (3).

    		 <FONT SIZE=4>Texto # 4</FONT>

    <FONT SIZE=+1>Texto +1</FONT>

    <FONT SIZE=+2>Texto +2</FONT>

    <FONT SIZE= -1>Texto base -1</FONT>

    		 Texto base # 4

    Texto base +1

    Texto base +2

    Texto base -1

     
    <H1>

    <H2>

    <H3>

    <H4>

    <H5>

    <H6>

    Nota: Los encabezados tienen 6 niveles o tamaños de texto predefinidos. El <H1> es el primer nivel y por lo tanto el más grande.

    Cada <Hn> es una línea independiente y su texto es remarcado (bold).

    		 <H1>Título Nivel 1</H1>

    <H2>Título Nivel 2</H2>

    <H3>Título Nivel 3</H3>

    <H4>Título Nivel 4</H4>

    <H5>Título Nivel 5</H5>

    <H6>Título Nivel 6</H6>

    Título Nivel 1

    Título Nivel 2

    Título Nivel 3

    Título Nivel 4

    Título Nivel 5
    Título Nivel 6
    <I> Itálico <I>Este es un texto itálico</I> Este es un texto itálico
    <STRIKE> Marcado <STRIKE>Este es un texto marcado</STRIKE> Este es un texto marcado
    <STRONG> Negritas o remarcado <STRONG>Este es un texto remarcado</STRONG> Este es un texto remarcado
    <SUB> Subscript H<SUB>2</SUB>O H2O
    <SUP> Superscript Clima : 30<SUP>o</SUP>C Clima : 30oC
    <U> Subrayado <U>Este es un texto subrayado</U> Este es un texto subrayado

    Otros atributos para texto

    (color, tipo de letra, etc)

    ETIQUETA FUNCION EJEMPLO RESULTADO

    <FONT COLOR="#FF0000">

    <FONT FACE="Technical">

    Modifica el color del texto

    Modifica el tipo de letra (font)

    <FONT COLOR="#FF0000">Este texto es rojo </FONT>

    <FACE="Technical">Este texto es de tipo Technical</FONT>

    Este texto es rojo

    Este texto es de tipo Technical

    Ejemplos de combinación de etiquetas para texto

    EJEMPLO
    RESULTADO
    <CENTER><B>Este es un texto remarcado y centrado</B><CENTER>
    Este es un texto remarcado y centrado
    <B><I>Este es un texto remarcado e itálico</I></B> Este es un texto remarcado e itálico
    <CENTER><H3>Título Nivel 3 centrado</H3></CENTER>

    Título Nivel 3 centrado
    <FONT SIZE=+1><B><I>Texto +1 remarcado e itálico</I></B></FONT> Texto +1 remarcado e itálico

    <BLINK><H4>Título Nivel 4 parpadeante</H4></BLINK>

    Título Nivel 4 parpadeante

    <B><U><I>Este es un texto remarcado, subrayado e itálico</I></U></B>

     

    		 Este es un texto remarcado, subrayado e itálico
    <FONT COLOR="#FF0000" FACE="Arial" SIZE=3>Este texto es rojo, tipo Arial y de tamaño 3</FONT> Este texto es rojo, tipo Arial y de tamaño 3

     

    Listas de Elementos

      Existen 3 tipos de listas que nos permiten ordenar un grupo de elementos:

    • Lista de definición (Definition List)
    • Lista ordenada o numerada (Ordered List)
    • Lista no ordenada o no numerada (Unordered List)
    Tipo de Lista

    Ejemplos

    Resultado:
    Definición
    (Definition list)    		 <DL>
    <DT>ECA<DD>Escuela de Contabilidad y Administración</DD>
    <DT>ING<DD>Escuela de Ingeniería</DD>
    <DT>FCM<DD>Facultad de Ciencias Marinas</DD>
    </DL>

    Definición de parámetros:
    <DL> Definition List (Lista de Definición)
    <DT> Definition Term (Término a definir)
    <DD> Data Definition (Significado)
    ECA
    Escuela de Contabilidad y Administración
    ING
    Escuela de Ingeniería
    FCM

    Facultad de Ciencias Marinas
    Ordenada
    (Ordered list)    		 <OL>
    <LI>Escuela de Contabilidad y Administración
    <LI>Escuela de Ingeniería
    <LI>Facultad de Ciencias Marinas
    </OL>

    <OL TYPE=A>
    <LI>Escuela de Contabilidad y Administración
    <LI>Escuela de Ingeniería
    <LI>Facultad de Ciencias Marinas
    </OL>

    Definición de parámetros:
    <OL> Ordered List (Lista Ordenada)
    <LI> List Item (Elemento de la lista)

    TYPE = 1 | I | i | A | a
    (Tipo de numeración)
    Nota: El valor por omisión es: 1
    • Escuela de Contabilidad y Administración
    • Escuela de Ingeniería
    • Facultad de Ciencias Marinas



    Escuela de Contabilidad y Administración

    Escuela de Ingeniería

    Facultad de Ciencias Marinas

    No Ordenada
    (Ordered list)

    		 <UL>
    <LI>Escuela de Contabilidad y Administración
    <LI>Escuela de Ingeniería
    <LI>Facultad de Ciencias Marinas
    </UL>

    <UL TYPE=square>
    <LI>Escuela de Contabilidad y Administración
    <LI>Escuela de Ingeniería
    <LI>Facultad de Ciencias Marinas
    </UL>

    Definición de parámetros:

    <UL> Unordered List (Lista No Ordenada)
    <LI> List Item (Elemento de la lista)

    TYPE = circle|square|disk
    (Tipo de bala o bullet)
    Nota: El valor por omisión es: disk
    • Escuela de Contabilidad y Administración
    • Escuela de Ingeniería
    • Facultad de Ciencias Marinas
    • Escuela de Contabilidad y Administración
    • Escuela de Ingeniería
    • Facultad de Ciencias Marinas

    Anidadas

    		 <OL>
    <LI>Escuela de Contabilidad y Administración

      <OL>
      <LI>Contador Público
      <LI>Administración de Empresas
      <LI>Informática
      </OL>

    <LI>Escuela de Ingeniería

      <OL>
      <LI>Ingeniero Civil
      <LI>Ingeniero en Electrónica
      <LI>Ingeniero en Computación
      </OL>

    <LI>Facultad de Ciencias Marinas

      <OL>
      <LI>Oceanólogo
      </OL>

    </OL>

    1. Escuela de Contabilidad y Administración
      1. Contador Público
      2. Administración de Empresas
      3. Informática
    2. Escuela de Ingeniería
      1. Ingeniero Civil
      2. Ingeniero en Electrónica
      3. Ingeniero en Computación
    3. Facultad de Ciencias Marinas
      1. Oceanólogo

    Combinadas

    		 <OL TYPE=I>
    <LI>Escuela de Contabilidad y Administración

      <UL TYPE=CIRCLE>
      <LI>Contador Público
      <LI>Administración de Empresas
      <LI>Informática
      </UL>

    <LI>Escuela de Ingeniería

      <UL TYPE=CIRCLE>
      <LI>Ingeniero Civil
      <LI>Ingeniero en Electrónica
      <LI>Ingeniero en Computación
      </UL>

    <LI>Facultad de Ciencias Marinas

      <UL TYPE=CIRCLE>
      <LI>Oceanólogo
      </UL>

    </OL>

      1. Escuela de Contabilidad y Administración
        • Contador Público
        • Administración de Empresas
        • Informática
      2. Escuela de Ingeniería
        • Ingeniero Civil
        • Ingeniero en Electrónica
        • Ingeniero en Computación
      3. Facultad de Ciencias Marinas
        • Oceanólogo

    Listas de elementos combinados:

    1.- Elementos Básicos
    2.- Título (H4) centrado (center)

    Ejemplo # 1
    Lista numerada (ordered list)
    Ejemplo # 3
    Listas anidadas
    Ejemplo # 2
    Lista no numerada (Unordered list)
    Ejemplo # 4
    Listas combinadas
    <HTML>

    <HEAD>
    <TITLE>    Universidad Nacional de El Salvador </TITLE>
    </HEAD>

    <BODY>
    <CENTER>
    <H4><U>    Universidad Nacional de El Salvador</U></H4>
    </CENTER>
    <OL>
    <LI>    San Salvador
    <LI>Santa Ana
    <LI>No me acuerdo
    </OL>
    </BODY>

    </HTML>

    		 Resultado:

    Universidad Nacional de El Salvador

    1. San Salvador
    2. Santa Ana
    3. No me acuerdo

    <HTML>

    <HEAD>
    <TITLE>    Universidad Francisco Gavidia </TITLE>
    </HEAD>
    <BODY>
    <CENTER>
    <H4><U>UniversidadFrancisco Gavidia </U></H4>
    </CENTER>
     <UL>
    <LI>    San Salvador
    </UL>
    </BODY>

    </HTML>

    		 Resultado:

    Universidad Francisco Gavidia

    • San Salvador

    <HTML>

    <HEAD>
    <TITLE>    Unidades de la UABC</TITLE>
    </HEAD>

    <BODY>
    <CENTER>
    <H4><U>    Universidad Autónoma de Baja California</U></H4>
    </CENTER>
    <OL>
    <LI>San Salvador

    <OL TYPE =a>
    <LI>    Facultad de Derecho
    <LI>Facultad de Medicina
    <LI>Facultad de Contabilidad
    <LI>Escuela de Ingeniería
    </OL>


    </BODY>

    </HTML>

    Resultado:

    Universidad Centro Americana

    1. San Salvador
      1. Facultad de Derecho
      2. Facultad de Medicina
      3. Facultad de Contabilidad
      4. Escuela de Ingeniería

    <HTML>

    <HEAD>
    <TITLE>    Unidades de la UABC</TITLE>
    </HEAD>

    <BODY>
    <CENTER>
    <H4><U>    Universidad ESTA</U></H4>
    </CENTER>
    <OL>

    <LI>Unidad 17

    <UL TYPE =a>
    <LI>    Facultad de Derecho
    <LI>Facultad de Medicina
    <LI>Facultad de Contabilidad
    <LI>Escuela de Ingeniería
    </UL>

    <LI>Unidad 20

    <UL TYPE =a>
    <LI>Facultad de Derecho
    <LI>Facultad de Odontología
    <LI>Escuela de Turismo
     <LI>Escuela de Ingeniería
    </UL>


    <LI>Unidad 23

    <UL TYPE =a>
    <LI>Facultad de Ciencias
    <LI>Facultad de Ciencias Marinas
    <LI>Escuela de Contabilidad y Admón.
    <LI>Escuela de Ingeniería
    </UL>

    <LI>Unidad 26

    <UL TYPE =a>
     <LI>Escuela de Ingeniería
    </UL>

    </OL>
    </BODY>

    </HTML>

    Resultado:

    Universidad ESTA

    1. Unidad 17
      • Facultad de Derecho
      • Facultad de Medicina
      • Facultad de Contabilidad
      • Escuela de Ingeniería
    2. Unidad 20
      • Facultad de Derecho
      • Facultad de Odontología
      • Escuela de Turismo
      • Escuela de Ingeniería
    3. Unidad 23
      • Facultad de Ciencias
      • Facultad de Ciencias Marinas
      • Escuela de Contabilidad y Admón.
      • Escuela de Ingeniería
    4. Unidad 26
      • Escuela de Ingeniería

    Enlaces ligas ó links:

    1.- Elementos Básicos
    2.- Enlaces externos
    3.- Enlaces internos

    <HTML>

    <HEAD>
    <TITLE>    Enlaces de Interés</TITLE>
    </HEAD>

    <BODY>
    <CENTER>
    <H4>    Ejemplo de un enlace interno (al mismo documento):</H4>
    </CENTER>
    Esta liga te lleva al <A HREF="#principio">principio </A>de esta página
    <P>
    <HR>
    <P>
    <H4>    Ejemplo de un enlace interno (a otro documento):</H4>
    Esta liga te lleva a la <A HREF="http://zao-sing-lee.tripod.com">página principal </A>
    <P>
    <P>
    <HR>
    <P>
    <H4>    Ejemplo de un enlace externo:</H4>
    La<A HREF="http://www.ues.edu.sv/">UES</A> se encuentra ubicado en
    <A HREF="http://www.elsalvador.com/">El Salvador</A><P>
    </BODY>

    </HTML>

    		Resultado:

    Ejemplo de un enlace interno (al mismo documento):

    Esta liga te lleva al principio de esta página

    Ejemplo de un enlace interno (a otro documento):

    Esta liga te lleva a la página principal

    Ejemplo de un enlace externo:

    La UES se encuentra ubicada en El Salvador

    Imágenes:

    1.- Elementos Básicos
    2.- Imágenes (gráficas)
    3.- Imagen como enlace tipo mailto: (correo)

    </HTML>

    <HEAD>
    <TITLE>    Imágenes</TITLE>
    </HEAD>

    <BODY>
    <CENTER>
    <H4>    Comentarios y Sugerencias:</H4>
    </CENTER>
    <IMG SRC="    linea.gif"><BR>
    <A HREF="    mailto:yakichan777@hotmail.com"><IMG SRC="correo.gif" BORDER=0></A>
    </CENTER>
    </BODY>

    </HTML>

    		Resultado:

    Comentarios y Sugerencias:

    CARACTERES ESPECIALES

    Los caracteres especiales son símbolos que se utilizan en algunos lenguajes. Algunos de los caracteres especiales más utilizados en español son los acentos (á, é, í, ó, ú) y la ñ Ñ, entre otros. Su código para desplegarlos sería el siguiente:

    á

    &aacute;

    é

    &eacute;

    í

    &iacute;

    ó

    &oacute;

    ú

    &uacute;

    ñ

    &ntilde;

    Ñ

    &Ntilde;

    Otros caracteres

    Código
    Ejemplo
    Nombre
    &lt;
    <
    menor que
    &gt;
    >
    mayor que
    &amp;
    &
    ampersand
    &quot;
    "
    comilla
    &reg;
    ®
    registrado
    &copy;
    ©
    Copyright

     

    Primer documento HTML:

    1.- Elementos Básicos
    2.- Texto normal (sin atributos)
    3.- Salto de línea (break line)
    <HTML>

    <HEAD>
    <TITLE>    Página personal de: Ana Luisa Méndez</TITLE>
    </HEAD>

    <BODY>
    Curriculum Vitae:<BR>
    Nombre: YO TU EL <BR>
    Dirección: Blvd. POR 5<BR>
    Ciudad: CERCA<BR>
    </BODY>

    </HTML>

    		 Resultado:

    Curriculum Vitae:
    Nombre: YO TU EL
    Dirección: POR 5
    Ciudad: CERCA


    Atributos al texto (ejemplo #1):

    1.- Elementos Básicos
    2.- Título (H2) centrado (center)
    3.- Texto remarcado (bold)
    4.- Texto itálico (italic)
    5.- Texto subrayado (underline)
    6.- Caracteres especiales
    <HTML>

    <HEAD>
    <TITLE>    P&aacute;gina personal de: USTED </TITLE>
    </HEAD>

    <BODY>
    <CENTER>
    <H2>    Curriculum Vitae:</H2>
    </CENTER>
    <B>    Nombre:<I><U>USTED</U></I><BR>
    Direcci&oacute;n: <I><U>ALLA</U></I><BR>
    Ciudad: <I><U>NINGUNA</U></I><BR>
    </B>
    <P>
    <HR>
    </BODY>

    </HTML>

    		 Resultado:

    Curriculum Vitae:


    Nombre: USTED
    Dirección: ALLA
    Ciudad: NINGUNA

    Atributos al texto (ejemplo #2):

    1.- Elementos Básicos
    2.- Título (H3) centrado (center)
    3.- Texto remarcado (bold)
    4.- Tamaño de la letra (font size)
    5.- Caracteres especiales
    <HTML>

    <HEAD>
    <TITLE>    P&aacute;gina personal de: Ana Luisa M&eacute;ndez</TITLE>
    </HEAD>

    <BODY>
    <CENTER>
    <H3><U>    Curriculum Vitae:</U></H3>
    </CENTER>
    <B>    Nombre:<BR>
    <FONT SIZE=5>Z</FONT>ao<FONT SIZE=5>S</FONT>    ing
    <FONT SIZE=5>L</FONT>&eacute;ee<BR>
    Direcci&oacute;n: <BR>
    Calle de los sueños perdidos # 1.000.000.00     <BR>
    Ciudad:<BR>
     Por aquí St. Tecla <BR>
    <P>
    <HR>
    </BODY>

    </HTML>

    		 Resultado:

    Curriculum Vitae:


    Nombre:
    Zao Sing Lee

    Dirección:
    Calle de los sueños perdidos # 1.000.000.00

    Ciudad:
    Por aquí St. Tecla

    Tablas:

    1.- Ejemplo # 1 : Tabla de 2 columnas x 2 renglones
    2.- Ejemplo # 2 : Tabla de 4 columnas x 5 renglones

    <HTML>

    <HEAD>
    <TITLE>    Tablas</TITLE>
    </HEAD>

    <BODY>
    <CENTER>
    <H4>Universidad Ninguna</H4>
    </CENTER>
    <HR>
    <TABLE BORDER=1>
     <TR>
    <TD>    aki</TD>
    <TD>ALLA</TD>
    </TR>
    <TR>
    <TD>ABAJO</TD>
    <TD>>aca</TD>
    </TR>
    </TABLE>
    <HR>
    </CENTER>
    </BODY>

    </HTML>

    Resultado:


    UNIVERSIDAD NINGUNA

    aki

    ALLA

    ABAJO

    aca


    <HTML>

    <HEAD>
    <TITLE>    Tablas</TITLE>
    </HEAD>

    <BODY><h4 align=CENTER><font face="Arial, Helvetica, sans-serif"><b><font size="-1">Resultado:</font></b></font><br>

    <br>
    <br>
    <font color="#000000">UNIVERSIDADES DE EL SALVADOR <br>
    Informaci&oacute;n al semestre 02-2</font></h4>

    <HR>
    <table border=1 >
    <tr valign="top">
    <td>
    <center>
    <p>Unidad</p>
    </center>
    </td>

    <td>
    <center>
    <p>Facultades</p>
    </center>
    </td>
    <td>Escuelas</td>
    <td>Institutos</td>
    </tr>

    <tr>
    <td>S.Salvador</td>
    <td>
    <center>
    <p>5</p>
    </center>
    </td>
    <td>
    <center>

    <p>6</p>
    </center>
    </td>
    <td>
    <center>
    <p>2</p>
    </center>
    </td>

    </tr>
    <tr>
    <td>St. Ana </td>
    <td>
    <center>
    <p>6</p>
    </center>
    </td>
    <td>
    <center>

    <p>2</p>
    </center>
    </td>
    <td>
    <center>
    <p>1</p>
    </center>
    </td>

    </tr>
    </table>


    <HR>
    </CENTER>
    </BODY>

    </HTML>

    Resultado:


    UNIVERSIDADES DE EL SALVADOR
    Información al semestre 02-2

    Unidad

    Facultades

    		 Escuelas Institutos
    S.Salvador

    5

    6

    2
    St. Ana

    6

    2

    1