Bloques

Etiquetas que citan o texto

As abreviaturas de marcado <abbr> poden proporcionar información útil ós navegadores, sistemas de traducción e motores de búsqueda. Utiliza o atributo title para definir o significado da abreviación.

A etiqueta de marcado <cite> fai referencia a un traballo creativo como un libro, unha película, un programa de TV ou unha canción, non ó nome dunha persona.

A etiqueta de marcado <blockquote> define unha cita larga que é representada como un elemento de bloque. Non xera automáticamente comillas arredor do contido.

A etiqueta de marcado <q> define unha cita corta en liña. Marca as citas a otros autores ou documentos. Xera automáticamente comillas arredor do contido.

A etiqueta de marcado <dfn> define un térmo e debe conter o atributo <title> para a definición/explicación do térmo que conten.

Etiqueta	Descrición	Exemplo	Utilización
`<abbr>`	Define unha abreviatura	Esto é un texto abreviado HTML	`<abbr title="HyperText Markup Languaje">HTML</abbr>`
`<q>`	Define unha cita breve	Esto é unha cita breve	`<q>Esto é unha cita breve</q>`
`<blockquote>`	Define unha cita de outra fonte	Esto é unha cita de outra fonte	`<blockquote>Esto é unha cita de outra fonte</blockquote>`
`<cite>`	Define o título de unha obra	Esto é un título	`<cite>Esto é un título</cite>`
`<dfn>`	Define un termo	Esto es un termo HTML	Esto es un termo`<dfn title="HyperText Markup Languaje">HTML</dfn>`

Exemplo de uso

A LINGUAXE HTML

Como Tim Barners-Lee, o pai da Web, escribiu en Tejiendo la Web: Yo llegué en el momento justo, interesado, cuando el hipertexto e Internet habian visto la luz. La tarea que me correspondía era hacer que casaran

O CÓDIGO HTML

<p><strong>A LINGUAXE <dfn><abbr title="HyperText Markup Languaje">HTML</abbr></dfn></strong></p> <blockquote><p>Como <strong>Tim Barners-Lee</strong>, o pai da Web, escribiu en <cite>Tejiendo la Web</cite>: <q>Yo llegué en el momento justo, interesado, cuando el hipertexto e Internet habian visto la luz. La tarea que me correspondía era hacer que casaran</q></p></blockquote>

Nota: Por defecto, <blockquote> inclue un marxe esquerdo cando se visualiza. Esta característica usouse de forma incorrecta no pasado para lograr unha sangría no texto. Sen embargo, para elo debese emplegar a propiedad margin-left de CSS

Elementos que agrupan o texto

Elemento <div>utiliza como un contedor para outros elementos HTML. Ten atributos, ainda que non son necesarios. Os máis comuns son style, class e id para dar estilos CSS ó bloque de contido.

O elemento <span> utilizase como un contedor para agrupar un texto en liña. Esta etiqueta tamén ten atributos, ainda que , como no caso anterior, son innecesarios.

Etiqueta	Descripción	Exemplo	Utilización
`<div>`	Define unha división do contido.	O elemento <div> é un elemento en bloque.	<div>Esto é un elemento en bloque.</div>
`<span>`	Define unha seción dun documento en liña	O elemento é un elemento dentro do bloque.	Esto é un <span>elemento dentro do bloque </span>

Exemplo de uso

Elementos DIV-SPAN

HTML linguaxe de marcas de hipertexto utilizase para o desarrollo de páxinas web.

CSS follas de estilo en cascada utilizase para definir e crear a presencación HTML.

Wordpress Ferramenta CMS utilizase en máis do 43.3% de sitios web en internet.

Código HTML

<div>
<div><span>HTML</span> <span>linguaxe de marcas de hipertexto</span> <span>utilizase para o desarrollo de páxinas web.</span></div>
<div><span>CSS</span> <span>follas de estilo en cascada</span> <span>utilizase para definir e crear a presencación HTML.</span></div>
<div><span>JavaScript</span> <span>linguaxe de programación</span> <span>utilizase para dar dinamismo ás páxinas web.</span></div>
</div>

Pulsa na imaxe para ver un exemplo de bloques:

Nota:Un elemento en bloque sempre empeza nunha nova liña e ocupa todo o ancho dispoñible. Un elemento en líña non se inicia nunha nova líña unicamente ocupa o ancho que sea preciso

A etiqueta `< Section > e < article >`

Etiqueta Descripción

Etiqueta	Descripción
`<section>`	Esta etiqueta permite agrupar contido lóxico en seccións separadas dentro dun documento, o que facilita a organización e a estruturación do contenido. Cada sección dentro desta etiqueta, debe ter un título que describa o seu contido e pode incluir calquier tipo de contido, como texto, imáxes, taboas, formularios, etc.
`<article>`	Esta etiqueta en HTML5 utilizase para definir un contido autónomo e de importancia nunha páxina web. Por exemplo, unha entrada de blog, una revisión, unha publicación nun foro, etc. Este contenido mostraráse de forma independiente e será máis fácil de distribuiró reutilizar en outros contextos, como feed de noticias ou búsqueda nun motor como google.

<section>

Esta etiqueta permite agrupar contido lóxico en seccións separadas dentro dun documento, o que facilita a organización e a estruturación do contenido.

