HTML

__ Introducción a HTML __ __//**Parte I Creando y Editando una Página Web**//__ 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.
 * ¿Qué es un Network? **


 * Elementos de una página Web **
 * 1) Título
 * 2) Cuerpo
 * 3) Texto normal
 * 4) Encabezamiento
 * 5) Párrafos
 * 6) Imágenes
 * 7) Bullets (viñetas)
 * 8) Enlaces



**Hay atributos que ya no funcionan en HTML5** ** **  Contiene el encabezamiento de un documento HTML, el cual mantiene información acerca del documento, tal como el título. le da un título a la página Web da más información de la página Web Ejemplos: Mi Página   

** **  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:

code format="html4strict" 

Hello World! code

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 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

code format="html4strict"  code
 * negro = #000000
 * blanco = #ffffff
 * azul = #0000ff
 * rojo = #ff0000
 * verde = #00ff00

** Tags para darle formato al texto ** ** ** hasta  crear encabezamiento (mientras más grande el número, más pequeño el texto) ** ** texto en bold (negrilla) ** ** texto en itálica ** ** texto en itálica ** ** texto en subrayado ** ** texto grande ** ** coloca una línea horizontal ** ** especifica el tipo de letra ** ** indica el comienzo de un párrafo ** ** indica el inicio y fin de una lista desordenada ** ** indica el inicio y fin de una lista ordenada **** crear un ítem de una lista ** ** break line ** ** crear una línea horizontal ** ** centralizar ** ** muestra el elemento moviéndose de un lugar a otro ** ** añadirle una imagen a una página web

Atributos de algunos tags

hasta

code format="html4strict" Texto utilizando h1 Texto utilizando h2  Texto utilizando h3  Texto utilizando h4  Texto utilizando h5  Texto utilizando 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.

code

media type="custom" key="25004764" code format="html4strict"  code code format="html4strict"  code code format="html4strict" <font size=6 color=blue face="Arial"> Texto utilizando el tag de font code media type="custom" key="25008344"
 * 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).
 * 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
 * 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)

code format="html4strict" <marquee align="top"loop="infinite" behavior="bounce" bgcolor="#00ff00" direction="right"> Here's a marquee! code media type="custom" key="25004634"
 * 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á

code format="html4strict" <img src="zelda.jpg" width=85 height=129 alt="imagen de la princesa zelda" border=8> code  code format="html4strict" Clases Generales Español</li> Matemáticas</li> Inglés</li> Historia</li> Ciencias</li> </ol> code media type="custom" key="25004502"
 * 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
 * clear (usado para mover imágenes alineadas u otros elementos, right, left y all)
 * type especifica el tipo de lista 1, I, A, a

 code format="html4strict" Clases Electivas Computadora</li> Música</li> Arte</li> Educación Física</li> </ul> code media type="custom" key="25004610"
 * clear (usado para mover imágenes alineadas u otros elementos, right, left y all)
 * type especifica el tipo de lista disc, square y circle

**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**

media type="custom" key="25004180" __//** 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

code format="html4strict" <a href="http://www.kermo.wikispaces.com">Kermo</a> code media type="custom" key="25007968"
 * 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)

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

Atributos
 * indica el principio y fin de una fila
 * indica el principio y fin de una celda de encabezamiento
 * indica el principio y fin de una celda normal
 * indica el principio y fin de una leyenda
 * 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

code format="html4strict" code

media type="custom" key="25669754" Tablas utilizando colspan y rowspan code tablas <meta name="author" content="Kervin Morales"> code media type="custom" key="25670054"

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.

code format="html4strict" tablas <meta name="author" content="Kervin Morales"> code media type="custom" key="25670298" 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 solamente ya que la primera celda ocupa el lugar de las otras. 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 ) 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

code format="html4strict" tablas <meta name="author" content="Kervin Morales"> code ===

= 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. = La figura arriba muestra una tabla con 4 columnas y 4 filas. Para poder crear la tabla debes escribir el siguiente código:

=========================================================================== Para el examen debes saber crear una tabla ya sea con rowspan, colspan o sin uniones de celdas =========================================================================== __<span style="font-family: 'Arial Black',Gadget,sans-serif; font-size: 160%;">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 ||< define la estructura de los frames dentro de una pantalla. Se requiere cerrarlo. || || texto que se mostrará si el browser (IE, Mozilla, Chrome, Safari, etc) no puede manejar frames ||
 * ~ ** Tags ** ||~ ** Función ** ||
 * < ||< Define cada frame de las páginas que desee incluir ||

Seguimos con la misma estructura lo único que vamos a reemplazar el con el. Lo que quiero decir es que no escribimos el en la página que definimos los frames. code format="html4strict" Trabajando con frames <meta name="author" content="Kervin Morales"> <meta name="description" content="Frame Example"> en esta área se definen los frames code

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.













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.

Ahora vamos a crear la página con los 3 frames horizontales (3 barras) code format="html4strict" 3 frames horizontales <meta name="author" content="Kervin"> <meta name="description" content="frames"> <frameset rows="33%,33%,34%"> <frame src="page1.html" noresize> <frame src="page2.html" noresize> <frame src="page3.html"noresize> code 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.





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





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



**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>

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





Ahora intenta codificar el siguiente ejercicio Tiene 2 columnas y 2 filas, abre un y defines las dos columnas y luego abre otro y define las 2 filas.

**