SlideShare una empresa de Scribd logo
IUTE - MÉRIDA LENGUAJE DE PROGRAMACIÓN IV Prof: Duberlis González CODIGOS BÁSICOS HTML (Continuación) Octubre 2007
CODIGOS HTML Todo el texto que disponemos en el cuerpo de la página aparece en la misma línea, no importa si cuando tipeamos la página disponemos cada palabra en una línea distinta (es decir un navegador no tiene en cuenta la tecla ENTER). Para indicarle al navegador que queremos que continúe en la  próxima línea  debemos hacerlo con el elemento HTML <br>. Cuando aparece la marca <br> el navegador continua con el texto en la línea siguiente. Es uno de los pocos elementos HTML que no tiene marca de cerrado como habíamos visto hasta ahora. Implementemos una página que muestre los nombres de distintos lenguajes de programación uno por línea:  <html>  <head>  </head>  <body>  PHP<br> JavaScript<br>  Java<br> C <br> C++  </body>  </html>
CODIGOS HTML   Enfatizar  algo significa realzar la importancia de una cosa, por ejemplo una palabra o conjunto de palabras. Así como tenemos seis niveles de títulos para enfatizar un bloque contamos con dos elementos que son (<em> <strong>) El elemento de mayor fuerza de énfasis es strong y le sigue em. Para recordar el nombre de estos elementos HTML: <em>  viene de  empathize  que significa énfasis. <strong>  viene de  strong  que significa fuerte.  <html> <head>  </head>  <body>  <p><strong>Típos de datos</strong> en MySQL</p> <p><em>TEXTO</em>: Para almacenar texto usamos cadenas de caracteres. Las cadenas se colocan entre comillas simples. Podemos almacenar dígitos con los que no se realizan operaciones matemáticas, por ejemplo, códigos de identificación, números de documentos, números telefónicos. Tenemos los siguientes tipos: varchar, char y text.</p>  <p><em>NUMEROS</em>: Existe variedad de tipos numéricos para representar enteros, negativos, decimales. Para almacenar valores enteros, por ejemplo, en campos que hacen referencia a cantidades, precios, etc., usamos el tipo integer. Para almacenar valores con decimales utilizamos: float o decimal.</p> <p><em>FECHAS Y HORAS</em>: para guardar fechas y horas dispone de varios tipos: date (fecha), datetime (fecha y hora), time (hora), year (año) y timestamp.</p>  </body>  </html>
CODIGOS HTML El elemento más importante que tiene una página de Internet es el  hipervínculo , estos nos permiten cargar otra página en el navegador. Normalmente un navegador al encontrar esta marca muestra un texto subrayado, y al hacer clic con el mouse sobre éste el navegador carga la página indicada por dicho hipervínculo. Primero veremos cual es la sintaxis para disponer un hipervínculo a una página que se encuentra en el mismo sitio (es decir otra página que hemos desarrollado nosotros).  <a href=&quot;pagina2.html&quot;>Noticias</a> Como vemos, se trata de otro elemento HTML que tiene comienzo de marca y fin de marca. Lo que se encuentra entre el comienzo de marca y el fin de la marca es el texto que aparece en la página (normalmente subrayado).  <a>  viene de  anchor  que significa ancla.  La propiedad href del elemento &quot;a&quot; hace referencia a la página que debe mostrar el navegador si el visitante hace clic sobre el hipervínculo.
CODIGOS HTML Implementemos dos páginas que contengan hipervínculos entre si, los nombres de las páginas HTML serán: pagina1.html y pagina2.html. Pagina1.html <html> <head>  </head> <body> <h1>Página principal.</h1> <a href=&quot;pagina2.html&quot;>Noticias</a>  </body> </html>  Pagina2.html <html> <head>  </head> <body> <h1>Noticias</h1> <a href=&quot;pagina1.html&quot;>Salir.</a>  </body> </html>  Si se quiere realizar un hipervínculo con el nombre del dominio del otro sitio, debemos inicializamos href con el tipo de protocolo http, cuando se trata de una pagina web. Ejemplo <html> <head>  </head>  <body>  <a href=&quot;http://www.google.com&quot;>Buscador Google</a> </body>  </html>
CODIGOS HTML Para insertar una  imagen  dentro de una página debemos utilizar el elemento HTML <img>, la misma no tiene una marca de finalización Generalmente, la imagen se encuentra en el mismo servidor donde se almacenan nuestras páginas HTML. Los formatos clásicos son los archivos con extensiones gif, jpg y png. La sintaxis de esta marca es:  <img src=&quot;foto1.jpg&quot; alt=&quot;Pintura geométrica&quot;>  <img>  viene de  image src viene de source   alt  viene de  alternative   Confeccionemos una página que muestre una imagen llamada foto1.jpg (La imagen se encuentra almacenada en el servidor en la misma carpeta donde se localiza esta página) <html> <head>  </head> < body>  <img src=&quot;foto1.jpg&quot; alt=&quot;Pintura geométrica&quot;>  </body>  </html>
CODIGOS HTML Si la  imagen  se encuentra en una subcarpeta llamada imagenes, luego la sintaxis para recuperarla será: <img src=&quot;imagenes/foto1.jpg&quot; alt=&quot;Pintura geométrica&quot;>  Es decir, antecedemos al nombre de la imagen el nombre de la carpeta y la barra /  Si la imagen se encuentra en una carpeta padre de donde se encuentra la página HTML luego la sintaxis será: <img src=&quot;../foto1.jpg&quot; alt=&quot;Pintura geométrica&quot;>  Es decir, le antecedemos .. y la barra / al nombre de la imagen Si queremos subir dos carpetas luego escribimos: <img src=&quot;../../foto1.jpg&quot; alt=&quot;Pintura geométrica&quot;>
CODIGOS HTML Como ya conocemos los hipervínculos y como insertar imágenes en nuestra página, ahora podemos implementar un hipervínculo pero en vez de mostrar un texto mostraremos una imagen.  La solución es simple y consiste en disponer la marca <img> encerrada entre la marca de comienzo y fin del enlace(<a>). Confeccionemos una página que muestre dos imagenes (foto1.jpg y foto2.jpg) como hipervínculos. Al ser presionados llamar a otra página. Las imágenes se encuentran en una carpeta llamada imagenes que depende directamente de la raiz del sitio: <html> <head> </head>  <body>  <h2>Presione alguna de las imagenes para conocer más sobre esa obra.</h2>  <a href=&quot;pagina2.html&quot;><img src=&quot;/imagenes/foto1.jpg&quot; alt=&quot;Pintura Geométrica&quot;></a> <br> <a href=&quot;pagina2.html&quot;><img src=&quot;/imagenes/foto2.jpg&quot; alt=&quot;Pintura Geométrica&quot;></a>  </body>  </html>
CODIGOS HTML Listas Ordenadas,  Este elemento HTML es útil cuando debemos numerar una serie de objetos. <ol>  viene de  ordened list   <li>  viene de  list item   Por ejemplo una lista ordenada para conocer su sintaxis. Mostraremos el orden de llegada de tres corredores: <html>  <head>  </head>  <body> <ol>  <li>Rodriguez Pablo</li>  <li>Gonzalez Raul</li>  <li>Lopez Hector</li>  </ol>  </body>  </html>  La marca <ol> y su correspondiente marca de cerrado es </ol>  En su interior cada uno de los items se los dispone con el elemento li, que también tiene la marca de comienzo <li> y la marca de fin de item </li>
CODIGOS HTML Una lista no ordenada como su nombre lo indica no utiliza un número delante de cada items sino un pequeño símbolo gráfico. <ul>  viene de  unordered list <li>  viene de  list item   La forma de implementar este tipo de listas es idéntico a las listas ordenadas. Veamos un ejemplo donde implementamos una lista no ordenada:  <html>  <head>  </head>  <body>  <h2>Lenguajes de programación.</h2>  <ul>  <li>C</li> <li>C++</li>  <li>Java</li>  <li>C#</li> </ul>  </body>  </html>
CODIGOS HTML Como su nombre lo indica se utiliza para asociar un término y la definición del mismo. El navegador se encarga de destacar y separa el término y su definición.  Como podemos observar intervienen más marcas que en los otros dos tipos de listas. Las  marcas que encierran a la lista son <dl> (Definition List) y </dl> Ahora debemos poner a pares estos dos elementos <dt> (Definition Term) y <dd> (Definition Description). <dl>  viene de  definition list   <dt>  viene de  definition term <dd> viene de definition description
CODIGOS HTML Ejemplo Listas por Definición <html> <head> </head>  <body>  <dl>  <dt>C++</dt>  <dd>Es un lenguaje de programación, diseñado a mediados de los años 1980, por Bjarne Stroustrup, como extensión del lenguaje de programación C.</dd>  <dt>Java</dt>  <dd>Es un lenguaje de programación orientado a objetos desarrollado por Sun Microsystems a principios de los 90.</dd> <dt>JavaScript</dt> <dd>Es un lenguaje interpretado, es decir, que no requiere compilación, utilizado principalmente en páginas web, con una sintaxis semejante a la del lenguaje C.</dd>  </dl>  </body>  </html>
CODIGOS HTML Listas Anidadas,  el lenguaje HTML nos permite insertar una lista dentro de otra. Se pueden anidar listas de distinto tipo, por ejemplo podemos tener una lista no ordenada y uno de los item puede ser una lista ordenada . Para el anidamiento de listas solo debemos tener cuidado en la correcta apertura y cerrado de las marcas. Usaremos: <li></li>  <ul> </ul>  <ol</ol>
Implementaremos una página que enumere una serie de países en una lista ordenada y luego en cada país dispondremos una lista de hipervínculos de periódicos de dicho país: <html>  <head> </head>  <body>  <ol>  <li>Argentina <ul>  <li> <a href=&quot;http://www.lanacion.com.ar&quot;>La Nación</a> </li>  <li> <a href=&quot;http://www.clarin.com.ar&quot;>Clarín</a> </li> <li><a href=&quot;http://www.pagina12.com.ar&quot;>Página 12</a></li>  </ul>  </li>  <li>España  <ul>  <li> <a href=&quot;http://www.elpais.es&quot;>El País Digital</a></li> <li><a href=&quot;http://www.abc.es&quot;>ABC</a></li>  <li><a href=&quot;http://www.elmundo.es&quot;>El Mundo</a></li>  </ul>  </li>  <li>México  <ul>  <li><a href=&quot;http://www.jornada.unam.mx&quot;>La Jornada</a></li>  <li><a href=&quot;http://www.el-universal.com.mx&quot;>El Universal</a></li> </ul>  </li> </ol>  /body>  </html>
CODIGOS HTML Tablas,  el objetivo fundamental de las tablas es mostrar una serie de datos en forma ordenada, organizado en filas y columnas. Para la creación de una tabla intervienen una serie de elementos: <table> Es la marca de comienzo de la tabla. Este elemento requiere la marca de cierre. <tr> Es la marca de comienzo de una fila. Esta marca debe estar dentro del elemento table. Este elemento requiere la marca de cierre. <td> Es la marca de comienzo de una celda. Esta marca debe estar dentro del elemento tr. Este elemento requiere la marca de cierre.  <table> <tr> viene de table row que significa fila de la tabla. <td> viene de table data que significa dato de la tabla. Lo primero que aparece es la apertura del elemento table, donde inicializamos la propiedad border con el valor 1, con esto el contorno de cada celda será visible   (pruebe de   asignarle el valor cero y otros valores superiores a 1) .
Ejemplo de tablas en HTML <table border=&quot;1&quot;>  Seguidamente viene la apertura de la primer fila de la tabla con el elemento tr: <tr>  Continuamos con la apertura de la primer celda de la primer fila de la tabla: <td> Luego el dato propiamente dicho de la celda: Cerramos la celda: </td> Abrimos la proxima celda:<td> Disponemos el valor de la celda: Cerramos la celda: </td>  Ahora cerramos la primer fila de la tabla: </tr>  El mecanismos de la siguientes filas es similar a la primera.
Ejemplo de tablas en HTML <html> <head> </head> <body> <table border=&quot;1&quot;> <tr> <td>China</td><td>1300 millones</td> </tr> <tr>  <td>India</td><td>1080 millones</td>  </tr>  <tr> <td>Estados Unidos</td><td>295 millones</td>  </tr>  </table>  </body>  </html>
CODIGOS HTML Tablas con encabezado,  la primer característica que le vamos a agregar a una tabla son las celdas de encabezado. Normalmente la primer fila de una tabla puede representar los títulos para cada columna.  Para indicar que se trata de una celda de encabezado utilizamos el elemento <th> en lugar de <td>  <th>  viene de  table header cell  que significa celda de encabezado de tabla.  El navegador representa distinto las celdas de datos y las celdas de encabezamiento. Tomando el ejemplo anterior:
Ejemplo de tablas en HTML <html> <head> </head> <body> <table border=&quot;1&quot;> <tr> <th>Paises</th><th>Cantidad de habitantes</th> </tr>  <tr> <td>China</td><td>1300 millones</td> </tr> <tr>  <td>India</td><td>1080 millones</td>  </tr>  <tr> <td>Estados Unidos</td><td>295 millones</td>  </tr>  </table>  </body>  </html>
CODIGOS HTML Tablas con titulo,  Para disponer un título a una tabla debemos incorporar el elemento caption inmediatamente después que abrimos la marca table. El elemento caption requiere la marca de apertura y cierre. La marca caption debe estar inmediatamente después que se abre la marca de comienzo de la tabla:  <table border=&quot;1&quot;> <caption>Población de los paises con mayor cantidad de habitantes.</caption> <tr>  Para recordar el nombre de este nuevo elemento HTML: <caption>  significa título.
CODIGOS HTML Algunos caracteres especiales,  ahora podemos disponer dentro de una página los caracteres: < y >. Veremos que no los podemos disponer directamente ya que el navegador los confudiría con los caracteres que se utilizan para las marcas HTML. La solución es utilizar otra sintaxis para dichos caracteres, veamos los más utilizados:  <  &lt;  >  &gt;  &  &amp;  &quot;  &quot;   &nbsp;  //Espacio en blanco. ©  &copy;  €  &euro;  Para ver su funcionamiento mostraremos la siguiente ecuación: 10+x*y < 12*z  se haria de la siguiente manera 10+x*y &lt; 12*z
DANDO FORMA AL TEXTO Si queremos obtener  múltiples líneas en blanco  no basta con repetir la etiqueta <P>, sino que hay que combinarla con la etiqueta <BR>. Así por ejemplo, si queremos obtener cuatro líneas en blanco, pondríamos:  <BR><P>  <BR><P>  <BR><P>  <BR><P>  Para  destacar  alguna parte del texto se pueden usar:  <B> y </B> para poner algo en  negrita  ( bold ).  <I> y </I> para poner algo en  cursiva  ( italic ). Otra etiqueta interesante es <PRE> y </PRE>. El texto que se encuentre entre ella estará  preformateado , es decir que aparecerá como si hubiera sido escrito con una máquina de escribir, con una fuente de espaciado fijo (tipo Courier).  La etiqueta <BLOCKQUOTE> y </BLOCKQUOTE> se utiliza para destacar una  cita textual  dentro del texto general

