Tags Más Utilizados en HTML5

Tags más Utilizados en HTML5
Al igual que hoy día disponemos de computadoras más potentes y

efectivas que hace 20 años por evolución de la tecnología, también
podemos decir que los lenguajes evolucionan y cambian.
Así, algunas formas sintácticas o expresiones HTML que se
consideraban válidas hace unos años han pasado a considerarse
no recomendados para los desarrollos web actuales. Sin embargo,
dado la gran cantidad de páginas web que se construyeron usando
estas formas del lenguaje anticuadas y a que los programadores no
podían adaptarse de un día para otro a los cambios en los
lenguajes, en lugar de no permitir estas expresiones, las nuevas
versiones de los lenguajes las clasifican como deprecated o no
recomendadas.
 deprecated
Cuando se trabaja en programación y desarrollos web veremos que
con frecuencia aparece el término inglés “deprecated”. Algunas
veces se trata de traducir al español por “deprecado”, pero en
realidad este término no existe en español. En su lugar podemos
usar “desaprobado” o “no recomendado”.
Un ejemplo de uso no recomendado (deprecated) es la inclusión de

un atributo bgcolor en la etiqueta body de un documento HTML.
Por ejemplo <body bgcolor=”yellow”> hace que la página web tenga
un fondo amarillo mediante el uso de un atributo, bgcolor, que está
clasificado como deprecated. Esto significa que no debemos usar el
atributo bgcolor porque se ha definido otra forma de dar color de
fondo al elemento body de un documento HTML (en concreto
mediante el uso de estilos CSS).
Las sintaxis, atributos, expresiones, etc. que están catalogadas
como deprecated siguen siendo aceptadas por los navegadores,
aunque con el paso del tiempo pasarán de deprecated a “not
supported”, es decir, no serán reconocidas por los navegadores.
Por tanto en ningún caso debemos usarlas.
Dejando claro que no debemos usarlas, sin embargo conocer las
formas deprecated puede tener cierto interés. ¿Por qué?
1. Nos permiten conocer la evolución del lenguaje
2. En caso de que tengamos que revisar, corregir o modificar código
desarrollado por otra persona donde se usan formas deprecated,
sabremos identificar y subsanar los problemas existentes.
 colspan
El atributo colspan define el número de columnas que una celda
debe unir.
Sintaxis
<td colspan="number"> Ejemplo:
<table> <tr>
<tr> <td>February</td>
<th>Month</th> <td>$100</td>
<th>Savings</th> </tr>
</tr> <tr>
<tr> <td colspan="2">Sum:
<td>January</td> $180</td>
<td>$100</td> </tr>
</tr> </table>
 width.
El atributo width específica el ancho de una celda de la tabla.
Normalmente, una célula ocupa el espacio que necesita para
mostrar el contenido. El atributo de anchura se utiliza para
establecer un ancho predefinido de una célula.
Sintaxis
<td width="pixels|%"> Ejemplo:
<table> <td width="30%">$100</td>

<tr> </tr>
<th>Month</th> <tr>
<th>Savings</th> <td>February</td>
</tr> <td>$80</td>
<tr> </tr>
<td width="70%">January</td> </table>
 cellspacing.
El atributo de espaciado de celda de <table> no es compatible con
HTML5. Pero El atributo de espaciado de celda especificada el
espacio, en pixeles, entre las células.
Sintaxis
<table cellspacing="pixels"> Ejemplo:
<table cellspacing="10">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
 cellpandings.
El atributo cellpadding específica el espacio, en píxeles, entre la
pared celular y el contenido de la celda.
Sintaxis
<table cellpadding="pixels"> Ejemplo:
<table cellpadding="10">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
 src
El atributo src requerido específica la dirección URL de la imagen.

Nota: Cuando una página Web cargas; es el explorador, en ese
momento, que obtiene la imagen desde un servidor web y lo inserta
en la página. Por lo tanto, asegúrese de que la imagen en realidad
permanecer en el mismo lugar, en relación con la página web, de lo
contrario sus visitantes obtendrán un icono de enlace roto. El icono
de enlace roto se muestra si el navegador no puede encontrar la
imagen.
Sintaxis
<img src="URL"> Ejemplo:
<img src="smiley.gif" alt="Smiley face">
 top.
