This article covers the basics of HTML, also known as HyperText Markup Language.
For now, this article will stay within the scope of HTML only.
HTML is marked with tags. One example tag is the <p> tag, which is used to mark paragraphs.
<p>This is a paragraph</p>
Here the HTML begins by opening the tag, using <p>. This is the beginning of the paragraph. The paragraph continues until it reaches a </p> tag, which ends the paragraph.
Between the opening <p> and closing </p> tags, everything inside is the content of that paragraph.
Tags can be placed inside of other tags.
<body> <p> This is a body paragraph.</p> </body>
Here, the <body> tag marks the beginning of the body of the web page and continues to the end of the snippet. Inside the body is one paragraph.
Most HTML tags have their beginning and end marks. HTML elements are an exception. These tags only mark something in one spot.
This is a line that ends with a line break<br>
In this example, there is a sentence followed by a <br> tag, sometimes shown as </br>. This creates a line break, more commonly thought of as the new line created when you press the enter key.
Both <br> and </br> do not mark the beginning or end of section. They only mark that in one spot, there is a line break.
Some HTML tags have special attributes. These allow one to customize certain features of tags.
<a href="http://wiki.cp-commerce.com/">This is a link</a>
The <a> tag links to other content. This tag creates the text "This is a link" and when clicked takes you to this wiki's homepage.
In order to write HTML, there are several text editors available. Avoid Microsoft Word and similar text editors because they often can format HTML incorrectly. The basic Notepad program on windows machines and TextEdit on Mac can edit HTML, however, it is easier with a program that has a feature called syntax highlighting. This feature colorizes text for easier comprehension.
Notepad++ is a program that is useful for individuals learning HTML. It can be downloaded from here.
When saving a document in notepad++, don't forget to change the file type to an HTML document. To get the menu to appear double or right-click next to "Normal text file".
Making a Simple Webpage
Now, let's combine everything so far.
<!DOCTYPE html> <html> <head> <title>My First Page</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph, with <a href="https://www.google.com">my first link</a></p> </body> </html>
This is an example of a simple web page's HTML.
On line 1, the <!DOCTYPE html> tag defines that this is an HTML document and a web page.
Next, the <html> tag begins the content of the web page on line 2 and ends on line 10.
The webpage contains a header marked with <head> that spans from lines 3 to 5 and a body marked with <body> from lines 6 to 9.
Inside the header, there is the title "My First Page". When you open the web page, the window will show that text.
Inside the body, there is a header that will show in large text in the document. This is followed by a paragraph, which contains a sentence with a link inside.
Copy this HTML into notepad++ or your preferred text editor, and save it as an HTML document.
Now open this document in your web browser and you should see something like this.
Congrats, you've just made your first web page!