Html
-
Upload
marcela-osorio -
Category
Education
-
view
16 -
download
0
Transcript of Html
![Page 1: Html](https://reader035.fdocuments.net/reader035/viewer/2022081520/58896dc21a28ab44758b5dd5/html5/thumbnails/1.jpg)
Etiquetas ParaHTML
![Page 2: Html](https://reader035.fdocuments.net/reader035/viewer/2022081520/58896dc21a28ab44758b5dd5/html5/thumbnails/2.jpg)
¿Qué es HTML?HTML, sigla en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web.
![Page 3: Html](https://reader035.fdocuments.net/reader035/viewer/2022081520/58896dc21a28ab44758b5dd5/html5/thumbnails/3.jpg)
Etiquetas en HTMLUna etiqueta será un texto incluido entre los símbolos menor que (<) y mayor que (>). El texto incluido dentro de los símbolos será explicativo de la utilidad de la etiqueta.
![Page 4: Html](https://reader035.fdocuments.net/reader035/viewer/2022081520/58896dc21a28ab44758b5dd5/html5/thumbnails/4.jpg)
EtiquetaBody
![Page 5: Html](https://reader035.fdocuments.net/reader035/viewer/2022081520/58896dc21a28ab44758b5dd5/html5/thumbnails/5.jpg)
Etiqueta BodyEl cuerpo de un documento HTML es la parte central de una página web, este se define por medio de la etiqueta BODY.Comprende todo el código situado entre las etiquetas <BODY> y </BODY>, su contenido si es visible en la ventana del navegador
![Page 6: Html](https://reader035.fdocuments.net/reader035/viewer/2022081520/58896dc21a28ab44758b5dd5/html5/thumbnails/6.jpg)
Puede contener los siguientes elementos:
• Elementos estándares HTML: párrafos, formularios, tablas, listas, etc.
• Capas definidas mediante etiquetas <div>…</div> o <span>…</span>
• Códigos de lenguajes en servidor: JSP, Java, ASP, PHP, etc.
• Objetos incrustados: Applets, animaciones Flahs, etc.
![Page 7: Html](https://reader035.fdocuments.net/reader035/viewer/2022081520/58896dc21a28ab44758b5dd5/html5/thumbnails/7.jpg)
![Page 8: Html](https://reader035.fdocuments.net/reader035/viewer/2022081520/58896dc21a28ab44758b5dd5/html5/thumbnails/8.jpg)
Etiqueta Para listas en
HTML
![Page 9: Html](https://reader035.fdocuments.net/reader035/viewer/2022081520/58896dc21a28ab44758b5dd5/html5/thumbnails/9.jpg)
Etiquetas para listas en HTML
En la mayoría de los documentos HTML se usan listas para organizar el texto. El lenguaje HTML incorpora distintas formas de mostrar listas, por ejemplo con viñetas sencillas o también con letras o números.
![Page 10: Html](https://reader035.fdocuments.net/reader035/viewer/2022081520/58896dc21a28ab44758b5dd5/html5/thumbnails/10.jpg)
IMPORTANTE
Hoja de estilo en cascada o CSS (siglas en inglés de cascading style sheets) es un lenguaje usado para definir y crear la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML).
![Page 11: Html](https://reader035.fdocuments.net/reader035/viewer/2022081520/58896dc21a28ab44758b5dd5/html5/thumbnails/11.jpg)
Listas no OrdenadasLas listas no ordenadas son aquellas que se encuentran entre las etiquetas <ul> y </ul> (ul indica unordered list), etiqueta de apertura y cierre respectivamente. Si queremos añadir un nuevo punto, lo tendremos que hacer dentro de las etiquetas <li> y </li>.
![Page 12: Html](https://reader035.fdocuments.net/reader035/viewer/2022081520/58896dc21a28ab44758b5dd5/html5/thumbnails/12.jpg)
Si no le indicamos nada a la etiqueta <li>, la viñeta o marca que indica que se trata de un elemento de una lista se generará de forma automática. Pero si queremos definir nosotros mismo el símbolo del punto o marca a emplear, debemos indicarlo específicamente. En el pasado se usaba el atributo “type”, hoy en día no recomendado (deprecated). Con este atributo se podía hacer que la lista estuviera definida por puntos negros (li type="disc"), por puntos con el fondo blanco (li type="circle") o por cuadrados (li type="square").
![Page 13: Html](https://reader035.fdocuments.net/reader035/viewer/2022081520/58896dc21a28ab44758b5dd5/html5/thumbnails/13.jpg)
La sintaxis recomendada para indicar la apariencia se basa en usar CSS como indicamos a continuación:
<ul style="list-style-type:disc">
<ul style="list-style-type:circle">
<ul style="list-style-type:square">
![Page 14: Html](https://reader035.fdocuments.net/reader035/viewer/2022081520/58896dc21a28ab44758b5dd5/html5/thumbnails/14.jpg)
![Page 15: Html](https://reader035.fdocuments.net/reader035/viewer/2022081520/58896dc21a28ab44758b5dd5/html5/thumbnails/15.jpg)
Listas OrdenadasSi lo que pretendemos es definir una lista ordenada, lo tendremos que hacer entre las etiquetas <ol> </ol> (ol indica ordered list). Además, cada elemento de la lista se escribirá con la misma etiqueta que para las listas no ordenadas: <li>. Pero al ser listas ordenadas los símbolos por defecto serán números y éstos se irán generando automáticamente por orden, conforme escribamos nuevos elementos de la lista.
![Page 16: Html](https://reader035.fdocuments.net/reader035/viewer/2022081520/58896dc21a28ab44758b5dd5/html5/thumbnails/16.jpg)
En las listas ordenadas podemos hacer que el primer punto comience con el número que nosotros queramos. Lo conseguiremos gracias al atributo “value”. Los siguientes puntos que escribamos se generarán automáticamente por orden, partiendo de ese número.
![Page 17: Html](https://reader035.fdocuments.net/reader035/viewer/2022081520/58896dc21a28ab44758b5dd5/html5/thumbnails/17.jpg)
La sintaxis recomendada para indicar la apariencia se basa en usar CSS como indicamos a continuación: <ul style="list-style-type:decimal"> para números. <ul style="list-style-type:lower-alpha"> para letras minúsculas. <ul style="list-style-type:upper-alpha"> para letras mayúsculas. <ul style="list-style-type:lower-roman"> para números romanos en minúsculas. <ul style="list-style-type:upper-roman"> para números romanos en mayúsculas.
![Page 18: Html](https://reader035.fdocuments.net/reader035/viewer/2022081520/58896dc21a28ab44758b5dd5/html5/thumbnails/18.jpg)
Lista de DefinicionesLas listas de definiciones se usan cuando queremos hacer una enumeración tipo “diccionario” donde tenemos varios términos y su definición o descripción.
![Page 19: Html](https://reader035.fdocuments.net/reader035/viewer/2022081520/58896dc21a28ab44758b5dd5/html5/thumbnails/19.jpg)
Para crear una lista de definiciones debemos usar las etiquetas <dl>, <dt> y <dd>. Vamos a explicarlas por partes:• La etiqueta <dl> indica que dentro de ella va a ir
una lista de definiciones o lista de descripciones.• La etiqueta <dt> indica que dentro de ella va un
término que vamos a definir.• La etiqueta <dd> nos dice que dentro de ella se
encuentra una definición o descripción asociada a un término. Un término podría tener varias descripciones. Por ejemplo el término Autor podría tener como descripciones: Mateo Renzi, Olivo Pascua, Jorge Guillén.
![Page 20: Html](https://reader035.fdocuments.net/reader035/viewer/2022081520/58896dc21a28ab44758b5dd5/html5/thumbnails/20.jpg)
![Page 21: Html](https://reader035.fdocuments.net/reader035/viewer/2022081520/58896dc21a28ab44758b5dd5/html5/thumbnails/21.jpg)
Anidamiento o uso simultáneo (combinación) de
varios tipos de listasSi lo deseamos, podemos combinar unos tipos de listas con otros. Por ejemplo, tener listas ordenadas dentro de cada elemento de una lista desordenada.
![Page 22: Html](https://reader035.fdocuments.net/reader035/viewer/2022081520/58896dc21a28ab44758b5dd5/html5/thumbnails/22.jpg)
![Page 23: Html](https://reader035.fdocuments.net/reader035/viewer/2022081520/58896dc21a28ab44758b5dd5/html5/thumbnails/23.jpg)
![Page 24: Html](https://reader035.fdocuments.net/reader035/viewer/2022081520/58896dc21a28ab44758b5dd5/html5/thumbnails/24.jpg)