Post on 12-Jun-2015
description
TECNOLO
GIA
WEB
POR: ERW
IN F
LORES
CONTENIDO CURSO
HTMLCSSJAVASCRIPT DOMPHPJQUERY
ESQUEMA
HTML
QUÉ ES HTML?
HTML es el lenguaje para la publicación en WWW.
HTML = HyperText Markup Language (lenguaje de marcas de hipertexto)
Un documento HTML es un archivo de texto que contiene etiquetas HTML
Las etiquetas le indican al visualizador cómo desplegar la página
Un archivo HTML debe tener extensión htm o html
ETIQUETAS HTML
Etiquetas HTML son palabras claves (nombre etiqueta) rodeadas por corchetes angulares como <html>.
Etiquetas HTML generalemente vienen en pares como <b></b>.
La etiqueta final se escribe igual que la etiqueta inicial , con una barra diagonal antes del nombre de la etiqueta.
<nombreetiqueta>CONTENIDO</nombreetiqueta>
DOCUMENTO HTML DE EJEMPLO
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Herramientas de desarrollo web</title>
</head>
<body>
<h1>Documento de ejemplo</h1>
<p>Esto es un parrafo de texto con la
palabra <b>negrita</b> más intensa.</p>
</body>
</html>
VERSIONES DE HTML
Version Año
HTML 1991
HTML+ 1993
HTML2.0 1995
HTML3.2 1997
HTML4.1 1999
XHTML1.0 2000
HTML5 2012
XHTML5 2013
<!DOCTYPE>DECLARACION
El <!DOCTYPE> ayuda al navegador a mostrar una pagina HTML 100% correctamente si se conoce el tipo de HTML y version utilizada.
El <! DOCTYPE>debe ser la primera cosa en el documento HTML, antes de la etiqueta<html>.
XHTML1.0<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML ATRIBUTOS
Elementos HTML pueden tener atributos.
Los atributos proporcionan informacion adicional acerca de un elemento HTML.
Los atributos siempre se especifican en la etiqueta de apertura.
Atributos vienen en pares nombre/valor como nombre:”valor”.
ATRIBUTOS COMUNES
Atributos Descripcion
class Especifica la clase de un elemento. Se utiliza para ser refereciada desde una hoja de estilo css.
id Identificador unico para un elemento.
style Especifica el estilo de un elemento.
title Especifica informacion adicional de un elmento.
ETIQUETAS BASICAS
<html> Define un documento HTML.
<head> Define la cabecera dentro de esta etiqueta se definen script,css,metainformacion.
<body> Define el cuerpo del documento aqui se definiran los elmentos que se van a visualizaran.
<h1>a <h6> Define los titulos.
<hr>Define una linea horizontal.
<b> Negrita.
<!-- --> Define un comentario
<br>Define un salto de linea
Practica1
IMAGENES
Etiqueta <img>
Atributo src.- indica la URL de la imagen. alt.- Descripcion de la imagen id.- Identificador height, width.- Altura y anchura<img src="feliz.gif" alt="HTML tutorial" width="32px" height="32px">
ENLACE
Un enlace es una palabra o una imagen que puede hacer click para saltar a otro documento o recurso.
<a href="http://www.w3schools.com/">W3Schools</a>
<a href="#" title="Ver Multimedia"><img src="feliz.gif" alt="HTML tutorial" width="32" height="32"></a.
<a href="mailto:eflores@axon.com.bo" title="Enlace a Correo">Correo</a>
ENLACE
<a href="ftp://ftp.ejemplo.com/ruta/archivo.zip" title="Enlace Ftp">Ftp</a><br />
<a href="formato.pdf" title="Enlace a Pdf" target="_blank"> Pdf</a>
Practica2
LISTAS
Las listas es un conjunto de elementos que tienen un significado. Las más comunes son listas ordenadas y desordenadas. Generalmente utilizadas para realizar menús.
Lista no ordenada La etiqueta <ul> encierra todos los elementos de la lista y la etiqueta
<li> cada uno de los elementos Lista ordenada
La etiqueta <ol> encierra todos los elementos de la lista y la etiqueta <li> cada uno de los elementos.
Practica3
TABLAS
Las tablas en HTML utilizan los mismos conceptos de filas, columnas y cabeceras. Se utiliza para mostrar informacion tabular
.
<table>.-Se emplea para definir tabla de datos. Atributos comunes border,style
TABLAS
<tr>Se emplea para definir cada fila
<td>Se emplea para definir cada celda que forman las filas.
Atributos scope=‘col, row’ – Indica las celdas para las que esta celda sera su cabecera. colspan=‘numero’ – Numero de columnas que ocupara esta celda. rowspan=‘numero’-Numero de filas que ocupara esta celda.
<th>Se emplea para definir las celdas que sera cabecera de una fila o columna
Atributos idem al anterior.
<caption>Se emplea para definir la leyenda o titulo de una tabla.
TABLAS
<thead>Agrupa varias fila para una cabecera.
<tbody>Agrupa varias filas para un cuerpo.
<tfoot>Agrupa varias filas para un pie.
Practica 4
Practica 5
TABLASEstructura: <table>
<thead> <tr>
<th>Titulo1</th> <th>Titulo2</th>
</tr> </thead> <tbody>
<tr> <td>Fila 1 Celda1</td> <td>Fila 1 Celda2</td>
</tr> <tr>
<td>Fila 2 Celda1</td> <td>Fila 2 Celda2</td>
</tr> </tbody>
</table>
TABLAS ATRIBUTOS
cellpading.- Se utiliza para crear un espacio entre el contenido y el borde.
cellspacing.- Se utiliza para crear un espacion entre las celdas(border-spacing).
border-collapse.- Para colapsar los bordes
empty-cells .- Se utiliza para mostrar un contenido en vacio
caption-side.- Se utiliza para posicionar la leyenda
border.- Atributo comun en estilos.
ESTRUCTURA Y LAYOUT
div.- Se utiliza para agrupar elementos o zonas de division.
div.- Se utiliza para estructurar una pagina web.
Practico 7 y 8 <div id=‘formulario’>
<div id=‘cabecera’></div> <div id=‘cuerpo’></div> <div id=‘pie’></div>
</div>
FORMULARIOS
<form>Encierra todos los contenidos del formulario como ser botones, cuadros de texto, listas desplegables.
Atritutos. action .- Indica la URL que se encarga de procesar los
datos del formulario. method.- POST o GET empleado para enviar la
informacion del formulario. GET.- Se utiliza para consultar informacion. Se muestra en la url. POST.-Se utiliza para modificar informacion, no se muestra en la
url. enctype.-"application/x-www-form-urlencoded o
multipart/form-data“.- Tipo de codificacion empleada al enviar el formulario.
FORMULARIO
<input> Se crean varios controles de formulario.
Atributo type.- text, password, checkbox, radio, submit, reset,
file, hidden, button, image. name.- Asigna un nombre al control. value.- Valor del control. size.- Tamaño(pixeles) del control reemplazo por
style="width:5px”. maxlength.-’numero’ Maximo numero de caracteres
para los controles de texto y password.
FORMULARIOS
Atributo checked.- ‘checked’ Para controles de checkbox y
radio. disabled.-’disabled’ El control aparece desabilitado y
su valor no se envia al servidor. readonly.-’readonly’ El control no se puede
modificar. src.-’url’ Para el control que permite crear botones
con imagen. alt.- tooltip, descripcion del control.
FORMULARIOS
text.- Campo de Texto en el que el usuariio puede escribir un texto.
<input type="text" name="nombre" value="" />
password.- Campo texto en el que el contenido no se puede ver en pantalla.
<input type="password" name="contrasena" value="" />
checkbox.- casillas de verificacion que permiten seleccionar y deseleccionar opciones individualmente.
<input name=“vigente" type="checkbox" value=“2"/> Vigente <input name=“castigado" type="checkbox" value=“7"/> Castigado
FORMULARIOS
radio.- Son similares a los checkbox, pero son mutuamente excluyentes
<input type="radio" name="sexo" value="hombre" checked="checked" /> Hombre
<input type="radio" name="sexo" value="mujer" /> Mujer
submit.- Boton para enviar los datos al servidor. <input type="submit" name=“enviar" value=“Enviar" />
reset.- Boton de reseteo input type="reset" name="limpiar" value="Borrar datos del
formulario" />
file.- Para ajuntar archivos. <input type="file" name="adjunto" />
FORMULARIOS
hidden.- Campos de texto ocultos. <input type="hidden" name=“oculto" value=“123" />
image.- Boton con imagen. <input type="image" name="enviar" src="accept.png" />
button.- Boton generico <input type="button" name="guardar" value="Guardar Cambios" />
FORMULARIOS
textarea.- Se utiliza para incluir un area de texto atributo.-rows(Numero de filas), cols(Numero de caracteres en cada
fila) <textarea id="descripcion" name="descripcion" cols="40"
rows="5"></textarea>
select.- Se utiliza para incluir una lista desplegable(dropdown).
size.- ‘numero’ Numero de fila que se muestra. multiple.-’multiple’ Si se permite seleccionar mas de un elmento.
option.- Define cada elemente de la lista select selected .- ‘selected’ Indica si la opcion aparece seleccionado por
defecto. value ‘texto’ Indica el valor que se envia al servidor
FORMULARIO
<select id="so" name="so"> <option value="" selected="selected“>Sel</option> <option value="windows">Windows</option> <option
value="mac">Mac</option> <option value="linux">Linux</option> <option value="otro">Otro</option>
</select>
Practica
FORMULARIOS