Desarrollo web - Season 01

•

SIN SIGLA

Jonazhino

11/2/2024

¡Este material tiene más páginas!

Entonces, ¿te gustó este material?

Ayude a animar a otros estudiantes a mejorar el contenido

¿Te gustó este material? ¡Compartir! 🧡

Desarrollo Web

6935 Materiales compartidos

Descarga la aplicación para disfrutar aún más

Lea materiales sin conexión, sin usar Internet. Además de muchas otras características!

Vista previa del material en texto

Objetivo de la sesión:
● Utilizar un editor para la programación HTML
● Realizar estructuras básicas de programación Front - End con el uso de las
etiquetas HTML.
Propósito de la sesión
Competencia del perfil de egreso : La asignatura DISEÑO WEB, que corresponde al
área de estudios de Especialidad, contribuye al logro del perfil de egreso,
específicamente a la(s) competencia(s):
- CE3: DESARROLLO DE SOFTWARE
- CG4: COMUNICACIÓN ORAL Y ESCRITA
Resultado de Aprendizaje de la Unidad 01:
R1: Realiza diseños web con herramientas de diseño gráfico y maquetado web básico.
Contribuye al logro
Contribuye al logro
3
Contenidos
Creación de páginas web
HTML y CSS
…un poco de historia
Sintaxis HTML
Estructura de una página web
4
• Los diseñadores web deben dominar dos lenguajes
fundamentales a la hora de crear sitios web: el HTML (HyperText
Markup Language) y el CSS (Cascading Style Sheets). Las
últimas versiones de estos dos lenguajes, el HTML5 y el CSS3,
revolucionarán la forma de crear sitios web ofreciendo nuevas
posibilidades de estructura, formato y composición.
HTML y CSS
6
• El lenguaje HTML es el resultado del trabajo del W3C (World Wide
Web Consortium).
• en 2004 se formó el Web Hypertext Application Technology
Working Group, WHATWG . Disidentes del W3C que realizaron
varias propuestas de mejora al HTML. Fueron los que dieron los
primeros pasos al HTML actual.
• Una primera especificación en Working Draft llamada "HTML 5
aparece el 22 de enero de 2008 (http://www.w3.org/TR/2008/WD-
html5-20080122/). El W3C tomó como referencia las
investigaciones de WHATWG
• En la actualidad, el HTML5 está en Recommendation
(http://www.w3.org/TR/html5/). Actualmente ambos grupos firmaron
un acuerdo de colaboración.
7
Algo de historia…
http://www.w3.org/TR/2008/WD-html5-20080122/
http://www.w3.org/TR/html5/
• Asegurar la compatibilidad con lo que ya existe..
• La especificación describe con detalle lo que deben hacer los navegadores,
lo que estos deben mostrar. En el HTML 4.01 había muchos puntos
"oscuros", muchas imprecisiones, y cada navegador hacía lo que mejor le
parecía.
• La especificación regula por fin la gestión de los errores. Si un documento no
es correcto, ¿qué deberá mostrar el navegador? Por ejemplo, si nos
encontramos con <strong>< em> texto </strong> </em>, ¿qué deberá
mostrar el navegador?
• Gestionar correctamente la interoperabilidad, la compatibilidad de los
navegadores (especificar una gestión idéntica del DOM – Modelo de objetos
del documento).
8
Objetivos del HTML5
• En la actualidad, abril 2021, es posible utilizar HTML5 sin riesgos
ni problemas, si exceptuamos a aquellas personas que utilicen
navegadores "muy antiguos". Todos los navegadores web
modernos reconocen e interpretan muy bien el HTML5.
Podemos usar HTML5 en cualquier
navegador
9
Estas dos URL le permitirán validar la sintaxis de sus páginas web
en HTML5 y CSS:
• http://validator.w3.org/
• http://jigsaw.w3.org/css-validator/
La sintaxis en HTML5
10
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
• La primera línea de todo documento HTML corresponde a la
declaración del tipo de documento: el doctype. Esta DTD
(Document Type Declaration) sirve para indicar qué versión del
lenguaje HTML se ha utilizado en el documento.
El doctype
Esta sería la DTD de un documento HTML 4.01 transicional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
La declaración de la DTD en HTML5 no puede ser más sencilla:
<!DOCTYPE html>
11
• El elemento <html> indica, en una página web, el inicio del
contenido de la página HTML.
• Bastará con precisar el idioma de la página. Eso es todo.
El documento HTML
Esta sería la sintaxis completa en XHTML 1.0 estricto:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"
lang="es" >
Esta sería la sintaxis en HTML5:
<html lang="es" >
12
Se suele indicar qué codificación de caracteres se ha usado en una
página web. Antes se indicaba dos veces: en un elemento meta, en
la cabecera http, y en el contenido, con el atributo charset.
La codificación de los caracteres
En HTML 4.01 transicional:
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
En HTML5
<meta charset="UTF-8" />
13
• Utilizando Editor, ingresar el esquema base para el documento
HTML5
14
Ejercicio 01
<div>Texto de prueba</div>
15
Etiquetas
Nombre de la
etiqueta
Nombre del
atributo1
Valor del
atributo1
Nombre del
atributo2
Valor del
atributo2
Contenido de
la etiqueta
Cierre de la
etiqueta
Los valores de los atributos no pueden contener espacios en
blanco, ni caracteres especiales como eñes o tildes
<div id=“id1” class=“clase1”>Texto de prueba</div>
Cierre de la
etiqueta
Contenido de
la etiqueta
• Cuando incorpore texto en sus páginas web, debe situarlo en
contendores. Incluso aunque sea perfectamente válido no situar el
texto en ningún contenedor, conviene evitar esta práctica. En
efecto, si lo hace así, no podrá acceder al texto, de modo que no
podrá asignarle un formato.
• Tiene a su disposición todos los contenedores necesarios: para
los títulos, para el texto común, para crear listas…
17
Contenedores de Texto
• El lenguaje HTML5 proporciona seis tamaños de letra para los
títulos. Cuando se sabe que título en inglés se dice heading, la
creación de la etiqueta de título se hace evidente: <h> por
heading seguido de un número 1 (para el más grande), 2, 3, 4, 5,
6 (para el más pequeño) y el símbolo > de cierre. En adelante,
usaremos la notación <hx> ... </hx> donde x es un nivel de 1 a 6.
18
Títulos
Contenedores de texto
Ejercicio 01
• Un contenido de tipo texto gana en legibilidad y compresión
cuando está dividido en distintos párrafos.
• Para definir un párrafo, se utiliza la etiqueta <p> ... </p>.
19
Párrafos
Contenedores de texto
Ejercicio 02
• Las citas se escriben por delante del contenido de tipo texto
mediante las etiquetas <blockquote> ... </blockquote>. Y <q>….
</q>
20
Citas
Contenedores de texto
Ejercicio 03
• Las listas, muy conocidas por los usuarios de procesadores de
texto, son una forma muy eficaz de estructurar un contenido de
tipo texto.
1. Listas ordenadas
• La etiqueta <ol> ... </ol> escribe una lista ordenada.
• la etiqueta <ul> ... </ul> escribe una lista no ordenada
–Se definen a continuación, en el interior de estas etiquetas, los elementos de la
lista mediante las etiquetas <li> ... </li>.
• la etiqueta <dl> ... </dl> escribe una lista de definiciones
–Entre estas etiquetas, se declara lo que se llama el término mediante la etiqueta
<dt> ...< /dt>, seguida de su descripción en la etiqueta <dd> ... </dd>.
21
Listas
Contenedores de texto
22
Ejercicio 04
Contenedores de texto
• El trazo horizontal puede ser muy útil para definir un cambio en el
contenido. La etiqueta <hr> realiza esta función.
23
Separadores horizontales
Contenedores de texto
Ejercicio 05
• La etiqueta <pre> ... </pre> permite visualizar el texto tal y como
se ha codificado en el editor de texto. Los espacios, tabulaciones
y retornos de carro se respetan tal cual en la pantalla.
24
Texto preformateado
Ejercicio 06
Contenedores de texto
• Hemos visto los principales contenedores semánticos de texto,
vamos a estudiar el formato semántico del texto. Una vez situados
sus textos en contenedores, de tipo párrafo <p> principalmente,
podrá aplicar elementos HTML de formato que son también
semánticos. Es decir, el formato dará sentido al contenido
correspondiente, no es un simple formato gráfico.
25
Formato semántico de texto
• Para escribir un texto en negrita (bold en inglés), basta con incluirlo entre las
etiquetas <b> ... </b>.
• Para escribir un texto en cursiva (italic en inglés), hay que incluirlo entre las
etiquetas <i> ... </i>.
• La etiqueta <sup> ... </sup> escribe el contenido en exponente y la
etiqueta <sub> ... </sub> en subíndice.
• Parasubrayar un texto, hay que incluirlo entre las etiquetas <u> ... </u>.
• Para tachar un texto, hay que incluirlo entre las etiquetas <s> ... </s>.
26
Algunos formatos semánticos
Formato semántico
El W3C anuncia la separación estricta entre contenido y presentación. HTML se encarga solamente de la
estructura del documento, y las hojas de estilo CSS se encargan de todo el aspecto relacionado con el
formato visual.
Algunos formatos básicos del texto, como la negrita, la cursiva, los exponentes y subíndices, todavía pueden
aplicarse dentro de las etiquetas HTML
• Realizar el siguiente párrafo
27
Ejercicio 07
Formato semántico
• Las páginas web que va a diseñar deben estar estructuradas con
contenedores. Se trata de contenedores que permiten construir la
arquitectura de las páginas web. Estos contenedores van a
contener tipos de contenido variados: una barra de navegación,
una columna lateral, encabezados, pies de página.
• Con la aparición de HTML5, el W3C nos propone toda una serie
de contenedores estructurales semánticos.
28
Contenedores semánticos
• Las cajas <div> se usan a menudo para disponer de contenidos
"neutros", sin necesidad de tener un contenido semántico preciso.
• En HTML5 aparecen nuevos contenedores semánticos precisos, sin
embargo, ¡No por utilizar HTML5 debe abandonarse el uso de cajas
<div>! ¡Sigue siendo posible usarlas y siguen teniendo su utilidad!
29
El elemento <div>
Contenedor Semántico
• El elemento <span> se utiliza a menudo para realizar una división
dentro de un párrafo de texto, por ejemplo. Resulta muy práctico para
poner en un formato particular un texto que esté formateado de otra
manera
El elemento <span>
30
Ejercicio 08
Contenedor Semántico
39
Ejercicio: Realizar una
página web para
mostrar información de
un club deportivo

40
Ejercicio: Vista rápida
del HTML generado
41
Encabezado
42
Cuerpo (Parte 1)
43
Cuerpo (Parte 2)
Validar su código
• Crear favicon: http://www.genfavicon.com/es/
• Crear y guardar en carpeta img
44
Insertar un favicon
http://www.genfavicon.com/es/
45
Otros estilos que puede aplicar
Estilo al fondo de la página
Estilo al título y párrafo
Estilo al encabezado de las tablas
Estilo al título de la página
46
Ejercicio: Vista final
después de aplicar
algunos formatos
PaginaClub01: página básica (como
se presenta el wireframe y la vista final)
PáginaClub02: MEJORAR LA
PRESENTACIÓN DE LA PÁGINA DEL
CLUB (conforme se van desarrollando
los temas)
47
• El lenguaje HTML es el más usado para para programación
Front – End.
• HTML actual es HTML5 y constantemente se está
actualizando.
• Las etiquetas HTML nos servirán para formar la estructura
de las paginas Web
Conclusiones