Learn how to code HTML webpages in 10 Minutes

Learn how to code HTML webpages in 10 Minutes

Why learn HTML?

Learning HTML is a must if you want to do any web development outside of word press applications. There's plenty of non-developer reasons as well. HTML is the cornerstone of developing web content. Follow my tutorial to learn how to code HTML webpages in 10 Minutes

code HTML webpages in 10 Minutes - Starting NOW!
  1. You're going to need a text editor to view code. The default one for Mac operating systems is called 'TextEdit' & the default for windows is 'Notepad' - I'm using a Mac High Sierra operating system, so the images will be from a mac. But windows users should be able to easily follow along and perform all the same things.

code HTML webpages in 10 minutes

  • Mac's default TextEdit is very basic and if you enjoy coding, you should consider upgrading and downloading a nicer text editor such as Atom or Visual Studio Code
Mac Users only:

If you're on windows, feel free to skip to the next section. Notepad makes it easy for you. Mac users will have to change a few settings found below.

We have to quickly change some settings in the default TextEdit application that will allow us to create HTML code. Notepad is fine the way it is.

Learn HTML code in 10 minutes - TextEdit code HTML webpages in 10 minutes- TextEdit Preferences

Under Preferences, you'll need to select the following two options:

  1. New Document > Format > Plain Text
  2. Open and Save > When opening a new file > Display HTML files as HTML code instead of formatted text

code HTML webpages in 10 minutes- TextEdit Preferences
code HTML webpages in 10 minutes- TextEdit Preferences

Writing our HTML Code

First, follow this link and grab the code from my github account.

code HTML webpages in 10 minutes - base code

Don't worry if you don't know what any of it means, we'll go each line to develop a full understanding.

Line 1: This lets the web browser know that it's viewing an html document. This line dictates how each tag is represented and displayed for the user.

Line 2: This tells the browser that the language of the html file is "en" or english.

Line 3: Here we run into an important concept. Most HTML "tags" have opening and closing tags. This just means, for each type of content on the page, we open it with an indicator of what the content is supposed to be, an opening "tag", and close the content with a closing indictator of the content type- a closing "tag".

Line 3 has an opening tag of <head> which stands for heading. Notice that this tag is then closed on line 6 with </head> - Therefore all information found between line 3 and line 6 is classified as the heading and that's how the browser will treat it whenever the html file is read.

Opening Tags:

<tag>

Closing Tags:

</tag>

Most tags will behave in this manner, with a few exceptions. Everything found between these tags will be treated as whatever the tag is. This works for things like headings, paragraph text, and more.

Line 4: UTF-8 is a higher level thing, for now, just know that it is a unicode standard variable.

Line 5: Has the opening and closing of the title tags. Any text put between these tags will be denoted as the title and will be what appears on the tab whenever we host the website.

Line 6: Closes the heading tag that we opened on line 3.

Line 7: Opens a body tag, anything put after this tag will be denoted in our html file as the body of our webpage. Of course, only until we close it with "</body>"

Line 9: This is an example of an anchor tag, we can use this tag to imbed links into our webpage. I'll cover this shortly below.

Line 10: Closing of the body tag.

Line 11: Closing of the html tag that we opened in line 2.

Let's Get Coding:

Now that we know how to denote HTML files, and open and close tags, we can pretty much do whatever we want when it comes to html.

As a coder, you'll never need to remember all the html tags. You will pick up easy ones that you use all the time, but there's always references to help us out.

W3Schools has a great compilation of all html tags found at this link.

As a coder, you will have a problem placed in front of you, and you'll have to reference a variety of material to be able to solve it. Get used to this! But for now, let's create a simple webpage and host it.

Find a few tags from W3Schools and use those. Alternatively, you can grab my source code for a filled out version of html here and just change the text.

My file looks like this:

code HTML webpages in 10 minutes - Filled in html

Hosting our Webpage:

Now, to see the master piece of an html file we have created, we'll need to locally host it. Save your file as anything you want with the extension of .html at the end of the file. Next, we'll need the file path. I moved my file to the desktop for ease and grab the file path by right clicking, getting info, and copying the 'where:' line:

code HTML webpages in 10 minutes - Get info
code HTML webpages in 10 minutes - Location

Then, paste this where line into a web browser. Then add the extension of whatever you named your file. I named mine 'Example.html' so my address will look like this:

code HTML webpages in 10 minutes - URL

Below is what my web page looks like using the code from my Github.

code HTML webpages in 10 minutes - Webpage

And that's it! You created your first web page using html. If you're creating specific kinds of content on a webpage, make sure to reference the tags on W3 schools and find the appropriate one.

From here, you'll probably want to learn how to style your webpage to look like more than just a wall of different sized black text. You're going to want to go through my ten minute CSS tutorial to do this.

You can find it using the links below.

Django Foreign Key Forms

Leave a Reply

Your email address will not be published. Required fields are marked *