Scribd
Cargar
69 vistas

Clase 1 - Java - HTML CSS Javascript

Este documento describe los fundamentos de HTML, CSS y JavaScript para el desarrollo de páginas web. Explica la estructura básica de una página web con las secciones head y body de HTML, y cómo CSS se usa para dar estilo y apariencia mediante selectores y propiedades. También menciona JavaScript para interactividad y Bootstrap como marco CSS para facilitar el diseño responsive.

Cargado por

paulchiclayo
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
69 vistas

Clase 1 - Java - HTML CSS Javascript

Este documento describe los fundamentos de HTML, CSS y JavaScript para el desarrollo de páginas web. Explica la estructura básica de una página web con las secciones head y body de HTML, y cómo CSS se usa para dar estilo y apariencia mediante selectores y propiedades. También menciona JavaScript para interactividad y Bootstrap como marco CSS para facilitar el diseño responsive.

Cargado por

paulchiclayo
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 12

HTML CSS JAVASCRIPT

FUNDAMENTOS
ESTRUCTURA DE UNA APLICACIÓN - PÁGINA WEB

● Párrafos ● Tablas
Estructura ● Encabezados ● Capas
● Listas ● Etc.
HTML

● Textos
Contenido ● Imágenes
● Enlaces

● Colores ● Fondos
Apariencia ● Tipografías ● Tamaños CSS
● Alineación ● Etc

● Efectos
Comportamiento ● Validaciones JAVASCRIPT
● Automatización
ELEMENTO HTML

ELEMENTO

Etiqueta de apertura Contenido Etiqueta de cierre

<p class=“texto”> Curso JAVA WEB </p>


NOMBRE VALOR

ATRIBUTO
ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML

<!DOCTYPE html>
<html lang="es">
<head>
<title>Título</title>
<!– Encabezado de la web. Aquí incluiremos metainformación
y cargaremos componentes y estilos utilizados en la web-->
</head>
<body>
<!– Cuerpo de la web. Aquí escribiremos el contenido-->
…..
</body>
</html>
La sección HEAD

● Contiene metainformación de la página


● Establecemos título y palabras clave para los buscadores
● Incluimos hojas de estilo (CSS) a utilizar en la página
● Podemos introducir código javascript a usar en nuestra página.
La sección BODY

● Alberga el "contenido" real de la página.


● Establece cómo se visualizan los elementos.
● Hace uso de los scripts y hojas de estilo definidos en la sección
HEAD.
● En este punto tenemos a nuestra disposición de todos los tags
disponibles para maquetar nuestra página.
DEFINICIÓN DE ESTILOS CSS
● Un selector es un identificador para saber sobre qué elemento HTML
debemos aplicar el estilo.
● Existen diferentes tipos de selectores.
● Se pueden crear jerarquías de estilos.
● Podemos definir estilos por defecto para los elementos HTML estándar.
● Los estilos pueden sobreescribir a otro, el orden de sobreescritura es el
mismo en el que se cargan los ficheros css o se lee el fichero.
● Si queremos que un estilo prevalezca sobre el resto, podemos indicarlo
con !important
Tipos de selectores:

● De elemento HTML:
○ h1, table, div, span…
● De identificador (#)
○ Todos los elementos HTML cuya propiedad "id" tenga un
determinado valor, tendrán ese estilo.
● De clase (.)
○ Todos los elementos HTML cuya propiedad "class" tenga un
determinado valor tendrán ese estilo.
•CSS3 como mejora de CSS incorpora propiedades para una
mejor maquetación y decoración de los elementos.
•Se han añadido propiedades para aplicar efectos de pintado.
•Se permiten realizar animaciones.
•Habilita el uso de lógica en los CSS.
•Ejemplo de dibujado HTML + CSS: Minion
BOOTSTRAP

● Framework CSS que facilita a los desarrolladores la


maquetación de las páginas.
● Incluye un conjunto de clases CSS para maquetar de
manera fácil una página a cualquier resolución.
● Es mantenido y actualizado por Twitter.
● Está optimizado para dispositivos móviles.
● Permite un diseño “Responsive”
● Boostrap incluye un conjunto de estilos para hacer
nuestra web responsive.
● Es un framework potente y complejo por lo que para
profundizar a fondo requiere conocimientos amplios de
CSS.
● No obstante no es necesaria una gran experiencia para
conseguir una maquetación de calidad que sea
“responsive”,

También podría gustarte