HTML Basics for Absolute Beginners ( Part 01 )
This HTML basic guide is a first blog article of an ongoing series of articles which helps software engineering students or anyone who is starting to learn the basics of web development.
HTML is the standard markup language for creating web pages. you need to keep in mind HTML is not a programming language it’s just a markup language. HTML stands for HyperText Markup Language.
HTML is consists of a series of elements & attributes that describe the structure of the web page. let's look at a simple HTML document.
Getting Started With HTML
To start learning HTML all you need is a simple text editor & web browser. As a text editor, you can even use notepad also. When creating HTML files you need to save the files with “.html” extension. You need to make sure to save the homepage of your HTML website as the index.html. This will helps the server to identify the root file of your website.
How to view HTML Files
To view the HTML file in your computer you can simply double click on the HTML file. Then that file will open on your computers default browser.
If you need to check the HTML code of a web page that is already running on the browser.
- Right Click on the web page
- Then select “View Page Source” or “View Source” from the dropdown menu.
- This will open a new window containing the HTML source code of the page.
- As an optional to the above steps, you can use the short cut keys “Ctrl + U” (in windows)
HTML Elements
HTML elements are defined by the start tag, content & the end tag.
<tagname> Content… </tagname>
Apart from the self-closing tags, every element should have a star tag & end tag. Look at these example elements.
<h1> This is the Heading </h1>
<p> This is a paragraph </p>
Here are some examples of self-closing tags
<br> or <br />
<hr> or <hr/>
HTML Attributes
HTML elements can have attributes. These attributes will provide additional information for the HTML elements. attributes are always specified in the start tag. Attribute comes in name/value pairs like :
attributeName = “atrributeValue”
some example HTML elements with attributes:
<img src=”img_girl.jpg” alt=”Girl with a jacket”>
<p style=”color:red;”>This is a red paragraph.</p>
<a href=”wijegoonawardana.com">Visit our HTML tutorial</a>
HTML Headings
HTML heading tags can be used to display title or subtitles of your webpage. HTML heading tag consists of six different variations from “<h1>” to “<h6>”. Each heading tag is a different form of size. Please check out the below figure for the code examples :
HTML heading elements have some default styling added by the browse itself like font size & top-bottom margins.
Never use heading tag to make Big & Bold text for that HTML has some formatting tags we will discuss those in upcoming articles.
HTML Paragraphs
HTML “<p>” elements will use to define a paragraph text of the HTML document. HTML paragraphs will always start on a new line & and usually is a block of text. paragraph tags also have some default styling like top-bottom margins & default browser font styles.
Ok. so far we discuss some basic but important section of HTML. I will explain more things about HTML in an upcoming article. Stay tuned & stay safe.
