Beginning Website Design With HTML (Part 1)
I am beginning a series of tutorials on HTML, the language that makes websites possible. This is the first part of my series. Enjoy, and leave any questions in the comments!
What does HTML stand for? Hyper Text Markup Language
Ok, now we’ve got that out of the way. The first thing you need to know is how to make an HTML file. Easy!
If you are on Windows, go to Start > Accessories > Notepad. Open Notepad, then click File > Save As… and type a name to save it as (e.g website). At the end of the name include the extension.html so the name looks like website.html. Now, click the Save As Type dropdown menu and select “All files”. Then save.
If you are on a Mac, use TextEdit. Open it by either searching it in Spotlight, or going to Finder > Applications > TextEdit. Open it, go to Preferences and make it Plain Text instead of Rich Text. Go to File > Save As…, type a name, and select Web Page (.html) from the File Format dropdown.
That’s all there is to it! Your file is now ready to be made into a website! To view it in the browser (although there is currently nothing to view), just right-click the file, open with your favorite browser.
Ok, now onto the coding! First off: In HTML, everything is made up of tags. Tags consist of and everything in between. For example, the opening tag for an HTML file is. The closing tag is the same, except it has a forward slash in front of the word:. You always begin and end HTML documents with the opening and closing tags. Now, between those tags, put in the head tag. It’s the same as the html tag, except with the word “head” instead of “html”:
The head of your website is where you will put your websites title, and any files your website requires to run. We will get into most of that later; for now, let’s just put in the title. Insert the title tag (I hope you’ve figured out how to do this by now) and close it.
Now, between the title tags, add a title for your website e.g: My First Website
Now for the content. Beneath the closing head tag, make the body tag, opening and closing:. The body of your site is where all of the content that people see goes (the title only appears in the title-bar of browsers).
If you want to insert text into the body, use the paragraph tag with your text between the opening and closing tag.
Save your work, and view the site the way I mentioned above.
To add text beneath that paragraph, simply add the paragraph tags again, along with the text inside.
That’s all for today’s tutorial. By now you should know how to: Create an HTML file, add the site title, and add simple text-content. Come back to see our next tutorials!