html5 archivos - Visto en la Red https://vistoenlared.es/tag/html5/ Reseñas, opiniones, testimonios y listas de productos Fri, 13 Jan 2023 06:45:41 +0000 es hourly 1 https://wordpress.org/?v=6.3.3 https://vistoenlared.es/wp-content/uploads/2022/12/cropped-36f8c47a8b1b4460b021065f7dcfa83a-2-32x32.png html5 archivos - Visto en la Red https://vistoenlared.es/tag/html5/ 32 32 Estructura del código HTML5 – Anatomía de una página web. https://vistoenlared.es/estructura-del-codigo-html5-anatomia-de-una-pagina-web/ Fri, 26 Feb 2016 21:56:59 +0000 https://vinkula.com/blog/?p=695 Hace unas semanas escribí un post sobre cómo crear botones personalizados con HTML5 y CSS pero, claro está que, cuando no entiendes un lenguaje todo resulta mucho más complicado y eso puede traernos muchas dificultades y hacernos perder mucho tiempo. Por eso hoy quiero dar un paso atrás y asentar las bases de una forma […]

La entrada Estructura del código HTML5 – Anatomía de una página web. se publicó primero en Visto en la Red.

]]> Hace unas semanas escribí un post sobre cómo crear botones personalizados con HTML5 y CSS pero, claro está que, cuando no entiendes un lenguaje todo resulta mucho más complicado y eso puede traernos muchas dificultades y hacernos perder mucho tiempo. Por eso hoy quiero dar un paso atrás y asentar las bases de una forma sencilla y básica mostrando la estructura y las partes principales de un código HTML5 para los que aún no se han familiarizado con él.

Un consejo

Cuando yo empecé en la programación todo me parecía muy abstracto, la solución para mi fue hacerme con una serie de libros (sí, libros físicos de los de antes) que me ayudaron a disponer de unos contenidos ordenados asequibles y tangibles. Por si alguien se encuentra ahora mismo en esta situación, para empezar con la programación web os recomiendo el libro «El gran libro de HTML5, CSS3 y JavaScript». Este libro os dará una base de conocimientos muy útil para desde aquí seguir creciendo.

Primero te quiero enseñar un código HTML5 completo para luego analizar las partes y poder entenderlo.

Ejemplo de código HTML5 de una página sencilla

<!DOCTYPE html>
<html lang="es">  
  <head>    
    <title>Título de la WEB</title>    
    <meta charset="UTF-8">
    <meta name="title" content="Título de la WEB">
    <meta name="description" content="Descripción de la WEB">    
    <link href="http://dominio.com/hoja-de-estilos.css" rel="stylesheet" type="text/css"/>    
  </head>  
  <body>    
    <header>
      <h1>Título de la WEB</h1>      
    </header>    
    <nav>
      <a href="http://dominio.com/seccion2.html">IR SECCIÓN 2</a>
      <a href="http://dominio.com/seccion2.html">IR SECCIÓN 3</a>
    </nav>
    <section>      
      <article>
        <h2>CONTENIDO PRINCIPAL</h2>
        <p>Este es el contenido principal de mi web</p>
        <div>
          <p>Aquí tenéis una imagen.</p>
          <img src="http://dominio.com/imagen.jpg" alt="paisaje">          
        </div>
      </article>      
    </section>
    <aside>
      <h3>Banner de publicidad</h3>
      <a href="http://dominio-externo.com">
        <img src="http://dominio.com/banner-publicidad.png" alt="banner de publicidad">
      </a>
      <h3>Testimonios</h3>
      <p>Me gusta mucho esta página.</p>
    </aside>
    <footer>
      <h4>Avisos legales</h4>
      <a href="http://dominio.com/aviso-legal">Política de cookies</a>
      <h4>Redes sociales</h4>
      <a href="http://facebook.com/mi-pagina-de-facebook">Mi Facebook</a>
    </footer>
  </body>  
</html>

vivir de la programación web

Anatomía del código HTML5 – Las partes y su significado.

DOCTYPE

<!DOCTYPE html>

La etiqueta doctype declara el tipo de documento, por lo que esta está señalando que este es un documento HTML.

HTML

<html></html>

Delimita el documento HTML.

Atributo a destacar
LANG
<html lang="es"></html>

Indica el lenguaje de contenido del código.

HEAD

<head></head>

El elemento head delimita la cabecera del documento, entre sus etiquetas contiene información como scripts, metadatos, estilos, ubicación de documentos de estilos, título de la página, etc.

META

<meta name="description" content="Descripción de la WEB">

Las meta etiquetas se utilizan para identificar propiedades del documento como por ejemplo el autor, el título y la descripción que mostrarán los buscadores, etc.

Usos a destacar
META CHARSET
<meta charset="UTF-8">

Establece el tipo de codificación del documento.

META TITLE
<meta name="title" content="Título de la WEB">