Más contenido relacionado

La actualidad más candente

html
htmlhtml
Curso HTML CSS Sesion 2/4
Curso HTML CSS Sesion 2/4Curso HTML CSS Sesion 2/4
Curso HTML CSS Sesion 2/4
Matías Alejo Garcia
 
LENGUAJE HTML
LENGUAJE HTMLLENGUAJE HTML
LENGUAJE HTML
gueste5e05b
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
up
 
Qué es xhtml
Qué es xhtmlQué es xhtml
Qué es xhtml
Capacitacion web
 
Html
HtmlHtml
Html
Jean.net
 
HTML
HTMLHTML
Etiquetas Diapositivas.
Etiquetas Diapositivas.Etiquetas Diapositivas.
Etiquetas Diapositivas.
asdi
 
Html Bas
Html BasHtml Bas
Html Bas
Ricardo Morales
 
Curso Html Basico
Curso Html BasicoCurso Html Basico
Curso Html Basico
Facundo Oliva
 
Introhtml
IntrohtmlIntrohtml
Html
HtmlHtml
curso de html
curso de htmlcurso de html
curso de html
Javier Araneda
 
Diapo02
Diapo02Diapo02
curso de html
curso de htmlcurso de html
curso de html
Javier Araneda
 
HTML
HTMLHTML
HTML
PattAla
 
