PHP Programming For Beginners

Monday 22 September 2014

Lecture 7: HTML Layout using table and div tags.

Lecture 7

HTML Advance Tags –

Today we will learn HTML Layout.

HTML Layout: You generally seen that all websites shows there contents in different columns, they do this with the help of HTML layout. It is generally done to give better look to the website.

Example:

Methods of Layouts:

1. Layout using table tag: The easiest and most useful way to create layout in html is by using HTML Tables. As tables are made up of rows and columns, you can easily use these rows and columns by the way you like.

Example:

2 2 Layout using div tag: The div element is a block level element. It is used for grouping other html elements. The <div element is often used as a layout tool, as it can be positioned with CSS.

Example:

Note: In Next lecture, we will start with CSS (Cascading Style Sheet).

Friday 12 September 2014

HTML FORMS

Lecture 6

HTML Advance Tags –

Today we will learn HMTL Form and their different elements.

HTML Form: In HTML, forms are the best method used to get user input. HTML form take information from user or web surfer, like name, password, email address, address, phone number etc. We use different html elements to take these inputs from user like – text fields, checkboxes, radio buttons, list boxes, submit buttons etc.

<form> tag and its attribute :Basically, HTML forms are used take user entered text and pass this text to the server for further processing. <form> tag is placed inside body tag, like

Attribute of <form> tag: There are 2 basic attributes of <form> tag –

Example :

Form content

</form>

Input Elements of HMTL Form: Following are some input elements used to take user input –

1 Text Boxes: Textboxes are used to take one-line user input.

2 Password field: It is used to take user password.

3 Radio Field: It lets user to select only one out of many choices.

4 Checkboxes: It lets user to select zero or more numbers of choices.

5 Button Field: Button is normally used to send form data to the server. This data is sent to the specified page defined in the form’s action attribute.

Example: Code

Output

Note: In Next lecture, we will learn about HTML Layout with <table> and <div> tags.

Thursday 11 September 2014

HTML Frames

Lecture 5

HTML Advance Tags –

Today we will learn about HTML Frames tag.

HTML Frame: HTML frames are used to divide or split browser window in several individual frames or parts that can contain a separate HTML document.

Advantages of Frames:

It improves usability and appearance of a Webpage.
We can open a webpage in desired frames without opening new window in web browser.
It reduces downloading time.

For using frames in HTML document, we take help of following two tags-

<frame set> tag – <body> tag is replaced by <frameset> tag to use concept of frames. Or <body> tag is not used in any HTML webpage that contains <frameset> tag.

Attributes of <frameset> tag:

2. <frame> tag :Frame tag is used to add HTML document into the frameset.

Attributes of <frame> tag:

Example:

Explanation: In this example we use <frameset> tag in place of <body> tag. We use frameset ’s rows attribute to divide browser window into two rows of 40% and 60%. Then we use two <frame> tags to put the html document into each row of frameset. In browser window, two rows showing nothing as we put ‘#’ in ‘src’ attribute. You can put any html documents name with extension (.html) to show in frameset in browser window, like <frame src=”name.html”>.

Types of Frameset: There are 3 types of frameset –

Row type frameset –

Explanation: In this, we use <frameset> tag in place of <body> tag. We use frameset’s rows attribute to divide browser window into two rows of 40% and 60%. Then we use two <frame> tags to put the html document into each row of frameset. In browser window, two rows showing nothing as we put ‘#’ in ‘src’ attribute. You can put any html documents name with extension (.html) to show in frameset in browser window, like <frame src=”name.html”>.

2. Column type frameset –

Explanation: In this, we use <frameset> tag in place of <body> tag. We use frameset’s cols attribute to divide browser window into two columns of 50% each. Then we use two <frame> tags to put the html document into each row of frameset. In browser window, two columns showing nothing as we put ‘#’ in ‘src’ attribute. You can put any html documents name with extension (.html) to show in frameset in browser window, like <frame src=”name.html”>.

3. 3. Mixed type frameset – which include both rows and columns.

Explanation: In this, we use <frameset> tag in place of <body> tag. We use frameset ’s rows attribute to divide browser window into two rows of 50% each. Then we use <frame> tags to put the html document into first row of frameset. In second row, we use <frameset> tag again to divide second row. In second <frameset> tag, we use ‘cols’ attribute to divide second row into two columns of 40% and 80%. In Browser window, all frames showing nothing as we put ‘#’ in ‘src’ attribute. You can put any html documents name with extension (.html) to show in frameset in browser window, like <frame src=”name.html”>.

Note: In Next lecture, we will learn HTML Form and their different elements.