WebMTIG2019 2

Clase 2
Descripción del Contenido

HTML
CSS
HTML y CSS
‣ Browser sabe como desplegar lo que le entrega el

server porque el lenguaje es standard: HTML
‣ HTML se conoce como un lenguaje de marcas

(markup language) porque combina contenido con
instrucciones de estructura
‣ Antiguamente incluía tambien instrucciones de formato

pero ellas se han separado ahora en otro standard:
CSS
‣ CSS especifica la forma en que debe desplegarse un

determinado elemento de HTML (selector)
“Type a quote here.”
–Johnny Appleseed
Lenguajes de Marcado
‣ HTML - Hypertext Markup Language
‣ ¿ Por qué se escogió ?
‣ contenido + estructura
‣ no interesaba formato (papers científicos)
‣ simple
‣ fácil de implementar
‣ fácil de aprender
Un Ejemplo
<h1> La Web </h1>

<h2> Capitulo 1 </h2>
<p> Primer parrafo. Bla, bla, bla .... </p>
<p> Segundo parrafo. Bla, bla, bla ...</p>
Etiquetas <ul> Una lista de temas
<li> Primer item de la lista </li>
<li> Segundo item de la lista </li>
<li> Tercer item de la lista </li>
Contenido </ul>
<h2> Capitulo 2 </h2>
...
Contenido Estructurado
La Web
Capitulo 1
Primer parrafo. Bla, bla, bla ....
Segundo parrafo. Bla, bla, bla ...
Una lista de temas
  Primer item de la lista
  Segundo item de la lista
  Tercer item de la lista
Capitulo 2
...
Etiquetas,elementos, atributos
‣ etiquetas permiten separar contenido de instrucciones

de estructura
‣ existen distintos tipos de etiqueta (h1, h2, img, p, etc.)
‣ delimitadores de etiqueta < >
‣ una etiqueta puede incluir atributos
‣ un atributo es un par clave: valor en que el valor va

siempre entre comillas (ej. src = "img.jpg")
Evolución de HTML
‣ Varias versiones desde 1990
‣ HTML 4 desde 1998
‣ set de etiquetas limitado
‣ h1, h2, h3, h4, h5, h6, p, a, img, ol, ul, li, table, tr, td
‣ HTML 5 vigente
‣ elementos estructurales adicionales
‣ soporte para elementos gráficos, audio, video
‣ No habrá HTML 6 (es una especificación dinámica)

Estructura del Documento
‣ Encabezado <head>
‣ <title>
‣ otras etiquetas opcionales
‣ Cuerpo <body>
‣ lo más importante
‣ estructura mas contenido entremezclado
‣ elementos mas usados son muy pocos
‣ headers en 6 niveles <h1> a <h6>
‣ párrafos <p>
‣ listas de elementos <ul> <ol> <li>
‣ imágenes <img>
‣ links <a>
Ejemplo
<html>
<head>
<title>Un Ejemplo</title>
</head>
<body>
<h1>El Comienzo</h1>
<p> Este es el primer parrafo </p>
<ol>Y esta una lista de elementos

<li> primero </li>
<li> segundo </li>
</ol>
<a href="http://www.google.com"> Ir a Google </a>
<img src="http://i1.wp.com/venturebeat.com/wp-content/uploads/2014/10/google-logo.jpg" align="right"

width="100 px" />
</body>
</html>
Agregando Estructura con <div> y <span>
‣ Uno puede designar a un segmento arbitrario del

documento como una división <div>
‣ Si el segmento es de parte deun párrafo o línea

corresponde a un <span>
‣ Asociado a instrucciones de formato que veremos mas

adelante
Tablas
‣ Casi no hay página Web que no incluye una etiqueta

<table>
‣ La mayoría no describe tablas
‣ Se usa(ba)n para controlar el posicionamiento de los

elementos
‣ Hoy en día existen mejores mecanismos para controlar

el posicionamiento (CSS)
Tablas se describen fila a fila
‣ comienza tabla con <table>
‣ repetir para cada fila
‣ comienza fila con <tr> (table row)
‣ comienza item de la fila con <td> (table data)
‣ cierra item con </td>
‣ cierra fila con </tr>
‣ cierra tabla con </table>

