martes, 28 de marzo de 2023

Enlaces en HTML5

Enlaces

Ahora hablemos de los enlaces. Los enlaces se utilizan para navegar de una página a otra en la web.

En HTML5, puedes crear un enlace utilizando la etiqueta <a>, que envuelve el texto o la imagen que deseas que se convierta en un enlace. A continuación, se muestra la sintaxis básica de la etiqueta <a>:

<a href="URL del enlace">Texto o imagen a enlazar</a>

• La URL del enlace es la dirección web de la página a la que se desea enlazar.

• El texto o la imagen a enlazar es lo que el usuario verá y hará clic para ir a la página web enlazada.

Aquí hay un ejemplo de cómo se vería la etiqueta <a> en una página web:

<a href="https://www.example.com/">Visita nuestro sitio web</a>

Ahora que sabes cómo insertar imágenes y crear enlaces en HTML5, puedes experimentar y mejorar la apariencia y la funcionalidad de tus páginas web.

Resumen:

• En HTML5, puedes insertar imágenes utilizando la etiqueta <img>.

• El texto alternativo es importante para la accesibilidad.

• Los enlaces se crean utilizando la etiqueta <a>.

• La URL del enlace es la dirección web de la página a la que se desea enlazar.

• El texto o la imagen a enlazar es lo que el usuario verá y hará clic para ir a la página web enlazada.

lunes, 27 de marzo de 2023

Imágenes en HTML5

Imágenes y enlaces en HTML5

Imágenes

Las imágenes y los enlaces son elementos esenciales en cualquier sitio web moderno. En este capítulo, te enseñaremos cómo usar imágenes y enlaces en HTML5 de manera efectiva para mejorar la apariencia y funcionalidad de tus páginas web.

Empecemos con las imágenes. En HTML5, puedes insertar una imagen en una página web utilizando la etiqueta <img>, que es una etiqueta de autocierre. A continuación, se muestra[1] la sintaxis básica de la etiqueta <img>:

• La URL de la imagen es la dirección de la imagen que se mostrará en la página web.

• El texto alternativo (alt) es un texto que se muestra en lugar de la imagen en caso de que la imagen no se pueda cargar o para fines de accesibilidad.

• El ancho y el alto se utilizan para especificar las dimensiones de la imagen. No son obligatorios, pero es recomendable especificarlos para que la página se cargue más rápido.

Aquí hay un ejemplo de cómo se vería la etiqueta <img> en una página web:

[1] Es importante recordar que para probar los ejemplos y casos prácticos que se presentan en el libro, es necesario crear un documento HTML válido que contenga las etiquetas básicas necesarias.

Para crear un documento HTML válido, debes incluir las siguientes etiquetas en el orden correcto:

La etiqueta <!DOCTYPE html>, que especifica que se está utilizando HTML5.

La etiqueta <html>, que envuelve todo el contenido de la página web.

La etiqueta <head>, que contiene información sobre la página web, como el título y la descripción.

La etiqueta <title>, que especifica el título de la página web.

La etiqueta <body>, que contiene el contenido visible de la página web.

En un día como hoy 27 de marzo de ...

1977 accidente aéreo de Tenerife

El accidente aéreo de Tenerife fue una tragedia que marcó la historia de la aviación.

En el año 1977, se produjo el peor accidente aéreo de la historia en el aeropuerto de Tenerife, España, donde murieron 583 personas al chocar dos aviones Boeing 747 de las aerolíneas Pan Am y KLM.

El accidente se debió a una serie de factores que incluyeron una amenaza de bomba, un aeropuerto congestionado, una niebla espesa y una mala comunicación entre los pilotos y la torre de control.

El avión de KLM inició el despegue sin autorización y se estrelló contra el avión de Pan Am que estaba en la pista esperando para salir. Fue un día trágico que cambió las normas de seguridad y los protocolos de comunicación en el mundo aeronáutico.

domingo, 26 de marzo de 2023

Creación de un documento HTML5 básico

En este capítulo te voy a enseñar cómo hacer una página web de una forma muy sencilla.

¿Y cómo se escribe HTML5? Pues muy fácil, solo necesitas un editor de texto, como el Bloc de notas o el WordPad, y seguir unas reglas básicas. Lo primero que debes recordar es que HTML5 se basa en etiquetas, que son unas palabras entre corchetes angulares (< y >) que indican cómo queremos que se vea el texto. Por ejemplo, si queremos poner un título grande en nuestra página web, podemos usar la etiqueta <h1> al principio del texto y la etiqueta </h1> al final. Así:

