Ejercicios HTML

viernes, 30 de mayo de 2014

Cajas html

Caja roja
Caja amarilla
Caja verde

viernes, 23 de mayo de 2014

lunes, 19 de mayo de 2014

viernes, 9 de mayo de 2014

Apuntes HTML :)


TEMA 8: HTML

Lenguaje con el que se escriben las páginas web.
Los navegadores web son los encargados de interpretar ese lenguaje.

La información se organiza usando etiquetas. Todos los elementos deben estar contenidos en una etiqueta de apertura y otra de cierre.

<etiqueta para abrir>elemento</etiqueta de cierre>

Estructura de una página web:

<html>
<head>
</head>
<body>
</body>
</html>


<br> esta etiqueta hace un cambio de linea.
<hr> esta etiqueta muestra una linea divisoria.

Etiquetas de texto:

<p> sirve para identificar un párrafo.
<h1> </h1> Texto a tamaño grande.
<h2> </h2> Texto un poco menos que h1
<h6> </h6> Texto más pequeño.

<em> … </em> muestra el texto en cursiva
<u> … </u> muestra el texto subrayado
<strong> … </strong> muestra el texto en negrita

Hiperenlaces:
<a href=”direccion web”> texto de enlace </a>

Listas desordenadas:
  • Opción 1
  • Opción 2
  • Opción 3
<ul>
<li> opción 1 </li>
<li> opción 2 </li>
<li> opción 3 </li>
</ul>

La forma de las viñetas se puede modificar añadiendo la opción type=circle, square o disc. Dentro de la etiqueta ul.


Listas ordenadas:

Para generar listas ordenadas, tan solo cambiamos la etiqueta <ul> por <ol> y las posibles modificaciones son type=i , a


Tablas

Para mostrar una tabla se deben usar tres etiquetas: <table> para generar la tabla, <tr> para iniciar la fila y <td> para iniciar columna.

<table border=1>
<tr>
<td> uno </td>
<td> dos </td>
</tr>
<tr>
<td> tres </td>
<td> cuatro </td>
</tr>
</table>

Imagenes 

<img src= "...">  

Hojas de estilo
Las hojas de estilo se usan para indicarle al navegador la estética de la página.
Habitualmente se suele trabajar con un archivo paralelo al html pero nosotros incluiremos al código dentro del archivo HTM. 

<html>
<head>
<style type="text/css">
     ...(propiedades: colocamos un identificador y editamos sus   propiedades Ej. #tabla1{ ancho,alto..)... 

 </style>
 </head>
<body>
....texto....


Las etiquetas son los identificadores que le dicen al navegador que elemento html queremos cambiar. Hay tres tipos básicos de etiquetas:

1. Selector de etiqueta html (body, table, h1, hr...)

2.Clases: es necesario incluir la definición de clase en el código html <h1 class="nombredeclase">

de referencia como: 
·nombredeclase

3.Identificadores: de forma similar a las clases
<h1 id="nombredeidentif.">
#nombre-->css

Propiedades::

background-color: modifica el color de fondo
- valores:
       1. Nombre en inglés
       2. #_ _ _ _ _ _ (6 caracteres combinando numeros y letras)
font-family: tipo de letra ("Verdana", "Arial"...) 
font-size: tamaño de la letra ( Nºpx; )


Cajas: 

<div id="nombrecaja">
<h2> Texto de la caja </h2>

</div>


Propiedades que afectan a la caja: 

-border
-background
-width: ancho
-height: alto
-position: 
    1. Absolute:
    
    2. Relative: