Tecnologia Web - HTML

TECNOLOGIA
W
EB
POR: ERW
IN
FLORES

CONTENIDO CURSO
HTML
CSS
JAVASCRIPT DOM
PHP
JQUERY

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

TABLAS
Estructura:
 <table>
 <thead>
 <tr>
 <th>Titulo1</th>
 <th>Titulo2</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Fila 1 Celda1</td>
 </tr>
 <tr>
 </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

Tecnologia Web - HTML

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (14)

Andere mochten auch

Andere mochten auch (8)

Ähnlich wie Tecnologia Web - HTML

Ähnlich wie Tecnologia Web - HTML (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (11)

Tecnologia Web - HTML