jueves, 21 de mayo de 2020

Comentarios HTML - Curso HTML 5 Básico - Capítulo 5

Comentarios HTML

comentarios html


Los comentarios los podemos utilizar para dos cosas, para organizar las diferentes secciones de las páginas web y para anular elementos sin eliminarlos.



Todo lo que se encuentre comentado en una página HTML será ignorado por los navegadores web.

En el ejemplo de abajo, todo el contenido de color gris es un comentario.
Tenemos por un lado <!-- Títulos --> <!-- Párrafos --> son únicamente comentarios que orientan al creador de la página o a otros desarrolladores con un orden, para que todo esté más leíble y organizado. 



En el comentario multilínea de abajo, se anula por completo el párrafo que entero.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Comentarios HTML</title>
</head>

<body>

<!--Títulos-->
<h2>
<h1>Título de la página</h1>
<h2>Subtítulo de la página</h2>


<!--Párrafos-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum
.
<p>
<!-- <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
-->
</body> </html>

Para más información te recomiendo ver el vídeo de arriba.








lunes, 23 de marzo de 2020

Encabezados HTML - Etiquetas H - Curso HTML 5 Básico - Capítulo 4

Encabezados HTML - Etiquetas H

página web básica





Tenemos a nuestra disposición 6 etiquetas de encabezados para poner títulos:



<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Encabezados HTML</title>
</head>

<body>


<h1>Título H1</h1>
<h2>Título H2</h2>
<h3>Título H3</h3>
<h4>Título H4</h4>
<h5>Título H5</h5>
<h6>Título H6</h6>


</body>
</html>



Resultado:

Etiquetas H de HTML



miércoles, 26 de febrero de 2020

Página web básica - Curso HTML 5 Básico - Capítulo 3

Cómo crear una página web básica

página web básica


Etiquetas básicas en todo documento HTML 5:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
</head>

<body>
</body>
</html>

Etiqueta <!doctype html>

Esta etiqueta especifica el tipo de documento, en este caso HTML.

Etiqueta <html>

El documento HTML empieza con la etiqueta <html> y termina con su respectivo cierre </html>.

Esta etiqueta es la que encapsula a las etiquetas <head> y <body>.

Etiqueta <head>

Es la cabecera de la página. Aquí colocamos cosas cómo las etiquetas, enlaces a páginas externas, el título de la página, etc.
Lo que coloquemos aquí no se va a mostrar al usuario que visite nuestra página.

Etiqueta <title>

Se coloca siempre dentro de las etiquetas head. Especifica el título de la página.

Etiqueta <body>

Es la parte visible del documento HTML. Esta es la parte que va a ver el usuario.
Aquí escribirás el texto de la página, las imágenes, los vídeos, los botones, etc.

viernes, 14 de febrero de 2020

Tu primera página web - Curso HTML 5 Básico - Capítulo 2

Tu primera página web

Tu primera página web


En este capítulo verás cómo crear una simple página web y guardarla.



Yo a lo largo del curso voy a utilizar Dreamweaver, pero tú puedes utilizar el que más te guste. Si no sabes cuál elegir, te recomiendo que leas el capítulo anterior: http://bit.ly/2H8zL6I

El primer paso para crear una página web es hacer click en Archivo > Nuevo...
página nueva Dreamweaver
Haga click en la imagen para ampliarla
A continuación debes crear un nuevo archivo HTML. Fíjate que esté seleccionada la versión HTML 5 como en la imagen.




Crear nuevo archivo html 5
Haga click en la imagen para ampliarla
Dreamweaver me ha autogenerado todas estas etiquetas HTML, que son las básicas en toda página, con lo que ya me he ahorrado escribirlas.

Haga click en la imagen para ampliarla
Para terminar con este capítulo voy a crear un simple párrafo para comprobar que la página funciona correctamente. Para crear un párrafo de texto debes utilizar las etiquetas <p> de apertura y de cierre </p> tal y como se muestra en el código de ejemplo.



Estas etiquetas sólo funcionan si están escritas entre las etiquetas <body></body>


Ejemplo de párrafos HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
</head>

<body>
 
 <p>Este es mi primer párrafo.</p>
 
</body>
</html>

Ahora voy a cargar esta página en el navegador para ver el resultado. Para que funcione, primero debes guardar la página.

cómo guardar página web
Haga click en la imagen para ampliarla.

Una vez guardada, puedes abrir el archivo con el navegador o si utilizas Dreamweaver pulsar la tecla F12.


