ETIQUETAS PARA EL MANEJO DEL TEXTO

 Encabezados <h1> <h2> ...

Las etiquetas <h1> <h2> ... <h6> crean texto para encabezados. Se suelen utilizar para títulos, subtítulos, rótulos, etc.

Ejemplo: <h1>Encabezado de primer nivel h1 </h1>

En la siguiente imagen puedes ver el tamaño de cada tipo de cabecera en relación al texto de párrafo:

Para los títulos y subtítulos es preferible utilizar etiquetas de encabezado que cambiar el tamaño de una etiqueta de párrafo ya que las etiquetas de encabezado tienen significado semántico y son utilizadas por los buscadores para dar significado al texto en función de su importancia.

Separadores <hr>

La etiqueta <hr> crea un separador horizontal. Hasta HTML 4 se representaba en forma de línea y tenía atributos para definir la anchura, alineación, ... En HTML5 esta etiqueta se define como un separador semántico más que como un separador visual, aunque los navegadores siguen representando una línea horizontal. Además esta etiqueta ya no tiene atributos, aunque cómo siempre con las hojas de estilo podemos darle el formato que queramos.

Ejemplo: <hr>

Produce este resultado:

---

Con un estilo podemos alinearla al centro, darle un ancho del 80%, darle un borde de 1 px con estilo punteado, color azul:

   hr {
      text-align: center; width: 80%;
      border: 1px dashed  blue;  }
   }   

---

 Etiqueta <q>

La etiqueta <q> se utilizar para poner entre comillas un texto corto.

Ejemplo:

<p> Al despedirse dijo: <q>Hasta nunca</q> y cerró la puerta.</p>

Al despedirse dijo: Hasta nunca y cerró la puerta.

Si el texto entre comillas se refiere a una cita es conveniente añadir el atributo cite con la URL, que no será visible para el usuario.

Ejemplo:

<p> La web aulaClic es <q cite="http://www.aulaclic.es/index.htm">La primera web en español sobre cursos gratuitos online</q> en la fecha actual, 2017.</p>

La web aulaClic es La primera web en español sobre cursos gratuitos online en la fecha actual.

Etiqueta <strong>

La etiqueta <strong> se utiliza para dar importancia a un texto corto. Los navegadores ponen el texto en negrita.

Ejemplo:

<p> Un coche histórico debe tener, al menos, <strong>25 años</strong> desde la primera matriculación.</p>

Un coche histórico debe tener, al menos, 25 años desde la primera matriculación.

Etiqueta <em>

La etiqueta <em> se utiliza para dar énfasis a un texto corto. Los navegadores poner el texto en cursiva.

Ejemplo:

<p> Una página web puede ser consultada desde <em>cualquier</em> parte del mundo.</p>

Una página web puede ser consultada desde cualquier parte del mundo.

Etiqueta <b>

La etiqueta <b> se utiliza para destacar un texto corto, sin que ello signifique que es importante. Los navegadores ponen el texto en negrita.

Ejemplo:

<p> El futbolista es el deportista mejor <b>pagado</b>.</p>

El futbolista es el deportista mejor pagado.

En muchas ocasiones es difícil distinguir si un texto corto es importante, queremos darle énfasis o merece ser destacado, por lo que utilizar las etiquetas <strong> <em> o <b> puede ser un poco ambiguo. Podríamos simplificar diciendo que si queremos ponerlo en cursiva utilizaremos <em>, y si queremos ponerlo en negrita y que sea tenido en cuenta por los buscadores como un texto importante utilizaremos <strong>, y si sólo queremos ponerlo en negrita utilizaremos <b>.

Etiqueta <sub>

La etiqueta <sub> se utiliza para ver texto como subíndice, es decir, colocado en la mitad inferior de la línea.

Ejemplo:

<p> H<sub>2</sub>O. Texto <sub>subíndice</sub></p>

H₂O. Texto _subíndice.

Etiqueta <sup>

La etiqueta <sup> se utiliza para ver texto como superíndice, es decir, colocado en la mitad superior de la línea.

Ejemplo:

<p>x<sup>2</sup>. Texto <sup>superíndice</sup></p>

