tag:blogger.com,1999:blog-90926027587833779122024-03-05T00:52:14.282-08:00Blog básico para practicar HTML(web para practicar y apender los elementos fundamentales de la programación HTML)Jesus Romo Uriartehttp://www.blogger.com/profile/11291884683676354319noreply@blogger.comBlogger26125tag:blogger.com,1999:blog-9092602758783377912.post-68843749424772183062020-11-24T10:57:00.004-08:002022-10-10T01:14:57.467-07:0012 | Diferentes Lenguajes de Marcas<table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody>
<tr>
<td><div style="text-align: center;">
En este post revisar el código HTML para deducir cómo consigue el sangrado de un texto (su desplazamiento hacia la derecha para dejar un espacio en el margen izquierdo). Identificar los diferentes tipos de letras, así como el color del fondo. Analizar el enlace a otra página web. Observar que la imagen insertada es, en esencia, un enlace que apunta a un objeto imagen. </div>
</td></tr>
</tbody></table>
<br />
<blockquote>
<div style="background-color: lightgrey; font-family: "trebuchet ms", sans-serif;">
Un <b>lenguaje de marcado</b> o <b>lenguaje de marcas</b> es una forma de codificar un documento que, junto con el texto, incorpora etiquetas o marcas que contienen información adicional acerca de la estructura del texto o su presentación.<br />
<br />
El lenguaje de marcas más extendido es el HTML (<i>HyperText Markup Language</i>, lenguaje de marcado de hipertexto), fundamento del World Wide Web (entramado de comunicación de alcance mundial).<br />
<br />
Los lenguajes de marcado suelen confundirse con lenguajes de programación. Sin embargo, no son lo mismo, ya que el lenguaje de marcado no tiene funciones aritméticas o variables, como poseen los lenguajes de programación. Históricamente, el marcado se usaba y se usa en la industria editorial y de la comunicación, así como entre autores, editores e impresores.<br />
<br />
(Tomado de Wikipedia <a href="https://es.wikipedia.org/wiki/Lenguaje_de_marcado" target="_blank">https://es.wikipedia.org/wiki/Lenguaje_de_marcado</a>)</div>
</blockquote>
<br />
A continuación se muestra una imagen con algunas instrucciones de marcado de tres lenguajes muy extendidos:<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2-hn8Mh5yvsd535pI9UFB8_ptsfwIGtze8Tkfw8la_trx42QZw6cavOGIXof6h0LpMIDvcN8ezYquUGWKJQ99JwdrlwddWn6X5Zbwlxz7shxMlmy4Wd2S12UVXou0uXhH3Y-08AV1bwiUKklv4AwLa8GLOmlTDlfPoUxrCFTvDbd5muqSdLYyFqBt/s668/DiferentesLenguajesDeMarcas_HTML-Latex-Wikitexto.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="313" data-original-width="668" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2-hn8Mh5yvsd535pI9UFB8_ptsfwIGtze8Tkfw8la_trx42QZw6cavOGIXof6h0LpMIDvcN8ezYquUGWKJQ99JwdrlwddWn6X5Zbwlxz7shxMlmy4Wd2S12UVXou0uXhH3Y-08AV1bwiUKklv4AwLa8GLOmlTDlfPoUxrCFTvDbd5muqSdLYyFqBt/s16000/DiferentesLenguajesDeMarcas_HTML-Latex-Wikitexto.png" /></a></div>
Jesus Romo Uriartehttp://www.blogger.com/profile/11291884683676354319noreply@blogger.com0tag:blogger.com,1999:blog-9092602758783377912.post-8837739498582401802020-11-24T10:56:00.002-08:002020-11-24T12:06:54.403-08:0012 | Diferentes Lenguajes de Marcas [código HTML]<span style="font-family: "courier new" , "courier" , monospace;"><table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody><br /><tr><br /><td><div style="text-align: center;"><br />En este post revisar el código HTML para deducir cómo consigue el sangrado de un texto (su desplazamiento hacia la derecha para dejar un espacio en el margen izquierdo). Identificar los diferentes tipos de letras, así como el color del fondo. Analizar el enlace a otra página web. Observar que la imagen insertada es, en esencia, un enlace que apunta a un objeto imagen. </div><br /></td></tr><br /></tbody></table><br /><br /><br /><blockquote><br /><div style="background-color: lightgrey; font-family: &quot;trebuchet ms&quot; , sans-serif;"><br />Un&nbsp;<b>lenguaje de marcado</b>&nbsp;o&nbsp;<b>lenguaje de marcas</b>&nbsp;es una forma de codificar un documento que, junto con el texto, incorpora&nbsp;etiquetas o marcas que contienen información adicional acerca de la estructura del texto o su presentación.<br /><br /><br /><br />El lenguaje de marcas más extendido es el&nbsp;HTML&nbsp;(<i>HyperText Markup Language</i>, lenguaje de marcado de hipertexto), fundamento del&nbsp;World Wide Web&nbsp;(entramado de comunicación de alcance mundial).<br /><br /><br /><br />Los lenguajes de marcado suelen confundirse con&nbsp;lenguajes de programación. Sin embargo, no son lo mismo, ya que el lenguaje de marcado no tiene funciones aritméticas o variables, como poseen los lenguajes de programación. Históricamente, el marcado se usaba y se usa en la industria&nbsp;editorial&nbsp;y de la comunicación, así como entre&nbsp;autores,&nbsp;editores&nbsp;e&nbsp;impresores.<br /><br /><br /><br />(Tomado de Wikipedia&nbsp;<a href="https://es.wikipedia.org/wiki/Lenguaje_de_marcado" target="_blank">https://es.wikipedia.org/wiki/Lenguaje_de_marcado</a>)</div><br /></blockquote><br /><br /><br />A continuación se muestra una imagen con algunas instrucciones de marcado de tres lenguajes muy extendidos:<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDDrpGjiwWcrCe-bdCjS0aIIK7j5FUSzfQePDm5K7_EAPS6M_mTG-1nu3aSd-gZUM856ZEskBBQUNQ3nEmC2mulWt7KK3CZLMxm49_RVNtq_Swj9dKn0JbWNtyy6oiOh0w3iOnhGfaK7c/s1600/DiferentesLenguajesDeMarcas.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="313" data-original-width="668" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDDrpGjiwWcrCe-bdCjS0aIIK7j5FUSzfQePDm5K7_EAPS6M_mTG-1nu3aSd-gZUM856ZEskBBQUNQ3nEmC2mulWt7KK3CZLMxm49_RVNtq_Swj9dKn0JbWNtyy6oiOh0w3iOnhGfaK7c/s1600/DiferentesLenguajesDeMarcas.png" /></a></span>Jesus Romo Uriartehttp://www.blogger.com/profile/11291884683676354319noreply@blogger.com0tag:blogger.com,1999:blog-9092602758783377912.post-24863261143879052612020-11-24T10:54:00.001-08:002022-10-03T07:39:44.446-07:0011 | Enlace ancla<table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody>
<tr>
<td><div style="text-align: center;">Ancla es un enlace a cierto punto concreto de una determinada página HTML, de forma que mediante el <i>enlace ancla</i> el visitante salta directamente a ese lugar señalado de la página. En este post se explica la manera de llegar a dos secciones específicas de la página <a href="http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html" target="_blank"><b>Enlazar vs. incrustar</b></a> anteriormente mostrada.</div>
</td></tr>
</tbody></table>
<br />
<p>Para crear un enlace es preciso distinguir entre dos conceptos y a cada cual le corresponderá un código HTML, los conceptos son:</p>
<ul>
<li>Punto de destino, su código será un identificador.</li>
<li>Punto de origen, su código HTML es la URI completa del punto de destino.</li>
</ul>
<br />
<hr style="background-color: #0056b2; height: 4px;" />
<br />
<h3>Punto de destino</h3>
<p>Supongamos que en cierto lugar de la página <span style="font-family: courier;">http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html</span> se desea colocar un par de anclas que serán los puntos de destino. Para ello se escribirá en cada punto de destino el siguiente código:</p>
<p style="margin-left: 40px; text-align: left;"><span style="font-family: courier;">
<div id="AnclaEnlazar"> </div><br />
<div id="AnclaIncrustar"> </div></span></p>
<br />
<h3>Punto de origen</h3>
<p>Para referirse directamente uno de los puntos anteriormente definidos, habrá que usar la correspondiente URI completa. En el caso que nos ocupa, una de las direcciones sería: <span style="font-family: courier;">http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html#</span><span style="font-family: courier;"><span style="font-family: courier;">AnclaEnlazar</span></span> donde a la referencia de la página se le ha añadido, por ejemplo, el identificador del primer punto de destino.</p><p style="margin-left: 40px; text-align: left;"><span style="font-family: courier;"><div id="AnclaEnlazar"> </div></span> <br /></p>
<br />
<p>Continuando con el caso anterior, distingamos entre sí estas tres URIs:</p>
<ol>
<li>Ir al comienzo de la página <a href="http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html" target="_blank"><span style="font-family: courier;">http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html</span></a> <br /></li>
<li>Ir a una sección de la página <a href="http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html#AnclaEnlazar" target="_blank"><span style="font-family: courier;">http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html#AnclaEnlazar</span></a> <br /></li>
<li>Ir a otra sección de la página <a href="http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html#AnclaIncrustar" target="_blank"><span style="font-family: courier;">http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html#AnclaIncrustar</span></a></li>
</ol>
Jesus Romo Uriartehttp://www.blogger.com/profile/11291884683676354319noreply@blogger.com0tag:blogger.com,1999:blog-9092602758783377912.post-72358895757563351622020-11-24T10:53:00.001-08:002022-10-03T07:40:05.389-07:0011 | Enlace ancla [código HTML]<p><span style="font-family: courier;"><table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody><br /><tr><br /><td><div style="text-align: center;">Ancla es un enlace a cierto punto concreto de una determinada página HTML, de forma que mediante el <i>enlace ancla</i> el visitante salta directamente a ese lugar señalado de la página. En este post se explica la manera de llegar a dos secciones específicas de la página <a href="http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html" target="_blank"><b>Enlazar vs. incrustar</b></a> anteriormente mostrada.</div><br /></td></tr><br /></tbody></table><br /><br /><br /><br /><p>Para crear un enlace es preciso distinguir entre dos conceptos y a cada cual le corresponderá un código HTML, los conceptos son:</p><br /><br /><ul><br /><li>Punto de destino, su código será un identificador.</li><br /><li>Punto de origen, su código HTML es la URI completa del punto de destino.</li><br /></ul><br /><br /><br /><br /><hr style="background-color: #0056b2; height: 4px;" /><br /><br /><br /><br /><h3>Punto de destino</h3><br /><p>Supongamos que en cierto lugar de la página <span style="font-family: courier;">http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html</span> se desea colocar un par de anclas que serán los puntos de destino. Para ello se escribirá en cada punto de destino el siguiente código:</p><br /><p style="margin-left: 40px; text-align: left;"><span style="font-family: courier;"><br />&lt;div id="AnclaEnlazar"&gt; &lt;/div&gt;<br /><br />&lt;div id="AnclaIncrustar"&gt; &lt;/div&gt;</span></p><br /><br /><br /><h3>Punto de origen</h3><br /><p>Para referirse directamente uno de los puntos anteriormente definidos, habrá que usar la correspondiente URI completa. En el caso que nos ocupa, una de las direcciones sería: <span style="font-family: courier;">http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html#</span><span style="font-family: courier;"><span style="font-family: courier;">AnclaEnlazar</span></span> donde a la referencia de la página se le ha añadido, por ejemplo, el identificador del primer punto de destino.</p><p style="margin-left: 40px; text-align: left;"><span style="font-family: courier;">&lt;div id="AnclaEnlazar"&gt; &lt;/div&gt;</span> <br /></p><br /><br /><br /><p>Continuando con el caso anterior, distingamos entre sí estas tres URIs:</p><br /><br /><ol><br /><li>Ir al comienzo de la página <a href="http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html" target="_blank"><span style="font-family: courier;">http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html</span></a> <br /></li><br /><li>Ir a una sección de la página <a href="http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html#AnclaEnlazar" target="_blank"><span style="font-family: courier;">http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html#AnclaEnlazar</span></a> <br /></li><br /><li>Ir a otra sección de la página <a href="http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html#AnclaIncrustar" target="_blank"><span style="font-family: courier;">http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html#AnclaIncrustar</span></a></li><br /></ol><br /><br /></span></p>Jesus Romo Uriartehttp://www.blogger.com/profile/11291884683676354319noreply@blogger.com0tag:blogger.com,1999:blog-9092602758783377912.post-76829631355932885932020-11-24T10:52:00.014-08:002022-10-14T00:55:00.500-07:0010 | Enlazar vs. incrustar<table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody>
<tr>
<td><div style="text-align: center;">
En este post revisar el código HTML para deducir cómo se logra enlazar otra página desde el blog. Además, es importante saber el modo en el que se embebe un vídeo (u otro objeto de información) en base a su código HTML. </div>
</td></tr>
</tbody></table>
<div id="AnclaEnlazar"> </div>
<br />
<h3>Enlazar</h3>
Esto <a href="https://youtu.be/w_DKWlrA24k" target="_blank">es un enlace</a> que abre la nueva página en otra pestaña. Veamos cómo se edita un enlace. En la siguiente imagen, se muestran varios enlaces y para conseguirlos:
<ol>
<li>Escribimos el literal y una vez escrito...</li>
<li>...con el ratón o el teclado seleccionamos el texto del literal y</li>
<li>mediante el icono de insertar enlace pegamos la URL de destino</li>
</ol>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody>
<tr>
<td style="border: 1px solid grey;"><a href="http://blogbasicoparapracticarhtml.blogspot.com/2018/01/simbolos-especiales.html" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="227" data-original-width="671" height="135" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUeyhqaBmMrt6f_xYVYL5RFpdVMwWbRkY1hwdvKMbZ7y5EkQxLIhpgPUWz-mAaFFYqYrkCfDU6LO5dpiknDZk_MMfbiRroEWBQ0URJaXfgvyeAozMK7m5RspI3Wl4cNHV4XoIooOvAN2I/w400-h135/InsertarEnlaces.png" width="400" /></a></td>
</tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Imagen de una página de este mismo blog</i><br /></td>
</tr>
</tbody></table>
<div id="AnclaIncrustar"> </div>
<p>De la misma manera que podemos hacer que un texto sea un enlace, es decir que apunte a cierta página web. Podemos hacer que una imagen sea también un enlace.</p>
<p>Para el caso de que la portadora del enlace sea una imagen los pasos siguen siendo tres:</p>
<ol style="text-align: left;">
<li>Introducimos la imagen en el blog</li>
<li>Con el ratón o el teclado seleccionamos la imagen y</li>
<li>Pulsamos sobre el icono de insertar enlace y pegamos la URL de destino</li>
</ol>
<p> </p>
<h3>Inscrustar</h3>
Y aquí se ha embebido un vídeo en la propia página:
<br />
<div style="text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/w_DKWlrA24k" width="560"></iframe>
</div>
<br />
Y aquí se ha embebido un visor para mostrar en archivo PDF:
<br />
<iframe src="https://drive.google.com/file/d/1cKyrlcKyix0L8BnOcXy3JMana9MO69vg/preview" width="640" height="600" allow="autoplay"></iframe>
<p> </p>
<p> </p>
<p> </p>
Jesus Romo Uriartehttp://www.blogger.com/profile/11291884683676354319noreply@blogger.com0tag:blogger.com,1999:blog-9092602758783377912.post-60154521450188244812020-11-24T10:51:00.006-08:002022-10-03T07:35:19.841-07:0010 | Enlazar vs. incrustar [código HTML]<p><span style="font-family: courier;"><table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody><br /><tr><br /><td><div style="text-align: center;"><br />En este post revisar el código HTML para deducir cómo se logra enlazar otra página desde el blog. Además, es importante saber el modo en el que se embebe un vídeo (u otro objeto de información) en base a su código HTML. </div><br /></td></tr><br /></tbody></table><br /><br /><div id="AnclaEnlazar"> </div><br /><br /><br /><h3>Enlazar</h3><br /><br />Esto <a href="https://youtu.be/w_DKWlrA24k" target="_blank">es un enlace</a> que abre la nueva página en otra pestaña. Veamos cómo se edita un enlace. En la siguiente imagen, se muestran varios enlaces y para conseguirlos:<br /><ol><br /> <li>Escribimos el literal y una vez escrito...</li><br /> <li>...con el ratón o el teclado seleccionamos el texto del literal y</li><br /> <li>mediante el icono de insertar enlace pegamos la URL de destino</li><br /></ol><br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><br /> <tr><br /> <td style="border: 1px solid grey;"><a href="http://blogbasicoparapracticarhtml.blogspot.com/2018/01/simbolos-especiales.html" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="227" data-original-width="671" height="135" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUeyhqaBmMrt6f_xYVYL5RFpdVMwWbRkY1hwdvKMbZ7y5EkQxLIhpgPUWz-mAaFFYqYrkCfDU6LO5dpiknDZk_MMfbiRroEWBQ0URJaXfgvyeAozMK7m5RspI3Wl4cNHV4XoIooOvAN2I/w400-h135/InsertarEnlaces.png" width="400" /></a></td><br /> </tr><br /> <tr><td class="tr-caption" style="text-align: center;"><i>Imagen de una página de este mismo blog</i><br /></td><br /> </tr><br /></tbody></table><br /><br /><div id="AnclaIncrustar"> </div><br /><br /><p>De la misma manera que podemos hacer que un texto sea un enlace, es decir que apunte a cierta página web. Podemos hacer que una imagen sea también un enlace.</p><br /><br /><p>Para el caso de que la portadora del enlace sea una imagen los pasos siguen siendo tres:</p><br /><br /><ol style="text-align: left;"><br /> <li>Introducimos la imagen en el blog</li><br /> <li>Con el ratón o el teclado seleccionamos la imagen y</li><br /> <li>Pulsamos sobre el icono de insertar enlace y pegamos la URL de destino</li><br /></ol><br /><br /><p>&nbsp;</p><br /><br /><h3>Inscrustar</h3><br /><br />Y aquí se ha embebido un vídeo en la propia página:<br /><br /><br /><div style="text-align: center;"><br /><iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/w_DKWlrA24k" width="560"></iframe><br /></div><br /><br /><br /><br />Y aquí se ha embebido un visor para mostrar en archivo PDF:<br /><br /><br /><br /><iframe height="600" src="https://drive.google.com/file/d/0B01U8fE2Z-bsd0gwMFI3djJfNjg/preview" width="640"></iframe><br /><br /><p>&nbsp;</p><br /><p>&nbsp;</p><br /><p>&nbsp;</p> </span><br /></p>Jesus Romo Uriartehttp://www.blogger.com/profile/11291884683676354319noreply@blogger.com0tag:blogger.com,1999:blog-9092602758783377912.post-37958521990885488722020-11-24T10:50:00.002-08:002022-07-08T00:04:24.267-07:009 | Una tabla más compleja<table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody>
<tr>
<td><div style="text-align: center;">
En este post revisar el código HTML para deducir cómo se establece la anchura de una columna, así como el centrado del contenido de una celda. Observar en la tercera fila cómo se puede unificar en una única celda el contenido de las tres celdas de esa fila. Observar en la cuarta fila cómo se puede unificar en una única celda el contenido de las dos celdas.</div>
</td></tr>
</tbody></table>
<br />
<table align="center" border="1" style="background-color: #f5b7b1; width: 400px;">
<tbody>
<tr>
<td style="text-align: center;" width="20%">celda (1,1)</td>
<td style="text-align: center;" width="50%">celda (1,2)</td>
<td style="text-align: center;" width="30%">celda (1,3)</td>
</tr>
<tr>
<td style="text-align: center;" width="20%">celda (2,1)</td>
<td style="text-align: center;" width="50%"><div style="text-align: left;">
<b>celda (2,2)</b></div>
</td>
<td style="text-align: center;" width="30%">celda (2,3)</td>
</tr>
<tr>
<td colspan="3" rowspan="1" style="text-align: center;"><b> <span style="color: white;">COLAPSAR 3 COLUMNAS</span></b></td>
</tr>
<tr>
<td colspan="2" rowspan="1" style="text-align: center;"><b> <span style="color: blue;">COLAPSAR 2 COLUMNAS</span></b></td>
<td><div style="text-align: center;">
celda final</div>
</td>
</tr>
<tr>
<td><div style="text-align: center;">
celda inical</div>
</td>
<td colspan="2" rowspan="1" style="text-align: center;"><b> <span style="color: blue;">COLAPSAR 2 COLUMNAS</span></b></td>
</tr>
</tbody>
</table>
<br />
<table align="center" border="1" style="background-color: #f5b7b1; width: 400px;"><tbody>
<tr>
<td colspan="1" rowspan="3" style="text-align: center;" width="25%"><b><span style="color: blue;">
celda (1,1)<br />
celda (2,1)<br />
celda (3,1)</span></b> </td>
<td style="text-align: center;" width="25%">celda (1,2)</td>
<td style="text-align: center;" width="25%">celda (1,3)</td>
<td style="text-align: center;" width="25%">celda (1,4)</td>
</tr>
<tr>
<td style="text-align: center;" width="25%">celda (2,2)</td>
<td style="text-align: center;" width="25%">celda (2,3)</td>
<td style="text-align: center;" width="25%">celda (2,4)</td>
</tr>
<tr>
<td style="text-align: center;" width="25%">celda (3,2)</td>
<td style="text-align: center;" width="25%">celda (3,3)</td>
<td style="text-align: center;" width="25%">celda (3,4)</td>
</tr>
</tbody></table>
<br />
<table border="1" style="background-color: #eeeeee;">
<tbody>
<tr style="background-color: #aaaaaa;">
<td style="width: 100px;">
<div style="margin-left: 20px;"><strong>Dirección</strong></div>
</td>
<td style="width: 200px;">
<div style="margin-left: 20px;"><strong>Temática</strong></div>
</td>
<td style="width: 300px;">
<div style="margin-left: 20px;"><strong>Apartados</strong></div>
</td>
</tr>
<tr>
<td>
<div style="margin-left: 20px;">
<p><a href="https://blogbasicoparapracticarhtml.blogspot.com/" target="_blank">Blog básico para practicar HTML</a></p></div>
</td>
<td>
<div style="margin-left: 20px;">Introducción práctica al lenguaje de marcas HTML</div>
</td>
<td>
<div style="margin-left: 20px;">
<ul>
<li><a href="https://blogbasicoparapracticarhtml.blogspot.com/2019/10/pagina-html.html" target="_blank">0. página HTML</a></li>
<li><a href="https://blogbasicoparapracticarhtml.blogspot.com/2018/01/primeras-etiquetas.html" target="_blank">1. primeras etiquetas</a></li>
<li><a href="https://blogbasicoparapracticarhtml.blogspot.com/2018/01/mas-etiquetas.html" target="_blank">2. más etiquetas</a></li>
<li><a href="https://blogbasicoparapracticarhtml.blogspot.com/2018/01/simbolos-especiales.html" target="_blank">3. símbolos especiales</a></li>
<li><a href="https://blogbasicoparapracticarhtml.blogspot.com/2018/01/enumeracion-de-listas.html" target="_blank">4. enumeración de listas</a></li>
<li>...</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
<br />
<p>Para ver más ejemplo de tablas se puede <a href="https://www.uv.es/jac/guia/tablaeje.htm" target="_blank"><b>visitar esta página</b></a> de la <a href="https://www.uv.es/jac/guia/indice.htm" target="_blank"><b>Guía para escribir documentos HTML</b></a>.</p>
<br />
Jesus Romo Uriartehttp://www.blogger.com/profile/11291884683676354319noreply@blogger.com0tag:blogger.com,1999:blog-9092602758783377912.post-47066987883802641562020-11-24T10:49:00.014-08:002021-05-28T10:57:54.355-07:009 | Una tabla más compleja [código HTML]<p><span style="font-family: courier;"><table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody></span></p><p><span style="font-family: courier;"><tr></span></p><p><span style="font-family: courier;"><td><div style="text-align: center;"></span></p><p><span style="font-family: courier;">En este post revisar el código HTML para deducir cómo se establece la anchura de una columna, así como el centrado del contenido de una celda. Observar en la tercera fila cómo se puede unificar en una única celda el contenido de las tres celdas de esa fila. Observar en la cuarta fila cómo se puede unificar en una única celda el contenido de las dos celdas.</div></span></p><p><span style="font-family: courier;"></td></tr></span></p><p><span style="font-family: courier;"></tbody></table></span></p><p><span style="font-family: courier;"><br /></span></p><p><span style="font-family: courier;"><table align="center" border="1" style="background-color: #f5b7b1; width: 400px;"></span></p><p><span style="font-family: courier;"><tbody></span></p><p><span style="font-family: courier;"><tr></span></p><p><span style="font-family: courier;"><td style="text-align: center;" width="20%">celda (1,1)</td></span></p><p><span style="font-family: courier;"><td style="text-align: center;" width="50%">celda (1,2)</td></span></p><p><span style="font-family: courier;"><td style="text-align: center;" width="30%">celda (1,3)</td></span></p><p><span style="font-family: courier;"></tr></span></p><p><span style="font-family: courier;"><tr></span></p><p><span style="font-family: courier;"><td style="text-align: center;" width="20%">celda (2,1)</td></span></p><p><span style="font-family: courier;"><td style="text-align: center;" width="50%"><div style="text-align: left;"></span></p><p><span style="font-family: courier;"><b>celda (2,2)</b></div></span></p><p><span style="font-family: courier;"></td></span></p><p><span style="font-family: courier;"><td style="text-align: center;" width="30%">celda (2,3)</td></span></p><p><span style="font-family: courier;"></tr></span></p><p><span style="font-family: courier;"><tr></span></p><p><span style="font-family: courier;"><td colspan="3" rowspan="1" style="text-align: center;"><b> <span style="color: white;">COLAPSAR 3 COLUMNAS</span></b></td></span></p><p><span style="font-family: courier;"></tr></span></p><p><span style="font-family: courier;"><tr></span></p><p><span style="font-family: courier;"><td colspan="2" rowspan="1" style="text-align: center;"><b> <span style="color: blue;">COLAPSAR 2 COLUMNAS</span></b></td></span></p><p><span style="font-family: courier;"><td><div style="text-align: center;"></span></p><p><span style="font-family: courier;">celda final</div></span></p><p><span style="font-family: courier;"></td></span></p><p><span style="font-family: courier;"></tr></span></p><p><span style="font-family: courier;"><tr></span></p><p><span style="font-family: courier;"><td><div style="text-align: center;"></span></p><p><span style="font-family: courier;">celda inical</div></span></p><p><span style="font-family: courier;"></td></span></p><p><span style="font-family: courier;"><td colspan="2" rowspan="1" style="text-align: center;"><b> <span style="color: blue;">COLAPSAR 2 COLUMNAS</span></b></td></span></p><p><span style="font-family: courier;"></tr></span></p><p><span style="font-family: courier;"></tbody></span></p><p><span style="font-family: courier;"></table></span></p><p><span style="font-family: courier;"><br /></span></p><p><span style="font-family: courier;"><br /></span></p><p><span style="font-family: courier;"><br /></span></p><p><span style="font-family: courier;"><table align="center" border="1" style="background-color: #f5b7b1; width: 400px;"><tbody></span></p><p><span style="font-family: courier;"><tr></span></p><p><span style="font-family: courier;"><td colspan="1" rowspan="3" style="text-align: center;" width="25%"><b><span style="color: blue;"></span></p><p><span style="font-family: courier;">celda (1,1)<br /></span></p><p><span style="font-family: courier;">celda (2,1)<br /></span></p><p><span style="font-family: courier;">celda (3,1)</span></b> </td></span></p><p><span style="font-family: courier;"><td style="text-align: center;" width="25%">celda (1,2)</td></span></p><p><span style="font-family: courier;"><td style="text-align: center;" width="25%">celda (1,3)</td></span></p><p><span style="font-family: courier;"><td style="text-align: center;" width="25%">celda (1,4)</td></span></p><p><span style="font-family: courier;"></tr></span></p><p><span style="font-family: courier;"><tr></span></p><p><span style="font-family: courier;"><td style="text-align: center;" width="25%">celda (2,2)</td></span></p><p><span style="font-family: courier;"><td style="text-align: center;" width="25%">celda (2,3)</td></span></p><p><span style="font-family: courier;"><td style="text-align: center;" width="25%">celda (2,4)</td></span></p><p><span style="font-family: courier;"></tr></span></p><p><span style="font-family: courier;"><tr></span></p><p><span style="font-family: courier;"><td style="text-align: center;" width="25%">celda (3,2)</td></span></p><p><span style="font-family: courier;"><td style="text-align: center;" width="25%">celda (3,3)</td></span></p><p><span style="font-family: courier;"><td style="text-align: center;" width="25%">celda (3,4)</td></span></p><p><span style="font-family: courier;"></tr></span></p><p><span style="font-family: courier;"></tbody></table></span></p><p><span style="font-family: courier;"><br /></span></p><p><span style="font-family: courier;"><br /></span></p><p><span style="font-family: courier;"><br /></span></p><p><span style="font-family: courier;"><table border="1" style="background-color: #eeeeee;"></span></p><p><span style="font-family: courier;"><tbody></span></p><p><span style="font-family: courier;"> <tr style="background-color: #aaaaaa;"></span></p><p><span style="font-family: courier;"> <td style="width: 100px;"></span></p><p><span style="font-family: courier;"> <div style="margin-left: 20px;"><strong>Dirección</strong></div></span></p><p><span style="font-family: courier;"> </td></span></p><p><span style="font-family: courier;"> <td style="width: 200px;"></span></p><p><span style="font-family: courier;"> <div style="margin-left: 20px;"><strong>Temática</strong></div></span></p><p><span style="font-family: courier;"> </td></span></p><p><span style="font-family: courier;"> <td style="width: 300px;"></span></p><p><span style="font-family: courier;"> <div style="margin-left: 20px;"><strong>Apartados</strong></div></span></p><p><span style="font-family: courier;"> </td></span></p><p><span style="font-family: courier;"> </tr></span></p><p><span style="font-family: courier;"><tr></span></p><p><span style="font-family: courier;"> <td></span></p><p><span style="font-family: courier;"> <div style="margin-left: 20px;"></span></p><p><span style="font-family: courier;"> <p><a href="https://blogbasicoparapracticarhtml.blogspot.com/" target="_blank">Blog básico para practicar HTML</a></p></div></span></p><p><span style="font-family: courier;"> </td></span></p><p><span style="font-family: courier;"> <td></span></p><p><span style="font-family: courier;"> <div style="margin-left: 20px;">Introducción práctica al lenguaje de marcas HTML</div></span></p><p><span style="font-family: courier;"> </td></span></p><p><span style="font-family: courier;"> <td></span></p><p><span style="font-family: courier;"> <div style="margin-left: 20px;"></span></p><p><span style="font-family: courier;"> <ul></span></p><p><span style="font-family: courier;"> <li><a href="https://blogbasicoparapracticarhtml.blogspot.com/2019/10/pagina-html.html" target="_blank">0. página HTML</a></li></span></p><p><span style="font-family: courier;"> <li><a href="https://blogbasicoparapracticarhtml.blogspot.com/2018/01/primeras-etiquetas.html" target="_blank">1. primeras etiquetas</a></li></span></p><p><span style="font-family: courier;"> <li><a href="https://blogbasicoparapracticarhtml.blogspot.com/2018/01/mas-etiquetas.html" target="_blank">2. más etiquetas</a></li></span></p><p><span style="font-family: courier;"> <li><a href="https://blogbasicoparapracticarhtml.blogspot.com/2018/01/simbolos-especiales.html" target="_blank">3. símbolos especiales</a></li></span></p><p><span style="font-family: courier;"> <li><a href="https://blogbasicoparapracticarhtml.blogspot.com/2018/01/enumeracion-de-listas.html" target="_blank">4. enumeración de listas</a></li></span></p><p><span style="font-family: courier;"> <li>...</li></span></p><p><span style="font-family: courier;"> </ul></span></p><p><span style="font-family: courier;"> </div></span></p><p><span style="font-family: courier;"></td></span></p><p><span style="font-family: courier;"></tr></span></p><p><span style="font-family: courier;"></tbody></span></p><p><span style="font-family: courier;"></table></span></p><p><span style="font-family: courier;"><br /></span></p><p><span style="font-family: courier;"><br /> </span></p>Jesus Romo Uriartehttp://www.blogger.com/profile/11291884683676354319noreply@blogger.com0tag:blogger.com,1999:blog-9092602758783377912.post-85979122829826571142020-11-24T10:48:00.032-08:002022-10-03T07:20:22.528-07:008 | Una tabla<table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody>
<tr>
<td><div style="text-align: center;">
En este post revisar el código HTML para deducir cómo se establece un fila y sus correspondientes celdas que constituyen las columnas de la tabla. Observar también el mandato bajo el cual la tabla queda centrada en la página, distinguiendo entre centrar la tabla respecto a la página o centrar el texto de una celda dentro de la propia celda. En la anteúltima de las tablas los detalles más señalados son dos: Por una parte los estilos de los bordes en las celdas, y por otro lado la posición de la tabla respecto al margen izquierdo de la página.</div>
</td>
</tr>
</tbody></table>
<br />
<br />
<table align="center" border="1" style="background-color: #f5b7b1; width: 400px;"><tbody>
<tr>
<td>celda (1,1)</td>
<td><div style="margin-left: 20px;">
<i>celda (1,2)</i> </div></td>
<td>celda (1,3)</td>
</tr>
<tr>
<td>celda (2,1)</td>
<td><div style="text-align: center;">
<b>celda (2,2)</b></div></td>
<td>celda (2,3)</td>
</tr>
</tbody></table>
<div style="margin: 30px;">
<table><tbody>
<tr>
<td><b>Table cell 1</b></td>
<td><b>Table cell 2</b></td>
</tr>
<tr>
<td style="border: 2px solid red;">Table cell 3</td>
<td style="border: 2px dashed red;">Table cell 4</td>
</tr>
<tr>
<td style="border: 1px double blue;">Table cell 5</td>
<td style="border: 3px solid green;">Table cell 6</td></tr>
</tbody></table></div>
<table align="center" border="0" style="background-color: #abebc6; width: 400px;"><tbody>
<tr>
<td style="border-left: thick solid; border-top: thick solid;">celda (1,1)</td>
<td style="border-right: thin solid; border-top: thin solid;"><div style="margin-left: 20px;">
<i>celda (1,2)</i> </div></td>
<td>celda (1,3)</td>
</tr>
<tr>
<td style="border-bottom: thin solid; border-right: thin solid;">celda (2,1)</td>
<td style="border-bottom: thin solid; border-right: thin solid;"><div style="text-align: center;"><b>celda (2,2)</b></div>
</td>
<td style="border-bottom-color: initial; border-bottom: thin solid; border-color: initial; border-left-color: currentcolor; border-left: thin solid; border-right-color: currentcolor; border-right: thin solid; border-style: solid; border-top: thin solid; border-width: thin;">celda (2,3)</td>
</tr>
<tr>
<td style="border-bottom-color: initial; border-color: initial; border-left-color: initial; border-right-color: currentcolor; border-right-style: solid; border-right: thin solid; border-top-style: solid; border-top: thin solid; border-width: thin;">celda (3,1)</td>
<td style="border-bottom-color: initial; border-bottom: thin dashed; border-color: initial; border-left-color: currentcolor; border-left: thin dashed; border-right-color: currentcolor; border-right: thin dashed; border-style: dashed; border-top: thin dashed; border-width: thin;">celda (3,2)</td>
<td style="border-bottom: thick solid; border-right: thick solid;">celda (3,3)</td>
</tr>
</tbody></table>
<br />
<p>Para ver más ejemplo de tablas se puede <a href="https://www.uv.es/jac/guia/tablaeje.htm" target="_blank"><b>visitar esta página</b></a> de la <a href="https://www.uv.es/jac/guia/indice.htm" target="_blank"><b>Guía para escribir documentos HTML</b></a>.</p>
<br />Jesus Romo Uriartehttp://www.blogger.com/profile/11291884683676354319noreply@blogger.com0tag:blogger.com,1999:blog-9092602758783377912.post-62713497062197840452020-11-24T10:46:00.028-08:002022-10-03T07:20:50.749-07:008 | Una tabla [código HTML]<p><span style="font-family: courier new, courier, monospace;"><table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody><br /><tr><br /> <td><div style="text-align: center;"><br />En este post revisar el código HTML para deducir cómo se establece un fila y sus correspondientes celdas que constituyen las columnas de la tabla. Observar también el mandato bajo el cual la tabla queda centrada en la página, distinguiendo entre centrar la tabla respecto a la página o centrar el texto de una celda dentro de la propia celda. En la anteúltima de las tablas los detalles más señalados son dos: Por una parte los estilos de los bordes en las celdas, y por otro lado la posición de la tabla respecto al margen izquierdo de la página.</div><br /> </td><br /></tr><br /></tbody></table><br /><br /><br /><br /><br /><br /><br /><table align="center" border="1" style="background-color: #f5b7b1; width: 400px;"><tbody><br /><tr><br /> <td>celda (1,1)</td><br /> <td><div style="margin-left: 20px;"><br /> <i>celda (1,2)</i> </div></td><br /> <td>celda (1,3)</td><br /></tr><br /><tr><br /> <td>celda (2,1)</td><br /> <td><div style="text-align: center;"><br /> <b>celda (2,2)</b></div></td><br /> <td>celda (2,3)</td><br /></tr><br /></tbody></table><br /><br /><div style="margin: 30px;"><br /><table><tbody><br /><tr><br /> <td><b>Table cell 1</b></td><br /> <td><b>Table cell 2</b></td><br /></tr><br /><tr><br /> <td style="border: 2px solid red;">Table cell 3</td><br /> <td style="border: 2px dashed red;">Table cell 4</td><br /></tr><br /><tr><br /> <td style="border: 1px double blue;">Table cell 5</td><br /> <td style="border: 3px solid green;">Table cell 6</td></tr><br /></tbody></table></div><br /><br /><table align="center" border="0" style="background-color: #abebc6; width: 400px;"><tbody><br /><tr><br /> <td style="border-left: thick solid; border-top: thick solid;">celda (1,1)</td><br /> <td style="border-right: thin solid; border-top: thin solid;"><div style="margin-left: 20px;"><br /> <i>celda (1,2)</i> </div></td><br /> <td>celda (1,3)</td><br /></tr><br /><tr><br /> <td style="border-bottom: thin solid; border-right: thin solid;">celda (2,1)</td><br /> <td style="border-bottom: thin solid; border-right: thin solid;"><div style="text-align: center;"><b>celda (2,2)</b></div><br /> </td><br /> <td style="border-bottom-color: initial; border-bottom: thin solid; border-color: initial; border-left-color: currentcolor; border-left: thin solid; border-right-color: currentcolor; border-right: thin solid; border-style: solid; border-top: thin solid; border-width: thin;">celda (2,3)</td><br /></tr><br /><tr><br /> <td style="border-bottom-color: initial; border-color: initial; border-left-color: initial; border-right-color: currentcolor; border-right-style: solid; border-right: thin solid; border-top-style: solid; border-top: thin solid; border-width: thin;">celda (3,1)</td><br /> <td style="border-bottom-color: initial; border-bottom: thin dashed; border-color: initial; border-left-color: currentcolor; border-left: thin dashed; border-right-color: currentcolor; border-right: thin dashed; border-style: dashed; border-top: thin dashed; border-width: thin;">celda (3,2)</td><br /> <td style="border-bottom: thick solid; border-right: thick solid;">celda (3,3)</td><br /></tr><br /></tbody></table><br /><br /><br /><br /><br /><p>Para ver más ejemplo de tablas se puede <a href="https://www.uv.es/jac/guia/tablaeje.htm" target="_blank"><b>visitar esta página</b></a> de la <a href="https://www.uv.es/jac/guia/indice.htm" target="_blank"><b>Guía para escribir documentos HTML</b></a>.</p><br /><br /><br /></span></p><p><span style="font-family: courier new, courier, monospace;"> </span></p>Jesus Romo Uriartehttp://www.blogger.com/profile/11291884683676354319noreply@blogger.com0tag:blogger.com,1999:blog-9092602758783377912.post-4168631690301460922020-11-24T10:45:00.009-08:002022-10-03T07:06:21.088-07:007 | Etiqueta div (y etiqueta span)<table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody>
<tr>
<td><div style="text-align: center;">
En este post se presenta la etiqueta o marca <div> que aparecerá en la mayoría de las entradas de un blog. También se menciona la etiqueta o marca <span> cuyo uso es muy frecuente.</div>
</td></tr>
</tbody></table>
<br />
La etiqueta <b><div></b> se emplea para definir un bloque de contenido o sección de la página, para poder aplicarle diferentes estilos e incluso para realizar operaciones sobre ese bloque específico.
<br />
<p>Frecuentemente nos encontraremos la marca <b><div></b> al alinear un texto, el atributo es <b>align</b> y su cuatro posibles valores son:</p>
<ol style="text-align: left;">
<li><i>left</i>: el texto se alinea a la margen izquierda</li>
<li><i>center</i>: el texto es centrado</li>
<li><i>right</i>: el texto se alinea a la margen derecha</li>
<li><i>justify</i>: el texto es justificado o se alinea a ambas márgenes</li>
</ol>
<p>Por ejemplo: <span style="font-family: courier;"><div align="center">Todo el párrafo de esta frase estará centrado</div></span></p>
<div align="center"><span style="font-size: medium;">Todo el párrafo de esta frase estará centrado</span></div>
<br />Como se ha visto, el uso de la etiqueta <b>div</b> es sencillo, se marca <div> para señalar el comienzo del bloque y se marca </div> para señalar el fin del bloque. Observemos este otro ejemplo:
<br />
<blockquote>
<div><br />
<h1>Índice</h1><br />
Página principal<br /><br />
Material multimedia<br /><br />
Autores<br /><br />
</div>
</blockquote>
Hemos empleado la etiqueta para crear un bloque, que hará las
veces de índice de contenidos. Visualmente la etiqueta no provoca
ningún cambio, pero en la estructura interna del documento hemos
aplicado una división muy importante. Este es el resultado del código anterior:<br />
<blockquote>
<div>
<h1>
Índice</h1>
Página principal<br />
Material multimedia<br />
Autores</div>
</blockquote>
Tal y como se ve, al aplicar la etiqueta <b>div</b> no hay ninguna diferencia visible. Pero internamente el documento ya cuenta con un bloque específico al que se le podría dar un formato determinado. Por ejemplo, mediante el siguiente código encuadraremos el bloque y le daremos un color de fondo:<br />
<blockquote>
<div style="border: 2px solid rgb(204, 102, 204);"><br />
<h1>Índice</h1><br />
Página principal<br /><br />
Material multimedia<br /><br />
Autores<br /><br />
</div></blockquote>
El resultado sería:<br />
<blockquote>
<div style="background-color: lightgrey; border: 2px solid rgb(204, 102, 204);">
<h1>
Índice</h1>
Página principal<br />
Material multimedia<br />
Autores</div>
</blockquote>
<br />
Es decir, la etiqueta <b><div></b> configura espacios dentro de la página.<br />
<br />
Dado que mediante la etiqueta <b><div></b> también se puede establecer el tipo de letra (y otras características de formato) del bloque, se puede confundir con la etiqueta <b><span></b> que se presenta en <a href="https://blogbasicoparapracticarhtml.blogspot.com.es/2018/01/etiqueta-span-y-etiqueta-div.html" target="_blank">Etiqueta span (y etiqueta div)</a>.<br />
<br />Jesus Romo Uriartehttp://www.blogger.com/profile/11291884683676354319noreply@blogger.com0tag:blogger.com,1999:blog-9092602758783377912.post-2586410805007110922020-11-24T10:44:00.008-08:002023-10-02T07:26:32.322-07:007 | Etiqueta div (y etiqueta span) [código HTML]<p><span style="font-family: courier;"><table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody></span></p><p><span style="font-family: courier;"><tr></span></p><p><span style="font-family: courier;"><td><div style="text-align: center;"></span></p><p><span style="font-family: courier;">En este post se presenta la etiqueta o marca &lt;div&gt; que aparecerá en la mayoría de las entradas de un blog. También se menciona la etiqueta o marca &lt;span&gt; cuyo uso es muy frecuente.</div></span></p><p><span style="font-family: courier;"></td></tr></span></p><p><span style="font-family: courier;"></tbody></table></span></p><p><span style="font-family: courier;"><br /></span></p><p><span style="font-family: courier;">La etiqueta <b>&lt;div&gt;</b> se emplea para definir un bloque de contenido o sección de la página, para poder aplicarle diferentes estilos e incluso para realizar operaciones sobre ese bloque específico.</span></p><p><span style="font-family: courier;"><br /></span></p><p><span style="font-family: courier;"><br /></span></p><p><span style="font-family: courier;"><p>Frecuentemente nos encontraremos la marca <b>&lt;div&gt;</b> al alinear un texto, el atributo es <b>align</b> y su cuatro posibles valores son:</p></span></p><p><span style="font-family: courier;"><ol style="text-align: left;"></span></p><p><span style="font-family: courier;"> <li><i>left</i>: el texto se alinea a la margen izquierda</li></span></p><p><span style="font-family: courier;"> <li><i>center</i>: el texto es centrado</li></span></p><p><span style="font-family: courier;"> <li><i>right</i>: el texto se alinea a la margen derecha</li></span></p><p><span style="font-family: courier;"> <li><i>justify</i>: el texto es justificado o se alinea a ambas márgenes</li></span></p><p><span style="font-family: courier;"></ol></span></p><p><span style="font-family: courier;"><br /></span></p><p><span style="font-family: courier;"><p>Por ejemplo:&nbsp;<span style="font-family: courier;">&lt;div align="center"&gt;Todo el párrafo de esta frase estará centrado&lt;/div&gt;</span></p></span></p><p><span style="font-family: courier;"><br /></span></p><p><span style="font-family: courier;"><div align="center"><span style="font-size: medium;">Todo el párrafo de esta frase estará centrado</span></div></span></p><p><span style="font-family: courier;"><br /></span></p><p><span style="font-family: courier;"><br />Como se ha visto, el uso de la etiqueta <b>div</b> es sencillo, se marca &lt;div&gt; para señalar el comienzo del bloque y se marca &lt;/div&gt; para señalar el fin del bloque. Observemos este otro ejemplo:</span></p><p><span style="font-family: courier;"><br /></span></p><p><span style="font-family: courier;"><blockquote></span></p><p><span style="font-family: courier;">&lt;div&gt;<br /></span></p><p><span style="font-family: courier;">&lt;h1&gt;Índice&lt;/h1&gt;<br /></span></p><p><span style="font-family: courier;">Página principal&lt;br /&gt;<br /></span></p><p><span style="font-family: courier;">Material multimedia&lt;br /&gt;<br /></span></p><p><span style="font-family: courier;">Autores&lt;br /&gt;<br /></span></p><p><span style="font-family: courier;">&lt;/div&gt;</span></p><p><span style="font-family: courier;"></blockquote></span></p><p><span style="font-family: courier;">Hemos empleado la etiqueta para crear un bloque, que hará las</span></p><p><span style="font-family: courier;">veces de índice de contenidos. Visualmente la etiqueta no provoca</span></p><p><span style="font-family: courier;">ningún cambio, pero en la estructura interna del documento hemos</span></p><p><span style="font-family: courier;">aplicado una división muy importante. Este es el resultado del código anterior:<br /></span></p><p><span style="font-family: courier;"><blockquote></span></p><p><span style="font-family: courier;"><div></span></p><p><span style="font-family: courier;"><h1></span></p><p><span style="font-family: courier;">Índice</h1></span></p><p><span style="font-family: courier;">Página principal<br /></span></p><p><span style="font-family: courier;">Material multimedia<br /></span></p><p><span style="font-family: courier;">Autores</div></span></p><p><span style="font-family: courier;"></blockquote></span></p><p><span style="font-family: courier;">Tal y como se ve, al aplicar la etiqueta <b>div</b> no hay ninguna diferencia visible. Pero internamente el documento ya cuenta con un bloque específico al que se le podría dar un formato determinado. Por ejemplo, mediante el siguiente código encuadraremos el bloque y le daremos un color de fondo:<br /></span></p><p><span style="font-family: courier;"><blockquote></span></p><p><span style="font-family: courier;">&lt;div style="border: 2px solid rgb(204, 102, 204);"&gt;<br /></span></p><p><span style="font-family: courier;">&lt;h1&gt;Índice&lt;/h1&gt;<br /></span></p><p><span style="font-family: courier;">Página principal&lt;br /&gt;<br /></span></p><p><span style="font-family: courier;">Material multimedia&lt;br /&gt;<br /></span></p><p><span style="font-family: courier;">Autores&lt;br /&gt;<br /></span></p><p><span style="font-family: courier;">&lt;/div&gt;</blockquote></span></p><p><span style="font-family: courier;">El resultado sería:<br /></span></p><p><span style="font-family: courier;"><blockquote></span></p><p><span style="font-family: courier;"><div style="background-color: lightgrey; border: 2px solid rgb(204, 102, 204);"></span></p><p><span style="font-family: courier;"><h1></span></p><p><span style="font-family: courier;">Índice</h1></span></p><p><span style="font-family: courier;">Página principal<br /></span></p><p><span style="font-family: courier;">Material multimedia<br /></span></p><p><span style="font-family: courier;">Autores</div></span></p><p><span style="font-family: courier;"></blockquote></span></p><p><span style="font-family: courier;"><br /></span></p><p><span style="font-family: courier;">Es decir, la etiqueta <b>&lt;div&gt;</b> configura espacios dentro de la página.<br /></span></p><p><span style="font-family: courier;"><br /></span></p><p><span style="font-family: courier;">Dado que mediante la etiqueta <b>&lt;div&gt;</b> también se puede establecer el tipo de letra (y otras características de formato) del bloque, se puede confundir con la etiqueta <b>&lt;span&gt;</b> que se presenta en <a href="https://blogbasicoparapracticarhtml.blogspot.com.es/2018/01/etiqueta-span-y-etiqueta-div.html" target="_blank">Etiqueta span (y etiqueta div)</a>.<br /></span></p><p><span style="font-family: courier;"><br /></span></p>Jesus Romo Uriartehttp://www.blogger.com/profile/11291884683676354319noreply@blogger.com0tag:blogger.com,1999:blog-9092602758783377912.post-62702968855535802762020-11-24T10:44:00.007-08:002023-10-02T07:25:51.889-07:006 | Etiqueta span (y etiqueta div)<table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody>
<tr>
<td><div style="text-align: center;">
En este post se presenta la etiqueta o marca <span> que aparecerá en la mayoría de las entradas de un blog. También se menciona la etiqueta o marca <div> cuyo uso también es muy frecuente. </div>
</td></tr>
</tbody></table>
<br />
La etiqueta <b><div></b> se emplea para definir un bloque de contenido o
sección de la página, a la vez da que se establece el bloque mediante la marca <b><div></b> se puede dar un formato al contenido del bloque.<br />
<br />
Con la etiqueta <b><span></b> sirve para dar cierto formato
concreto al contenido de un párrafo. Por ejemplo, el siguiente código
modifica el color de las letras del párrafo:<br />
<blockquote>
Color de letra normal<br /><br />
<span style="color: red;">Color de letra rojo</span><br /><br />
<span style="color: blue;">Color de letra azul</span><br /></blockquote>
Esos tres párrafos se verían así:<br />
<blockquote>
Color de letra normal<br />
<span style="color: red;">Color de letra rojo</span><br />
<span style="color: blue;">Color de letra azul</span></blockquote>
Si con la marca <b><div></b> podemos hacer que todo el texto sea de color rojo, la etiqueta <b><span></b> se emplearía para aplicar estilos distintos a algunos párrafos en el interior de un bloque (por ejemplo, un párrafo de color azul). Véase el siguiente código:<br />
<blockquote>
<div style="color: red;"><br />
Índice<br /><br />
Página principal<br /><br />
<span style="color: blue;">Material multimedia</span><br /><br />
Autores<br />
</div>
</blockquote>
El resultado sería:
<br />
<blockquote>
<div style="color: red;">
Índice<br />
Página principal<br />
<span style="color: blue;">Material multimedia</span><br />
Autores</div>
</blockquote>
La etiqueta <b><span></b> opera a nivel de párrafo modificando el estilo del texto, mediante la etiqueta <b><div></b> también se puede establecer el estilo del texto pero para todo un bloque (visitar <a href="https://blogbasicoparapracticarhtml.blogspot.com.es/2018/01/etiqueta-div-y-etiqueta-span.html" target="_blank">Etiqueta div (y etiqueta span)</a> para saber más sobre la etiqueta <b><div></b>).Jesus Romo Uriartehttp://www.blogger.com/profile/11291884683676354319noreply@blogger.com0tag:blogger.com,1999:blog-9092602758783377912.post-21524041302771450772020-11-24T10:44:00.006-08:002022-10-03T07:05:16.100-07:006 | Etiqueta span (y etiqueta div) [código HTML]<span style="font-family: "courier new" , "courier" , monospace;"><table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody><br /><tr><br /><td><div style="text-align: center;"><br />En este post se presenta la etiqueta o marca &lt;span&gt; que aparecerá en la mayoría de las entradas de un blog. También se menciona la etiqueta o marca &lt;div&gt; cuyo uso también es muy frecuente. </div><br /></td></tr><br /></tbody></table><br /><br /><br />La etiqueta <b>&lt;div&gt;</b> se emplea para definir un bloque de contenido o<br />sección de la página, a la vez da que se establece el bloque mediante la marca <b>&lt;div&gt;</b> se puede dar un formato al contenido del bloque.<br /><br /><br /><br />Con la etiqueta <b>&lt;span&gt;</b> sirve para dar cierto formato <br />concreto al contenido de un párrafo. Por ejemplo, el siguiente código <br />modifica el color de las letras del párrafo:<br /><br /><blockquote><br />Color de letra normal&lt;br /&gt;<br /><br />&lt;span style="color: red;"&gt;Color de letra rojo&lt;/span&gt;&lt;br /&gt;<br /><br />&lt;span style="color: blue;"&gt;Color de letra azul&lt;/span&gt;&lt;br /&gt;</blockquote><br />Esos tres párrafos se verían así:<br /><br /><blockquote><br />Color de letra normal<br /><br /><span style="color: red;">Color de letra rojo</span><br /><br /><span style="color: blue;">Color de letra azul</span></blockquote><br />Si con la marca <b>&lt;div&gt;</b> podemos hacer que todo el texto sea de color rojo, la etiqueta <b>&lt;span&gt;</b> se emplearía para aplicar estilos distintos a algunos párrafos en el interior de un bloque (por ejemplo, un párrafo de color azul). Véase el siguiente código:<br /><br /><blockquote><br />&lt;div style="color: red;"&gt;<br /><br />Índice&lt;br /&gt;<br /><br />Página principal&lt;br /&gt;<br /><br />&lt;span style="color: blue;"&gt;Material multimedia&lt;/span&gt;&lt;br /&gt;<br /><br />&lt;/div&gt;<br /></blockquote><br />El resultado sería:<br /><br /><br /><blockquote><br /><div style="color: red;"><br />Índice<br /><br />Página principal<br /><br /><span style="color: blue;">Material multimedia</span><br /><br />Autores</div><br /></blockquote><br />La etiqueta <b>&lt;span&gt;</b> opera a nivel de párrafo modificando el estilo del texto, mediante la etiqueta <b>&lt;div&gt;</b> también se puede establecer el estilo del texto pero para todo un bloque (visitar <a href="https://blogbasicoparapracticarhtml.blogspot.com.es/2018/01/etiqueta-div-y-etiqueta-span.html" target="_blank">Etiqueta div (y etiqueta span)</a> para saber más sobre la etiqueta <b>&lt;div&gt;</b>).</span>Jesus Romo Uriartehttp://www.blogger.com/profile/11291884683676354319noreply@blogger.com0tag:blogger.com,1999:blog-9092602758783377912.post-55480089399189398732020-11-24T10:44:00.005-08:002022-10-03T07:01:36.905-07:005 | Enumeración de listas subordinadas<table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody>
<tr>
<td><div style="text-align: center;">
En este post revisar el código HTML para deducir cómo se realiza un sublistado de elementos dentro de un listado de orden superior. Es posible combinar viñetas y números. </div></td>
</tr>
</tbody></table>
<br />
Lista principal con viñetas y listas secundarias numeradas:<br />
<ul>
<li>Chicos:</li>
<ol>
<li>Luis </li>
<li style="margin-left: 30px;">Joanes </li>
<li>Eneko</li>
</ol>
<li>Chicas:</li>
<ol>
<li>Marina </li>
<li style="margin-left: 30px;">Eguzkiñe </li>
<li>Ane </li>
</ol>
</ul>
<br />
Lista principal y secundarias con viñetas:<br />
<ul>
<li>Chicos:</li>
<ul>
<li>Luis </li>
<li style="margin-left: 30px;">Joanes </li>
<li>Eneko</li>
</ul>
<li>Chicas:</li>
<ul>
<li>Marina </li>
<li style="margin-left: 30px;">Eguzkiñe </li>
<li>Ane </li>
</ul>
</ul>
<br />Jesus Romo Uriartehttp://www.blogger.com/profile/11291884683676354319noreply@blogger.com0tag:blogger.com,1999:blog-9092602758783377912.post-793056409432909542020-11-24T10:43:00.003-08:002022-10-03T07:00:46.856-07:005 | Enumeración de listas subordinadas [código HTML]<span style="font-family: "courier new" , "courier" , monospace;"><table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody><br /><tr><br /><td><div style="text-align: center;"><br />En este post revisar el código HTML para deducir cómo se realiza un sublistado de elementos dentro de un listado de orden superior. Es posible combinar viñetas y números. </div></span><span style="font-family: "courier new" , "courier" , monospace;"></td></span><br /><span style="font-family: "courier new" , "courier" , monospace;"></tr><br /></tbody></table><br /><br /><br /><br />Lista principal con viñetas y listas secundarias numeradas:<br /><br /><ul><br /> <li>Chicos:</li><br /> <ol><br /> <li>Luis </li><br /> <li style="margin-left: 30px;">Joanes </li><br /> <li>Eneko</li><br /> </ol><br /> <li>Chicas:</li><br /> <ol><br /> <li>Marina </li><br /> <li style="margin-left: 30px;">Eguzkiñe </li><br /> <li>Ane </li><br /> </ol><br /></ul><br /><br /><br /><br />Lista principal y secundarias con viñetas:<br /><br /><ul><br /> <li>Chicos:</li><br /> <ul><br /> <li>Luis </li><br /> <li style="margin-left: 30px;">Joanes </li><br /> <li>Eneko</li><br /> </ul><br /> <li>Chicas:</li><br /> <ul><br /> <li>Marina </li><br /> <li style="margin-left: 30px;">Eguzkiñe </li><br /> <li>Ane </li><br /> </ul><br /></ul><br /><br /></span>Jesus Romo Uriartehttp://www.blogger.com/profile/11291884683676354319noreply@blogger.com0tag:blogger.com,1999:blog-9092602758783377912.post-34553627160705640182020-11-24T10:42:00.009-08:002022-10-03T06:57:40.436-07:004 | Enumeración de listas [código HTML]<table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody><br /><tr><br /><td><div style="text-align: center;"><br />Revisar el código HTML de este post para deducir cómo se construyen los listados. Distinguir entre las enumeraciones en base a listas con viñetas y las listas numeradas. </div><br /></td></tr><br /></tbody></table><br /><br /><br /><br />Lista con viñetas:<br /><br /><br /><br /><ul><br /> <li>Luis </li><br /> <li style="margin-left: 30px;">Ane </li><br /> <li>Marina </li><br /> <li>Eneko </li><br /></ul><br /><br /><br /><br />Lista numerada:<br /><br /><br /><ol><br /> <li>Luis </li><br /> <li>Ane </li><br /> <li>Marina </li><br /> <li>Eneko </li><br /></ol><br /><br />Jesus Romo Uriartehttp://www.blogger.com/profile/11291884683676354319noreply@blogger.com0tag:blogger.com,1999:blog-9092602758783377912.post-58803063331442713272020-11-24T10:42:00.008-08:002022-10-03T06:57:26.960-07:004 | Enumeración de listas<table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody>
<tr>
<td><div style="text-align: center;">
Revisar el código HTML de este post para deducir cómo se construyen los listados. Distinguir entre las enumeraciones en base a listas con viñetas y las listas numeradas. </div>
</td></tr>
</tbody></table>
<br />
Lista con viñetas:
<br />
<ul>
<li>Luis </li>
<li style="margin-left: 30px;">Ane </li>
<li>Marina </li>
<li>Eneko </li>
</ul>
<br />
Lista numerada:
<br />
<ol>
<li>Luis </li>
<li>Ane </li>
<li>Marina </li>
<li>Eneko </li>
</ol>
Jesus Romo Uriartehttp://www.blogger.com/profile/11291884683676354319noreply@blogger.com0tag:blogger.com,1999:blog-9092602758783377912.post-2348542898312447832020-11-24T10:41:00.003-08:002020-11-24T12:00:30.935-08:003 | Símbolos especiales<table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody>
<tr>
<td><div style="text-align: center;">
Es bien sabido que, a veces, algunos símbolos no los encontramos en el teclado. Aquí se presentan algunos símbolos soportados por el lenguaje HTML, basta con insertar el correspondiente número del símbolo deseado en la vista de código de nuestra página. </div>
</td></tr>
</tbody></table>
<br />
Símbolos especiales:
<br />
<ul>
<li><a href="https://www.w3schools.com/charsets/ref_utf_math.asp" target="_blank">Matemáticos</a></li>
<li><a href="https://www.w3schools.com/charsets/ref_utf_currency.asp" target="_blank">Monedas</a></li>
<li><a href="https://www.w3schools.com/charsets/ref_utf_letterlike.asp" target="_blank">Algunas letras</a> </li>
<li><a href="https://www.w3schools.com/charsets/ref_utf_arrows.asp" target="_blank">Flechas</a></li>
<li><a href="https://www.w3schools.com/charsets/ref_utf_geometric.asp" target="_blank">Formas geométricas 1</a> </li>
<li><a href="https://www.w3schools.com/charsets/ref_utf_block.asp" target="_blank">Formas geométricas 2</a> </li>
<li><a href="https://www.w3schools.com/charsets/ref_utf_punctuation.asp" target="_blank">Puntuación</a></li>
<li><a href="https://www.w3schools.com/charsets/ref_utf_symbols.asp" target="_blank">Varios 1</a> </li>
<li><a href="https://www.w3schools.com/charsets/ref_utf_dingbats.asp" target="_blank">Varios 2</a> </li>
</ul>
<br />
Ejemplo, para mostrar el sumatorio...<br />
<blockquote>
...podemos escribir:<pre> SUMATORIO &#8721;
</pre>
<br />
y ese texto se verá así:<pre> SUMATORIO ∑
</pre>
</blockquote>
<br />Jesus Romo Uriartehttp://www.blogger.com/profile/11291884683676354319noreply@blogger.com0tag:blogger.com,1999:blog-9092602758783377912.post-34731340741858368862020-11-24T10:41:00.002-08:002020-11-24T12:00:18.905-08:003 | Símbolos especiales [código HTML]<span style="font-family: "Courier New", Courier, monospace;"><table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody></span><br />
<span style="font-family: "Courier New", Courier, monospace;"><tr></span><br />
<span style="font-family: "Courier New", Courier, monospace;"><td><div style="text-align: center;"></span><br />
<span style="font-family: "Courier New", Courier, monospace;">Es bien sabido que, a veces, algunos símbolos no los encontramos en el teclado. Aquí se presentan algunos símbolos soportados por el lenguaje HTML, basta con insertar el correspondiente número del símbolo deseado en la vista de código de nuestra página. </div></span><br />
<span style="font-family: "Courier New", Courier, monospace;"></td></tr></span><br />
<span style="font-family: "Courier New", Courier, monospace;"></tbody></table></span><br />
<span style="font-family: "Courier New", Courier, monospace;"><br /></span><br />
<span style="font-family: "Courier New", Courier, monospace;">Símbolos especiales:</span><br />
<span style="font-family: "Courier New", Courier, monospace;"><br /></span><br />
<span style="font-family: "Courier New", Courier, monospace;"><ul></span><br />
<span style="font-family: "Courier New", Courier, monospace;"><li><a href="https://www.w3schools.com/charsets/ref_utf_math.asp" target="_blank">Matemáticos</a></li></span><br />
<span style="font-family: "Courier New", Courier, monospace;"><li><a href="https://www.w3schools.com/charsets/ref_utf_currency.asp" target="_blank">Monedas</a></li></span><br />
<span style="font-family: "Courier New", Courier, monospace;"><li><a href="https://www.w3schools.com/charsets/ref_utf_letterlike.asp" target="_blank">Algunas letras</a>&nbsp;</li></span><br />
<span style="font-family: "Courier New", Courier, monospace;"><li><a href="https://www.w3schools.com/charsets/ref_utf_arrows.asp" target="_blank">Flechas</a></li></span><br />
<span style="font-family: "Courier New", Courier, monospace;"><li><a href="https://www.w3schools.com/charsets/ref_utf_geometric.asp" target="_blank">Formas geométricas 1</a>&nbsp;</li></span><br />
<span style="font-family: "Courier New", Courier, monospace;"><li><a href="https://www.w3schools.com/charsets/ref_utf_block.asp" target="_blank">Formas geométricas 2</a>&nbsp; </li></span><br />
<span style="font-family: "Courier New", Courier, monospace;"><li><a href="https://www.w3schools.com/charsets/ref_utf_punctuation.asp" target="_blank">Puntuación</a></li></span><br />
<span style="font-family: "Courier New", Courier, monospace;"><li><a href="https://www.w3schools.com/charsets/ref_utf_symbols.asp" target="_blank">Varios 1</a>&nbsp;</li></span><br />
<span style="font-family: "Courier New", Courier, monospace;"><li><a href="https://www.w3schools.com/charsets/ref_utf_dingbats.asp" target="_blank">Varios 2</a>&nbsp;&nbsp;</li></span><br />
<span style="font-family: "Courier New", Courier, monospace;"></ul></span><br />
<span style="font-family: "Courier New", Courier, monospace;"><br /></span><br />
<span style="font-family: "Courier New", Courier, monospace;">Ejemplo, para mostrar el sumatorio...<br /></span><br />
<span style="font-family: "Courier New", Courier, monospace;"><blockquote></span><br />
<span style="font-family: "Courier New", Courier, monospace;">...podemos escribir:<pre> SUMATORIO &amp;#8721;</span><br />
<span style="font-family: "Courier New", Courier, monospace;"></pre></span><br />
<span style="font-family: "Courier New", Courier, monospace;"><br /></span><br />
<span style="font-family: "Courier New", Courier, monospace;">y ese texto se verá así:<pre> SUMATORIO ∑</span><br />
<span style="font-family: "Courier New", Courier, monospace;"></pre></span><br />
<span style="font-family: "Courier New", Courier, monospace;"></blockquote></span><br />
<span style="font-family: "Courier New", Courier, monospace;"><br /></span>Jesus Romo Uriartehttp://www.blogger.com/profile/11291884683676354319noreply@blogger.com0tag:blogger.com,1999:blog-9092602758783377912.post-40554118907476064132020-11-24T10:40:00.005-08:002022-10-03T06:50:29.924-07:002 | Más etiquetas <table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody>
<tr>
<td><div style="text-align: center;">
En general, cada marca debe ser cerrada por su correspondiente marca
simétrica. A continuación mencionaremos algunas etiquetas muy utilizadas y al final se mostrará la forma de incluir comentarios en la programación HTML, y se finalizará esta entrada presentando el símbolo especial que más frecuentemente necesitaremos. </div>
</td></tr>
</tbody></table>
<br />
<br />
<hr />
<span class="codigo"><H1></span>, <span class="codigo"><H2></span> <span class="codigo">hasta <H6></span> <b>Encabezados</b><br />
<br />
Sirven para escribir los titulares del texto y se pueden definir seis niveles de titulares. Por ejemplo, el siguiente código:<br />
<pre> <h1>Texto muy grande</h1>
<h2>Texto grande</h2>
<h3>Texto algo más grande de lo normal</h3>
<h4>Texto normal</h4>
<h5>Texto pequeño</h5>
<h6>Texto muy pequeño</h6></pre>
<br />
Producirá la siguiente salida:<br />
<blockquote>
<h1>
Texto muy grande</h1>
<h2>
Texto grande</h2>
<h3>
Texto algo más grande de lo normal</h3>
<h4>
Texto normal</h4>
<h5>
Texto pequeño</h5>
<h6>
Texto muy pequeño</h6>
</blockquote>
<br />
<br />
<hr />
<span class="codigo"><p></span> <b>Párrafos</b><br />
<br />
En principio, sin entrar en detalles de alineación u otras características, digamos que los párrafos se definen por las tags <span class="codigo"><P> y </span><span class="codigo"></P></span>. No obstante, hay veces que que no se marcan los párrafos mediante este par de etiquetas, porque se escribe el párrafo y al final se le añade la directiva de <i>salto de línea </i>que se menciona a continuación.
<br />
<br />
<br />
<br />
<hr />
<span class="codigo"><br /></span> <b>Salto de línea</b><br />
<br />
Esta marca no tiene contramarca y se utiliza ella sola escribiéndola al final de un párrafo. Sirve para realizar un salto de linea, pueden ponerse tantas como se desee y realizará un salto de línea por cada una de ellas.
<br />
<br />
<br />
<br />
<hr />
<span class="codigo"><hr/></span> <b>Línea horizontal</b><br />
<br />
Esta
marca no tiene contramarca y se utiliza ella sola. Sirve para mostrar una línea horizontal. Se recomienda un uso moderado de este recurso. Formato de la línea horizontal:<br />
<ul>
<li>Si quisiéramos dar color y grosor a la línea horizontal lo haríamos así:<pre> <hr style="background-color: #0056b2; height:5px;" /></pre>
</li>
<li>Si quisiéramos variar lo que ocupa de ancho la línea horizontal usaríamos: “width=x %”, siendo “x” el tanto por cien que ocupa la línea:<pre> <hr <code class="plain plain">width="75%" /</code>></pre>
</li>
<li>Para que la línea horizontal tuviera un color sólido de relleno lo haríamos así:<pre> <hr s<code class="plain plain">noshade="noshade" /</code>></pre>
</li>
<li>Para alinear la línea a la izquierda, derecha o centro utilizamos
“align”, con lo valores: “align = center” para el centro, “align = right” para la
derecha y “align = left” para la izquierda. En el siguiente ejemplo se aplican varias de las directivas de formato:<pre> <code class="plain plain"></code><hr style="background-color:#9900aa; height:15px;" align="left" width="50%" /></pre>
</li>
</ul>
Ejemplos:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyJrSqmTFXpiSsBCv8PEkiv0M-7GOCDLv06XR319Kn0O_KMCbVcM9QCL-wnNsGc-tpcyk5SGYw7p2MhI6ycRrnmT1khdHKKYUnIPE6TV2HM38SYo3bBjhgLcifGWrgzhaawsK40xwf0Yk/s1600/HR_adibideak.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="453" data-original-width="874" height="331" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyJrSqmTFXpiSsBCv8PEkiv0M-7GOCDLv06XR319Kn0O_KMCbVcM9QCL-wnNsGc-tpcyk5SGYw7p2MhI6ycRrnmT1khdHKKYUnIPE6TV2HM38SYo3bBjhgLcifGWrgzhaawsK40xwf0Yk/s640/HR_adibideak.png" width="640" /></a></div>
<br />
<br />
<hr />
<span class="codigo"><blockquote></span> <b>Sangrado</b><br />
<br />
Aquel texto situado entre la marca <span class="codigo"><blockquote> y la marca </span><span class="codigo"></blockquote> </span>queda desplazada a la derecha quedando a su izquierda una sangría o identación. Por ejemplo, el siguiente código:<br />
<pre> <<span class="codigo">blockquote</span>>
<h1>Texto desplazado a la derecha</h1>
<span class="codigo"></blockquote></span>
<h2>Texto sin sangrado</h2></pre>
<br />
Producirá la siguiente salida:<br />
<blockquote>
<h1>
Texto desplazado a la derecha</h1>
</blockquote>
<h2>
Texto sin sangrado</h2>
<br />
<br />
<br />
<hr />
<span class="codigo"><!-- --></span> <b>Comentarios</b><br />
<br />
Aquel texto situado entre la directiva <span class="codigo"><span class="codigo"><!--</span> y la directiva </span><span class="codigo">--> </span>no se mostrará a través del navegador y serviría para documentar el código y como recordatorio en futuras revisiones del documento.
<br />
<br />
<br />
<br />
<hr />
&nbsp; <b>Espacio sin ruptura</b><br />
<br />
La entidad <tt><b>&nbsp;</b></tt> (del inglés <u>N</u>on
<u>B</u>reaking <u>Sp</u>ace que significa espacio sin ruptura) sirve
para representar en HTML un espacio en blanco y se utiliza normalmente en
dos casos:
<br />
<ul>
<li>
Cuando queremos que dos palabras no se separen al ajustar el texto al
tamaño de la ventana, por ejemplo las dos palabras que forman una
marca comercial. En ese caso si ponemos <tt>Coca Cola</tt> el navegador puede
separar las palabras pero si ponemos
<tt>Coca<b>&nbsp;</b>Cola</tt> el navegador no las separará
aunque modifiquemos el tamaño de la ventana.
</li>
<li>
Cuando queremos evitar que el navegador agrupe todos los espacios
como si fuesen uno sólo podemos utilizar la entidad
<tt><b>&nbsp;</b></tt> tantas veces como espacios en blanco
queramos incluir.
</li>
</ul>
Para consultar la forma de representar otros caracteres especiales pulsar sobre este <a href="http://www.it.uc3m.es/amillares/Module4/entidades.html" target="_blank">enlace</a>.<br />
<div>
<br /></div>
Jesus Romo Uriartehttp://www.blogger.com/profile/11291884683676354319noreply@blogger.com0tag:blogger.com,1999:blog-9092602758783377912.post-35528883555852124932020-11-24T10:40:00.002-08:002020-11-24T11:59:46.734-08:002 | Más etiquetas [código HTML]<span style="font-family: "courier new" , "courier" , monospace;"><table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody><br /><tr><br /><td><div style="text-align: center;"><br />En general, cada marca debe ser cerrada por su correspondiente marca <br />simétrica. A continuación mencionaremos algunas etiquetas muy utilizadas y al final se mostrará la forma de incluir comentarios en la programación HTML, y se finalizará esta entrada presentando el símbolo especial que más frecuentemente necesitaremos. </div><br /></td></tr><br /></tbody></table><br /><br /><br /><br /><br /><hr /><br /><span class="codigo">&lt;H1&gt;</span>, <span class="codigo">&lt;H2&gt;</span> <span class="codigo">hasta &lt;H6&gt;</span> <b>Encabezados</b><br /><br /><br /><br />Sirven para escribir los titulares del texto y se pueden definir seis niveles de titulares. Por ejemplo, el siguiente código:<br /><br /><pre> &lt;h1&gt;Texto muy grande&lt;/h1&gt;<br /> &lt;h2&gt;Texto grande&lt;/h2&gt;<br /> &lt;h3&gt;Texto algo más grande de lo normal&lt;/h3&gt;<br /> &lt;h4&gt;Texto normal&lt;/h4&gt;<br /> &lt;h5&gt;Texto pequeño&lt;/h5&gt;<br /> &lt;h6&gt;Texto muy pequeño&lt;/h6&gt;</pre><br /><br /><br />Producirá la siguiente salida:<br /><br /><blockquote><br /><h1><br />Texto muy grande</h1><br /><h2><br />Texto grande</h2><br /><h3><br />Texto algo más grande de lo normal</h3><br /><h4><br />Texto normal</h4><br /><h5><br />Texto pequeño</h5><br /><h6><br />Texto muy pequeño</h6><br /></blockquote><br /><br /><br /><br /><br /><hr /><br /><span class="codigo">&lt;p&gt;</span> <b>Párrafos</b><br /><br /><br /><br />En principio, sin entrar en detalles de alineación u otras características, digamos que los párrafos se definen por las tags <span class="codigo">&lt;P&gt; y </span><span class="codigo">&lt;/P&gt;</span>. No obstante, pocas veces se marcan los párrafos mediante este par de etiquetas, porque generalmente se escribe el párrafo sin esas etiquetas y al final se le añade la directiva de <i>salto de línea </i>que se menciona a continuación.<br /><br /><br /><br /><br /><br /><br /><br /><br /><hr /><br /><span class="codigo">&lt;br /&gt;</span> <b>Salto de línea</b><br /><br /><br /><br />Esta marca no tiene contramarca y se utiliza ella sola escribiéndola al final de una párrafo. Sirve para realizar un salto de linea, pueden ponerse tantas como se desee y realizará un salto de línea por cada una de ellas.<br /><br /><br /><br /><br /><br /><br /><br /><br /><hr /><br /><span class="codigo">&lt;hr/&gt;</span> <b>Línea horizontal</b><br /><br /><br /><br />Esta<br /> marca no tiene contramarca y se utiliza ella sola. Sirve para mostrar una línea horizontal. Se recomienda un uso moderado de este recurso. Formato de la línea horizontal:<br /><br /><ul><br /><li>Si quisiéramos dar color y grosor a la línea horizontal lo haríamos así:<pre> &lt;hr style="background-color: #0056b2; height:5px;" /&gt;</pre><br /></li><br /><li>Si quisiéramos variar lo que ocupa de ancho la línea horizontal usaríamos: “width=x %”, siendo “x” el tanto por cien que ocupa la línea:<pre> &lt;hr <code class="plain plain">width="75%" /</code>&gt;</pre><br /></li><br /><li>Para que la línea horizontal tuviera un color sólido de relleno lo haríamos así:<pre> &lt;hr s<code class="plain plain">noshade="noshade" /</code>&gt;</pre><br /></li><br /><li>Para alinear la línea a la izquierda, derecha o centro utilizamos <br />“align”, con lo valores: “align = center” para el centro, “align = right” para la <br />derecha y “align = left” para la izquierda. En el siguiente ejemplo se aplican varias de las directivas de formato:<pre> <code class="plain plain"></code>&lt;hr style="background-color:#9900aa; height:15px;" align="left" width="50%" /&gt;</pre><br /></li><br /></ul><br />Ejemplos:<br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyJrSqmTFXpiSsBCv8PEkiv0M-7GOCDLv06XR319Kn0O_KMCbVcM9QCL-wnNsGc-tpcyk5SGYw7p2MhI6ycRrnmT1khdHKKYUnIPE6TV2HM38SYo3bBjhgLcifGWrgzhaawsK40xwf0Yk/s1600/HR_adibideak.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="453" data-original-width="874" height="331" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyJrSqmTFXpiSsBCv8PEkiv0M-7GOCDLv06XR319Kn0O_KMCbVcM9QCL-wnNsGc-tpcyk5SGYw7p2MhI6ycRrnmT1khdHKKYUnIPE6TV2HM38SYo3bBjhgLcifGWrgzhaawsK40xwf0Yk/s640/HR_adibideak.png" width="640" /></a></div><br /><br /><br /><br /><br /><hr /><br /><span class="codigo">&lt;blockquote&gt;</span> <b>Sangrado</b><br /><br /><br /><br />Aquel texto situado entre la marca <span class="codigo">&lt;blockquote&gt; y la marca </span><span class="codigo">&lt;/blockquote&gt; </span>queda desplazada a la derecha quedando a su izquierda una sangría o identación. Por ejemplo, el siguiente código:<br /><br /><pre> &lt;<span class="codigo">blockquote</span>&gt;<br /> &lt;h1&gt;Texto desplazado a la derecha&lt;/h1&gt;<br /> <span class="codigo">&lt;/blockquote&gt;</span><br /> &lt;h2&gt;Texto sin sangrado&lt;/h2&gt;</pre><br /><br /><br />Producirá la siguiente salida:<br /><br /><blockquote><br /><h1><br />Texto desplazado a la derecha</h1><br /></blockquote><br /><h2><br />Texto sin sangrado</h2><br /><br /><br /><br /><br /><br /><br /><hr /><br /><span class="codigo">&lt;!--&nbsp; --&gt;</span> <b>Comentarios</b><br /><br /><br /><br />Aquel texto situado entre la directiva&nbsp;<span class="codigo"><span class="codigo">&lt;!--</span> y la directiva </span><span class="codigo">--&gt; </span>no&nbsp; se mostrará a través del navegador y serviría para documentar el código y como recordatorio en futuras revisiones del documento.<br /><br /><br /><br /><br /><br /><br /><br /><br /><hr /><br />&amp;nbsp; <b>Espacio sin ruptura</b><br /><br /><br /><br />La entidad <tt><b>&amp;nbsp;</b></tt> (del inglés <u>N</u>on<br /> <u>B</u>reaking <u>Sp</u>ace que significa espacio sin ruptura) sirve<br /> para representar en HTML un espacio en blanco y se utiliza normalmente en<br /> dos casos:<br /> <br /><br /><ul><br /><li><br /> Cuando queremos que dos palabras no se separen al ajustar el texto al<br /> tamaño de la ventana, por ejemplo las dos palabras que forman una<br /> marca. En ese caso si ponemos <tt>Coca Cola</tt> el navegador puede<br /> separar las palabras pero si ponemos<br /> <tt>Coca<b>&amp;nbsp;</b>Cola</tt> el navegador no las separará<br /> aunque modifiquemos el tamaño de la ventana.<br /> </li><br /><li><br /> Cuando queremos evitar que el navegador agrupe todos los espacios<br /> como si fuesen uno sólo podemos utilizar la entidad<br /> <tt><b>&amp;nbsp;</b></tt> tantas veces como espacios en blanco<br /> queramos incluir.<br /> </li><br /></ul><br />Para consultar la forma de representar otros caracteres especiales pulsar sobre este <a href="http://www.it.uc3m.es/amillares/Module4/entidades.html" target="_blank">enlace</a>.<br /><br /><div><br /><br /></div></span>Jesus Romo Uriartehttp://www.blogger.com/profile/11291884683676354319noreply@blogger.com0tag:blogger.com,1999:blog-9092602758783377912.post-66711211679750685292020-11-24T10:39:00.003-08:002020-11-24T11:59:26.952-08:001 | Primeras etiquetas <table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody>
<tr>
<td><div style="text-align: center;">
En general, cada marca debe ser cerrada por su correspondiente marca
simétrica. A continuación mencionaremos algunas etiquetas muy utilizadas para ajustar el estilo del texto escrito. </div>
</td></tr>
</tbody></table>
<br />
<br />
Los recursos más elementales para establecer el estilo del texto son:<br />
<ul>
<li><b>Negrita</b>. El texto comprendido entre <b><b></b> y <b></b></b> se presentará con una escritura gruesa, para comprobarlo se puede introducir el siguiente código en el editor en su modo HTML:<pre> <b>Esto se ve en el estilo negrita</b></pre>
</li>
<li><b>Cursiva</b>. El texto comprendido entre <b><i></b> y <b></i></b> se presentará con una escritura en cursiva, para comprobarlo se puede introducir el siguiente código en el editor en su modo HTML:<pre> <i>Esto se ve en cursiva o itálico</i></pre>
</li>
<li><b>Subrayado</b>. El texto comprendido entre <b><u></b> y <b></u></b> será subrayado al presentarlo el navegador, para comprobarlo se puede introducir el siguiente código en el editor en su modo HTML:<pre> <u>Esto se ve subrayado</u></pre>
</li>
<li><b> Tachado</b>. El texto comprendido entre <b><strike></b> y <b></strike></b>
se verá tachado al ser presentado por el navegador, para comprobarlo se
puede introducir el siguiente código en el editor en su modo HTML:<pre> <strike>Esto se ve tachado</strike></pre>
</li>
<li><b>Teletipo</b>. El texto comprendido entre <b><tt></b> y <b></tt></b> se verá usando la fuente de espacio sencillo o la anchura fija del navegador (esta etiqueta ha quedado en desuso), para comprobarlo se puede introducir el siguiente código en el editor en su modo HTML:<pre> <tt>Esto se ve como un teletipo</tt></pre>
</li>
</ul>
Las marcas más arriba descritas se pueden combinar entre sí, siempre y cuando se cuide el orden correcto de apertura y cierre de cada parejas de etiquetas. Por ejemplo, mediante este código ¿cómo se verá el texto?<br />
<pre> <i>Todo el texto está en cursiva y además parte es <b>negrita</b>
y otra parte está <u>subrayada</u>.</i></pre>
<br />
Es evidente que el resultado será:<br />
<blockquote>
<i>Todo el texto está en cursiva y además parte es <b>negrita</b> y otra parte está <u>subrayada</u>.</i>
</blockquote>
<br />Jesus Romo Uriartehttp://www.blogger.com/profile/11291884683676354319noreply@blogger.com0tag:blogger.com,1999:blog-9092602758783377912.post-44395415054541376802020-11-24T10:39:00.002-08:002020-11-24T11:59:06.386-08:001 | Primeras etiquetas [código HTML]<span style="font-family: "courier new" , "courier" , monospace;"><table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody><br /><tr><br /><td><div style="text-align: center;"><br />En general, cada marca debe ser cerrada por su correspondiente marca <br />simétrica. A continuación mencionaremos algunas etiquetas muy utilizadas para ajustar el estilo del texto escrito. </div><br /></td></tr><br /></tbody></table><br /><br /><br /><br /><br />Los recursos más elementales para establecer el estilo del texto son:<br /><br /><ul><br /><li><b>Negrita</b>. El texto comprendido entre <b>&lt;b&gt;</b> y <b>&lt;/b&gt;</b> se presentará con una escritura gruesa, para comprobarlo se puede introducir el siguiente código en el editor en su modo HTML:<pre> &lt;b&gt;Esto se ve en el estilo negrita&lt;/b&gt;</pre><br /></li><br /><li><b>Cursiva</b>. El texto comprendido entre <b>&lt;i&gt;</b> y <b>&lt;/i&gt;</b> se presentará con una escritura en cursiva, para comprobarlo se puede introducir el siguiente código en el editor en su modo HTML:<pre> &lt;i&gt;Esto se ve en cursiva o itálico&lt;/i&gt;</pre><br /></li><br /><li><b>Subrayado</b>. El texto comprendido entre <b>&lt;u&gt;</b> y <b>&lt;/u&gt;</b> será subrayado al presentarlo el navegador, para comprobarlo se puede introducir el siguiente código en el editor en su modo HTML:<pre> &lt;u&gt;Esto se ve subrayado&lt;/u&gt;</pre><br /></li><br /><li><b>&nbsp;Tachado</b>. El texto comprendido entre <b>&lt;strike&gt;</b> y <b>&lt;/strike&gt;</b><br /> se verá tachado al ser presentado por el navegador, para comprobarlo se<br /> puede introducir el siguiente código en el editor en su modo HTML:<pre> &lt;strike&gt;Esto se ve tachado&lt;/strike&gt;</pre><br /></li><br /><li><b>Teletipo</b>. El texto comprendido entre <b>&lt;tt&gt;</b> y <b>&lt;/tt&gt;</b> se verá usando la fuente de espacio sencillo o la anchura fija del navegador (esta etiqueta ha quedado en desuso), para comprobarlo se puede introducir el siguiente código en el editor en su modo HTML:<pre> &lt;tt&gt;Esto se ve como un teletipo&lt;/tt&gt;</pre><br /></li><br /></ul><br />Las marcas más arriba descritas se pueden combinar entre sí, siempre y cuando se cuide el orden correcto de apertura y cierre de cada parejas de etiquetas. Por ejemplo, mediante este código ¿cómo se verá el texto?<br /><br /><pre> &lt;i&gt;Todo el texto está en cursiva y además parte es &lt;b&gt;negrita&lt;/b&gt;<br /> y otra parte está &lt;u&gt;subrayada&lt;/u&gt;.&lt;/i&gt;</pre><br /><br /><br />Es evidente que el resultado será:<br /><br /><blockquote><br /><i>Todo el texto está en cursiva y además parte es <b>negrita</b> y otra parte está <u>subrayada</u>.</i><br /></blockquote><br /><br /></span>Jesus Romo Uriartehttp://www.blogger.com/profile/11291884683676354319noreply@blogger.com0tag:blogger.com,1999:blog-9092602758783377912.post-80616858798345015332020-11-24T10:38:00.003-08:002020-11-24T11:58:06.685-08:000 | Página HTML<html>
<title>HTML Tutorial</title>
<body>
Esto es el texto de un parágrafo.<br />
</body>
</html>Jesus Romo Uriartehttp://www.blogger.com/profile/11291884683676354319noreply@blogger.com0