Introduccion Xhtml
Introduccion XhtmlIntroduccion Xhtml
Introduccion Xhtml
guest31a5fa
 
Html apunte 2
Html apunte 2Html apunte 2
Html apunte 2
Mauricio Durán Torres
 
Karol cortez normas apa
Karol cortez normas apaKarol cortez normas apa
Karol cortez normas apa
KarolCortes7
 

La actualidad más candente (19)

html
htmlhtml
html
 
Curso HTML CSS Sesion 2/4
Curso HTML CSS Sesion 2/4Curso HTML CSS Sesion 2/4
Curso HTML CSS Sesion 2/4
 
LENGUAJE HTML
LENGUAJE HTMLLENGUAJE HTML
LENGUAJE HTML
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Qué es xhtml
Qué es xhtmlQué es xhtml
Qué es xhtml
 
Html
HtmlHtml
Html
 
HTML
HTMLHTML
HTML
 
Etiquetas Diapositivas.
Etiquetas Diapositivas.Etiquetas Diapositivas.
Etiquetas Diapositivas.
 
Html Bas
Html BasHtml Bas
Html Bas
 
Curso Html Basico
Curso Html BasicoCurso Html Basico
Curso Html Basico
 
Introhtml
IntrohtmlIntrohtml
Introhtml
 
Html
HtmlHtml
Html
 
curso de html
curso de htmlcurso de html
curso de html
 
Diapo02
Diapo02Diapo02
Diapo02
 
curso de html
curso de htmlcurso de html
curso de html
 
HTML
HTMLHTML
HTML
 
Introduccion Xhtml
Introduccion XhtmlIntroduccion Xhtml
Introduccion Xhtml
 
Html apunte 2
Html apunte 2Html apunte 2
Html apunte 2
 
Karol cortez normas apa
Karol cortez normas apaKarol cortez normas apa
Karol cortez normas apa
 

Destacado

Laboratorio Administracion de Hardware y Software
Laboratorio Administracion de Hardware y SoftwareLaboratorio Administracion de Hardware y Software
Laboratorio Administracion de Hardware y Software
guestc906c2
 
revision estrategica cambio schaer argentina salud
revision estrategica cambio schaer argentina saludrevision estrategica cambio schaer argentina salud
revision estrategica cambio schaer argentina salud
Guillermo Schaer
 
Distribuidor De Vipconnectz P 1
Distribuidor De Vipconnectz P 1Distribuidor De Vipconnectz P 1
Distribuidor De Vipconnectz P 1
vozeninternet
 
Nuevos Escenarios De Aprendizaje Web 2.0
Nuevos Escenarios De Aprendizaje Web 2.0Nuevos Escenarios De Aprendizaje Web 2.0
Nuevos Escenarios De Aprendizaje Web 2.0
Weblearner :: Carlos Castaño
 
Strategien des Forschungsdatenmanagements an der Humboldt-Universität zu Berlin
Strategien des Forschungsdatenmanagements an der Humboldt-Universität zu BerlinStrategien des Forschungsdatenmanagements an der Humboldt-Universität zu Berlin
Strategien des Forschungsdatenmanagements an der Humboldt-Universität zu Berlin
Elena Simukovic
 
Redes sociales y periodismo Belgrano Day School
Redes sociales y periodismo Belgrano Day SchoolRedes sociales y periodismo Belgrano Day School
Redes sociales y periodismo Belgrano Day School
grmadryn
 
La imatge: Obtenció i tractament bàsic d'imatges
La imatge: Obtenció i tractament bàsic d'imatgesLa imatge: Obtenció i tractament bàsic d'imatges
La imatge: Obtenció i tractament bàsic d'imatges
santfeliuonline
 
Gewichtsreduktion
GewichtsreduktionGewichtsreduktion
Gewichtsreduktion
Shopwit Kumar
 
Sobrelosperrosylaspersonas
SobrelosperrosylaspersonasSobrelosperrosylaspersonas
Sobrelosperrosylaspersonas
yak072
 
N U E S T R A S 20 F R A S E S Www
N U E S T R A S 20 F R A S E S WwwN U E S T R A S 20 F R A S E S Www
N U E S T R A S 20 F R A S E S Www
francklin castillo
 
Fotosquehicieronhistoria
FotosquehicieronhistoriaFotosquehicieronhistoria
Fotosquehicieronhistoria
Paradox
 
marzo2
marzo2marzo2
marzo2
orienteblog
 
40 Mentiras Universales Www.Diapositivas.Com
40 Mentiras Universales Www.Diapositivas.Com40 Mentiras Universales Www.Diapositivas.Com
40 Mentiras Universales Www.Diapositivas.Com
italia1986
 
agosto1
agosto1agosto1
agosto1
orienteblog
 
Los Simpson
Los SimpsonLos Simpson
Los Simpson
Parquita
 
Luisacristina
LuisacristinaLuisacristina
Luisacristina
cedurante
 
KPPmovie
KPPmovieKPPmovie
Graciasadios
GraciasadiosGraciasadios
Graciasadios
francklin castillo
 

Destacado (20)

Laboratorio Administracion de Hardware y Software
Laboratorio Administracion de Hardware y SoftwareLaboratorio Administracion de Hardware y Software
Laboratorio Administracion de Hardware y Software
 
revision estrategica cambio schaer argentina salud
revision estrategica cambio schaer argentina saludrevision estrategica cambio schaer argentina salud
revision estrategica cambio schaer argentina salud
 
Distribuidor De Vipconnectz P 1
Distribuidor De Vipconnectz P 1Distribuidor De Vipconnectz P 1
Distribuidor De Vipconnectz P 1
 
Nuevos Escenarios De Aprendizaje Web 2.0
Nuevos Escenarios De Aprendizaje Web 2.0Nuevos Escenarios De Aprendizaje Web 2.0
Nuevos Escenarios De Aprendizaje Web 2.0
 
