- Introduction to PHP
- Introduction to HTML
- HTML5 New Tags
- Style Sheet (CSS)
- Bootstrap (Responsive Design)
- PHP Language Building Blocks
- Conditional Statements
- Introducing ARRAY
- Manipulation User Input
- Reusing Code and Functions
- Object-Oriented PHP
- File System and the Server
- File Uploading & Downloading
- String Manipulation and Regular Expression
- State Management
- MySQL Database
- jQuery with Ajax
- Advance PHP Techniques
Introduction To HTML
HTML- stands for Hyper Text Markup Language used to create web pages. It is used to specify how a text and graphics will appear on a page.
HTML- consists of an element and tags.
HTML- HTML page is actually stored on the computer locally that is hosting a website and the page is sent to your browser.
HTML- it is saved with .html extension.
Structure of HTML
An HTML document can be optionally starts with an <!DOCTYPE> declaration. It is a good practise to use this declaration which is an instruction to the web browser in which version of HTML the page is written in. It is not case sensitive. It is declared before <html> tag and it does not require a closing tag.
An HTML document consists of two main parts:
1. head- It contains title of the web page.
2. Body- It contains content of the web page.
Now let us see the following illustration of HTML structure
<!DOCTYPE html> tells about version of HTML page
<title>title of the webpage…</title>
<head> tag contains information about the web. </head>
<body>content of the webpage…</body>
</html> tags shows starting and ending of a page.
Block Level and Inline Elements
An HTML document comprises of elements. An element in html consists of starting and ending end tag with some content in between. Elements can be divided into two levels in HTML.
- Block level elements starts with a new line.
- It appears in the body of the HTML page.
- It covers full width of the HTML page.
- It can contain other block level as well as inline level elements in it.
- It can go from one line to multiple lines and has a line break before and after an element.
Some examples of block level elements are- div <div> tag, ordered list <ol> tag, and unordered list <ul> tag etc.
- Inline level elements do not start with a new line.
- It also appears in the body of the HTML page.
- It do not covers full width of the HTML page.
- It cannot contain block level elements inside it.
- It do not have a line break.
Some examples of inline level elements are- anchor <a> tag, span <span> tag, and image <img> tag etc.
Attributes & Values
- The attributes and values complement each other.
- An HTML element can have attributes.
- Attributes are always mentioned with opening tag.
- Attributes provides additional information related to an element.
- Value always appear after attributes and placed inside (“”) inverted commas.
Following are some of the examples of attributes along with values
- The style Attribute- this attribute is used to specify color, font, size etc of an element. <p style=”color:black”>It is a textbook</p>
- The src Attribute- this attribute is used to specify location of an image. <img src=”image_abc.png” width= “450” height=”550”> In the above example there are size attribute too. Both width and height of an image depicts its size.
- The action Attribute- this attribute is used inside a form tag which tells a browser to send the form data to a form-handling PHP page etc.
An HTML Comments starts with
It is used to insert comment inside an HTML document.
HTML comments are visible to anyone that views its page source code but are not visible in a browser.
It is a good practice to use comment as they make your code easier to understand to other developer who views your page source code.
Types of Tags
An HTML structure in every HTML document consists of images, text, hyperlinks etc. All of these comes under different category of tags. HTML tags begin with a less than (<) character and end with a greater than (>) character.
Let us discuss some of the HTML tags below:
An <img> tag is used to display an image in an HTML page. The <img> tag comprises of two required attributes: src and alt. The src attribute provides the location of an image and alt attributes is used for an alternative text that is used to display in case there is no image. It tag does not contain any end tag.
Link Tags (Text & Image)
An <a> tag used to hyperlink a text or an image in an HTML document. An anchor tag allows you to hyperlink a page to another, you can also use an anchor tag in an image. An anchor tag has an end tag too. The most important attribute which is associated with an <a> tag is href which indicates to a link destination. Also, by default a visited hyperlink will appear in red color, unvisited hyperlink will appear as underline and blue color.
List Tag (Ordered & Unordered)
An HTML document consists of two types of list i.e., Ordered and Unordered list. An ordered list starts with the <ol> tag and by default it uses number show a list. Inside it each item starts with the <li> tag. An unordered list starts with the <ul> tag and by default it uses bullet (·) symbol for a list.
Let us have a look at both examples
A <table> tag in an HTML document is used to create a HTML table. This tag consists of <tr>, <th>, and <td> elements where <tr> refers to a table row, <th> refers to a table heading, and <td> refers to table data in a particular HTML table.
Now, look at the example below
The <form> tag is a block of elements used to create an interactive session where a user can fill up their personal details and send it to a web server. The sever then send the submitted data to database, process the information and send back required information to the user. A form holds information in various fields like textbox, checkboxes, radio buttons and many more.
Audio, Video Tags
The audio and video tags come under the category of HTML media. Before HTML5 came into use, the audio and video could only be played in a browser using a plug-in (like flash). However, HTML5 has allowed audio and video to be embedded in current browsers very effectively and quickly.
Three formats that audio tag supports are:
Three formats that video tag supports are:
The <div> tag is used define a section in an HTML document. It is used as a container for other html elements. It is used to group a large section of html elements together and apply CSS to them. The <div> tag is used with blocklevel elements.
An HTML form contains form elements.
Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.
An example of form is given below:
The <input> Element
The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on the type attribute.
Here are some examples:
|<input type=”text”>||Defines a one-line text input field|
|<input type=”radio”>||Defines a radio button (for selecting one of many choices)|
|<input type=”submit”>||Defines a submit button (for submitting the form)|
Radio Button Input
defines a radio button.
Radio buttons let a user select ONE of a limited number of choices:
The Submit Button
<input type=”submit”> defines a button for submitting the form data to a form-handler. The form-handler is typically a server page with a script for processing input data. The form-handler is specified in the form’s action attribute:
The Target Attribute
The target attribute specifies if the submitted result will open in a new browser tab, a frame, or in the current window.
The default value is “_self” which means the form will be submitted in the current window. To make the form result open in a new browser tab, use the value “_blank”:
<form action=”/action_page.php” target=”_blank”>
There are two ways the browser client can send information to the web server.
- The GET Method
- The POST Method
The GET Method
The GET method sends the encoded user information appended to the page request. The page and the encoded information are separated by the ? character.
The features of GET method of forms are given below:
- The GET method produces a long string that appears in your server logs, in the browser’s Location: box.
- The GET method is restricted to send upto 1024 characters only.
- Never use GET method if you have password or other sensitive information to be sent to the server.
- GET can’t be used to send binary data, like images or word documents, to the server.
- The data sent by GET method can be accessed using QUERY_STRING environment variable.
- The PHP provides $_GET associative array to access all the sent information using GET method.
An program of GET methods is:
The POST Method
The POST method transfers information via HTTP headers. The information is encoded as described in case of GET method and put into a header called QUERY_STRING.
The features of POST method are:
- The POST method does not have any restriction on data size to be sent.
- The POST method can be used to send ASCII as well as binary data.
- The data sent by POST method goes through HTTP header so security depends on HTTP protocol. By using Secure HTTP you can make sure that your information is secure.
- The PHP provides $_POST associative array to access all the sent information using POST method.
Try out following example by putting the source code in test.php script.
The points below summarize the topics discussed:
- An element in html consists of starting and ending end tag with some content in between.
- An HTML Comments starts with
- An HTML document consists of two types of list i.e., Ordered and Unordered list.
- A form holds information in various fields like textbox, checkboxes, radio buttons and many more.
- Before HTML5 came into use, the audio and video could only be played in a browser using a plug-in (like flash).