HTML 1: What is HTML?
HTML is the basic language of websites. HTML stands for Hyper Text Markup Language. Essentially, HTML is a set of instructions that your browser follows to create the structure and functionality of a webpage. This basic structure can be formatted and styled through another coding language, CSS (Cascading Style Sheets), which will be the topic of another tutorial.
Like any language, HTML has its own grammar. If you were to right click on a webpage and select "View page source" (in Chrome), chances are you'd see something like this at the beginning:
<!DOCTYPE html>
<html lang="en">
<head>
Sometimes you need extra <i>emphasis</i> on certain words.
And the webpage would show:
Sometimes you need extra emphasis on certain words.
Note that to close the tag, you add a slash and then repeat the label of the tag. It is important to always close a tag, otherwise you could run into errors. To prevent mistakes, I will often write the opening tag and the closing tag at the same time (so that I don't forget), and after that, I'll insert my content between the two tags.
The basic HTML structure of a simple webpage is along these lines:
<!DOCTYPE html>
<html>
<head>
<h1>Header</h1>
</head>
<body>
<p>Content of website.</p>
</body>
<footer>
<p>Footer content</p>
</footer>
</html>
Let's break that down.
<!DOCTYPE html> declares that the document is indeed written in HTML.
Then, all of your HTML for the webpage goes in between the <html> tag and the closing </html> tag at the very end of the document.
The <head> tag introduces the header section of the webpage. The header usually contains the name of the website or the title of a specific page. Often, the header contains a horizontal navigation pane. The text of the header is contained in <h1> and </h1>, which, by default, make the header text larger than the body text.
The content of your website goes inside the <body> and </body> tags. Within this section, you can create a paragraph with the <p> tag, input your text, and close the paragraph with </p>. You can include as many paragraphs as you want, and conveniently closing the <p> tag creates a space between paragraphs.
Many websites have a footer, which is a section at the bottom of the page where they put helpful links/contact information and a copyright statement. The <footer> tag denotes this section of the website.
These various sections of the website can be formatted with CSS to make your website look and feel the way you want it to.
If you want to play with this basic HTML, you can use this helpful widget at W3Schools (a fantastic website for learning a number of coding languages). In the next section, I demonstrate some HTML text effects.
If you need help setting up a website through a hosting service, I recommend this guide by ShivarWeb. If you are trying to decide which hosting to use, check out this list: PC Mag Best Web Hosting Services.
HTML 2: Text Effects