Strategien des Forschungsdatenmanagements an der Humboldt-Universität zu Berlin
Strategien des Forschungsdatenmanagements an der Humboldt-Universität zu BerlinStrategien des Forschungsdatenmanagements an der Humboldt-Universität zu Berlin
Strategien des Forschungsdatenmanagements an der Humboldt-Universität zu Berlin
 
Redes sociales y periodismo Belgrano Day School
Redes sociales y periodismo Belgrano Day SchoolRedes sociales y periodismo Belgrano Day School
Redes sociales y periodismo Belgrano Day School
 
La imatge: Obtenció i tractament bàsic d'imatges
La imatge: Obtenció i tractament bàsic d'imatgesLa imatge: Obtenció i tractament bàsic d'imatges
La imatge: Obtenció i tractament bàsic d'imatges
 
Gewichtsreduktion
GewichtsreduktionGewichtsreduktion
Gewichtsreduktion
 
Sobrelosperrosylaspersonas
SobrelosperrosylaspersonasSobrelosperrosylaspersonas
Sobrelosperrosylaspersonas
 
N U E S T R A S 20 F R A S E S Www
N U E S T R A S 20 F R A S E S WwwN U E S T R A S 20 F R A S E S Www
N U E S T R A S 20 F R A S E S Www
 
Fotosquehicieronhistoria
FotosquehicieronhistoriaFotosquehicieronhistoria
Fotosquehicieronhistoria
 
marzo2
marzo2marzo2
marzo2
 
40 Mentiras Universales Www.Diapositivas.Com
40 Mentiras Universales Www.Diapositivas.Com40 Mentiras Universales Www.Diapositivas.Com
40 Mentiras Universales Www.Diapositivas.Com
 
agosto1
agosto1agosto1
agosto1
 
Los Simpson
Los SimpsonLos Simpson
Los Simpson
 
ciudades eternas
ciudades eternas ciudades eternas
ciudades eternas
 
Luisacristina
LuisacristinaLuisacristina
Luisacristina
 
Carteles
CartelesCarteles
Carteles
 
KPPmovie
KPPmovieKPPmovie
KPPmovie
 
Graciasadios
GraciasadiosGraciasadios
Graciasadios
 

Similar a Cont clase de lenguaje IV

Qué es html
Qué es htmlQué es html
Qué es html
edujoso
 
C:\Documents And Settings\Alumno\Mis Documentos\Qué Es Html
C:\Documents And Settings\Alumno\Mis Documentos\Qué Es HtmlC:\Documents And Settings\Alumno\Mis Documentos\Qué Es Html
C:\Documents And Settings\Alumno\Mis Documentos\Qué Es Html
edujoso
 
Curso Html
Curso HtmlCurso Html
HTML
HTMLHTML
HTML
HTMLHTML
Html
HtmlHtml
Html
apedron
 
PresentacióN Html
PresentacióN HtmlPresentacióN Html
PresentacióN Html
marcos0209
 
PresentacióN Html
PresentacióN HtmlPresentacióN Html
PresentacióN Html
Margarita T.
 
Primeraclase
PrimeraclasePrimeraclase
Primeraclase
danielagrouliez
 
Html
HtmlHtml
Html
dyt
 
Html Y Javascript
Html Y JavascriptHtml Y Javascript
Html Y Javascript
oswchavez
 
Html Y Javascript
Html Y JavascriptHtml Y Javascript
Html Y Javascript
oswchavez
 
Codigos Básicos HTML - IUTE Mérida
Codigos Básicos HTML - IUTE MéridaCodigos Básicos HTML - IUTE Mérida
Codigos Básicos HTML - IUTE Mérida
duberlisg
 
Expo Html
Expo HtmlExpo Html
Clase 2
Clase 2Clase 2
LENGUAJE HTML
LENGUAJE HTMLLENGUAJE HTML
LENGUAJE HTML
zenirod
 
Tpd 02
Tpd 02Tpd 02
Diseño web html
Diseño web htmlDiseño web html
Diseño web html
Daniel Lozano
 
1 crear pag formatos
1 crear pag formatos1 crear pag formatos
1 crear pag formatos
Andres Ovalles
 
Xml
XmlXml

Similar a Cont clase de lenguaje IV (20)

Qué es html
Qué es htmlQué es html
Qué es html
 
C:\Documents And Settings\Alumno\Mis Documentos\Qué Es Html
C:\Documents And Settings\Alumno\Mis Documentos\Qué Es HtmlC:\Documents And Settings\Alumno\Mis Documentos\Qué Es Html
C:\Documents And Settings\Alumno\Mis Documentos\Qué Es Html
 
Curso Html
Curso HtmlCurso Html
Curso Html
 
HTML
HTMLHTML
HTML
 
HTML
HTMLHTML
HTML
 
Html
HtmlHtml
Html
 
PresentacióN Html
PresentacióN HtmlPresentacióN Html
PresentacióN Html
 
PresentacióN Html
PresentacióN HtmlPresentacióN Html
PresentacióN Html
 
Primeraclase
PrimeraclasePrimeraclase
Primeraclase
 
Html
HtmlHtml
Html
 
Html Y Javascript
Html Y JavascriptHtml Y Javascript
Html Y Javascript
 
Html Y Javascript
Html Y JavascriptHtml Y Javascript
Html Y Javascript
 
Codigos Básicos HTML - IUTE Mérida
Codigos Básicos HTML - IUTE MéridaCodigos Básicos HTML - IUTE Mérida
Codigos Básicos HTML - IUTE Mérida
 
Expo Html
Expo HtmlExpo Html
Expo Html
 
Clase 2
Clase 2Clase 2
Clase 2
 
LENGUAJE HTML
LENGUAJE HTMLLENGUAJE HTML
LENGUAJE HTML
 
Tpd 02
Tpd 02Tpd 02
Tpd 02
 
Diseño web html
Diseño web htmlDiseño web html
Diseño web html
 
1 crear pag formatos
1 crear pag formatos1 crear pag formatos
1 crear pag formatos
 
Xml
XmlXml
Xml
 

Más de guestc906c2

Arreglos
ArreglosArreglos
Arreglos
guestc906c2
 
Estructura de Datos Arreglos
Estructura de Datos ArreglosEstructura de Datos Arreglos
Estructura de Datos Arreglos
guestc906c2
 
SO continuación
SO continuaciónSO continuación
SO continuación
guestc906c2
 
Codigos HTML Lenguaje IV
Codigos HTML Lenguaje IVCodigos HTML Lenguaje IV
Codigos HTML Lenguaje IV
guestc906c2
 
Clase IV Estructura de Datos IUTE - Mérida
Clase IV Estructura de Datos IUTE - MéridaClase IV Estructura de Datos IUTE - Mérida
Clase IV Estructura de Datos IUTE - Mérida
guestc906c2
 
Clase III. Sistemas Operativos
Clase III. Sistemas OperativosClase III. Sistemas Operativos
Clase III. Sistemas Operativos
guestc906c2
 
Clase II Introducción a la Informatica
Clase II Introducción a la InformaticaClase II Introducción a la Informatica
Clase II Introducción a la Informatica
guestc906c2
 
Clase I Introducción a la Informatica
Clase I Introducción a la InformaticaClase I Introducción a la Informatica
Clase I Introducción a la Informatica
guestc906c2
 
