Programación - HTML

Bienevenidos!!


Lenguaje básico en HTML

¿QUÉ ES Y PARA QUÉ SIRVE HTML?
HTML es el lenguaje que se emplea para el desarrollo de páginas de internet. Está compuesto por una seríe de etiquetas que el navegador interpreta y da forma en la pantalla. HTML dispone de etiquetas para imágenes, hipervínculos que nos permiten dirigirnos a otras páginas, saltos de línea, listas, tablas, etc.

Estructura básica de un documento HTML

 

 
<HTML>
    <HEAD>
        <TITLE>Título de la página</TITLE>
        ...
    </HEAD>

    <BODY>
        Aquí iría el contenido de la página
    </BODY>
</HTML>
 

Estructura básica de un documento HTML


Lo primero que debemos considerar dentro de la organización básica de HTML es el uso de los corchetes angulares < y >. En HTML estos corchetes contienen en su interior código especial llamado ETIQUETA que indican la estructura y el formato del CONTENIDO de la página. HTML está formado por muchas etiquetas que pueden realizar infinidad de tareas para dar formato a nuestras páginas Web.

Tres son las etiquetas (tags) que describen la estructura general de un documento y dan una información sencilla sobre él. Estas etiquetas no afectan a la apariencia del documento y solo interpretan y filtran los archivos HTML.

  • <HTML>: Limitan el documento e indica que se encuentra escrito en este lenguaje.
  • <HEAD>: Especifica el prólogo del resto del archivo esto es, el encabezado. Son pocas las etiquetas que van dentro de ella, destacando la del titulo <TITLE> que será utilizado por los marcadores del navegador e identificará el contenido de la página. Solo puede haber un título por documento, preferiblemente corto aunque significativo, y no caben otras etiquetas dentro de él. En <head> no hay que colocar nada del texto del documento.
  • <BODY>: Encierra el resto del documento, el contenido es el que se muestra en un explorador Web.

Las etiquetas tienen propiedades, las cuales son descritas por medio de los Atributos. Un atributo es una opción que permite proporcionar detalles acerca de cómo una etiqueta afectará el contenido. Es importante mencionar que HTML no distingue entre mayúsculas o minúsculas, o una combinación de ambas.

El primer paso para crear una página es crear un documento de texto mediante el editor de texto que desee. Puede utilizar el editor Microsoft Windows que es el Block de notas o cualquier otro editor.

Un editor de texto es un programa que permite crear y modificar archivos digitales compuestos únicamente por texto sin formato, conocidos comúnmente como archivos de texto ó texto plano y son incluidos en el sistema operativo o en algún Paquete de software.
Lo primero que debemos considerar es la estructura general de la página por lo que debemos escribir en ella su contenido.

ETIQUETA
FUNCIÓN
<HTML> Empieza un documento HTML
<HEAD> Zona de cabecera
<TITLE> Zona de título
</TITLE> Termina zona de título
</HEAD> Termina zona de cabecera
<BODY> Zona de cuerpo del documento
</BODY> Termina zona de cuerpo del documento
</HTML> Termina documento HTML

Es importante que ninguna de nuestras páginas carezca de título ya que el explorador buscará el título para identificar su página.

TEXTO

Para incluir texto en una página basta teclear éste entre las etiquetas<BODY> y </BODY>; sin embargo, podemos hacer uso de etiquetas para mejorar la apariencia de la información. Las etiquetas que se utilizan con mayor frecuencia para dar formato al texto son:
Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que se encuentra entre ellas, y generalmente se utilizan para resaltarlo. Estos estilos pueden agruparse según vayan asociados al tipo de letra o a la información que represente el texto. Todas estas etiquetas necesitan una etiqueta de cierre, y también pueden aplicarse varias etiquetas al mismo texto.
A continuación se muestran algunas etiquetas con ejemplos, asociadas al tipo de letra:

