Home » Archives for March 2015
Till Now we have learned some of the simple tags of HTML. Now it's time for creating hyper texts i.e. hyperlink in our HTML document.
What is HYPERLINK
Hyperlink is a reference to data that reader can directly follow by clicking or by hovering. In simple words it refers to another webpage having some information.
HyperText
Hypertext is text which contains link to other texts.
"Technosians"
Above we have the example of hyper text and by clicking on it you will redirected to the Technosians home page.
How To Create Hypertext
To create a hypertext you have to use <a> tag
<a> tag alone cannot be used. We have to use href attribute.
<a href="website url here"> Website Name</a>
Try this example
create an HTML document
<html>
<head>
<title> Testing Hypertext </title>
</head>
<body>
<h1> Hypertext</h1>
<p> Hello Today I will Learn Hypelinking.
<a href="http://www.technosians.com">Technosians</a>
</p>
</body>
</html>
Now I have got A Hypertext in my webpage and when I will hover mouse over
that text mouse will convert into a hand and my website name will be clickable.
How To make your Hyperlink open in Next tab
After creating a hypertext you will not want to move your audience from your main webpage.
For this you have to create hypertext having capability of opening hyperlink to a next tab.
To do this you just have to add "target" attribute to your <a> tag
<a href="website URL" target="next"> Website Name</a>
Now try this in your html document.
Adding Images To Your Webpage
Till Now We have boaring webpages having only text. Now to make your webpage alive you have to add some images.
For Adding images we use <img> tag
Now <img> tag needs information i.e. from where it will display image.
To accompany this we use "src" attribute
<img src="url or location where image lies.">
And One important thing is that <img> tag doesn't have a closing tag.
Add the below information to your html document.
<img src="https://www.google.co.in/images/srpr/logo11w.png">
This will add Google Image on your webpage.
Addding Alt Attribute to Img tag
You have a high speed internet connection. But your website visitors may not have. So in that case they must know about the image
which is not displayed to them.
To add more information we use alt attribute with our img tag.
<img src="https://www.google.co.in/images/srpr/logo11w.png" alt="Google">
Now update your webpage right now.
Making your Image As a Hyperlink
Hyperlinking is an easy task in HTML. You can make your image clickable.
To make your image as a hyperlink use img tag inside <a> tag
<a href="www.google.com" target="next"><img src="https://www.google.co.in/images/srpr/logo11w.png" alt="Google">
Now try this code now in your html document.
I hope you had learned how to use img element and hyperlink creation.
If you have more information reagarding to this topic then please comment here
We are already Introduced to HTML
So Now We want out own official Webpage in Webworld.
We are creating our first webpage i.e. "About Techno Geek"
So let's start creating our Webpage Now
The html is mainly focused in building Structure. For decorating We have CSS. We will learn it after HTML.
First Recall The basic format Again
<html>
<head>
<title> Techno Geek </title>
</head>
<body>
The Body Area consists of The content which has to be displayed on The Webpage
</body>
</html>
Let have a Look At our Webpage
Ok can you guess the ingredients of above webpage?
So we have A heading , A paragraph , A Subheading and a list.
It's interview time now
Welcome Heroes. You made our webpage complete.
<h1> <p> <h2> and <li> : Thanks for inviting and yes we do !
So what are you called inside The HTML
<h1> : We all are called tags.
Oh as like <title> and other who we have met at introduction.
<h1>: Yes
I am eager about your work and location inside HTML.
<h1>: Ok. I am the Heading Tag and I makes the Text as Heading. And I lies Inside the Body Tag and also I have closing tag too
</h1>
<p>: Hi I am Paragraph Tag and I am used to make a paragraph inside the HTML. and I also have a closing tag </p>.
<h2> : Hi ! I am a Subheading Tag and I used to create a subheadings and I am used mostly at webpage.
<li> : Hi ! M...
just wait a minute <li>. I have a question for <h2>.
<h2> are you related to <h1>
<h2> : Yes I am I am his brother and we are 6 brothers and our smallest brother is <h6>. We have our own work but generally our small brother is too small that he is not used generally.
Ok Now it's your turn <li> . Please explain about yourself
<li>: My full name is List Item and I am called when there is need of List in HTML. I also have two Partners.
OMG!! Who are those. I have not seen them at our HTML.
<li>: Yea they were not there at your file. But let me introduce them.
<li>: Here they are <ul> and <ol>
Hello guys ! I am amazed that we have more guest too. Please tell us about yourselves.
<ul>: I am used when unordered list is required like there is in your new website.
But You were not there at my website.
<li> : Default unordered list is applied.
<ol> : And ordered list i.e. me places your list items in order. Default there is numerical counting.
<ol> <ul>: We are used befor the <li> and list items are displayed according to us.
<h1>: Ok we have to go. We are needed in HTML.
Thanks for this interview tags and I also have to publish this interview in Techno Geek's blog.
So the interview was amazing but there was something missed.
The <ul> and <ol> tags did not mentioned their place correctly so they emailed me their location
Hey techno Geek we are placed in this way
<ul>
<li> your text here</li>
</ul>
and for ordered list
<ol>
<li> your text here</li>
</ol>
or you can add attribute like
<ol type="A">
<li> your content here</li>
</ol>
Now you may be thinking Attribute what is that ?
So for the customization of tags we use attribute. Like above the attribute is type="A"
Now We have our Techno Geek's About page ready.
And it's your Experiment time Now To create your webpage. And in case you had forgot Then check Introduction To HTML.
And If you are having any suggestions Then please do not forget to mention in comments.
Do you surf the Web?
daily ? or weekly?
Do you know How a website is built?
If not then you are landed at the correct webpage.
Now within a couple of minutes you will know how websites are built.
What is a Website
As the name suggest "Web" that is a web not the spider's web
but a group or various networks connected together.
And "Site" In real word it refers to place and in web-world
it also refers to virtual area having webpages.
A webpage is just a page that provides information with the help of images text or animations.
And the best example you knows it already.
Like Google and Facebook Which you use to surf with your browser.
Now you already know that a browser is an application software which is use to surf the websites.
Now let's move on the cool thing.
How a Webpage is Built
A webpage is basically built using HTML. There are other scripting languages too which are used to make a webpage interactive but
as starting with basic here I will focus on HTML.
So What's HTML stand's for?
HTML stands for Hyper Text Markup Language
Basically It's name says that HTML is a language which focus on Structure having Links to another webpages.
In detail The HTML Says
As your name has some meaning My name also
Hyper Text- It stands for the Text which is clicable and can take you to another webpage.
Markup - I am all about the structure. HTML use me to create Structure.
So what's The structure Now?
As Like our body has a structure. We have head and body.
Like that a webpage also have
so basically there are 2 parts of HTML Head and Body.
As Head is an essential part of our body and we have a brain in It which knows everything about our body like that HTML
Head is a part of webpage which knows all about the webpage like it's title , and other information regarding to the webpage decoration and other effects.
And Body is the part where Information is feed which is to be displayed by the browser.
And all the part head and body are inside the HTML .
So let's create your first webpage.
To create an HTML page first you need a computer; You already have! then a notepad or a text editor. Then you are ready to create an HTML webpage
So here's your first Webpage
type the following code to your text editor
<html>
<head>
<title> MY First Webpage </title>
</head>
<body>
Hello Word I am having My first Webpage here. It's so easy and interesting.
</body>
</html>
and then save it as "My first webpage.HTML"
Now are you thinking What is This above thing and what it mean.
The Whole HTML works on tags <html> these things inside the angle brackets <> are tags each tag mean a specific thing to browser.
That means The file that you saved as My First Webpage.html is understood by the browser.
The browser reads the instruction inside and interprets them and display it according to them.
As above I had told you that there is a head and body inside the HTML so we began with
<html> tag
After that Head comes <head> and you know every information is inside the head as told earlier so The title of the webpage will
lie inside the head with <title> tag.
What is than </title> there.
Every tag that is opened needs to be closed in HTML followed by slash / so that browser can understand that it's the end and will display
the thing which will be there between opening and closing tag.
Similarly head is closed</head>
And after that body is started With <body> tag and inside it We typed the message which will be displayed by the browser.
and at last we close the </body> and then </html>
So As I told that the whole HTML is the world of tags and each tag provides a specific meaning to the browser.
So tomorrow Some more Important Tags will roll In.
Till then Experiment With these simple codes. This was the only introduction.
The real thing will come up In the next post.
If you have any suggestions regarding to simply more about HTML then please comment here. I will be very happy to update it for my readers.
After 3 or 4 days of depression. I am back here and today I am again with you.
I think This blog is going to starve as the writer is discontinuous here due to out of ideas and sources.
As this is a blog so verified information is required as people reads and gain.
For me this blog is just a test ground and will be passively alive.
I thought that i must again start with a new angle a new website having all my design my code and with a custom domain.
So for that I must have some knowledge of scripting.
From now on I will have some Hyper Text here posted here.
Currently I am learning from a Book and I have an idea of posting all the stuff which i learn in my own way.
May be if there are some of guys who reads this blog daily or may be weekly as it is not updated daily so form now on We all will have HTML5 lessons here with me.
It might be possible people already had knowledge of HTML but still there are always starter alive.
Everyone want to learn as it helps in growing.
As I am learning HTML/CSS so the next there will be a whole series of HTML/CSS. And as a test ground I will also create a dummy website at blogger to understand how the blogger will work with my website .
How it will link with my design and many more.
A lot of things to learn.
As I know the world wants something new. There are many old things that people already know.
So may be that's why I am getting minimum traffic. But that's all right. As I lack resources like fast internet.
Fast Internet is essential thing for a blogger as blogger has to read other bloggers blogs to learn more
Also I am connected with some of bloggers Like Rohan bro active at Learning With TeamSR, Sashidhar bro founder of Amfas Tech and Rahul bro having Spellbound Words. Those are amazing guys and they have amazing website and amazing work.
As they are passionate about their work. But I want my self as a code lover who loves coding. I want to become an awesome programmer.
Currently I am not a programmer but I think If I follow this inner feeling then soon one day I will become some serious programmer. Who stick to his computer whole night and always come up with new and awesome cool things.
I love money But the thing I know is that I can't chase money as it is tough. And I had failed many time doing that.
The thing I understood is that there is something that "Money" chases.
That thing is "Passion". People having a passion for something are always rich as their work is their passion which they love doing day and night and money always Rolls in.
So my search for passion is continued and I hope I can and I will have that work .
Till then We all have HTML 5.
I hope I will get here some suggestion form the readers.