párrafo HTML

sábado, 8 de febrero de 2020

Los mejores editores web - Curso HTML 5 Básico - Capítulo 1

Los mejores editores web

Editores web


Bienvenido/a a este curso desde cero de HTML5 básico.
Este curso es ideal para quienes no poseen nada de conocimientos sobre HTML.



Empecemos con lo más básico, los editores web. Estos son los que te recomiendo. Si crees que debería haber un editor que no aparece en esta lista y merece estarlo, te invito a que me escribas un comentario y lo pondré junto a los demás.

Dreamweaver logoNota: puedes escribir páginas web en un editor de texto como el bloc de notas, no obstante, no ofrece ningún tipo de ayuda ni está preparado para páginas web. No obstante, lo puedes utilizar puntualmente para editar pequeñas cosas cuándo sepas suficiente HTML.

1- Dreamweaver

Este es mi editor favorito, no voy a engañarte, de hecho, lo utilizo en todos mis vídeos de YouTube con HTML.

Dreamweaver tiene grandes ventajas, como las ayudas y sugerencias que va ofreciendo a medida que escribes.



Con este editor tenemos todo lo necesario para escribir en los diferentes lenguajes de programación disponibles para crear sitios web.

sublime text logoLa principal desventaja es que se trata de un software comercial, por lo que deberemos pagar por su licencia.

2- Sublime text


Sublime text es un editor de texto y código fuente que a pesar de necesitar licencia para su uso continuado, su versión de evaluación permite su uso sin fecha de caducidad, algo así como WinRar.

Es mucho más ligero que Dreamweaver, por lo que su instalación pesa poquísimo y su ejecución es muy rápida.



Además, debo destacar que tiene muchas opciones de personalización.

notepad ++ logo3- Notepad++

Notepad ++ es como un bloc de notas con superpoderes.

Sencillo, rápido y eficiente, estas son algunas de las ventajas que ofrece este editor.

Atom logoOtra cosa a destacar es la cantidad de lenguajes de programación diferentes que es capaz de identificar. Podemos hacer casi de todo con él.

4- Atom

Esta maravilla de editor está desarrollado por nada más y nada menos que GitHub, por lo que solo sabiendo esto, ya sabemos que es una apuesta segura.

Atom soporta muchos lenguajes de programación, no solo los de desarrollo web, por lo que si además de sitios web diseñas aplicaciones, Atom puede ser tu entorno favorito.

Ya sabes, si crees que tu editor web favorito debería estar aquí, defiéndelo en los comentarios.


sábado, 9 de noviembre de 2019

Listas / Arrays en Python V - Añadir elementos con pop - Curso Python de cero a profesional - Capítulo 15

Listas / Arrays en Python V -  Eliminar elementos con pop()

Listas en python pop

Lo que hace el método pop() es muy curioso, es capaz de eliminar un elemento de una lista y almacenarlo en una variable, de modo, que si en el futuro nuestro programa necesita utilizar los valores eliminados de las listas, podremos hacerlo gracias a este método.






Debo indicar que también puede simplemente eliminar elementos sin almacenarlos, cómo hacíamos con el método del() que vimos en capítulos anteriores.

Si lo utilizas en una variable sin especificarle ningún parámetro elimina y almacena el último elemento de una lista:


colores = ["rojo", "azul", "verde", "amarillo"]
print(colores)

colores.pop()
print(colores)

Resultado



Explicación

Declaro la lista colores y le doy cuatro valores.
Imprimo el valor de la lista colores.
Utilizo pop() para eliminar el último elemento de la lista.
Imprimo nuevamente el valor de la lista colores.

¿Qué pasa si quiero eliminar un elemento específico y no el último?



La respuesta es fácil, le pasas como parámetro el número de posición en la lista del elemento que quieres eliminar.


colores = ["rojo", "azul", "verde", "amarillo"]
print(colores)

colores.pop(1)
print(colores)

Resultado



Explicación

Esta vez se ha eliminado el segundo elemento de la lista (posición 1).
Puedes poner cualquier número de posición del elemento que quieras eliminar con pop().



Para terminar, nos falta ver cómo guardar en una variable el valor eliminado de la lista.


colores = ["rojo", "azul", "verde", "amarillo"]
print(colores)

guardaLista = colores.pop(0)
print(colores)

print("El color eliminado de la lista y guardado es el: " + guardaLista)

Resultado

guardar pop variable lista

Explicación

