Formatos de Texto

El texto del documento se puede modificar de muchas formas, vamos a ver las más usuales:

Títulos

Los títulos o encabezamientos se emplean al comienzo de una sección. Las etiquetas que se usan son:

Etiqueta	Se ve
<h1> Título </h1>	Título
<h2> Título </h2>	Título
<h3> Título </h3>	Título
<h4> Título </h4>	Título
<h5> Título </h5>	Título
<h6> Título </h6>	Título

Estilos de fuentes

Como ves en la tabla es muy sencillo conseguir los efectos deseados, solamente tienes que colocar el texto entre las etiquetas adecuadas.

Etiqueta

Se ve

<B>Texto en Negrita</b> <I>Itálica</i> <B><I>Negrita e Itálica</i></b> <U>Subrayado</u> <EM>Enfatizado</em> <STRONG>Fuerte</strong> <CODE>Code Texto</code> <CITE> Citation Text</cite> <KBD>Keyboard Text</kbd> <SAMP>Sample Text</samp> <TT>Teletype Text</tt> <VAR>Variable Element Text</var> <BIG>Texto grande</big> <SMALL>Texto pequeño</small> <SUB>Subindice</SUB> <SUP>Superíndice</SUP> <BLINK> Texto intermitente</blink> <STRIKE>Texto tachado</STRIKE>

Texto en Negrita Itálica Negrita e Itálica Subrayado Solo Explorer Enfatizado Fuerte Code Texto Citation Text Keyboard Text Sample Text Teletype Text Variable Element Text Texto grande Texto pequeño Subíndice Solo Explorer Superíndice Solo Explorer Texto intermitente Solo Netscape Texto tachado

Nota:   Algunas etiquetas funcionan solamente con alguno de los navegadores, tenlo en cuenta si las usas.

Tamaño de fuentes

El tamaño de las fuentes se puede especificar de dos maneras, una de ellas por medio de un número del 1 al 7 (de más pequeño a más grande) del siguiente modo
<font size=1> Esta es la letra más pequeña que se puede conseguir </font>
que se verá como
Esta es la letra más pequeña que se puede conseguir

Otra forma es por medio de una referencia relativa:
<font size="+1"> Esto es igual que poner size=4 </font>
que se ve como
Esto es igual que poner size=4

El tamaño por defecto es el 3

Tipos de fuentes

El tipo de fuente es un atributo de FONT y tiene la siguiente sintaxis
<font face="Courier">Eso se verá en la fuente Courier</font>
que se ve como:
Eso se verá en la fuente Courier

Color de las fuentes

Es otro atributo de FONT. Mira en la página de colores para saber cómo se especifican los colores. La sintaxis es la siguiente:
<font size=2 face="MS Sans Serif" color="navy">Como ves se pueden poner varios atributos separados por un espacio</font>
que se verá así:

Como ves se pueden poner varios atributos separados por un espacio

Párrafos y bloques

Para definir y separar bloques de texto se emplean una serie de etiquetas que definen los párrafos, texto preformateado o bloques con significado especial como direcciones o citas.
Etiquetas de bloques:

<P> Se utiliza para que los párrafos queden separados por una línea en blanco. Si solo quieres escribir un punto y aparte debes usar <BR>. Las marcas inicial y final son <P> y</P>. La etiqueta <P> admite los atributos:

ALIGN="left" , ALIGN="right" , ALIGN="center" y ALIGN="justify" para alinearlo a la izquierda, a la derecha, centrarlo o justificarlo totalmente. Por defecto está alineado a la izquierda.

<PRE> El texto insertado entre las marcas <PRE> y </PRE> será visualizado por el navegador respetando el formato con el que fue escrito en el fichero fuente HTML. Esta etiqueta es muy útil para escribir más de un espacio o para hacer pequeñas tablas

<ADDRESS> empleada para indicar que un texto representa una dirección o una firma. Generalmente se presenta en cursiva y tabulado.

