HTML Tutorials 102 – Web Development

Hello!! Everyone, I hope you are doing great. We are already cover a few parts of basic HTML tutorials in the previous article. Now we are moving forward.

If you are missed the previews part of this tutorial, then please check out the previous article on HTML Tutorials 101and Web Development.

HTML Links

The Links are specified using the <a> tag in HTML.

A link or hyperlink, it could be a word group of words or image.

Syntax:

<a href="url">text</a>

Any text between the opening  of <a> tag and the closing </a> tag becomes the part of the link that the user sees and clicks in a browser.

For example:

<a href="https://www.technicalblog.in/">Technicalblog</a>

The href the attribute specifies the target of the link. Its value can be an absolute or relative URL.

Setting the Targets for Links

The target attribute in HTML tells the browser where to open the linked document.

There are four types of targets, and they always start with an underscore(_). The target attribute can have one of the following values:

  • _blank — opens the linked document in a new window or tab.
  • _parent — opens the linked document in the parent window.
  • _self — opens the linked document in the same window or tab as the source document. This is the default; So, it is not necessary to explicitly specify this value.
  • _top — it opens the linked document in the full browser window.

For example:

<a href="/about-us.php" target="_top">About Us</a> <a href="https://www.google.com/" target="_blank">Google</a> <a href="images/sky.jpg" target="_parent"> <img src="sky-thumb.jpg" alt="Cloudy Sky"> </a>

Some others Links:

Button as a Link

For using an HTML button as a link, firstly, you have to add some JavaScript code.

JavaScript allows us to specify what happens at certain events, such as a click of a button.

For example:

<button onclick="document.location = 'default.asp'">HTML Tutorial</button>

HTML Links – Image as a Link

It is very common way to use images as links:

As for example:

<a href="default.asp">
  <img src="tech.gif" alt="HTML tutorial" style="width:45px;height:45px;border:0;">
</a>

Creating Bookmark Anchors

You can create bookmark anchors to allow users to jump to a specific section of a web page. Bookmarks are especially helpful if you have a very long web page.

For example:

<a href="#sectionA">Jump to Section A</a> <h2 id="sectionA">Section A</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

HTML Text Formatting

html tutorials

HTML provides multiple tags that you can use to make some text on your web pages to appear differently than standard text.

  • <b> – Bold text
  • <strong> – Important text
  • <i> – Italic text
  • <em> – Emphasized text
  • <mark> – Marked text
  • <small> – Small text
  • <del> – Deleted text
  • <ins> – Inserted text
  • <sub> – Subscript text
  • <sup> – Superscript text

Difference between <strong> and <b> tag

Both <strong> and <b> tags contribute the enclosed text in a bold typeface by default, but the <strong> tag symbolizes that its contents have substantial importance; on the other hand <b> tag is simply used to draw the reader’s concentration without sending any particular significance.

Difference between <em> and <i> tag

Similarly, both <em> and <i> tags provide the embedded text in italic type by default, but the <em> the tag indicates that its contents have stressed emphasis compared to the surrounding text. On the other hand <i> tag is used for marking up text that is set off from the normal text for readability reasons.

HTML Styles

The HTML is quite finite when it comes to the presentation of a web page. But with CSS, it is elementary to use. We will discuss the styling briefly in CSS. Now we are only learning style syntax and how it works in HTML.

<tagname style="property:value;">

The property is a CSS property. The value is a CSS value.

For example:

The CSS color property defines the text color for an HTML element:

<h1 style="color:green">This is a green heading</h1>
<p style="color:red;">The paragraph color is red.</p>

HTML Images

Inserting Images into Web Pages

The <img> tag uses to insert images in the HTML documents. It is an empty element and also contains attributes only. The syntax of the <img> tag can be given with:

<img src="url" alt="some_text">

Setting the Width and Height of an Image

We can set the width and height of the image based on your requirement using width and height attributes.

For example:

<img src="kites.jpg" alt="Flying Kites" width="300" height="300"> <img src="sky.jpg" alt="Cloudy Sky" width="250" height="150"> <img src="balloons.jpg" alt="Balloons" width="200" height="200">

Using the HTML5 Picture Element

HTML5 has introduced the <picture> tag that allows us to define the multiple versions of an image to target different types of devices.

