Daw Lab01 HTML

Laboratorio de Desarrollo de Aplicaciones Web
Sesin 1: Pginas HTML

I. OBJETIVOS
-
Conocer las fundamentos de las pginas web

Utilizar las etiquetas bsicas HTML para muestra de informacin en pginas web.
II. TEMAS A TRATAR
HTML
Tags (etiquetas)
Formularios
III. MARCO TEORICO
HTML
HTML (Hyper Text Markup Language) es un lenguaje esttico que determina la estructura y
significado semntico de una pgina web. Se le utiliza para crear contenido y metada que los
navegadores usan para renderizar y mostrar la informacin.
Su contenido puede incluir texto, imgenes, audio, video, formularios, listas, tablas y muchos
otros tems. Una pgina HTML puede tambin contener enlaces (hyperlinks) los cuales
interconectan las pginas entre s, y con otros sitios web y recursos en cualquier lugar de internet.
Tags (etiquetas)
Los componentes de una pgina adquieren expresividad mediante tags. Los tags expresan
significado (de estructura o de comportamiento) a los diferentes elementos de la pgina.
Ejemplo:
<html>
El tag mostrado ubicado al inicio de un documento HTML le dice al navegador que el
documento es una pgina escrita en lenguaje HTML, de tal forma que pueda ser interpretada y
mostrada de acuerdo a lo que especifiquen los tags.
<html>
<head>
<title> Title Text Goes Here </title>
</head>
<body>
Content Area
</body>
</html>
Es una buena prctica usar identacin, tan igual que la usada en los lenguajes de programacin.
Esto facilitar la estructuracin visual de la pgina.
<html>
<head>
<title> Title Text Goes Here </title>
</head>
<body>Content Area</body>
</html>
Mgter. Jos Sulla,
El tag para incrustar hyperlinks es <a> (complementado con href). Ejemplo.

<a href="Pgina2.html">Otra</a>
Elemento Vaco
Descripcin corta

Inserta comentarios ocultos
<!DOCTYPE>
Establece el tipo de documento
<a>
Inserta vnculos o marcadores
<abbr>
Explica/expande abreviaciones
<acronym>
Explica/expande acrnimos
<address>
Muestra informacin de contacto del autor
<applet>
Inserta un applet (script)
<area>
Define sectores para un mapa de imagen
<b>
Convierte texto en negrita
<base>
Establece la URI base, usada para resolver URIs relativas
<basefont>
Establece el tamao de fuente por defecto para todo el documento
<bdo>
Anula el algoritmo bidireccional para su contenido
<big>
Muestra el texto en estilo de fuente "grande"
<blockquote>
Inserta una cita en forma de prrafo
Acta como contenedor para toda la parte representable del documento
<body>
(cuerpo)
<br>
Forza un quiebre de lnea
<button>
Crea un botn que permite contenido HTML (elementos)
<caption>
Establece un ttulo para una tabla
<center>
Muestra su contenido centrado
<cite>
Inserta una cita o referencia
<code>
Declara a su contenido como cdigo de computadora
<col>
Establece atributos generales para las columnas de una tabla
<colgroup>
Agrupa un nmero de columnas en una tabla
<dd>
Muestra una definicin en una lista de trminos y definiciones
<del>
Incluye texto que debera ser borrado o reemplazado (ya no vlido)
<dfn>
Asigna una definicin a un trmino
<dir>
Inserta una lista de directorio (rbol)
<div>
Define un bloque de contenido
<dl>
Inserta una lista de trminos y definiciones
<dt>
Inserta un trmino en una lista de trminos y definiciones
<em>
Indica nfasis para su contenido
<fieldset>
Agrupa controles en un formlario
<font>
Establece el estilo de fuente para su contenido
<form>
Inserta un formulario
<frame>
Inserta un marco simple
<frameset>
Inserta un conjunto de marcos
<h1>
Define un encabezado de nivel 1
Mgter. Jos Sulla,
Elemento
<h2>
<h3>
<h4>
<h5>
<h6>
<head>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<isindex>
<kbd>
<label>
<legend>
<li>
<link>
<map>
<menu>
<meta>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<p>
<param>
<pre>
<q>
<s>
<samp>
<script>
Mgter. Jos Sulla,
Vaco
Descripcin corta
Encierra el bloque de encabezado del documento (para las declaraciones
globales)
Dibuja una lnea horizontal
Acta como contenedor para el documento entero (encabezado y cuerpo)
Muestra su contenido con estilo de fuente itlica
Inserta un marco dentro del contenido del documento
Inserta una imagen
Muestra un control de entrada (texto, contrasea, casillas de verificacin, etc.)
Indica que su contenido ha sido insertado a un texto anterior en una
actualizacin
Provee una entrada de una sola lnea
Representa texto que es ingresado por el usuario
Establece una etiqueta para un control en un formulario
Asigna un ttulo para un "fieldset" (grupo de controles en un formulario)
Inserta un tem en una lista (para listas ordenadas y desordenadas)
Da infromacin relacional acerca del documento al vincularlo con otros
recursos
Define un mapa de imagen del lado cliente
Inserta una lista menu
Provee informacin acerca del documento en la forma de variables (nombre y
valor)
Provee contenido alternativo para marcos, mostrado cuando los mismos no
son soportados
Provee texto alternativo para scripts, mostrado cuando los mismo no son
soportados
Inserta aplicaciones externas (por ejemplo, animaciones /prlculas Flash)
Inserta una lista ordenada
Agrupa las opciones en un contro "select"
Define una opcin en un control "select"
Inserta un prrafo
Establece un parmetro para un objeto insertado
Muestra texto preformateado, usualmente con fuente de ancho fijo y
respetando espacios
Inserta una cita a nivel de lnea
Muestra texto tachado
Representa la salida de un programa
Acta como contenedor para scripts del lado cliente
Elemento
<select>
<small>
<span>
<strike>
<strong>
Vaco
<style>
<sub>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<title>
<tr>
<tt>
<u>
<ul>
<var>
Descripcin corta
Crea un control select (lista desplegable de opciones)
Muestra trexto en duente "pequea"
Encierra un trozo de texto (en lnea), til para asignar atributos a su contenido
Muestra texto tachado
Indica nfasis fuerte para su contenido
Contiene cdigo de hojas de estilo que definen atributos visuales para el
documento
Inserta texto como subndice
Inserta texto como superndice
Acta como contenedor para la informacin de una tabla
Define un cuerpo en una tabla
Inserta una celda regular en un tabla
Crea una entrada de lneas mltiples
Define un pie para una tabla
Inserta una celda de encabezado en una tabla
Define un encabezado en una tabla
Define un ttulo para el documento completo
Inserta una fola de celdas en una tabla
Muestra texto de mquina de escribir
Muestra texto subrayado
Inserta una lista desordenada
Indica una instancia de una vatiable
IV. ACTIVIDADES (La prctica tiene una duracin de 2 horas)
I. Pgina Web Raw:

