Formateo:

HTMLProf. Mara Teresa JimnezTips:

La mayora de las instrucciones tiene un tag para comenzar y otro para terminar.

Formato general:

contenido afectado por el tag

Cada elemento estructural de HTML debe ponerse en una lnea aparte y sangrar para mostrar como est anidado.

Cada elemento para controlar apariencia se inserta en la lnea que afecta. Ej. para bold. Evite dividir un URL en 2 lneas. Recuerde que cada browser interpreta las instrucciones de HTML a su manera. Por lo tanto el nfasis debe ser primero que nada en el contenido y tratar dentro de eso que se presente de forma atractiva. Los atributos son muchas veces opcionales, si no se utilizan se presume un valor. Si se tiene tags anidados, hay que terminar primero el reciente. Ej : cuerpo informe mas texto esto en bold Comentarios:Skeletal Tags:1. Documento en html documento en html atributo: Version le dice al browser que esto es un archivo de html v5.0: manifest - para indicar que esa pgina va a ser cached para acceso fuera de lnea2. Cabeza del documento informacin general sobre el documento No tiene atributos. Puede contener varios otros tags:, , , , , , Elementos que se ponen dentro del tag - define un URL default para todo elemento que requiere un URL - usado mayormente para enlazar style sheets - datos sobre los datos: descripcin de la pgina, autor y keywords - para definir un client-side script - definir estilos de elementos de la pgina - ttulo de la pgina3. Cuerpo del documento cuerpo del documento, el contenido en s Header tags4. Ttulo titulo del documento El titulo lo usa el browser para desplegarlo en algun lugar: title bar o status line Tambin se usa como el titulo default al poner la pgina como favorite. En v5.0 es obligatorio y solo uno Recuerde que esta informacin la usa tambin los search engines. Muy importante escoja ttulo significativos an para quien no est viendo el documento entero. Puede hacer la diferencia entre que alguien se decida a ver la pagina o no. http://www.w3schools.com/tags/tag_body.aspBody tags5. Divisiones y prrafosDivisiones: division del documento Esta instruccin se utiliza para definir divisiones o secciones en un documento HTML y aplicar ciertos atributos a todo lo que est en la divisin. Atributos: class, dir, lang, style y title Se usa a menudo con CSS para definir el layout de una pgina de web.Prrafos:El browser NO divide el texto del contenido en los prrafos y lneas que el usuario ingresa con el editor. Los enter son tiles solo para hacer que el documento en html sea mas legible. Para que el browser divida en prrafos se usa el tag y para forzar un lnea nueva
parrafo causa que se deje una lnea en blanco y un line break Atributos: ALIGN, CLASS y STYLETags bsicos para apariencia y contenido: Encabezados, , , , , Ejemplo: Caf Tabascos Home Page Mientras mas pequeo el nmero mas grande la letra al desplegar y ms importante es el heading. La intencin es proveer encabezados de diferentes niveles (secciones y subsecciones) Atributos: ALIGN, CLASS y STYLE Es comn repetir el titulo de la pagina como un H1 en el body para que as salga al principio de la pagina. Se puede incluir imgenes como parte de un ttulo: Caf Tabascos Home Page Break
causar que el browser inserte un line break (
en XHTML) Text Markup fsicos: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_formatting_text Bold: texto ; Ordene antes de las 3:00pm para entrega al da siguiente => Ordene antes de las 3:00pm para entrega al da siguiente italics: texto underline: texto Nota: ha sido deprecated pues confunde al parecer un link strike (texto con una lnea encima): o texto o - deprecated agrandar letra texto se puede usar mas de uno corrido para agrandar ms achicar letra texto se puede usar mas de uno corrido para achicar ms suscrito texto ; H2O => H2O exponente (superscript): texto ; X2+1 => X2+1 teletipo (letra no-proporcional): texto ; Proporcional no-proporcional => Proporcional no-proporcional Text Markup basados en contenido http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_phrase_test Cita: texto ; tpicamente despliega en italics Cdigo: (instrucciones en un lenguaje de programacin): texto ; tpicamente desplegado en un font no proporcional. Definicin: texto ; en Explorer con italics, nada en los dems Enfasis: texto usualmente en italics Teclado: texto usualmente en texto no-proporcional Fuerte: texto usualmente en bold Font - Tipo de letra *Es major hacer esto con CSS texto [] define el tipo de letra base para el documento. Atributos: COLOR=color, SIZE=n o SIZE=+n o SIZE=-n (default es 3, puede ser un nmero con signo lo cual indica decrementar/aumentar por una cantidad)FACE=tipo (tipo: Times New Roman, etc.). Puede ponerse mas de un tipo de letra separado por comas, de este modo el browser coteja si en esta mquina el primero est disponible, si no el Segundo y as sucesivamente. Ejemplo: texto permite cambiar el tipo de letra de una porcin del texto. Atributos: size, face y color. El tamao puede tener signo para aumentar o disminuir. Imgenes (grficos) Imgenes Atributos: Src (requerido) URL de la imagen, ALT alternative (texto q aparece en lugar del grfico) no para mouse over). No tiene endtag en HTML, en XHTML: Hyperlinks (anchors): Texto: texto que sale subrayado Grficos: A pginas locales: Pgina 2 A una parte especfica de una pgina:1. Identificar la parte:a. Con el tab de anchor: b. Con el atributo id: 2. Poner el hyperlink a la parte especificada:a. Si es en la misma pgina: Lista de cursosb. Si es en otra pgina: Lista de cursos Para enviar un e-mail: Webmaster Se puede especificar que el mensaje tenga un subject y/o cc en particular: Webmaster Thumbnails (una foto pequea que al hacer click trae la grande) Control del contenido Centralizar: texto, grficos, tables Cita extensa: texto . Se despliega tpicamente sangrado. Insertar caracteres especiales: &nombre estndar o hexadecimal. Ejemplo: mayor que: &gt o > Otros: &amp (ampersand) &copy (copyright) Lneas horizontales: (no tiene end-tag). Atributos: align (right,center,left), color, noshade, size (grueso), width (largo horiz.; puede ser absoluto o un porciento: width=40 o width =75%ListasHtml provee para varios tipos de listas: bulleted, enumeradas, de definicin. Listas con bullets (unordered lists) 1er elemento 2ndo elemento Atributo: type=tipo ; tipo puede ser: disc, circle o squareEjemplo: Los cursos requisito de la concentracin son: SICI 3255 Algoritmos y programacin SICI 4266 Aplicaciones comerciales SICI 4025 Anlisis y diseo de sistemas SICI 4015 Bases de datosListas numeradas (ordered lists) 1er elemento 2ndo elemento Atributos: start=n type=tipo n es el nmero en el cual empezartipo puede ser: A (letras maysculas), a (letras minsculas), I (nmeros romanos maysculas), I (nmeros romanos minsculas), 1 (nmeros arbigos) Pasos para poner sus pginas en el servidor: Asegrese que la pgina principal est en un archivo llamado: index.html Cada una de las pginas est en un archivo con extension .html Si el sistema es Unix se espera generalmente que las pginas se coloquen en un subdirectorio llamado: public_html Utilice un programa de FTP para copiar los archivos .html, los que contienen grficos y los .css al directorio en el servidor.Nota importante: Las listas numeradas y de bulletsse pueden anidar tanto si son del mismo tipo como de tipos diferentes.Listas de definicin (definition lists)Este tipo de lista se utiliza para hacer glosarios, diccionarios, listas de trminologa. 1er termino a definir definicion del 1er termino 2ndo termino definicin 2do Ejemplo: Trminos communes relacionados al sistema binario BitDgito binario, un 1 o un 0.ByteOcho bits, la cantidad de bits para almacenar un caracter.Sale desplegado as:Trminos communes relacionados al sistema binario Bit Dgito binario, un 1 o un 0. Byte Ocho bits, la cantidad de bits para almacenar un caracter. Style SheetsHTML se cre para decribir el contenido de un documento, no para formatearlo. Muchas personas consideran que una de las aportaciones principales de HTML 4.0 es el apoyo y nfasis en el uso de Cadcading Style Sheets (CSS). CSS se utiliza para controlar formateo del documento tales como tipo de letra, colores, etc. La intencin es aplicar las mismas reglas de formato a todo el documento. De hecho, esto trajo como consecuencia que una serie de tags de uso muy comn hayan sido ya identificadas como deprecated o sea que no se recomienda su uso ya que van a ser eliminadas en prximas versions de HTML. Algunos de estos tags son: basefont, font y center. HTML 4.0 provee 4 formas de usar styles: In-line especificaciones de estilo que aplican nicamente al tag donde se definen. Para esto se usa el atributo de STYLE. Ejemplo: Este header sale en azul e italics Y este no Embedded especificaciones de estilo que aplican a la pgina entera. Se define y utiliza en el documento mismo.Ejemplo embedded styles H1 {color:blue; font-style:italic}-- >Este encabezado sale en azul e italic Y este tambin Link se prepara una hoja general de estilo y se hace referencia a la misma desde todas las pginas del documento. Si se hace un cambio al style sheet este se refleja en todas las pginas del documento.1. Se crea un archivo con extension .css. Ejemplo: estiloSICI.css2. El archivo contiene instrucciones de estilo:H1 {color:blue; font-style: italic}3. En el documento que hace referencia al style sheet:Ejemplo de linked styles Este encabezado sale en azul e italic Y este tambin Imported se prepara una hoja de estilo y se importa a la pgina por mdeio del directivo: @import.SintxisSelector {declaration1; declaration2; . Declarationn;}Cada declaration tiene el formato declaration property: declaration valueEjemplo: h1 {color:purple; text-align:center}ColoresPara especificar el color de algn elemento de la pgina, puede utilizar varios mtodos: RGB color Los monitores despliegan los colores utilizando una combinacin de intensidades de rojo (Red), verde (Green) y azul (Blue). Los valores de intensidad son nmeros del 0 al 255. La forma ms comn de explesar los 3 nmeros es en hexadecimal usando 2 dgitos para cada uno: #FF0000, pero se pueden expresar en decimal tambin: rgb(255,0,0) Nombre del color: Existe una lista de 147 colores predefinos para CSS. (http://www.w3schools.com/cssref/css_colornames.asp) HSL Otra forma de especificar color de forma numrica y se compone de Hue (0 a 360), Saturation (%), Lightness (%) hsl(120, 65%, 75%). Nota: En browsers ms recientes se puede utilizar: RGBA y HSLA los cuales tienen un cuarto valore que corresponde a la opacidad el cual es un nmero entre 0 y 1 donde 0 es completamente transparente y 1 es completamente opaco.La combinacin de colores utilizada en una pgina de Web es un elemento importante en hacer que una pgina de Web sea atractiva y efectiva. Existen varios lugares de Web que generan esquemas de colores, como: http://colorschemedesigner.com/. Adems est www.colr.org que genera un esquema a base de los colores en una imagen.IDs y ClassCSS permite definir estilos que apliquen a solo algunas instancias de un elemento por medio de los atributos id y class. ID se usa para definir estilos para un elemento, el elemento con el id especificado. Una pgina debe tener un solo elemento con un id en especfico y un elemento puede tener un solo id.Ejemplo 1: id#hdoc{text-align:center;color:green;} Este prrafo es afectado por el estilo hdoc Los dems headers no se afectan Ejemplo 2: id.verde{color:green;} Este header es afectado por el estilo verde Los headers sin el class verde no se afectan Este header se afecta Este prrafo tambin se afectaMltiples EstilosDado que una misma pgina puede tener estilos inline, embedded y linked y y stos pueden afecta un mismo elemento, los estilos van a formar uno virtual en cascada de acuerdo a la siguiente prioridad (de mayor a menor):1. Inline style2. Embedded3. External4. Browser defaultEstilosHay estilos para describir: backgrounds, texto, fonts, links, listas, tablas, etc. Ver tutorial de w3scools para la lista completa.Fonts en CSSpropiedades: Font-weight boldness numrico 100, 200, 900 o texto: normal, bold, bolder, lighter Font style italics (normal, italic, oblique Font-size - numeric en pixels 11px o point size 18pt o texto: xx-small, x-small, small, medium, large, x-large, xx-large Font-family: typefaces: arial, etc. Text-align: left, right, centerUso de CSS para describir el formato de una pginaBox ModelLos elementos de HTML se consideran cajas para propsito de diseo. La caja se compone de: margen, borde, relleno (padding) y contenido: (Fuente: w3schools)Usando div para layoutHasta hace relativamente poco, se itilizaba mayormente tablas para alinear componentes de una pgina ya que los browsers se tardaronmucho en apoyar los directivos CSS para definir el layout de una divisin (div). Por lo tanto, ms recientemente se usa div y CSS como mecanismo para definir el formato de una pgina.Ejemplo:Definir el formato de 2 divisiones div1 y div2.En la seccin de style:.div1 { width: 200px;Height: 200px;Backgound-color: blue;Border: dashed;Padding: 5px;}.div2 { width: 100px;Height: 100px;Backgound-color: yellow;Border: ridge;Padding: 5px;Margin: 10px}En el body:Prueba 1 - separadas:Caja nmero unoCaja numero dosPrueba 2 - anidadas:Caja nmero unoCaja numero dosPropiedades CSS para posicionamientoPositionLa propiedad position indica el tipo de posicin que se va a especificar para el elemento. Valores: Static (el default) indica que va a utilizar el flujo normal para colocarlo, no se puede usar propiedades para controlar posicionamiento horizontal o vertical. Relative al utilizar esta opcin se puede utilizar las propiedades left/right para posicionamiento horizontal y top para vertical. Las posiciones especificadas mediante top o left/right son relativas al elemento que la contiene y constituye un desplazamiento. Absolute al utilizar esta opcin se puede utilizar las propiedades left/right para posicionamiento horizontal y top para vertical. Las posiciones especificadas mediante top o left/right son relativas al elemento que la contiene y constituye una posicin especfica con relacin al que lo contiene.Left, Right, TopSe utilizan para especificar cantidad a desplazarse (relative); posicin (absoluto). Valores: Auto (lo calcula el browser) Pixels o centimetros Ej. 10px o 1cm (pueden ser negativos) Porciento. Ej. 15%En seccin de style:h1 {background-color: yellow; padding: 5px; color: red; }#maincontent {position:relative; left:40px; }En el body:Caf Tabasco Caf Tabasco es una nueva propuesta grastrnmica. FloatEl browser posiciona el elemento de acuerdo al flujo normal, pero lo flota hacia la derecha o izquierda dentro del elemento que lo contiene. Valores: Left o rightClearClear se utiliza para terminar un float. Valores: Left, right o bothEjemplo de divs para definir el formato de una pginaBannerNavigation BarSidebarMain contentFooterEn el body de la pgina:BannerNavigation BarSidebarMain contentFooterEn el element style en el head o en un archivo.css:Cmo hacer barras de navegacin horizontalesPara hacer una barra de navegacin horizontal se utiliza un unordered list con las siguientes propiedades para el tag : display:inline (en la misma lnea) y list-style:none (no desplegar un bullet)Ejemplo: En el body:Enlace 1 Enlace 2Enlace 3 Enlace 4 En el elemento style o un .css#navlist li{display: inline;list-style-type: none;padding-right: 20px;}TablasLas tablas se utilizan para desplegar datos de forma tabular.Los elementos de una tabla son: los datos, encabezados de fila y columna y captions.Sintxis general: fila 1 fila 2 Tabla con descripcin (caption) Texto al pie de la tabla fila 1 fila 2 Cada fila a su vez puede contener: dato heading TableEl elemento table define una tabla.TrTag para cada fila de una tabla. Los atributos principales son:align, bgcolor, valigin como en table, pero controlando la apriencia de las celdas de la fila.Th y TdTags para los headings(th) y datos (td) en una tabla. Th se utiliza para indicar que el contenido de la celda es un encabezado (de fila o de columna). Td se utiliza para indicar que el contenido de la celda es un dato.width=n el ancho de la celdacolspan=n una celda puede ocupar varias columnas de ancho. n es la cantidad de columnas. Esto se usa a menudo en los encabezados de las tablas.rowspan=n la celda puede tambin ocupar varias celdas de alto. n es la cantidad de celdasEjemplo:Quin Desarroll el Site Desarrollador Frecuencia N

2011 &copy MTJPrimera forma y php que la procesaCree el html con la forma1. Con Notepad++ (indique que el lenguaje es html) u otro editor de texto o html, cree un archivo con el contenido siguiente, y gurdelo con el nombre: primeraforma.html. 2. Publquela en el servidor Primer form Nombre: Edad: Cree el php que procesa la formaObserve que la forma indica que va a ser procesada por el php en: registro.php, el cual debe crear ahora.1. Con Notepad++ (indique que el lenguaje es php) u otro editor de texto o html, cree un archivo con el contenido siguiente, y gurdelo con el nombre: registro.php. 2. Publquelo en el servidor Primer php para procesar un form Bienvenido a Caf Tabasco nos alegramos que te hayas registrado con nosotros.Vemos que tienes aos. Pronto recibirs noticias nuestras que seguro sern de tu inters.Pruebe la forma1. Pruebe ahora la forma solocitando con el browser la pgina: sunombre.wootzie.com/primeraforma.html2. Ingrese los datos en los textboxes3. Haga clic en SubmitLa diferencia entre POST y GETEn ambos archivos del ejemplo anterior, cambie la palabra POST, por la palabra GET y vuelva a publicarlos. Pruebe la forma. Al hacer clic en el botn de submit, observe el URL generado. Notar que el URL contiene los datos ingresados por usted, incluyendo los nombres de los campos.Variables de ambienteUn programa CGI no recibe input de la forma regular (teclado por ej.). Sin embargo es importante proveer el mecanismo para que pueda obtener datos provistos por el servidor. El mecanismo utilizado es: variables de ambiente (environment variables). Unix y Windows proveen para definir variables de ambiente, las cuales pueden ser accesadas por cualquier programa. CGI define una serie de variables de ambiente que se agrupan en tres clases: las que proven informacin sobre el usuario (cliente), las del servidor y las del pedido (request).Variables sobre el usuarioLa s variables sobre el usuario son:HTTP_USER_AGENTcontiene el nombre y versin del browser del usuario: name/version library/versionEjemplo: Mozilla/2.0b1J (Windows; I; 32 bit)HTTP_ACCEPTLos MIME formats que el browser acepta: type/subtype,type/subtypeEjemplo: image/gif, image/x-xbitmap, image/jpeg, image, */*REMOTE_HOSTDireccin IP en texto (DNS)REMOTE_ADDRIP address en notacin decimal con puntosVariables sobre el servidorLas variables sobre el servidor son:SERVER_SOFTWAREnombre y version del software del servidorSERVER_NAMEprovee el nombre del servidor (IP o DNS)GATEWAY_INTERFACEversion de CGI que utiliza este servidor: CGI/versionVariables sobre el pedidoQUERY_STRINGSarta que contiene los parmetros pasados por el mecanismo de ?name=valor&name=valor&name=valorSCRIPT_NAMEnombre del archivo de la aplicacin CGISERVER_PROTOCOLnombre y version del protocolo usado para hacer el pedido: name/versionEjemplo: HTTP/1.0SERVER_PORTnmero del puerto por el cual vino el pedidoPATH_INFOPATH_TRANSLATEDUn pedido puede incluir un path: http://www.prueb.com/cgi/cgiprog.cgi/a/b/c (a/b/c es un path incluido como parte del pedido). Si el pedido incluye un path: el path tal y como estaba en el pedido (PATH_INFO) y el path verdadero (PATH_TRANSLATED)Ejemplo: PATH_INFO = /a/b/c PATH_TRANSLATED=/var/web/temp/a/b/cCONTENT_TYPECONTENT_LENGTHSe llenan si el pedido es del mtodo POST. CONTENT_TYPE contiene el tipo de dato: type/subtype y CONTENT_LENGTH contiene el nmero de bytes.AUTH_TYPEAuthentication methodDesplegando las variables de un pedido POST o GET con php1. Al archivo php del ejemplo anterior (registro.php) ada las siguientes instrucciones justo antes de 2. Haga sabe y vuelva a publicar el archivo.3. Pruebe ahora la forma solocitando con el browser la pgina: sunombre.wootzie.com/primeraforma.html Mira los valores de las variables CGI generados por tu pedido GATEWAY_INTERFACE= REQUEST_METHOD= SCRIPT_NAME= QUERY_STRING= SERVER_SOFTWARE= SERVER_NAME= SERVER_PROTOCOL= SERVER_PORT= HTTP_USER_AGENT= HTTP_ACCEPT= PATH_INFO= PATH_TRANSLATED= REMOTE_HOST= REMOTE_ADDR= REMOTE_USER= REMOTE_IDENT= AUTH_TYPE= CONTENT_TYPE= CONTENT_LENGTH=Client-side scriptingUn documento HTML puede contener scripts (programas) escritos en lenguajes para este propsito. Los dos lenguajes mas utilizados son: Javascript y VBscript. Javascript fue desarrollado por Netscape como el lenguaje Livescript. Cuando salio Java, Netscape hizo un acuerdo con Sun para llamarle Javascript. La version de Microsoft se llama: Jscript.VBscript fue desarrollado por Microsoft y hasta donde s en Netscape se puede usar solo si se tiene un plug-in para este proposito.Se le llama script a programas en lenguaje de alto nivel, que son entonces ejecutados por medio de interpretes.Para incluir un script se utiliza el tag: . A continuacin un ejemplo:Client-Scripting testThis is a page containing a VBScript script and a Javascript script.Note que el script en s est encerrado dentro de un comentario. Es recommendable hacerlo para que en browsers que no pueden procesar el script no le salgan cosas extraas a los usuarios. El script tambien podria estar almacenado dentro de un archivo aparte: A continuacin las pantallas de como procesa el browser el documento.Al hacer clic en OK, aparece lo siguiente: