This article is the second in an ongoing series by Gwen Barret and Destiny Johnson.
What is HTML?
HTML stands for Hypertext Markup Language. HTML is a coding language in which users use ‘tags’ to create a simple web page. JavaScript and CSS can also be used to develop web pages. This is called front-end development. There is also a visual HTML creator called “What You See is What You Get” (WYSIWYG). This is helpful to see HTML code visually. The “Notepad” app can also be used to write and view code. There are plenty of places to learn HTML, and there are plenty of courses that can lead you on the path to becoming a website developer. Here are some starting tips:
- Find a course that suits you. A course that allows you to move at your own pace is great! An example of one of these is FLVS’s M/J Coding Fundamentals.
- Giving yourself time is key. If you try to rush it, you may not understand all of the tags and important notes in the course.
- Most importantly: have fun! If you are feeling grumpy or frustrated about learning your course, take some time away from it.
Unfortunately, we can’t provide you with a full course, but we can give you an overview of the most basic tags. Since we aren’t using WYSIWYG, we will be using the “Notepad” or your operating system (OS) simple text editor. Another text editor is Atom.
Important note: It is not recommended to use Google Docs or Microsoft Word when coding in HTML. This is due to autocorrect, which can result in dysfunctional HTML code.
At the end of the tutorial, we will offer a cheat sheet for HTML and give an example of the tags that we have used.
The HTML <tag>
Always start with the opening tag: <html>
And always end with the closing tag: </html>
Remember with every opening tag there is a closing tag. For example, <p> </p>
The Tab Title <tag>
When you have a browser tab open you can see the title of what website you are on. For example, when you go to https://www.flvs.net, looking at the top of the tab shows “FLVS -Florida Virtual School…”
The code for a title looks like this: <head> <title> your title </title> </head>
The Content <tag>
After you code in the header or tab title you need to include this tag before putting in any more code: <body>
You will also need to end with this tag: </body>
Making a List <tag>
To make a list of items or steps, and display them on your web page,
For a numbered list: <ol>
For a bullet pointed list: <ul>
Before and after each item in your list you will need to put this tag: <li>
This way, when you display your web page, you will be able to see the items that you have listed. The closing tag for <ol> is </ol> and the closing tag for <ul> is </ul>.
Writing your content <tags>
Start by using the paragraph tag:
Opening: <p>
Closing: </p>
You can also make your text italic:
Opening: <em>
Closing: </em>
Make your text bold:
Opening: <strong>
Closing:</strong>
You can also position your text on the web page by using the following:
Opening: <p style=”text-align: center;”>
Closing: </p>
‘Center’ is changeable with right or left
Hyperlink <tag>
You can insert a hyperlink (active link) into your website using:
Opening : <a href=”website URL here”>
Closing: </a>
This is useful for citing sources or linking to other websites.
The Font Size <tag>
You may have a specific font size to use on the web page. To do this, use <h1>, <h2>, <h3>, <h4>, <h5>, or <h6>, depending on the font size.
Putting it All Together
Now, it is time to put all of the tags we have learned in this article together to make a simple web page. If you look at the image below, you can see all of the HTML code that we have shown in this article. Also shown is an example of a simple HTML Web Page Script, which shows a simple website HTML code using every tag we showed.
Here is a cheat sheet you can use when coding on your own. It has everything we have showed to create your own web page:
Next Steps
You might be wondering, “What’s next?” There is much more to learn on your path to becoming an expert web page developer. For example, security, CSS, and JavaScript.
Luckily Florida Virtual School offers many courses that will lead you to success, including, M/J Coding Fundamentals, Foundations of Programming and Procedural Programming!
Visit the FLVS enrollment website to check them out or view the video below from M/J Coding as a sample.
Sources
Cover Photo: Allison, FLVS Alum and #FLVSCodes Contest Winner
Cheat Sheet: Johnson, Destiny; 2020
HTML Example Screenshot: Barret, Gwen; 2020
Very interesting! I love computers so this was a very informative, and entertaining article.
Hi, this is Liam Gwens brother I am the person who taught her. Your guys cheat sheet is incorrect the hyperlink tag ends with not .
Thanks dude.