Tema 1

Desarrollo Web Full Stack
Jesús Pérez Melero
Tema 1
Introducción al Front-End. HTML y CSS
Índice
► ¿Qué es el Front-End?
► Conceptos básicos de HTML
► Conceptos básicos de CSS
2
Índice
3
Qué es el Front-End
Front-End
“La parte de una aplicación web con la que los usuarios interactúan
de forma directa, el lado más cercano al cliente”
• Intervienen en su desarrollo un amplio espectro de factores (no

todos son técnicos)
– HTML: Lenguaje de marcado que indica la estructura de una
página web.
– CSS: Lenguaje de diseño que permite añadir estilos a un
documento HTML.
– JavaScript: Aporta dinamismo a la página web.
– Experiencia de usuario
– Usabilidad
4
Índice
5
HTML – Elementos (I)
• Un elemento HTML se indica

mediante un par de etiquetas de
apertura y cierre (<a>, </a>).
Dentro de ellas está el contenido
del elemento.
• Cada elemento define una parte

de la estructura del documento
HTML y tiene un propósito
concreto.
6
HTML – Elementos (II)
• <html>: Elemento raíz. Imprescindible
• <head>: Metadatos del documento

(hojas de estilo, título…)
• <title>: Título de la página HTML
• <body>: Cuerpo del documento HTML.

Agrupa el contenido visible de la página
• <h1>: Header de tipo 1
• <p>: Párrafo
• <br>: Salto de línea. Elemento vacío

(no necesita etiqueta de cierre)
7
HTML – Elementos (III)
• <html>: Elemento raíz. Imprescindible
• <head>: Metadatos del documento

(hojas de estilo, título…)
• <title>: Título de la página HTML
• <body>: Cuerpo del documento HTML.

Agrupa el contenido visible de la página
• <h1>: Header de tipo 1
• <p>: Párrafo
• <br>: Salto de línea. Elemento vacío

(no necesita etiqueta de cierre)
8
HTML – Elementos (IV)
• Aunque algunos elemento HTML pueda visualizarse correctamente

sin etiqueta de cierre, es una buena práctica incluir siempre
etiquetas de cierre.
• Los nombres de los elementos HTML no son case-sensitive. Es lo

mismo poner <p> que <P>. Se recomienda el uso de minúsculas
(W3C).
• Existe una gran variedad de elementos HTML. Puedes obtener más

información en la web del W3C.
9
HTML – Atributos (I)
• Los atributos se declaran junto al elemento HTML al que
pertenecen y sirven para indicar información adicional sobre
él.
• Todos los elementos HTML pueden tener atributos, aunque

no es obligatorio.
• Se declaran siempre en la etiqueta de apertura del elemento

HTML al que complementan.
• Son parejas clave/valor.
• El nombre en minúsculas y el valor entre comillas dobles
10
HTML – Atributos (II)
• src: Indica la ubicación de un recurso externo al documento HTML.
• href: Indica la URL de un enlace.
• width y height: Indican la anchura y altura de un elemento HTML.
11
HTML – Atributos (III)
• class: Indica la pertenencia de un elemento HTML a una clase. No

debemos pensar en el concepto “clase” de POO, sino en que uno o
varios elementos pertenecen a una “categoría”. El nombre que
indiquemos será case-sensitive.
• id: Asigna un identificador único a un elemento HTML.
• Son dos atributos que nos serán de gran ayuda cuando trabajemos
con estilos CSS.
12
HTML – Tablas (I)
• Las tablas son uno de los elementos HTML más utilizados.
Es muy común mostrar datos tabulados o incluso organizar la
estructura de una página HTML en base a una tabla.
• Para declarar una tabla en HTML debemos hacer uso de 4

elementos HTML diferentes:
– <table>: El elemento propio, indica que hay una tabla.
– <th>: Cabecera (primera fila) de la tabla.
– <tr>: Fila de una tabla.
– <td>: Una celda de la tabla.
• Si no utilizamos estilos, veremos el display por defecto de las

tablas en el navegador.
13
HTML – Tablas (II)
País No de Alumnos
España Ecuador
1000 1000
<table>
<tr>
<th>
<tr>
<td>
14
HTML – Formularios (I)
• Junto con las tablas, otro elemento ampliamente utilizado. Se
usa para enviar información al Back-End.
• Para trabajar con formularios utilizaremos los siguientes

elementos HTML:
– <form>: El elemento propio, indica que hay un formulario.
– <input>: Almacena la información del cliente.
– <label>: Etiqueta visual del formulario.
15
HTML – Formularios (II)
16
HTML – <Div>
• El elemento HTML <div> es el más utilizado cuando queremos
separar secciones dentro de nuestra página HTML.
• Con “secciones” nos referimos a diferentes partes dentro de la

página web (diferenciadas por temática, contenido…)
• Se trata como un “contenedor” de otros elementos HTML y

es muy común aplicar estilos comunes a todos los elementos
incluidos dentro de él.
• Los navegadores siempre suelen incluir una línea delante y otra

detrás de <div> (display block)
17
HTML – Display
• Existen dos tipos de display o modo de colocación de un
elemento HTML en pantalla.
– Block: Comienzan siempre en una nueva línea y abarcan el

ancho máximo posible. Tienen márgenes. Ejemplos son
<form>, <table>, <div>…
– Inline: Se incluyen en la misma línea en la que son