Cada sección dentro desta etiqueta, debe ter un título que describa o seu contido e pode incluir calquier tipo de contido, como texto, imáxes, taboas, formularios, etc.

<article>

Esta etiqueta en HTML5 utilizase para definir un contido autónomo e de importancia nunha páxina web. Por exemplo, unha entrada de blog, una revisión, unha publicación nun foro, etc.

Este contenido mostraráse de forma independiente e será máis fácil de distribuiró reutilizar en outros contextos, como feed de noticias ou búsqueda nun motor como google.

Exemplo de uso

Exemplo de cómo se pode usar aa etiqueta <section> en HTML5:


<body>
  <header>
    <h1>Mi sitio web</h1>
    <nav>
      <ul>
        <li><a href="#inicio">Inicio</a></li>
        <li><a href="#nosotros">Nosotros</a></li>
        <li><a href="#servicios">Servicios</a></li>
        <li><a href="#contacto">Contacto</a></li>
      </ul>
    </nav>
  </header>
  <main>

    <section id="inicio" class="destacada">
      <h2>Bienvenidos a mi sitio web</h2>
      <p>En este sitio encontrarás información sobre nuestra empresa y los servicios que ofrecemos.</p>
    </section>

    <section id="nosotros" class="normal">
      <h2>Nosotros</h2>
      <p>Somos una empresa dedicada a ofrecer soluciones tecnológicas innovadoras y eficientes para pequeñas y medianas empresas.</p>
      <p>Contamos con un equipo altamente capacitado y comprometido con la satisfacción de nuestros clientes.</p>
    </section>

    <section id="servicios" class="destacada">
      <h2>Servicios</h2>
      <ul>
        <li>Desarrollo de software a medida</li>
        <li>Implementación de tecnologías de la información</li>
        <li>Consultoría y asesoramiento tecnológico</li>
        <li>Mantenimiento y soporte técnico</li>
      </ul>
    </section>

    <section id="contacto" class="normal">
      <h2>Contacto</h2>
      <form action="  " method="post">
        <label for="nombre">Nombre:</label>
        <input type="text" id="nombre" name="nombre" required>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <label for="mensaje">Mensaje:</label>
        <textarea id="mensaje" name="mensaje" required></textarea>
        <input type="submit" value="Enviar">
      </form>
    </section>

  </main>
  <footer>
    <p>Todos los derechos reservados © 2023</p>
  </footer>
</body>

Lenguaje del código: HTML, XML (xml)

Neste exemplo, utilizase a etiqueta <section> para identificar diferentes seccións nunha páxina web, como inicio, nosoutros, servizos e os detalles de contacto.

Cada sección ten o seu propio contido e título, e está enlazado a través dunha barra de navegación na cabeceira da páxina.

Atributos

A etiqueta <section> e <article> en HTML5 non teñen atributos específicos, pero poden utilizarse os atributos globais de HTML, como id, class, style, title, entre outros.

id: permite identificar de forma única unha sección en particular dentro dun documento HTML e utilizase para facer referencia á sección desde outros elementos, como enlaces.

class: permite asignar unha ou varias clases a unha sección e utilizalas para estilos CSS.

style: permite especificar estilos CSS para unha sección en particular, directamente na etiqueta.

title: permite especificar un título adicional para unha sección que pode ser útil para mellorar a accesibilidade do contido.

En resumen, os atributos da etiqueta <section> permiten personalizar e describir de forma máis detallada o contido dentro dunha sección. Mentras que <section> define un contido autonomo dentro dunha web ou mesmo dunha section , como pode ser cada publicación dub blog ou noticia nun xornal

Algunhas etiquetas de código.

A etiqueta <code> define un fragmento de código de ordenador
A etiqueta <kbd> representa comandos de entrada de usuario.
A etiqueta <samp> representa a saída dun programa ou sistema informático.
A etiqueta <var> utilizase como expresión matemática ou variable da programación.

Etiqueta	Descrición	Visualización	Utilización
<code>	Define un código de programación	Usar este código `function(maim)`	Usar este código <code>function(maim)</code>
<kbd>	Define unha entrada de teclado	Para gardar `Ctrl` + `S`	Para gardar <kbd>Ctrl</kbd> + <kbd>S</kbd>
<samp>	Define unha saída da computadora	`Error: páxina non atopada`	<samp>Error:páxina non atopada</samp>
<var>	Define unha variable aritmética	Einstein escribiu: `E=mc²`	Einstein escribiu: <var>E=mc<sup>2</sup></var>

Nota:As etiquetas de código de computadora cambian o tipo de letra simulando código informático

Errores HTML

Error '404 not found(non se atopa)
Error '400 bad request(solicitude incorrecta)
Error '401 Unauthorized(non autorizado)
Error '403 Forbidden(Acceso prohibido)

Comandos básicos

Ctrl + S para guardar
Ctrl + C para copiar
Ctrl + V para pegar
Ctrl + X para cortar

Fórmulas históricas

a²+b²=c²
iħ (∂/∂t).ψ=Hψ
E= mc²
F= G [(m1 x m2)/r²]

Etiquetas que citan o texto

Exemplo de uso

Elementos que agrupan o texto

Exemplo de uso

A etiqueta < Section > e < article >

Exemplo de uso

Atributos

Algunhas etiquetas de código.

A etiqueta `< Section > e < article >`