Clase II Informatica Basica IUTE - Mérida
Clase II Informatica Basica IUTE - MéridaClase II Informatica Basica IUTE - Mérida
Clase II Informatica Basica IUTE - Mérida
guestc906c2
 
Clase I Informatica IUTE - Mérida
Clase I Informatica IUTE - MéridaClase I Informatica IUTE - Mérida
Clase I Informatica IUTE - Mérida
guestc906c2
 
Clase I Informatica basica IUTE - Merida
Clase I Informatica basica IUTE - MeridaClase I Informatica basica IUTE - Merida
Clase I Informatica basica IUTE - Merida
guestc906c2
 
Clase III Estructura de Datos IUTE - Mérida
Clase III Estructura de Datos IUTE - MéridaClase III Estructura de Datos IUTE - Mérida
Clase III Estructura de Datos IUTE - Mérida
guestc906c2
 
Clase III Estructura de Datos IUTE - Mérida
Clase III Estructura de Datos IUTE - MéridaClase III Estructura de Datos IUTE - Mérida
Clase III Estructura de Datos IUTE - Mérida
guestc906c2
 
Clase II Estructura de Datos. IUTE- Merida
Clase II Estructura de Datos. IUTE- MeridaClase II Estructura de Datos. IUTE- Merida
Clase II Estructura de Datos. IUTE- Merida
guestc906c2
 
Clase I Estructura de Datos
Clase I Estructura de Datos Clase I Estructura de Datos
Clase I Estructura de Datos
guestc906c2
 

Más de guestc906c2 (15)

Arreglos
ArreglosArreglos
Arreglos
 
Estructura de Datos Arreglos
Estructura de Datos ArreglosEstructura de Datos Arreglos
Estructura de Datos Arreglos
 
SO continuación
SO continuaciónSO continuación
SO continuación
 
Codigos HTML Lenguaje IV
Codigos HTML Lenguaje IVCodigos HTML Lenguaje IV
Codigos HTML Lenguaje IV
 
Clase IV Estructura de Datos IUTE - Mérida
Clase IV Estructura de Datos IUTE - MéridaClase IV Estructura de Datos IUTE - Mérida
Clase IV Estructura de Datos IUTE - Mérida
 
Clase III. Sistemas Operativos
Clase III. Sistemas OperativosClase III. Sistemas Operativos
Clase III. Sistemas Operativos
 
Clase II Introducción a la Informatica
Clase II Introducción a la InformaticaClase II Introducción a la Informatica
Clase II Introducción a la Informatica
 
Clase I Introducción a la Informatica
Clase I Introducción a la InformaticaClase I Introducción a la Informatica
Clase I Introducción a la Informatica
 
Clase II Informatica Basica IUTE - Mérida
Clase II Informatica Basica IUTE - MéridaClase II Informatica Basica IUTE - Mérida
Clase II Informatica Basica IUTE - Mérida
 
Clase I Informatica IUTE - Mérida
Clase I Informatica IUTE - MéridaClase I Informatica IUTE - Mérida
Clase I Informatica IUTE - Mérida
 
Clase I Informatica basica IUTE - Merida
Clase I Informatica basica IUTE - MeridaClase I Informatica basica IUTE - Merida
Clase I Informatica basica IUTE - Merida
 
Clase III Estructura de Datos IUTE - Mérida
Clase III Estructura de Datos IUTE - MéridaClase III Estructura de Datos IUTE - Mérida
Clase III Estructura de Datos IUTE - Mérida
 
Clase III Estructura de Datos IUTE - Mérida
Clase III Estructura de Datos IUTE - MéridaClase III Estructura de Datos IUTE - Mérida
Clase III Estructura de Datos IUTE - Mérida
 
Clase II Estructura de Datos. IUTE- Merida
Clase II Estructura de Datos. IUTE- MeridaClase II Estructura de Datos. IUTE- Merida
Clase II Estructura de Datos. IUTE- Merida
 
Clase I Estructura de Datos
Clase I Estructura de Datos Clase I Estructura de Datos
Clase I Estructura de Datos
 

Último

Catalogo-Voxtech- accesorios radios RF.pdf
Catalogo-Voxtech- accesorios radios RF.pdfCatalogo-Voxtech- accesorios radios RF.pdf
Catalogo-Voxtech- accesorios radios RF.pdf
walter729637
 
Informe_mc_bombas_Warman_001-WEIR vulco.pdf
Informe_mc_bombas_Warman_001-WEIR vulco.pdfInforme_mc_bombas_Warman_001-WEIR vulco.pdf
Informe_mc_bombas_Warman_001-WEIR vulco.pdf
Rubén Cortes Zavala
 
11. Legislación Aplicada a la Informática.pdf
11. Legislación Aplicada a la Informática.pdf11. Legislación Aplicada a la Informática.pdf
11. Legislación Aplicada a la Informática.pdf
PanchoChangue
 
Conceptos y definiciones de Antenas y propagación
Conceptos y definiciones de Antenas y propagaciónConceptos y definiciones de Antenas y propagación
Conceptos y definiciones de Antenas y propagación
edgarcalle8
 
SEGUNDA GENERACIÓN xxxxxxxxxxxxxxxx.docx
SEGUNDA GENERACIÓN xxxxxxxxxxxxxxxx.docxSEGUNDA GENERACIÓN xxxxxxxxxxxxxxxx.docx
SEGUNDA GENERACIÓN xxxxxxxxxxxxxxxx.docx
Eddy Nathaly Jaimes Villamizar
 
Diapositiva sobre Tecnologia de la Información y Telecomunicaciones.pptx
Diapositiva sobre Tecnologia de la Información y Telecomunicaciones.pptxDiapositiva sobre Tecnologia de la Información y Telecomunicaciones.pptx
Diapositiva sobre Tecnologia de la Información y Telecomunicaciones.pptx
GnesisOrtegaDeLen
 
590248542-Pruebas-de-auditoria-informatica.pdf
590248542-Pruebas-de-auditoria-informatica.pdf590248542-Pruebas-de-auditoria-informatica.pdf
590248542-Pruebas-de-auditoria-informatica.pdf
ivanbrito1105
 
DN Consultores | Una mirada al mercado de fibra en Perú
DN Consultores | Una mirada al mercado de fibra en PerúDN Consultores | Una mirada al mercado de fibra en Perú
DN Consultores | Una mirada al mercado de fibra en Perú
estudios22
 
400816850-Mantenimiento-de-Equipos-de-Espesamiento-pdf.pdf
400816850-Mantenimiento-de-Equipos-de-Espesamiento-pdf.pdf400816850-Mantenimiento-de-Equipos-de-Espesamiento-pdf.pdf
400816850-Mantenimiento-de-Equipos-de-Espesamiento-pdf.pdf
Rubén Cortes Zavala
 
Evolución, características, aplicación, ventajas y desventajas de las TIC
Evolución, características, aplicación, ventajas y desventajas de las TICEvolución, características, aplicación, ventajas y desventajas de las TIC
Evolución, características, aplicación, ventajas y desventajas de las TIC
Henry W. Zavala
 
_Manejo de Riesgos en el Laboratorio.pdf
_Manejo de Riesgos en el Laboratorio.pdf_Manejo de Riesgos en el Laboratorio.pdf
_Manejo de Riesgos en el Laboratorio.pdf
correodetareas
 
Generaciones de Computadoras .
Generaciones de Computadoras                 .Generaciones de Computadoras                 .
Generaciones de Computadoras .
gregory760891
 
