HTML BasicoDesarrollo de Aplicaciones Web

EtiquetasLa unida bsica del lenguaje HTML son las etiquetas. Una etiqueta es una cadena formada por los smbolos de menor y mayor y entre ellos una cadena que determina el nombre de la etiqueta.< Nombre_de_la_etiqueta >Generalmente las etiquetas se utilizan como delimitadores, por lo cual una etiqueta esta compuesta de una parte que indica el inicio u el complemento que indica la finalizacin.Sintaxis: Etiqueta con inicio u fin Texto contenido < / Etiqueta_Fin>Sintaxis: Etiqueta SimpleTambin existen etiquetas simples las cuales se componen solo de la parte de inicio.

Atributos de las etiquetas.Las etiquetas contienen una serie de parmetros para poder personalizar la operacin que deslizan. Estos parmetros son llamadas Atributos de la etiqueta.Los atributos son parmetros que se configuran en el momento de generar una etiqueta.Sintaxis: < Etiqueta atributo1= Valor atributo2=Valor > Texto Contenido Notas:El atributo se genera del par nombre = ValorEl valor del atributo siempre se escribe entre comillas.Los atributos son denotados dentro de la etiqueta de inicio.Los atributos se separan entre ellos a travs de espacios en blanco.

Estructura de un documentos HTML.La estructura bsica de un documentos HTML esta compuesto por una secuencia de etiquetas. A continuacin se muestra la estructura bsica de un documentos HTML.

Datos de configuracin del documento.

Cuerpo del documento.

La etiqueta indica el inicio de un documento HTML.La etiqueta es util, para configurar datos acerca del documentoLa etiqueta agrupa a todo el contenido del documentoLos comentarios se pueden agregar con

Saltos de lnea.En un documento HTML, los saltos de lnea se generan en los siguientes casos:Despus de una etiqueta prrafo Despus de una etiqueta de encabezado Para genera explcitamente un salto de lnea, se utiliza la etiqueta Sintaxis.Lnea del documento lnea del documentoprrafo del documento prrafo del documentoImportante.Como se puede observar esta etiqueta no cuenta con inicio y fin, pues es una solo (inicio)

El cuerpo principal de una pagina puede presentar diversos atributos como :

Algunos atributos de bodyAtributos de Body

Colores en hexadecimalPaleta de Colores

ColorHexadecimalNombre#FFFFFFwhite#000000black#000080navy#0000FFblue#008000green#008080teal#00FF00lime#00FFFFaqua#800000maroon#800080purple#808000olive#808080gray#C0C0C0silver#FF0000red#FF00FFfuchsia#FFFF00yellow

Etiquetas para Prrafo.Etiqueta para delimitar prrafo. Atributos:Ejemplos.Es un discurso ciertamente muy interesante de un innovador que comenta su forma de afrontar los cambios en un camino profesional, como el de cualquiera de nosotros, sujeto cada vez con mucha mayor frecuencia a ms cambios. Es un discurso ciertamente muy interesante de un innovador que comenta su forma de afrontar los cambios en un camino profesional, como el de cualquiera de nosotros, sujeto cada vez con mucha mayor frecuencia a ms cambios. Texto prrafo

AtributoOperacinValoresalignAlinea el prrafocenterleftrightjustify

Etiqueta para Encabezados.Para generar encabezados en un documento HTML, se utilizan las etiquetas de encabezado.Las etiquetas de encabezado formatean el texto en estilo negritas y con un tamao de fuente especifico.Sintaxis:Texto de encabezado del documento donde:h. Indica que se esta generando un encabezado o titulo.n. Es un numero entero que indica el tipo de encabezado

Valore posibles para n = {1, 2, 3, 4, 5, 6}Al terminar la etiqueta de encabezado, se genera automticamente un salto de lnea.

AtributoOperacinValoresalignAlinea el encabezadocenterleftrightjustify

Encabezados. Ejemplo2Encabezado 1, tamao fuente: 6Encabezado 2, tamao fuente: 5Encabezado 3, tamao fuente: 4Encabezado 4, tamao fuente: 3Encabezado 5, tamao fuente: 2Encabezado 6, tamao fuente: 1

Encabezados. Ejemplos 3Por default:Si no se indica una alineacin se aplica alineacin a la izquierda

Formato del texto.Cuando se requiere personalizar el formato del texto en documentos HTML, se utilizan varias etiquetas, una de las mas importantes es la etiqueta La etiqueta font permite configurar:Tipo de letra.Color de la letraTamao de la letraSintaxis.Texto para formatearImportante.El conjunto de fuentes, es aquel que existe en el equipo donde ser reproducido el documento HTML.

AtributoOperacinValoresfaceDetermina tipo de letraFuentes del sistema clientesizeDetermina el tamao de la letra{1, 2, 3, 4, 5, 6, 7}colorConfigura el color de la letraTabla de colores HTML

etiquetas asociadas al tipo de letra: Atributos para textoImportante las fuentes se dividen principalmente en tres clases: serif (las fuentes "con serifa" al estilo Times, Georgia...); sans-serif (las fuentes "sin serifa" al estilo Arial, Helvetica, Geneva...); y mono que son las de anchura fija como Courier o Monaco (ideales para cdigo fuente por ejemplo).

