tema02 html
DESCRIPTION
Curso HTMLTRANSCRIPT
![Page 1: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/1.jpg)
Marco Aedo López
2012
Aplicaciones Web I
![Page 2: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/2.jpg)
HTML
ContenidoIntroducciónDocumentos HTML básicosFormateo de textoHipervínculosColores e imágenesTablas
![Page 3: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/3.jpg)
HTML
![Page 4: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/4.jpg)
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.
![Page 5: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/5.jpg)
HTML
![Page 6: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/6.jpg)
HTML
![Page 7: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/7.jpg)
HTML
![Page 8: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/8.jpg)
HTML
![Page 9: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/9.jpg)
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
![Page 10: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/10.jpg)
HTML
<p> aca va el texto de un parrafo </p>
Etiqueta Inicial
Contenido Etiqueta Fnal
ELEMENTO
![Page 11: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/11.jpg)
HTML
<p align=“center”> aca va el texto de un parrafo </p>
Atributo Valor
![Page 12: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/12.jpg)
HTML
![Page 13: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/13.jpg)
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)
![Page 14: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/14.jpg)
HTML
Ejemplo
Las etiquetas (tags) se definenentre < >. Generalmente son pares.
Las de inicio usan el nombre delelemento y las finales un slash,
![Page 15: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/15.jpg)
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
![Page 16: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/16.jpg)
HTML
![Page 17: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/17.jpg)
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>
![Page 18: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/18.jpg)
HTML
Estudiantes2.html
![Page 19: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/19.jpg)
HTML
Estudiantes2 Nótese que P no sedespliega, en su lugar se
deja unalínea en blanco.
![Page 20: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/20.jpg)
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
![Page 21: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/21.jpg)
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>
![Page 22: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/22.jpg)
HTML
Encabezados.html
![Page 23: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/23.jpg)
HTML
Estudiantes3.html
![Page 24: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/24.jpg)
HTML
Estudiantes3.html
![Page 25: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/25.jpg)
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
![Page 26: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/26.jpg)
HTML
ListaOrdenada.html
![Page 27: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/27.jpg)
HTML
Estudiantes4.html
![Page 28: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/28.jpg)
HTML
![Page 29: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/29.jpg)
HTML
![Page 30: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/30.jpg)
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
![Page 31: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/31.jpg)
HTML
![Page 32: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/32.jpg)
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>
![Page 33: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/33.jpg)
HTML
![Page 34: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/34.jpg)
HTML
Estudiantes5.html
![Page 35: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/35.jpg)
HTML
ANCLAS<a href="#ancla1">Páginas personales</a>...<a name="ancla1">Páginas personales</a>
![Page 36: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/36.jpg)
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
![Page 37: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/37.jpg)
HTML
DIRECCIONES RELATIVAS
De lounge.html
a directions.htmlDe directions.html
a lounge.html
De elixir.html
a drinks.gif
![Page 38: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/38.jpg)
HTML
![Page 39: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/39.jpg)
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”>
![Page 40: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/40.jpg)
HTML
Para incluir una imagen se usa la etiqueta <img>:<img src = "mundo.gif"><img src = "mundo.gif" alt="mapa de la Tierra">
![Page 41: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/41.jpg)
HTML
![Page 42: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/42.jpg)
HTML
Estudiantes6.html
![Page 43: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/43.jpg)
HTML
![Page 44: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/44.jpg)
HTML
![Page 45: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/45.jpg)
HTML
Comentarios:<!-- aca puedes escribir libremente lo que desees-->
![Page 46: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/46.jpg)
HTML
![Page 47: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/47.jpg)
HTML
![Page 48: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/48.jpg)
HTML
![Page 49: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/49.jpg)
HTML
![Page 50: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/50.jpg)
HTML
![Page 51: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/51.jpg)
HTML
TABLAS
![Page 52: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/52.jpg)
HTML
TABLAS
![Page 53: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/53.jpg)
HTML
TABLASAUMENTAR COLUMNA POBLACIÓN Y LLENAR CON DATOS
![Page 54: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/54.jpg)
HTML
EJERCICIOAumentar una columna para que muestre los escudos de cada país
![Page 55: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/55.jpg)
HTML
TABLASINCLUIR IMAGEN EN CELDA
![Page 56: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/56.jpg)
HTML
![Page 57: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/57.jpg)
HTML
![Page 58: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/58.jpg)
HTML
TABLAS
![Page 59: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/59.jpg)
HTML
TABLAS
![Page 60: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/60.jpg)
HTML
TABLAS
![Page 61: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/61.jpg)
HTML
TABLAS
![Page 62: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/62.jpg)
HTML
TABLAS
![Page 63: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/63.jpg)
HTML
![Page 64: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/64.jpg)
HTML
![Page 65: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/65.jpg)
HTML
![Page 66: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/66.jpg)
HTML
![Page 67: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/67.jpg)
HTML
![Page 68: Tema02 html](https://reader033.vdocumento.com/reader033/viewer/2022052210/559682ed1a28ab691a8b47e0/html5/thumbnails/68.jpg)
HTML