Estilos en HTML

Definir párrafos con la etiqueta <p>

Este elemento, cuya nomenclatura proviene del inglés "paragraph" ("párrafo") es necesario para crear separaciones por párrafos. Con la etiqueta de inicio <p> se marca dónde comienza el párrafo y con el de cierre </p> dónde acaba. El texto se escribe entre estas dos etiquetas.

En todas las versiones de HTML, excepto en XHTML, el tag de cierre es opcional, aunque conviene acostumbrarse a usarlo no solo durante el aprendizaje sino también porque denota un buen estilo.

Puedes probar a marcar párrafos con la etiqueta <p> en tu página de prueba, añadiendo otra frase ("This is the second paragraph of my first webpage" en este ejemplo o "Este es el segundo párrafo de mi primera página web") a aquella primera y marcándolas con la etiqueta, por ejemplo, así:

<p>This is my


first webpage!</p>
<p>This is the second paragraph of my first webpage.</p>

Nota: en realidad no sería necesario separar las frases como hemos hecho aquí, ya que al navegador, que solo es capaz de interpretar las etiquetas, poco le importa cómo lo leamos nosotros. Si se ha escrito así es meramente por una mejor visualización.

Este sería el resultado en la ventana del explorador:

Añadir títulos y subtítulos con la etiqueta <h>

Los títulos también se cuentan entre los elementos básicos de un texto bien estructurado. Gracias a los marcadores estructurales no solo puedes señalar un título como tal sino que también tienes la posibilidad de crear una jerarquía de títulos principales y secundarios. Para ello cuentas con las etiquetas <h1> hasta <h6>, aunque <h1> representa el titular principal de cada subpágina y solo habría que usarlo una única vez, al contrario que todos los demás a partir de <h2>.

Aquí, es importante mantener la jerarquía correcta y no utilizar los diferentes niveles al azar para que tanto el lector como el buscador puedan entender la estructura del texto a partir de los diferentes títulos.

Para añadirle a esta primera página de prueba un título principal y un título secundario puedes utilizar los siguientes comandos:

<h1>Main heading: my first webpage</h1>
<p>This is my


first webpage!</p>
<h2>Second heading</h2>
<p>This is the second paragraph of my first webpage.</p>

Nota: al tratarse de un documento HTML muy sencillo sin metadatos, algunos navegadores, como Firefox, no muestran los acentos o caracteres especiales de forma correcta. Para este test sería recomendable utilizar Google Chrome o traducirlos a entidades HTML.

En el explorador se verá de la siguiente manera:

Destacar palabras o fragmentos de texto: <i>, <em>, <b> y <strong>

Entre los elementos básicos de formato de HTML se encuentran también aquellas etiquetas que permiten destacar de alguna forma tanto palabras aisladas como frases o fragmentos de texto, con la finalidad de dirigir el foco de atención del lector a elementos clave de contenido o funcionales y ayudarle a percibirlos. Para acentuar frases, expresiones técnicas, citas o reflexiones en cursiva podemos utilizar las etiquetas <i> (itálica) y <em> (énfasis). No obstante, conviene utilizar con prudencia la cursiva, ya que frena la lectura. Más importantes son, sin embargo, los elementos <b> (negrita) y <strong> (énfasis fuerte), que destacan en negrita aunque con diferencias en cuanto a su utilización. La etiqueta <b> debería utilizarse para marcar aquellos elementos sobre los que se ha de llamar especialmente la atención del usuario, mientras que <strong> está prevista para destacar contenido relevante.

Lo veremos ampliando nuestra página de prueba con algunas etiquetas de formato:

<h1>Main heading: <i>my first webpage</i></h1>>This is my<strong>first</strong>first webpage!</p>
<h2>Second heading</h2>




>This is the second paragraph of my <em>first webpage</em>.</p>
<p><b>Note</b>:Typical example for the<b>-tag.</p>

Nota: para que el ejemplo de código HTML del pasaje añadido no se muestre como texto plano hemos traducido los corchetes (< y >) como entidades HTML (&lt; y &gt;). Hay que seguir teniendo en cuenta los acentos y otros caracteres especiales.

Crear listas con las etiquetas <ul>, <ol> y <li>

No solo a la hora de hacer la compra recurrimos a las listas. También en la edición de textos se revelan como un medio muy útil para descongestionar párrafos y optimizar la lectura. Con HTML se pueden crear listas con o sin numeración (con viñetas o puntos) con las etiquetas <ol> ("ordered list"=lista ordenada) o <ul> ("unordered list"=lista desordenada) respectivamente. Para definir los puntos de la lista se utiliza <li>, que solo se puede usar si se combina con las dos etiquetas de listado mencionadas.

Ahora podrás probarlo en tu página de prueba:

<ul>
  <li>first unordered-list item</li>
  <li>second unordered-list item</li>>third unordered-list item</li>
</ul>

Nota: recuerda que puedes escribir el texto que prefieras. En este caso la elección del inglés como idioma de los ejemplos solo tiene motivos editoriales.

El resultado debería parecerse a esto:

Si, por el contrario, quieres crear una lista numerada solo hay que cambiar la etiqueta que define el tipo de lista y marcarla como lista ordenada con <ol>:

Como consecuencia, en lugar de las viñetas aparece una lista numerada:

DISEÑO Y EDICIÓN DE PÁGINAS WEB CON HTML II

Comentarios en HTML

En un documento HTML, los comentarios pueden escribirse entre los caracteres "<!--" y "-->". Por ejemplo:

<!-- Esto es un comentario escrito en un documento HTML -->

Los comentarios no se mostrarán en el navegador donde se visualice el documento HTML.

EJEMPLO Dado el archivo "comentarios.html", con dos comentarios:

En un navegador se mostrarán solamente los dos párrafos escritos en el "body":

No obstante, al ver el código fuente del documento en un navegador, sí se mostrarán los comentarios:

Ejercicio de HTML - Crear documento HTML con comentarios

Crear el archivo "comentarios.html" visto en el apartado anterior y comprobar que, aunque los comentarios escritos no se muestran en pantalla, sí están presentes en el código fuente:

Sube al blog la captura

DISEÑO Y EDICIÓN DE PÁGINAS WEB CON HTML

1. Introducción 

Una web o página web es en realidad un sitio web (website) formado por varias páginas web enlazadas entre sí. Los documentos que componen el sitio web son archivos y carpetas que contienen texto, imágenes, botones, animaciones, tablas, gráficos, videos, etc.. Para acceder a las páginas web usamos un navegador (Google Chrome, Internet Explorer, Mozilla Firefox, etc.), que se encarga de comunicar nuestro ordenador con el servidor que alberga la página web.

2. Lenguajes y protocolos

 Lenguaje HTML
HTML (HyperText Markup Language o Lenguaje de Marcado de Hipertexto) es el lenguaje que se utiliza para crear los documentos que componen el sitio web... Este lenguaje indica a los navegadores cómo deben mostrar el contenido de una página web. Nos permite enlazar y navegar por Internet.
El lenguaje HTML contiene dos partes:

• el contenido, que es el texto que se verá en la pantalla de un ordenador,

• y las etiquetas y atributos que estructuran el texto de la página web en encabezados, párrafos, listas, enlaces, etc. y normalmente no se muestra en pantalla. 

Los archivos HTML deben tener una extensión htm o html (ej. miweb.htm o miweb.html). Una página web se puede crear directamente escribiendo en HTML (en el editor de texto y guardándolo con la extensión .htmlo .html) o mediante programas editores de páginas web (Adobe Dreamweaver, MicrosoftExpression Web, Kompozer, etc.)


HTML 

• 
  
• El código queda más limpio 
• Es más fácil reutilizar código 
• Se necesita aprender el lenguaje HTML 
• El aprendizaje es más difícil 
• Crear una página lleva más tiempo 

Programa editor de páginas web 

• El código no es tan limpio 
• El aprendizaje es sencillo 
• Crear una página es más rápido

Primer documento HTML

En este apartado del tutorial se explica cuál es la estructura básica de un documento HTML a través de un ejemplo sencillo ("dos-parrafos.html") donde se visualizan dos párrafos. Por ejemplo, en Google Chrome, el resultado que se espera ver en pantalla será algo parecido a:

Elemento "html"

Un documento HTML contiene marcas (etiquetas), las cuales se escriben empleando los caracteres menor que "<", mayor que ">" y barra inclinada "/".

Por ejemplo, las etiquetas de inicio (<html>) y fin (</html>) representan al elemento raíz ("html") que en todo documento HTML hay que escribir.

Elemento "head"

Dentro del elemento "html", es decir, entre <html> y </html>, se debe escribir el elemento "head" que, como iremos viendo a lo largo del tutorial, puede contener diversa información sobre el documento:

Elemento "title"

Entre <head> y </head> se pueden escribir otros elementos. Por ejemplo, el elemento "title", el cual sirve para indicar el título del documento.

Véase en el ejemplo "dos-parrafos.html" que, el texto escrito entre <title> y </title>, es decir "Ejemplo de 2 párrafos", se visualiza en la parte superior de la pestaña donde se muestra la página web en el navegador.

Elemento "body"

En un documento HTML, después del "head", hay que escribir el elemento "body":

El elemento "body" alberga todo el contenido (párrafos, imágenes, vídeos...) del documento, los cuales se mostrarán en el navegador.

Elemento "p"

En este caso, entre <body> y </body> se incluyen dos elementos "p" delimitados por la etiqueta de inicio <p> y la de cierre </p>:

Estructura básica de un documento HTML

Finalmente, completaremos el código de este primer ejemplo añadiendo:

• <!DOCTYPE html> en la primera línea. Esta es la forma de indicar al navegador donde se visualice el documento que este está escrito en la versión HTML5.
• lang="es-ES" en la etiqueta de inicio <html>. Esto sirve para especificar, mediante el atributo lang, el idioma del contenido del elemento "html". En este caso español (España). Otros posibles valores del atributo lang son: "es-AR"para español (Argentina), "es-CO" para español (Colombia), "es-MX" para español (México), etc.
• <meta charset="utf-8"> dentro del elemento "head". Así, se indica la codificación de caracteres del documento, en esta ocasión UTF-8 (8-bit Unicode Transformation Format, Formato de Transformación Unicode de 8 bits). Obsérvese que, el elemento "meta" está vacío (no tiene contenido) y, en consecuencia, no necesita ser cerrado escribiendo </meta>.

De esta forma, hemos escrito la estructura básica de un documento HTML que muestra por pantalla dos párrafos. Gráficamente, los elementos utilizados se pueden representar del siguiente modo:

Nota: los documentos HTML están formados por elementos cuya gran mayoría deben escribirse delimitados por una etiqueta de inicio <etiqueta> y otra de fin </etiqueta>, tales como: "html", "head", "body", "title" o "p". No obstante, existen otros elementos que no necesitan ser cerrados con la etiqueta de fin, como por ejemplo: "meta".

Cómo crear un documento HTML

Por ejemplo, con el Bloc de notas de Microsoft Windows, podemos crear el siguiente archivo "dos-parrafos.html" (la extensión del archivo puede ser ".html" o ".htm"):

A la hora de guardar el archivo, pinchando en "Archivo" > "Guardar como...", es importante hacerlo codificado en UTF-8, como se muestra en la siguiente imagen:

El resultado sería el esperado. Ahora bien, si se guardase codificado en ANSI en vez de UTF-8, en pantalla se visualizaría algo parecido a:

Ejercicio
Crear primer documento HTML

Cómo ver el código fuente de un documento HTML en un navegador web

En un navegador es posible ver el código fuente de un documento HTML. Por ejemplo, en Google Chrome se puede ver pulsando el botón derecho del ratón sobre la pantalla y seleccionando "Ver código fuente de la página":

En este caso se verá:

Prezi

Prezi

Prezi es una herramienta online para crear presentaciones. Para utilizarla hay que registrarse.

1. Haz click en Comienza.

2. Haz click en Básica - Inicia tu prueba gratis

3. Introduce tus datos y un correo

4. Salta la ventana de pagos y pincha en comenzar.

5. Realiza una presentación sobre como viaja la información por Internet.

6. Para ello ten encuenta los siguientes conceptos:

• Navegador
• Protocolo HTTP
• Router
• Servidor de nombres de dominio (DNS)
• Dirección IP
• Servidor host
• Protocvolo TCP/IP

Padlet

Padlet, es una pizarra virtual ubicada en Internet. Se trabaja en red. Hay una versión libre que es básica y una de pago. Con esta pizarra puedes trabajar solo o de forma colaborativa.

Para entrar tienes que crearte una cuenta o utilizar la de Gmail.

1. Accede a Padlet en la dirección es.padlet.com. Haz click en registrarse y accede con tu cuenta Gmail. Si no tienes que crearte una cuenta de Padlet.

2. Una vez registrado aparece una pantalla en la que haremos click en el botón Crear un Padlet

3. Seleccionamos un espacio en blanco o elegimos una plantilla.

4. Seleccionamos por ejemplo Rejilla

5. Hacemos doble click en cualquier punto o en el símbolo +, para añadir un post.

6. Haz varios post con los siguientes conceptos: Virus informático, Keylogger, Spyware, Adware, Gusano informático, Troyano, Hijackers, Pharming, Hoaxes, Hacker, Crackers, Pharming.

Busca una breve definición de cada uno en Internet y escribela en cada post.

7. Pulsando los tres puntos de post ... se despliega un menú que nos permite subir archivos, introducir una URL, buscar imágenes en Google, hacer una foto, capturar un video o un audio, grabar la pantalla, dibujar, añadir una localización, o unirse a otros Padlet.

8. Completa alguno de los post, con estas opciones.

9. Da al icono de modificar y cambia el título y la descripción. Por ejemplo puedes poner: Amenazas y fraudes. Seguridad en los sistemas informáticos.

10. Cambia la dirección y pon "seguridad informática"

11. Haz click en compartir.

12 Podemos generar un código QR.