1. Introducción a HTML: estructura, textos, enlaces y formularios.

-

 

Tipos de marcas HTML: llenas y vacías

Existen dos tipos de marcas:
  • Llenas: compuestas de una marca de inicio y una marca de cierre.
           Ejemplo:

       <h1>El rio Henares se ha desbordado.</h1>
  • Vacias: compuestas de una sola marca.
            Ejemplo:

      <img src="http://images.freeimages.com/images....">
                               o
      <img src="http://images.freeimages.com/images...." />


Etiquetas HTML de estructura.

La estructura de un documento HTML está compuesto de las siguientes marcas:

<!DOCTYPE html>
<html>
  <head>
     <!-- cabecera o "head" del documento HTML -->
  </head>
  <body>
    <!-- cuerpo o "body" del documento HTML -->
  </body>
</html>

Etiquetas HTML dentro de <head></head>

  • <title></title>: define el título del documento HTML.
  • <meta charset="UTF-8">: codificación de carácteres (acentos, etc.).
  • <meta name="description" content="...">: información contenido de la página
  • <meta name="keywords" content="...">: palabras clave para buscadores tipo Google.

Etiquetas HTML de estructura dentro de <body></body> 

  • <header></header>: delimita la cabecera del contenido de la página.
  • <nav></nav>: delimita la barra de navegación de la página.
  • <main></main>: delimita la parte principal de la página.
  • <section></section>: delimita secciones de la página.
  • <footer></footer>: delimita el pie de la página.

Etiquetas HTML de texto

  • <h1></h1>: encabezado más grande.
  • <h2></h2>
  • <h3></h3>
  • <h4></h4>
  • <h5></h5>
  • <h6></h6>: encabezado más pequeño.
  • <p></p>: parrafos.
  • <br>: retorno de carro.

Etiquetas HTML para el formateo de texto

  • <b></b>: negrita.
  • <i></i>: cursiva.
  • <span></span>

Enlaces o "links"

  • <a href="http://www.google.com">Hola</a> 

Enlaces o "links" internos

Un enlace normal nos redirige por defecto al principio (parte superior) de la página. Pero es posible crear enlaces que redireccionen a una parte especifica del interior de una página añadiendo lo siguiente:

     <a href="http://www.loquesea.com#identificador-elemento"
Siendo #identificador-elemento el valor del atributo "id" del elemento al cual nos queremos redirigir.

Ejercicio: 

Queremos crear un enlace que nos lleve directamente hasta el siguiente titular de la página http://www.mi-web.es/noticion:

<h2 id="titular-2">No se lo esperaban</h2>


Solución:

<a href="http://www.mi-web.es/noticion#titular-2>...</a>

Formularios

  • <form></form>: delimitador del formulario. 
  • <label></label>: nombre del campo.
  • <input>: casilla simple para insertar texto.
  • <input type="checkbox">: input tipo "checkbox".
  • <input type="radio">: input tipo "radio".
  • <input type="password">: casilla para contraseñas.
  • <input type="file">: casilla para subir un archivo.
  • <textarea></textarea>: casilla para texto largo.
  • <select><option>...</option></select>: combo.
  • <input type="submit" value="...">: botón para enviar formularios. 

 

Ejercicio 

Crear la siguiente página web:



Comentarios

Publicar un comentario

Entradas populares de este blog

5. CSS: formatear un documento HTML

-
Imagen
Las hojas de estilos CSS permiten formatear los elementos HTML y/o cambiar el lugar en que estos se visualizan por defecto en el navegador. Al igual que HTML, CSS es un lenguaje que interpreta el navegador. El código CSS tiene este aspecto: Añadir CSS en un documento HTML Existen 3 métodos , para incluir hojas de estilos CSS a un documento HTML: Mediante el atributo style="..." . Mediante la etiqueta <style></style> Mediante archivos con extensión ".css" externos (RECOMENDADO) . Veamos a continuación cada una de ellas en detalle. Añadir CSS mediante el atributo style="..." Este método consiste en escribir las reglas CSS directamente en la etiqueta HTML a través del atributo style="..." . El siguiente enlace se visualizará de color rojo y tamaño de letra 8 píxeles. <a href="..." style="color: red; font-size: 8px" > Añadir CSS mediante la etiqueta <style></style> Ot...
Leer más

34. Java: final, static, constantes, colecciones

-
Imagen
El modificador "final" La palabra clave " final " se puede aplicar en: variables métodos clases 1. Variables : cuando se aplica " final " en variables , quiere decir que la variable sólo podrá ser inicializada una vez, es decir una vez asignado un valor, este no podrá ser cambiado, y si en algún sitio se intenta cambiarlo el compilador dará error . Ejemplo: En el cuerpo del enumerado anterior, se declaran dos atributos de tipo " final ". Es aconsejable añadir "final" a un atributo cuando sabemos que su valor no debería de ser modificado una vez inicializado , tal y como ocurre en este enumerado. Es decir, en este caso, las constates que se declaran dentro del enumerado, se inicializaran dentro del constructor TipoLugar(),  y ya no deberían de cambiarse , por tanto nos puede venir bien declarar esos dos atributos como final para evitar la posiblidad de que se puedan cambiar el valor de ambos atributos una vez inicializa...
Leer más

29. Android: tipos de layouts

-
Imagen
Uno de los elementos de los que estan compuestas la interfaces de usuario en Android son los " layouts ". Los "layout" son elementos invisibles de la interfaz de usuario. En realidad son como un contenedor que establece la manera en que se dispondrán los elementos que coloquemos en su interior. Por lo general, cada interfaz de usuario tendrá un "layout" que actuará como contenedor general de toda nuestra interfaz , es decir, englobando al resto de los elementos que la componen. Los tipos de "layouts" que podemos añadir a nuestras interfaces de usuario son los siguientes: LinearLayout TableLayout RelativeLayout AbsoluteLayout FrameLayout ConstraintLayout GridLayout Los veremos en detalle cada uno de ellos en este mismo artículo. El "layout" por defecto de la interfaz de usuario Como ya hemos visto anteriormente, cuando creamos un nuevo proyecto Android, se genera un archivo XML para la interfaz de usuario llamado ...
Leer más