Tecnologia Web - HTML

TECNOLO

GIA

WEB

POR: ERW

IN F

LORES

CONTENIDO CURSO

HTMLCSSJAVASCRIPT DOMPHPJQUERY

ESQUEMA

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:[email protected]" 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

Tecnologia Web - HTML

Technology

Transcript of Tecnologia Web - HTML