<h1>Mi primera página web</h1>

Esto hará que el texto "Mi primera página web" se vea grande y centrado en la pantalla. ¿Ves cómo la etiqueta de cierre tiene una barra (/) antes del nombre? Eso es para indicar que ahí termina el efecto de la etiqueta. Todas las etiquetas deben tener su etiqueta de cierre correspondiente, excepto algunas que son especiales y veremos más adelante.

Lo segundo que debes recordar es que HTML5 tiene una estructura básica que debes respetar para que tu página web funcione correctamente.

Como decíamos antes esta estructura se compone de cuatro partes principales: el DOCTYPE, la cabecera, el cuerpo y el final. El DOCTYPE es una línea que le dice al navegador qué versión de HTML estamos usando. La cabecera es una sección donde ponemos información sobre nuestra página web, como el título que aparece en la pestaña del navegador o los estilos que queremos aplicar. El cuerpo es la sección donde ponemos el contenido principal de nuestra página web, como el texto, las imágenes o los vídeos. El final es una sección donde ponemos información adicional sobre nuestra página web, como los scripts que queremos ejecutar o los comentarios que queremos dejar.

La estructura básica de un documento HTML5 se ve así:

<!DOCTYPE html>
<html>
<head>
<title>Mi primera página web</title>
</head>
<body>
<h1>Mi primera página web</h1>
<p>¡Hola! Esta es mi primera página web creada con HTML5.</p>
</body>
</html>

¿Ves cómo cada parte está entre etiquetas? La etiqueta <html> indica el inicio y el final del documento HTML. La etiqueta <head> indica el inicio y el final de la cabecera. La etiqueta <title> indica el título de la página web. La etiqueta <body> indica el inicio y el final del cuerpo. La etiqueta <h1> indica un título grande. La etiqueta <p> indica un párrafo.

Si guardas este documento con la extensión .html (por ejemplo, miprimeraweb.html) y lo abres con tu navegador favorito (por ejemplo, Chrome o Firefox), verás algo así:

¡Felicidades! Acabas de crear tu primera página web con HTML5. ¿No es genial? Pero esto es solo el principio. Hay muchas más etiquetas y atributos que puedes usar para hacer tu página web más bonita e interactiva. En los siguientes capítulos te iré enseñando cómo usarlos con ejemplos prácticos.

--------

¿Te apasiona la filatelia y el coleccionismo de sellos? ¿Quieres conocer las últimas novedades, consejos y curiosidades sobre este fascinante mundo? Entonces no te pierdas la web de https://www.sooluciones.com, donde encontrarás fichas descargables para imprimir de sellos e información general de los sellos de España y otros países. Además, podrás acceder a una tienda online con material filatélico de calidad. No lo dudes más y entra en https://www.sooluciones.com, la web dedicada a los amantes de la colección de sellos y la filatelia. ¡Te esperamos!

-------

sábado, 25 de marzo de 2023

Curso HTML - índice

Ahora con este índice os resultara mas fácil encontrar la información que buscáis.

Actualizacion a HTML5, CSS, Javascript y XHTML

12 - Introducción a HTML5

16.- Estructura básica de un documento HTML5

----------------------------------------------

