Diseño Web

miércoles, 18 de mayo de 2016

Estilos

También se puede combinar HTML con CSS para añadirle estilos a la página.

El atributo style te permite añadir una propiedad de CSS a cualquier etiqueta de tu página.
Se añadiría: style="propiedad:valor;"

Por ejemplo, si queremos cambiar el color de fondo a rojo, usaremos la propiedad de CSS background-color y le daremos el valor de red:

<body style="background-color:red">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem.
Nulla consequat massa quis enim.
</body>

lunes, 16 de mayo de 2016

Enlaces e Imágenes

Enlaces

Como ya sabemos usar los formatos de texto para darle estilo a nuestros textos, ahora aprenderemos a añadir enlaces.

Los enlaces se añaden con la etiqueta <a> y la propiedad href dentro de ella. He aquí un ejemplo:

<body>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec quam felis, ultricies nec,
<a href="http://www.google.com">Google</a>
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat

</body>

Imágenes

Otra forma de añadir contenido a tu página es mediante imágenes.

Para añadir imágenes, se usa la etiqueta <img>. En este caso, la etiqueta img tiene etiquetas para definir la dirección de la imagen, el tamaño... En vez de cerrarlo con </img> lo cerraremos con />.
Ejemplo:

<body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. 
<img src="url de la imagen" width="anchura" height="altura"/>
</body>

Encabezados y Párrafos

Encabezados

Los encabezados en HTML son una etiqueta para añadir un título en el cuerpo de tu documento. El título de arriba, "Encabezados", es un ejemplo de encabezado.

Los encabezados se escriben con las etiquetas <h1> a <h6>, siendo el número de mayor a menor tamaño de letra.

Párrafos

A parte de los saltos de línea ( ), están los párrafos. Para crear párrafos se usa la etiqueta .

<body>
Este es el párrafo número uno.
Este es el párrafo número dos.
</body>

miércoles, 11 de mayo de 2016

Formatos de Texto

En el anterior post, vimos cómo crear una página web y escribir en su interior. Pero hoy entraremos en profundidad con el texto y, aprenderemos a usar las etiquetas para cambiar su formato.

Etiquetas	Descripción
<b>	Define un texto en negrita
<big>	Define un texto grande
<em>	Define un texto enfatizado
<i>	Define un texto en itálica
<small>	Define un texto pequeño
<strong>	Define un texto fuerte
<sub>	Define un texto subíndice
<sup>	Define un texto superíndice
<ins>	Define un texto subrayado
<del>	Define un texto tachado
<tt>	Define un texto de teletipo
<s>	Define un texto tachado.
<strike>	Define un texto tachado.
<u>	Define un texto subrayado.

<html>

<head>

<title>Formato de Texto</title>

</head>

<body>

Texto en negrita

<big>Texto grande</big>

Texto enfatizado

Texto en itálica

Texto pequeño

Texto "fuerte"

Texto subíndice

Texto superíndice

<ins>Texto subrayado</ins>

<del>Texto tachado con del</del>

<s>Texto tachado con s</s>

<strike>Texto tachado con strike</strike>

<tt>Texto de teletipo</tt>

Texto subrayado

</body>
</html>

lunes, 9 de mayo de 2016

Empieza a programar en HTML

HTML es un lenguaje basado en etiquetas.

Muchas de ellas las puedes encontrar en esta tabla:

También es recomendable aprender a usar CSS (que complementaría al HTML en la web y le daría estilo, color, posiciones... a tu página). Para empezar a crear tu primera página web abriremos un bloc de notas:

Para "empezar" el documento HTML, usaremos la etiqueta <html> (</html> para cerrar).
La segunda etiqueta necesaria es <head>, se hace dentro de la etiqueta <html> (como todas) y en ella va el título, estilos, scripts...
Si queremos añadir un título a la página usaremos <title> dentro del <head>:
Después del <head>, añadiremos la etiqueta <body>. Dentro de ella irá el contenido que se mostrará al usuario.
Si queremos añadir algo de texto, solo hay que escribir en el <body> y ya estará.

Si guardamos el archivo como nombrequequieras.html, quedaría algo así:

Como se ejecutaría la página

<html>

<head>

<title>

Mi primera página

</title>

</head>

<body>

Hola mundo

</body>

</html>