ESTILOS PARA 1er PARCIAL -

Cabe mencionar que estos estilos todavía los estamos manejando dentro de los tags con la instrucción style por ejemplo un estilo para los parrafos se puede hacer con: <p style=”estilo”></p> es muy importante que se utilicen las “comillas” adecuadas para que no marque error por ejemplo si ya estamos dentro de un estilo y necesitamos poner comillas se utiliza el caracter ‘ ‘ porque el dreamwaver coloca automáticamente las comillas regulares y esto va a causar error en su despliegue.

IMAGEN DE FONDO.

1ro. Pone una imágen de fondo. con el estilo background-image.
2ro. El estilo background-repeat:repeat-x hace que la imágen se repita en lo horizontal;
3ro. El estilo background-attachment:fixed; indica que la imagen se quede fija no importando lo largo del scroll de la página.
4to. El estilo background-size: cover; indica que la imágen crezca para llenar el espacio del contenedor en este caso el body de nuestra página.

				
					<body style="background-image: url('images/bkgnd1.jpg');background-repeat:repeat-x;background-attachment:fixed; background-size: auto; background-size: cover;">
	
</body>

COLOR DE FONDO.

1ro. Pone un color de fondo. con el estilo background-color. el no. hexadecimal #ff9600 es el color naranja de INSPRA o el hexadecimal #908476 es el color Oro de la tipografía del logo de INSPRA

				
					<body style="background-color: #ff9600;">
	
</body>

COLOR DE FONDO DEGRADADO.

1ro. Pone un color de fondo. con el estilo background:linear-gradient(to direction, COLOR1, COLOR2);.
To direction indica de donde a donde va el degradado, por ejemplo to right, indica que va de izquierda a derecha, to left al contrario.
to bottom va de arriba para abajo y to top va de abajo para arriba.
El no. hexadecimal #ff9600 es el color naranja de INSPRA o el hexadecimal #908476 es el color Oro de la tipografía del logo de INSPRA.

				
					<body style="background: linear-gradient(to right, #ff9600, white);">
</body>

Utilizando web fonts.

Para utilizar web fonts, es necesario invocar los archivos de las fuentes a su documento HTML.
Para ello se utiliza el tag <link> y se construye con el tag más la referencia (dirección URL) donde se encuentra el archivo a vincular a nuestro HTML
<link href=”http://db.onlinewebfonts.com/c/5eedf6dd85c03d3b66892597b06a9492?family=Agenda” rel=”stylesheet” type=”text/css”/>

En este caso la primera parte es la ruta o URL al archivo de la fuente AGENDA. junto con esa ruta indicamos el nombre de la familia para que podamos mandarla llamar más adelante en este caso nuestra family se llama Agenda y se declara al final del URL después de un signo de interrogación url…?family=Agenda
Las istrucciones rel=”stylesheet” y type=”text/css” se refieren al tipo de documento a vincular y en este caso tienen que ver con nuestros estilos. y se ciera el tag con >

Posteriormente se invoca a la fuente con el estilo font-family

<h1 style=”font-family: ‘Agenda’, sans-serif; font-size: 40px;”>Dosis y Administración</h1>

El documento puede tener varias fuentes y se controlan de la misma manera.

<link href=”http://db.onlinewebfonts.com/c/d979624d1cb77d6523f9b3adc2bcef31?family=RotisSansSerif” rel=”stylesheet” type=”text/css”/>

<h2 style=”font-family: ‘RotisSansSerif’, sans-serif; font-size: 40px;”>Dosis y Administración</h2>

				
					<!doctype html>
<html>
<head>
<link href="http://db.onlinewebfonts.com/c/5eedf6dd85c03d3b66892597b06a9492?family=Agenda" rel="stylesheet" type="text/css"/><br>
<link href="http://db.onlinewebfonts.com/c/d979624d1cb77d6523f9b3adc2bcef31?family=RotisSansSerif" rel="stylesheet" type="text/css"/>	
<meta charset="UTF-8">
<title>Estilos para 1er. Parcial</title>
</head>

<body style="background: linear-gradient(to right, #ff9600, white);">
	
<h1 style="font-family: 'Agenda', sans-serif; font-size: 40px;">Dosis y Administración</h1>
<h2 style="font-family: 'RotisSansSerif', sans-serif; font-size: 40px;">Dosis y Administración</h2>
	
</body>
	
</html>

Menú fijo en la pantalla hecho con tabla.
Podemos crear nuestra barra de navegación con una tabla y agregarle los siguientes estilos.
Además de las dimensiones y los atributos de la linea el estilo position:fixed; nos indica que el elemento no va a ser afectado por el scroll de la página.
Aunado a ello podemos posicionar la tabla con los estilos top y left que indican a que distancia en pixeles ubicaremos el elemento a partir de la parte superior del navegador con top=0px; indicamos que va a estar hasta arriba y con la opción left:0px; indicamos que se alineará al extremo izquierdo de la página.
<table width=”800″ border=”0″ cellspacing=”0″ style=”position: fixed;top:0px; left:0px;”>

El resto de la tabla se construye normalmente…

<table width=”800″ border=”0″ cellspacing=”0″ style=”position: fixed;top:0px; left:0px;”>

<tbody>
<tr>
<td>BOTON1</td>
<td>BOTON2</td>
<td>BOTON3</td>
<td>BOTON4</td>
<td>BOTON5</td>

</tr>
</tbody>
</table>

				
					<table width="800" border="0" cellspacing="0" style="position: fixed;top:0px; left:0px;">

