My first interaction with HTML code was scarring to see a different unknown language and my brain immediately warns me to skip and not to take any action as I'm not from a technical background.
I wanted to place a banner on my blog for which I have to copy and paste the HTML code, this simple step was like a huge task of conquering Mount Everest.
I hope you might be facing the same problem which I have gone through in my initial days of blogging.
I will try to explain to you the basics of HTML code in a simple way and I'm sure you will be in love with HTML code.
WHAT IS HTML CODE?
HTML code is the standard language of a web page, an abbreviation of "HyperText Markup Language" used to create an electronic document that is displayed on world wide web
HTML defines the structure of a web page by a series of elements informing browsers the way to display the contents.
HTML Elements are indicated in a document by HTML Tags in the angle bracket < >.
The extent of the element is indicated in the pair of the tag the start tag < > & the end tag < /> the text content of an element is placed between these two tags.
BASICS OF HTML CODE
All documents start declaring it as a document which is written only once on the top of any document.
<!DOCTYPE html>
Followed by start tag<html> to end tag < /html>
The meta information is in between start tag<head> to end tag < /head> All meta description code of the search engines is to be paste in between the <head> and < /head> which you see when you edit the theme in HTML format.
The content in between which is visible is in between the start tag <body> and end tag < /body>
The large heading element is <h1>
Sub heading element is <h2>
Minor heading element is <h3>
The headings are define from <h1> to <h6> tags
Paragraph element is <p>
Empty HTML element <br>have no content and doesn't have close tag.
Thus for any document, the HTML code will look as
<!DOCTYPE html>
<html>
<head>
<title> The Page Title < /title>
< /head>
<body>
<h1> The heading < /h1>
<p> My first paragraph < /p>
<br>
<p> My second paragraph < /p>
< /body>
< /html>
__________________________________________________________
ADDITIONAL INFORMATION
Additional information about an element is been provided by the attributes which are been specified in the start tag.
The following are some of the attributes
lang -- This attribute is used to tell the language of your document
which is important for screen reader and search engines
Example
------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en-us">
<body>
...
< /body>
< /html>
----------------------------------------------------------------------
href-- use to provide the link address.
HTML links are defined with <a> tag
Example
<a href="https://mastpaisa.blogspot.com"> this is a link of my website < /a>
src-- use to provide the link of source of an image. The source may be any photo-sharing platform like Google Photos, Google Document, Google Drive, Facebook...
HTML images are defined with <img> tag
Example
<img src="Link of the image address">
width and height -- use for the size of an image.
Example
<img src = "link of the image address" width ="500ps"; height ="300ps">
alt-- use to define the alt text of the image, this text is visible when the image is not loaded properly maybe because of less internet speed.
Example
<img src="link of the image address" alt="text describing the image" width="500ps";height="300ps">
Using the above you can design a banner/advertising image of your choice.
Click here to know more
style -- This attribute is to define the style of the text i.e the colour, font, size of the text
To use a background colour it is represented as "background-colour: white"
Text colour is mention as "color:black/blue/red..."
Font style is written as "font-family: Verdana/ariel/Georgia..."
Size of the text is written as "font-size:large/small/x-large..."
To give alignment to a text it is to write as "text-align: left/centre/right"
Example
-------------------------------------------------------------------------
<h1 style="text-align:left:color:blue;font-size:x-large;font-family:verdana"> this is a h1 x-large heading in blue colour,written in verdana font< /h1>
<p style="color:black;font-size:medium;font-family:courier">this is for a paragraph in courier font of medium size in black colour< /p>
---------------------------------------------------------------------------
title -- This attribute is added to a paragraph with a tittle
Example
<p title="Explaining HTML">
This is a title of the paragraph
< /p>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
SUM UP
I have tried my level best to tell you the basics and make you familiar to HTML code in a simple way.
How do you like it?
Please share the post for making our fellow bloggers understand the basic knowledge of HTML code
2 Comments
Thanks for this breakdown. I took a Java coding class in college and nearly failed so when I see the html coding on my WordPress site I start to panic, especially if for some reason I have to mess with it. This makes it a little more translatable.
ReplyDeleteYou are Welcome
DeleteI'm happy for making it more translatable for you.
Thank you