In this post we’ll learn how to write simple HTML documents, we would also learn how to;
- Understand the difference between closing tags and self closing tags
- We’ll write tags with attributes
- We’ll use MDN (Mozilla Developer Network) as a reference
- create a sample html document
History of HTML (Hyper Text Markup Language)
- It was created in 1989/ 1990
- It allowed publishing and exchanging of scientific and technical documents
- Allowed electronic linking of documents via hyperlinks
The General Rule
<tagName> Some Content </tagName>
We will always put content in between, and sandwich it between the open tag and the close tag
Examples of tag we have is as follows;
- <h1> Heading one </h1> (this is usually used to make a heading or title in a document)
- <strong> Bold text </strong> (this is usually used to make a text bold)
- <p> New paragraph </p> (this tag is used to make a new paragraph in a document)
Okay, so before we start writing a code. The following link is a good resource for further studies. I’ll advice you go ahead and read this article on Mozilla MDN.
Moving on:
We’ll create a new file called firstPage.html with the following content.
[html]<!DOCTYPE html>
<html>
<head>
<!– metadata goes here –>
<title></title>
</head>
<body>
<!– All content goes here –>
<h1>This is your first html tag! </h1>
</body>
</html>[/html]
The HTML code above is always the same when making a new HTML document. It’s called the boilerplate for HTML pages
<html> : this is the root of all the tag elements in an HTML document. Every other element must be included on the <html> root tag.
<head> : This tag provide general information, i.e. the Metadata about the html document, including the title and links to other files such as scripts or style sheet. This simply mean everything you don’t see on the page as a user is kept in the <head> tag.
<title>: This is the name of your web page, it shows how other pages recognize your page in a website.
Quick one: Comments in HTML, basically helps you the developer to give yourself a description in a web page.
a comment is written with the.
<!– This is a comment –>
Whatever text is written into a comment is not displayed to the user on the browser, it is only available for view to the developer. You’ll realize we have comments in our HTML boilerplate code above.
We’ll continue with using List Items and Attributes in HTML. See you in the next lesson. 🙂
Leave a Reply