93 - HTML - Enlaces “name” “id”
92 - HTML - Vínculos <a></a>
91 - HTML - Tablas - Agrupamientos lógicos “colgroup y col”
90 - HTML - Tablas - Agrupamientos lógicos “thead, tfoot y tbody”
89 - HTML - Tablas - Expansión de celdas “colspan y rowspan”
88 - HTML - Tablas - Alineación de tablas “left, center, right”
87 - HTML - Tablas - Atributo “summary”
86 - HTML - Tablas - Aspecto <caption></caption>
85 - HTML - Tablas - Atributos “bgcolor y backgroundwidth”
84 - HTML - Tablas - Atributos “width y height”
83 - HTML - Tablas - Atributos “cellspacing” y “cellpadding”
82.- HTML – Tablas – Atributos Celdas: "align"
81.- HTML – Tablas – Atributos Celdas: "background – bgcolor – width - height"
80.- HTML - Tablas-Celdas-Alineación Vertical "valign"
79.- HTML - Tablas - Formato de celdas <align>
78.- HTML - Tablas, personalización de las celdas
77.- HTML - Tablas - Colores de Líneas y bordes.
76.- HTML - Tablas - Líneas y bordes interiores.
75.- HTML - Tablas - Bordes y líneas
74.- HTML - Tablas - Bordes y líneas
73.- HTML - Tablas con títulos - <th></th>
72.- HTML - Tablas <table> <tr> <td>
71.- HTML - Listas anidadas
70.- HTML - listas y párrafos
69.- HTML - Listas descriptivas <dl><dt>...</dt><dd>...</dd></dl>
68.- HTML - Listas no ordenadas - <ul><li>...</li></ul>
67.- HTML - Listas ordenadas - <ol><li>...</li></ol>
66.- HTML - Introducción a Lista
65.- HTML - Anidado correcto de etiquetas
64.- HTML - Atributo - ID
63.- HTML - atributos del lenguaje - dir
62.- HTML - atributos del lenguaje - lang
61.- HTML - color de fondo y color de texto - bgcolor
60.- HTML Estilos y efectos de fuentes - Color
59.- HTML - Estilos y efectos de fuentes <sub></sub> subíndice
58.- HTML - Estilos y efectos de fuentes <sup></sup> superindice
57.- HTML - Estilos y efectos de fuentes <small></small> pequeño
56.- HTML - Estilos y efectos de fuentes <big><big> grande.
55.- HTML - Estilos y efectos de fuentes <i></i> italica o cursiva
54.- HMTL - Estilos y efectos de fuentes <tt> </tt> teletipo
53.- HTML - Estilos y efectos de fuentes <s></s> tachado
52.- HTML - Estilos y efectos de fuentes <strike><strike/> tachado.
51.- HTML - Estilos y efectos de fuentes <u></u> subrayado.
50.- HTML - Estilos y efectos de fuentes <b></b> negrita
49.- HTML - Estructuración de Texto - Fuente <basefont>
48.- HTML - Estructuración de Texto - Fuente <font></font>
47.- HTML - Estructuración de Texto - Colores <font></font>
46.- HTML - Tamaño de la fuente <font></font>
45.- Elementos de Estructuración de Texto <del></del>
44.- Elementos de Estructuración de Texto <></>
43.- Elementos de Estructuración de Texto <q></q>
42.- Elementos de Estructuración de Texto <blockquote></blockquote>
41.- Elementos de estructuración de Texto <address></address>
40.- Elementos de estructuración de Texto <acronym></acronym>
39.- Elementos de Estructuración de "<abr></abr>" y "<abbr></abbr>"
38.- Elementos de Estructuración de Texto "<cite></cite>"
37.- Elementos de Estructuración de Texto "<var></var>"
36.- Elementos de Estructuración de Texto "<kbd></kbd>"
35.- Elementos de Estructuración de Texto "<samp></samp>"
34.-
33.- Elementos de estructuración de Texto "<dfn></dfn>"
32.- Elementos de estructuración de Texto "<strong></strong>"
31.- Elementos de estructuración de Texto "<em></em>"
30.- HTML - Encabezados o Titulos <hn><hn>
29.- HTML - Elementos básicos - Espacios y líneas <br>
28.- HTML - Elementos básicos - Párrafos- <p> </p>
27.- HTML - Elementos básicos - Separadores de Texto
26.- Un buen editor para programación Web - Notepad2
25.- HTML: Entidades y caracteres especiales. (2a parte)
24.- Encabezados o títulos en html
23.- Elemento de centrado html
22.- Estructura básica de un documento
21.- Estructura básica de un documento html - Marcas y etiquetas
20.- Estructura básica de un documento html. Metodología
19.- Algunos Navegadores
18.- Evolución del concepto hipertexto
17.- Información lineal e hipertexto

15.- Definición de Tipos de Documentos (DTDs)
14.- Edición de páginas escritas en HTML
13.- Historia y evolución del lenguaje HTML y XHTML
12.- ¿Qué es HTML?
11.- URIs con identificadores y URIs relativos
10.- URL
9.- URI
8.- HTTP
7.- Evolución de la red
6.- Como comenzó Internet
5.- Introducción a la WEB
4.- Como empezar con PHP y MySQL
3.- PHP y MySQL
2.- MySQL, ¿Que es?
1.- PHP, MySQL, XML, CSS, HTML, Java script
Por favor, hacer click, en la publicidad de abajo.
Gracias por vuestra colaboración.