EtiquetaSignificadoEjemplonegritaMi Pagina HTMLcursivaMi Pagina HTMLsubrayadoMi Pagina HTML tachadoMi Pagina HTMLteletipo (mquina de escribir)Mi Pagina HTMLaumenta el tamao de la fuenteMi Pagina HTMLdisminuye el tamao de la fuenteMi Pagina HTML

Ejemplo

Configurando tipo de letraTipo: Arial blackTipo: times New RomanTipo: symbol

Configurando tipo de letraSe pueden configurar varios tipos de letras, as en caso que el equipo cliente no cuente con la primera tendr la opcin de ejecutar alguna de la lista de configurada.Fuente conocida por el diseador, pero no conocida por el equipo clienteEn este caso se muestra que el tipo de letra: miFuente no existe en el equipo cliente, pero se ejecuta la configuracin de una segunda fuente para el texto

Tamao de la letra.Para determinar el tamao de la letra se utiliza el atributo size de la etiqueta .Configuracin de tipo y tamao de la letra.Configuracin del tamao de la letra.

Configuracin del Color de la letra.Para determinar el color de la fuente se realiza mediante el atributo color de la etiqueta . El valor para el atributo se puede proporcionar con el nombre del color (en ingles) o con un valor hexadecimal.Color mediante Cdigo Hexadecimal.Color mediante nombre del color.

Texto en negritas.La etiqueta permite aplicar estilo negritas al texto del documento HTML.Sintaxis.Texto para formatearTexto en estilo NegritasTexto en estilo Normal

Texto en Cursivas.La etiqueta permite aplicar estilo cursivas al texto del documento HTML.Sintaxis.Texto para formatearTexto estilo normalTexto estilo Cursivas

Texto Subrayado.La etiqueta permite aplicar estilo subrayado al texto del documento HTML.Sintaxis.Texto para formatearTexto estilo Subrayado.Texto estilo Normal.

SeparadoresLa etiqueta permite agregar separadores verticales en un documento HTML.Sintaxis. Atributos.

AtributoOperacinValoreswidthDetermina el ancho (longitud horizontal) del separador.Valor entero en pixeles o en porcentajesizeDetermina la altura o espesor del separador.En pixelesnoshadeSi se aparece este atributo se elimina la sombra del separadorNingunoalignAlineacin del separadorAlinea el separador (solo si no esta al 100% de ancho)

Ejemplo

Etiquetas anidadas.Secuencia de apertura: secuencia de cierre: 123321123321Esto aplica para todas las etiquetas de formato de texto.

Marquesinas Esto es una marquesina y . behavior alternate scroll slide direction down up left right Atributos:Las marquesinas presentaron una de las principales formas de animacin en los principios de HTML

y . Lista desordenadavieta circle (crculo), disc (disco) o square (cuadrado). Perro Gato Periquito y . Lista ordenadatype 1 (nmeros), a (letras minsculas), A (letras maysculas), i (numeros romanos en minsculas) o I (nmeros romanos en maysculas). Listas anidadas: combinacin de las anteriores.ListasPerro Gato Periquito

Perro Gato Periquito

Ejemplo