declarados. Abarcan el ancho mínimo necesario. Ejemplos
son <span>, <a>, <b>…
18
Índice
19
CSS
CSS (Cascading Style Sheets)
“Lenguaje de estilos usado para modificar la presentación de

los elementos HTML incluidos en uno o varios documentos”
• Es un lenguaje regulado por el W3C Consortium (al igual que

HTML)
• Busca únicamente aplicar formato y estilo a los documentos
HTML.
• Es posible trabajar con estilos sin archivos CSS (de forma inline)
pero no es una buena práctica (perjudica la separación de
funcionalidades y la mantenibilidad).
• Contiene muchas propiedades para los elementos HTML.

20
CSS – Sintaxis
• Selector: Indica sobre qué elemento o elementos HTML queremos

aplicar el estilo. En este caso es simple, todos los <p>.
• Propiedades: Aquellas propiedades del elemento que queremos

modificar. En este caso, color y text-align.
• Valores: El valor que queremos asignar a las propiedades. Green y

center.
21
CSS – Selectores (I)
• Simples: Se busca mediante nombre, identificador o clase.
22
CSS – Selectores (II)
• Combinados: Indica una relación entre dos elementos HTML que

debe cumplirse para ser seleccionados.
Descendant Selector Child Selector
Adjacent Sibling Selector General Sibling Selector
23
CSS – Selectores (III)
• De pseudo-clase: Selecciona elementos HTML en base a algún

tipo de evento.
• De atributos: Selecciona elementos HTML en base al valor de un

atributo.
24
HTML Y CSS
• Cuando queramos referenciar un archivo CSS en nuestro

documento HTML usaremos el elemento <link> dentro del
elemento <head> de nuestro archivo HTML.
25
Twitter Bootrstrap
• Librería ampliamente utilizada en el desarrollo Front-End. Fue

desarrollada por Twitter de forma interna y más tarde se hizo
pública.
• Nos provee de una gran cantidad de estilos CSS que hacen que
nuestras páginas luzcan mucho mejor. También trae scripts JS para
pequeñas animaciones.
• Soporte para diseño responsive.
• Más información
26
Twitter Bootrstrap – Componentes (I)
27
Twitter Bootrstrap – Componentes (II)
28
Twitter Bootrstrap – Grid (I)
29
Twitter Bootrstrap – Grid (II)
30
Twitter Bootrstrap – Grid (III)
31
¡Hands On!
33
Ejercicios en GitHub
► 1) Desarrollo de un CV Online – HTML y CSS

► 2) Desarrollo de un formulario de pago – Twitter Bootstrap
34
www.unir.net

Tema 1

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tema 1

Cargado por

Copyright:

Formatos disponibles

Desarrollo Web Full Stack

Jesús Pérez Melero

• Intervienen en su desarrollo un amplio espectro de factores (no

• Un elemento HTML se indica

• Cada elemento define una parte

• <head>: Metadatos del documento

• <title>: Título de la página HTML

• <body>: Cuerpo del documento HTML.

• <h1>: Header de tipo 1

• <br>: Salto de línea. Elemento vacío

• <head>: Metadatos del documento

• <title>: Título de la página HTML

• <body>: Cuerpo del documento HTML.

• <h1>: Header de tipo 1

• <br>: Salto de línea. Elemento vacío

• Aunque algunos elemento HTML pueda visualizarse correctamente

• Los nombres de los elementos HTML no son case-sensitive. Es lo

• Existe una gran variedad de elementos HTML. Puedes obtener más

• Todos los elementos HTML pueden tener atributos, aunque

• Se declaran siempre en la etiqueta de apertura del elemento

• Son parejas clave/valor.

• El nombre en minúsculas y el valor entre comillas dobles

• src: Indica la ubicación de un recurso externo al documento HTML.

• href: Indica la URL de un enlace.

• width y height: Indican la anchura y altura de un elemento HTML.

• class: Indica la pertenencia de un elemento HTML a una clase. No

• id: Asigna un identificador único a un elemento HTML.

• Para declarar una tabla en HTML debemos hacer uso de 4

• Si no utilizamos estilos, veremos el display por defecto de las

• Para trabajar con formularios utilizaremos los siguientes

• Con “secciones” nos referimos a diferentes partes dentro de la

• Se trata como un “contenedor” de otros elementos HTML y

• Los navegadores siempre suelen incluir una línea delante y otra

– Block: Comienzan siempre en una nueva línea y abarcan el

– Inline: Se incluyen en la misma línea en la que son

“Lenguaje de estilos usado para modificar la presentación de

• Es un lenguaje regulado por el W3C Consortium (al igual que

• Contiene muchas propiedades para los elementos HTML.

• Selector: Indica sobre qué elemento o elementos HTML queremos

• Propiedades: Aquellas propiedades del elemento que queremos

• Valores: El valor que queremos asignar a las propiedades. Green y

• Simples: Se busca mediante nombre, identificador o clase.

• Combinados: Indica una relación entre dos elementos HTML que

Descendant Selector Child Selector

Adjacent Sibling Selector General Sibling Selector

• De pseudo-clase: Selecciona elementos HTML en base a algún

• De atributos: Selecciona elementos HTML en base al valor de un

• Cuando queramos referenciar un archivo CSS en nuestro

• Librería ampliamente utilizada en el desarrollo Front-End. Fue

• Soporte para diseño responsive.

► 1) Desarrollo de un CV Online – HTML y CSS

También podría gustarte