<BLOCKQUOTE> Se representa con tabulaciones a la izquierda y derecha. Toda los párrafos de esta página están entre las etiquetas <BLOCKQUOTE> y </BLOCKQUOTE>, de ese modo se consigue que el texto se presente con márgenes a ambos lados.

<BR> Este elemento sólo tiene marca inicial e indica un salto de línea, es decir un punto y aparte sin separar el párrafo. Esta etiqueta no tiene su correspondiente de cierre

<HR> Se emplea para representar una línea horizontal. Tampoco tiene pareja de cierre. Se pueden emplear los atributos

ALIGN="left" , ALIGN="right" , para alinearla a la izquierda o a la derecha. Por defecto aparece centrada

WIDTH="66%" SIZE="3", para especificar el ancho en % y el alto en píxels

COLOR="#0000FF" , para especificar el color

Listas

Con frecuencia se usan listas en los documentos. El lenguaje HTML incorpora unas listas con viñetas sencillas o también letras o números. Para dar más vistosidad a las páginas, se suelen emplear también imágenes que se colocan delante de cada párrafo. Vamos a ver algunas de las posibilidades que tenemos.

Listas con viñetas desordenadas

He aquí el ejemplo más sencillo de una de estas listas:

escribimos en html	se verá como
<ul> <li>Primer término de la lista <li>Segundo término <li>Tercer término </ul>	Primer término de la lista Segundo término Tercer término

Como ves, la lista se declara con la etiqueta <UL> y finaliza con el cierre de la misma </UL>. También podemos modificar las viñetas por medio del atributo TYPE= circle, disc osquare (círculo, disco o cuadrado) y añadir sublistas.

escribimos en html	se verá como
<ul> <li type= disc>Primer término de la lista <ul> <li>Sublista <li>Otro elemento </ul> <li type=circle>Segundo término <li type=square>Tercer término </ul>	Primer término de la lista Sublista Otro elemento Segundo término Tercer término

Otro atributo interesante es compact para reducir el espacio entre los elementos

Listas con viñetas ordenadas

Estas listas se caracterizan porque aparecen números o ciertos caracteres que ordenan sus elementos. La etiqueta usada es <OL> junto con su correspondiente de cierre </OL>. El atributo TYPE toma ahora los valores 1, a, A, i, I. Un ejemplo de estas listas es el siguiente

escribimos en html	se verá como
<ol type=i> <li >Primer término de la lista <li >Segundo término <li>Tercer término <li>Cuarto <li>Quinto </ol>	Primer término de la lista Segundo término Tercer término Cuarto Quinto

Listas de definición

Estas listas se forman con el elemento que se define y su definición. Las etiquetas son <DL> y </DL> para la lista y <dt> y <dd> para los elementos y sus definiciones. Un ejemplo:

escribimos en html	se verá como
<dl> <dt >Término 1º <dd>Definición del elemento 1º <dt>Término 2º <dd>Definición del elemento 2º <dt>Término 3º <dd>Definición del elemento 3º </dl>	Término 1º Definición del elemento 1º Término 2º Definición del elemento 2º Término 3º Definición del elemento 3º

Estructura Básica de HTML

Todos los documentos Html tienen la estructura que se muesta a continuación, aunque la etiqueta <body> puede ser sustituida por <frameset> para un tipo de páginas que dividen la ventana del navegador en varios cuadros (frames).

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

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

Entre las etiquetas <html> y <head> se suelen colocar otras opcionales.

La cabecera es la sección comprendida entre <head> y </head>. En ella se encuentra necesariamente el título (entre las etiquetas <title> y </title>).

Dentro de la cabecera también se suele incluir código en JavaScript, que se reconoce porque va comprendido entre las etiquetas

<script language="JavaScript">
<!--
Aquí iría el código
// -->
</SCRIPT>

El cuerpo (body) del documento html es normalmente lo más importante. Es aquí donde debemos colocar el contenido de nuestra página: texto, fotos, etc.