Para los elementos con posición absoluta, la propiedad top
establece el borde superior de un elemento a una unidad por
encima / debajo del borde superior de su antepasado posicionado
más próximo. Si un elemento con posición absoluta no tiene
antepasados posicionados, que utiliza el cuerpo del documento, y
se mueve junto con el desplazamiento de página. Y un
"posicionado" elemento es uno cuya posición es nada más que
estática.
Sintaxis
Top: auto|length|initial|inherit; Ejemplo:
div.absolute {
position: absolute;
top: 80px;
width: 200px;
height: 100px;
border: 3px solid #8AC007;
}
 height
El atributo height específica la altura de una célula.
Normalmente, una célula ocupa el espacio que necesita para
mostrar el contenido. El atributo de alturas se utiliza para establecer
una altura predefinida de una célula.
Sintaxis
<td height="pixels|%"> Ejemplo:
<table> <td>$80</td>
<tr> </tr>
<th>Month</th> </table>
<th>Savings</th>
</tr>
<tr>
<td height="100">January</td>
<td height="100">$100</td>
</tr>
<tr>
<td>February</td>
 body
Representa el contenido principal de un documento HTML. Solo hay
un elemento <body> en un documento. El
elemento <body> contiene todo el contenido visible de un
documento HTML, como texto, hipervínculos, imágenes, tablas,
listas, etc.
La etiqueta <body> es compatible con todos los navegadores.
 section
Define una sección en un documento.
Sintaxis de la etiqueta section HTML5 Vamos a ver la sintaxis de
este elemento HTML5 extraída de su web oficial:
XHTML. Podemos ver como section tiene sus etiquetas de apertura
y cierre, el código que se encuentre entre ambas se considerará
perteneciente a una sección o contenido temático de la web.
Dentro de etiqueta section pueden ir otras como por ejemplo:
 nav  header
 article  footer
 aside
Ejemplo de la etiqueta section HTML5 les pongo un código de

ejemplo interactuando con las etiquetas header, footer y article:
XHTML
1
2 <section>
3 <header><h2>Noticias relacionadas</h2></header>
4 <article>
5 <header>
6 <h1>Noticia 1</h1>
7 <p>Texto descriptivo 1</p>
8 </header>
9 <footer>
10 <p>Publicado el XXX del XXX de XXX</p>
11 </footer>
12 </article>
13 <article>
14 <header>
15 <h1>Noticia 2</h1>
16 <p>Texto descriptivo 2</p>
17 </header>
18 <footer>
19 <p>Publicado el XXX del XXX de XXX</p>
20 </footer>
21 </article>
22 </section>
23
Explico el código superior:
El código superior es un ejemplo de cómo podríamos hacer un
apartado de noticias relacionadas. Todo el código está bajo la
etiqueta section HTML5.
Cada noticia relacionada sería un article con sus header y footer.
 nav
Define una sección que solamente contiene enlaces de navegación
La etiqueta <nav> se usa para marcar una sección del documento
cuya función es la navegación por la página web.
Esta etiqueta no debe ser usada para marcar todos los grupos de
enlaces, únicamente los bloques principales de navegación por la
página. Por ejemplo, los típicos enlaces que hay en el pie de página
no se deben marcar con <nav>.
Ejemplo de la etiqueta nav:

Hay que tener en cuenta que no todos los grupos de links de una
página necesitan estar en un elemento nav. Por ejemplo, en el
footer es común tener un conjunto de links a distintas partes del
site, como son los enlaces a las políticas de la página, a la página
de inicio o a la página de copyright. En este caso, el elemento footer
es suficiente para contener los links sin necesidad de un elemento
nav.
 article
Define contenido autónomo que podría existir independientemente
del resto del contenido. La etiqueta <article> se usa para marcar
contenido independiente que tendría sentido fuera del contexto de
la página actual y que podría sindicarse, por ejemplo: una noticia,
un artículo en un blog o un comentario.
 aside
Define algunos contenidos vagamente relacionados con el resto del
contenido de la página. Si es removido, el contenido restante
seguirá teniendo sentido La etiqueta <aside> se usa para marcar un
trozo de contenido que está relacionado con el contenido de la
página web, pero que no es parte del mismo. Ejemplos de uso
serían: glosario de términos, grupos de enlaces a páginas
relacionadas, barras laterales.
 <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Los elemento de cabecera implementan seis niveles de cabeceras
de documentos; <h1> es la de mayor y <h6> es la de menor
importancia. Un elemento de cabecera describe brevemente el tema
de la sección que introduce.
 header