<tbody>
<tr>
       <td style="background-color: #908476; color:white; padding:10px 10px 10px 10px;">BOTON1</td>
       <td style="background-color: #908476; color:white; padding:10px 10px 10px 10px;">BOTON2</td>
       <td style="background-color: #908476; color:white; padding:10px 10px 10px 10px;">BOTON3</td>
       <td style="background-color: #908476; color:white; padding:10px 10px 10px 10px;">BOTON4</td>
       <td style="background-color: #908476; color:white; padding:10px 10px 10px 10px;">BOTON5</td>

</tr>
</tbody>
</table>

Posición de los elementos.

Para determinar la posicionde de una tabla por ejemplo. Podemos indicar dentro del style el estilo position: absolute; para indicar que la posición se basa respecto a toda la página y podemos indicar la distancia en pixeles a partir de la parte superior y de la izquierda por ejemplo: top:200px; left:50px; en el caso de los demás elementos que ubiquemos dentro de nuestra composición.
Arriba indicamos el menú superior que queda fijo en la parte superior.
Si insertamos una nueva tabla aparecerá debajo de la tabla fija y es necesario indicar que inicie en una posición que no sea tapada por el menú superior.

Botones dentro de la barra de navegación.

Los botones se definen con la tag <button></button> por ejemplo el botón: Este es un botón se crea.
<button>Este es un botón</button>

A los botones se les pueden agregar estilos como por ejemplo
<button style=”display:block, padding:10px 10px 10px 10px; background-color:orange; color:white;”>Este es un botón</button>

				
					 <button>Este es un botón</button>

				
					<button style="display:block, padding:10px 10px 10px 10px; background-color:orange; color:white;">Este es un botón</button>

Ejemplo de hipervínculo a secciones dentro de la misma página

Todos los tags pueden tener un identificador único por ejemplo un parrafo puede ser identificado de la siguiente manera:

<p id=”seccion1″>Texto del parrafo</p>

Para ese identificador se le pueden aplicar estilos específicos o también hacer hipervínculos dentro de una sección de la misma página.

Con el tag <a href=”url”></a>

En este caso para hacer el vínculo interno se sustituye el url con el nombre del identificador ID. antecedido por un hashtag.

<a href=”#seccion1″><img src=”cartel2.png” id=”seccion1″>Este link me manda hasta abajo</a>

En este ejemplo el link va a la sección seccion1

				
					<body>
<p id="seccion0"></p>
<a href="#seccion1">Este link me manda hasta abajo</a><br>
<a href="http://www.youtube.com">Este link me manda a la pagina de youtube</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>	
<p id="seccion1"></p>
<a href="#seccion0">Este link me manda hasta arriba</a>		
</body>

Menú LATERAL fijo en la pantalla hecho con tabla.
Podemos crear nuestra barra de navegación con una tabla y agregarle los siguientes estilos.
Además de las dimensiones y los atributos de la linea el estilo position:fixed; nos indica que el elemento no va a ser afectado por el scroll de la página.
Aunado a ello podemos posicionar la tabla con los estilos top y left que indican a que distancia en pixeles ubicaremos el elemento a partir de la parte superior del navegador con top=0px; indicamos que va a estar hasta arriba y con la opción left:0px; indicamos que se alineará al extremo izquierdo de la página.
<table width=”300″ border=”0″ cellspacing=”0″ style=”position: fixed;top:0px; left:0px;”>

El resto de la tabla se construye normalmente…

<table width=”300″ border=”0″ cellspacing=”0″ cellpadding=”0″ style=”position: absolute;top:0px;left:0px;”>
<tbody>
<tr>
<th scope=”col”><img src=”images/logo_inspra1.png”></th>
</tr>
<tr>
<td style=”background-color: #ff9600; color:white;padding:10px 10px 10px 10px;”>BOTON 1</td>
</tr>
<tr>
<td style=”background-color: #ff9600; color:white;padding:10px 10px 10px 10px;”>BOTON 2</td>
</tr>
<tr>
<td style=”background-color: #ff9600; color:white;padding:10px 10px 10px 10px;”>BOTON 3</td>
</tr>
<tr>
<td style=”background-color: #ff9600; color:white;padding:10px 10px 10px 10px;”>BOTON 4</td></tr>
<tr>
<td style=”background-color: #ff9600; color:white;padding:10px 10px 10px 10px;”>BOTON 5</td>
</tr><tr>
<td style=”background-color: #FF9600; height:1000px;”> </td>
</tr>
</tbody>
</table>

				
					<table width="300" border="0" cellspacing="0" cellpadding="0" style="position: fixed;top:0px;left:0px;">
  <tbody>
    <tr>
      <th scope="col"><img decoding="async" src="images/logo_inspra1.png"></th>
    </tr>
    <tr>
      <td style="background-color: #ff9600; color:white;padding:10px 10px 10px 10px;">BOTON 1</td>
    </tr>
    <tr>
      <td style="background-color: #ff9600; color:white;padding:10px 10px 10px 10px;">BOTON 2</td>
    </tr>
    <tr>
      <td style="background-color: #ff9600; color:white;padding:10px 10px 10px 10px;">BOTON 3</td>
    </tr>
    <tr>
      <td style="background-color: #ff9600; color:white;padding:10px 10px 10px 10px;">BOTON 4</td>
    </tr>
    <tr>
      <td style="background-color: #ff9600; color:white;padding:10px 10px 10px 10px;">BOTON 5</td>
    </tr>
    <tr>
      <td style="background-color: #FF9600; height:1000px;">&nbsp;</td>
    </tr>
  </tbody>
</table>