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.
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 marcadores 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.| Lenguaje HTML | Resultado en navegador |
|---|---|
| <b>texto en negrita</b> | texto en negrita |
| <i>texto en cursiva o itálica</i> | texto en cursiva o itálica |
| <u>texto subrayado</u> | texto subrayado |
| <b><i><u>combinando las tres anteriores</u></i></b> | combinando las tres anteriores |
| <tt>fuente tipo de máquina de escribir</tt> | Fuente tipo de máquina de escribir |
| Subíndice. Por ejemplo H<sub>2</sub>O | H2O |
| Superíndice. Por ejemplo x<sup>2</sup> | x2 |
Tipos de letras
La etiqueta <font> en HTML es obsoleta. Se supone que se eliminara en futuras versiones de HTML. A pesar de su uso cotidiano, evitalo en favor de las hojas de estilos.Para un documento completo podría usar las fuentes de google con un línea en el head como está:
<link href='//fonts.googleapis.com/css?family=Cuprum:400italic,400,700italic,700' rel='stylesheet' >
Imagenes
Colocar 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.| Código | Efecto visual |
|---|---|
| <img alt ='' src='images/moneda.jpg'> |  |
Si la imagen es usada como hipervinculo, el valor por defecto es 1px. Si no requerimos el bordees necesario agregar el atributo border='0' sobre todo si usamos iExplorer de preferencia en una hoja de estilo. Por ejemplo.
img {
border: 0px;
}
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:
<a href='www.itver.edu.mx'>I.T.V</a>href
Este 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)
target
Destino 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
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>
Visualizacion
- Café
- Leche
- Té
No hay comentarios:
Publicar un comentario