Esta vez se ha eliminado el primer elemento de la lista y a la vez se guarda en la variable guardaLista.

viernes, 8 de noviembre de 2019

La etiqueta abbr Bootstrap 4 - Estilos para textos

Bootstrap 4 - La etiqueta abbr

abbr Bootstrap 4

La etiqueta <abbr> sirve para subrayar con puntos las abreviaturas y mostrar una pequeña ventanita informativa como la que muestra una imagen con el atributo alt.

Ejemplo de la etiqueta abbr


<!--La etiqueta abbr se utiliza para abreviaciones como esta:--> 
 
<p>La <abbr title="World Wide Web">WWW</abbr> es un sistema de distribución de documentos de hipertexto...</p>

Resultado


Etiqueta HTML abbr para abreviaciones

El método getElementById - JavaScript - Curso desde cero - Capítulo 22

El método getElementById

JavaScript DOM getElementById

En el capítulo anterior viste un poco de teroría sobre el DOM y un repaso por encima de lo que puede hacer. Seguramente todavía no sabes muy bien de lo que es capaz, por eso vamos a ir aprendiendo a hacer cosas con él.



El método getElementById le indica a JavaScript que acceda a un elemento mediante su atributo HTML id.

Seguramente quieres una extensa explicación técnica, pero no te la voy a dar, en su lugar, te daré algo mejor. Si me lees a menudo, ya sabes lo que es... ¡un ejemplo práctico! :P

<body>

<p id="texto1">Este es el texto escrito en el párrafo HTML</p>

<script>
document.getElementById("texto1").innerHTML = "Este es el texto escrito por JavaScript.";
</script>

</body>

Resultado
getelementbyid

Hasta ahora, has estado viendo un método similar a document.getElementById, el document.write que genera directamente un párrafo en el documento HTML.



En este ejemplo tenemos un párrafo con un id (texto1) y una frase en su interior.
En el script tenemos un getElementById con el id del párrafo y una frase que va a sustituir la otra, esta frase se reemplaza gracias a la propiedad innerHTML.

miércoles, 6 de noviembre de 2019

¿Qué es el DOM? - JavaScript - Curso desde cero - Capítulo 21

El DOM en JavaScript

JavaScript DOM

El DOM (Document Object Model) permite que los desarrolladores web puedan manipular páginas HTML mediante código JavaScript (hay otros lenguajes que también lo utilizan).



Cuando creemos páginas web, constantemente vamos a necesitar obtener valores almacenados en formularios, crear animaciones, elementos, etc. Esto lo vamos a conseguir muy fácilmente gracias al DOM.

DOM transforma los elementos de los documentos HTML en un conjunto llamado árbol de nodos. Estos están conectados entre ellos y poseen una jerarquía.

Veamos una página XHTML sencilla con pocos elementos:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Capítulo 21 del curso JavaScript</title>
</head>
 
<body>
<p>Estas viendo varios elementos <b>y aprendiendo el DOM</b></p>
</body>
</html>

Esta página se puede representar en un árbol de nodos de la siguiente forma:




DOM JavaScript

Cuando manejes el DOM vas a poder manipular partes de tus páginas web como estas del esquema con JavaScript, pudiendo de este modo crear páginas dinámicas, podrás hacer que el usuario interactúe con la página.
Esto es una introducción al DOM, por eso me he limitado a mostrarlo de la forma más sencilla posible. En el curso avanzado de JavaScript que empezará pronto veremos más a fondo el DOM. Por el momento, empezaremos a utilizar algunas cosas básicas del DOM en los capítulos posteriores.

martes, 5 de noviembre de 2019

El condicional switch - JavaScript - Curso desde cero - Capítulo 20

El condicional switch en JavaScript

El condicional switch en JavaScript

El condicional switch evalúa una expresión o condición que es comparada en múltiples declaraciones.

Cada una de estas declaraciones se separa con la palabra reservada case.
El condicional switch funciona de forma similar al else if.

Sintaxis del condicional switch

<script> 
    
switch(expresión) {
  case 1:
    // código a ejecutar.
    break;
  case 2:
    // código a ejecutar.
    break;
  default:
    // código a ejecutar.
}

</script>

Ejemplo práctico del condicional switch

Voy a crear un pequeño script como si fuera para un videojuego.  En él se pregunta al usuario qué tipo de elemento quiere y le muestra lo que hay en el inventario.

<script> 
    
var opcion;
 
opcion = prompt("Introduce una de estas opciones: armaduras, armas, pociones.");
 