x². Texto ^superíndice

^ACTIVIDADES:

^{1. Utilizando las etiquetas para el manejo del texto realiza una página web con tus datos personales: nombres, edad, identificación, dirección, celular, nombre de los padres y hermanos si los tiene, ocupación de los padres, intereses, aficiones, metas a largo y corto plazo, etc.} 

^{2. Investiga cual es la etiqueta para colocar imágenes en tu página web y adiciona  fotografías a tu página web personal.}

^{3. Envía tu trabajo hasta el día 7 de Septiembre de 2021, no olvides hacer una descripción de tu correo en el asunto del mismo.}

^WEBGRAFÍA

^{https://www.aulaclic.es/html/t_3_1.htm}

ETIQUETAS

 Etiquetas

Las etiquetas (marcas) delimitan cada uno de los elementos que componen un documento HTML.

El lenguaje HTML se basa en etiquetas, por eso es importante entender bien la sintaxis de las etiquetas. El siguiente esquema muestra las partes de una etiqueta HTML genérica.

La etiqueta de apertura está delimitada por el signo < "menor que", a continuación el propio nombre de la etiqueta (en este caso p), y opcionalmente, un atributo (en este caso class="fondo"), finalmente el signo > "mayor que".

A continuación está el texto del contenido de la etiqueta, lo más frecuente es un texto, pero podría ser otra etiqueta, una imagen, etc. La etiqueta de cierre está delimitada por el signo < "menor que", a continuación la barra inclinada /, el propio nombre de la etiqueta (en este caso p), y finalmente el signo > "mayor que".

Algunas etiquetas no tienen contenido, y se cierran sobre sí mismas, no tienen etiqueta de cierre, se llaman etiquetas vacías, como la etiqueta <br>. En estas etiquetas opcionalmente se puede colocar una barra justo antes del signo >, por ejemplo: <br />. La etiqueta <br> produce un salto de línea. Las etiquetas vacías no tienen contenido pero si pueden tener atributos. Algunas otras etiquetas vacías son  <hr>, <img>, <input>, <link>, <meta>, <param> y <source>.

En una etiqueta, la primera palabra que aparece es el nombre de la etiqueta. También podemos encontrar atributos con sus valores, siguiendo el formato <etiqueta atributo1="valor" atributo2="valor">. La forma más correcta es escribir el nombre de la etiqueta y los atributos en minúscula, y los valores entre comillas dobles.

Por ejemplo, <a href="https://www.aulaclic.es">Visita aulaClic</a>

Produce este resultado en el navegador: Visita aulaClic

Si un atributo tiene más de un valor, se escriben todos los valores dentro de las mismas comillas, separados por espacios en blanco, por ejemplo <etiqueta atributo="valor1 valor2">.

En general las etiquetas se pueden anidar (unas dentro de otras) pero no se pueden 'cruzar'. Estas dos etiquetas <p> y <div>, están anidadas correctamente:

<div>
<p>
Texto del párrafo
</p>
</div>

Es incorrecto cruzarlas así:

<div>
<p>
Texto del párrafo
</div>
</p>

La sintaxis de las etiquetas HTML ha sufrido variaciones a lo largo del tiempo y hay etiquetas que ya no está recomendado su uso. Por esto se pueden encontrar páginas web antiguas cuyo código HTML no se considera correcto hoy en dia, sin embargo, esas páginas siguen funcionando y mostrando el contenido para el que fueron diseñadas.

Por otro lado, los navegadores pueden obviar pequeños errores y mostrar la página correctamente, como si no tuviera esos errores. Para ver los errores de una página web existen validadores de código HTML, como el de W3C, que nos muestran los errores indicando su grado de gravedad.

En esta unidad vamos a empezar a ver las etiquetas que sirven para colocar el texto en una página web. Antes de continuar observa con atención los siguientes videos que te permitirán repasar los temas vistos hasta el momento:

• En este vídeo puedes ver la estructura de una página web y párrafos de texto: 
• En este vídeo puedes ver las etiquetas de texto:

 Escribiendo texto en el cuerpo de la página

Como estamos diciendo todo el texto de la página estará dentro del <body>, el texto dentro del <body> debe estar, principalmente, dentro de párrafos. En HTML, los párrafos se identifican con la etiqueta <p></p>. Dentro de los párrafos colocaremos texto e imágenes, y algunas etiquetas que nos permitan dar formato al texto. Dentro de un párrafo no debe haber otros párrafos anidados.

A su vez, dentro del <body>, disponemos de encabezados que nos permiten organizar los títulos o rótulos del texto. Los encabezados van desde el <h1></h1> de mayor tamaño, al <h6></h6>, el más pequeño. Por ejemplo, utilizaríamos un <h1> para poner el rótulo principal de la página, <h2> para los títulos de los apartados, <h3> para los apartados de segundo nivel, etc. El propio texto de cada apartado iría fuera del encabezado contenido en párrafos <p></p> u otras etiquetas.

Una de las peculiaridades del texto, es que los espacios en blanco consecutivos y saltos de línea no se muestran como en el código fuente. Si hay varios espacios seguidos, sólo se mostrará uno. Por ejemplo, si en el código fuente escribimos Bienvenido a    aulaClic se verá Bienvenido a aulaClic. Si queremos poner varios espacios seguidos, utilizaremos el código html para el espacio, &nbsp;

El navegador también ignora los saltos de línea. Así si dentro de un párrafo colocamos varios saltos de línea pulsando Intro, estos no se verán. Para crear un salto de línea dentro de un párrafo, utilizamos la etiqueta <br />.

Cada etiqueta <p></p> lleva implicito un salto de línea.

Veremos con más detalle y ejemplos la etiqueta <p>, un poco más adelante, en esta misma unidad.

Otras formas de agrupar el contenido dentro de la página web es con las etiquetas <div> y <span>. La etiqueta <div> se utiliza a nivel de bloque y la etiqueta <span> a nivel de línea o palabras. Estas etiquetas son básicamente contenedores genéricos de contenido. El contenido se escribe entre las etiquetas de apertura y de cierre <div> contenido </div>, el criterio para agrupar contenido no está definido estrictamente, por lo tanto podemos utilizarlas para lo que queramos, por ejemplo para dar estilo al contenido.

Podríamos decir que las etiquetas <div> y <span> son unas etiquetas neutras dentro de la semántica de HTML. Por el contrario, en HTML 5 han surgido nuevas etiquetas semánticas para agrupar el contenido según su significado. Estas nuevas etiquetas a nivel de bloque son, section para secciones, article para artículos, header para cabeceras, nav para menús, footer para pies de página y aside para contenido en el lateral. A nivel de línea o texto tenemos muchas etiquetas semánticas como strong, em, cite. A lo largo del curso iremos viéndolas con detalle.

El uso de estas nuevas etiquetas semánticas no es obligatorio, pero sí recomendable, sobre todo para tener la información mejor estructurada y también para que los buscadores sean capaces de identificar mejor el contenido de nuestra página. Resumiendo, lo recomendable es utilizar las etiquetas semánticas y en los casos en los que no exista una etiqueta semántica apropiada utilizar etiquetas <div> y <span>. En la unidad 12 veremos todo esto con más detalle.

ACTIVIDADES

1. Realiza un resumen en tu cuaderno de la información suministrada en esta entrada de blog incluyendo gráficos cuando sea necesario.

2. Consulte , qué es HTML 5.

3. Observe con atención los 2 videos presentados anteriormente y realice un resumen de cada uno de ellos.

4. En la clase del próximo jueves se realizará preguntas al azar sobre estos temas para evaluar su participación.

WEBGRAFIA

https://www.aulaclic.es/html/t_2_3.htm

APRENDAMOS HTML

 

El World Wide Web (WWW) es un sistema que contiene una cantidad de información casi infinita. Pero esta información debe estar ordenada de alguna forma de manera que sea posible encontrar lo que se busca. La unidad básica donde está almacenada esta información son las páginas Web. Estas páginas se caracterizan por contener texto, imágenes, animaciones... e incluso sonido y video. Una de las características más importantes de las páginas Web es que son hipertexto. Esto quiere decir que las páginas no son elementos aislados, sino que están unidas a otras mediante los links o enlaces hipertexto. Gracias a estos enlaces el navegante de internet puede pulsar sobre un texto de una página para navegar hasta otra página. Será cuestión del programador de la página inicial decidir que palabras o frases serán activas (hiperenlaces) y a donde nos conducirá pulsar sobre ellas. En algunos ambientes se discute que el World Wide Web ya no es un sistema hipertexto sino hipermedia. Los que defienden el cambio se apoyan en que aunque en sus orígenes el WWW constaba únicamente de texto en la actualidad es un sistema principalmente gráfico y se puede hacer que las zonas activas sean, no sólo texto, sino imágenes, videos, botones,... en definitiva cualquier elemento de una página. 

CARACTERÍSTICAS DEL LENGUAJE HTML 

Pero empecemos ya con lo que nos interesa. ¿Cómo se hace una página Web? Cuando los diseñadores del WWW se hicieron esta pregunta decidieron que se debían cumplir, entre otras, las siguientes características: }