1. Aplicacin web inicial: Cree una carpeta donde colocar sus pginas HTML.
2. Pgina Home: Cree un archivo Home con extensin .html y muestre informacin en prrafos (tag
<p>).
II. Aplicacin Web vaca (con IDE):

1.
2.
3.
4.
5.
6.
Aplicacin web inicial: Utilizando el IDE del Visual Studio, cree una aplicacin web vaca ASP.Net.
Pgina Home: Dele click derecho al proyecto y agregue un nuevo elemento de tipo Pgina HTML.
Ttulo en pestaa: Establezca un texto de su aplicacin a aparecer en la pestaa del navegador.
Pgina Name: Agregue una nueva pgina web donde se muestren sus nombres.
Pgina Surname: Agregue una nueva pgina web donde se muestren sus apellidos.
Enlaces a otras pginas: Configure dos hyperlinks en Home.html, uno para direccionar hacia su
pgina de nombres y el otro para direccionar a su pgina de apellidos.
7. Pgina principal: Establezca su pgina principal a home.html.
8. Retorno: Modifique sus pginas de nombres y de apellidos para que puedan retornar a home.
Mgter. Jos Sulla,
V. Ejercicios
1. Aplicacin web inicial: Utilizando el IDE del Visual Studio, cree una aplicacin web vaca ASP.Net.
2. Pgina Home: Dele click derecho al proyecto y agregue un nuevo elemento de tipo Pgina HTML.
3. Formulario: Desarrolle un formulario de contacto simple.
VI. Cuestionario
1. Qu es HTML?
2. Cules son los principales tags de una estructura de pgina web?
3. Qu son eventos?
VII. Bibliografa y referencias

Dennis Gaskill; Web standard tutorials; 1997.
W3 Organization; Global attributes; 2013.
Emmet; Tools for web-developers; 2013.
Sublime Text; Editor for code, markup and prose; 2013.
Mgter. Jos Sulla,

Daw Lab01 HTML

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Daw Lab01 HTML

Enviado por

Direitos autorais:

Formatos disponíveis

Laboratorio de Desarrollo de Aplicaciones Web

Sesin 1: Pginas HTML

Conocer las fundamentos de las pginas web

II. TEMAS A TRATAR

III. MARCO TEORICO

Mgter. Jos Sulla,

Laboratorio de Desarrollo de Aplicaciones Web

El tag para incrustar hyperlinks es <a> (complementado con href). Ejemplo.

Mgter. Jos Sulla,

Laboratorio de Desarrollo de Aplicaciones Web

Mgter. Jos Sulla,

Laboratorio de Desarrollo de Aplicaciones Web

IV. ACTIVIDADES (La prctica tiene una duracin de 2 horas)

I. Pgina Web Raw:

II. Aplicacin Web vaca (con IDE):

Mgter. Jos Sulla,

Laboratorio de Desarrollo de Aplicaciones Web

VII. Bibliografa y referencias

Mgter. Jos Sulla,

Você também pode gostar