Mostrando entradas con la etiqueta HTML. Mostrar todas las entradas
Mostrando entradas con la etiqueta HTML. Mostrar todas las entradas

martes, 3 de junio de 2014

Ejemplo: WEB


Veamos un nuevo ejemplo ahora con las cosas que hemos aprendido. 



<html>
<head>
<title>
INSTRAW en la red
</title>
</head>
<body bgcolor=navy text=white>
<h1 align=center>
<font color=yellow> Instituto Internacional de Investigaciones y Capacitación para la Promoción de la Mujer<br>
- INSTRAW -
</font>
</h1>
<hr>
<p align=center>
Bienvenidos a nuestras oficinas virtuales, donde esperamos brindarles un mejor servicio y una vía directa alternativa de comunicación e información de apoyo para la <i>potenciación de la mujer</i>.

<hr>

<h4>
Cómo contactarnos
</h4>

<p align=right>
<font color=lime size=-1>
César Nicolás Penson 102-A<br>
Santo Domingo, República Dominicana<br>
(809)685-211 - fax (809)685-2117<br>
correo-e: instraw.hq.sd@codetel.net.do
</font>

</body>
</html>

lunes, 2 de junio de 2014

Tamaño de texo, línea separadora, saltos de línea y alineación

Tamaño de texto
En ocasiones deseamos un tamaño menor o mayor para una parte del texto. Sabemos que esto se puede hacer con las etiquetas <h1>, <h2>, etc., pero dichas etiquetas inician una nueva línea antes y después del texto que abarcan y, además, dejan un espacio vertical. Incluyendo la opción size=-1 dentro de la etiqueta <font> podemos hacer que el texto hasta la próxima etiqueta </font> aparezca con un tamaño menor al normal. Si queremos un texto aún más chico, podemos usar size=-2. Del mismo modo, si lo que deseamos es hacer el texto mayor, podemos usar size=+1 ó size=+2 para lograr el efecto deseado. Experimente con diversos tamaños y observe qué ocurre.
La opción size= puede ser usada en combinación con la que vimos antes de color= sin problemas y sin importar el orden en que las coloquemos. Así da igual escribir <font color=red size=+1> que <font size=+1 color=red>
 Línea Separadora
Conjuntamente con los títulos, el HTML nos brinda una útil etiqueta que nos permite separar visualmente el contenido y los elementos de nuestra página en diferentes secciones. Usando la etiqueta <hr> introducimos una simple línea separadora que atraviesa la pantalla horizontalmente. 
 Saltos de línea y alineación
Ya mencionamos el uso de la etiqueta <p> para indicar el inicio de un párrafo. Esto es necesario porque los navegadores, al leer nuestras páginas escritas en HTML, ignoran los saltos de línea (o retornos de carro como se les llama en mecanografía) y los espacios en blanco que dejamos en el texto. Si deseamos que el texto continúe en la línea siguiente, pero sin el espacio vertical que deja la etiqueta <p>, entonces debemos usar la etiqueta <br> (del inglés break o rotura de línea). 

Dar color a una página HTML

Si deseamos introducir un poco de color en la página, podemos hacerlo agregando las instrucciones correspondientes a la etiqueta <body> en la forma siguiente: <body bgcolor=blue text=yellow>. Esto hará que el color de fondo de la página (background color o bgcolor en inglés) sea azul (blue en inglés) y el color del texto sea amarillo (yellow en inglés). La etiqueta body de clausura sigue siendo simplemente </body> sin importar las opciones incluidas en la etiqueta body inicial.
También podemos colorear ciertas frases o palabras por separado. Usando la etiqueta <font color=red>, por ejemplo hacemos todo el texto que le siga rojo (font es tipo de letra y red es rojo en inglés), hasta que cancelemos la instrucción con una etiqueta </font>.
En ambos casos mencionados, podemos experimentar con otros nombres de colores en inglés como white, black, gray, maroon, yellow, lime, green, navy, aqua, olive, purple, etc.selecciona aquí para ver el pie de página

Ejemplo: Creación página WEB

Veamos entonces un ejemplo simple del texto que conforma una página web típica:

