Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1387 from ehsan-mohammadi/master
Updated html sample code
- Loading branch information
Showing
1 changed file
with
88 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,101 @@ | ||
| <!DOCTYPE HTML> | ||
| <!-- | ||
| Comments are overrated | ||
| --> | ||
| <!--Example of comments in HTML--> | ||
| <html> | ||
| <head> | ||
| <!--This is the head section--> | ||
| <title>HTML Sample</title> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
|
|
||
| <!--This is the style tag to set style on elements--> | ||
| <style type="text/css"> | ||
| h1 { | ||
| color: #CCA3A3; | ||
| h1 | ||
| { | ||
| font-family: Tahoma; | ||
| font-size: 40px; | ||
| font-weight: normal; | ||
| margin: 50px; | ||
| color: #a0a0a0; | ||
| } | ||
|
|
||
| h2 | ||
| { | ||
| font-family: Tahoma; | ||
| font-size: 30px; | ||
| font-weight: normal; | ||
| margin: 50px; | ||
| color: #fff; | ||
| } | ||
|
|
||
| p | ||
| { | ||
| font-family: Tahoma; | ||
| font-size: 17px; | ||
| font-weight: normal; | ||
| margin: 0px 200px; | ||
| color: #fff; | ||
| } | ||
|
|
||
| div.Center | ||
| { | ||
| text-align: center; | ||
| } | ||
|
|
||
| div.Blue | ||
| { | ||
| padding: 50px; | ||
| background-color: #7bd2ff; | ||
| } | ||
|
|
||
| button.Gray | ||
| { | ||
| font-family: Tahoma; | ||
| font-size: 17px; | ||
| font-weight: normal; | ||
| margin-top: 100px; | ||
| padding: 10px 50px; | ||
| background-color: #727272; | ||
| color: #fff; | ||
| outline: 0; | ||
| border: none; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| button.Gray:hover | ||
| { | ||
| background-color: #898888; | ||
| } | ||
|
|
||
| button.Gray:active | ||
| { | ||
| background-color: #636161; | ||
| } | ||
|
|
||
| </style> | ||
|
|
||
| <!--This is the script tag--> | ||
| <script type="text/javascript"> | ||
| window.alert("I am a sample..."); | ||
| function ButtonClick(){ | ||
| // Example of comments in JavaScript | ||
| window.alert("I'm an alert sample!"); | ||
| } | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <h1>Heading No.1</h1> | ||
| <input disabled type="button" value="Click me" /> | ||
| <!--This is the body section--> | ||
| <div class="Center"> | ||
| <h1>NAME OF SITE</h1> | ||
| </div> | ||
| <div class="Center Blue"> | ||
| <h2>I'm h2 Header! Edit me in <h2></h2> | ||
| <p> | ||
| I'm a paragraph! Edit me in <p> | ||
| to add your own content and make changes to the style and font. | ||
| It's easy! Just change the text between <p> ... </p> and change the style in <style>. | ||
| You can make it as long as you wish. The browser will automatically wrap the lines to accommodate the | ||
| size of the browser window. | ||
| </p> | ||
| <button class="Gray" onclick="ButtonClick()">Click Me!</button> | ||
| </div> | ||
| </body> | ||
| </html> | ||
| </html> |