Html, css, script y más en la web

Casa
Colombia
Coveñas
Html, css, script y más en la web

aprender a desarrollar páginas web Veremos: css, HTML, javascript y más. Aprenderás a crear páginas web totalmente gratis.
(2)

03/05/2024

Color, css, HTML. || hsl(n,100%,n%)
color: hsl(1,100%,0%); color: hsl(1,100%,10%);
color: hsl(1,100%,20%); color: hsl(1,100%,30%); color: hsl(1,100%,40%); color: hsl(1,100%,50%); color: hsl(1,100%,60%); ...
color: hsl(1,100%,100%);

color: hsl(30,100%,0%); color: hsl(30,100%,10%);
color: hsl(30,100%,20%); color: hsl(30,100%,30%); color: hsl(30,100%,40%); color: hsl(30,100%,50%); color: hsl(30,100%,60%); ...
color: hsl(30,100%,10%);

02/05/2024

Color, css, HTML. HSL(), RGB decimal.
Veamos código de color RGB decimal y hsl()

25/05/2023

font-style
La propiedad font-style de css específica el estilo del texto.
Los valores para font-style son: normal, italic y oblique.

.di1 { font-style: normal ; }
.di2 { font-style: italic ; }
.di3 { font-style: oblique ; }

25/05/2023

La propiedad font-size de css específica el tamaño o dimensión de las letras.
Valor: absoluto, relativo, longitud y porcentaje.

Relativo: xx-small, x-small, small, medium, large, x-large, xx-large.

Absoluto: smaller, larger. Longitud: em, ex, px, in, cm, mm, pt, pc.

Porcentaje: %.

.di1 { font-size : xx-small;}
.di2 { font-size : x-small;}
.di3 { font-size : small;}
.di4 { font-size : medium;}
.di5 { font-size : large;}
.di6 { font-size : x-large;}
.di7 { font-size : xx-large;}
.di8 { font-size : smaller;}
.di9 { font-size : larger;}
.di10 { font-size : 1.1em;}
.di11 { font-size : 2ex;}
.di12 { font-size : 16px;}
.di13 { font-size : 0.3cm;}
.di14 { font-size : 3mm;}
.di15 { font-size : 0.16in;}
.di16 { font-size : 11pt;}
.di17 { font-size : 1pc;}
.di18 { font-size : 1%;}
.di19 { font-size : 3%;}
.di20 { font-size : 5%;}
.di21 { font-size : 7%;}

20/05/2023

font-family.
La propiedad font-family de css específica la familia tipográfica del texto.
Valores: fantasy, monospace, serif, cursive y sans-serif

.di1{ font-family: cursive: }
.di2{ font-family: fantasy: }
.di3{ font-family: monospace: }
.di4{ font-family: serif: }
.di5{ font-family: sans-serif: }

$Texto a vozTexto a voz con Javascript en html Código Javascript: function id_(id){ return document.getElementById(id); ...$

27/04/2023

Texto a voz
Texto a voz con Javascript en html

Código Javascript:

function id_(id){ return document.getElementById(id); }

function textoVoz(id) {
let speech = new SpeechSynthesisUtterance();
speech.text = id_("texVoz_"+id).textContent;
speech.volume = 1;
speech.rate = 1;
speech.pitch = 1;
let utterance = window.speechSynthesis.speak(speech);
utterance.voice = voices.filter(function(voice) {return voice.name == 'Diego';})[0]; }

05/09/2022

Acceder desde JavaScript a elementos HTML.

Para acceder a elementos HTML usamos los siguientes métodos del objeto Document():

document.getElementsBy...

Id: getElementById()
Name: getElementsByName()
TagName: getElementsByTagName()
ClassName: getElementsByClassName()

Nota: recuerda que el primer método tiene el getElement en singular, el resto en getElements plural. Ten en cuenta ese detalle para no olvidarte que uno devuelve un elemento y el resto una lista de elementos.

30/08/2022

Circulo con sombra de elipse.

08/08/2022

Elemento rectángulo .

El elemento rectángulo de svg, sirve para crear rectángulos, algunos de sus atributos son "x", "y", "width", "height".
Dándole valor a X e Y se puede fijar su posición; width y height se puede fijar su ancho y su altura. De no agregar los atributos fill y stroke o si se los agregas pero no les das valor; entonces el navegador por defecto les dará un color negro.

Hemos publicado estás dos imágenes, una dónde se muestra el código utilizado y la otra como la representa el navegador.

Observen que los atributos fill y stroke los hemos agregado con estilo CSS.

08/08/2022

border-top:; borde superior.
border-right:; borde derecho.

Les presentamos la propiedad border de css. En esta publicación les mostramos como poner el borde superior y el borde derecho de un elemento div.
border-top: solid 1px red;
border-right: solid 1px green;

En las imágenes están los códigos y los resultados

24/07/2022

Ya les había compartido información de SVG.
Pero cree este álbum para poder ordenar todo sobre el tema de SVG.

Publicación anterior de SVG en el enlace:
https://www.facebook.com/2342890949363715/posts/pfbid038PkTQygdziozxHgGTvsxCU92g7oKQQPhergzfubatQJY28kd5weAXmBygF9vXTWl/

01/07/2022

Border.

La propiedad border permite definir en una única regla todos los bordes de los elementos seleccionados.

Se puede utilizar border para definir el o los valores siguientes:
border-width ,
border-style ,
border-color .

border-width: ancho o grosor del borde.
border-style: estilo del border.
border-color: color del borde.

Para un borde de estilo sólido, de un pixel de grosor y un color azul, utilizaremos la siguiente declaración de css:
border: solid 1px blue;

Dirección

Calle 5 15/200
Coveñas

Página web

https://www.instagram.com/html_css_script_y_mas_en_web/

Notificaciones

Sé el primero en enterarse y déjanos enviarle un correo electrónico cuando Html, css, script y más en la web publique noticias y promociones. Su dirección de correo electrónico no se utilizará para ningún otro fin, y puede darse de baja en cualquier momento.