Scribd
Cargar
75 vistas

CLASE 2 - HTML y Css

Este documento presenta una introducción al lenguaje HTML y CSS. Explica que HTML se utiliza para estructurar el contenido de una página web mediante etiquetas, mientras que CSS se usa para dar formato y estilo a ese contenido. Luego describe algunas etiquetas HTML básicas como <head>, <body>, <p>, así como la sintaxis básica de CSS incluyendo selectores, declaraciones y propiedades. El documento proporciona una guía inicial sobre estos lenguajes fundamentales para el desarrollo web.

Cargado por

David Edison Perez Campos
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
75 vistas

CLASE 2 - HTML y Css

Este documento presenta una introducción al lenguaje HTML y CSS. Explica que HTML se utiliza para estructurar el contenido de una página web mediante etiquetas, mientras que CSS se usa para dar formato y estilo a ese contenido. Luego describe algunas etiquetas HTML básicas como <head>, <body>, <p>, así como la sintaxis básica de CSS incluyendo selectores, declaraciones y propiedades. El documento proporciona una guía inicial sobre estos lenguajes fundamentales para el desarrollo web.

Cargado por

David Edison Perez Campos
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 27

CURSO: FUNDAMENTOS DE

LA PROGRAMACIÓN
Carrera: Computación
Docente: Ing. Alejandra Ugarte
Ing. Ugarte Alejandra
Ingeniero Electrónico
Especialización en sistemas y automática
Desarrolladora JavaScript - FrontEnd
CLASE 2
TEMA 1: HTML
¿Qué es HTML?
HTML es uno de los lenguajes principales que se utiliza en el desarrollo web, y significa Lenguaje de
Marcado para HiperTextos (HyperText Markup Language), esta conformado por elementos a los que
llamamos etiquetas, que son interpretadas por el navegador y éste las despliega o renderiza en la
pantalla según su objetivo. En resumen, el HTML determina el contenido de la pagina web pero no su
funcionalidad, es decir, la estructura base.

HTML le da "valor añadido" a un texto estándar en español. HiperTexto se refiere a enlaces que
conectan una página Web con otra, ya sea dentro de una página web o entre diferentes sitios web.
los vínculos son un aspecto fundamental de la Web. Al subir contenido a Internet y vincularlo a
páginas de otras personas, te haces participante activo de esta Red Mundial.

Para empezar a programar con html nos bastará con un editor de texto ya sea Notepad++, Visual
Studio Code, block de notas, Atom, Sublime, etc. Y luego para poder probar los archivos .html se
requiere de un navegador de internet (Chrome, IExplorer, FireFox, Safari, Microsoft Edge, etc).
HTML5

HTML 5 es la quinta revisión más importante que se hace al lenguaje HTML. En esta
versión, se introducen nuevas características para ayudar a los autores de
aplicaciones Web, y se ha prestado especial atención a la definición de claros
criterios de conformidad para los agentes de usuario (navegadores) en un esfuerzo
por mejorar la interoperabilidad.
La especificación actual de HTML 5 la podemos consultar en el siguiente enlace
https://www.w3.org/TR/html5/
Sintaxis de las etiquetas
Las etiquetas están compuestas por una palabra reservada que define su
funcionalidad y por paréntesis angulares “<tag_name>”. Existen dos tipos de
etiquetas: las etiquetas de apertura (opening tag) y las etiquetas de cierre (closing
tag), las etiquetas siempre deberán ir en pares con su respectivo inicio y fin.
Nombre de la etiqueta

< section > </ section >


Opening tag closing tag
Estructura básica de una página web
<!DOCTYPE HTML>
<html>
<!--cabecera de la pagina -->
<head>
<!-- Comentario -->
<title>Etiqueta para el título de la pestaña</title>
<meta charset="UTF-8"> <!-- Etiqueta meta para compatibilidad de caracteres -->
</head>
<!--cuerpo de la pagina -->
<body>
<h1>Títulos de la página</h1>
<p>Etiqueta para texto</p>
<button>Etiqueta para botón</button>
</body>
</html>
Clasificación de las etiquetas

Elemento raíz
Elemento Descripción

<!doctype html> Define que el documento esta bajo el estándar de HTML 5

Representa la raíz de un documento HTML o XHTML. Todos los


<html> demás elementos deben ser descendientes de este elemento.
Clasificación de las etiquetas
Metadatos del documento
Elemento Descripción

<head> Representa una colección de metadatos acerca del documento, incluyendo enlaces a, o definiciones de, scripts y hojas de estilo.

Define el título del documento, el cual se muestra en la barra de título del navegador o en las pestañas de página. Solamente puede
<title> contener texto y cualquier otra etiqueta contenida no será interpretada.

<base> Define la URL base para las URLs relativas en la página.

<link> Usada para enlazar JavaScript y CSS externos con el documento HTML actual.