El uso de las TIC en la vida cotidiana.pptx
El uso de las TIC en la vida cotidiana.pptxEl uso de las TIC en la vida cotidiana.pptx
El uso de las TIC en la vida cotidiana.pptx
Katia Reyes
 
PROTOCOLO DE NANOPOROS Kit de códigos de barras 16S (SQK-RAB204)
PROTOCOLO DE NANOPOROS Kit de códigos de barras 16S (SQK-RAB204)PROTOCOLO DE NANOPOROS Kit de códigos de barras 16S (SQK-RAB204)
PROTOCOLO DE NANOPOROS Kit de códigos de barras 16S (SQK-RAB204)
ADELAIDA90
 
"El uso de las TIC en la vida cotidiana". SantanaMartinez_Alejandra
"El uso de las TIC en la vida cotidiana". SantanaMartinez_Alejandra"El uso de las TIC en la vida cotidiana". SantanaMartinez_Alejandra
"El uso de las TIC en la vida cotidiana". SantanaMartinez_Alejandra
241578066
 
bomba-koomey -Todo sobre sus istema y conexiones
bomba-koomey -Todo sobre sus istema y conexionesbomba-koomey -Todo sobre sus istema y conexiones
bomba-koomey -Todo sobre sus istema y conexiones
JessAdrinGonzlezCade
 
Índice del libro "Metaverso y mundos virtuales: Tecnologías, Retos y Oportuni...
Índice del libro "Metaverso y mundos virtuales: Tecnologías, Retos y Oportuni...Índice del libro "Metaverso y mundos virtuales: Tecnologías, Retos y Oportuni...
Índice del libro "Metaverso y mundos virtuales: Tecnologías, Retos y Oportuni...
Telefónica
 
DE LO HUMANO Y LO COMUNITARIO PROYECTO INTEGRADOR (2).docx
DE LO HUMANO Y LO COMUNITARIO PROYECTO INTEGRADOR (2).docxDE LO HUMANO Y LO COMUNITARIO PROYECTO INTEGRADOR (2).docx
DE LO HUMANO Y LO COMUNITARIO PROYECTO INTEGRADOR (2).docx
lourdesuribe6
 

Último (18)

Catalogo-Voxtech- accesorios radios RF.pdf
Catalogo-Voxtech- accesorios radios RF.pdfCatalogo-Voxtech- accesorios radios RF.pdf
Catalogo-Voxtech- accesorios radios RF.pdf
 
Informe_mc_bombas_Warman_001-WEIR vulco.pdf
Informe_mc_bombas_Warman_001-WEIR vulco.pdfInforme_mc_bombas_Warman_001-WEIR vulco.pdf
Informe_mc_bombas_Warman_001-WEIR vulco.pdf
 
11. Legislación Aplicada a la Informática.pdf
11. Legislación Aplicada a la Informática.pdf11. Legislación Aplicada a la Informática.pdf
11. Legislación Aplicada a la Informática.pdf
 
Conceptos y definiciones de Antenas y propagación
Conceptos y definiciones de Antenas y propagaciónConceptos y definiciones de Antenas y propagación
Conceptos y definiciones de Antenas y propagación
 
SEGUNDA GENERACIÓN xxxxxxxxxxxxxxxx.docx
SEGUNDA GENERACIÓN xxxxxxxxxxxxxxxx.docxSEGUNDA GENERACIÓN xxxxxxxxxxxxxxxx.docx
SEGUNDA GENERACIÓN xxxxxxxxxxxxxxxx.docx
 
Diapositiva sobre Tecnologia de la Información y Telecomunicaciones.pptx
Diapositiva sobre Tecnologia de la Información y Telecomunicaciones.pptxDiapositiva sobre Tecnologia de la Información y Telecomunicaciones.pptx
Diapositiva sobre Tecnologia de la Información y Telecomunicaciones.pptx
 
590248542-Pruebas-de-auditoria-informatica.pdf
590248542-Pruebas-de-auditoria-informatica.pdf590248542-Pruebas-de-auditoria-informatica.pdf
590248542-Pruebas-de-auditoria-informatica.pdf
 
DN Consultores | Una mirada al mercado de fibra en Perú
DN Consultores | Una mirada al mercado de fibra en PerúDN Consultores | Una mirada al mercado de fibra en Perú
DN Consultores | Una mirada al mercado de fibra en Perú
 
400816850-Mantenimiento-de-Equipos-de-Espesamiento-pdf.pdf
400816850-Mantenimiento-de-Equipos-de-Espesamiento-pdf.pdf400816850-Mantenimiento-de-Equipos-de-Espesamiento-pdf.pdf
400816850-Mantenimiento-de-Equipos-de-Espesamiento-pdf.pdf
 
Evolución, características, aplicación, ventajas y desventajas de las TIC
Evolución, características, aplicación, ventajas y desventajas de las TICEvolución, características, aplicación, ventajas y desventajas de las TIC
Evolución, características, aplicación, ventajas y desventajas de las TIC
 
_Manejo de Riesgos en el Laboratorio.pdf
_Manejo de Riesgos en el Laboratorio.pdf_Manejo de Riesgos en el Laboratorio.pdf
_Manejo de Riesgos en el Laboratorio.pdf
 
Generaciones de Computadoras .
Generaciones de Computadoras                 .Generaciones de Computadoras                 .
Generaciones de Computadoras .
 
El uso de las TIC en la vida cotidiana.pptx
El uso de las TIC en la vida cotidiana.pptxEl uso de las TIC en la vida cotidiana.pptx
El uso de las TIC en la vida cotidiana.pptx
 
PROTOCOLO DE NANOPOROS Kit de códigos de barras 16S (SQK-RAB204)
PROTOCOLO DE NANOPOROS Kit de códigos de barras 16S (SQK-RAB204)PROTOCOLO DE NANOPOROS Kit de códigos de barras 16S (SQK-RAB204)
PROTOCOLO DE NANOPOROS Kit de códigos de barras 16S (SQK-RAB204)
 
"El uso de las TIC en la vida cotidiana". SantanaMartinez_Alejandra
"El uso de las TIC en la vida cotidiana". SantanaMartinez_Alejandra"El uso de las TIC en la vida cotidiana". SantanaMartinez_Alejandra
"El uso de las TIC en la vida cotidiana". SantanaMartinez_Alejandra
 
bomba-koomey -Todo sobre sus istema y conexiones
bomba-koomey -Todo sobre sus istema y conexionesbomba-koomey -Todo sobre sus istema y conexiones
bomba-koomey -Todo sobre sus istema y conexiones
 
Índice del libro "Metaverso y mundos virtuales: Tecnologías, Retos y Oportuni...
Índice del libro "Metaverso y mundos virtuales: Tecnologías, Retos y Oportuni...Índice del libro "Metaverso y mundos virtuales: Tecnologías, Retos y Oportuni...
Índice del libro "Metaverso y mundos virtuales: Tecnologías, Retos y Oportuni...
 
DE LO HUMANO Y LO COMUNITARIO PROYECTO INTEGRADOR (2).docx
DE LO HUMANO Y LO COMUNITARIO PROYECTO INTEGRADOR (2).docxDE LO HUMANO Y LO COMUNITARIO PROYECTO INTEGRADOR (2).docx
DE LO HUMANO Y LO COMUNITARIO PROYECTO INTEGRADOR (2).docx
 

