2.5 Elementos básicos: texto, vínculos, listas, tablas, objetos, imágenes y aplicaciones

Elementos básicos: texto, vínculos, listas, tablas, objetos, imágenes y aplicaciones 

El HTML (HipertText Markup Language) ó Lenguaje de enlaces hipertexto es un sistema que se encarga de definir tipos de documentos estructurados y lenguajes de marcas para representar esos mismos documentos. El término HTML se suele referir a ambas cosas, tanto al tipo de documento como al lenguaje de marcas.
Como cualquier página web está soportada por un archivo de texto, se pueden elaborar, editar o modificar directamente con el bloc de notas, aunque existen programas editores profesionales de páginas web como Adobe Dreanweaver CS5 y programas gratuitos de edición básica como Freelabs, que permiten editarlas con algunas funciones automatizadas a través de botones y menús.
A continuación se presenta una breve descripción de HTML 5, si usted desea conocer más a detalle puede visitar las múltiples páginas en el internet o consultar la guía oficial en w3c.


Sintaxis

Caracteres:


Cualquier cadena de caracteres imprimibles que no represente un marcado se representa literalmente, aunque los espacios y tabuladores se reducen a un solo carácter cuando no están dentro de un bloque preformateado <pre>.



Marcadores, marcas o etiquetas (tags):



Los marcadores delimitan elementos de un documento como cabeceras, párrafos, etc. La mayoría de los marcadores constan de una marca inicial < ...> , que da el nombre y atributos del elemento, seguida del contenido ó secuencia de caracteres y una marca final </...>.
Las marcas iniciales se escriben entre los símbolos '<' y '>' (menor y mayor) y las finales entre '</' y '>' (menor, barra y mayor). Por ejemplo, <h1>Hola Mundo</h1>, indica que 'Hola Mundo' es una cabecera de nivel uno.
Algunos elementos sólo tienen una marca inicial (por ejemplo el tag <hr> que representa una línea horizontal y <br> inserta un salto de línea donde se coloque. Puede colocar tantas como desee y se insertará un salto de línea por cada una de ellas. ).




Nombres de etiquetas



Los nombres consisten en una letra seguida de letras, dígitos, puntos o guiones. Los ejemplos <h1> y<hr> anteriores son ejemplos de nombres de etiquetas. La longitud de un nombre esta limitada a 72 caracteres en la definición del HTML. Los nombres de elementos y atributos no distinguen entre mayúsculas y minúsculas, pero los nombres de entidades (la representación alternativa de los caracteres) sí.
En las marcas, el nombre del elemento debe comenzar inmediatamente después del <.



Atributos:



Cuando una marca inicial admite atributos, éstos se escriben a continuación del nombre del elemento. Generalmente los atributos tienen la forma nombre, signo igual, valor del atributo aunque en algunos casos basta con el nombre del atributo. Se pueden poner espacios en blanco antes y después del signo igual.



El valor de un atributo puede ser una cadena de caracteres entre comillas (simples o dobles) que no contenga el símbolo de fin de marca '>' o un nombre como los definidos en el apartado anterior. Por ejemplo, en <img src='foto.gif'>, img src es el nombre de la marca que se refiere a insertar una imagen en la página web; y "foto.gif" es el valor que hace referencia al nombre específico de la imagen que queremos incluir.
Comentarios :


Una declaración de comentarios comienza con <!--, le siguen uno o varios comentarios y termina con -->. Las etiquetas de comentariose visualizan dentro del código html pero no tiene una traducción hacia el formato final. Es decir, no se visualiza en el navegador cliente.




Formateo de párrafos o bloques:

El inicio de un párrafo se indica con el tag <p> y su final con el tag </p>. El espaciado y los retornos de línea son ignorados por los navegadores que interpretan html.
Para agregar un retorno de línea es necesario usar el tag único <br>.
Elemento <hr /> inserta un línea además de un retorno de línea
<blockquote> y <blockquote> Este tag se usa para escribir una cita textual o un párrafo exacto y que éste se diferencie del resto del texto. El efecto que nos muestra es que crea un margen izquierdo yderecho del texto, para que se diferencie de los demás.


<p>La pareja mexicana de Paola Espinosa y Alejandra Orozco se colgó la medalla de plata en la prueba de plataforma de 10 metros sincronizado de los Juegos Olímpicos de Londres 2012, mientras que la dupla ganadora fue la integrada por las chinas Chen Roulin y Wang Hao.</p> <br> <p>El binomio Espinoza-Orozco sumó 343.32 puntos, por 368.40 de las chinas, en tanto que el bronce fue para las canadienses Roseline Filion y Meaghan Benfeito, con 337.62.</p>



Efecto visual
La pareja mexicana de Paola Espinosa y Alejandra Orozco se colgó la medalla de plata en la prueba de plataforma de 10 metros sincronizado de los Juegos Olímpicos de Londres 2012, mientras que la dupla ganadora fue la integrada por las chinas Chen Roulin y Wang Hao.

El binomio Espinoza-Orozco sumó 343.32 puntos, por 368.40 de las chinas, en tanto que el bronce fue para las canadienses Roseline Filion y Meaghan Benfeito, con 337.62.

Etiquetas de caracteres y tipos de letra:

El lenguaje HTML permite asignar formatos de tipos de letra y caracteres. Existen diversos marcado

res para indicar que una palabra o frase tiene una connotación especial y es obligatorio poner los marcadores de cierre al final del texto afectado. Estos son algunos de los más utilizados.Los elementos básicos con los que cuenta un documento HTML, son el medio por el cual el usuario tiene interacción con la información, los elementos que son mas utilizados son;

• Vínculos

• Imágenes

• Objetos

• Aplicaciones






Hiperenlaces


Es la piedra angular de HTML, este tag se utiliza para crear hipervínculos: el texto en cual podemos hacer clic en un navegador para ir a otra página web. La sintaxis es la siguiente:



hrefEste atributo específica la localización de un recurso de la Web, definiendo así un vínculo entre el elemento actual (el origen del vínculo) y el destino del vínculo definido por este atributo. El destino de un vinculo puede ser: una página web interna o externa, o un título, imagen, parrafo dentro de la misma página con el vinculo de origen (enlaces internos)

targetDestino del hiperenlace

_self: Abrir el enlace en la misma ventana que se encuentra el documento actual (valor por defecto). En el caso que existe un iframe, la ventana se abrira en el mismo marco
_blank:independientemente de si el enlace esta o no dentro de un iframe, el valor '_blank' creará una ventana nueva

<a href='www.itver.edu.mx'>I.T.V</a>

Listas




Listas desordenadas

Están englobadas por las etiquetas <ul>...</ul> (unordered list). Cada uno de los elementos de la lista comenzará con una etiqueta <li>.

Codigo
<ul> <li>Café</li> <li>Leche</li> <li>Té</li> </ul>


ImagenesColocar imágenes en nuestra web produce unos resultados asombrosos de una manera muy fácil. El tag básico para colocar una imagen es "img". Este tag, a diferencia de la gran mayoría de los tags de html, no necesita un cierre. El atributo "src" es imprescindible para poder colocar una imagen. Este atributo es el que indica dónde se encuentra alojada la imagen que queremos mostrar. Se escribe así: <img src="ruta">, donde "ruta" es la dirección o la url dónde se encuentra situada la imagen. Solo es posible cargar imagenes gif, jpg y png.fuente:

http://moodle2.unid.edu.mx/dts_cursos_mdl/pos/TI/LP/S03/LP03_Visual.pdf

marisol contreras muñiz. (04/07/2013). Lenguajes de programacion web. 04/08/2013, de UNDI Sitio web: http://moodle2.unid.edu.mx/dts_cursos_mdl/pos/TI/LP/S03/LP03_Visual.pdfweb: http://moodle2.unid.edu.mx/dts_cursos_mdl/pos/TI/LP/S03/LP03_Visual.pdf