HTML Beginners Tutorial: July 2018

Saturday, July 14, 2018

Create table using HTML

Today we are going to look at creating a table using HTML.

Its a quick and easy way for your users to understand the data you are displaying. Tables are made up with data that contain rows and columns.

Now there are four central elements to use when creating a table,

<table> everything is embedded inside of this.
<tr> which identifies it as a row.
<td> which contains the actual data.
<th> which identifies it as a column.

Let's go through all of these and know how to use it,

1) First create a table element <table> and then set up the column's using <tr> element.

2) Then create the columns using <th> tag. Put inside heading's of the column's.

Add caption

3) Create some data to put in those columns, again use table row tag <tr> and now we are going to use <td> tag to hold our data. Add some more data,

Table in HTML

Let's save this and open the web page and here you will notice that the columns heading are put in bold by HTML and the tables are not in bold.

Saturday, July 7, 2018

Adding Link to your web page

In this post, we are going to see how to add links in your web page.

Now, why to add links? the ans is what would your web page without links, well it wouldn't be much. Navigation is a key consideration in to design your website.

so we will begin with adding links to your webpage.

There are two ways to adding links,

Link to a section within your web page
Link to an outside web page

Now, first of all we will see second way, how to link to an outside URL.

Links are added with a anchor element ( <a ) and withing this element we use attribute called ( href ).
href attribute tells the anchor element where the destination is for the link and the destination can be like on the same web page or it can be link to an outside website.

And as we know everything comes under the <body> tag. Under this we have to create <p> paragraph tag, because we need to add some text and sentences inside and around your link.
This text is what you actually displayed to the user.

After this add anchor tag ( <a ), where we actually inserting outside URL path.
After putting href attribute, we are going to put in our outside URL that we want to link to in our web page.

After adding the link before closing the tag you have to put some text and that text becomes the link. So the link which we added does not actually get displayed, what will be displayed as a link is the text that we put after the link.

Let's close both the </a> and </p> tag, save this in HTML format.

Click on the link and you will see we have got our link,

& if i click on that link it should go to my blogger address.

technoostuff

Note:- We need to keep this tag ( <a ) open, we do not use angle bracket here because this is all part of link. Put angle bracket after the link and then close the tag.

Tuesday, July 3, 2018

Ordered & Unordered list in HTML

Hello Friends,

Today we are going to look at Unordered and Ordered lists.
Now lists are pretty much an everyday part of life, we constantly putting together lists. You think of buying a bike and you have to have list of accessories and functions you required in that bike. Similarly you can take example of recipe, for that also first you require list of ingredients, etc.

If you look at virtually, every web page they will always have some sort of list and whether that's menu or just a bullet lists.

Now HTML provides two main ways to do lists, Unordered and Ordered lists.

As we looked at in the previous lessons it's just a simple tag that we need to create.
An Unordered list is created with the <ul> tag and an ordered list is created with the <ol> tag.

In HTML, the Unorderd list is kind of default thing people use when they are designing websites.
Ordered lists are used to a lesser extent.

It is common to both Unorderd and Ordered lists is the <li> element tag.The li element is actually the list item embedded inside either the <ul> tag or the <ol> tag.

1) Unorderd List :-

Remember every thing goes within the body element, so lets go ahead and create <ul> tag.
Let's imagine we are creating menu for our website and we want to sell cloths of kids, men's & women's, so kids, men's & women's comes inside a <li> element.

Unordered list

Let's go ahead and save this as an HTML document and there you see we have got our nice list displayed.

Web page

2) Ordered list :-

It's very similar to the Unordered list, we just have to replace <ul> tag with the <ol> tag.

Ordered tag

Now lets go ahead and save this as an HTML file again.

Web page

There you see the the difference, this is why it called a ordered list because we have numbers there. That's the only difference, <ul> tag creates Bullets while <ol> tag creates numbers.

Note:- By using CSS you will style each one of these tags and creates a lot of different effects.

HTML Beginners Tutorial

SQL For Beginner