Cont clase de lenguaje IV

  • 1. IUTE - MÉRIDA LENGUAJE DE PROGRAMACIÓN IV Prof: Duberlis González CODIGOS BÁSICOS HTML (Continuación) Octubre 2007
  • 2. CODIGOS HTML Todo el texto que disponemos en el cuerpo de la página aparece en la misma línea, no importa si cuando tipeamos la página disponemos cada palabra en una línea distinta (es decir un navegador no tiene en cuenta la tecla ENTER). Para indicarle al navegador que queremos que continúe en la próxima línea debemos hacerlo con el elemento HTML <br>. Cuando aparece la marca <br> el navegador continua con el texto en la línea siguiente. Es uno de los pocos elementos HTML que no tiene marca de cerrado como habíamos visto hasta ahora. Implementemos una página que muestre los nombres de distintos lenguajes de programación uno por línea: <html> <head> </head> <body> PHP<br> JavaScript<br> Java<br> C <br> C++ </body> </html>
  • 3. CODIGOS HTML Enfatizar algo significa realzar la importancia de una cosa, por ejemplo una palabra o conjunto de palabras. Así como tenemos seis niveles de títulos para enfatizar un bloque contamos con dos elementos que son (<em> <strong>) El elemento de mayor fuerza de énfasis es strong y le sigue em. Para recordar el nombre de estos elementos HTML: <em> viene de empathize que significa énfasis. <strong> viene de strong que significa fuerte. <html> <head> </head> <body> <p><strong>Típos de datos</strong> en MySQL</p> <p><em>TEXTO</em>: Para almacenar texto usamos cadenas de caracteres. Las cadenas se colocan entre comillas simples. Podemos almacenar dígitos con los que no se realizan operaciones matemáticas, por ejemplo, códigos de identificación, números de documentos, números telefónicos. Tenemos los siguientes tipos: varchar, char y text.</p> <p><em>NUMEROS</em>: Existe variedad de tipos numéricos para representar enteros, negativos, decimales. Para almacenar valores enteros, por ejemplo, en campos que hacen referencia a cantidades, precios, etc., usamos el tipo integer. Para almacenar valores con decimales utilizamos: float o decimal.</p> <p><em>FECHAS Y HORAS</em>: para guardar fechas y horas dispone de varios tipos: date (fecha), datetime (fecha y hora), time (hora), year (año) y timestamp.</p> </body> </html>
  • 4. CODIGOS HTML El elemento más importante que tiene una página de Internet es el hipervínculo , estos nos permiten cargar otra página en el navegador. Normalmente un navegador al encontrar esta marca muestra un texto subrayado, y al hacer clic con el mouse sobre éste el navegador carga la página indicada por dicho hipervínculo. Primero veremos cual es la sintaxis para disponer un hipervínculo a una página que se encuentra en el mismo sitio (es decir otra página que hemos desarrollado nosotros). <a href=&quot;pagina2.html&quot;>Noticias</a> Como vemos, se trata de otro elemento HTML que tiene comienzo de marca y fin de marca. Lo que se encuentra entre el comienzo de marca y el fin de la marca es el texto que aparece en la página (normalmente subrayado). <a> viene de anchor que significa ancla. La propiedad href del elemento &quot;a&quot; hace referencia a la página que debe mostrar el navegador si el visitante hace clic sobre el hipervínculo.
  • 5. CODIGOS HTML Implementemos dos páginas que contengan hipervínculos entre si, los nombres de las páginas HTML serán: pagina1.html y pagina2.html. Pagina1.html <html> <head> </head> <body> <h1>Página principal.</h1> <a href=&quot;pagina2.html&quot;>Noticias</a> </body> </html> Pagina2.html <html> <head> </head> <body> <h1>Noticias</h1> <a href=&quot;pagina1.html&quot;>Salir.</a> </body> </html> Si se quiere realizar un hipervínculo con el nombre del dominio del otro sitio, debemos inicializamos href con el tipo de protocolo http, cuando se trata de una pagina web. Ejemplo <html> <head> </head> <body> <a href=&quot;http://www.google.com&quot;>Buscador Google</a> </body> </html>
  • 6. CODIGOS HTML Para insertar una imagen dentro de una página debemos utilizar el elemento HTML <img>, la misma no tiene una marca de finalización Generalmente, la imagen se encuentra en el mismo servidor donde se almacenan nuestras páginas HTML. Los formatos clásicos son los archivos con extensiones gif, jpg y png. La sintaxis de esta marca es: <img src=&quot;foto1.jpg&quot; alt=&quot;Pintura geométrica&quot;> <img> viene de image src viene de source alt viene de alternative Confeccionemos una página que muestre una imagen llamada foto1.jpg (La imagen se encuentra almacenada en el servidor en la misma carpeta donde se localiza esta página) <html> <head> </head> < body> <img src=&quot;foto1.jpg&quot; alt=&quot;Pintura geométrica&quot;> </body> </html>
  • 7. CODIGOS HTML Si la imagen se encuentra en una subcarpeta llamada imagenes, luego la sintaxis para recuperarla será: <img src=&quot;imagenes/foto1.jpg&quot; alt=&quot;Pintura geométrica&quot;> Es decir, antecedemos al nombre de la imagen el nombre de la carpeta y la barra / Si la imagen se encuentra en una carpeta padre de donde se encuentra la página HTML luego la sintaxis será: <img src=&quot;../foto1.jpg&quot; alt=&quot;Pintura geométrica&quot;> Es decir, le antecedemos .. y la barra / al nombre de la imagen Si queremos subir dos carpetas luego escribimos: <img src=&quot;../../foto1.jpg&quot; alt=&quot;Pintura geométrica&quot;>
  • 8. CODIGOS HTML Como ya conocemos los hipervínculos y como insertar imágenes en nuestra página, ahora podemos implementar un hipervínculo pero en vez de mostrar un texto mostraremos una imagen. La solución es simple y consiste en disponer la marca <img> encerrada entre la marca de comienzo y fin del enlace(<a>). Confeccionemos una página que muestre dos imagenes (foto1.jpg y foto2.jpg) como hipervínculos. Al ser presionados llamar a otra página. Las imágenes se encuentran en una carpeta llamada imagenes que depende directamente de la raiz del sitio: <html> <head> </head> <body> <h2>Presione alguna de las imagenes para conocer más sobre esa obra.</h2> <a href=&quot;pagina2.html&quot;><img src=&quot;/imagenes/foto1.jpg&quot; alt=&quot;Pintura Geométrica&quot;></a> <br> <a href=&quot;pagina2.html&quot;><img src=&quot;/imagenes/foto2.jpg&quot; alt=&quot;Pintura Geométrica&quot;></a> </body> </html>
  • 9. CODIGOS HTML Listas Ordenadas, Este elemento HTML es útil cuando debemos numerar una serie de objetos. <ol> viene de ordened list <li> viene de list item Por ejemplo una lista ordenada para conocer su sintaxis. Mostraremos el orden de llegada de tres corredores: <html> <head> </head> <body> <ol> <li>Rodriguez Pablo</li> <li>Gonzalez Raul</li> <li>Lopez Hector</li> </ol> </body> </html> La marca <ol> y su correspondiente marca de cerrado es </ol> En su interior cada uno de los items se los dispone con el elemento li, que también tiene la marca de comienzo <li> y la marca de fin de item </li>
  • 10. CODIGOS HTML Una lista no ordenada como su nombre lo indica no utiliza un número delante de cada items sino un pequeño símbolo gráfico. <ul> viene de unordered list <li> viene de list item La forma de implementar este tipo de listas es idéntico a las listas ordenadas. Veamos un ejemplo donde implementamos una lista no ordenada: <html> <head> </head> <body> <h2>Lenguajes de programación.</h2> <ul> <li>C</li> <li>C++</li> <li>Java</li> <li>C#</li> </ul> </body> </html>
  • 11. CODIGOS HTML Como su nombre lo indica se utiliza para asociar un término y la definición del mismo. El navegador se encarga de destacar y separa el término y su definición. Como podemos observar intervienen más marcas que en los otros dos tipos de listas. Las marcas que encierran a la lista son <dl> (Definition List) y </dl> Ahora debemos poner a pares estos dos elementos <dt> (Definition Term) y <dd> (Definition Description). <dl> viene de definition list <dt> viene de definition term <dd> viene de definition description
  • 12. CODIGOS HTML Ejemplo Listas por Definición <html> <head> </head> <body> <dl> <dt>C++</dt> <dd>Es un lenguaje de programación, diseñado a mediados de los años 1980, por Bjarne Stroustrup, como extensión del lenguaje de programación C.</dd> <dt>Java</dt> <dd>Es un lenguaje de programación orientado a objetos desarrollado por Sun Microsystems a principios de los 90.</dd> <dt>JavaScript</dt> <dd>Es un lenguaje interpretado, es decir, que no requiere compilación, utilizado principalmente en páginas web, con una sintaxis semejante a la del lenguaje C.</dd> </dl> </body> </html>
  • 13. CODIGOS HTML Listas Anidadas, el lenguaje HTML nos permite insertar una lista dentro de otra. Se pueden anidar listas de distinto tipo, por ejemplo podemos tener una lista no ordenada y uno de los item puede ser una lista ordenada . Para el anidamiento de listas solo debemos tener cuidado en la correcta apertura y cerrado de las marcas. Usaremos: <li></li> <ul> </ul> <ol</ol>
  • 14. Implementaremos una página que enumere una serie de países en una lista ordenada y luego en cada país dispondremos una lista de hipervínculos de periódicos de dicho país: <html> <head> </head> <body> <ol> <li>Argentina <ul> <li> <a href=&quot;http://www.lanacion.com.ar&quot;>La Nación</a> </li> <li> <a href=&quot;http://www.clarin.com.ar&quot;>Clarín</a> </li> <li><a href=&quot;http://www.pagina12.com.ar&quot;>Página 12</a></li> </ul> </li> <li>España <ul> <li> <a href=&quot;http://www.elpais.es&quot;>El País Digital</a></li> <li><a href=&quot;http://www.abc.es&quot;>ABC</a></li> <li><a href=&quot;http://www.elmundo.es&quot;>El Mundo</a></li> </ul> </li> <li>México <ul> <li><a href=&quot;http://www.jornada.unam.mx&quot;>La Jornada</a></li> <li><a href=&quot;http://www.el-universal.com.mx&quot;>El Universal</a></li> </ul> </li> </ol> /body> </html>
  • 15. CODIGOS HTML Tablas, el objetivo fundamental de las tablas es mostrar una serie de datos en forma ordenada, organizado en filas y columnas. Para la creación de una tabla intervienen una serie de elementos: <table> Es la marca de comienzo de la tabla. Este elemento requiere la marca de cierre. <tr> Es la marca de comienzo de una fila. Esta marca debe estar dentro del elemento table. Este elemento requiere la marca de cierre. <td> Es la marca de comienzo de una celda. Esta marca debe estar dentro del elemento tr. Este elemento requiere la marca de cierre. <table> <tr> viene de table row que significa fila de la tabla. <td> viene de table data que significa dato de la tabla. Lo primero que aparece es la apertura del elemento table, donde inicializamos la propiedad border con el valor 1, con esto el contorno de cada celda será visible (pruebe de asignarle el valor cero y otros valores superiores a 1) .
  • 16. Ejemplo de tablas en HTML <table border=&quot;1&quot;> Seguidamente viene la apertura de la primer fila de la tabla con el elemento tr: <tr> Continuamos con la apertura de la primer celda de la primer fila de la tabla: <td> Luego el dato propiamente dicho de la celda: Cerramos la celda: </td> Abrimos la proxima celda:<td> Disponemos el valor de la celda: Cerramos la celda: </td> Ahora cerramos la primer fila de la tabla: </tr> El mecanismos de la siguientes filas es similar a la primera.
  • 17. Ejemplo de tablas en HTML <html> <head> </head> <body> <table border=&quot;1&quot;> <tr> <td>China</td><td>1300 millones</td> </tr> <tr> <td>India</td><td>1080 millones</td> </tr> <tr> <td>Estados Unidos</td><td>295 millones</td> </tr> </table> </body> </html>
  • 18. CODIGOS HTML Tablas con encabezado, la primer característica que le vamos a agregar a una tabla son las celdas de encabezado. Normalmente la primer fila de una tabla puede representar los títulos para cada columna. Para indicar que se trata de una celda de encabezado utilizamos el elemento <th> en lugar de <td> <th> viene de table header cell que significa celda de encabezado de tabla. El navegador representa distinto las celdas de datos y las celdas de encabezamiento. Tomando el ejemplo anterior:
  • 19. Ejemplo de tablas en HTML <html> <head> </head> <body> <table border=&quot;1&quot;> <tr> <th>Paises</th><th>Cantidad de habitantes</th> </tr> <tr> <td>China</td><td>1300 millones</td> </tr> <tr> <td>India</td><td>1080 millones</td> </tr> <tr> <td>Estados Unidos</td><td>295 millones</td> </tr> </table> </body> </html>
  • 20. CODIGOS HTML Tablas con titulo, Para disponer un título a una tabla debemos incorporar el elemento caption inmediatamente después que abrimos la marca table. El elemento caption requiere la marca de apertura y cierre. La marca caption debe estar inmediatamente después que se abre la marca de comienzo de la tabla: <table border=&quot;1&quot;> <caption>Población de los paises con mayor cantidad de habitantes.</caption> <tr> Para recordar el nombre de este nuevo elemento HTML: <caption> significa título.
  • 21. CODIGOS HTML Algunos caracteres especiales, ahora podemos disponer dentro de una página los caracteres: < y >. Veremos que no los podemos disponer directamente ya que el navegador los confudiría con los caracteres que se utilizan para las marcas HTML. La solución es utilizar otra sintaxis para dichos caracteres, veamos los más utilizados: < &lt; > &gt; & &amp; &quot; &quot;   &nbsp; //Espacio en blanco. © &copy; € &euro; Para ver su funcionamiento mostraremos la siguiente ecuación: 10+x*y < 12*z se haria de la siguiente manera 10+x*y &lt; 12*z
  • 22. DANDO FORMA AL TEXTO Si queremos obtener múltiples líneas en blanco no basta con repetir la etiqueta <P>, sino que hay que combinarla con la etiqueta <BR>. Así por ejemplo, si queremos obtener cuatro líneas en blanco, pondríamos: <BR><P> <BR><P> <BR><P> <BR><P> Para destacar alguna parte del texto se pueden usar: <B> y </B> para poner algo en negrita ( bold ). <I> y </I> para poner algo en cursiva ( italic ). Otra etiqueta interesante es <PRE> y </PRE>. El texto que se encuentre entre ella estará preformateado , es decir que aparecerá como si hubiera sido escrito con una máquina de escribir, con una fuente de espaciado fijo (tipo Courier). La etiqueta <BLOCKQUOTE> y </BLOCKQUOTE> se utiliza para destacar una cita textual dentro del texto general