Ejemplo Simple de Tabla
<table>
<tr>
<th>Color</th>
<th colspan=2>Descripción </th>
</tr>
<tr>
<td>Rojo</td>
<td>malo</td>
<td>1</td>
</tr>
<tr>
<td>Café</td>
<td rowspan=2>muy malo</td>
<td>2</td>
</tr>
<tr>
<td>Azul</td>
<td>3</td>
</tr>
</table>
Demo Html
https://repl.it/@jnavon/SimpleHtmlPage
Demo Tablas
https://repl.it/@jnavon/SimpleTableExample
Control de la Presentación
‣ Se usan hojas de estilo
‣ Estandar CSS (cascade style sheets)
‣ CSS -> CSS2 -> CSS3
‣ Permiten especificar como debe ser presentado cada

elemento HTML
‣ Especifica una lista de reglas
‣ Cada regla incluye un selector y las propiedades

asociadas a él
Reglas CSS
‣ selector { propiedad1:valor1;
propiedad2:valor2
}
‣ Ejemplos
h1 {text-align: center}
h1, h2, h3 {text-align: center}

Ventajas de Usar CSS
‣ contenido puede ser presentado en diferentes formas
‣ documentos mas simples (crear y leer)
‣ estilo consistente en todas las páginas
‣ se facilita mantención del sitio
‣ las páginas cargan más rápido (más cortas)

Mismo HTML distinto CSS
Tres lugares para CSS
‣ estilos inline
‣ como atributo de un elemento
‣ específico para la etiqueta en que aparece
‣ estilos a nivel del documento
‣ en el documento html mismo
‣ específico para esa página
‣ estilos en hoja externa
‣ en un archivo externo (extensión .css)
‣ aplica a todos quienes lo referencien
Inline
‣ atributo style de cualquier elemento
‣ lista de elementos atributo:valor;

En el documento
En hoja externa
‣ en la sección correspondiente al <head>
‣ usar etiqueta link con atributos

‣ rel = stylesheet"
‣ type = "text/css"
‣ href = "nombrearchivo.css"
‣ Ejemplos
‣ <link rel="stylesheet" type="text/css" href="style.css" />
‣ <link rel="stylesheet" type="text/css" href="http://www.google.com/uds/css/

gsearch.css" />
Pagina = HTML + CSS
Web Get http://www-alfa.com/test.html

Web
Browser Server
...
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
...
Get http://www-alfa.com/style.css
...
p {}
h2 {
background-color: #ffc329;
color: black;
}
h1 {
text-align: center;
...
Clases
‣ selectores asociados a etiquetas html hace que todos

queden iguales
‣ se puede manejar una individualidad con estilo inline
‣ que hacer si por ejemplo hay dos grandes grupos de

párrafos
‣ solución: párrafos de distintas clases

Ejemplos de Clases
Reglas de Aplicación de Estilos
‣ inline predomina sobre documento
‣ documento predomina sobre hoja externa
‣ último estilo para una etiqueta predomina sobre previo
‣ etiqueta interna (hija) hereda atributos de su padre

Herencia
‣ Documento HTML puede ser visto como un árbol
‣ En el siguiente ejemplo las propiedades de <ul> son

heredadas por <li>
‣ casi todos heredan propiedades del <body>

Ejemplo de Herencia
html
head body
h1 p ul
Comienzo Una lista li li li
Primero SegundoTercero
Atributos de Texto: Fuente
‣ font-family
‣ si no está instalada usa default del

browser
‣ se suele especificar alternativas

para ese caso
‣ pueden usarse familias genéricas
‣ serif, sans-serif, cursive,

monotype, fantasy
‣ buena práctica: genérica al final
‣ { font-family: Verdana, Arial, sans-

serif; }
Atributos de Texto: Tamaño
‣ font-size
‣ unidades absolutas
‣ pt (points), pc (picas), px (pixel), in, cm, mm
‣ unidades relativas
‣ em - tamaño actual de letra
‣ ex - tamaño de una x
‣ %
‣ predefinidas
‣ small, medium, large, x-large, x-small
Atributos de Texto: Alto de la línea
‣ line-height
‣ pueden usarse valores absolutos o relativos

Trabajo Práctico con HTML y CSS
‣ Todos los archivos están en la carpeta "Ejercicio 1" en el Google Drive del curso
‣ Descargar el archivo Ejercicio1a.txt (html)
‣ Descargar el archivo Ejercicio1b.txt (css)
‣ Cambie los nombres a Ejercicio1a.html y Ejercicio1b.css
‣ Cargue el archivo Ejercicio1a.html en su navegador favorito y revise el contenido
‣ Descargue el siguiente archivo Ejercicio1.pdf con una versión modificada del

documento y revíselo bien
‣ Modifique los dos archivos Ejercicio1a.html y Ejercicio1b.css de modo que al cargar el

primero en su browser se vea lo mas parecido posible al pdf descargado (no se fije en
la paginación ni en los tamaños exactos)
‣ Poner los dos archivos en una carpeta con su apellido y comprimirlas con zip
‣ Enviar al profesor

WebMTIG2019 2

Cargado por

Información del documento

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

WebMTIG2019 2

Cargado por

Copyright:

Formatos disponibles

Clase 2

Descripción del Contenido

‣ Browser sabe como desplegar lo que le entrega el

‣ HTML se conoce como un lenguaje de marcas

‣ Antiguamente incluía tambien instrucciones de formato

‣ CSS especifica la forma en que debe desplegarse un

‣ HTML - Hypertext Markup Language

‣ ¿ Por qué se escogió ?

‣ no interesaba formato (papers científicos)

<h1> La Web </h1>

‣ etiquetas permiten separar contenido de instrucciones

‣ existen distintos tipos de etiqueta (h1, h2, img, p, etc.)

‣ delimitadores de etiqueta < >

‣ una etiqueta puede incluir atributos

‣ un atributo es un par clave: valor en que el valor va

‣ Varias versiones desde 1990

‣ HTML 4 desde 1998

‣ set de etiquetas limitado

‣ elementos estructurales adicionales

‣ soporte para elementos gráficos, audio, video

‣ No habrá HTML 6 (es una especificación dinámica)

<p> Este es el primer parrafo </p>

<ol>Y esta una lista de elementos

<a href="http://www.google.com"> Ir a Google </a>

<img src="http://i1.wp.com/venturebeat.com/wp-content/uploads/2014/10/google-logo.jpg" align="right"

‣ Uno puede designar a un segmento arbitrario del

‣ Si el segmento es de parte deun párrafo o línea

‣ Asociado a instrucciones de formato que veremos mas

‣ Casi no hay página Web que no incluye una etiqueta

‣ La mayoría no describe tablas

‣ Se usa(ba)n para controlar el posicionamiento de los

‣ Hoy en día existen mejores mecanismos para controlar

‣ comienza tabla con <table>

‣ repetir para cada fila

‣ comienza fila con <tr> (table row)

‣ comienza item de la fila con <td> (table data)

‣ cierra item con </td>

‣ cierra fila con </tr>

‣ cierra tabla con </table>

‣ Estandar CSS (cascade style sheets)

‣ CSS -> CSS2 -> CSS3

‣ Permiten especificar como debe ser presentado cada

‣ Especifica una lista de reglas

‣ Cada regla incluye un selector y las propiedades

h1, h2, h3 {text-align: center}

‣ contenido puede ser presentado en diferentes formas

‣ documentos mas simples (crear y leer)

‣ estilo consistente en todas las páginas

‣ se facilita mantención del sitio

‣ las páginas cargan más rápido (más cortas)

‣ atributo style de cualquier elemento

‣ lista de elementos atributo:valor;

‣ en la sección correspondiente al <head>

‣ usar etiqueta link con atributos

‣ <link rel="stylesheet" type="text/css" href="http://www.google.com/uds/css/

Web Get http://www-alfa.com/test.html

‣ selectores asociados a etiquetas html hace que todos

‣ se puede manejar una individualidad con estilo inline

‣ que hacer si por ejemplo hay dos grandes grupos de

‣ solución: párrafos de distintas clases

‣ inline predomina sobre documento

‣ documento predomina sobre hoja externa

‣ último estilo para una etiqueta predomina sobre previo