Trabajo reflexico 2 marco teorico

UNIVERSIDAD TECNOLÓGICA DEL PERÚ
FILIAL LIMA
FACULTAD DE INGENIERIA
TEMA: ATRIBUTOS Y ETIQUETAS HTML
PRESENTADO POR: Adler pillaca sicha (1629154)
Jimmy Bautista Munoz (1614803)
Miguel Angel Avila Yglesias
Jonaiker Lauriano Chapoñan (1530972)
CICLO : II
TURNO : TARDE
CURSO : Taller de Programación Web
DOCENTE : HUAPAYA SOTERO, ARMANDO RICARDO

INDICE:
1. Introduccion
2. Que es el HTML
3. Origenes del HTML
4. Creacion de paginas web con lenguaje HTML
5. Etiquetas de párrafo
6. Como insertar una imagen
7. Uso de iframe frente a frame
8. Etiqueta IFRAME
9. Etiqueta VIDEO
10. Etiqueta FORM
11. Conclusion
12. Bibliografia

1. Introduccion
El HTML no es más que una aplicación del SGML (Standard
Generalized Markup Language), un sistema para definir tipos
de documentos estructurados y lenguajes de marcas para
representar esos mismos documentos. El término HTML se suele
referir a ambas cosas, tanto al tipo de documento como
al lenguaje de marcas.
A medida que nos afianzamos en el manejo de Internet cada uno de
nosotros pasa por tres etapas diferentes: Al principio solamente
conocemos unas pocas páginas, luego nos damos cuenta que
existen buscadores lo cual lo hace más interesante y por último nos
damos cuenta que en Internet no solamente se puede ver
la información sino que también se puede publicar. ¿y qué otra
manera más fácil y más sencilla? Si Internet tiene acceso a todos los
rincones del mundo.
Para que varias personas se comuniquen es necesarios que éstas
hablen un mismo idioma. El lenguaje que utilizan
las computadoras que están conectadas a Internet es HTML. A
través de esta monografía explicaremos que es HTML, sus orígenes
y el proceso de creación de una página web.

2.QUE ES HTML
El HTML, Hyper Text Markup Language (Lenguaje de marcación de Hipertexto) es
el lenguaje de marcas de texto utilizado normalmente en la www (World Wide
Web). Fue creado en 1986 por el físico nuclear Tim Berners-Lee; el cual tomo
dos herramientas preexistentes: El concepto de Hipertexto (Conocido también
como link o ancla) el cual permite conectar dos elementos entre si y el SGML
(Lenguaje Estándar de Marcación General) el cual sirve para colocar etiquetas o
marcas en un texto que indique como debe verse. HTML no es propiamente un
lenguaje de programación como C++, Visual Basic, etc., sino un sistema de
etiquetas. HTML no presenta ningún compilador, por lo tanto algún error de
sintaxis que se presente éste no lo detectará y se visualizara en la forma como
éste lo entienda.
El entorno para trabajar HTML es simplemente un procesador de texto, como el
que ofrecen los sistemas operativos Windows (Bloc de notas), UNIX (el editor vi o
ed) o el que ofrece MS Office (Word). El conjunto de etiquetas que se creen, se
deben guardar con la extensión .htm o .html
Estos documentos pueden ser mostrados por los visores o "browsers" de paginas
Web en Internet, como Netscape Navigator, Mosaic, Opera y Microsoft Internet
Explorer.
También existe el HTML Dinámico (DHTML), que es una mejora de Microsoft de la
versión 4.0 de HTML que le permite crear efectos especiales como, por ejemplo,
texto que vuela desde la página palabra por palabra o efectos de transición al
estilo de anuncio publicitario giratorio entre página y página.
A continuación vamos a hablar un poco de historia:
3.Orígenes del HTML
1986. Publicación de la ISO 8879 que presenta el Standard General Markup
Language, origen del HTML.
1989. Tim Berners-Lee, a la sazón en el Centro Europeo
de Investigaciones Nucleares presenta su artículo Information Management: A
Proposal dedicándose de lleno al desarrollo de un sistema que permitiera el
acceso en línea de manera uniforme a la información disponible en
muchos recursos distintos, y que pudiese funcionar en máquinas que conectadas
por redes basadas en TCP/IP.
1990-1991. Tim Berners-Lee define el HTML como un subconjunto de SGML
(Standard Generalized Markup Language), que más tarde se llamará nivel 0;
soporta encabezados, listas y anclas. Se crea el nombre World Wide Web.

