Introducción a HTML
Parte I Creando y Editando una Página Web
¿Qué es un Network?
Grupo de Computadoras conectadas entre si y comparten recursos e información.
ISP - (Internet Service Provider), compañía que tiene una conexión permanente al internet.
WWW - (World Wide Web), parte del Internet que le da sostén al multimedia. Consiste de una colección de documentos entrelazados.
HTTP - (Hypertext Transfer Protocol), conjunto de reglas para intercambiar texto, gráficas, sonido y video (etc.).
Web Site - colección de páginas web relacionadas. Son creadas y mantenidas por un individuo, compañía, instituciones educativas u otras organizaciones.
Home Page - primer documento que el usuario ve cuando accedes el Web Site.
Web Server - páginas Web almacenadas en un Web Server o Host el cual es una computadora que almacena y envía peticiones.
Web Browser - programa que interpreta y muestra las páginas Web. Te permite ver e interactuar con la página Web.
Hypertext Markup Language - lenguaje escrito usado para crear documentos en el WWW.
Tags - conjunto de instrucciones que definen la estructura y diseño de un documento Web.

Elementos de una página Web

Título
Cuerpo
Texto normal
Encabezamiento
Párrafos
Imágenes
Bullets (viñetas)
Enlaces

Hay atributos que ya no funcionan en HTML5
<head> </head>
Contiene el encabezamiento de un documento HTML, el cual mantiene información acerca del documento, tal como el título.
<title> </title> le da un título a la página Web
<meta> da más información de la página Web
Ejemplos:
<head>
<title> Mi Página </title>
<meta name="author" content="Kervin Morales">
<meta name="description" content="mi página web">
<meta name="copyright" content="Copyright 2000 by Steve">

</head>

<body> </body>
Contiene atributos lo que nos permite hacerle cambios a la apariencia del tag.
Atributos
background - para colocar gráficos de fondo
bgcolor - cambiar el color de fondo
bottommargin - cambiar el margen inferior
leftmargin - cambiar margen izquierdo
marginwidth - da el ancho del margen izquierdo y derecho
rightmargin - cambiar el margen izquierdo
text - cambiar el color de texto de la página
topmargin - cambiar el margen superior
vlink - cambiar el color de los enlaces que han sido visitados en la página.
Ejemplo:

<body bgcolor="blue" text="white" topmargin="200">
 
   <h1>Hello World!</h1>

