Hypertext Markup Language (HTML) is the standard markup language for creating web pages. Combined with CSS (Cascading Style Sheets) and JS (JavaScript) it can create responsive and user-friendly web applications (Facebook, Twitter, WordPress etc).
HTML elements are the building blocks of HTML pages.
With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page.
<p> I am a paragraph </p>
Tags such as <p> surround and provide information about document text and may include other tags as sub-elements. Browsers do not display the HTML tags, but use them to interpret the content of the page.
Ok. So now we know that HTML is a markup language that uses tags and attributes to display web pages, but exactly is a markup language?
HTML markup consists of several key components, including those called tags (and their attributes), character-based data types, character references and entity references. HTML tags most commonly come in pairs like <h1> and </h1>, where the “<…> indicates the opening tag and the </…> indicates the closing tag.
Note that the closing tag has a “/” (forward slash) opposed to the opening tag, which only has the 2 angled brackets.
There are also elements that don’t require a closing tag, meaning that they only have an opening tag. One good example is the <img> attribute. What it does is that it renders an image of your choice, but it doesn’t make it stop somewhere. Recall that one paragraph ends when it reaches the closing tag </p>, whereas <img> doesn’t have such thing.
The <html> Tag
Although various versions have been released over the years, HTML basics remain the same.
The structure of an HTML document has been compared with that of a sandwich. As a sandwich has two slices of bread, the HTML document has opening and closing HTML tags.
<html>
…
</html>
Everything in an HTML document is surrounded by the <html> tag
The <head> Tag
The head of an HTML file contains all of the non-visual elements that help make the page work.
<html>
<head>
…
</head>
</html>
The <body> Tag
The body tag follows the head tag.
All visual-structural elements are contained within the body tag.
Headings, paragraphs, lists, quotes, images, and links are just a few of the elements that can be contained within the body tag.
<html>
<head>
…
</head>
<body>
…
</body>
</html>
Creating your very first website!
HTML files are text files, so you can use any text editor to create your first web page.
I would personally use Atom or Sublime Text as a text editor, but you can also use other text editors (such as Notepad, which is already installed if you have a Windows).
The process of building a website usually has 5 steps :
Step 1. Go to your Desktop on your computer and create a folder. Name it as you wish.
Step 2. Inside that folder, create a txt document. After you select that option, you should be able to chose a name for the text document AND an extension. Name it “index” and choose “.html” as a file extension.
Step 3. Open your index.html file you have just created and open it your preferred text editor. You can do that by right clicking the file and select “Open with” (or Edit with ) and then choose your text editor.
Step 4. This is where the fun part begins ! In this part you actually get to code.
Begin by writing the <html> tag, which surrounds the HTML document. Then write the <head> tag. Remember that the <head> tag only contains non-visual aspects of an website, an exception being the <title> tag, which displays the text in between the <title> tags above the link of the website. Then write the <body> tag, which must be AFTER the <head> tag.
Your website should now look something like this:
<html>
<head>
</head>
<body>
</body>
</html>
Step 5. Save changes to your file and then go back to your Desktop. Go the the folder you have created and then double click index.html . You should now see a blank HTML page. Try playing with the <a>, <img>, <title> and the <p> tags. More on that in the next article.
This is the end of the HTML Overview section. Feel free to dive right into the HTML Basics.
Code Brunch 
Leave a comment