Etiqueta
Significado
Ejemplo
<b>
negrita
HTML de ithinkweb
<i>
cursiva
HTML de ithinkweb
<u>
subrayado
HTML de ithinkweb
<s>
tachado
HTML de ithinkweb
<big>
Aumenta el tamaño de la fuente
HTML de ithinkweb
<small>
Disminuye el tamaño de la fuente
HTML de ithinkweb
<br>
Etiqueta para introducir saltos de línea
HTML de ithinkweb
ithinkweb
<blockquote>
Etiqueta para introducir sangría
HTML de ithinkweb
<font>
Fuente
HTML de ithinkweb

 A continuación tenemos un ejemplo en el que tenemos la etiqueta <font..> anidada dentro de la etiqueta <p..>.: <p><center><font color="#993300" size="4" face="Verdana, Arial, Helvetica, MS Sans Serif">Bienvenidos a www.ithinkweb.com.mx</font></center></p>


Este código daría como resultado el siguiente texto:

HTML cuenta con las etiquetas de encabezado, que identifiquen encabezados de secciones en un documento. Estas seis etiquetas de encabezado describen encabezados de diversos tamaños, en orden decreciente de importancia:

<H1>, <H2>, <H3>, <H4>, <H5>, <H6>.


Otra forma de cambiar los tamaños de letra es utilizar el elemento <FONT > con el atributo VALOR, que es un número entre 1 y 7. El valor por defecto del texto es 3. La gran diferencia de esta notación respecto a la anterior es que no se produce un salto de párrafo después de cada cambio, por lo que pueden hacerse cosas como esta:

 
<FONT SIZE=3>A</font><FONT SIZE=4>A</font><FONT SIZE=5>A</font>

<FONT SIZE=6>A</font><FONT SIZE=7>A</font><FONT SIZE=6>A</font>

<FONT SIZE=5>A</font><FONT SIZE=4>A</font><FONT SIZE=3>A</FONT>


Dará como resultado:



AAAAAAAAA







Se puede cambiar el tamaño por defecto (3) de toda la página con el elemento <BASEFONT SIZE=valor>. El texto tomará el tamaño indicado por valor y lo mantendrá hasta que aparezca otro elemento <BASEFONT SIZE=valor> y lo restaure o lo cambie por otro diferente. Tanto si se ha establecido un valor base como si se utiliza el valor por defecto, los tamaños también pueden indicarse de forma relativa, por lo que el valor puede ser positivo (+) o negativo (-) respecto al tamaño base. Por ejemplo estos dos valores dan el mismo resultado:






<FONT SIZE=5>ABcde</FONT>
<FONT SIZE=+2>ABcde</FONT>


ABcde
ABcde





Con la versión 3.0 de Netscape se ha implementado un nuevo atributo del elemento <FONT> que permite elegir tipos de letra entre los varios de que dispone por defecto Windows. Se trata del atributo FACE. Este atributo permite forzar el tipo de letra que el diseñador de la página quiere que vea el cliente, sin importar el que por defecto tenga establecido el visualizador.





Si escribes






<FONT FACE="arial">Texto de prueba 12345 con tipo ARIAL</FONT>
<FONT FACE="times new roman">Texto de prueba 12345 con tipo TIMES NEW ROMAN</FONT>
<FONT FACE="courier new">Texto de prueba 12345 con tipo COURIER NEW</FONT>
<FONT FACE="courier">Texto de prueba 12345 con tipo COURIER</FONT>
<FONT FACE="roman">Texto de prueba 12345 con tipo ROMAN</FONT>
<FONT FACE="small fonts">Texto de prueba 12345 con tipo SMALL FONTS</FONT>



Se verá:



Texto de prueba 12345 con tipo ARIAL
Texto de prueba 12345 con tipo TIMES NEW ROMAN
Texto de prueba 12345 con tipo COURIER NEW
Texto de prueba 12345 con tipo COURIER
Texto de prueba 12345 con tipo ROMAN
Texto de prueba 12345 con tipo VERDANA
Texto de prueba 12345 con tipo SMALL FONTS







Por supuesto, este atributo es compatible con todos los demás ya conocidos, como color y tamaño. Por ejemplo, si escribes






<FONT FACE="impact" SIZE=6 COLOR="red">
 Texto de prueba 12345 con tipo IMPACT</FONT>




Se verá:



Texto de prueba 12345 con tipo IMPACT



Se pueden hacer todas la combinaciones que se quieran, pero hay que tener presente que si en la máquina cliente no está instalada una determinada fuente, ésta no se verá y en su lugar aparecerá la fuente por defecto del visualizador. No es interesante por tanto, definir tipos raros, que probablemente, no llegarán a verse nunca.