Define la cabecera de una página o sección. Usualmente contiene
un logotipo, el título del sitio Web y una tabla de navegación de
contenidos. Cabecera (a menudo con <header>)
 footer
Define el pie de una página o sección. Usualmente contiene un
mensaje de derechos de autoría, algunos enlaces a información
legal o direcciones para dar información de retroalimentación. pie
(<footer>).
 address
Define una sección que contiene información de contacto.
 main
Define el contenido principal o importante en el documento.
Solamente existe un elemento <main> en el documento.
 figure
El elemento HTML <figure> representa contenido independiente, a
menudo con un título. Si bien se relaciona con el flujo principal, su
posición es independiente de éste.
Ejemplo: por lo general, se trata de una imagen, una ilustración, un

diagrama, un fragmento de código, o un esquema al que se hace
referencia en el texto principal, pero que se puede mover a otra
página o a un apéndice sin que afecte al flujo principal. Representa
una figura ilustrada como parte del documento.
El ejemplo de figure es:

<Figure>
<img src="urldelaimagen.jpg" alt="Texto alternativo" width="XXX"
height="XXX">
<Figcaption>Texto explicativo de la imagen<figcaption>
</Figure>
 lona
La lona, elemento representa un lienzo de mapa de bits
Ejemplo: puede utilizar para la representación dinámica de
imágenes tales como gráficos del juego u otras imágenes.
 pista
La pista, elemento permite pistas multimedia complementarias tales
como pistas de subtítulos y subtítulos de derrotas por las que se
especifique de audio y vídeo
Ejemplo: La transcripción o traducción del diálogo en la banda

sonora del video o audio.
 strong
Un texto debe resaltarse con mayor fuerza con respecto a otros
textos que no sean "strong".
Ejemplo: Colocarle negrita a las palabras o letras para resaltarla del
texto.
 colores
Con los Códigos de colores HTML puede establecer el color de
fondo del sitio web, el color del texto, de las celdas en las tablas y
mucho más.
Ejemplo:
#FF0000 - Con este código HTML le decimos al navegador que
muestre la máxima cantidad de rojo y nada de verde ni de azul. El
resultado es evidentemente el color rojo puro:
 figcaption
Representa la leyenda de una figura.
La sintaxis de figcaption es:

<Figure>
<Figcaption>Texto explicativo<figcaption>
</Figure>
El ejemplo de figcaption es:

<Figure>
<img src="urldelaimagen.jpg" alt="Texto alternativo"
width="XXX" height="XXX">
<Figcaption>Texto explicativo de la imagen<figcaption>
</Figure>
 base
Define la URL base para las URLs relativas en la página.
La sintaxis de base como atributo de target es:
<Base href=”valor”” target=”valor” />
Sintaxis de base como atributo de href:
<base href=”valor URL” />
El ejemplo de base es:

<head>
<base href="http://www.aprendoencasa.com/images/"
target="_blank">
</head>
<body>
<img src="stickman.gif" width="24" height="39" alt="Stickman">
<a href="http://www.aprendoencasa.com">W3Schools</a>
</body>
 cite
Representa el titulo para una obra.
El Ejemplo de cite es:
<p> <cite>Galileo</cite> dijo: "... y sin embargo, se mueve." </p>
Otro ejemplo es:
<p> <cite>Galileo</cite> dijo: "... y sin embargo, se mueve." </p>
<p> <span style='font-style: italic;'>Galileo</span> dijo: "... y sin
embargo, se mueve." </p>

Tags Más Utilizados en HTML5

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tags Más Utilizados en HTML5

Diunggah oleh

Hak Cipta:

Format Tersedia

Tags más Utilizados en HTML5

Al igual que hoy día disponemos de computadoras más potentes y

Un ejemplo de uso no recomendado (deprecated) es la inclusión de

<table> <td width="30%">$100</td>

El atributo src requerido específica la dirección URL de la imagen.

<img src="smiley.gif" alt="Smiley face">

Ejemplo de la etiqueta section HTML5 les pongo un código de

Ejemplo de la etiqueta nav:

Ejemplo: por lo general, se trata de una imagen, una ilustración, un

El ejemplo de figure es:

Ejemplo: La transcripción o traducción del diálogo en la banda

La sintaxis de figcaption es:

El ejemplo de figcaption es:

El ejemplo de base es:

Anda mungkin juga menyukai