Adding Images And Links To HTML Document

In this post we will see how to add images and links to our existing HTML document. This is very simple but i’ll try to show you more details about the same.

To add any image or link you will need Attributes. A Attribute in HTML is something which gives more information about a particular tag. So image tag (img) can have a attribute (src) which gives information about the location of image. Also anchor tag (a) which is basically a link, can have attribute (href) which gives information about destination web page.

Directory

Before we start to add Images or Links, I’ll create some set of folders in C drive. The directory and contents of these folders are displayed in the image given below.

directory

NOTE – We are inside the main directory and we are working on the document MAIN.html. All the codes given below in this post will be added only to MAIN.html.

Adding Image In HTML

You can add images using the image tag given below. Note that image tag has no closing tag but there’s a forward slash at the end of the tag. Also you can see the tag has SRC attribute which basically means SOURCE. We have to specify the source of image file.

We are currently in MAIN folderMAIN.html directory. We can display A.JPG, B.JPG, C.JPG and D.JPG image using the code given below. Also at the very end, i have displayed an image from the web.

Note that – To add a image from the web, we have used HTTP protocol. If we remove the HTTP part, the browser will search for the image inside the same folder in which the current HTML document is present. Also we have used forward slash instead of backward slash for fetching the source from the web.

Title Attribute For Image Tag

Did you notice that D.JPG is not present and thus the image will not be displayed. We can add title attribute to describe the image. So even if the image doesn’t show up, user can move the cursor over the image area and a title will be displayed.

html title

Adding Text Links In HTML

Similarly we can add Links in HTML. The only differences are – we have a tag and href attribute instead of img and src. And a tag has closing tag.  We can enclose any text or image between opening anchor tag and closing anchor tag and it will turn into a link.

I have added paragraph tags here because i want to links to appear on different lines and not on one single line.

Creating Image Links

Once you know how to add images and links to HTML document, you can easily create a image link. To do so, we will insert image between opening anchor tag and closing anchor tag.

I’ll add A.JPG, B.JPG and C.JPG and link them to X.HTML, Y.HTML and Z.HTML respectively. So when i click on A.JPG, the browser will open X.HTML web page.

Source Code

I have uploaded the files required for this post in zip format on dropbox. Just download the file and extract it in your C drive. You can then open main.HTML in web browser. Also you can play around with the code if you want to.

Download Link – Dropbox

Thanks for reading and do subscribe to blog feed for more amazing posts. You can find the subscription box below.

The Basics Of HTML Language

In this post, i’ll try to cover up all the basics of HTML (Hyper Text Markup Language). Markup word itself means that there are certain set of symbols and rules.

There are tags in html. Almost all tags come in pairs (opening tag and closing tag) but there are some exceptions. Lets get started by creating a simple HTML document.

Creating simple HTML document

To create an HTML file or document, all you need is NOTEPAD. You don’t need any complex tools for HTML. But i’ll highly recommend you to use notepad++ for coding.

  1. Open Notepad file
  2. Type in some text like – Hello World
  3. File > Save as > Save as type – All Files
  4. Enter file name as helloworld.html
  5. Click save. (preferably save it on desktop)

HTML Hello WorldOpen helloworld.html in web browser and you’ll see Hello World in the website content. But you can also see the title says helloworld.html. But i want it to show up Learning HTML. So lets add title.

Adding title to HTML document

  1. Open the helloworld.html in notepad++
  2. Add <title> Learning HTML </title> above the text Hello World inside this document
  3. Save the file and Open it in web browser.

title htmlYou can now see Learning HTML in the title bar. We created simple HTML document but lets dress it up with rules.

Dressing it up

We will just add more stuff like opening and closing HTML tags at the top and bottom to represent that its an HTML document. All the page content and rest of the tags will go between opening <html> tag and closing </html> tag.

HTML document is basically divided into two parts – the Header and the Body. So we will add head and body tags just like we added HTML tags. And title tag always goes inside header part, so it comes between head tags. Check below.

Formatting Basics

You can format the text into bold, italic, underlined, strikeout, etc. Copy paste the code below in your helloworld.html, save it and open it in the browser to see how it works.

Formatting in HTML

What you can notice in the screenshot above is that i have written text on two different lines but still the browser shows the entire text on one single line. Why does that happen?

Paragraph tags in HTML

This happens because we didn’t tell the browser that these are two different paragraphs. To represent these lines as two separate paragraphs, we will need to enclose the text in paragraph tags as shown below.

Paragraph tags in html

Headings in HTML

You can add headings to the paragraphs in HTML. There are SIX types of headings in HTML (from h1 to h6). To test heading tags, try to code given below.

headings in html

That’s all in this post. I hope this helps. We will see more about HTML images, links, etc in the next post. Thanks for reading and do subscribe to blog feed for more amazing posts. You can find the subscription box below.

Zoom In And Out Of Websites Quickly In Google Chrome

This post is a short tip on how to Zoom in and out of websites quickly in Google Chrome. This must work on almost every other browser like Internet explorer or Mozilla Firefox.

Lets say you brought a new high resolution big screen monitor. And now all these websites appear so tiny and the text is very difficult to read. But don’t worry, you can zoom in and out using the keyboard shortcuts.

These keyboard shortcuts will be very useful for day to day tasks and make your browsing experience easy.

  1. For zooming in the website just hit Control and + (plus) key on the keyboard.
  2. For zooming out, hit Control and – (minus) key on the keyboard.
  3. To reset zoom back to normal, just hit Control and 0 (zero) key on the keyboard.

Note that, you can also zoom in and out by holding the CTRL key and using the mouse scroll.

I hope this is helpful. Thanks for reading and do subscribe to blog feed for more amazing posts. You can find the subscription box below.