switch (opcion) {
  case "armaduras":
    opcion = "En el inventario hay cascos, petos y botas";
    break;
  case "armas":
    opcion = "En el inventario hay espadas, cuchillos y mazas.";
    break;
  case "pociones":
    opcion = "En el inventario hay pociones sanadoras, de maná y de fuerza.";
    break;
 default:
  alert("No introdujiste la opción correcta");
}
 
alert (opcion);

</script>

Explicación

Se declara una variable llamada opcion la cual gracias al método prompt almacenará el valor introducido por el usuario.

Después de esto, empieza el método switch. En él se establece como parámetro la variable opcion (switch (opcion)), de este modo, ejecutará el código dentro del case que coincida con lo introducido por el usuario.

Si el usuario introdujo armaduras, se ejecutará el case "armaduras", si introdujo armas, se ejecuta el case "armas" y así sucesivamente.

En caso de que el usuario no introduzca ninguna de las tres opciones (armaduras, armas o pociones) se ejecutará el código del default.

Finalmente, este resultado es mostrado al usuario mediante el alert de la última línea del código.

Resultado

Se muestra el prompt:


prompt javascript

case "armaduras".


case 1 switch javascript


case 1 switch javascript


case "armas".


case 2 switch javascript

case 2 switch javascript

case "pociones".


case 3 switch javascript

case 3 switch javascript

default.

Intruzco una opción no contemplada en el switch y esto es lo que ocurre:


default switch javascript

default switch javascript

La importancia del break del condicional switch.

Es importante que sepas para que se escribe un break después del código de cada case. Esto se hace para que se rompa la ejecución del switch y salga de él en cuanto se haya ejecutado la opción deseada, si no lo haces así, empezará a ejecutar todo el código que venga después del que quieres ejecutar. Por ejemplo, si introduces armaduras, también te mostrará el inventario de armas y pociones
Te invito a que hagas la prueba en tu navegador y veas con tus propios ojos lo que ocurre.

Secuencias de escape - Strings III - JavaScript - Curso desde cero - Capítulo 19

Secuencias de escape en JavaScript

Secuencias de escape JavaScript

Seguimos trabajando con strings, en esta ocasión vas a aprender las secuencias de escape en JavaScript.

Las secuencias de escape se utilizan para hacer saltos de línea o mostrar literalmente un caracter específico que sería confundido por el intérprete.

Caracteres de escape de JavaScript:

Nombre Caracteres de escape
Comilla simple
\'
Comilla doble
\"
Barra inversa (backslash)
\\
Nueva línea
\n

Secuencia de escape comilla simple \' en JavaScript

<script> 
    
var escape = 'Aquí aparece \' una comilla simple.'; 
  
document.write(escape);

</script>

Resultado


Comilla simple JavaScript



Secuencia de escape comilla doble \" en JavaScript

<script> 
    
var escape = "Aquí aparece \" una comilla doble."; 
  
document.write(escape);

</script>

Resultado


Comilla doble JavaScript


Secuencia de escape backslash \\ en JavaScript


<script> 
    
var escape = "Aquí aparece \\ una backslash (barra inversa)."; 
  
document.write(escape);

</script>

Resultado

backslash JavaScript



Secuencia de escape backslash \n en JavaScript

En este ejemplo he utilizado un alert para mostrar el valor de la variable en lugar de un document.write. ¿Por qué? porqué el document.write funciona con HTML, mientras que el alert lo hace con JavaScript. \n es un escape del lenguaje JavaScript, no de HTML y si lo pruebas con este, no va a funcionar.

<script> 
    
var escape = "Aquí aparece \n una nueva línea."; 
  
alert(escape);

</script>


Resultado

Salto de línea en JavaScript

domingo, 3 de noviembre de 2019

La etiqueta mark Bootstrap 4 - Estilos para textos

Bootstrap 4 - La etiqueta mark

mark Bootstrap 4

La etiqueta <mark> sirve para destacar o subrayar un trozo de texto.

La primera línea utiliza la etiqueta mark sin clases.
La segunda línea utiliza una clase de tipo alert. Recuerda que puedes utilizar diferentes clases de Bootstrap como son alert, bg, btn...



<p>Con la etiqueta mark <mark>se puede destacar</mark>  un trozo de texto.</p>
<p>Con la etiqueta mark <mark class="alert-success">se puede destacar</mark>  un trozo de texto.</p>


Resultado


mark bootstrap 4