Si a pesar de todo, se define un tipo del que se tienen dudas de que exista en el cliente, se pueden indicar otros tipos alternativos, de forma que el navegador si no tiene el primer tipo, utilizará el siguiente, y si tampoco lo tiene el próximo, etc. Así:






<FONT FACE="raro, courier" SIZE=4 COLOR="red">
 Texto de prueba 12345 con tipos alternativos</FONT>




Se verá:





Texto de prueba 12345 con tipos alternativos



Como puedes ver, se ha declarado como primer tipo de letra el llamado "raro" que, por supuesto, no existe, y el navegador pasa a utilizar el siguiente, "courier", que sí es habitual.









Párrafos  <p>



El texto de una página puede 
agruparse en párrafos.  Para ello, el texto de cada uno de los párrafos 
debe insertarse entre las  etiquetas <p> y </p>.
    Las etiquetas <p> y </p> hacen que se cambie de línea automáticamente. 
    También es posible cambiar la alineación del texto de  cada párrafo. Para ello se modifica el valor del atributo align, cuyos  valores pueden ser left (izquierda), right (derecha), center (centrado)  o justify (justificado).














En html el código es:





CÓDIGO:SELECCIONAR EL CONTENIDO


<font color="red">Tu texto</font>











Atributo color



El color del texto puede ser definido mediante el atributo color. Cada color es a su vez definido por un número hexadecimal que esta compuesto a su vez de tres partes. Cada una de estas partes representa la contribución del rojo, verde y azul al color en cuestión.



Podéis entender cómo funciona esta numeración y cuáles son los colores que resultan más compatibles a partir de este artículo:Los colores y HTML.



Por otra parte, es posible definir de una manera inmediata algunos de los colores más frecuentemente usados para los que se ha creado un nombre más memotécnico:






<font color="red">Este texto está en rojo</font>



Que se visualizaría así en una página web.







ALINEACIONES



<P ALIGN=left>

Define un párrafo y alinea el texto a la izquierda(left).



<P ALIGN=right>

Define un párrafo y alinea el texto a la derecha (right).



<P ALIGN=center>

Define un párrafo y centra el texto (center).



La marca <CENTER> tiene un funcionamiento idéntico al de <DIV ALIGN=center> pero su uso ha sido depreciado por el estándar 4 de HTML. El uso de <CENTER> fue introducido por Netscape, justo cuando el HTML preveía la salida de DIV. La enorme difusión inicial de Netscape ha hecho que el uso de esta marca esté también muy difundido, por lo que todavía los navegadores la utilizan y reconocen (incluido MsIe). El uso de <CENTER> es muy simple:



<CENTER>Texto para centrar</CENTER>













Insertar una imagen con HTML





 04/Dic/2007  HTML    8 Comentarios












Cuando aprendemos a escribir lenguaje HTML para crear nuestras páginas web aguantaremos poco creando páginas web con solo texto y estaremos deseosos de insertarle alguna imagen para darlas colorido.



La etiqueta HTML que nos permite poner imágenes en nuestra página web es IMG. La línea de código que necesitaríamos sería la siguiente:


    

  1. 
<IMG src="mifoto.jpg"/>
    

    2. 






Vemos que el atributo src permite indicar el nombre de la imagen que queramos cargar. Este nombre puede ser directamente el de la imagen o bien una ruta relativa o absoluta más el nombre de la imagen.



Por defecto, el tamaño de la imagen que carga es su tamaño original.





Alto y ancho de una imagen con HTML





Si queremos modificar el tamaño deberemos de utilizar los atributos HTML width y height, los cuales nos permiten modificar el ancho y el alto de la imagen respectivamente. A estos atributos les tendremos que dar unos valores numéricos que indiquen el valor en pixels que queremos reflejar.



Así, si queremos poner la imagen a 100x100 pixels, la línea de código quedaría de la siguiente forma:


    

  1. 
<IMG src="mifoto.jpg" width="100" height="100"/>
    

    2. 










Html 5 insertar video y audio correctamente












Insertando contenido multimedia vídeo






<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>



Tu navegador no implementa el elemento video.



</video>





Los codecs [codecs=’acc1,mp4a’] son fundamentales para procesar los archivos de audio o vídeo ya que si no los ponemos el navegador intentara reproducir el codec correcto, pero siempre utilizara el software para interpretarlo y no la tarjeta gráfica o GPU ideal para reproducir cualquier archivo multimedia.