Seleccione aquí para ver la pantalla en grande
Fig. 19. Resultado del ejercicio, visualizado en Internet Explorer.
<html>
<head>
<title>
Mi Página de prueba
</title>

</head>
<body>
<p>
Bienvenido a mi primera <i>página web</i>.
<p>
Espero se sientan a gusto y disfruten su visita.
</body>

</html>

En el ejemplo anterior se usaron diferentes espaciados para ilustrar las secciones en las páginas, pero ni las líneas ni los espacios en blanco o sangrías, tienen efecto alguno en el aspecto final de la página web. Como vemos, la etiqueta <title> sirve para definir el título de la página, el cual es desplegado en la barra superior del navegador cuando abrimos la página. También es usada para catalogar y archivar nuestra página en los directorios y herramientas de búsqueda en Internet.
Dentro del cuerpo (body), encontramos las etiquetas <p>, que sirven para señalar el inicio de cada párrafo y dejar un poco de espacio vertical en su lugar.
Escriba las líneas del ejemplo en un editor de texto y grábelas en un archivo llamado practica.htm en formato ASCII o de textoselecciona aquí para ver el pie de página (aunque el archivo puede contener acentos, el nombre no debe llevarlos, así que recuerde no acentuar la primera "a" en practica.htm). Luego vea ese archivo en su navegador favorito escribiendo el nombre completo del archivo y el nombre o directorio donde se encuentra en la barra de direcciones (donde típicamente aparece http://www.ladireccion.com/delsitio/quevisitamos.html). O si lo desea use la opción de Abrir en el menú File y localice el archivo en su disco duro. Al ver dicho archivo en su navegador, se le mostrará el texto de la página, pero sin las etiquetas usadas.

jueves, 29 de mayo de 2014

Nociones básicas HTML

El lenguaje HTML puede ser creado y editado con cualquier editor de textos básico, como puede ser Gedit en Linux, el Bloc de notas de Windows, o cualquier otro editor que admita texto sin formato como GNU Emacs, Microsoft Wordpad, TextPad, Vim, Notepad++, entre otros.
Existen, además, otros editores para la realización de sitios web con características WYSIWYG (What You See Is What You Get, o en español: «lo que ves es lo que obtienes»). Estos editores permiten ver el resultado de lo que se está editando en tiempo real, a medida que se va desarrollando el documento. Ahora bien, esto no significa una manera distinta de realizar sitios web, sino que una forma un tanto más simple, ya que estos programas, además de tener la opción de trabajar con la vista preliminar, tiene su propia sección HTML, la cual va generando todo el código a medida que se va trabajando. Algunos ejemplos de editores WYSIWYG son KompoZer, Microsoft FrontPage o Adobe Dreamweaver.
Combinar estos dos métodos resulta muy interesante, ya que de alguna manera se ayudan entre sí. Por ejemplo, si se edita todo en HTML y de pronto se olvida algún código o etiqueta, simplemente me dirijo al editor visual o WYSIWYG y se continúa ahí la edición o viceversa, ya que hay casos en que resulta más rápido y fácil escribir directamente el código de alguna característica que el usuario desea adherir al sitio que buscar la opción en el programa mismo.
Existe otro tipo de editores HTML llamados WYSIWYM que dan más importancia al contenido y al significado que a la apariencia visual. Entre los objetivos que tienen estos editores es la separación del contenido y la presentación, fundamental en el diseño web.
HTML utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y final, mediante las cuales se determina la forma en la que debe aparecer en su navegador el texto, así como también las imágenes y los demás elementos, en la pantalla del ordenador.
Toda etiqueta se identifica porque está encerrada entre los signos menor que y mayor que (<>), y algunas tienen atributos que pueden tomar algún valor. En general las etiquetas se aplicarán de dos formas especiales:
  • Se abren y se cierran, como por ejemplo: <b>negrita</b>, que se vería en su navegador web como negrita.
  • No pueden abrirse y cerrarse, como <hr />, que se vería en su navegador web como una línea horizontal.
  • Otras que pueden abrirse y cerrarse, como por ejemplo <p>.
  • Las etiquetas básicas o mínimas son:
<!DOCTYPE HTML> 
 <html>
   <head>
     <title>Ejemplo1</title>
   </head>
   <body>
     <p>ejemplo1</p>
   </body>
 </html>

Elementos: Estructura básica HTML

Elementos

Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se considere válido al documento HTML. Un elemento generalmente tiene una etiqueta de inicio (por ejemplo, <nombre-de-elemento>) y una etiqueta de cierre (por ejemplo, </nombre-de-elemento>). Los atributos del elemento están contenidos en la etiqueta de inicio y el contenido está ubicado entre las dos etiquetas (por ejemplo, <nombre-de-elemento atributo="valor">Contenido</nombre-de-elemento>). Algunos elementos, tales como <br>, no tienen contenido ni llevan una etiqueta de cierre. Debajo se listan varios tipos de elementos de marcado usados en HTML.

Estructura general de una línea de código en el lenguaje de etiquetas HTML.
El marcado estructural describe el propósito del texto. Por ejemplo, <h2>Golf</h2> establece «Golf» como un encabezamiento de segundo nivel, el cual se mostraría en un navegador de una manera similar al título «Marcado HTML» al principio de esta sección. El marcado estructural no define cómo se verá el elemento, pero la mayoría de los navegador web han estandarizado el formato de los elementos. Puede aplicarse un formato específico al texto por medio de hojas de estilo en cascada.
El marcado presentacional describe la apariencia del texto, sin importar su función. Por ejemplo, <b>negrita</b> indica que los navegadores web visuales deben mostrar el texto en negrita, pero no indica qué deben hacer los navegadores web que muestran el contenido de otra manera (por ejemplo, los que leen el texto en voz alta). En el caso de <b>negrita</b> e <i>itálica</i>, existen elementos que se ven de la misma manera pero tienen una naturaleza más semántica: <strong>énfasis fuerte</strong> y <em>énfasis</em>. Es fácil ver cómo un lector de pantalla debería interpretar estos dos elementos. Sin embargo, son equivalentes a sus correspondientes elementos presentacionales: un lector de pantalla no debería decir más fuerte el nombre de un libro, aunque éste esté en itálicas en una pantalla. La mayoría del marcado presentacional ha sido desechada con HTML 4.0, en favor de hojas de estilo en cascada.
El marcado hipertextual se utiliza para enlazar partes del documento con otros documentos o con otras partes del mismo documento. Para crear un enlace es necesario utilizar la etiqueta de ancla <a> junto con el atributo href, que establecerá la dirección URL a la que apunta el enlace. Por ejemplo, un enlace que muestre el texto de la dirección y vaya hacia nuestra Wikipedia podría ser de la forma <a href=”http://www.wikipedia.org”>http://www.wikipedia.org</a>. También se pueden crear enlaces sobre otros objetos, tales como imágenes <a href=”enlace”><img src=”imagen” /></a>.

miércoles, 28 de mayo de 2014

Marcado HTML

El HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir o hacer referencia a un tipo de programa llamado script, el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.7
HTML también sirve para referirse al contenido del tipo de MIME text/html o todavía más ampliamente como un término genérico para el HTML, ya sea en forma descendida del XML (como XHTML 1.0 y posteriores) o en forma descendida directamente de SGML (como HTML 4.01 y anteriores).
HTML consta de varios componentes vitales, entre ellos los elementos y sus atributos, tipos de data y la declaración de tipo de documento.

Diseño de páxinas Webs: Código HTML

HTML, siglas de HyperText Markup Language («lenguaje de marcas de hipertexto»), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia para la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, etc. Es un estándar a cargo de la W3C, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Es el lenguaje con el que se definen las páginas web.
El lenguaje HTML basa su filosofía de desarrollo en la referenciación. Para añadir un elemento externo a la página (imagen, vídeo, script, etc.), este no se incrusta directamente en el código de la página, sino que se hace una referencia a la ubicación de dicho elemento mediante texto. De este modo, la página web contiene sólo texto mientras que recae en el navegador web (interpretador del código) la tarea de unir todos los elementos y visualizar la página final. Al ser un estándar, HTML busca ser un lenguaje que permita que cualquier página web escrita en una determinada versión, pueda ser interpretada de la misma forma (estándar) por cualquier navegador web actualizado.