By GokiSoft.com| 20:21 22/01/2022|

Học HTML5 - CSS3

Examination & Test + Ôn tập HTML/CSS/JS - Lập Trình HTML5/CSS/JS

Tải Resource

Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

Dương Văn Hoàng

2021-11-16 04:32:15

https://github.com/hoangtran03/Aptech/tree/main/bt1550

Vũ Trung Kiên

2020-12-24 07:14:30

#EmailEditor.html

<!DOCTYPE html>
<html>
<head>
	<title>E-Mail Editor</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="FlexBlock">
		<div class="main" id="mainId">
			<h2>Compose e-mail message.</h2>
			<div class="FlexBlock">
				<div class="Text">
					To:
					<br/>
					From: 
					<br/>
					Cc:
					<br/>
					Subject:
					<br/>
					Message:
				</div>
				<div class="Input">
					<input type="text" name="To">
					<br/>
					<input type="text" name="From">
					<br/>
					<input type="text" name="Cc">
					<br/>
					<input type="text" name="Subject">
					<br/>
					<textarea style="margin-top: 3px;"></textarea>
				</div>
			</div>
			<div class="button">
				<a href="Status.html">
					<button>Send</button>
				</a>
				<a href="">
					<button>Cancel</button>
				</a>
			</div>
		</div>
		<div class="Help" id="HelpId" onclick="clickOpen()">
			<h2>Help</h2>
		</div>
	</div>
	<div class="HelpBlock" id="HelpBlockId">
		<h2>-: E-mail Editor Help :-</h2>
		<ul>
			<li>
				<b>To and Cc:</b>
				<br/>
				<b>To</b> and <b>Cc</b> boxes allow you to enter the e-mail addesses of the recepients to whom to message has to be sent. Recipients will be able to see who else was sent the message by looking at the contents of the <b>To</b> and <b>Cc</b> boxes.
			</li>
			<li>
				<b>Subject:</b>
				<br/>
				The <b>Subject</b> box allows you to enter meaningful summary of the message.
			</li>
			<li>
				<b>Message:</b>
				<br/>
				The <b>Message</b> TextArea allows you to enter the text of your message.
			</li>
		</ul>
		<div class="Close" onclick="clickClose()">
			Close
		</div>
	</div>
	<script type="text/javascript">
		function clickOpen() 
		{
			document.getElementById('HelpBlockId').style.display = 'block'
			document.getElementById('mainId').style.display = 'none'
			document.getElementById('HelpId').style.display = 'none'
		}
		function clickClose()
		{
			document.getElementById('HelpBlockId').style.display = 'none'
			document.getElementById('mainId').style.display = 'block'
			document.getElementById('HelpId').style.display = 'block'
		}
	</script>
</body>
</html>

#Status.html

<!DOCTYPE html>
<html>
<head>
	<title>E-Mail Editor</title>
</head>
<body>
	<h1>Your message has been successfully sent.</h1>
</body>
</html>

#style.css

body
{
	background-color: rgb(255,255,240);
}
.main
{
	width: 400px;
	background-color: #DDFFEE;
	margin-left: 700px;
	margin-top: 20px;
}
.main h2
{
	margin-left: 20px;
}
.FlexBlock
{
	display: flex;
}
.Help
{
	background-color: #ddffee;
	color: #1e23b8;
	width: 50px;
	height: 37px;
	margin-left: 10px;
	cursor: help;
	margin-top: 20px;
}
.Help h2
{
	margin-top: 5px;
	margin-bottom: 5px;
}
textarea
{
	scrollbar-3dlight-color: #C0C0C0;
	scrollbar-shadow-color: silver;
	scrollbar-arrow-color: black;
	scrollbar-face-color: gray;
	background-color: #ffffdd;
	border: solid 2px #a6a9a9;
	width: 240px;
}
.Text
{
	width: 90px;
	text-align: right;
	margin-right: 5px;
	line-height: 25px;
}
.Input
{
	width: 300px;
	line-height: 25px;
}
input
{
	width: 80%;
	outline: none;
	background-color: #ffffdd;
	border-color: #a6a9a9;
}
.button
{
	margin-left: 150px;
	margin-bottom: 10px;
}
a
{
	text-decoration: none;
}
button:hover
{
	cursor: pointer;
}
.HelpBlock
{
	background-color: #ccffcc;
	width: 800px;
	margin-left: 500px;
	display: none;
	padding: 10px;
}
li
{
	list-style-type: square;
	position: inside;
}
.Close
{
	color: #202af7;
	margin-left: 700px;
}
.HelpBlock h2
{
	margin-left: 20px;
}
ul
{
	padding-left: 80px;
	padding-right: 30px;
}
.Close:hover
{
	cursor: pointer;
}

Lê Sĩ Tuyển

2020-12-24 06:45:29

https://tuyen6tuoi.herokuapp.com

Phạm Xuân Hậu

2020-06-05 10:28:03

