Trabaja como un profesional con estos 5 trucos HTML
Desde la escuela, HTML es el primero de los muchos conceptos básicos de computación que nos enseñan, y es el que permanece con nosotros por más tiempo. Es un lenguaje esencial que es fácil de aprender y fácil de implementar incluso para quienes no son programadores. HTML es un lenguaje de marcado estándar que requiere tecnologías como Cascading Style Sheet (CSS) y más lenguajes de scripting como Javascript.
Si bien algunos de nosotros conocemos el HTML y los pequeños consejos y trucos, algunos de nosotros los principiantes aún no hemos aprendido algunos trucos de trabajo. Intentaremos descubrir algunos de estos trucos de trabajo para que su codificación sea más rápida y sólida.
Imagenes
SVG
Los gráficos vectoriales escalables (SVG) son de tamaño pequeño porque son códigos XML. Es un montón de código, por lo que es más pequeño y se carga más rápido. Cuando escalamos PNG o JPG más que el tamaño original, se pixelan y reducen el aspecto y el relleno de su sitio web. Pero cuando escala SVG, no se pixelará y mantendrá la nitidez de la imagen en toda la retina. Por lo tanto, puede administrarlo en todos los dispositivos sin problemas de calidad y carga.
Cuando necesitamos una imagen con forma, la gente generalmente guarda la imagen con forma como png y la usa. Pero en ese caso, harán un compromiso con la calidad. Si no quiere comprometer la calidad, puede agregar una imagen en forma de vector.
De esta manera, puede agregar un código SVG con un enlace en la imagen.
< svg xmlns = «http://www.w3.org/2000/svg» width = «210» height = «236» viewBox = «0 0210236 » >
< clipPath id = «hexa-image» >
< ruta d = «M730.985,3216.3v-90.63a27.422,27.422,0,0,1,13.577-23.71l77.86-45.31a26.965,26.965,0,0,1,27.154,0l77.86 , 45.31a27.421,27.421,0,0,1,13.576,23.71v90.63a27.421,27.421,0,0,1-13.576,23.71l-77.86,45.32a26.965,26.965,0,0,1 -27.154,0l-77.86-45.32A27.422,27.422,0,0,1,730.985,3216.3Z ” transform = “ translate (-731 -3053) ” > </ path >
</ clipPath >
< Una clase = “líder-link” el clip-camino = “url (# hexa-imagen)” href = “#” >
< image clip-path = «url (# hexa-image)» width = «210» height = «236» href = «https://i.picsum.photos/id/866/536/354.jpg?hmac= tGofDTV7tl2rprappPzKFiZ9vDh5MKj39oa2D – gqhA ” preserveAspectRatio = “ xMidYMin slice ” > </ image >
</ a >
</ svg >
Figura y figura
cuando necesitamos una imagen de título, la gente generalmente usa <p> después de la imagen y muestra <p> como título. pero esa no es la forma correcta.
No hagas esto
< img src = “https://i.picsum.photos/id/866/536/354.jpg?hmac=tGofDTV7tl2rprappPzKFiZ9vDh5MKj39oa2D–gqhA” alt = “” >
< p > Lorem ipsum dolor sit amet consectetur adipisicing elit. </ p >
HTML5 tiene etiquetas <figure> y <figcaption> para eso. para que pueda agregar una imagen en la etiqueta <figure> y un título en <figcaption>.
Hacer esto
< figura >
< img src = “https://i.picsum.photos/id/866/536/354.jpg?hmac=tGofDTV7tl2rprappPzKFiZ9vDh5MKj39oa2D–gqhA” alt = “” >
< figcaption > Lorem ipsum dolor sit amet consectetur adipisicing elit. </ figcaption >
</ figura >
Formularios
Para etiqueta en la que se puede hacer clic
Generalmente, cuando queremos una etiqueta en la que se puede hacer clic para una casilla de verificación o radio, usamos una etiqueta con un atributo «para». Pero si coloca una casilla de verificación o una radio en una etiqueta, se podrá hacer clic automáticamente en la etiqueta si desea más personalización. Luego, puede envolver el texto de la etiqueta con span o cualquier otra etiqueta. Puede utilizar pseudoelementos «después y antes» para el diseño personalizado.
< acción del formulario = “” >
< etiqueta > < tipo de entrada = «casilla de verificación» nombre = «casilla de verificación» valor = «valor» > Estoy de acuerdo </ etiqueta >
< div >
< etiqueta > < tipo de entrada = «radio» nombre = «radio» valor = «valor» > 1 </ etiqueta >
< etiqueta > < tipo de entrada = «radio» nombre = «radio» valor = «valor» > 2 </ etiqueta >
< etiqueta > < tipo de entrada = «radio» nombre = «radio» valor = «valor» > 3 </ etiqueta >
</ div >
< input type = «enviar» >
</ formulario >
Validaciones de formularios
Las validaciones de formularios son buenas por motivos de seguridad. Ayuda al usuario a ingresar datos correctos para su sitio web. Algunas entradas en HTML5 ya tienen una validación predefinida. Como «Correo electrónico», «URL» y «Teléfono». Con la ayuda del atributo Pattern, podemos validar la información del usuario. Con el patrón, podemos definir una validación personalizada para la entrada usando expresiones regulares. Las expresiones regulares comprueban qué expresiones tienen el valor del elemento <input>.
< formulario >
< label > Correo electrónico: </ label >
< input type = “email” pattern = “[a-z0-9 ._% + -] + @ [a-z0-9 .-] + \. [az] {2,} $” >
< input type = «enviar» >
</ formulario >
Video
El video de fondo de video puede reducir la tasa de rebote. A veces las lecturas pueden resultar tediosas, por lo que este concepto puede solucionar ese problema. Necesita un video que pueda expresar su información de manera efectiva.
- Agregue video en la proporción para ignorar los problemas de recorte.
- Si desea que su video se reproduzca automáticamente, primero hágalo silenciar. Debido a la política del navegador, si el usuario no interactúa con el documento, el video no permitirá la reproducción automática con volumen. Si desea volumen, puede proporcionar un botón para el volumen.
- En iPhone, para reproducir video en línea, puede agregar el atributo » playsinline » a la etiqueta de video.
HTML
< div class = “video-wrapper” >
< Vídeo de reproducción automática de bucle silenciado playsinline >
< source src = «videoplayback.mp4» >
</ video >
</ div >
CSS
.video-wrapper { posición : relativa ; ancho : 50% ; margen : 0 automático ;}
.video-wrapper: antes de { contenido : “” ; pantalla : bloque ; padding-top : calc ( 937 / 1665.77 * 100% );}
.video-wrapper video { posición : absoluta ; izquierda : 50% ; arriba : 50% ; transformar : traducir ( -50% , -50% ); ancho : 100% ;}
Metaetiquetas
Viewport
No todos los dispositivos tienen el mismo ancho. Por lo tanto, el diseño debe adaptarse a cada dispositivo. Si no utiliza la metaetiqueta de la ventana gráfica, el diseño mostrará un escritorio en los dispositivos y el diseño se reducirá.
< meta name = «viewport» content = «width = device-width, initial-scale = 1, maximum-scale = 1, user-scalable = no» >
«Width = device-width» = Esto se ajustará al diseño en el ancho del dispositivo.
«Initial-scale = 1» = Al cargar, esto ampliará el diseño a 1.
«Escala máxima = 1» = Esto no ampliará el diseño más de 1.
“User-scalable = no” = Esto evitará que el usuario haga zoom.
Etiquetas de enlace
Prefetch
<link rel = ”prefetch”> descargue recursos y almacénelos para capturarlos. El navegador no ejecutará ningún recurso almacenado en la captura.
Cuando el usuario redirige a esa página, la velocidad de carga de la página aumentará.
< link rel = «prefetch» href = «/style.css» as = «style» />
