usecad 2008. html, siglas de hypertext markup language (lenguaje de marcas de hipertexto), es el...
TRANSCRIPT
USECAD 2008
HTML, siglas de HyperText Markup Language (Lenguaje de Marcas de Hipertexto), es el lenguaje de marcado predominante para la construcción de páginas web.
Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes.
HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.
Servidor en específico: Entraremos por ssh a:
132.248.54.122Con el usuario: pmineriaClave: *******
El servidor ya debe de tener instalado apache y alojaremos las páginas en htdocs.
http://132.248.54.122/~pmineria/htdocs/PAGINAS/COORDINADOR/AHPM_Bienvenida.php
Easy php: Descargaremos e instalaremos el software de easyphp. Easy php nos configura un servidor apache local y también Mysql. Alojaremos las paginas en la carpeta www, que se localiza en:
Mi PC --- Unidad C--Archivos de Programa -- Easy PHP -- WWW.Para ejecutar las páginas Iniciaremos Easy Php, y entraremos a Web Local.
PROGRAMAS EN LOS QUE SE PUEDE HACER CODIGO HTML
BLOCK DE NOTAS
PHP CODER
DREAMWEAVER
<html> </html> Para indicarle al browser que es código HTML el que viene descrito a continuación, se limita todo el código por estos dos parámetros. Dentro de ellos se escribe el código de la página
<title> </title> Entre estos dos comandos va escrito el título de la página, este va en la parte superior de la ventana que despliega el browser.
<body bgcolor=# text=# link=# vlink=# alink=# background=""> </body> Entre estos parámetros se escribe todo el texto de la página, el cuerpo del documento (BODY).
bgcolor=# color del fondo de la página, este color puede ser cambiado por un fondo, (background)
text=# es el color del texto general de la página
link=# color del texto con link
vlink=# color del texto de link visitado
alink=# color del texto de link activo
background="" en este comando se puede detallar un fondo específico para la página, un archivo de imagen.
Los colores se definen en formato RGB, se puede ver ejemplos de los colores con sus códigos en al siguiente página COLORES. Estos colores consisten de seis dígitos, o letras desde la A hasta la F.
<br> Este comando sirve para insertar un salto de línea dentro de la página.
<p> Sirve para ingresar un salto de párrafo dentro del contenido
<h!!> </h!!> Especifica el tipo de título con un número del 1 al 6 en vez de !!, especificando la importancia del título.
<font face="Arial,Helvetica" color=# size=%% > </font> Sirve para especificar las fuente del texto que va entre estos dos parámetros.
face="Arial,Helvetica" Especifica el tipo de letra a utilizar.
color=# Especifica el color del texto a utilizar, descrito en anterioridad Los colores se definen en formato RGB, se puede ver ejemplos de los colores con sus códigos en al siguiente página COLORES. Estos colores consisten de seis dígitos, o letras desde la A hasta la F.
http://www2.ing.puc.cl/~iic10621/clases/HTML/colores/index.html
size=%% Detalla el tamaño de la letra elegido, número entre el -6 y el +6, en vez de %%.
Ejemplo de Font Arial, Helvetica y color #000000
<b> </b> El texto que va entre estos dos parámetros se encuentra en BOLD, o Negritas. Ejemplo de Bold
<i> </i> El texto que va entre estos dos comandos se encuentra en Itálicas. Ejemplo de Itálicas
<u> </u> El texto que va entre estos dos parámetros está subrayado. Ejemplo de Subrayado
<img src="$$" > Este comando inserta imágenes dentro de las páginas web, tiene
que esta especificado el directorio en el caso que no se encuentre la imagen en el mismo directorio que la página.
<img src="$$" align=" " > Detalla el alineamiento que tendría la imagen (derecho=right, izquierdo=left y centrado=center)
<a href="$$"> </a> Sirve para realizar direccionamiento a nuevas páginas webs, LINKS. Puede ser un texto o una imagen. En vez de $$, se puede colocar la dirección a donde va a apuntar, http://www.ing.puc.cl o puede ser colores.htm, también puede ser reemplazada por mailto:[email protected] y así aparecerá una ventana de mail a [email protected] al apretar el texto o imágenes que se encuentren dentro de estos parámetros.
ñ Con este comando se escriben la ñ.
Se utiliza para ingresar espacios dentro del texto, para ingresar más de un espacio en la página.
Tabulaciones <ul> </ul>
Necesarios para tabular alguna sección de la página, desde textos, imágenes y tablas.
<li> </li>Ayuda a ingresar viñetas dentro del texto.
· Ejemplo de Viñeta
<ol><li> </li><li> </li>...</ol> Este comando inserta viñetas con números, estos son contiguos. 1. Ejemplo de Viñeta Numerada
<center> </center>Centra un objeto, texto, imagen, tabla, etc.
<p align="left">izquierda</p> Deja el texto a la izquierda de la página
<p align="right">derecha </p>Deja el texto a la derecha de la página
<table> <tr colspan="N"> <td rowspan="N"> </table> Comandos para definir una tabla,
<tr></tr> Se utiliza para definir una fila.
<td> </td>Define una columna de la tabla Ej de una tabla de de 2 por 3, dos columnas por tres filas
<table border=1> <tr> <td> 1</td> <td>2</td> <td>3 </td> </tr> <tr> <td> 4</td> <td> 5</td> <td> 6 </td> </tr></table>
Para para generar una celda de varias filas o columnas, se logra poniendo un número en la posición de "N", siendo este desde 2 en adelante, el uno no tiene sentido, porque se coloca el comando <tr>.
Los marcos en HTML se usan para mostrar información múltiple en una sola ventana del navegador, y son independientes uno del otro.
Una caracteristica muy importante de una página con marcos es que, la etiqueta <body> es sustituida por la etiqueta <frameset>.
<html> <head> <title>Página con marcos</title> </head> <frameset cols="20%, 80%"> <frame name="menu" src="menu.html"> <frame name="contenido"
src="contenido.html"> </frameset> </html>
Tablas simples
Una tabla HTML puede ser considerada de manera simple como un grupo de filas donde cada una de ellas contiene un grupo de celdas.
Las tablas, así como toda estructura en documentos HTML, son definidas usando tags.
Una tabla simple puede ser insertada en un documento HTML usando tres tags: el tag HTML table (principal contenedor), el tag HTML tr (fila contenedora) y el tag HTML td (celda simple).
Tipos de celdas
Dos tipos de celda pueden ser definidos en una tabla HTML. Una de ellas es la celda simple (tag HTML td) anteriormente utilizada en el ejemplo de "tabla simple", y la otra es un tipo de celda especial (tag HTML th) que contiene información de encabezado para todas las celdas en la columna (pertenecientes al mismo grupo horizontal).
Los navegadores pueden graficar el contenido de las celdas de encabezado en una manera especial (usualmente, texto centrado y en negrita). Este tipo de celda es comúnmente encontrado en el encabezado de una tabla.
Unificando celdas
Para algunas tablas puedes necesitar unificar dos o más celdas en una sola que tomará el lugar de aquellas afectadas.
Estas unificaciones pueden lograrse mediante los atributos "rowspan" (para unificar verticalmente) y "colspan" (para unificar horizontalmente), ambos disponibles para celdas (tag HTML td y tag HTML th).
Dimensionado tablas
El tamaño de una tabla en HTML (lenguaje de marcas hipertextual) puede establecerse usando los atributos "width" y "height". Estos atributos pueden ser definidos en varias partes de la tabla: celdas (tag HTML th y tag HTML td), columnas (tag HTML col), grupos de columnas (tag HTML colgroup), filas (tag HTML tr) y la tabla misma (tag HTML table).
Es recomendable definir estos atributos solo en columnas y filas (cuando sea posible) para evitar interpretaciones ambiguas. De todos modos, el tamaño de una tabla es usualmente no solo decidido por los valores de dichos atributos sino también basados en el espacio disponible para dibujarla.
En algunos casos, los navegadores pueden suprimir los atributos dimensionales para hacer que una tabla quepa en la pantalla.
<IMG>
Antes de describir en detalle la marca principal de inserción de imágenes en los hipertextos, es conveniente precisar algunos conceptos de HTML. A diferencia de muchos procesadores de texto (Ms Word, por ejemplo), los hipertextos no se "funden" con las imágenes que les sirven de acompañamiento gráfico, sino que se limitan a invocarlas desde un recorrido específico o sitio en el web.
Dicho de otro modo, existe una división muy clara entre archivo .htm e imágenes (y también sonidos, apliques, etc.). Los documentos HTML se limitan a prever dentro de ellos un espacio en el que se insertan las imágenes solicitadas.
La marca <IMG> no necesita cierre y su sintaxis correcta es:
<IMG SRC="immagine.gif">
donce SRC corresponde al inglés Search y es el recorrido del que el navegador saca la imagen (en este caso "immagine.gif"). Como hemos señalado, esta marca es única en el sentido de que NO lleva como cierre el correspondiente </IMG>.
Los navegadores (Netscape, MsIe, Opera etc.) reconocen numerosos formatos gráficos, aunque los más utilizados son dos: GIF (Graphics Interchange Format) y JPEG (Joint Photographics Experts Group). En los últimos meses, asistimos a la difusión a nivel internacional de otro formato: PNG (Portable Network Graphics).
El elemento <IMG> va acompañado de diversos atributos que facilitan su uso. Veamos ahora juntos cuáles son.
Para definir un enlace es necesario marcar con la directiva <a> el objeto del cual va a partir dicho enlace.
Dicha directiva debe incluir el parámetro href="URL" para especificar el destino del enlace. Es decir, que antes del objeto elegido debemos abrir con <a href="URL">, y después cerrar con </a>.
Por ejemplo, si queremos que el texto pulse aquí para visitar la NASA nos conduzca a la home page de la NASA, debemos escribir en nuestro texto HTML:
<a href="http://www.nasa.gov/">Pulse aquí para visitar a la NASA</a>
Es decir, que si desde cierto documento queremos enlazar con otro que se encuentra en el mismo subdirectorio, basta con poner su nombre:
<a href="el_otro_fichero">pulse aquí</a>.
O si se encuentra en otro subdirectorio del mismo servidor, es suficiente con poner
<a href="/la/ruta/que/sea/fichero.html">pulse aquí</a>.
También pueden utilizarse rutas relativas: <a href="ruta/relativa/cosa.html">cosa</a>.
Un formulario HTML es una sección de un documento que contiene contenido normal, código, elementos especiales llamados controles (casillas de verificación (checkboxes), radiobotones (radio buttons), menúes, etc.), y rótulos (labels) en esos controles.
Los usuarios normalmente "completan" un formulario modificando sus controles (introduciendo texto, seleccionando objetos de un menú, etc.), antes de enviar el formulario a un agente para que lo procese (p.ej., a un servidor web, a un servidor de correo, etc.)
Controles Los usuarios interaccionan con los
formularios a través de los llamados controles. El "nombre de control" de un control viene dado por su atributo name. El "campo de acción" o alcance del atributo name de un control contenido en un elemento FORM es el elemento FORM.
Cada control tiene tanto un valor inicial como un valor actual, que son ambos cadenas de caracteres.