1991. Tim Berners-Lee introduce el primer visor de HTML, LineMode, que trabaja
en modo texto y sólo en plataformas UNIX. El Centro Europeo de Investigaciones
Nucleares realiza la apertura del primer sitio con acceso público de World Wide
Web el 17 de mayo (http://info.cern.ch).
1992. Dan Connolly produce la primera Definición de Tipo de Documento (DTD)
para el lenguaje, llamada HTML 1.0, agregando a la definición original atributos
para modificar el estilo físico del texto. Se distribuye Viola, primer visor gráfico de
Web y disponible sólo para X.11.
1993. Un nuevo visor que soporta un mayor nivel, Lynx, es producido por
la Universidad de Kansas, si bien lee sólo texto. Aparece Mosaic, desarrollado por
el Centro Nacional para Aplicaciones de Supercomputadoras, es el primer visor de
Web en entorno gráfico que se hace disponible para computadoras personales, lo
que lo hace inmediatamente popular. A fines de año, comienzan a aparecer los
primeros artículos sobre WWW en diarios y revistas de circulación masiva. Tim
Berners-Lee utiliza el trabajo del año anterior de Connolly para presentar el
borrador de la primera norma (RFC -Recommendation for Comments) de HTML
para Internet.
1994. La Universidad Técnica de Graz desarrolla un servidor y clientes con
mayores prestaciones para HTML, Hyper-G, que no tiene gran éxito. Cello, primer
visor de HTML que no requiere TCP/IP presentado por la Escuela de Leyes de la
Universidad de Cornell. Dan Connolly y Karen Olson Muldrow redefinen el HTML
para el nivel 2.0, que ahora soportaformularios. Un grupo de programadores que
desarrollaran el Mosaic producen un nuevo visor de World Wide Web, Netscape
(también conocido como Mozilla), que tiene una amplia aceptación entre los
usuarios, pero que soporta elementos de programación que equivalen a una
degeneración del HTML (tamaños de letra, fondos). Se define un equivalente para
los modelos en tres dimensiones del HTML, el VRML (Virtual Reality Modeling
Language), que permite moverse dentro de los ambientes definidos. En este
mismo año se realizan la Primera y Segunda conferencias internacionales de
WWW, en Ginebra y Chicago, respectivamente. Se crea la W3 Organization.
1995. Dave S. Raggett (Hewlett-Packard, Inglaterra) comienza a compilar la
normativa del nuevo nivel del lenguaje, el HTML 3.0, cuya principal novedad es el
soporte de tablas. Microsoft produce su primer visor de Internet, el cual también
utiliza elementos de HTML degenerados. Una nueva versión de Netscape,
Navigator 2.0, agrega soporte de encuadres. Sun Microsystems produce el primer
visor de World Wide Web con soporte de un lenguaje de programación, HotJava.
Se celebran la Tercera y Cuarta conferencias internacionales de WWW, en Boston
y Darmstadt respectivamente, y la conferencia de WWW para Asia y el Pacífico en
Wagga-Wagga.
1996. Netscape Communications y Microsoft presentan las nuevas versiones de
sus visores que soportan gran parte del nivel de HTML 3.0. Aparecen visores no
comerciales que implementan la norma completa de HTML 3.0. Se formaliza un
nuevo nivel para la modelación en tres dimensiones, VRML 3.0, que permite
interactuar con los objetos definidos. Se celebra la Quinta conferencia
internacional de WWW en Rocquencourt.
1997. D. Raggett presenta, en enero, la versión normalizada del 3.2. En julio,

aparece la versión 4.0, experimental.
1998.HTML 4.0.
4. Creación de páginasweb con lenguaje
HTML
Para crear una página web se pueden utilizar varios programas especializados en
esto, como por ejemplo, el Microsoft Front Page o el Macromedia Dreamweaver 3.
Otra forma de diseñar un archivo .html, es copiar todo en el Bloc de Notas del
Windows, ya que este sencillo programa cumple con un requisito mínimo que es la
posibilidad de trabajar con las etiquetas con las que trabaja este lenguaje.
A continuación les mostraremos las etiquetas mas comunes que deben
aprenderse para hacer una pagina Web.
Estructura de los documentos de HTML
Si se tiene en cuenta el contenido del documento, todos los documentos de HTML
bien escritos comparten una estructura en común. Un documento de HTML
empieza con la etiqueta <HTML>, que es la que encerrará el documento actual.
Contiene dos secciones primordiales: la cabecera y el cuerpo encerradas
respectivamente por los elementos <HEAD> cabeza y <BODY> cuerpo.
La cabecera puede contener información y siempre contiene el titulo del
documento encerrado por el elemento <TITLE>.
En el cuerpo se encuentra todo el contenido del documento, ya sea,
texto, imágenes, sonidos, hipervínculos, etc.
Un documento escrito en HTML contiene las siguientes etiquetas en el siguiente
orden:
Ejemplo:
<HTML>
<HEAD>
<TITLE> Título de mi página de Internet </TITLE>
</HEAD>
<BODY>
<H1> <CENTER> Primera pagina </CENTER> </H1>
<HR>
Esta es mi primera pagina, aunque todavía es muy sencilla. Como el lenguaje
HTML no es difícil, pronto estaremos en condiciones de hacer cosas mas
interesantes.
<P> Aquí va un segundo párrafo.
</BODY>
</HTML>
Para escribir títulos se usa la etiqueta <Hx></Hx> en donde x es un número.
Ejemplo:
<h1>Titulo principal</h1>
<h2>Titulo secundario</h2>
<h3>Titulo terciario</h3>
<h4>Titulo cuarto nivel</h4>

<h5>Titulo quinto</h5>
<h6>Titulo sexto</h6>
Quedaría mas o menos así:
Titulo principal
Titulo secundario
Titulo terciario
Titulo cuarto nivel
Titulo quinto
Titulo sexto
5.ETIQUETAS DE PARRAFO
Para esto se utiliza la etiqueta <P> y </P>. Este comando es muy útil debido a que
si uno escribe algo (en el editor que se este utilizando) por mucho espacio que uno
le de siempre al texto, siempre va a aparecer en la misma línea.
Para alinear un párrafo se utiliza el comando <ALING> y </ALING>, utilizado
dentro de la etiqueta <P>. Se puede alinear de tres formas diferentes:
<p align="left"> Párrafo... </p> Alinea a la izquierda.
<p align="center"> Párrafo... </p> Realiza un centrado.
<p align="right"> Párrafo... </p> Alinea a la derecha.
Cuando nosotros queremos que lo que escribimos aparezca en otra línea
utilizamos el comando <BR>.
Al terminar de escribir un párrafo es conveniente y estético utilizar el comando
para separar un párrafo de otro que es <HR>
Etiquetas para darle formato al texto:
Para el tamaño y tipo de letra se usa la etiqueta <FONT> y </FONT>, que posee
tres atributos: tamaño (Size), Tipo de letra o fuente (face) y color
Formato:
<B> y </B> Sirve para colocar un texto en Negrita.
<U> y < /U> Sirve para subrayar un texto
<STRIKE> y </STRIKE> Sirve para tachar un texto.
<STRONG> y </STRONG> Cumple la misma función que <B>
<I> y <I> Para colocar un texto en cursiva.
<EM>texto con énfasis</EM> texto con énfasis
<CITE>citación</CITE> citación
<DFN>definición</DFN> definición
<KBD>teclado</KBD> teclado
<SAMP>ejemplo</SAMP> ejemplo
SIZE: Regula el tamaño de los caracteres.
Ejemplo:<font> texto... </FONT>.
FACE: Es la fuente que se quiere usar, Arial, Times new Roman, etc.

6.COMO INSERTAR UNA IMAGEN
A la hora de crear una página Web podemos introducir gráficos de forma muy
sencilla, sólo hay que tener en cuenta que las imágenes deben tener formato Gif o
JPEG.
La etiqueta utilizada para agregar imágenes a una página Web es <IMG> y va
acompañada de un atributo fundamental "SCR", que indica la ruta donde se
encuentra el archivo que contiene la imagen a insertar.
Es decir:
<IMG SRC="lugar donde guardo la imagen">
Supongamos que tenemos la imagen dragonball.gif, que está presente en el
mismo directorio en donde está la página y que la queremos insertar. La etiqueta
apropiada sería:
<IMG SRC="dragonball.gif">
Y el usuario verá en el browser:
Para poner la imagen en la izquierda escribir:
<IMG ALIGN=LEFT SRC=" dragonball.gif ">
A la derecha: <IMG ALIGN=RIGHT SRC=" dragonball.gif">
Y si se quiere poner la imagen en el centro:
<P ALIGN=CENTER> <IMG SRC=" dragonball.gif"> </P>
Hiperenlaces, Hyperlinks, Anclas o Links
Para definir un enlace es necesario marcar con la etiqueta <a> el objeto del cual
va a partir dicho enlace. Dicha directiva debe incluir el parámetro href="URL" para
especificar el destino del enlace. Es decir, que antes del objeto elegido debemos
abrir con <a href="URL">, y después cerrar con </a>. Por ejemplo, si queremos
que el texto "pulse aquí para visitar la NASA" nos conduzca a la "home page" de la
NASA, debemos escribir en nuestro texto HTML:
<a href="http://www.nasa.gov/">Pulse aquí para visitar a la NASA</a>
Que se vería de esta forma: Pulse aquí para visitar a la NASA
Si queremos que el texto "Foto" nos lleve a una imagen tenemos que escribir:
<a href="imagen.gif">Foto</a> entonces al hacer clic en el texto Foto nos abrirá la
imagen.gif.
También se puede ir a otro enlace por medio de una imagen. Lo único que se
debe hacer es cambiar el texto por una imagen:
<a href="http://www.altavista.com"><img src="Logo.jpg"></a>
Con esto tendremos por resultado que cuando se pase el puntero del mouse por
arriba del Logo.jpg (que podría ser el logo del Altavista) y se convierta en una
"manito", al hacer clic nos envíe al buscador Altavista.
Si se quiere hacer un link para que nos manden un E-Mail se debe hacer de la
siguiente manera:
<a href="mailto:pfravioli[arroba]fibertel.com.ar">Mandame un Email</a>

Entonces cuando se haga clic sobre esta palabra Mandame un Email se abrirá(por
defecto) el Microsoft Outlook Express con la dirección del destinatario ya escrita.
7.Etiqueta Iframe
Los frames (frame en inglés significa marco) son unas herramientas que han tenido una
historia dilatada en el desarrollo de páginas web con HTML. De ser una etiqueta no
estándar ha pasado a ser soportada por todos los navegadores y formar parte de las
especificaciones de HTML. Por otra parte, el frame siempre ha sido una utilidad para hacer
páginas web de uso, cuando menos, controvertido, puesto que tiene ciertas desventajas
que muchas veces son más importantes que la indudable practicidad.
Uso de iframe frente a frame
Actualmente la etiqueta iframe se utiliza más a menudo que la etiqueta frame, porque no
da tantos problemas como esta. La diferencia principal está basada en que la etiqueta
iframe no necesita una declaración de los espacios de los frames o frameset, porque se
incrusta en el código HTML de la página. El iframe, por tanto, no provoca problemas de
navegación, como los que ocurren con los frames normales si no se entra correctamente a
través del frameset.
Construcción de la etiqueta iframe
Como decimos, el iframe se coloca directamente en el código HTML, en el lugar donde
queremos que aparezca.
Se colocaría con un código como este:
<iframe src="pagina_fuente.html" width=290 height=250>Texto para cuando el
navegador no conoce la etiqueta iframe</iframe>
Todos los atributos de iframe
Estos serían los atributos disponibles para la etiqueta iframe:
src: Para indicar la página web que se mostrará en el espacio del frame flotante.
width: Para definir la anchura del recuadro del iframe
height: Para definir la altura del iframe
name: Para especificar el nombre del frame, que podemos utilizar luego para referirnos a
él con el target de los links, o mediante javascript.

id: Para indicar el identificador del iframe, y poder referirnos a él desde javascript.
frameborder: para definir si queremos o no que haya un borde en el frame. Los valores
posibles son 0 | 1. frameborder=0 indicaría que no queremos borde y frameborder=1 que
sí.
scrolling: indica si se quiere que aparezcan barras de desplazamiento para ver los
contenidos del iframe completo, en el caso que no aparezcan en el espacio reservado para
el iframe. Los valores posibles son: yes | no | auto. El valor "yes" es para que aparezcan
siempre las barras de desplazamiento o barras de scroll, "no" sirve para que no aparezcan
nunca y "auto" es para que aparezcan sólo cuando son necesarias (es el valor por defecto)
marginwidth: Para definir el margen a izquierda y derechar que debe tener la página que
va dentro del iframe, con respecto al borde. Este margen va en pixels, pero prevalecerá el
margen que pueda tener asignada la página web que mostremos en el frame flotante.
marginheight: lo mismo que marginwidth, pero en este caso para el tamaño del margen
por la parte de arriba y abajo.
margin: para especificar alineación del frame, igual que se especifica para las imágenes
8. Etiqueta <video>
Definición y Uso
La etiqueta <video> tag se usa para inserter videos en una página web. Actualmente hay 3
formatos de video soportado por la etiqueta <video> MP4, WebM, and Ogg:
Atributos
Attribute Value Description
autoplay autoplay Indica que el videose reproduce desde el
momentoque carga la página
controls controls Permite mostrar los controles de reproducción
para el video
height pixels Indica la altura del reproductor de video
loop loop Permite que el videose reproduzca
continuamente después de haber terminado
muted muted Silencia el audio del video

poster URL Muestra una imagenmientras que el video
carga o hasta que el cliente presione el botón
Play
preload auto Especifica comoel autor piensa que el video
deberá cargarsecuandola página carga
none
src URL Especifica el URL del video
width pixels Establece el anchodel reproductor de video
Biblografia
http://www.w3schools.com/tags/tag_video.asp
Formularios– etiqueta<form>
El estándar HTML/XHTML permite crear formularios para que los usuarios interactúen con
las aplicaciones web.
Formularios básicos
Los formularios más sencillos se pueden crear utilizando solamente dos
etiquetas: <form> y <input>
La etiqueta <form> encierra todos los contenidos del formulario (botones, cuadros de
texto, listas desplegables) y la etiqueta <input> permite definir varios tipos diferentes de
elementos (botones y cuadros de texto).

Etiqueta <form>
Atributos comunes básicos,internacionalización y eventos
Atributos propios
action = "url" - Indica la URLque se encarga de
procesar los datos del formulario
method = "POST o GET" - Método HTTP
empleado al enviar el formulario
enctype = "application/x-www-form-urlencoded
o multipart/form-data"- Tipo de codificación
empleada al enviar el formulario al servidor (sólo se
indica deforma explícita en los formularios que
permiten adjuntar archivos)
accept = "tipo_de_contenido" - Lista separada
por comas de todos los tipos de archivos aceptados
por el servidor (sólo para los formulariosque
permiten adjuntar archivos)
Otros: accept-charset,onsubmit, onreset
Etiqueta <input>
Atributos comunes básicos,internacionalización,eventos y foco
Atributos propios
type = "text | password | checkbox | radio |
submit| reset | file| hidden | image | button" -
Indica el tipo de control que se incluyeen el
formulario
name = "texto" - Asigna un nombre al control (es
imprescindiblepara queel servidor pueda procesar
el formulario)
value= "texto" - Valor inicial del control
size= "unidad_de_medida" - Tamaño inicial del
control (para los campos de texto y de password se
refiere al número de caracteres,en el resto de
controles se refiere a su tamaño en píxel)
maxlength = "numero" - Máximo número de
caracteres para los controles detexto y de
password
checked = "checked" - Para los controles
checkbox y radiobutton permite indicar quéopción
aparecepreseleccionada
disabled ="disabled" - El control aparece
deshabilitado y su valor no se envía al servidor
junto con el resto de datos

La mayoría de formularios utilizan sólo los atributos action y method. El
atributo action indica la URL de la aplicación del servidor que se encarga de procesar los
datos introducidos por los usuarios. Esta aplicación también se encarga de generar la
respuesta que muestra el navegador.
El atributo method establece la forma en la que se envian los datos del formulario al
servidor. Este atributo hace referencia al método HTTP, por lo que no es algo propio de
HTML. Los dos valores que se utilizan en los formularios son GET y POST. De esta forma,
casi todos los formularios incluyen el atributo method="get" o el atributo method="post".
Al margen de otras diferencias técnicas, el método POST permite el envío de mucha más
información que el método GET. En general, el método GET admite como máximo el envío
de unos 500 bytes de información. La otra gran limitación del método GET es que no
permite el envío de archivos adjuntos con el formulario. Además, los datos enviados
mediante GET se ven en la barra de direcciones del navegador (se añaden al final de la
URL de la página), mientras que los datos enviados mediante POSTno se pueden ver tan
fácilmente.
Elementos deformulario
Los elementos de formulario como botones y cuadros de texto también se
denominan "campos de formulario" y "controles de formulario". La mayoría de controles
se crean con la etiqueta <input>, por lo que su definición formal y su lista de atributos es
muy extensa:
readonly = "readonly" - El contenido del control
no se puede modificar
src = "url" - Para el control que permite crear
botones con imágenes, indica la URLde la imagen
que se emplea como botón de formulario

11.CONCLUSIONES
HTML es el idioma internacionl de la Red. Es un simple lenguaje que
permite a los publicadores we crear paginas de textos e imágenes,
que pueden ser vistas por cualquiera, sin que importe que clase de
ordenador o navegador este usando.
El lenguaje HTML puede ser creado y editado con cualquier editor
básico, como puede ser Gedit en Linux, el blog de notas de
Windows, o cualquier otro editor que admita texto sin formato
GNU Emacs, Microsoft Wordpad, entre otros.
Los atributos pueden tener asignado un valor característico, que se
incluye con el formato nombre=”..”.Este valor puede ser una opción
que dentro de una lista de posibilidades prefijas, un nombre de
fichero, un numero, etc.. por lo general, siempre se debe incluir el
valor entre dobles comillas, de forma que se respete la integridad
de la información.

20. BIBLIOGRAFIAS
Clarín
Guía práctica de Internet
Buenos Aires
Editorial Sol 90 Barcelona
1999
Volumen 14
Páginas 316 a 323
Masanti Luis Alejandro
Diseño WEB
Ciudad de Buenos Aires
Ñ Ediciones
Abril de 2000
Fascículo 01
Páginas 1 a 9
Sergio Talens Oliag - José Hernández Orallo
HTML. Manual de Referencia
Editorial Paraninfo
1996
Thomas A. Powell – Mc Craw Hill
Manual de Referencia HTML
Buenos Aires
Osborne
1999
Capitulo 2
http://librosweb.es/libro/xhtml/capitulo_8/elementos_de_formulario.html
http://www.w3schools.com/html/html_forms.asp

Trabajo reflexico 2 marco teorico

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Similar a Trabajo reflexico 2 marco teorico

Similar a Trabajo reflexico 2 marco teorico (20)

Último

Último (20)

Trabajo reflexico 2 marco teorico