El cuerpo está delimitado por las etiquetas <body> y </body> La etiqueta <body> suele contener algunos atributos, a saber:

BGCOLOR parámetro usado para especificar el color de fondo de la página. El color se define como una terna de números (#rrggbb) en base hexadecimal en el orden rojo, verde, azul (Red, Green, Blue). También se puede usar el nombre en inglés de los colores predefinidos en los navegadores.

Sintaxis: <BODY BGCOLOR=#0000FF> o <BODY BGCOLOR=blue>

TEXT, parametro usado para definir el color del texto por omision. Su formato es el mismo que el de BGCOLOR. Si no se pone nada es negro.

LINK, VLINK, ALINK, parámetros usados para especificar el color por omision de: texto con enlace, enlace ya visitado y enlace activo.

Los colores por omision son LINK=blue, VLINK=purple y ALINK=red. El formato es el mismo que BGCOLOR.

BACKGROUND, parámetro usado para especifica la ruta y nombre de archivo (URL) de la imagen que será usanda como fondo del documento. Esta se verá como mosaico para cubrir toda la ventana si es pequeña (lo habitual).

Sintaxis: <BODY BACKGROUND="ruta/archivo.gif">

Blog iCarnegie personal

Este es un blog hacerca del curso iCarnegie el contenido es de mi opinion personal.

HTML5

BREVE INTRODUCCIÓN

HTML es el acrónimo en inglés de HyperText Markup Language (en español se traduce como lenguaje de marcado de hipertexto).HTML 5 es el nombre que se usa para referirse a la quinta revisión del lenguaje HTML.

Diferencias entre HTML5 y HTML4

Exixten algunas diferencias entre HTML5 y HTML4 de las cuales podemos destacar lo suiguiente:

Sintaxis: HTML5 es compatible con HTML4 y XHTML 1, ademas es compatible con XML, ademas puede usar notaciones MathML que permite introducir formulas matemáticas en paginas web.

Nuevos elementos y Nuevos Atributos: Se agregan nuevos elementos al lenguaje, los existentes se le agregan atributos para complementar y otros simplemente su función cambia.

Modelo del contenido: HTML5 busca hacer más facíl su uso a comparación de HTML4.

APIs: HTML5 agrega nuevas APIs( Application Programming Interface) y eliminó algunas de las ya exixtentes.

Otra cosa a tomar en cuenta es que HTML5 sigue en desarrollo actualmente. 

Para crear una pagina HTML5 lo mas recomendable es crear un estilo personalizado para poder hacer la pagina a nuestro gusto, para ello creamos una carpeta llamada css, en ella justo con el programa netbeans crearemos archivos .css que nos van a poder permitir crear estilos personalizados (realizados por nosotros).

En los siguientes dias hare tutoriales para HTML5.

UN POCO DE HISTORIA

Html y css

Originalmente, las páginas HTML sólo incluían información sobre sus contenidos de texto e imágenes. Con el desarrollo del estándar HTML, las páginas empezaron a incluir también información sobre el aspecto de sus contenidos: tipos de letra, colores y márgenes.

La posterior aparición de tecnologías como JavaScript, provocaron que las páginas HTML también incluyeran el código de las aplicaciones (llamadas scripts) que se utilizan para crear páginas web dinámicas.

Incluir en una misma página HTML los contenidos, el diseño y la programación complica en exceso su mantenimiento. Normalmente, los contenidos y el diseño de la página web son  responsabilidad de diferentes personas, por lo que es conveniente separarlos.

CSS es el mecanismo que permite separar los contenidos definidos mediante HTML y el aspecto que deben presentar esos contenidos.

Una ventaja añadida de la separación de los contenidos y su presentación es que los documentos HTML creados son más flexibles, ya que se adaptan mejor a las diferentes plataformas: pantallas de ordenador, pantallas de dispositivos móviles, impresoras, etc.