Ejemplo de código para Html5 insertar video y audio correctamente






<video id="ccs_video" with="640" height="320" controls>



<source src="Video.mp4" type="video/mp4; codecs='acc1,mp4a'" />




    

  • MP4 MPEG 4 con codec de video H264 y AAC codec de audio
    • 

  • WebM archivos con el códec de vídeo VP8 y el códec de audio Vorbis
    • 

  • Archivos Ogg con códec de vídeo Theora y Vorbis codec de audio
    • 




La etiqueta autoplay nos reproducirá inmediatamente el contenido mientras la etiqueta loop no reproducirá infinitamente el contenido


Ejemplo de código para Html5 insertar AUDIO en tu HTML

.



<audio src="audio.ogg" controls autoplay loop>



<p>Tu navegador no implementa el elemento audio</p>



</audio>





Puedes especificar múltiples fuentes de archivos usando source para hacer compatible la reproducción de vídeo o audio en formatos diferentes para la interpretación en diferentes navegadores.



<video controls>



<source src="video.ogg" type="video/ogg">

<source src="video.mp4" type="video/mp4">


Tu navegador no implementa el elemento video.



</video>










Color de fondo de una página web





Nosotros vamos a poner el color rojo al fondo de la página. Lo conseguimos escribiendo la etiqueta <body> con su atributo como sigue: <body bgcolor="red"> ( bgde background ).











Guardamos los cambios y abrimos cada uno de los navegadores para comprobar los resultados:















Ejemplo---> Descarga1 Descarga2 



 Ejemplo: a continuación crearemos una pagína web con un editor de texto. 





Empezando.
        



El código fuente, se escribe en un procesador 
          de texto. Nosotros lo vamos a hacer con el Bloc 
          de notas. Para abrir el Bloc de Notas, le damos a Inicio 
          > Todos los programas > Accesorios 
          > Bloc de notas. Se abrirá una 
          ventana como ésta:



























Dependiendo de cómo esté configurado 
          tu ordenador, quizá no encuentres el Bloc de notas en esta ruta. 
          


        



A continuación debes saber que las dos etiquetas 
          fundamentales dentro de las cuales tiene que ir nuestro código 
          fuente son <html> 
          como etiqueta de apertura y </html> 
          como etiqueta de cierre. Después, todo lo que será visible 
          al visitar la página con el navegador, debe de estar entre las 
          etiquetas <body> cuerpo, en 
          inglés, como etiqueta de apertura y </body> 
          como etiqueta de cierre.


        



          


            

Nota: Las etiquetas también se pueden escribir 
          con letras mayúsculas: <HTML> <BODY>...Nosotros vamos a optar 
          por las minúsculas por ser lo que se está imponiendo de 
          acuerdo con las últimas normas.


          




        



Vamos a escribir algo en nuestra página. Por 
          ejemplo Bienvenid@. Lo escribiremos entre 
          <body> y </body>. 
          Nuestro código quedará así:





























Ahora tenemos que guardar nuestro documento en alguna 
          parte del ordenador y ¡muy importante! con un nombre y una extensión 
          especial. El nombre va a ser index 
          (ya veremos porqué este nombre más adelante) y 
          su extensión .html 




        



También se podría guardar con la extensión 
          .htm (el resultado es exactamente 
          el mismo).




        



El sitio puede ser cualquier parte del ordenador. Para 
          tenerlo accesible, lo vamos a guardar en el Escritorio: 
          Le damos a Archivo 
          > Guardar



























Nos aparecerá la ventana de selección 
          de directorio:

























Elegimos Escritorio 
          y le llamamos index.html


        



Observa que en Tipo no hemos cambiado nada. No es necesario al haber incluído la extensión .html en el nombre del archivo. 


        



Podemos visualizarlo para ver si la página funciona....





Vamos a ver nuestra página: Hacemos doble clic 
        sobre el icono y ...



 La verdad no es una página muy espectacular pero... 
              los comienzos deben ser humildes.









MARQUESINAS





Textos en movimiento:

Link -----------------------> MOVIMIENTO.





-------------------------.-------------------------00-------------------------------------------------------------





























































No hay comentarios:















Publicar un comentario


















        

      









Suscribirse a:
Entradas (Atom)