• El Web tenía que ser distribuido: La información repartida en páginas no muy grandes enlazadas entre sí.

 • El Web tenía que ser hipertexto y debía ser fácil navegar por él.

 • Tenía que ser compatible con todo tipo de ordenadores (PCs, Macintosh, estaciones de trabajo...) y con todo tipo de sistemas operativos (Windows, MS-DOS, UNIX, MAC-OS,...). 

• Debía ser dinámico: el proceso de cambiar y actualizar la información debía ser ágil y rápido.

Estas características son las que marcaron el diseño de todos los elementos del WWW incluida la programación de páginas Web. Como respuesta a todos estos requisitos se creo el lenguaje HTML (HiperText Markup Language), cuyas siglas significan "lenguaje hipertexto de marcas". Este lenguaje será el encargado de convertir un inocente archivo de texto inicial en una página web con diferentes tipos y tamaños de letra, con imágenes impactantes, animaciones sorprendentes, formularios interactivos, etc.

QUÉ SE NECESITA PARA CREAR UNA PÁGINA WEB

Una de las características de este lenguaje más importantes para el programador es que no es necesario ningún programa especial para crear una página Web. Gracias a ello se ha conseguido que se puedan crear páginas con cualquier ordenador y sistema operativo. El código HTML, como hemos adelantado en el párrafo anterior, no es más que texto y por tanto lo único necesario para escribirlo es un editor de texto como el que acompañan a todos los sistemas operativos: edit™ en MS-DOS, block de notas en Windows, vi™en UNIX, etc. Por supuesto estos no son los únicos editores de texto que pueden ser usados, sino cualquier otro. También se puede usar procesadores de texto, que son editores con capacidades añadidas, como pueden ser Microsoft Word™ o WordPerfect™ pero hay que tener cuidado porque en ocasiones hacen traducciones automáticas del código HTML que no siempre son deseadas. En estos dos últimos casos, también hay que tener en cuenta que deberemos guardar el archivo en modo texto, por eso es recomendable hacerlo para nuestro caso con el BLOG DE NOTAS.