<meta> Define los metadatos que no pueden ser definidos usando otro elemento HTML.

<style> Etiqueta de estilo usada para escribir CSS en línea.


Clasificación de las etiquetas
Scripting

Elemento Descripción
Define ya sea un script interno o un enlace hacia un script externo.
<script> El lenguaje de programación es JavaScript
Define un contenido alternativo a mostrar cuando el navegador no
<noscript> soporta scripting.
Clasificación de las etiquetas
Secciones
Elemento Descripción

<body> Representa el contenido principal de un documento HTML. Solo hay un elemento <body> en un documento.

<section> Define una sección en un documento.

<nav> Define una sección que solamente contiene enlaces de navegación

<article> Define contenido autónomo que podría existir independientemente del resto del contenido.

Define algunos contenidos vagamente relacionados con el resto del contenido de la página. Si es removido, el contenido restante
<aside> seguirá teniendo sentido

<h1>,<h2>,<h3>,<h4>,<h5>, Los elemento de cabecera implementan seis niveles de cabeceras de documentos; <h1> es la de mayor y <h6> es la de menor
<h6> importancia. Un elemento de cabecera describe brevemente el tema de la sección que introduce.

Define la cabecera de una página o sección. Usualmente contiene un logotipo, el título del sitio Web y una tabla de navegación de
<header> contenidos.

Define el pie de una página o sección. Usualmente contiene un mensaje de derechos de autoría, algunos enlaces a información
<footer> legal o direcciones para dar información de retroalimentación.

<address> Define una sección que contiene información de contacto.

<main> Define el contenido principal o importante en el documento. Solamente existe un elemento <main> en el documento.
Clasificación de las etiquetas
Agrupación de contenidos
Elemento Descripción
<p> Define una parte que debe mostrarse como un párrafo.

<hr> Representa un quiebre temático entre parrafos de una sección o articulo o cualquier contenido.

<pre> Indica que su contenido esta preformateado y que este formato debe ser preservado.

<blockquote> Representa una contenido citado desde otra fuente.


<ol> Define una lista ordenada de artículos.
<ul> Define una lista de artículos sin orden.
<li> Define un artículo de una lista ennumerada.

<dl> Define una lista de definiciones, es decir, una lista de términos y sus definiciones asociadas.

<dt> Representa un término definido por el siguiente <dd>.


<dd> Representa la definición de los terminos listados antes que él.
<figure> Representa una figura ilustrada como parte del documento.
<figcaption> Representa la leyenda de una figura.

<div> Representa un contenedor genérico sin ningún significado especial.


Referencias Bibliográficas

• https://www.w3.org/TR/html5/
• http://www.tutorialesprogramacionya.com/htmlya/
• http://www.tutorialesprogramacionya.com/htmlya/html5/
• https://developer.mozilla.org/en-
US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
• https://www.w3schools.com/html/
TEMA 2: CSS
¿Qué es CSS?

Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje utilizado para describir la
presentación de documentos HTML o XML, esto incluye varios lenguajes basados en XML como
son XHTML o SVG. El lenguaje CSS describe como debe ser renderizado el elemento estructurado en
pantalla.
El lenguaje CSS es uno de los lenguajes base de la Open Web y posee una especificación
estandarizada por parte del W3C. Desarrollado en niveles, CSS1 es ahora obsoleto, CSS2.1 es una
recomendación y CSS3, ahora dividido en módulos más pequeños, está progresando en camino al
estándar.
¿Por qué usar CSS?

El CSS ayuda a mantener la información de contenido de un documento separado de los detalles de


como mostrarlo. Los detalles de como se muestra el documento son conocidos como estilos. Si
mantienes los estilos separados del contenido puedes:
 Evitar duplicación
 Hacer el mantenimiento más simple
 Usar el mismo contenido con diferentes estilos para diferentes propósitos.
En general con HTML, usas el lenguaje de marcado para describir la información del contenido del
documento, no sus estilos. Usas CSS para especificar sus estilos, no su contenido. (Más adelante en
este tutorial, verás algunas excepciones a este acuerdo).
Sintaxis de una regla de CSS

 Una regla de estilos no es mas que un grupo de declaraciones agrupadas en un bloque, el cual es
identificado mediante un selector.
 El selector apunta a un elemento o etiqueta html puede ser el nombre de una etiqueta, una clase o un id.
Además debe contener las declaraciones entre corchetes.
 Las declaraciones están compuestas por una propiedad y su valor, para separarlos se colocan dos puntos,
y las declaraciones están separadas entre sí por punto y coma.
Ejemplo: h3
{
background-color: white;
font-size: 12px
}
Selectores de clase
Un selector sencillo puede tener diferentes clases, permitiendo así al mismo elemento tener diferentes estilos.

