STEP 2
Time to make things interesting!!!! ( ok hands up, it's hand coding HTML, not likely to charm girls or stun party goers, how about "less boring" 🙂 ).
If the first step worked for you then create a new file called "MyWebpage2.html" and copy the following into it. If you missed the first step start here - STEP 1
<!--My First Webpage Rvn 2. Created 2017 - Dtuxcomp.-->
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage Rvn 2</title>
</head>
<body>
Boring unformatted text<br>
Line 2<br>
<header>First Page [ header ]</header>
<hr>
<p>Hello world [ paragraph text ]</p>
<h1>My first webpage [ heading 1 ]</h1>
<h2>My first webpage [ heading 2 ]</h2>
<h3>My first webpage [ heading 3 ]</h3>
<h4>My first webpage [ heading 4 ]</h4>
<h5>My first webpage [ heading 5 ]</h5>
<h6>My first webpage [ heading 6 ]</h6>
<hr>
<footer>More words here [ footer ]</footer>
</body>
</html>
So I've thrown in several new tags here to start to show how you can shape the content of your page. Once saved open this page in your browser just like you did the first one, keeping the saved file open so you can swap back and forth. It should look a bit like this.
Still boring ☹ I know, but this is the basics of how you build the content of your page.
From the first line of the new file here's what the tags are telling the browser.
The first line, starting "<!--" and ending "-->" is a comment line, this is where you can place information that is not to be displayed such as who wrote the page, what it's for or what a particular section is supposed to do, this is very helpful when you are editing longer pages as you can leave yourself tips on what you intend a section to do or what to add next etc. The browser ignores these and you can span them over more than one line, just ensure the first line starts with "<!--" and the last line ends with "-->".
Next is "<!DOCTYPE html>" this tells your browser to expect HTML code, followed by the <html> that starts off your page, this is paired with the </html> tag at the very bottom of the file, most html tags come in pairs like this. The "<head><title>My First Webpage Rvn 2</title></head>" part for now is just telling the browser to use that as the title bar, in a later post I'll add to this.
So then comes the <body> tag ( paired with </body> at the end ) everything between these two tags is the actual contents of your webpage. Simply speaking if it's not a tag it will show up on your page, the tags in this section control how the content is displayed.
There are two tags here that don't have a closing pair. <br> adds a line break. Without this the text will just follow on the same line until it runs out of space, then it will wrap to the next line, test this by deleting the first <br> and refreshing the browers screen. <hr> is a horizontal rule, a straight line across the page, use these to break up a layout.
The rest of the tags come in pairs.
<header> </header> and <footer> </footer> unlike traditional word processors and DTP these don't have to be one at the top of a page and the other at the bottom and you can have more than one of each.
<p> </p> This is a paragraph, use for general text.
<h1> </h1> through <h6> </h6> are used for headings to mark out various sections.
Nothing is set in stone but if you get into good habits and use the same headings and other tags with similar content throughout a site it helps to keep the look consistent and easier to follow.
So that's step 2, don't overthink it just have a play with the file and mess about with adding text and extra tags. Again I repeat, you can't break your computer or the internet, at worst it may just look a bit odd 😉
Please feel free to post with any questions or just show off your handy work, and I'll post step 3 later, this time with some COLOUR !!!!! :O
Step 3 is now posted here