Contiene el titulo que se mostrará en los buscadores.

META DESCRIPTION
<meta name="description" content="Descripción de la WEB">

Es el texto que se muestra bajo el título en los motores de búsqueda.

LINK

<link href="http://dominio.com/hoja-de-estilos.css" rel="stylesheet" type="text/css"/>

Esta etiqueta contiene un link a una hoja de estilos externa, la cual se utilizará en este documento.

Atributo a destacar
HREF

Especifica la url donde se localiza la hoja de estilo.

BODY

<body></body>

La etiqueta body delimita el cuerpo del documento y contiene todo aquello que podremos ver en nuestro navegador. Imágenes, textos, enlaces, video, etc…

HEADER

<header></header>

El contenido de esta etiqueta debe ser la cabecera de nuestra página donde se suele encontrar el título, el logotipo y poco más.

NAV

<nav></nav>

Esta etiqueta sirve para delimitar el menú de la página, donde colocaremos los enlaces internos para movernos entre nuestras diferentes secciones del sitio web.

A

<a href="http://dominio.com/seccion2.html">IR SECCIÓN 2</a>

Representa un enlace o hipervínculo.

Atributos a destacar.
HREF

Dirección URL hacia la que apunta el enlace.

H1, H2, H3, H4, H5, H6

<h1>Título de la WEB</h1>
<h2>CONTENIDO PRINCIPAL</h2>
<h3>Testimonios</h3>
<h4>Avisos legales</h4>

Estas etiquetas establecen los encabezados. Se organizan por niveles siendo H1 el más importante y H6 el menos importante.

SECTION

<section></section>

La etiqueta section engloba una sección de texto, imágenes y otros elementos que guardan cierta relación entre ellos. Normalmente siempre le podremos poner un título o encabezado.

ARTICLE

<article></article>

La etiqueta article se suele encontrar dentro de una etiqueta section y sirve para dividir y ordenar los contenidos en su interior.

DIV

<div></div>

Otra forma de dividir contenido para posteriormente aplicarle clases y modificar su estilo.

P

<p></p>

Entre las etiquetas P colocaremos un párrafo de texto.

IMG

<img src="http://dominio.com/imagen.jpg" alt="paisaje">

Esta etiqueta coloca una imagen en el documento mediante un enlace.

Atributos a destacar.
ALT

Representa el texto alternativo, muy importante para que los bucadores puedan obtener información de la imagen.

SRC

URL donde se encuentra la imagen.

ASIDE

<aside></aside>

Contiene información no vital o que no está estrechamente relacionada con el contenido principal de la página como podrían ser banners de anuncios, citas o enlaces externos.

FOOTER

<footer></footer>

Aquí encontraríamos el código perteneciente al pie de página, donde se suelen colocar los enlaces a textos legales, el copyright, etc.

Posible resultado de nuestro código HTML5

Aquí dejo la imagen que muestra el navegador tras asignarle algunos estilos. He añadido las etiquetas para que puedas orientarte bien.

estructura del código html5

 

 

Espero que te haya sido de utilidad, si es así, no dudes en comentar y compartir.

 

 

La entrada Estructura del código HTML5 – Anatomía de una página web. se publicó primero en Visto en la Red.

]]> Crear botones personalizados con HTML5 y CSS3 https://vistoenlared.es/crear-botones-personalizados-con-html5-y-css3/ https://vistoenlared.es/crear-botones-personalizados-con-html5-y-css3/#comments Sat, 30 Jan 2016 10:58:25 +0000 https://vinkula.com/blog/?p=399 Los botones son una parte fundamental de nuestra web. Aparte de ser un simple lugar donde puedes hacer clic, los botones deben saber llamar la atención al usuario sin ser excesivamente molestos, se deben entender y tener un acabado profesional. Para ello me propongo a enseñaros como crear botones personalizados con HTML5 y CSS3. Se […]

La entrada Crear botones personalizados con HTML5 y CSS3 se publicó primero en Visto en la Red.

]]>
Los botones son una parte fundamental de nuestra web. Aparte de ser un simple lugar donde puedes hacer clic, los botones deben saber llamar la atención al usuario sin ser excesivamente molestos, se deben entender y tener un acabado profesional. Para ello me propongo a enseñaros como crear botones personalizados con HTML5 y CSS3. Se trata de una tarea sencilla, de nivel muy básico, práctica y muy flexible, que nos permitirá personalizar 100% nuestro botón. El objetivo será conseguir botones como este y daros algunos ejemplos más al final de la entrada:

 

Soy un botón

 

Un consejo

Cuando yo empecé en la programación todo me parecía muy abstracto, la solución para mi fue hacerme con una serie de libros (sí, libros físicos de los de antes) que me ayudaron a disponer de unos contenidos ordenados asequibles y tangibles. Por si alguien se encuentra ahora mismo en esta situación, para empezar con la programación web os recomiendo el libro «El gran libro de HTML5, CSS3 y JavaScript». Este libro os dará una base de conocimientos muy útil para desde aquí seguir creciendo.

Los pasos para crear tus botones personalizados.

El código HTML5

Para crear nuestros botones personalizados lo primero que debemos hacer es teclear el código HTML5, el cual deberemos colocarlo allí donde queramos ubicar nuestro botón. Para ello podríamos utilizar dos elementos, el elemento <a> , o el elemento <input> ambos tipos son personalizables, pero el elemento <input> trae consigo estilos por defecto que pueden alterar nuestro botón en los diferentes navegadores y dispositivos. Por eso, para hacerlo más sencillo, utilizaremos el elemento <a> el cual también tiene estilo por defecto pero resulta mucho más manejable.

Código:

<a class="boton_personalizado" href="https://vistoenlared.es">Soy un botón</a>

Explicación:

En el atributo href, donde he colocado https://vistoenlared.es, debes sustituirlo por la ruta a la que quieres dirigir el botón.

En el atributo class donde he escrito boton_personalizado puedes escribir cualquier nombre que le quieras asignar a la clase.

Recuerda mantener las comillas «».

El código CSS3

Ahora que ya hemos creado nuestro botón, toca personalizar su aspecto a través del código CSS3. Este código debes pegarlo entre las etiquetas <head> y </head> de tu documento HTML. También puedes utilizar hojas css. Debemos tener en cuenta que deberemos crear la clase con el nombre que le hemos asignado al atributo class en nuestro código HTML5.

Código:


<style type="text/css">
  .boton_personalizado{
    text-decoration: none;
    padding: 10px;
    font-weight: 600;
    font-size: 20px;
    color: #ffffff;
    background-color: #1883ba;
    border-radius: 6px;
    border: 2px solid #0016b0;
  }
</style>

Explicación:

Text-decoration se refiere a la decoración del texto, deberemos establecerlo en none a no ser que queramos tener el texto del botón subrayado.

Padding es la distancia entre el texto y el borde del botón. En este caso está establecido en pixeles.

Font-wheight se trata del grosor de las letras. Mientras más alto sea su número, más gruesas serán.

Font-size es el tamaño se la letra, en este caso, también en pixeles.

Color se refiere al color de la letra. Podremos personalizarlo fácilmente con un código HEX, RGB  o incluso RGBA.

Background-color es el color de fondo del botón.

Border-radius se trata del redondeado de los cantos de botón. Mientras más pixeles asignemos, más redondeados serán los bordes. Si, lo que queremos es un botón sin bordes redondeados, lo eliminaremos.

Border es del borde del botón. Podremos asignar un grosor en pixeles y un color.

El hover

Ahora falta definir qué ocurre cuando pasamos el ratón por encima de nuestro botón, esto lo haremos asignándole un hover a nuestra clase. Por lo que nuestro código CSS3 quedaría así.

Código:


<style type="text/css">
  .boton_personalizado{
    text-decoration: none;
    padding: 10px;
    font-weight: 600;
    font-size: 20px;
    color: #ffffff;
    background-color: #1883ba;
    border-radius: 6px;
    border: 2px solid #0016b0;
  }
  .boton_personalizado:hover{
    color: #1883ba;
    background-color: #ffffff;
  }
</style>

Explicación:

Dentro del hover colocaremos todo aquello que queremos que se modifiquen al pasar el ratón por encima con los valores que queremos establecer.

Resultado:

 

Soy un botón

 

Aquí tienes algunos ejemplos más de botones

Botón 1

código html botón 1

<a href="" class="boton_1">Soy un botón</a>

código css botón 1


<style type="text/css">
  .boton_1{
    text-decoration: none;
    padding: 3px;
    padding-left: 10px;
    padding-right: 10px;
    font-family: helvetica;
    font-weight: 300;
    font-size: 25px;
    font-style: italic;
    color: #006505;
    background-color: #82b085;
    border-radius: 15px;
    border: 3px double #006505;
  }
  .boton_1:hover{
    opacity: 0.6;
    text-decoration: none;
  }
</style>

Botón 2

>

código html botón 2

<a href="" class="boton_2">Soy un botón</a>

código css botón 2


<style type="text/css">
  .boton_2{
    text-decoration: none;
    padding: 40px;
    font-family: arial;
    text-transform: uppercase;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: 800;
    font-size: 25px;
    color: black;
    background-color: #9b0e0e;
  }
  .boton_2:hover{
    color: #9b0e0e;
    background-color: #bc6355;
    text-decoration: none;
  }
</style>

La entrada Crear botones personalizados con HTML5 y CSS3 se publicó primero en Visto en la Red.

]]> https://vistoenlared.es/crear-botones-personalizados-con-html5-y-css3/feed/ 6