Para crear un boletín informativo por correo electrónico, debe usar HTML y CSS. HTML hará la estructura del cuerpo del boletín y CSS hará que su estilo se vea bien. Los boletines por correo electrónico se utilizan para informar al lector oa los geeks entusiastas que están muy interesados en su contenido. Si el usuario se suscribió al boletín, ese usuario recibirá la información de notificación sobre la actualización diaria. Este material es útil para mantener actualizados a los usuarios. Se les recibirá información actualizada o nuevos contenidos publicados a través de correos electrónicos.
Creación de una estructura: en esta sección, crearemos una estructura de formulario básica para el boletín informativo por correo electrónico.
- Código HTML: Se utiliza para diseñar la estructura del formulario de newsletter.
HTML
<!DOCTYPE html> <html> <head> <title>Email Newsletter</title> </head> <body> <form action=""> <!-- Title and the content --> <h1>GeeksforGeeks</h1> <p> How many times were you frustrated while looking out for a good collection of programming/algorithm /interview questions? What did you expect and what did you get? This portal has been created to provide well written, well thought and well explained solutions for selected questions. Subscribe us to get daily tech update. </p> <!-- Fill up form for the user --> <div class="container"> <input type="text" placeholder="Name" name="name" required> <input type="text" placeholder="E-mail" name="email" required> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20191212104429/logo8.png"> <br><br> <label> <input type="checkbox" checked="checked" name="check">Daily newsletter </label> </div> <!-- Button to subscribe --> <div class="btn"> <button type="submit" placeholder="Subscribe" value="Subscribe">Subscribe</button> <p id=test> </p> </div> </form> </body> </html>
Estructura de diseño: en la sección anterior, hemos creado la estructura del formulario básico. En esta sección, diseñaremos la estructura para el boletín electrónico utilizando el estilo CSS.
- Código CSS: este código CSS se utiliza con la estructura de código HTML para crear un formulario de boletín de correo electrónico.
CSS
<style>
h1 {
color: green;
}
/* Container padding & border */
.container {
padding: 24px;
border: 2px solid #ccc;
}
/* Container image styling */
.container img {
border-radius: 50%;
width: 50px;
float: right;
margin: 5px;
}
/* input filed type text styling */
input[type=text] {
width: 100%;
padding: 12px;
margin: 12px 0;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* input filed type checkbox floating */
input[type=checkbox] {
float: left;
}
/* button styling */
.btn button {
background-color: #0E9D57;
opacity: 0.8;
color: white;
font-size: 12px;
width: 100%;
padding: 12px;
margin: 12px 0;
border: none;
border-radius: 5px;
font-weight: bold;
}
/* hover affect on button */
.btn button:hover {
opacity: 1;
}
</style>
Combinación del código HTML y CSS: este ejemplo combina las dos secciones anteriores (código HTML y CSS) para crear un boletín informativo por correo electrónico.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Email Newsletter</title>
<style>
h1 {
color: green;
}
/* Container padding & border */
.container {
padding: 24px;
border: 2px solid #ccc;
}
/* Container image styling */
.container img {
border-radius: 50%;
width: 50px;
float: right;
margin: 5px;
}
/* input filed type text styling */
input[type=text] {
width: 100%;
padding: 12px;
margin: 12px 0;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* input filed type checkbox floating */
input[type=checkbox] {
float: left;
}
/* button styling */
.btn button {
background-color: #0E9D57;
opacity: 0.8;
color: white;
font-size: 12px;
width: 100%;
padding: 12px;
margin: 12px 0;
border: none;
border-radius: 5px;
font-weight: bold;
}
/* hover affect on button */
.btn button:hover {
opacity: 1;
}
</style>
</head>
<body>
<form action="">
<!-- Title and the content -->
<h1>GeeksforGeeks</h1>
<p>
How many times were you frustrated while looking
out for a good collection of programming/algorithm
/interview questions? What did you expect and what
did you get? This portal has been created to
provide well written, well thought and well
explained solutions for selected questions.
Subscribe us to get daily tech update.
</p>
<!-- Fill up form for the user -->
<div class="container">
<input type="text" placeholder="Name"
name="name" required>
<input type="text" placeholder="E-mail"
name="email" required>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20191212104429/logo8.png">
<br><br>
<label>
<input type="checkbox" checked="checked"
name="check">Daily newsletter
</label>
</div>
<!-- Button to subscribe -->
<div class="btn">
<button type="submit" placeholder="Subscribe"
value="Subscribe">Subscribe</button>
<p id=test> </p>
</div>
</form>
</body>
</html>
Producción:
Navegador compatible:
- Google Chrome
- Borde de Microsoft
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA