Every webpage you look at is written in a language called HTML. You can think of HTML as the skeleton that gives every webpage structure. In this course, we’ll use HTML to add paragraphs, headings, images and links to a webpage.
The full abbreviation of the word HTML is Hyper Text Markup Language. Every HTML elements is consists of tags enclosed in angle brackets; where <> denotes the starting of a particular tag and </> denotes the ending of that tag. This article is the part one of the series of upcoming articles that will teach you how to code with HTML and build a webpage of your own using HTML. It is advised that you go through the articles very carefully and practice coding by yourself with the methods stated in each of these tutorials.
Required tools to build your very first webpage
- A text editor i.e.: Notepad++
- A web browser software i.e: Google Chrome
You need to type the HTML codes in the text editor and save the file with .htm or .html extension. This will allow your machine to recognize the file as a HTML document which actually is a single webpage. Today we will learn how to declare a webpage as HTML and how CSS makes it look so pretty.
As you already know HTML stands for HyperText Markup Language. Hypertext means “text with links in it.” Any time you click on a word that brings you to a new webpage, you’ve clicked on hypertext!
A markup language is a programming language used to make text do more than just sit on a page: it can turn text into images, links, tables, lists, and much more. HTML is the markup language we’ll be learning.
What makes webpages pretty? That’s CSS—Cascading Style Sheets. Think of it like skin and makeup that covers the bones of HTML. We’ll learn HTML first, then worry about CSS in later courses.
The first thing we should do is set up the skeleton of the page.
a. Always put on the first line. This tells the browser what language it’s reading (in this case, HTML).
b. Always put on the next line. This starts the HTML document.
c. Always put on the last line. This ends the HTML document.
Do it Yourself
<!DOCTYPE html> <html> <p>hello world!</p> </html>