This is a brief introduction to coding basic HTML. HTML stands for Hyper Text Markup Language. It has been used since 1991 and remains one of the best markup languages to date. It's the perfect place to start programming. It's very simple and easy to learn. All you need to get started is a web browser and a text editor, such as Microsoft's Notepad, which comes pre-installed on Windows computers, or TextEdit if you are using Macbook. (On any other operating systems, there are plenty of free text editors available to download online.) I'll give you an example of what you can do with HTML. You can use HTML to create your own custom, interactive webpages. You can create local pages, external links, you van even embed media, such as YouTube videos, music players, or even social media posts. Of course there are other ways to create websites, such as Wix or Weebly, but when you learn HTML, it opens up many other programming languages to learn later on. In this tutorial I will teach HTML5, which is the latest version of HTML as of 2017.
Here is a legend on what you will see in this guide and what their purposes are.
< > - Tags - These angle brackets or "Tags" are the basic parts of a webpage. They usually come in pairs as starting and ending tags. Endings tags always require a forward slash. - <p> This is my paragraph. </p>
Content - The text inside of the tags. - <p> This is my paragraph. </p>
Element - A full line of code represented by tags. - <p> This is my paragraph. </p>
Attribute - An addition to elements that allows for more configuration or additional information. They are only placed in the starting tags and do not require to be repeated in the ending tags. - <html lang="en-US"> <body style="color:#0099ff"> This blue text is in English </body> </html>
Tooltip - A small box of text that displays when it detects a mouse hovering over it's subject. This can be added to text or pictures with the title attribute. - <p title="Hello!"> This is my paragraph. </p>
#000000 - Color Code - A color code is used to define a certain HEX Value to change the color of something. They do not require to be repeated in the ending tag. - <p style="color:#ff3300"> This is my paragraph </p>
Hyperlink - A Hyperlink is a working link in an HTML code. It is used to redirect to a local or external page when clicked on. Hyperlinks can be text or images. To add them, use the <a> tag combined with the 'href'attribute. - <a href=https://wattpad.com/> Click this link to go to Wattpad </a>
Here are a few key things to keep in mind while coding:
• When you save your code, make sure the file name ends in .html otherwise it will not run.
• Changes made in the text editor such as bold, italic, or underline does not affect your webpage's design, you need to manually type <b> bold </b>. This applies for font and color as well.
• Don't forget to close your tags with a forward slash (/). This may seem foolish, but it is actually very common mistake.
• Remember to keep all photos and files surrounding your webpage in the same folder/directory.
• It is best if your web browser is fully updated. This will ensure that there will be the least errors or glitches on your webpage. Some web browsers update automatically, but it's best to manually check first.
• If you notice a mistake with your webpage, it's most likely a typo in your code, but sometimes it's the web browsers fault. Try using different web browsers to solve your problem.
• You can use the Tab key to insert an indent into your code, it is not required, but it just makes it look cleaner and is easier to read.
Oops! This image does not follow our content guidelines. To continue publishing, please remove it or upload a different image.
