Tarea WTL No.2
Cargado por
ScribdTranslationsTarea WTL No.2
Cargado por
ScribdTranslationsDepartamento de Ingeniería Informática Asunto: Laboratorio de Tecnología Web
Fecha prevista de finalización:……………………………………
Fecha real de finalización:…………………………………….
Tarea número: 2
Título: Diseñar y desarrollar cualquier sitio web adecuado para el cliente utilizando HTML y
CSS.
Objetivo:
1. Comprender el concepto básico de HTML y etiquetas HTML.
2. Comprender los conceptos de CSS y sus diferentes formas de implementar CSS en una
página web.
Planteamiento del problema:
Implemente una página web index.html para el sitio web de cualquier cliente (por ejemplo, un
proyecto de sitio web de restaurante) usando lo siguiente:
a. Sintaxis HTML: etiquetas de encabezado, etiquetas y atributos básicos, marcos, tablas,
imágenes, listas, enlaces para texto e imágenes, formularios, etc.
b. Uso de CSS interno, CSS en línea, CSS externo.
Resultados:
El estudiante podrá,
1. Diseñar una página web estática utilizando HTML.
2. Aplicar CSS a páginas HTML.
Requisitos de software y hardware:
Bloc de notas, navegador
Teoría
a. HTML : HTML es un lenguaje de marcado estándar para crear páginas web.
• HTML significa lenguaje de marcado de hipertexto.
• HTML describe la estructura de las páginas web.
• Los elementos HTML son la piedra angular de las páginas HTML.
• Los elementos HTML están representados por etiquetas.
• El navegador no muestra las etiquetas HTML, pero las utiliza para representar el
contenido de la página.
etc.
• La etiqueta HTML etiqueta piezas de contenido como "encabezado", "párrafo", "tabla",
• Las etiquetas HTML están rodeadas por los dos caracteres < y >. Los caracteres circundantes se
denominan corchetes angulares.
• Las etiquetas HTML normalmente vienen en pares como <b> y </b>
• La primera etiqueta de un par es la etiqueta de inicio, la segunda etiqueta es la etiqueta de final
• El texto entre las etiquetas de inicio y fin es el contenido del elemento.
<B>
• Las etiquetas HTML no distinguen entre mayúsculas y minúsculas, <b> significa lo mismo que
Versiones HTML:
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
HTML 2000
HTML5 2014
¿ Extensión HTM o HTML?
Cuando guarda un archivo HTML, puede utilizar la extensión .htm o .html. Hemos utilizado .html en
nuestro ejemplo.
Ejemplo: crear una página web sencilla
1. Inicie el Bloc de notas.
2. Escribe el siguiente texto
<html>
<cabeza>
<título>Título de la página</título>
</cabeza>
<cuerpo>
Esta es una página web muy básica. <b>Este texto se mostrará en negrita</b>
</cuerpo>
</html>
3. Guarde el archivo como ".html".
4. Haga doble clic en el archivo guardado y el navegador mostrará la página.
EJEMPLO EXPLICADO:
La primera etiqueta en su documento HTML es <html>. Esta etiqueta le indica a su navegador
que este es el comienzo de un documento HTML. La última etiqueta de su documento es
</html>. Esta etiqueta le indica a su navegador que este es el final del documento HTML. El
texto entre la etiqueta <head> y la etiqueta </head> es información del encabezado. La
información del encabezado no se muestra en la ventana del navegador. El texto entre las
etiquetas <title> es el título de su documento. El título se muestra en el título de su navegador. El
texto entre las etiquetas <body> es el texto que se mostrará en su navegador. El texto entre las
etiquetas <b> y </b> se mostrará en negrita.
ATRIBUTOS:
Las etiquetas pueden tener atributos . Los atributos pueden proporcionar información adicional
sobre los elementos HTML de su página. Esta etiqueta define el elemento del cuerpo de su página
HTML: <cuerpo>. Con un atributo bgcolor agregado, puede decirle al navegador que el color de
fondo de su página debe ser rojo, así: <body bgcolor="red">. Los atributos siempre vienen en
pares nombre/valor como este: nombre="valor". Los atributos siempre se agregan a la etiqueta de
inicio de un elemento HTML. ESTILOS DE COTIZACIÓN, ¿"ROJO" O "ROJO"?
Los valores de los atributos siempre deben estar entre comillas. Las comillas de estilo doble son
las más comunes, pero también se permiten comillas de estilo simple. En algunas situaciones
poco comunes, como cuando el valor del atributo contiene comillas, es necesario utilizar comillas
simples:
ENCABEZADOS
Los encabezados se definen con las etiquetas <h1> a <h6>. <h1> define el encabezado más
grande. <h6> define el encabezado más pequeño. La etiqueta de encabezado siempre tiene una
etiqueta de apertura (<) y de cierre</>.
HTML agrega automáticamente una línea en blanco adicional antes y después de un título.
PÁRRAFOS
El elemento HTML <p> define un párrafo. El <p> proporciona una ruta para estructurar su texto
en diferentes párrafos.
Ejemplo: <p>Este es otro párrafo</p>
HTML agrega automáticamente una línea en blanco adicional antes y después de un párrafo.
SALTOS DE LÍNEA
La etiqueta <br> se utiliza cuando desea finalizar una línea, pero no desea comenzar un párrafo
nuevo. La etiqueta <br> fuerza un salto de línea dondequiera que la coloques.
COLOR Y FUENTE
<b> <i> <u> especifica negrita, cursiva y subrayado respectivamente. La etiqueta de énfasis
<em>especifica que su contenido textual es especial y debe mostrarse de la misma manera que
indica esta distinción. La etiqueta fuerte <strong> es como la etiqueta de énfasis. define el texto
es importante.
ENLACES
Básicamente, el hipertexto no es lineal, lo que significa que los l8inks se utilizan para conectar
una web con otra. HTML utiliza hipervínculos para conectarse de una página a otra de la web. Se
utiliza una etiqueta de anclaje<a> …….</a> para crear un enlace.
Sintaxis: <a href =”url”> </a>
Aquí, una etiqueta de inicio tiene un atributo "href" que declara la URL por la que se navegará.
IMÁGENES COMO HIPERVÍNCULOS
La imagen también puede actuar como hipervínculo al igual que el texto normal. Así como el
texto se crea como un punto de acceso, también lo es como una imagen. es decir, encerrando la
etiqueta <img> dentro de las etiquetas <a>….</a>.
Sintaxis: <a href= “abc.html”> <imag src=”target.gif”> </a>
MESAS
Una tabla HTML consta de un elemento <table> y uno o más elementos <tr>, <th> y <td>. Para
definir una fila de la tabla, utilice el elemento <tr>, mientras que los elementos <th> definen un
encabezado de tabla y el elemento <td> define una celda de la tabla.
<borde de tabla="1">
<tr>
<td>fila 1, celda 1</td>
<td>fila 1, celda 2</td>
</tr>
<tr>
<td>fila 2, celda 1</td>
<td>fila 2, celda 2</td>
</tr>
</tabla>
Cómo se ve en un navegador:
fila 1, celda 1 fila 1, celda 2
fila 2, celda 1 fila 2, celda 2
MARCOS
La etiqueta HTML <FRAME> se utiliza para especificar cada marco dentro de una etiqueta de
conjunto de marcos. Cada <frame> en un <frameset> puede tener diferentes atributos, como
borde, desplazamiento, capacidad de cambiar el tamaño, etc.
Ejemplo:
<html>
<cabeza></cabeza>
<filas del conjunto de marcos =”50%, 50%>
<nombre del marco src=“cuadro 1” src= “cuadro1.html>
<marco melena src= “cuadro 2” src= “marco2.html”>
</conjunto de marcos>
</html>
Producción:
LIZA
La etiqueta HTML <li> se utiliza para especificar un elemento de lista en listas de definición
ordenadas y desordenadas.
HTML tiene tres tipos de listas. < ol > muestra una lista ordenada mientras que < ul > una
desordenada, y para hacer una lista de definiciones se usa < dl >.
<ul>- una lista desordenada
<ol> - Una lista ordenada
<dl> - Una lista de definiciones
FORMAS
Se utiliza un formulario HTML para recopilar la entrada del usuario. La entrada del usuario suele
enviarse a un servidor para su procesamiento. HHTML Proporciona etiquetas para generar los
objetos utilizados habitualmente en un formulario de pantalla. Hay controles para la colección de
texto de una sola línea y de múltiples líneas, casillas de verificación, botones de opción y menús,
entre otros. Todas las etiquetas de control son etiquetas en línea.
b. CSS: CSS significa Hoja de estilo en cascada. No es más que un lenguaje de diseño destinado
a simplificar el proceso de hacer que las páginas web sean presentables. CSS maneja la sensación
y el aspecto de una página web. Al usar CSS, se puede controlar el color del texto, el estilo de las
fuentes, el espacio entre párrafos y los diseños de diseño.
CSS es fácil de aprender, fácil de entender y proporciona un potente control en la presentación de
un documento HTML.
Ventajas de CSS:
Ahorra tiempo, las páginas se cargan más rápido, fácil mantenimiento, estilos superiores a
HTML, compatibilidad con múltiples dispositivos, estándares web globales, navegación sin
conexión, independencia de plataforma
Un CSS se compone de reglas de estilo que el navegador interpreta y luego aplica a los elementos
correspondientes de su documento. Una regla de estilo se compone de tres partes:
• Selector : un selector es una etiqueta HTML a la que se aplicará un estilo. Podría ser cualquier
etiqueta como <h1> o <table>, etc.
• Propiedad : una propiedad es un tipo de atributo de una etiqueta HTML. En pocas palabras,
todos los atributos HTML se convierten en propiedades CSS. Podrían ser color , borde , etc.
• Valor : los valores se asignan a las propiedades. Por ejemplo, la propiedad de color puede tener
el valor rojo o #F1F1F1 , etc.
Puede poner la sintaxis de la regla de estilo CSS de la siguiente manera: selector {propiedad: valor}
Selector
Declaración
k
El
valor de la propiedad Propiedad Valor
Técnicas utilizadas para implementar CSS en una página web:
1. En línea : al utilizar la técnica CSS en línea, podemos aplicar CSS en un solo elemento. El
CSS en línea también es un método para insertar hojas de estilo en un documento HTML. Este
método mitiga algunas ventajas de las hojas de estilo, por lo que se recomienda utilizarlo con
moderación.
Si desea utilizar CSS en línea, debe utilizar el atributo de estilo en la etiqueta correspondiente.
Sintaxis:
<htmltag style="cssproperty1:valor; cssproperty2:valor;"> </htmltag>
Ejemplo:
<h2 style="color:red; margin-left:40px;">Se aplica CSS en línea en este encabezado.</h2>
<p>Este párrafo no se ve afectado</p>
Producción:
Se aplica CSS en línea en este encabezado.
Este párrafo no se ve afectado.
2. Interno: mediante el uso de un archivo CSS interno. La hoja de estilo interna se utiliza para
agregar un estilo único a un solo documento. Se define en la sección <head> de la página HTML
dentro de la etiqueta <style>.
Ejemplo:
<html>
<cabeza>
<estilo>
cuerpo {
color de fondo: lino;
}
h1 {
color rojo;
margen izquierdo: 80px;
}
</estilo>
</cabeza>
<cuerpo>
<h1>La hoja de estilo interna se aplica en este encabezado. </h1>
<p>Este párrafo no se verá afectado. </p>
</cuerpo>
</html>
3. Externo: mediante el uso de un archivo CSS externo. Se utiliza una hoja de estilo externa para
definir el estilo de muchas páginas HTML. Con una hoja de estilo externa, puedes cambiar el
aspecto de un sitio web completo, ¡cambiando un archivo! Para utilizar una hoja de estilo
externa, agregue un enlace en la sección <head> de la página HTML.
Ejemplo: <enlace rel="hoja de estilo" href="estilos.css">
• Utilice el elemento HTML <head> para almacenar elementos <style> y <link>
• Utilice la propiedad de color CSS para los colores del texto
• Utilice la propiedad CSS font-family para fuentes de texto
• Utilice la propiedad CSS font-size para tamaños de texto
• Utilice la propiedad de borde CSS para los bordes
• Utilice la propiedad de relleno CSS para el espacio dentro del borde
• Utilice la propiedad de margen CSS para el espacio fuera del borde
Pasos de diseño y ejecución
Los siguientes pasos se utilizan para crear y ejecutar aplicaciones web,
1. Escriba el código HTML en el bloc de notas y guárdelo con la extensión .html.
2. Escriba el código CSS en el bloc de notas y guárdelo con la extensión .css.
3. Importar archivo CSS en página HTML.
4. Abra la página HTML en el navegador.
Casos de prueba
Las pruebas manuales se utilizan para comprobar si CSS se aplica o no.
Conclusión
Por lo tanto, hemos diseñado la página web estática utilizando HTML y CSS.