#EmailEditor.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body{
        background-color:  rgb(255,255,240); 
    }
    textarea{
        scrollbar-3dlight-color: #C0C0C0;
        scrollbar-shadow-color: silver;
        scrollbar-arrow-color: black;
        scrollbar-face-color: gray;

    }
    form{
        background-color: #FFFFDD;
        height: 300px;
        width: 300px;
        margin: auto;
      
    }
    table{
        margin-left: 30px;
    }
    h3{
        margin-left: 30px;
    }
    .button{
        margin-left: 92px;
    }
    #main{
        width: 400px;
         background-color: #DDFFEE;
         text-align: 0px 10px 0px 10px;
    }

</style>
<body>
    <form>
        <h3>Compose e-mail message</h3>
        <table>
            <tr>
                <td><label>To:</label></td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td><label>From:</label></td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td><label>Cc:</label></td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td><label>Subject:</label></td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td><label>Message</label></td>
                 <td><textarea></textarea></td>
            </tr>

        </table>       
            <div class="button">    
                 <input type="button" value="Send">
                 <input type="button" value="Cancel">
            </div>
    </form>
    <div id="main"></div>
    <div id="help"><input type="button" value="Help"></div>
    </div>
</body>
</html>

Trương Anh Quân

2020-06-03 14:46:10

#test1.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        form {
            display: inline-table;
            margin-left: 40%;
            background-color: rgb(143, 218, 228);
            padding: 24px;
            margin-bottom: 62px;
        }
        span {
            background-color: lightblue;
            color:blue;
            font-weight:bold;
            padding:3px;
            font-size: 24px;
            margin-left: 30px;
            cursor: help;
        }
        .emailHelp {
            width: 500px;
            height: 420px;
            margin-top:10px;
            background-color: #cfc;
            padding-left: 10px;
            border: 2px solid #E4E7E7;
            color: #303030;
            margin:0 auto;
        }
        input, textarea {
            background-color:#FFFFDD;
        }
    

    </style>
</head>

<body>
    <form>
        <h2>Compose e-mail message</h2>
        <table>
            <tr>
                <td>To:</td>
                <td> <input type="text"> </td>
            </tr>
            <tr>
                <td>Form:</td>
                <td> <input type="text"></td>
            </tr>
            <tr>
                <td>Cc:</td>
                <td> <input type="text"> </td>
            </tr>
            <tr>
                <td>Subject: </td>
                <td><input type="text"> </td>
            </tr>
            <tr>
                <td>Message: </td>
                <td> <textarea cols="22" rows="6"></textarea></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <button type="submit" value="Send"> Send </button>
                    <button type="reset" value="Cancel">Cancel </button>
                </td>
            </tr>
        </table>
    </form>
    <span id="help">Help</span>
    <div class="emailHelp">
        <h2>E-mail Editor Help: </h2>
        <p>
            <b>To and Cc</b> <br>
            <b>To</b> and <b>Cc</b> Lorem, ipsum dolor sit amet consectetur adipisicing elit.
             Cum accusamus minus doloremque officia qui nemo tempore ab porro dolore quaerat, doloribus harum natus 
             cumque laudantium pariatur quia. Quo, ab neque! <br>
             <b>Subject:</b> <br>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, tempora. Earum unde veniam commodi eligendi, facere autem a
             dipisci illum, vitae impedit, consequuntur itaque maxime nam ducimus laboriosam voluptate perferendis minus.
             <b>Message:</b>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos assumenda, neque sapiente autem unde rem quos commodi similique ad tempore earum 
             laborum architecto vel fugit repellat fugiat quaerat eligendi natus. <br>
             <a style="margin-left: 401px; cursor:hand" href="#">Close</a>
        </p>
    </div>

    <script>
        var help = document.getElementById('help');
        
    </script>
</body>

</html>

phạm minh hiếu

2020-06-03 13:19:59

#test.html

<!DOCTYPE html>
<html>
<head>
    <title> test </title>
<head>  
<style>
    body {
    background-color: rgb(255,255,240);
    }

    h1 {
    color: black;
    text-align: center;
    }

    p {
    font-family: verdana;
    font-size: 20px;
    }
</style>
</head>
<body>

<h1> Compose E-mail message. </h1>
<p> some thing </p>
<form>
    <h3> To <input type="text" name="to"> </h3>
    <h3> From <input type="text" name="from"> </h3>
    <h3> Cc <input type="text" name="cc"> </h3>
    <h3> Subject <input type="text" name="subject"> </h3>
    <h3> Message <input type="text" name="message"> </h3>
    <h3> <input type="Send" value="submit"> </h3>
    <h3> <input type="Cancel" value="reset"> </h3>
</body>
</html>

Examination & Test + Ôn tập HTML/CSS/JS - Lập Trình HTML5/CSS/JS

Tải Resource

Tags:

Phản hồi từ học viên

5

Dương Văn Hoàng

Vũ Trung Kiên

#EmailEditor.html

#Status.html

#style.css

Lê Sĩ Tuyển

Phạm Xuân Hậu

#EmailEditor.html

Trương Anh Quân

#test1.html

phạm minh hiếu

#test.html