tema02 html

Marco Aedo López

2012

Aplicaciones Web I

HTML

ContenidoIntroducciónDocumentos HTML básicosFormateo de textoHipervínculosColores e imágenesTablas

HTML

IntroducciónHTML

Hypertext Markup LanguageLos archivos HTML contienen instrucciones que describen cómo debe desplegarse texto, imágenes y multimedia en un navegador (browser)Los más famosos

Internet Explorer, MicrosoftMozilla FirefoxOtros: Chrome, Opera, etc.

HTML

Se crean con cualquier editor de texto y tienen etiquetas (marcas o tags) que describen la estructura, estilo y otras características del documento.<etiqueta>contenido</etiqueta>Como cada navegador las interpreta es posible que un mismo documento no tenga la misma apariencia

HTML

<p> aca va el texto de un parrafo </p>

Etiqueta Inicial

Contenido Etiqueta Fnal

ELEMENTO

HTML

<p align=“center”> aca va el texto de un parrafo </p>

Atributo Valor

HTML

Documentos HTML básicos<html>

<head></head><body></body>

</html>Cabeza del documento (head), contiene la descripción y el título del documentoCuerpo del documento (body), información a ser desplegada (texto, imágenes, hipervínculos a otros documentos)

HTML

Ejemplo

Las etiquetas (tags) se definenentre < >. Generalmente son pares.

Las de inicio usan el nombre delelemento y las finales un slash,

HTML

Todo entre <head> y </head > se considera la introducción del documento. En este caso tiene una línea que define el título del documento, el texto entre <title> y </title> aparece en la barra de título del navegador.

Todo lo que esté entre <body> y </body> se considera el cuerpo. Los navegadores solo prestan atención a las etiquetas

HTML

Formateo de textosExisten muchas etiquetas para dar formato al texto.Para que el navegador entienda cómo dar formato al texto cada parte debe estar marcada con una etiqueta.Para indicar qué párrafos existen en el texto se utiliza el elemento:<p>…</p>

HTML

Estudiantes2.html

HTML

Estudiantes2 Nótese que P no sedespliega, en su lugar se

deja unalínea en blanco.

HTML

Algunos elementos de texto HTML Elemento Efecto u subrayado

b negrita

i itálica

strong tipo fuerte, usado con negritas

em Énfasis, usado con itálicas

strike Una línea debajo del texto

tt tipo máquina de escribir

big Un punto más grande que el tamaño de font actual

small Un punto menos

sub Subíndice

sup Superíndice

blink Intermitente

q Cita corta

blockquote Cita larga

HTML

Muchos elementos pueden estar anidados para producir combinaciones de efectos.Una buena práctica es quitar lo anidado en el orden inverso en que fueron anidados.

<p><i><b>Estudiantes distinguidos</b></i></p>Otro elemento es center, que centra el texto entre <center> y </center><hr> incluye una línea horizontal en el documento<br> salto de línea, pero no de párrafoPara encabezados se tienen 6 niveles:

<h1><h2>

<...><h6>

HTML

Encabezados.html

HTML

Estudiantes3.html

HTML

ListasPara dar estructura a un documento además de los encabezados existen:

marcos (frames)tablaslistas

ordenadas <ol> ... </ol>cada elemento de la lista con <li> elemento </l1>

desordenas <ul> ... </ul>normalmente un bullet a la izquierda

HTML

ListaOrdenada.html

HTML

Estudiantes4.html

HTML

Un hipervínculo conecta un documento con otroLa WWW (World Wide Web) no sería una red si no existieran las hipervínculosEl destino de una liga puede ser un archivo local o uno remoto en alguna otra computadoraLas hipervínculos se despliegan en un diferentes formas, la más popular es en azul y subrayada, normalmente cuando se pasa a través de una liga el destino se despliega en alguna parte de la pantalla

HTML

La etiqueta de hipervínculo <a>, también conocida como ancla, toma un atributo que define su destino.Por ejemplo:

<a href =“http://delfosis.uam.mx/~sgb”> Curso de Java </a>

<a href = "ListaOrdenada.html" >comida </a><a target ="_blank" href = "ListaOrdenada.html">

comida </a><a href="http://buzz.headfirstlabs.com" title="leer todo sobre

cafeina"> El Café </a>

HTML

Estudiantes5.html

HTML

ANCLAS<a href="#ancla1">Páginas personales</a>...<a name="ancla1">Páginas personales</a>

HTML

DIRECCIONES RELATIVAS<a href =”algo.html”>adsfas</a>

en misma carpeta<a href =”bebidas/algo.html”>adsfas</a>

en subcarpeta<a href =”../algo.html”>adsfas</a>

en carpeta superior

HTML

DIRECCIONES RELATIVAS

De lounge.html

a directions.htmlDe directions.html

a lounge.html

De elixir.html

a drinks.gif

HTML

Colores e imágenesAlgunos atributos de BODY:

bgcolor, pone color al background de todo el documento

<body bgcolor="red">black, gray, green, navy, purple, red, yellow, white

<body bgcolor = #3296ff>RGB, (Red, Green, Blue) del 0= off al 255= full on, hay que ponerlos en hexadecimal. Rojo = 50, Verde = 150 y azul = 255

<body bgcolor="red" text="blue">

Imágenes GIF o JPEG que pueden repetirse vertical u horizontalmente para crear un patrón

<body background = “nubes.gif”>

HTML

Para incluir una imagen se usa la etiqueta <img>:<img src = "mundo.gif"><img src = "mundo.gif" alt="mapa de la Tierra">

HTML

Estudiantes6.html

HTML

Comentarios:

HTML

TABLAS

HTML

TABLASAUMENTAR COLUMNA POBLACIÓN Y LLENAR CON DATOS

HTML

EJERCICIOAumentar una columna para que muestre los escudos de cada país

HTML

TABLASINCLUIR IMAGEN EN CELDA

HTML

TABLAS

tema02 html

Engineering