p.color1 { color: #191970 }


p.color2 { color: #4b0082 }
Aquí se han creado dos clases, color1 y color2 para usar con el elemento p de HTML. El atributo class se usa en
HTML para indicar la clase de un elemento, por ejemplo:

<p class=“clase1 clase2 clase…..”></p>

Solo se permite una clase por selector. Por ejemplo, p.clase1.clase2 no es válida. Las clases también pueden ser
declaradas sin elementos asociados:
.nota { font-size: small }

En este caso, la clase nota puede usarse con cualquier elemento.

Existen metodologías para definir las clases css como por ejemplo la metodología BEM.
Selectores de ID

Los selectores ID son asignados individualmente con el propósito de una definición en términos 'por elemento'.
Este tipo de selector debería ser usado con moderación debido a sus inherentes limitaciones. Un selector ID se
asigna mediante el uso del indicador "#" para preceder un nombre. Por ejemplo, un selector ID podría asignarse
así:

#svp94O { text-indent: 3em }

Esto sería referenciado en HTML por el atributo ID:

<p id=“svp94O”>Texto de ejemplo</p>


Selectores de contexto
Los selectores de contexto son simples cadenas de dos o más selectores simples separados por
espacio en blanco. A estos selectores se les pueden asignar propiedades normales y, debido a las
reglas del orden de cascada, tendrán precedencia sobre selectores simples. Por ejemplo, el selector
de contexto en:
p span { background: yellow }
Declaración alternativa: p > span { background: yellow}

es p span. Esta regla dice que el span dentro del párrafo debería tener un fondo amarillo; el texto con
énfasis en un encabezado no sería afectado.

A fin de disminuir declaraciones repetitivas dentro de hojas de estilo, se permite el agrupamiento de


selectores y declaraciones. Por ejemplo, todos los encabezados en un documento podrían tener
idénticas declaraciones mediante un agrupamiento:
H1, H2, H3, H4, H5, H6 { color: red; font-family: sans-serif }
CSS en la etiqueta HTML

<!DOCTYPE html>
<html>
<head>
<title>Título</title>
<meta charset="UTF-8">
</head>
<body>
<h1 style="color:#ff0000;background-color:#ffff00">
Este mensaje es de color rojo sobre fondo amarillo.
</h1>
</body>
</html>
CSS
<!DOCTYPE html>
a nivel de página
<html>
<head>
<title>Título</title>
<meta charset="UTF-8">
<style>
h1 {color:#ff0000;background-color:#ffff00}
/* comentario */
// comentario
</style>
</head>
<body>
<h1>
Este mensaje es de color rojo sobre fondo amarillo.
</h1>
</body>
</html>
Importando una hoja de estilos
<!DOCTYPE html>
<html>
<head>
<title>Título</title>
<meta charset="UTF-8">
<link rel=“stylesheet” href=“./style.css”/>
</head>
<body>
<h1>
Este mensaje es de color rojo sobre fondo amarillo.
</h1>
</body>
</html>
Algunas propiedades de CSS
Propiedad Descripción Valores

[ [ font-style || font-variant || font-weight ]?


font-size [ / line-height ]? font-family ]
font propiedad compuesta
| caption | icon | menu | message-box| small-
caption | status-bar

[ nombre-fuente | familia-genérica ] [, nombre-


font-family tipo de letra (fuente)
fuente | familia-genérica ]*

tamaño-absoluto | tamaño-relativo | distancia |


font-size tamaño
porcentaje
font-style inclinación (cursiva) normal | italic | oblique
font-variant versalitas normal | small-caps

normal | bold | bolder | lighter | 100 | 200 | 30


font-weight grosor del trazo (negrita)
0 | 400 | 500 | 600 | 700 | 800 | 900
Algunas propiedades de CSS
Propiedad Descripción Valores
color color del texto color
direction dirección del texto ltr | rtl
letter-spacing espacio entre caracteres normal | distancia

line-height espaciado entre líneas normal | número | distancia | porcentaje

text-align alineación del texto center | justify | left | right

text-decoration decoración del texto none | blink | line-through | overline | underline

text-indent sangría de la primera línea distancia | porcentaje

text-transform mayúsculas / minúsculas none | capitalize | lowercase | uppercase

desplazamiento horizontal, desplazamiento vertical, tamaño


text-shadow(3) sombreado
desenfoque, color

unicode-bidi dirección del texto normal | embed | bidi-override

baseline | bottom | middle | sub | super | text-


vertical-align alineación vertical
bottom | text-top | top | distancia | porcentaje

white-space espacios en blanco, saltos de línea y wrap normal | nowrap | pre | pre-line(+) | pre-wrap(+)

word-spacing espacio entre palabras normal | distancia


Referencias Bibliográficas

• https://www.w3schools.com/css/default.asp
• https://developer.mozilla.org/es/docs/Web/CSS/Como_iniciar/Que_es
_CSS
• http://www.tutorialesprogramacionya.com/cssya/
• http://www.mclibre.org/consultar/amaya/css/css-propiedades.html

También podría gustarte