আগামী ২৩ অক্টোবর -২০১৭ তারিখ থেকে শুরু হচ্ছে পাঁচ মাস ব্যাপী Professional Web Design and Development with HTML,CSS,Bootstrap,PHP,MySQl, AJAX and JQUERY কোর্সের ৮৬ তম ব্যাচ। আগ্রহীদেরকে অতিসত্বর মাসুদ আলম স্যার এর সাথে যোগাযোগ করতে অনুরোধ করা যাচ্ছে। স্যার এর মোবাইল: 01722817591, Email : [email protected] কোর্সের সিলেবাস এর জন্য এখানে ক্লিক করুন ।

HTML Intermediate Tutorial

Whereas the purpose of the HTML Beginner Tutorial was to teach the bare essentials, this guide adds a few nuts and bolts, which shouldn’t be particularly difficult as such, but will add a bit more to our understanding of HTML and enable us to do a few more things.

Span and Div

HTML is all about applying meaning to content. Whereas most HTML tags apply meaning (p makes a paragraph, h1 makes a heading etc.), the span and div tags apply no meaning at all, which might sound about as useful as a foam hammer, but they are actually used quite extensively in conjunction with CSS.

The difference between span and div is that a span element is in-line and usually used for a small chunk of in-line HTML whereas a div (division) element is block-line (which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code.

<div id="scissors">
<p>This is <span>crazy</span></p>
</div>

div and especially span shouldn’t actually be used that often. Whenever there is a sensible alternative that should be used instead.

For example, if you want to emphasize the word ‘crazy’ and the class ‘paper’ is bold, then the code might look like this:

<div id="scissors">
<p>This is <strong>crazy</strong></p>
</div>

If you haven’t got a clue about classes and ID’s yet, don’t worry, they’re all explained in the CSS Intermediate Tutorial.

All you need to remember is that span and div are ‘meaningless’ tags.

Meta Tags

Once upon a time, many eons ago when the Internet was just a small number of cardboard boxes attached to each other with string, meta tags were the town criers of the internet… erm… town.

Meta tags don’t do anything to the content that is presented in the browser window, but they are used by the likes of search engines to catalogue information about the web page.

There is one meta tag which can be used as many times as you desire and can contain the attributes content (required), http-equiv and name.

The content attribute is the meta data itself, which is linked to the name or http-equiv attribute.

The name attribute can be anything you like.

Commonly used names include author, keywords and description. description meta data is often used by search engines (such as Google) to display a description of a web page in its search results, and as such this is perhaps the most useful application of the meta tag.

The http-equiv attribute can be used instead of the name attribute and will make an HTTP header, which is information sent to the server where the web page is held.

The content attribute can be content-type, expires, refresh (how often the page automatically refreshes – very bad for accessibility), or set-cookie.

<html>

<head>

<title>Title</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="This is my bloody exciting web page about air conditioners" />

...

The reason why meta tags used to be so important was because they were relied on by search engines to build a profile of a web page.

The keywords meta data was used extensively for example.

Nowadays however, most search engines use the actual content of the page itself, rendering most meta data useless beyond conveying information to someone who is physically reading the HTML.

HTML Tables II

Tables may have seemed complicated enough in the HTML Beginner Tutorial. It can be quite difficult to visualise a two-dimensional grid from one-dimensional lines of code.

Well, it gets trickier. All thanks to the rowspan and colspan attributes. Those bastards.

<table border="1">
<tr>
<th>Column 1 heading</th>
<th>Column 2 heading</th>
<th>Column 3 heading</th>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td colspan="2">Row 2, cell 2, also spanning Row 2, cell 3</td>
</tr>
<tr>
<td rowspan="2">Row 3, cell 1, also spanning Row 4, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
<tr>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
</tr>
</table>

Firstly, we have replaced the td tags of the first row with th tags. Whereas a td is a standard data cell, th is a header cell. As with the td tag, these tags must be enclosed in tr tags.

We have also used colspan and rowspan attributes in some of the td tags. If you look at this code in a browser, you will see that on the second row there are now two cells instead of three, the second cell spanning the second and third column.

The colspan attribute, which means ‘column span’ will span the cell over the number of cells that is specified. This means, in this example, that there is no need for a third td tag – two cells are merged into one.

The self-descriptive rowspan attribute is similar to colspan, except, obviously, it will span across rows rather than columns. Again, the cells that it spans should be removed. In this example, because it spans over the fourth row, there is only two cells in that row.

As with the simpler 3×4, 12-cell table, the numbers on these tables with merged cells should also add up. Although there are only 10 cells in this example, there are 2 spans.

Definition Lists

The HTML Beginner Tutorial looked at unordered lists and ordered lists, but much like Peter Cushing’s Doctor Who, definition lists are quite often forgotten.

This is maybe because they are much more specific than ordered and unordered lists and therefore less useful, but where there is a list of terms and descriptions (such as a glossary), a definition list should be used.

The dl element gets the ball rolling, similar to the ul and ol elements, establishing the list. Rather than there being an li element though, definition lists have a dt element, which is the definition term, followed by a dd element which is a definition description associated to the dt element.

There doesn’t have to be one dt followed by one dd, there can be any number of either.

For example, if there are a number of words that have the same meaning, there might be a number of dt‘s followed by one dd. If you have one word that means various different things, there might be one dt followed by several dd‘s.

<h1>Some random glossary thing</h1>
<dl>
<dt>HTML</dt>
<dd>Abbreviation for HyperText Markup Language – a language used to make web pages.</dd>

<dt>Dog</dt>
<dd>Any carnivorous animal belonging to the family Canidae.</dd>
<dd>The domesticated sub-species of the family Canidae, Canis lupus familiaris.</dd>

<dt>Moo juice</dt>
<dt>Cat beer</dt>
<dt>Milk</dt>
<dd>A white liquid produced by cows and used for human consumption.</dd>
</dl>

Javascript

Javascript is a client-side scripting language that can work in conjunction with HTML and while this is not a Javascript guide, we can look at how HTML can use Javascript.

Javascript events can be used like attributes in HTML tags. An event is something that happens to that HTML element, such as when it is ‘clicked’ or when it loses focus.

<a href="#top" onclick="alert ('wow. Javascript.')">Click me</a>

The events that can be used are:

  •     onblur (used in form elements and executed when an element loses focus)
  •     onchange (used in form elements and executed when something is changed)
  •     onclick (executed when a mouse is clicked on an element)
  •     ondblclick (executed when a mouse is double-clicked on an element)
  •     onfocus (used in form elements and executed when an element gains focus)
  •     onkeydown (executed when a key is pressed down)
  •     onkeypress (executed when a key is pressed and released)
  •     onkeyup (executed when a key is released)
  •     onload (used in the body tag and executed when the page loads)
  •     onmousedown (executed when the button of a mouse is pressed down)
  •     onmousemove (executed when the mouse cursor moves on an element)
  •     onmouseout (executed when the mouse cursor moves away from an element)
  •     onmouseover (executed when mouse cursor moves over an element)
  •     onmouseup (executed when the button of a mouse is released)
  •     onreset (used in form elements and executed when a form is reset)
  •     onselect (used in form elements and executed when an element is selected)
  •     onsubmit (used in form elements and executed when a form is submitted)
  •     onunload (used in the body tag and executed when the user navigates away from the page)

Try not to get carried away with Javascript. It’s best uses tend to be small additions of functionality. There is a danger of seriously degrading the accessibility of a web page with Javascript, and many things that it can be used for can be replaced with server-side scripting languages such as PHP or ASP.


Hi, My name is Masud Alam, love to work with Open Source Technologies, living in Dhaka, Bangladesh. I graduated in 2009 with a bachelor's degree in Engineering from State University Of Bangladesh, I'm also a Certified Engineer on ZEND PHP 5.3, I served my first five years a number of leadership positions at Winux Soft Ltd, SSL Wireless Ltd, CIDA and MAX Group where I worked on ERP software and web development., but now i'm a co-founder and Chief Executive Officer and Managing Director of TechBeeo Software Consultancy Services Ltd. I'm also a Course Instructor of ZCPE PHP 7 Certification and professional web development course at w3programmers Training Institute - a leading Training Institute in the country.
3 comments on “HTML Intermediate Tutorial

Leave a Reply

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