The <picture> element contains zero or more <source> elements and each referring to the different image sources, and one <img> element at the end. Also, each <source> element has the media the attribute which specifies a media condition (likewise to the media query) that is used by the browser to determine when a particular source should be used. Let’s consider as an example:

<picture> <source media="(min-width: 1000px)" srcset="logo-large.png"> <source media="(max-width: 500px)" srcset="logo-small.png"><img src="logo-default.png" alt="My logo"> </picture>

HTML Tables

Creating Tables in HTML

The HTML table allows us to arrange data into rows and columns. They are commonly used to display tabular data like product listings, customer details, financial reports, and so on.

An HTML table defines with the <table> tag.

Each row of the table is defined with the <tr> tag. A header is defined with the <th> tag. By default, the table headings are bold and centered. A data/cell of the table is defined with the <td> tag.

For example:

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
html tutorials

HTML Lists

There are three different types of list in HTML and each one has a specific purpose and meaning.

  • Unordered list — used to create a list of related items and in no particular order.
  • Ordered list — used to create a list of related items and in a specific order.
  • Description list — used to create a list of terms and their descriptions.

HTML Unordered Lists

An unordered list is a group of related items that have no particular order or sequence. An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. HTML Unordered List or Bulleted List displays elements in a bulleted format.

<ul> <li>Coffee</li> <li>Tea</li> </ul>
html tutorials

HTML Ordered Lists

An ordered list created using the <ol> element, and each list item starts with the <li> element. Ordered lists are used mostly when the order of the list’s items is important.

For example:

<ol> <li>Fasten your seatbelt</li> <li>Starts the car's engine</li> <li>Look around and go</li> </ol>

HTML Description Lists

The HTML description List or Definition List displays elements in definition form like in dictionary. The <dl> element is used in conjunction with the <dt> element which specify a term, and the <dd> element which specify the term’s definition.

<dl> <dt>Bread</dt>  <dd>A baked food made of flour.</dd> <dt>Coffee</dt>  <dd>A drink made from roasted coffee beans.</dd> </dl>
html tutorials
Output of the above mentioned code.

HTML Layout


Websites often display content in multiple columns (like as a magazine or newspaper).

HTML offers several semantic elements that define the different parts of a web page:

  • <header> – a header for a document or a section
  • <nav> – a container for navigation links
  • <section> – a section in a document
  • <article> – an independent self-contained article
  • <aside> – content aside from the content (like a sidebar)
  • <footer> – a footer for a document or a section
  • <details> – refers additional details
  • <summary> – Defines a heading for the <details> element

A simple Layout example for beginner:

<!DOCTYPE html> 
<html> 
<head> 
             <title>This is Page Layout</title> 
	<style> 
		.head1 { 
			font-size:50px; 
			color:#009900; 
			font-weight:bold; 
		} 
		.head2 { 
			font-size:18px; 
			margin-left:11px; 
			margin-bottom:15px; 
		} 
		body { 
			margin: 0 auto; 
			background-position:center; 
			background-size: contain; 
		} 
                         .menu { 
			position: sticky; 
			top: 0; 
			background-color: #009900; 
			padding:10px 0px 10px 0px; 
			color:white; 
			margin: 0 auto; 
			overflow: hidden; 
		} 
		.menu a { 
			float: left; 
			color: white; 
			text-align: center; 
			padding: 14px 16px; 
			text-decoration: none; 
			font-size: 20px; 
		} 
		.menu-log { 
			right: auto; 
			float: right; 
		} 
		footer { 
			width: 100%; 
			bottom: 0px; 
			background-color: #000; 
			color: #fff; 
			position: absolute; 
			padding-top:20px; 
			padding-bottom:50px; 
			text-align:center; 
			font-size:30px; 
			font-weight:bold; 
		} 
		.body_sec { 
			margin-left:20px; 
		} 
	</style> 
</head> 
<body> 
	<header> 
		<div class="head1">Technicalblog</div> 
		<div class="head2">This is a computer science portal for technicalblog</div> 
	</header>
	<div class="menu"> 
		<a href="#home">HOME</a> 
		<a href="#news">NEWS</a> 
		<a href="#notification">NOTIFICATIONS</a> 
		<div class="menu-log"> 
			<a href="#login">LOGIN</a> 
		</div> 
             </div> 
	<!-- Body section -->
	<div class = "body_sec"> 
		<section id="Content"> 
			<h3>Content section</h3> 
		</section> 
	</div> 
	<!-- Footer Section -->
	<footer>Footer Section</footer> 
