Contenidos

1 Formato de una página HTML

Formato de una página HTML

Su principio esencial es el uso de etiquetas (tags). Las etiquetas son palabras reservadas del lenguaje encerradas entre < >

Tipos de etiquetas

Hay tres tipos de etiquetas:

Pareadas
cuando aparece una etiqueta de inicio y otra de final, los bloques contenidos entre el inicio y el cierre son elementos, que su vez pueden contener otros elementos
```
<p>Un texto</p>
```
Sin parear
cuando la etiqueta representa la inserción de un elemento, estas etiquetas terminan con una barra inclinada
```
<hr/>
```
Con final opcional
son etiquetas pareadas en la cuales no es obligatorio emplear la etiqueta final

<p>Parrafo que no tiene cierre

Las etiquetas pueden incluir atributos que modifican su comportamiento, especificando alguna característica singular del elemento o incluyendo información adicional

Los atributos se especifican como pares atributo=’valor’, separados por espacios dentro de la etiqueta de inicio

No es obligatorio que los valores estén encerrados entre comillas, pero sí es recomendable

Pueden utilizarse comillas simples o dobles indistintamente, siempre que coincidan su apertura y cierre

<div id='box'>texto</div>

En el ejemplo se ha utilizado el atributo id, el cuál es genérico para cualquier etiqueta y que nos será de utilidad cuando usemos CSS y Javascript, ya que nos permite distinguir de forma única el elemento al que pertenece esa etiqueta concreta

Existen más atributos genéricos, como por ejemplo class, title o style, todos ellos muy útiles cuando queramos dar formato o mejorar la accesibilidad a nuestros elementos

Cuando introducimos una etiqueta que no existe, esta será ignorada, debemos prestar atención a este asunto porque dificulta la detección de errores

Las etiquetas pueden escribirse en mayúsculas o en minúsculas

No se consideran los saltos de línea ni los espacios en blanco extras. Esto último permite indentar el código para hacerlo más legible

Comentarios dentro del HTML

A veces es muy útil escribir comentarios en el documento HTML sobre el código que escribimos, nos pueden servir para recordar posteriormente lo que fue hecho, y que no queremos que se vea en pantalla

Esto se consigue encerrando dichos comentarios entre estos dos símbolos:

<!-- Esto es un comentario al código que no se verá en pantalla -->

Los comentarios se pueden utilizar en cualquier parte del documento HTML, pero no se verá en pantalla

<html>
    <head>
<!-- Inserted by miarroba -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<!-- Inserted by miarroba -->
        <title>Página web de ejemplo</title>
    </head>
    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
        <h1><center>Listado de aficiones</center></h1>
        <!-- Ejemplo de los tres tipos de listas -->
        <h3><b>aficiones</b> (sin un orden particular)</h3>
        <ul>
            <li>Cine</li>
            <li>Deporte</li>
            <li>Natación</li>
            <li>Música</li>
        </ul>
        <br/><br/>
        <h3><b>Prioridades</b> en cuanto a música <i>(con orden)</i></h3>
        <ol>
            <li>Rock</li>
            <li>Jazz</li>
            <li>Clásica</li>
        </ol>
        <dl>
            <dt><tt>Rock</tt>
                <dd>Baile de pareja que se ejecuta con esta música</dd>
            </dt>
            <dt><tt>Jazz</tt>
                <dd>Música derivada de melodías afronorteamericanas</dd>
            </dt>
            <dt><tt>Clásica</tt>
                <dd>Música instrumental para conjunto</dd>
            </dt>
        </dl>
        <br/><br/>
        <!-- Ejemplo de cita -->
        <blockquote>No por mucho madrugar amanece mas temprano</blockquote>
        <br/><br/>
        <!-- Ejemplo de fórmula matemática, el teorema de Thales -->
        a<sup>2</sup>=b<sup>2</sup>+c<sup>2</sup>
        <br/><br/>
        <!-- Ejemplo de fórmula matemática, símbolo del agua -->
        H<sub>2</sub>O
    </body>
</html>

Caracteres especiales

Hay ciertos caracteres que un navegador no es capaz de reconocer a pesar de utilizar la codificación correcta

Imaginemos que queremos escribir el texto x > y dentro de nuestro HTML, sin embargo, el carácter > no será reconocido por el navegador o nos mostrará uno erróneo

Esto ocurre con un conjunto de caracteres que son especiales y que el navegador reconocerá utilizando la etiqueta específica de ese carácter con el siguiente formato &etiqueta;

En el ejemplo anterior, la etiqueta para el carácter > es gt, empezando por & y terminando por ;

En la siguiente web podremos consultar la lista completa de los 256 caracteres universales HTML

Cookie	Duración	Descripción
CookieLawInfoConsent	Hasta finalizar la sesión del navegador	Controla la visualización del consentimiento de Cookies, su gestión y visualización en la página web por parte del usuario
qtrans_admin_language	Hasta finalizar la sesión del navegador	Permite al administrador gestionar la traducción de la página web a varios idiomas
qtrans_edit_language	Hasta finalizar la sesión del navegador	Permite al administrador editar la traducción de la página web a varios idiomas
viewed_cookie_policy	Hasta finalizar la sesión del navegador	Controla si la visualización del consentimiento de Cookies es visible actualmente en la página web para el usuario o por el contrario está oculta

Web sobre Informática de Secarcam

Formato de una página Html

Formato de una página HTML

Tipos de etiquetas

Comentarios dentro del HTML

Caracteres especiales

Página web de Sergio Cárcamo García dedicada a la informática y temas relacionados como los lenguajes de programación, la estadística, las matemáticas, etc

Formato de una página HTML

Tipos de etiquetas

Comentarios dentro del HTML

Caracteres especiales

Página web de Sergio Cárcamo García dedicada a la informática y temas relacionados como los lenguajes de programación, la estadística, las matemáticas, etc

Política de Cookies