Código del ejemplo Nº3


En esta entrada explico paso a paso el código del Ejemplo Nº 3

Tengan presente que los textos que figuran entre <!-- y --> son comentarios .


Los comentarios no son interpretados por el navegador y su función es servir como guía para la presente explicación.

Ejercicio Nº 3 visto en el navegador
(Clic sobre la imagen para agrandar)

Comienzo del documento


<html> <!--Empieza el documento HTML -->
<head> <!--Empieza el encabezado -->
<title>Escribiendo HTML</title><!-- Título del documento -->
</head><!--Termina el encabezado -->
<body bgcolor="#ffcc22"><!--Empieza el cuerpo. Declara atributo de color de fondo -->
<div align="center"> <!--Empieza un Div.  Se usa para dividir la página en bloques. En este caso para centrar el contenido del Div-->
<h1>Taller de Informática</h1> <!--Título con encabezado de primer nivel -->
<h2>Escritura de HTML básico</h2> <!--Subtítulo con encabezado de segundo nivel -->
</div><!--Final del Div -->
<h3>Fundamentos</h3> <!-- Subtítulo con encabezado de tercer nivel -->
<p>Escribir código HTML es básicamente escribir:</p>
<ul><!--Empieza una lista desordenada -->
<li>Elementos.</li> <!-- Primer ítem -->
<li>Etiquetas (tags). </li><!-- Segundo  ítem -->
<li>Atributos.</li><!-- Tercer ítem -->
<li>Contenido.</li><!-- Cuarto ítem -->
</ul><!-- fin de la lista desordenada-->
<p><!-- empieza un párrafo -->
Veamos de que se tratacada uno de ellos.</p><!-- termina el párrafo -->
<h3>Elementos</h3> <!-- Subtítulo con encabezado de tercer nivel -->
<p><!-- empieza un párrafo -->
Los elementos son la estructura básica del HTML. Un elemento comienza con una etiqueta de apertura, desarrolla un contenido y finaliza con una etiqueta de cierre. Son excepción a esta regla unos pocos elementos que no tienen contenido ni utilizan etiqueta de cierre y se los conoce con el nombre de "elementos vacios". Son ejemplo de ello &lt;br /&gt; (genera un salto de línea) y &lt;hr /&gt; (inserta una línea horizontal. Como las de ésta página) .
</p> <!-- termina el párrafo -->
<hr /> <!-- línea horizontal -->
<h3>Etiquetas (Tags)</h3> <!-- Subtítulo con encabezado de tercer nivel -->
<p><!-- empieza un párrafo -->
Las etiquetas o tags son marcas insertadas en un documento HTML para proporcionar información y control sobre un elemento. En la mayoría de los casos se escriben de a pares (tag de apertura y tag de cierre) El tag de apertura está compuesto por el nombre del elemento encerrado por los símbolos de corchete angular &lt;Nombre del  elemento&gt; y el tag de cierre es declarado exactamente como el tag de apertura pero con una barra &lt;/Nombre del elemento&gt; antepuesta al nombre del tag.
</p> <!-- termina el párrafo -->
<hr /> <!-- línea horizontal -->
<h3>Atributos</h3> <!-- Subtítulo con encabezado de tercer nivel -->
<p><!-- empieza un párrafo -->
Los atributos dan características de presentación especificas a un elemento (por ejemplo, altura, color, etc.)
Los atributos de un elemento "siempre" están contenidos (declarados) dentro del tag de apertura.
</p> <!-- termina el párrafo -->
<hr /> <!-- línea horizontal -->
<h3>Contenido</h3> <!-- Subtítulo con encabezado de tercer nivel -->
<p><!-- empieza un párrafo -->
Todo lo que sea escrito entre el tag de apertura y el tag de cierre de un mismo elemento, es llamado contenido.
</p> <!-- termina el párrafo -->
<hr /> <!-- línea horizontal -->
</body> <!--Termina el cuerpo del documento HTML -->
</html> <!--Termina el documento HTML -->
No hay comentarios:

Código del ejemplo Nº 2


En esta entrada explico paso a paso el código del Ejemplo Nº 2

Tengan presente que los textos que figuran entre <!-- y --> son comentarios .

Los comentarios no son interpretados por el navegador y su función es servir como guía para la presente explicación.

Vista del ejercicio en el navegador
(Clic sobre la imagen para agrandar)

Comienzo del documento


<html> <!--Empieza el documento HTML -->
<head> <!--Empieza el encabezado -->
<title>Escribiendo HTML</title> <!-- Título del documento -->
</head> <!--Termina el encabezado -->
<body> <!--Empieza el cuerpo -->
<h1>El HTML</h1> <!-- Primer título -->
<h2>Cómo se divide</h2> <!-- Título nivel 2 -->
<ul> <!--Empieza la lista desordenada -->
 <li>Elementos</li> <!-- Primer ítem -->
 <li>Tags</li> <!-- Segundo ítem -->
 <li>Contenido</li> <!-- Tercer ítem -->
 <li>Atributos</li> <!-- Cuarto ítem -->