</body> 
</html>	
html tutorials
OUTPUT of above code

In this article, we are completed our Basic part of the HTML Tutorial, and now, we will move to our Advanced part of the HTML Tutorial.

For any doubt feel free to comment.

html tutorials, html tutorials, html tutorials

35 thoughts on “HTML Tutorials 102 – Web Development

  1. We stumbled over here from a different page and
    thought I should check things out. I like what I see so now
    i am following you. Look forward to looking at your web page yet again.

  2. I’m pretty pleased to uncover this page. I need to to thank you for ones time
    just for this wonderful read!! I definitely appreciated every part of it and I have you saved to fav to check out new
    information in your website.

  3. Admiring the commitment you put into your site and detailed information you present.
    It’s great to come across a blog every once in a while that isn’t the same old rehashed material.
    Wonderful read! I’ve saved your site and I’m including your RSS feeds to my Google account.

  4. Attractive portion of content. I just stumbled upon your web site and in accession capital to assert
    that I acquire actually loved account your blog posts.
    Anyway I’ll be subscribing to your feeds or even I fulfillment you get admission to constantly quickly.

  5. Hello there! I could have sworn I’ve visited your blog before but after browsing through many of the articles I realized it’s new to me.

    Regardless, I’m definitely pleased I came across it
    and I’ll be bookmarking it and checking back often!

  6. Thanks for one’s marvelous posting! I definitely enjoyed reading it, you may be a great author.I will make sure to bookmark
    your blog and will often come back down the road.
    I want to encourage yourself to continue
    your great work, have a nice weekend!

  7. Woah! I’m really loving the template/theme of this blog.
    It’s simple, yet effective. A lot of times it’s very hard to get that “perfect balance” between superb usability and visual appeal.
    I must say you have done a very good job with this.
    Also, the blog loads very fast for me on Opera. Excellent Blog!

    Zwitserland Uit Shirt

  8. Thanks for the marvelous posting! I truly enjoyed
    reading it, you will be a great author.I will ensure that I bookmark your blog and
    will come back very soon. I want to encourage continue your great
    work, have a nice holiday weekend!

  9. I have learn some just right stuff here. Definitely worth bookmarking for revisiting.
    I surprise how so much attempt you place to create the sort of
    excellent informative web site.

  10. Hmm is anyone else having problems with the pictures on this blog loading?

    I’m trying to determine if its a problem on my end or if it’s the blog.
    Any feedback would be greatly appreciated.

  11. Hello! I could have sworn I’ve been to this
    website before but after reading through some of the post I realized it’s new to me.
    Anyhow, I’m definitely happy I found it and I’ll be bookmarking and checking
    back frequently!

  12. Pretty nice post. I just stumbled upon your blog and wanted
    to say that I have really loved surfing around your weblog posts.
    In any case I will be subscribing for your
    rss feed and I am hoping you write once more very soon!

  13. Hi! This is my first comment here so I just wanted to
    give a quick shout out and tell you I really enjoy reading through your
    articles. Can you suggest any other blogs/websites/forums that deal with the same topics?
    Many thanks!

  14. Greetings! This is my 1st comment here so I just wanted to give a quick shout out and tell you I really
    enjoy reading your posts. Can you suggest any other blogs/websites/forums that go over the same subjects?

    Appreciate it!

  15. Have you ever thought about adding a little bit more than just your articles? I mean, what you say is valuable and all.
    However imagine if you added some great pictures or videos to give your posts more, “pop”! Your content is excellent but with pics and videos, this website could undeniably be one of the best in its field. Excellent blog!

  16. Keep up the fantastic piece of work, I read few content on this website and I believe that your site is very interesting and holds bands of good information.

  17. Superb site you have here but I was wanting to know if
    you knew of any forums that cover the same topics talked about here?
    I’d really like to be a part of online community where I can get feed-back from other knowledgeable individuals that share the same interest.
    If you have any recommendations, please let me know.
    Cheers! jalkapallo pelipaidat

  18. Good post. I learn something new and challenging on blogs
    I stumbleupon on a daily basis. It will always be helpful to read articles from other authors and use something from their websites.

Leave a Reply

Your email address will not be published. Required fields are marked *