El código anterior cambia el fondo de la página a color azul y el texto a color blanco. (todo el texto será blanco a menos que se utilice el tag de <font> para cambiar el color en un lugar (posición) deseado. También puedes especificar colores utilizando valores. Los colores están expresados como rrggbb, donde rr, es el valor que quieres utilizar para el color rojo que van desde el 0 hasta 255 en base16, número de dos dígitos. gg especifica el color verde y bb especifica el color azul.
Colores

negro = #000000
blanco = #ffffff
azul = #0000ff
rojo = #ff0000
verde = #00ff00

<body bgcolor="#0000ff">

Tags para darle formato al texto
<h1> </h1> hasta <h6> </h6> crear encabezamiento (mientras más grande el número, más pequeño el texto)
<b> </b> texto en bold (negrilla)
<i> </i> texto en itálica
<tt> </tt> texto en itálica
<u> </u> texto en subrayado
<big> </big> texto grande
<hr> </hr> coloca una línea horizontal
<font> </font> especifica el tipo de letra
<p> </p> indica el comienzo de un párrafo
<ul> </ul> indica el inicio y fin de una lista desordenada
<ol> </ol> indica el inicio y fin de una lista ordenada
<li></li> crear un ítem de una lista
<br> break line
<hr> crear una línea horizontal
<center> centralizar
<marquee> muestra el elemento moviéndose de un lugar a otro
<img> añadirle una imagen a una página web

Atributos de algunos tags

<h1> hasta <h6>

align = especifica la alineación del texto en el encabezamiento (left, center, right o justify) algunos no funcionan con todos los browser (navegadores).
clear = evita que el texto fluya a través de otro elemento.

<h1 align=center> Texto utilizando h1</h1>
<h2 align=center> Texto utilizando h2</h2>
<h3 align=center> Texto utilizando h3</h3>
<h4 align=center> Texto utilizando h4</h4>
<h5 align=center> Texto utilizando h5</h5>
<h6 align=center> Texto utilizando h6</h6>

Texto utilizando h1

Texto utilizando h2

Texto utilizando h3

Texto utilizando h4

Texto utilizando h5

Texto utilizando h6

<br>

clear = se utiliza para mover imágenes o elementos pasados left (baja hasta encontrar que el margen izquierdo este libre), right (baja hasta encontrar que el margen derecho este libre), all (baja hasta encontrar que ambos márgenes estén libres), none (es un break normal, no hace falta escribirlo).

<br clear="left">
   <img src="pic.jpg">

<hr>

align = fija las reglas de alineación (left, center y center)
color = para darle color a la línea
size = fija el tamaño vertical de la línea (el número debe ser en pixel ej: size="100px")
width = fija el tamaño horizontal (ancho, ej: width="80%")
noshade = fija las reglas para la apariencia de dos dimensiones

<hr align="center" size="10" width="80%">

color - para cambiarle el color al texto
face - el tipo de texto puede ser una lista separadas por comas (Arial, Times New Roman, Verdana)
size - tamaño del texto (posibles valores: 1 - 7)
point-size - tamaño del text en puntos (1/72 de una pulgada)

<font size=6 color=blue face="Arial"> Texto utilizando el tag de font</font>

Texto utilizando el tag de font

<marquee></marquee>

align - fija la alineación del elemento (top, middle, o buttom
behavior = fija cómo el elemento se movera, scroll (se desplaza a través de la pantalla), slide (el elemento entra desde un lugar de la pantalla y se detiene al otro lado), alternate (el elemento parece rebotar en la pantalla)
bgcolor = le da un color de fondo a la caja del marquee
direction = fija la dirección del elemento, (left, right, down y up)
height = especifica el tamaño del marquee
loop = fija las veces que el marquee se moverá

<marquee align="top"loop="infinite" behavior="bounce" bgcolor="#00ff00" direction="right">
  <h2>Here's a marquee!</h2>
</marquee>

Here's a marquee!

<img>

align - fija la alineación del text o elemento que le sigue a la imagen, left, right, to, textop, middle, center, absmiddle, baseline, bottom y absbottom (depende del browser que se utilice)
alt - si no se ve la imagen debes dar una descripción de ella. Al colocar el puntero del ratón encima de la imagen aparecerá el texto.
border - fija bordes a través de la imagen
height - indica la altura de la imagen
width - indica el ancho de la imagen
hspace - fija el espacio horizontal alrededor de la imagen
vspace - fija el espacio vertical alrededor de la imagen
src - indica el URL (uniform resource locator) de la imagen (dónde se encuentra la imagen)
usemap - la imagen se utiliza como mapa de imágenes
ismap - indica que la imagen es utilizada como mapa de imágenes

<img src="zelda.jpg" width=85 height=129 alt="imagen de la princesa zelda" border=8>

<ol>

clear (usado para mover imágenes alineadas u otros elementos, right, left y all)
type especifica el tipo de lista 1, I, A, a

Clases Generales
<ol type="a">
  <li>Español</li>
  <li>Matemáticas</li>
  <li>Inglés</li>
  <li>Historia</li>
  <li>Ciencias</li>
</ol>

Clases Generales

Español
Matemáticas
Inglés
Historia
Ciencias

<ul>

clear (usado para mover imágenes alineadas u otros elementos, right, left y all)
type especifica el tipo de lista disc, square y circle

Clases Electivas
<ul type="disc">
  <li>Computadora</li>
  <li>Música</li>
  <li>Arte</li>
  <li>Educación Física</li>
</ul>

Clases Electivas

Computadora
Música
Arte
Educación Física

El que no haya colocado atributos para los tags arriba mencionados no quiere decir que no tengan, sino que no se usarán por el momento

Parte II. Tablas y Enlaces
Los enlaces se utilizan para poder movernos de una página a otra. Hay diferentes tipos de enlaces: enlaces a una página web, enlaces a secciones dentro de una página. Se puede utilizar tanto texto como imágenes para crear un enlace.
<a> </a> tag utilizado para crear enlaces

href - atributo donde escribes la dirección que el visitante visitará al hacer clic en el enlace (hay otros atributos pero todavía no los veremos)

<a href="http://www.kermo.wikispaces.com">Kermo</a>

Kermo

Las tablas se utilizan para organizar información en una página web.
<table> </table> indica el principio y fin de una tabla

<tr> </tr> indica el principio y fin de una fila
<th> <th> indica el principio y fin de una celda de encabezamiento
<td> <td> indica el principio y fin de una celda normal
<caption> </caption> indica el principio y fin de una leyenda

Atributos
<table> </table>

align - indica la alineación horizontal (left, right y center)
bgcolor - fija el color de fondo de la página
border - fija el ancho del los bordes de una página
cellpadding - fija el espacio entre las paredes de las celdas y el contenido de la celda
cellspacing - fija la distancia entre celdas
cols - fija el número de columnas en una tabla
height - fija la altura de la tabla
width - fija el ancho de la tabla
vspace - fija el relleno vertical para la tabla completa
hspace - fija el relleno horizontal para la tabla completa

<table border="2" width="50%" align="center">
  <tr>
     <th>Lunes</th>
     <th>Martes</th>
     <th>Miércoles</th>
     <th>Jueves</th>
     <th>Viernes</th>
  </tr>
  <tr>
     <td>1</td>
     <td>2</td>
     <td>3</td>
     <td>4</td>
     <td>5</td>
  </tr>
  <tr>
     <td>6</td>
     <td>7</td>
     <td>8</td>
     <td>9</td>
     <td>10</td>
  </tr>
  <tr>
     <td>11</td>
     <td>12</td>
     <td>13</td>
     <td>14</td>
     <td>15</td>
  </tr>
</table>

Lunes	Martes	Miércoles	Jueves	Viernes
1	2	3	4	5
6	7	8	9	10
11	12	13	14	15

Tablas utilizando colspan y rowspan

<html>
   <head>
      <title>tablas</title>
      <meta name="author" content="Kervin Morales">
   </head>
   <body>
      <table width="50%" border="3" align="center">
         <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
         </tr>
         <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
         </tr>
         <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
         </tr>
     </table>
   </body>
</html>

La tabla de arriba es normal, con sus filas (horizontales) y sus columnas (verticales). Ahora vamos a unir todas las celdas de la primera columna y hacerlas una sola celda. Para hacerlo necesitas añadir el atributo rowpan el cual te permite unir todas las filas de la primera columna en solo una celda dejando así la segunda columna normal.

<html>
   <head>
      <title>tablas</title>
      <meta name="author" content="Kervin Morales">
   </head>
   <body>
      <table width="50%" border="3" align="center">
         <tr>
              <td rowspan="3">&nbsp;</td>
              <td>&nbsp;</td>
         </tr>
         <tr>
              <td>&nbsp;</td>
         </tr>
         <tr>
              <td>&nbsp;</td>
         </tr>
     </table>
   </body>
</html>

Se le está aplicando el "rowspan" a la primera celda, dicha celda se convierte en una que toma el espacio de tres celdas verticalmente. En las filas siguientes solo se le añade un <td> solamente ya que la primera celda ocupa el lugar de las otras.
Screen Shot 2014-04-18 at 4.14.49 PM.png

Screen Shot 2014-04-18 at 4.14.49 PM.png

La figura arriba muestra una tabla con 4 columnas y 4 filas. La segunda y cuarta columna se unieron las celdas para formar una sola.
Pasos para crear la tabla (solo el código de <table> a </table>)
1. Contar las filas y las columnas
2. Contar cuántas celdas ocupa el rowspan o colspan
3.Comenzar a trabajar con la tabla
1 <table border="3" width="50%" align="center" >
2 <tr>
3 <td> </td>
4 <td rowspan="4">  </td> después de definir esta celda las de abajo no hay que definirlas
5 <td> </td>
6 <td rowspan="4"> </td> esta también, las próximas filas solo defines 2 celdas
7 <td> </td>
8 </tr>
9 <tr>
10 <td> </td> 2 celdas
11 <td> </td>
12 </tr>
13 <tr>
14 <td> </td> 2 celdas
15 <td> </td>
16 </tr>
17 <tr>
18 <td> </td> 2 celdas
19 <td> </td>
20 </tr>
21 </table>

<html>
   <head>
      <title>tablas</title>
      <meta name="author" content="Kervin Morales">
   </head>
   <body>
      <table width="50%" border="3" align="center">
         <tr>
              <td colspan="2">&nbsp;</td>
         </tr>
         <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
         </tr>
         <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
         </tr>
     </table>
   </body>
</html>

=

Screen Shot 2014-04-18 at 8.08.19 PM.png

En la figura de arriba se muestra una tabla con la primera fila unidas las dos celdas horizontalmente. Para unir las celdas horizontalmente hay que utilizar el atributo colspan. El número dependerá de cuantas celdas quieras unir.

Screen Shot 2014-04-18 at 5.46.18 PM.png

La figura arriba muestra una tabla con 4 columnas y 4 filas. Para poder crear la tabla debes escribir el siguiente código:
<table border="3" width="50%" align="center">
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

===========================================================================
Para el examen debes saber crear una tabla ya sea con rowspan, colspan o sin uniones de celdas
===========================================================================
Creando Frames en una página web
Los frames son utiles cuando quieres mostrar dos o más páginas a la vez. Es un área rectangular en la cual texto, videos o gráficas pueden aparecer. Las páginas se pueden mostrar horizontal o vertical, también se pueden mostrar ambas a la misma vez.
Tags para los Frames

Tags	Función
<frameset> </frameset>	define la estructura de los frames dentro de una pantalla. Se requiere cerrarlo.
<frame>	Define cada frame de las páginas que desee incluir
<noframe> </noframe>	texto que se mostrará si el browser (IE, Mozilla, Chrome, Safari, etc) no puede manejar frames

Seguimos con la misma estructura lo único que vamos a reemplazar el <body> </body> con el <frameset> </frameset>. Lo que quiero decir es que no escribimos el <body> en la página que definimos los frames.

<html>
     <head>
          <title>Trabajando con frames</title>
          <meta name="author" content="Kervin Morales">
          <meta name="description" content="Frame Example">
     </head>
     <frameset>
          en esta área se definen los frames
     </frameset>
</html>

creamosr 3 páginas: page1.html, page2.html y page3.html. Le cambiamos el color de fondo y le escribimos el número de página de cada una centralizado.

page1.html

page2.html

page3.html

Ya tenemos las tres páginas construidas, ahora lo que vamos hacer es crear una página con tres frames horizontales en la que utilicemos estas tres páginas. Pero antes vamos a ver los atributos para cada uno de los tags.
frame tag attrib.png

Ahora vamos a crear la página con los 3 frames horizontales (3 barras)

<html>
     <head>
          <title> 3 frames horizontales</title>
         <meta name="author" content="Kervin">
         <meta name="description" content="frames">
     </head>
     <frameset rows="33%,33%,34%">
          <frame src="page1.html" noresize>
          <frame src="page2.html" noresize>
          <frame src="page3.html"noresize>
     </frameset>
</html>

Definimos tres filas cada una de ellas con porciento la primera 33%, la segunda 33% y la tercera 34%, juntas las 3 hacen 100%. El porciento a cada una se le asigna dependiendo de lo que quieras, puede ser que una tenga 10% y las demás un poco más, pero la suma de todas debe ser 100%. Ahora como se verá el código anterior lo mostramos a continuación.

3row.html

Ahora vamos a hacer lo mismo (el mismo código) pero utilizando cols.

3cols code.png

3cols.html

En esta ocación voy a incluir filas y columnas.

rows and cols.png

Analizar:
Podemos ver que tenemos dos columnas, la primera columna dice "menu" o menú es español y la otra columna tiene dos filas. La primera columna es aprox 25% y la otra 75%. La columna que se divide en dos filas (75%) se puede decir que la primera fila tiene un 20% (no te preocupes por los porcientos en el examen que yo te los daré) y el porciento restante sería 80%.
apuntamos
cols="25%,75%"
rows="20%, 80%"
Tenemos un cols y un rows
y lo definimos de la siguiente forma:
<frameset cols=25%,75%">
<frame src="page1.html noresize>
<frameset rows="20%,80%">
<frame src="page2.html" noresize>
<frame src="page3.html" noresize>
</frameset>
</frameset>

Como se ve en el código el segundo <frameset> se define para la segunda columna y al final se pueden cerrar los <frameset>.

col y row.png

cols y rows.html

Ahora intenta codificar el siguiente ejercicio
Tiene 2 columnas y 2 filas, abre un <frameset> y defines las dos columnas y luego abre otro <frameset> y define las 2 filas.
práctica.png

*--------------------------------------------*