Etiquetas HTML (todos los cursos)

13 - junio - 2017

Como sabéis, estamos en pleno tema 3 viendo cómo hacer páginas Web usando el lenguaje HTML y en clase hemos visto y usado muchas etiquetas diferentes.

Como se que podéis liaros un poco con todas ellas, os dejo aquí un resumen de todas las que hemos visto para que lo tengáis a mano o incluso lo imprimáis. Os puede venir muy bien para repasar o como guía rápida a la hora de hacer los ejercicios.

Para imprimirlo solo tenéis que copiar todo el contenido de este artículo en el Word y después imprimís pulsando el botón correspondiente.

Esqueleto o estructura de toda página web:

<html>

<head>

<title> Titulo de la página </title>

</head>

<body>

Contenido de la página

</body>

</html>

Etiquetas y atributos:

<body bgcolor=”red“> Fondo de toda la página de color rojo


<body background=”URL imagen“> El fondo de toda la página será la imagen indicada.


<br/> Salto de línea


<hr color=”red” size=”1“/> Línea horizontal de colo rojo y 1 punto de grosor


<p> …. </p> Define un párrafo. Puede tener un atributo:

  • align=”left”, “center”, “right”, “justify” (configuramos la alineación del texto de este párrafo)

<blockquote> …. </blockquote> Etiqueta para sangrar un párrafo.


<b> …. </b> Negrita

También puedes usar:  <strong> …. </strong>


<i> …. </i> Cursiva


<u> …. </u> Subrayado


<s> …. </s> Tachado


<center> …. </center> Centrado


<marquee> …. </marquee> Mueve el texto. Puede tener dos atributos:

  • direction=”right” , “left” (hacia donde se moverá el texto)
  • bgcolor=”red” (color de fondo del texto)
  • scrollamount=”10″ (define la velocidad del texto)

<h1> …. </h1> Para hacer cabeceras de diferentes tamaños
<h2> …. </h2> el h1 es el mas grande y el h6 el mas pequeño
<h3> …. </h3>
<h4> …. </h4>
<h5> …. </h5>
<h6> …. </h6>


<font> …. </font> Indicamos el tipo de letra, el tamaño y el color del texto con tres atributos distintos:

  • face=”Comic Sans MS” (tipo de letra)
  • size=”12″ (tamaño de la letra)
  • color=”red” (color de la letra)

<sub> …. </sub> subíndices


<sup> …. </sup> superíndices


<img/> Para colocar una imagen. Tiene muchos atributos con los que configuramos la imagen:

  • src=”nombre de la imagen” (indicamos el nombre del archivo que contiene la imagen)
  • align=”left”, “middle”, “right” (indicamos el lugar en el que aparecerá la imagen con respecto al texto de alrededor)
  • border=”1″ (número que indica el grosor del borde que tendrá la imagen)
  • width=”200″ (ancho en píxeles de la imagen)
  • height=”300″ (alto en píxeles de la imagen)
  • hspace=”15″ (espacio que la imagen dejará por la derecha y por la izquierda con el texto que tenga alrededor)
  • vspace=”15″ (espacio que la imagen dejará por arriba y por abajo con el texto que tenga alrededor)

<a> …. </a> Sirve para colocar un enlace en la página. Contiene en su interior el nombre con el que el enlace aparecerá. Tiene un atributo:


<ul> …. </ul> Lista desordenada. Puede tener 1 atributo:

  • type=”circle” , “disk” ó “square” (define el tipo de viñeta: círculo, disco o cuadrado)

<ol> …. </ol> Lista ordenada. Puede tener 2 atributos:

  • type=”a” , “A”, “1”, “I” ó “i” (define el tipo de numeración)
  • start=”1″ (define el comienzo de la numeración)

<li> …. </li> Elemento de la lista


Nueva película de StarWars: aprendiendo a programar

10 - noviembre - 2016

¿Recordáis cuando programábamos en clase con Elsa y Anna de Frozen? Acaban de publicar en www.code.org una nueva hora de código basada en la nueva película de StarWars que se va a estrenar en un mes.

El funcionamiento es el mismo aunque en este caso aprenderéis a programar en Javascript. Tranquilos, todo sigue estando basado en bloques que arrastráis y soltáis.

Este es el vídeo de bienvenida (os recomiendo que activéis los subtítulos y la traducción automática al español):

Os dejo el enlace para que empecéis a programar lo antes posible:

https://code.org/starwars

(Pulsad TRY NOW)


Manual de WordPress para los alumnos de Bachillerato

5 - octubre - 2016

Comparto con vosotros aquí un manual sobre WordPress que he escrito este curso académico para un taller de formación sobre blogs. Es muy interesante que le echéis un vistazo porque puede seros de ayuda a la hora de realizar algunas tareas concretas o resolver dudas.

Por otro lado, comparto también con vosotros un glosario de términos relacionados con la Web 2.0 y los blogs