Crear una pagina de inicio en blancoColocar un titulo centrado y subrayado (mi pagina personal)Insertar una marquesina (con fondo rojo, tamao de letra 5, y comportamiento continuo.Insertar un prrafo de texto con sangra a la izquierda y alineacin a la izquierda.Crear una divisin horizontal .Escribir un texto ( prrafo) centrado que indica una frase arbitraria.Insertar una divisin horizontal.Insertar un texto preformateado que introduce a nuestras ocupaciones principales (centrado).Crear una lista que muestra las reas de inters de informacin.Insertar listas anidadas a cada item.Un avanceCaso de Estudio

URL Localizador Universal de Recursos

Tipos de URL

ENLACEShiperenlace, hipervnculo, o vnculo y . href especifica la pgina a la que est asociado el enlace Referencia absoluta: Conduce a una ubicacin externa al sitio Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio Visita www.mipagina.comcambiar a otro documento "ref. relativa" otra carpeta navegar por el tutorial

Destino del enlace determina en qu ventana va a ser abierta la pgina vinculada atributo target _blank Abre el documento vinculado en una ventana nueva del navegador. _self Abre el documento vinculado en el mismo marco o ventana que el vnculo Anclas o puntos de fijacin permite ir directamente al apartado deseado en un documento extensoTexto con ancla define el anclaEnlace al anclalleva al ancla

cambiar a otro documento "ref. relativa" Enlaces

Correo electrnico: mi e-mail

mi e-mail Vnculo a ficheros para descarga:

haz clic aqu para descargarte el fichero

enlaces

Ejemplo

IMGENES

Ejemplo

TABLAS y INICO Y FIN DE TABLA y Inicio y fin de fila y columna o celda inicio de tabla inicio de fila 1 celda 1 de la fila 1 celda 2 de la fila 1 fin de la fila 1inicio de fila 2celda 1 de la fila 2celda 2 de la fila 2 fin de la fila 2.. fin de la tabla

Atributos de una tabla:

Atributos de una Tabla

AtributoSignificadoPosibles valoreswidthancho de la tablaun nmero, acompaado de % cuando se desee que sea en porcentajeheightaltura de la tablaun nmero, acompaado de % cuando se desee que sea en porcentajecellpaddingespacio entre el contenido de las celdas y el bordeun nmerocellspacingespacio entre celdasun nmerobordergrosor del bordeun nmeroalignalineacin de la tabla dentro de la pginaleft (izquierda) right (derecha) center (centro)bgcolorcolor de fondonmero hexadecimalbackgroundimagen de fondonmero hexadecimalbordercolorcolor del bordenmero hexadecimal

Atributos de una celda:Atributos de las celdas

AtributoSignificadoPosibles valoreswidthancho de la tablaun nmero, acompaado de % cuando se desee que sea en porcentajeheightaltura de la tablaun nmero, acompaado de % cuando se desee que sea en porcentajealignalineacin horizontal del contenido de la celdaleft (izquierda) right (derecha) center (centro)valignalineacin vertical del contenido de la celdabaseline (lnea de base) bottom (inferior) middle (medio) top (superior)bgcolorcolor de fondonmero hexadecimalbackgroundimagen de fondonmero hexadecimalbordercolorcolor del bordenmero hexadecimal

Ejemplo

Ejemplo

nombredescripcinFOTOGRAFIAFIESTA 3 DE JULIOPOR EL CENTENARIO DE LA FACULTADaqui va texto, imagenes, videoGATITOGRAFICO EXTARIDO DEL TUTORIAL OTRO CUALQUIERAPUEDE IR CUALQUIER COSAO SIMPLEMENTE TEXTO

nombre descripocion FOTOGRAFIA FIESTA 3 DE JULIO POR LOS 50 AOS DE LA FACULTAD aqui va texto, imagenes, video GATITO GRAFICO EXTARIDO DEL TUTORIAL OTRO CUALQUIERA PUEDE IR CUALQUIER COSA O SIMPLEMENTE TEXTO

GATITOPara toda la fila la alineacin esCentrado y el fondo amarilloSolo para la celda el fondo es prpura y idntico a td pero centrado y negrilla Titulo de columnacolspan y rowspan Combinacin de celdascolspan especifica el nmero de columnas por las que se extender la celda rowspan especifica el nmero de filas por las que se extender la celda

Atributos avanzados

Ejemplo con mas atributos

Caso de Estudio

combinacin de 4 columnasNOMBREDATOSFECHANOTA 1NOTA 2JUAN CARLOS10.7512.9716/AGOSTO/2007LUISA20.652.6530/AGOSTO/2007

MARCOS (FRAME) y Define el conjunto de marcos no requiere las etiquetas y

AtributoSignificadoPosibles valorescolstamao de cada una de las columnas en que se divide el documentoun nmero (acompaado de % cuando se desee que sea en porcentaje) por cada columna, separados por comas.rowstamao de cada una de las columnas en que se divide el documentoun nmero (acompaado de % cuando se desee que sea en porcentaje) por cada fila, separados por comas.frameborderaparece o no el borde de los marcosyes noframespacingseparacin entre los marcosun nmero bordergrosor del bordeun nmero, acompaado de % cuando se desee que sea en porcentajebordercolorcolor del bordenmero hexadecimal

indica el documento a cargar en el marco Atributos de un Marco

AtributoSignificadoPosibles valoresframeborderaparece o no el borde del marcoyes o 1 no o 0namenombre del marcocualquier valornoresizesi aparece, el usuario no podr redimensionar el tamao de este marcono puede tomar valoresmarginwidthanchura del margen con respecto a los bordes del marcoun nmero, acompaado de % cuando se desee que sea en porcentajemarginheightaltura del margen con respecto a los bordes del marcoun nmero, acompaado de % cuando se desee que sea en porcentajescrollingse mostrar o no la barra de desplazamiento cuando la pgina del marco no se pueda visualizar completamente en lyes no autosrcdocumento que se cargar en el marcoruta y nombre del documento

Destino de los enlaces de un marcomatematicasLos nombres de los marcos pueden constituirse en el destinoDe un documentoEn la pgina del marco izquierdo (menu.html) crear el siguiente enlace:

FORMULARIOSPermite recoger datos introducidos por el usuario. Un formulario est formado, entre otras cosas, por etiquetas, campos de texto, mens desplegables, y botones y indican el inicio y fin de un formularioEl atributo action indica una direccin de correo electrnico o la direccin del programa que se encargar de procesar el contenido del formulario.El atributo method indica el metodo mediante el que se transfieren las variables del formulario. Su valor puede ser get o post

Ejemplo

ELEMENTOS DE UN FORMULARIO y rea de texto

Elementos para type: TEXTOCONTRASEA BOTON

CASILLA DE VERIFICACION BOTON DE OPCIONElementos para Type

---Elige animales--- Loro Perro Gato Pez SELECION MULTIPLE

RESTABLECER

Ejemplo

Ejemplo

Ejemplo

*