ESTRUCTURA BASICA DE PAGINA EN HTML

Como dijimos previamente, necesitamos escribir el código en el Blog de notas, es necesario siempre seguir la anterior estructura, cada una de los comandos o etiquetas se escriben dentro de los signos < > y se deben cerrar con un slash </ >;  Iniciamos  siempre la codificación con el comando <HTML>, de lo contario el navegador no reconocerá el documento como página WEB, seguimos con el comando <HEAD> para el encabezado, aquí van algunas características de la página como el color del fondo y el título, posteriormente cerramos esta sección con </HEAD>. Todo el contenido de la página web; texto, imágenes, listas, tablas, hipervínculos, etc se deben incorporar dentro del cuerpo, para ello utilizamos la etiqueta <BODY>, finalmente, cuando hayamos terminado de incorporar todo el contenido de nuestra página debemos cerrar con los comandos </BODY> Y </HTML>. Ahora guarda el archivo con extensión .html o .htm en tu disco duro. Para ello accedemos al menú Archivo y seleccionamos la opción Guardar como. En la ventana elegimos el directorio donde deseamos guardarlo y colocaremos su nombre, por ejemplo mi_pagina.html

EJEMPLO:

<HTML>

<HEAD><body bgcolor="pink"></HEAD>

<BODY>

<CENTER><B>LUZ DE DIA</B>

<P>

Destapa el champaigne<BR>

Apaga la luces<BR>

Dejemos las velas encendidas<BR>

Y afuera las heridas.</P>

<P>

Ya no pienses más<BR>

En nuestro pasado<BR>

Hagamos que choquen nuestras copas<BR>

Por habernos encontrado.</P>

<P>

Y porque puedo mirar el cielo<BR>

Besar tu manos<BR>

Sentir tu cuerpo<BR>

Decir tu nombre<BR>

Y las caricias seran la brisa<BR>

Que aviva el fuego de nuestro amor<BR>

De nuestro amor.</CENTER></P>

</BODY>

</HTML>

Hemos colocado un color de fondo de la página en el encabezado con la etiqueta <body bgcolor="pink">, dentro del cuerpo la letra de la canción centrada con la ayuda de las etiqueta <CENTER>, el título en negrita con <B> y </B>, los parrafos con <P>y</P> y los saltos de línea con <BR>, esta etiqueta no necesita cerrarse como las anteriores.

ACTIVIDADES

1. Contesta en tu cuaderno:

• Que traduce WWW?
• Que traduce HTML?
• Cuales son las características del lenguaje HTML?
• Qué se necesita para crear una página web?
• Cual es la estructura básica de una página en lenguaje HTML?

2. Crea tu primera página WEB en la que escribas tu canción favorita utilizando los comandos o etiquetas vistos en esta clase.

3. Envía tu trabajo al correo habitual hasta el 19 de Agosto de 2021.

WEBGRAFIA:

http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html.pdf

UNIDAD III LENGUAJE HTML

LENGUAJES DE PROGRAMACIÓN PARA LA WEB

En la actualidad, existe una gran cantidad de lenguajes de programación enfocados al desarrollo web. En sus orígenes, estos lenguajes tenían un formato estático. Sin embargo, con el paso de los años y la evolución a la hora de crear páginas web han evolucionado en lenguajes dinámicos. Estos nuevos avances permiten al usuario interaccionar más con la página y mejorar la experiencia en la navegación, con lo que ya no es un mero tablón que muestra información.

Como hemos dicho, existen muchos lenguajes. Para conocer un poco mejor qué tipos de lenguaje de programación web existen, es necesario hacer un recopilatorio de los más utilizados y explicar sus ventajas e inconvenientes, en comparación a los demás.

Lenguaje JavaScript

Se utiliza principalmente del lado del cliente aunque se puede utilizar del lado del servidor. Actualmente y gracias a tecnologías como AJAX es utilizado para enviar y recibir información del servidor.

Como principales ventajas, tenemos que destacar que es un lenguaje de scripting seguro y fiable, cuyos scripts tienen capacidades limitadas, debido a la seguridad.

Como desventajas, podríamos mencionar que el código debe descargarse por completo y es visible por cualquier usuario.

Lenguaje PHP

Es un lenguaje enfocado en la creación de webs dinámicas. Sus scripts son interpretados por el servidor y genera código HTML. Requiere Apache o IIS con librerías de PHP. Hereda su sintaxis de C, Java y Perl.

Como principales ventajas, hemos de decir que es un lenguaje fácil de aprender y muy rápido. Soporta la orientación a objetos  y utiliza un lenguaje multiplataforma. Además, puede conectarse con una gran cantidad de base de datos: MySQL, PostgreSQL, Oracle, MS SQL Server… No necesita que se definan los tipos de variables. Uno de sus aspectos más llamativos es que está diseñado con el fin de ser un lenguaje muy seguro para escribir CGI, más que Perl o C.

Es el lenguaje base que utilizan la mayoría de CMS o gestores de contenidos más extendidos como WordPress, PrestaShop, Drupal o Joomla!

Lenguaje Python

Considerado por muchos el lenguaje más limpio a la hora de programar. El código, al igual que JavaScript, es interpretado y no compilado.

Algo curioso en este lenguaje es que permite a los programadores elegir un estilo de programación concreto (objetos, estructurado, funcional…), debido a que es un lenguaje de programación multiplataforma.

Como ventajas de Python, destacamos que es libre y de fuente abierta, de propósito general. Cuenta con muchas funciones y librerías y es multiplataforma y fácil de programar. Por otro lado, su principal desventaja es que, al ser un lenguaje interpretado, es bastante lento.

Lenguaje Ruby

Como el anterior, es un lenguaje interpretado y está orientado a objetos. Hereda su sintaxis de Phyton y Perl. El lenguaje puede cargar librerías de extensiones dinámicamente si el sistema operativo lo permite. Además, es un lenguaje portátil.

Otra ventaja que ofrece es que cualquiera puede encontrar en su página web gran cantidad de información y tutoriales.

El desarrollo web es una tarea que requiere mucho tiempo, por lo que elegir un lenguaje para tu hosting con el que sentirse cómodo es crucial. 

Lenguaje HTML

HTML, siglas en inglés de HyperText Markup Language (‘lenguaje de marcado de hipertexto’), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros. Es un estándar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. HTML se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.¹​

El lenguaje HTML basa su filosofía de desarrollo en la diferenciación. Para añadir un elemento externo a la página (imagen, vídeo, script, entre otros.), este no se incrusta directamente en el código de la página, sino que se hace una referencia a la ubicación de dicho elemento mediante texto. De este modo, la página web contiene solamente texto mientras que recae en el navegador web (interpretador del código) la tarea de unir todos los elementos y visualizar la página final. Al ser un estándar, HTML busca ser un lenguaje que permita que cualquier página web escrita en una determinada versión, pueda ser interpretada de la misma forma (estándar) por cualquier navegador web actualizado.

HTML es un lenguaje de marcado que nos permite indicar la estructura de nuestro documento mediante etiquetas. Este lenguaje nos ofrece una gran adaptabilidad, una estructuración lógica y es fácil de interpre­tar tanto por humanos como por máquinas.

Sin embargo, a lo largo de sus diferentes versiones, se han incorporado y suprimido diversas características, con el fin de hacerlo más eficiente y facilitar el desarrollo de páginas web compatibles con distintos navegadores y plataformas (PC de escritorio, portátiles, teléfonos inteligentes, tabletas, etc.) No obstante, para interpretar correctamente una nueva versión de HTML, los desarrolladores de navegadores web deben incorporar estos cambios y el usuario debe ser capaz de usar la nueva versión del navegador con los cambios incorporados. Normalmente los cambios son aplicados mediante parches de actualización automática (Firefox, Chrome) u ofreciendo una nueva versión del navegador con todos los cambios incorporados, en un sitio web de descarga oficial (Internet Explorer). Por lo que un navegador desactualizado no será capaz de interpretar correctamente una página web escrita en una versión de HTML superior a la que pueda interpretar, lo que obliga muchas veces a los desarrolladores a aplicar técnicas y cambios que permitan corregir problemas de visualización e incluso de interpretación de código HTML. Así mismo, las páginas escritas en una versión anterior de HTML deberían ser actualizadas o reescritas, lo que no siempre se cumple. Es por ello que ciertos navegadores todavía mantienen la capacidad de interpretar páginas web de versiones HTML anteriores. Por estas razones, todavía existen diferencias entre distintos navegadores y versiones al interpretar una misma página web.

ACTIVIDADES:

1. Lea con atención la información presentada en esta entrada de blog.

2. Realice un resumen en su cuaderno.

3. Elabore una página WEB básica que contenga la letra de su canción favorita, crearla en blog de notas y guardarla con un titulo con la extensión HTM

4. Envíe su tarea al correo when732@gmail.com hasta el día 10 de Agosto de 2021

WEBGRAFÍA

https://es.wikipedia.org/wiki/HTML

https://www.piensasolutions.com/blog/principales-lenguajes-programacion-web/