Lesson 1: Building the Foundation of Your Site
Input:
| 1 | <p> This is text </p> |
| 2 | <br> |
| 3 | <h1> You can have headers from 1 - 6 </h1> |
| 4 | <h6> You can have headers from 1 - 6 </h6> |
| 5 | <p> <b> You can have bold text </b> </p> |
| 6 | <p> <i> and italic </i> </p> |
| 7 | <!-- This is a comment in HTML --> |
| 7 | /* This is a comment in CSS */ |
Output:
| This is text |
| You can have headers from 1 - 6 |
| You can have headers from 1 - 6 |
| You can have bold text |
| and italic |
Listed above are the basic commands used in HTML. <p> is the way that you display all text except headers. The only problem with this, is that we can't just start coding with this because the website won't know which language it is. Check out the next box for the perfect set up.
Starting Set-Up:
| 1 | <!DOCTYPE html> |
| 2 | <html> |
| 3 | <head> |
| 4 | <meta name="viewport" content="width=decive-width, initial-scale=1"> |
| 4 | <meta charset="utf-8"> |
| 5 | <style> |
| 6 | |
| 7 | html, body {height: 100%; width: 100%; margin: 0;padding: 0;} |
| 8 | |
| 9 | /* This is where you style your website */ |
| 10 | |
| 11 | </style> |
| 12 | </head> |
| 13 | <body> |
| 14 | |
| 15 | <!-- This is where you put all your HTML code --> |
| 16 | |
| 17 | </body> |
| 18 | </html> |
In this box, the perfect setup is layed out. Let's start at the top. the <DOCTYPE> tag tells the browser which language the program is in, that way the browser can read it. Next comes the html and header tags, the html tag starts the code, while the header separates the styling code from the rest. The meta tags are super important. I forgot them initially and was very confused why media queries just didn't work. You've got your style next, it starts the css portion in just the header. Then switching back to html in the body, you can start your HTML coding. But don't forget to end it! Use /body and /html to close it.
NOTES:
Use a / then the name to end something (<p> and </p>)
Put the HTML in the <body> and the CSS in the <style>