</ul> <!-- Termina la lista -->
<hr /> <!-- Línea horizontal -->
<h3>Elementos</h3> <!-- Título nivel 3-->
<p> <!-- empieza párrafo -->
Los elementos son la estructura básica del HTML. <br /> <!-- salto de línea -->
Un elemento generalmente está enmarcado entre dos tags</p> <!-- fin de párrafo -->
<hr /> <!-- Línea horizontal -->
<h3>Tags</h3> <!-- Título nivel 3-->
<p>También llamados etiquetas. Son marcas insertadas en un documento HTML para proporcionar información sobre un elemento o un contenido</p> <!-- párrafo -->
<hr /> <!-- Línea horizontal -->
<h3>Contenido</h3> <!-- Título nivel 3-->
<p>Todo lo que sea escrito en medio del par de tags (apertura y cierre) dentro de un elemento es llamado contenido. </p> <!-- párrafo -->
<hr /> <!-- Línea horizontal -->
<h3>Atributos</h3> <!-- Título nivel 3-->
<p>Los atributos definen ciertas características de un elemento y están declarados dentro de su tag de inicio. </p> <!-- párrafo -->
</body> <!--Termina el cuerpo del documento HTML -->
</html> <!--Termina el documento HTML -->
No hay comentarios:

Escribiendo una página básica en HTML

La estructura básica de una página HTML es del tipo:

<html>
<head>
...
</head>
<body>
...
</body>
</html>

Veamos cómo funcionan estas etiquetas.

Identificador del tipo de documento <html>


Todas las páginas web escritas en HTML tienen que tener la extensión html o htm. Al mismo tiempo, tienen que tener las etiquetas <html> y </html>.
Entre las etiquetas <html> y </html> estará comprendido el resto del código HTML de la página.

Por ejemplo:
<html>
...
</html>

Cabecera de la página <head>


La cabecera de la página se utiliza para agrupar información sobre ella, como puede ser el título.
Está formada por las etiquetas <head> y </head>. La etiqueta <head> va justo debajo de la etiqueta <html>.

Por ejemplo:
<html>
<head>
...
</head>
...
</html>

Entre las etiquetas <head> y </head>, las etiquetas que podemos encontrar y más se utilizan son:
<link>, <style>, <script> (estas etiquetas las veremos más adelante),
<meta> (datos utilizados por los motores d búsqueda) y la etiqueta
<title> que explicamos a continuación.

Título de la página <title>


El título de la página es el que aparecerá en la parte superior de la ventana del navegador, cuando la página esté cargada en él.
Para asignar un título a una página es necesario escribir el texto deseado entre las etiquetas <title> y </title>.
Estas etiquetas han de estar dentro de la cabecera, es decir, entre las etiquetas <head> y </head>.

Por ejemplo:
<html>
<head>
<title>
Taller de HTML
</title>
</head>
...
</html>

Nota: 
en el siguiente enlace podes encontrar la descripción de todos los tags HTML 


Cuerpo del documento <body>

El cuerpo del documento contiene la información propia del documento, es decir lo que queremos que se visualice, el texto de la página, las imágenes, los formularios, etc.
Todos estos elementos tienen que encontrarse entre las etiquetas <body> y </body>, que van justo debajo de la cabecera.
Por ejemplo:
<html>
<head>
<title>
Taller de HTML
</title>
</head>
<body>
...
</body>
</html>

Nota: Los siguientes atributos (texto marcado en color) no se utilizan en la actualidad ya que han sido reemplazados por el uso de hojas de estilo en cascada (CSS) por lo que SU USO NO SE RECOMIENDA. Su inclusión dentro del presente texto es exclusivamente a titulo ilustrativo.
.
A través de la etiqueta <body> es posible establecer el color o la imagen de fondo de la página.
El color de fondo puede establecerse a través del atributo bgcolor, al que es posible asignarle un color representado por medio de un código hexadecimal o por su nombre predefinido.
Por ejemplo, para hacer que el color de fondo de una página sea de color azul, tendremos que escribir:
...
<body bgcolor="#0000FF">
...
</body>
</html>

Sería equivalente a poner:
...
...
</body>
</html>

La imagen de fondo puede establecerse a través del atributo background, indicando la ruta en la que se encuentra la imagen.
Por ejemplo, para hacer que la imagen de fondo de una página sea la imagen fondo.gif, que se encuentra en el mismo directorio en el que se encuentra guardada la página, tendremos que escribir:
...
<body background="fondo.gif">
...
</body>
</html>

A través de la etiqueta <body> también es posible establecer el color del texto de la página a través del atributo text.
Por ejemplo, para hacer que el color del texto de una página sea de color rojo, tendremos que escribir:
...
<body text="#FF0000">
...
</body>
</html>

No hay comentarios:

Lo básico en HTML

Sintaxis de un elemento HTML

Los elementos definen todo aquello que queremos incluir dentro de nuestra página.
Para que un elemento funcione de la manera esperada, debemos escribirlo respetando la estructura sintáctica que le corresponde.

Sintaxis

Todos los elementos inician con una etiqueta conocida como "etiqueta de apertura" y, salvo las excepciones (de las que ya hablaremos) finalizan con otra etiqueta conocida como "etiqueta de cierre".

La etiqueta de apertura de todo elemento lleva el nombre del mismo, mientras que la etiqueta de cierre es igual que la de apertura con el agregado de una barra inclinada / ante puesta al nombre.

Por su parte, las etiquetas se componen de un par de corchetes angulares < > que, en su interior, contienen el nombre y los atributos que la definen.

Los atributos se declaran (escriben) dentro de la etiqueta de apertura y definen el modo en que dicho elemento se verá o comportará.

El material incluido entre las etiquetas de apertura cierre de un elemento se conoce como "contenido" y constituye aquello que queremos controlar o mostrar.


 En esta entrada recordamos los elementos básicos para escribir una página HTML
Clic en el cuadro para agrandar

El elemento HTML:

