This article is the second in an ongoing series by Gwen Barret and Destiny Johnson.
What is HTML?
- 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:
You can also make your text italic:
Make your text bold:
You can also position your text on the web page by using the following:
Opening: <p style=”text-align: center;”>
‘Center’ is changeable with right or left
You can insert a hyperlink (active link) into your website using:
Opening : <a href=”website URL here”>
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:
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.
Cover Photo: Allison, FLVS Alum and #FLVSCodes Contest Winner
Cheat Sheet: Johnson, Destiny; 2020
HTML Example Screenshot: Barret, Gwen; 2020
3 thoughts on “Computers are a Science: Intro to HTML”
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 .
Comments are closed.