tema02 html
Post on 03-Jul-2015
1.250 Views
Preview:
DESCRIPTION
TRANSCRIPT
Marco Aedo López
2012
Aplicaciones Web I
HTML
ContenidoIntroducciónDocumentos HTML básicosFormateo de textoHipervínculosColores e imágenesTablas
HTML
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
HTML
HTML
HTML
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
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
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
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
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
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
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
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
HTML
Estudiantes6.html
HTML
HTML
HTML
Comentarios:<!-- aca puedes escribir libremente lo que desees-->
HTML
HTML
HTML
HTML
HTML
HTML
TABLAS
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
HTML
HTML
TABLAS
HTML
TABLAS
HTML
TABLAS
HTML
TABLAS
HTML
TABLAS
HTML
HTML
HTML
HTML
HTML
HTML
top related