El primer elemento (padre de todos los demás es el elemento HTML y su comienzo se declara con la etiqueta <html> <!--Empieza el documento HTML -->

La cabecera:

El siguiente elemento que debe declararse dentro del HTML es el elemento cabecera  que inicia con el tag <head> <!--Empieza el encabezado -->

El título:

Dentro del elemento cabecera se alojan varios elementos más de los cuales, por el momento, solo nos vamos a ocupar del elemento título que se declara con el tag de apertura  <title>Escribir HTML básico</title><!-- Título del documento -->

Una vez declarado todo el contenido de la cabecera, debe cerrarse el head con el tag de cierre </head><!--Termina el encabezado -->

El body (cuerpo):

Acá es donde empieza la parte visible del documento. Todo lo que vayamos a incluir en nuestra página para ser accedido por los visitantes  va a estar alojado dentro del elemento “body” que se declara con su tag de apertura
<body><!--Empieza el cuerpo del documento. -->

El Div:

Cuando queremos organizar varios elementos con el fin de alinearlos o tener cierto grado de control sobre una parte del documento se suele utilizar el elemento “Div” el cual se encarga de dividir el documento en sectores independientes unos de otros. El elemento Div se declara con su tag de apertura
<div align="center"> <!--Empieza un Div.  Se usa para dividir la página en bloques. En este caso para centrar el contenido del Div-->

Los encabezados (headers):

A la hora de colocar contenidos dentro de nuestra página, es importante contar con un esquema de jerarquía para los títulos. El esquema de encabezados (headers) es el elemento utilizado para esto, contando con una escala jerárquica  para títulos y subtítulos con valores que van desde h1 hasta h6 siendo h1 la mayor y h6 la de menor tamaño e importancia. El elemento encabezado se declara entre le par de tags de apertura y cierre con la letra h + el número correspondiente al nivel adjudicado.
<h1>Esto es un encabezado tipo título grande</h1> <!--Título con encabezado de primer nivel -->

<h2>Este es un encabezado más chico</h2> <!--Subtítulo con encabezado de segundo nivel -->

</div><!--Final del Div -->

<h3>Este es un encabezado más chico</h3> <!-- Subtítulo con encabezado de tercer nivel -->

Los textos y su estructuración:

Los párrafos:

Los textos incluidos en el body del documento deben pertenecer a algún tipo de bloque. Si escribo un texto lo debo incluir dentro de un encabezado “h”, dentro de un ítem de lista “li”, o dentro de un párrafo “p”.
Escribir texto suelto “no es aconsejable”  en la actualidad.
En adelante, vamos a procurar incluir todo texto dentro de un elemento contenedor del tipo bloque, por ejemplo, como ya lo dije, dentro de un párrafo “p”.

Ejemplo de párrafo:


<p><!-- empieza un párrafo -->
Los elementos son la estructura básica del HTML. Un elemento comienza con una etiqueta de apertura, desarrolla un contenido y finaliza con una etiqueta de cierre. Son excepción a esta regla unos pocos elementos que no tienen contenido ni utilizan etiqueta de cierre y se los conoce con el nombre de "elementos vacios". 
Son ejemplo de ello <br /> (genera un salto de línea) y <hr /> (inserta una línea horizontal. Como las de ésta página) .
</p> <!-- termina el párrafo -->

Las listas:

Cuando queremos enumerar elementos, lo ideal es utilizar el elemento lista en alguna de sus variables (lista ordenada, desordenada, o de definiciones)
El elemento lista se declara con sus tag de apertura y de cierre.
Los ítems de la lista se declaran siempre entre los tags de apertura y cierre en forma “individual” es decir que cada ítem tiene un par de tags (uno de apertura <li> y uno de cierre, </li> Hay que tener presente que, en la actualidad, es obligatorio declarar el tag de cierre de cada ítem de la lista.

<ul><!--Empieza una lista desordenada -->
<li>Primer ítem de la lista.</li> <!-- Primer ítem -->
<li>Segundo ítem </li><!-- Segundo  ítem -->
<li>Tercer ítem </li><!-- Tercer ítem -->
<li>Cuarto ítem </li><!-- Cuarto ítem -->
</ul><!-- fin de la lista desordenada-->

El tag de cierre declara el final de esta lista.

La línea horizontal:

El elemento línea horizontal pertenece a las excepciones llamadas elementos vacios ya que no tiene contenido ni tag de cierre siendo su antigua declaración <hr> y la actual y correcta
<hr /> <!-- línea horizontal -->

No debemos olvidar cerrar cada elemento con su correspondiente tag.

Una vez completado el total del contenido de cuerpo de la página procedemos a cerrar el body con su tag de cierre.

</body> <!--Termina el cuerpo del documento HTML -->

Y por último, cerramos el html.

</html> <!--Termina el documento HTML -->

 Fin del documento

Algo más

Clic para agrandar

No hay comentarios:

Historia del HTML

Cerca de 1989 existían dos técnicas muy interesantes para elaborar documentación: Los hipervínculos también conocidos como links, enlaces o anclas que permitían ir de un fichero a otro y un lenguaje de etiquetas potente (SGML), un usuario que conocía ambas llamado Tim Berners-Lee físico nuclear en el Centro Europeo de Investigaciones Nucleares publico un documento que expresa que esta trabajando en un sistema que permita el acceso a informes en línea que pudiera funcionar en máquinas conectadas por redes basadas en el protocolo TCP/IP.

Así, el HTML nació como una necesidad de intercambiar información en línea entre investigadores.

A principios de 1990-1991 Tim Berners-Lee define el HTML (HyperText Markup Language o Lenguaje de Etiquetas de Hyper Texto) como un subconjunto del SGML así también se crea el llamado World Wide Web.

En 1991 otra vez Tim Berners-Lee introduce el primer navegador de HTML que trabaja solo en modo texto y solo en plataformas Unix (LineMode.) El HTML fue adoptado rápidamente por la comunidad y estandarizado por el w3c o World Wide Web Consortium.

En 1993 aparece HTML 1.0.

En 1995 ven la luz HTML 2.0 y HTML 3.0.

En 1997 se lanza HTML 3.2.

Durante ese tiempo hubo una guerra de navegadores dirigida por Microsoft Internet Explorer y Netscape para apoderarse de un mercado en constante crecimiento.

En 1997 salió la versión HTML 4.0 (revisada en 1998).

En 1998 se constituye una revisión menor (HTML 4.01)

En el año 2000 HTML y XML se unen para convertirse en XHTML.

En 2009 da sus primeros pasos HTML5 quien, finalmente, en 2012 es soportado por la gran mayoría de los navegadores web.


Fuentes: http://www.hipertexto.info; http://www.w3.org; http://www.ncsa.uiuc.edu
No hay comentarios:

¿Qué es HTML?

El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento.
Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia.
Los documentos HTML deben tener la extensión html o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las páginas web).
Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a los usuarios las páginas web resultantes del código interpretado.
Fuente: http://www.aulaclic.es; http://www.wikipedia.org
No hay comentarios:

Ayuda de Illustrator / Combinación de objetos

Aprendé mas sobre el uso de la herramienta Buscatrazos de Adobe Illustrator
No hay comentarios:

Trabajar con imágenes


En nuestra vida cotidiana vemos multitud de imágenes (las fotografías de unas vacaciones, leyendo una revista, navegando por Internet, etc.).
Todas estas imágenes se diferencian principalmente por el soporte en el que las vemos:
·         Imágenes físicas: Visualizadas en papel u otro objeto físico. Ejemplos: fotografías tradicionales, imágenes impresas en papel de revistas y folletos...
·         Imágenes digitales: Visualizadas en monitores y pantallas. Están formadas por datos digitales, código binario, bits.
Leer más »
No hay comentarios:

¡Bienvenidos!

En este espacio van a encontrar material teórico y práctico que les resultará de ayuda para reforzar el aprendizaje de los temas abordados durante el año.

¡Buen año!
Etiquetas:
Suscribirse a: Entradas (Atom)