Articles by "HTML"
Showing posts with label HTML. Show all posts
Progrramers is optimized for Web Development Tutorials, Framework7, MeanStack, MongoDB, ExpressJS, AngularJS, NodeJS, HTML, CSS, JavaScript, PHP, SQL

What is HTML DOM?

When a web page is loaded, the browser creates a Document Object Model of the page.
The Document Object Model (DOM) is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.
The HTML DOM is a standard object model and programming interface for HTML. It defines:
  • The HTML elements as objects
  • The properties of all HTML elements
  • The methods to access all HTML elements
  • The events for all HTML elements


What is HTML DOM - progrramers exlained
HTML DOM TREE STRUCTURE



What is HTML DOM Event?

HTML DOM Events allow JavaScript to register different event handlers on elements in an HTML document. Events are normally used in combination with functions, and the function will not be executed before the event occurs (such as when a user clicks a button).


What is HTML DOM Event? Explanation Image
HTML DOM Event

What is an EventListener?

An event listener is a procedure or function in a computer program that waits for an event to occur. For examples - the user clicking or moving the mouse, pressing a key on the keyboard, or an internal timer or interrupt are events.

What is Dynamic HTML DOM?

An HTML DOM or DOM tree created with the combination of HTML and JavaScript after page loaded is referred as Dynamic HTML DOM. Dynamic HTML can be created after when the client side scripting language event occurred. For example – document.createElement(TAGNAME);

What is Event delegation?

Event delegation is the process of handling events at a higher level in the DOM that where they were first triggered, thanks to behavior known as Bubbling. For example - when an element on the page is, clicked, then a click event is fired on that element but it doesn’t stop there. The click event “bubbles up” the DOM tree, triggering the click events on any of the originally clicked element’s parents that are listening for one.

What is bubbling?

When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors. The process is called “bubbling”, because events “bubble” from the inner element up through parents like a bubble in the water.

What is bubbling
HTML DOM Event : Image courtesy W3.org


Above image describe the three phase of HTML DOM Event:
  • Capturing – The event goes down to the element (very rare use)
  • Target – The event reach the target element
  • Bubbling – The event bubbles up from the element

Why EventListeners don’t work on Dynamic HTML DOM?

HTML DOMs created dynamically don’t have its own Event Handlers because they aren’t static part of the DOM tree hence simple EventListeners cannot target it to fire the function but they are part of the loaded document, therefore to handle the events, we have to use Event Delegation to the HTML Elements appended dynamically.
Next post will elaborate “How to Create Event Listeners for Dynamic HTML DOM?”

Related Topics

Progrramers is optimized for Web Development Tutorials, Framework7, MeanStack, MongoDB, ExpressJS, AngularJS, NodeJS, HTML, CSS, JavaScript, PHP, SQL

HTML Input Element Types

In the previous chapter of HTML forms we have learnt about HTML forms Control Elements. In that chapter we have also discussed that the <input> element is the most important HTML from element among all. The reason of that the <input> element can be used in many ways by using ‘type’ attribute.

Now we will see that how HTML input used in different ways more descriptively.

Input type ‘text’


Input type text defines the single line text input field. Input type text is default type of input element. Input type text can be used with ‘name’, ’value’, ‘size’, ‘placeholder’, ‘id’, ‘maxlength’ etc. attributes.


<form>
 <label for = "fname">First Name: <label>
 <input type = "text" name = "fname" id = "fname" />
 <label for = "lname">Last Name: <label>
 <input type = "text" name = "lname" id = "lname" />
 <input type  = "submit" name = "submit" value = "Save" />
</form>

Above example will be displayed on web browser like below result


Input type ‘password’


Input type password is defines a password field. The character typed in password field is masked and shows as asterisk or circle. Input type password can be used with ‘name’, ’value’, ‘size’, ‘placeholder’, ‘id’, ‘maxlength’ etc. attributes.


<form>
 <label for = "name">Name: <label>
 <input type = "text" name = "name" id = "name" placeholder = "Type your name here"/>
 <label for = "lname">Password<label>
 <input type = "password" name = "pass" id = "pass" minlength = "4" maxlength = "6" placeholder = "Type password here"/>
 <input type  = "submit" name = "submit" value = "Save" />
</form>

Above example will be displayed on web browser like below result. Type anything in password field and see how it works.


Input type ‘number’


Input type ‘number’ defines a numerical input field. In numerical input field users are allow to input numbers only. Numerical input field can be restricted with range of inputs but using ‘min’ and ‘max’ attributes. Shown in Example


<form action = "" method = "GET">
 <label for = "qty">Quantity: <label>
 <input type = "number" name = "qty" id = "qty" min = '5' max = '15' value = '10'/>
 <input type  = "submit" name = "submit" value = "Save" />
</form>

Input type ‘submit’


Input type ‘submit’ defines a submit button which submits the form data to a form-handler. Form-handler is a server side script page that process the form input data. Form-handler URL defined in the form action attribute. Check the below example:


<form>
 <label for = "fname">First Name: <label>
 <input type = "text" name = "fname" id = "fname" />
 <label for = "lname">Last Name: <label>
 <input type = "text" name = "lname" id = "lname" />
 <input type  = "submit" name = "submit" value = "Save" />
</form>

If we delete the type attribute in submit button but it will be converted into a single line text input field by default.

Input type ‘button’


Input type ‘button’ looks similar to submit button but it don’t act as a form handler. Input buttons dose not submit a form, they don't do anything by default. They're generally used in conjunction with JavaScript as part of an AJAX application.


<form action = "" method = "GET">
 <label for = "fname">First Name: <label>
 <input type = "text" name = "fname" id = "fname" />
 <label for = "lname">Last Name: <label>
 <input type = "text" name = "lname" id = "lname" />
 <input type  = "button" name = "submit" value = "Save" onclick = "alert('The form is not submitted')" />
</form>

Input type ‘checkbox’


Input type ‘charckbox’ is used when one or more options are to be selected with limited numbers of choices. Checkbox can be used with ‘name’, ’value’, ‘id’ attributes.


<form action = "" method = "GET">
 <h4>Movies Name :</h4>
 <input type = "checkbox" name = "ironman" id = "ironman" value = "Iron-Man" />
 <label for = "ironman">Iron-Man<label><br />
 <input type = "checkbox" name = "thor" id = "thor" value = "Thor - The Dark World" />
 <label for = "thor">Thor - The Dark World<label><br />
 <input type = "checkbox" name = "captain" id = "captain" value = "Captain America - Civil War"/>
 <label for = "captain">Captain America - Civil War<label><br />
 <input type = "checkbox" name = "avenger" id = "avenger" value = "Avenger - Infinity War" checked />
 <label for = "science">Avenger - Infinity War<label><br /><br />
 <input type  = "submit" name = "submit" value = "Save" />
</form>

Input type ‘radio’


Input type ‘radio’ allows users to select only one option among multiple choices. Radio buttons can be used with ‘name’, ’value’, ‘id’ attributes.


<form action = "" method = "GET">
 <h4>Movies Name :</h4>
 <input type = "radio" name = "movie" id = "ironman" value = "Iron-Man"/>
 <label for = "ironman">Iron-Man<label><br />
 <input type = "radio" name = "movie" id = "thor" value = "Thor - The Dark World" />
 <label for = "thor">Thor - The Dark World<label><br />
 <input type = "radio" name = "movie" id = "captain" value = "Captain America - Civil War"/>
 <label for = "captain">Captain America - Civil War<label><br />
 <input type = "radio" name = "movie" id = "avenger" value = "Avenger - Infinity War" checked />
 <label for = "science">Avenger - Infinity War<label><br /><br />
 <input type  = "submit" name = "submit" value = "Save" />
</form>

Input type ‘range’


Input type ‘range’ specifies a range element which allows the user to input a numerical value that must be equal or between the given values. Range can use in HTML forms with ‘min’, ‘max’, ‘value’ and ‘step’ attributes. Check the example


<form action = "" method = "GET">
 <input type = "range" min = "0" max = "20" value = "10" step = "5"/>
 <input type  = "submit" name = "submit" value = "Save" />
</form>

Range can also used with data-list and labels but these features are not fully supported by all web browsers. Data-list specifies the hash marks on the top of range element which shown in the below example.


<form action = "" method = "GET">
 <input type = "range" list = "makrs" min = "0" max = "100" step = "10"/>
  <datalist id = "makrs">
   <option value = "0" label = "0" />
   <option value = "10">
   <option value = "20">
   <option value = "30">
   <option value = "40">
   <option value = "50"label = "50" />
   <option value = "60">
   <option value = "70">
   <option value = "80">
   <option value = "90">
   <option value = "100"label = "100" />
  </datalist>
 <input type  = "submit" name = "submit" value = "Save" />
</form>

Input type ‘email’


Input type email specifies a text input which allows the users to enter email address. The input value is automatically validated to ensure that it's either empty or a properly-formatted email address (or list of addresses) before the form can be submitted. If input type email is used with multiple attribute then it can accept more than one email address at once separated by comma ( , ). Input type email can be used with ‘name’, ‘size’, ‘placeholder’, ‘multiple’, ‘minlength’,  ‘maxlength’, ‘value’, ‘list’, ‘pattern’ etc attributes.


<form action = "" method = "GET">
 <input type = "email" minlength = "15" maxlength = "20"/>
 <input type  = "submit" name = "submit" value = "Save" />
</form>

Input type email is used as predefined data-list of multiple email addresses. You can select one or more email addresses at once separated by comma ( , ).


<form action = "" method = "GET">
 <input type = "email" list = "add_mail" placeholder = "type multiple email addresses here separated by comma (,)" size = "50" multiple />
  <datalist id = "add_mail">
   <option value = "abc@example.com">abc@example.com</option>
   <option value = "xyz@example.com">xyz@example.com</option>
   <option value = "def@example.com">def@example.com</option>
  </datalist>
 <input type  = "submit" name = "submit" value = "Save" />
</form>

Input type ‘date’


Input type date specifies an input field that contains a date-picker (calendar type) interface. Date input type allow user to enter a date either using a text input that automatically or using a date-picket interface. Input type date can be used with ‘name’, ‘min’, ‘max’, ‘value’, ‘id’ etc. attributes.


<form action = "" method = "GET">
 <input type = "date" name = "save_date" min = "2018-07-02" max = "2018-07-07" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" required />
 <input type  = "submit" name = "submit" value = "Save" />
</form>

Input type ‘file’


Input type file specifies file selection field along with file browsing button which allows users to upload the image or other files. Whenever using input type file in HTML form then ‘enctype = multipart/form-data’ must be specify in form tag like in example shown below.


<form action = "" method = "POST" enctype = "multipart/form-data">
 <label>Choose to Upload file : </label><input type = "file" name = "upload" />
 <input type  = "submit" name = "submit" value = "Save" />
</form>

In above example we can upload only one file at once but if we want to upload multiple files in a single submission then we need to specify ‘multiple’ attribute in the file element. After that we can select more than one file by pressing ‘shift’ or control.


<form action = "" method = "POST" enctype = "multipart/form-data" >
 <label>Choose to Upload file : </label><input type = "file" name = "upload" accept = "“.png, .jpg, .jpeg" multiple />
 <input type  = "submit" name = "submit" value = "Save" />
</form>

Input type file cannot validate file itself therefore to validate file types we need to use ‘accept’ attribute. ‘accept’ attribute can validate files automatically which is allowed. Acceptable file types can be specified with the ‘accept’ attribute, which takes a comma-separated list of allowed file extensions or MIME types. Some examples:

accept = “image/png” or accept = “.png” – Accepts only PNG files.
accept = “image/png, image/jpg, image/jpeg” or accept = “.png, .jpg, .jpeg” – Accepts PNG or JPEG files.
accept = “image/*” – Accepts any type of image file. Some of the mobile devices allow the users to upload the images directly using camera.
accept = ".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — Accept anything that like an MS Word document.




Related Topics

Progrramers is optimized for Web Development Tutorials, Framework7, MeanStack, MongoDB, ExpressJS, AngularJS, NodeJS, HTML, CSS, JavaScript, PHP, SQL
In the previous two chapters we have been introduces with HTML form and form attributes. Now in this chapter we will study about the HTML form control element and it’s type.

The <input> Element


The <input> element is the most important element form element. The reason is that <input> element can be used in several different ways with the help of ‘type’ attribute. The simplest use of input element is text input which is described in the below example:


<form action = "update.php">
   First Name:
    <input type = "text" name = "f_name" /><br /><br />
   Last Name:
    <input type = "text" name = "l_name" /><br /><br />
    <input type = "submit" name = "name"/>
  </form>

Note: If input element is used without type attribute or type attribute is omitted then the input field type becomes ‘text’ by default.

The <select> Element


The <select> element defines the drop-down list of one or multiple options. Options for the drop-down list can be defined with the <option> element which is nested inside the <select> element just like below example.


<form action = "update.php">
   <select name = "fruits">
    <option value = "Apple">Apple</option>
    <option value = "Banana">Banana</option>
    <option value = "Cherry">Cherry</option>
    <option value = "Guava">Guava</option>
    <option value = "Grapes">Grapes</option>
    <option value = "Mango">Mango</option>
    <option value = "Strawberry">Strawberry</option>
   </select>
   <br />
   <br />
   <input type = "submit" name = "name"/>
  </form>



In the above example you can see the first option is selected by default. To change the pre-defined selected option without changing the order of options, add the ‘selected’ attribute to the option.


<form action = "update.php">
   <select name = "fruits">
    <option value = "Apple">Apple</option>
    <option value = "Banana">Banana</option>
    <option value = "Cherry" selected>Cherry</option>
    <option value = "Guava">Guava</option>
    <option value = "Grapes">Grapes</option>
    <option value = "Mango">Mango</option>
    <option value = "Strawberry">Strawberry</option>
   </select>
   <br />
   <br />
   <input type = "submit" name = "name"/>
  </form>

Multiple Selection Options


In the above example only one option can be selected at once. To allow the multiple section at once use the multiple attribute inside the <select> element. 


<form action = "update.php">
   <select name = "fruits" multiple>
    <option value = "Apple">Apple</option>
    <option value = "Banana">Banana</option>
    <option value = "Cherry">Cherry</option>
    <option value = "Guava">Guava</option>
    <option value = "Grapes">Grapes</option>
    <option value = "Mango">Mango</option>
    <option value = "Strawberry">Strawberry</option>
   </select>
   <br />
   <br />
   <input type = "submit" name = "name"/>
  </form>

Visible Values


In above example seven values are presented in the drop-down list but only four values are visible. To change the number of visible options add the ‘size’ attribute in the <select> element and give value of size in number. Let say if the size = 6 then 6 option will be visible. Example describe more clearly.


<form action = "update.php">
   <select name = "fruits" multiple size = "6">
    <option value = "Apple">Apple</option>
    <option value = "Banana">Banana</option>
    <option value = "Cherry">Cherry</option>
    <option value = "Guava">Guava</option>
    <option value = "Grapes">Grapes</option>
    <option value = "Mango">Mango</option>
    <option value = "Strawberry">Strawberry</option>
   </select>
   <br />
   <br />
   <input type = "submit" name = "name"/>
  </form>

The <textarea> Element.


Text input element defines single line input but unlike input element <textarea> defines the multiline text input field like a text area. Check the example


<form action = "update.php">
   <textarea rows = "3" cols = "40">This is the example of textarea. Textarea defines multi-line input text field.</textarea>
   <br />
   <br />
   <input type = "submit" name = "name"/>
  </form>



The ‘rows’ attribute defines the visible number of lines in text area.
The ‘cols’ attribute defines the visible width of a text area.
In the bottom right corner of the textarea two diagonal lines can be seen. Take the mouse pointer over those lines, left click &amp; hold and drag to change it’s size.

You can change the size of a textarea



The <button> Element


The button element defines a clickable button on the webpage. Check below example

Do not forget to specify the ‘type’ attribute for the button element just because different browsers may have the different default types for button element.


<button type = "button" onclick = "alert('Hello Peogrammers!');">Click Me!</button>

In above example button type is ‘button’ which execute the ‘Java script’ functions. If we use ‘submit’ instead of ‘button’ then it acts like a submit button inside the forms which execute the server-side scripts like PHP scripts etc.


<form action = "update.php">
   First Name:
    <input type = "text" name = "f_name" /><br /><br />
   Last Name:
    <input type = "text" name = "l_name" /><br /><br />
    <button type = "submit" name = "name">Submit</button>
  </form>


HTML5 Tutorial - HTML Forms Control Element
HTML5 Tutorial - HTML Forms Control Element



Related Topics

Progrramers is optimized for Web Development Tutorials, Framework7, MeanStack, MongoDB, ExpressJS, AngularJS, NodeJS, HTML, CSS, JavaScript, PHP, SQL

HTML Form Attribute


In previous chapter we have been introduced with HTML forms. We know that how many types of Form Control Elements are there.

Forms generally used to collect the user input data. To accumulate the data, forms send all the information to server with the help of server side scripts like PHP, CGI, and ASP etc.

The Action attribute 


To embed the server side scripts with the HTML forms we use a form attribute is called ‘action’.  The action attribute defines the action to be performed when the form is submitted. When submit button in an HTML form is clicked, HTML form sends all the input information to a script webpage on the server where data is process the data as per server side script and store in the server or give the output.



<form action = "update.php">


The Method Attribute


The Method attribute specifies the transmission method of form date. It controls the HTTP method to upload the data when submitting the form. There are two methods we frequently use in an HTML form ‘GET’ and ‘POST’.



<form action = 'update.php' method = 'GET'>




<form action = 'update.php' method = 'POST'>

Difference between GET and POST Methods


1. GET Method append the form data in to the URL in name-value pair.
        POST Method does not append the form data in to the URL

2. GET Method allows about 3000 characters in the URL.
     POST method has no size limitation. It can be used to send the large amount of data.

3. GET Method is better for non –secure data like Query String in Search Engines.
       POST Method is better for both non-secure and secure data. Secure data like passwords, Credit Card Numbers etc.

4. Form submission with GET Method can be bookmarked.
     Form submission with POST Method cannot be bookmarked.


Where to use GET and POST?


GET is a by default method while submitting an HTML form. However, when GET is used, the submitted form data is visible in the page address field (URL) in the name value pair. We should always use POST method if the form data contains sensitive or personal information. The POST method does not display the submitted form data in the page address field.

The Autocomplete Attribute


Autocomplete attribute specifies that the browser should attempt to automatically complete the input based on user’s previous inputs to similar fields. When autocomplete is on, the browser automatically completes the input value based on values that previously entered by the uses. By default value of autocomplete attribute is on which can be replaced with off to disable the auto complete feature.

The autocomplete attribute works with <form> and the following <input> types: text, search, url, tel, email, password, datepickers, range, and color.

It is possible to have autocomplete ‘on’ for the form and ‘off’ for individual input fields in same form and vice versa. For example in the ‘Payment forms’ Names input fields can be autocomplete ‘on’ but Card No Input field can be autocomplete ‘off’.



<form action = 'update.php' method = 'POST' autocomplete = 'on'>


The Enctype Attribute


The Enctype Attribute lets you define an encoding type for your HTML form. This attribute works only with post method. There are three possible values of Enctype Attribute.

If we do not define any enctype attribute on HTML forms then the default value is application/x-www-form-urlencoded. This option is most used in simple HTML forms.



<form action = 'update.php' method = 'POST' enctype = 'application/x-www-form-urlencoded'>


If the uses required uploading any files from the forms then multipart/form-data is an essential option.



<form action = 'update.php' method = 'POST' enctype = 'multipart/form-data'>


text/plain is a valid option, although it sends the data without any encoding at all. It is not recommended, as its behavior is difficult to predict.



<form action = 'update.php' method = 'POST' enctype = 'text/plain'>


The Target Attribute


The Target attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form. This attribute is used to open the response from script page in same browser window or a new browser window. The two possible values are “_self” and “_blank”.

The target attribute example - '_self'


<form action = 'update.php' method = 'POST' target = '_self'>


The target attribute example - '_blank'


<form action = 'update.php' method = 'POST' target = '_blank'>

The Novalidate Attribute


The Novalidate attribute is a Boolean attribute. When this attribute is present in HTML form, it specifies that the form input data should not validated when submitted.



<form action = 'update.php' method = 'POST' novalidate = 'novalidate'>


The Name Attribute


The name attribute specifies the name of an <input> element when using inside input tag individually. When the name attribute is used inside <form> tag, it refers the element in Java Script or specifies the name that used to identify the form. Only form elements with a name attribute will have their values passed when submitting a form.



<form action = 'update.php' method = 'POST' name = 'form_x'>


The Accept-charset Attribute


The Accept-charset attribute specifies the charset when form is submitted. This attribute specifies the character encodings that are to be used for the form submission. By default the form uses the web page charset.

The default character set in HTML 4 was 8859-1 and HTML 5 is UTF-8.


<form action = 'update.php' method = 'POST' accept-charset = 'ISO-8859-1'>


HTML5 Tutorial - HTML Forms Attribute
HTML5 Tutorial - HTML Forms Attribute



Related Topics


Progrramers is optimized for Web Development Tutorials, Framework7, MeanStack, MongoDB, ExpressJS, AngularJS, NodeJS, HTML, CSS, JavaScript, PHP, SQL

HTML Forms

HTML forms are required, when we want to collect data from site visitors or create database of structured data. For example while creating an e-mail Id you are request to fill up an HTML form like first name, last name, contact no. etc.



<form action = "update.php" method = "GET">
 <label for = "fName">First Name : </label><br />
  <input type = "text" name = "firstName" id = "fName" value =  "Narendra"/><br />
 <label for = "mName">Middle Name : </label><br />
  <input type =  "text" name = "MiddletName" id = "mName" value = "Damodardas"/><br />
 <label for = "lName">Last Name : </label><br />
  <input type =  "text" name = "LastName" id = "lName" value = "Modi"/><br />
 <input type = "submit" value = "submit"/>
</form>

Try Yourself


Above Example looks something like this:









HTML forms can be defined on webpage with <form> element. <form> element contains different types of other input elements like text field, numerical field, checkbox, radio button, submit button etc. Below is the syntax and example as well.



<form action = "Script Page URL" method = "GET/POST">
   form elements like input, textarea etc.
</form>




<form action = "" method = "">
 First Name: <input type = "text" name = "user_id" /><br><br>
 Last Name: <input type = "password" name = "password" /><br /><br />
 <input type = "checkbox" name = "chemistry" value = "on" /> Maths
 <input type = "checkbox" name = "maths" value = "on" /> Chemistry
    <input type = "checkbox" name = "physics" value = "on" /> Physics <br /><br />
 Language : <input type = "radio" name = "subject" value = "Hindi" /> Hindi
    <input type = "radio" name = "subject" value = "English" /> English <br /><br />
 <input type = "Submit" name = "submit" value = "Submit" />
</form>

Try Yourself


Above Example looks something like this:

First Name:

Last Name:

Maths Chemistry Physics

Language : Hindi English



While a site visitor fills and submits the form, it posts the visitor’s data to a back-end application where it processes the data according to the server side scripts to store data into database. Server side scripts are language programs that used to navigate between client and servers. Like ASP script, PHP script, JSP scripts etc.



<form action = "update.php" method = "POST">
 First Name: <input type = "text" name = "user_id" /><br><br>
 Last Name: <input type = "password" name = "password" /><br /><br />
 <input type = "Submit" name = "submit" value = "Submit" />
</form>

Try Yourself

HTML Form Control Element

There are different types of form control elements which give different shape to HTML forms and collect the data into different manners. Brief descriptions of HTML Form Control Element are given below:

Type of HTML Form Control Elements


  • Input Control Element – The most important form element which is used in several ways with type attribute.
  • Select Box element – Select element defines the drop down list of the multiple values.
  • File Select Control Element – File Select Element describe the file select box to upload the files.
  • Clickable Button Element – Button element defines a clickable button. 
  • Output Control Element – Output element represents the result of a calculation like performed by a script.


 Above mentioned Form Control Elements behave differently with different attributes.  In next chapter we will study descriptively about HTML Form Control Elements and the use of attributes.

HTML5 Tutorial - HTML Forms
HTML5 Tutorial - HTML Forms



Related Topics

Progrramers is optimized for Web Development Tutorials, Framework7, MeanStack, MongoDB, ExpressJS, AngularJS, NodeJS, HTML, CSS, JavaScript, PHP, SQL

HTML Computer Code Tags


Sometimes we have to show the computer programming codes over web pages. Most often this is required when we want to develop the computer programming tutorial websites or webpages.

Why use HTML Computer Code Tags?


HTML Computer Code Tags are use to express the simplest font style or look without any extra formatting. Usually this elements display the fragments of computer codes in the browser’s defaults monospace font.


<code>
 var a = 9;<br />
 var b = 16;<br />
 c = a + b;<br />
</code>



In Chapter we will learn about four Computer Code Tags which are mentioned below:

1. Code Element - <code>
2. Key Board Element - <kbd>
3. Sample Element - <samp>
4. Variable Element - <var>
5. Output Element - <output>


Code Element for computer codes


The Code Element is an inline element that displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. By default, the content text is displayed using the user agent's default monospace font.


<!DOCTYPE html>
<html>
<title>HTML5 Tutorial - HTML Computer Code Element.</title>
<body>
<h1>This is the Example of Computer Code Element.</h1>
<p>Use of Code Element.</p>
<code>
 var a = 9;
 var b = 16;
 c = a + b;
</code>
</body>
</html>


Code Element doesn’t preserve the whitespace. Code Element can be nested inside the <pre> element also to preserve the whitespace like given in below example.


<code>
 var a = 9;<br />
 var b = 16;<br />
 c = a + b;<br />
</code>


Keyboard Element for Keyboard inputs


The HTML Keyboard Input element <kbd> represents a span of inline text denoting textual user input from a keyboard, voice input or any other text entry devices. By default, the content text is displayed using the user agent's default monospace font. Also custom style can defined to override the browser defaults.  Although this is not mandated by the HTML standard.


<p>Use of kbd Element.</p>

<p>Use the <kbd>Alt + F4</kbd> key to execute the shut down menu in Windows 10.</p>


Sample Element for sample output


The HTML Sample Element <samp> is used to enclose inline text which represents sample (or quoted) output from a computer program. Its contents are typically rendered using the browser's default monospaced font.


<pre>
<code>
 var a = "6";
 var b = 5;
 a + b = <samp>Error.</samp>
</code>
</pre>


Variable Element for variables


The HTML Variable element <var> represents the name of a variable in a mathematical expression or a programming context. It's typically presented using an italicized version of the current typeface. This element is not supported by all the browsers.


<p>Use of var Element.</p>

<code>
 <var>var a</var> = 6;
 <var>var b</var> = 7;
 <var>a + b</var> = 13;
</code>

<h2>Another Example</h2>
<pre>
<code>
 <var>var a</var> = 6;
 <var>var b</var> = 7;
 <var>a + b</var> = 13;
</code>

</pre>

Output Element for result output


The HTML Output element <output> is a container element into which a website or app can inject the results of a calculation or the outcome of a user action.


<form oninput = "result.value = parseInt(x.value)+parseInt(y.value)">
 <input type = "range" name = "x" value = "50" /> +
 <input type = "number" name = "y" value = "100"/> =
 <output name = "result">150</output>
</form>


HTML5 Tutorial - HTML Computer Code Elements

Related Topics

Progrramers is optimized for Web Development Tutorials, Framework7, MeanStack, MongoDB, ExpressJS, AngularJS, NodeJS, HTML, CSS, JavaScript, PHP, SQL

HTML Responsive Web Design (HTML - RWD)


In previous chapter we learnt about HTML Layout Elements. How we can build a layout for a webpage. The purpose of HTML Layout is to make an ideal design that gets fit on every screen size. In this chapter we will learn how to create a responsive web design.

html tutorials - Responsive Web Design
html tutorials - Responsive Web Design

What is Responsive Web Design?


Responsive Web Design is a technique that uses HTML and CSS to make a web page adaptable on any kind of screen size by Enlarging, reducing, displaying, hiding and moving the contents. Responsive Web Design makes a web page capable to be displayed perfectly on Desktop Browser, Tab Browser or Mobile Browser by manipulating the elements and contents.

How to make a Responsive Web Design


Now days there are several methods that can be used to make a web page responsive.

1. Using HTML and CSS
2. Using W3.CSS Framework
3. Using Bootstrap Framework
4. Using Framework7 etc. (A ready to use Framework7 package)

Responsive Web Design using HTML and CSS


Defining the Viewport


When working with HTML to build a Responsive Web Page. We need to start with Setting up viewport in HTML Document.

HTML5 introduced a method to let web designers take control over the viewport (the user's visible area of a web page), through the <meta> tag. The viewport is the user’s visible area of the web page. It varies with the devices screen size. A <meta> tag named viewport gives the instruction on how to control the page dimension and scaling with respect to the screen size.


<meta name="viewport" content="width=device-width, initial-scale=1.0"/>


Responsive Text Size


Text can be stylized with CSS on the web page with font-size property. For example <p style = “font-size:24px;”>This is paragraph.</p>. The value of font-size property can be numeral with “px”, “em” or “%” unit. But these units do not behave responsively when screen size increases or decreases. To have a responsive size of text on web page, we need to define “vw” as unit. “vw” means “viewport-width”. Watch below example and try yourself.


<style>
 p{
  font-size:2vw;
 }
</style>


Responsive HTML Elements


By default HTML Elements are responsive. This can be seen clearly in below examples.


<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
 div{
  padding:10%;
  background:green;
  text-align:center;
 }
 ul{
  background:lightgreen;
  padding:10%;
 }
</style>
</head>
<body>
 <div><h1>Responsive Section</h1></div>
 <ul>
  <li>Link-1</li>
  <li>Link-2</li>
  <li>Link-3</li>
  <li>Link-4</li>
 </ul>

Read Also : HTML5 Tutorial - HTML Layout Elements - progrramers

Responsive Images


HTML elements are responsive but images are not responsive. If the width property is set to 100% the image became responsive, the scaled up and down as per browser window size.


<style>
   img{
    width:100%;
    height:auto;
   }
  </style>
</head>
<body>

<p><b>To understand this example, you should resize the browser window.</b></p>

<img src="body-width.jpg" alt="progrramers" width="640" height="363">

<p>Replace the width property with "max-width" and resize the browser. See what happens.
</p>


In the above example the image can be scaled up larger than its original size. This may cause to loosing image quality over the larger screen size like Smart T.V. For example image original width is 1280px then it will displayed good up to 1280 screen size browser and it will starched up to more than its original size when it displayed larger screen and loose the quality. To avoid this problem we can use “max-width” property. If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:


<style>
 img{
  max-width:100%;
  height:auto;
 }
</style>


Display Different Images on Different Screen Size


The HTML <picture> element allows displaying different image on different screen size. In below example you can clearly see that <source> tag is specified in <picture> tags which access the screen size and display different images. You can see it by resizing the browser window.


<picture>
 <source srcset = "https://goo.gl/A9BkTj" media = "(max-width:320px)"/>
 <source srcset = "https://goo.gl/MnpX7B" media = "(max-width:640px)"/>
 <img src = "https://goo.gl/XpqKRH" alt = "progrramers" />
</picture>


Read Also : HTML5 Tutorial - HTML Images - progrramers

CSS media screen


Same thing as above can be done with CSS media screen module. Try it in the example


<style>
   img{
    width:100%;
    height:auto;
   }
   .progrramers-div{
    background:url('https://goo.gl/XpqKRH') center top no-repeat;
    width:100%;
    height:600px;
   }
  @media (max-width:640px){
  .progrramers-div{
    background:url('https://goo.gl/MnpX7B') center top no-repeat;
    width:100%;
    height:600px;
  }
  }
  @media (max-width:320px){
  .progrramers-div{
    background:url('https://goo.gl/A9BkTj') center top no-repeat;
    width:100%;
    height:600px;
  }
  }
  </style>


We will learn more in CSS media screen chapter.

Responsive Web Design using W3.CSS Framework


W3.CSS is another way to create Responsive web pages. It is ready to use framework with predefined HTML Classes and CSS Properties. W3.CSS makes it easy to develop sites that look nice at any size; desktop, laptop, tablet, or phone.

We will study about it in W3.CSS Chapter

Responsive Web Design using Bootstrap


Likewise W3.CSS Bootstrap is also a ready to use framework. Bootstrap is very popular and makes it easier to create stunning responsive web pages which displayed perfectly on various screen sizes. Bootstrap uses HTML, CSS, Java Script and JQuery to make responsive web pages.

We will study about it in Bootstrap Chapter.


What is Framework7?

Framework7 is ready to use open-source framework which is use to develop Web, Mobile (Android & IOS) and Desktop Applications with screen oriented native looks and hybrid functionality. It has own predefined JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax.


Read Also : Framework7 Tutorial : What is Framework7 ? - Progrramers
 


HTML5 Tutorial - HTML Responsive Web Design (RWD)

Related Topics

Progrramers is optimized for Web Development Tutorials, Framework7, MeanStack, MongoDB, ExpressJS, AngularJS, NodeJS, HTML, CSS, JavaScript, PHP, SQL

HTML5 Tutorial – Layout


HTML Layout is very important for every website which based on thematic looks. Layout gives another definition to the websites. For different type of websites there are different types of layout like newspaper, magazine, social media sites etc. For example on Social Media Sites like Facebook and Twitter you can notice that every post is displayed on middle and on left site menus and links are defined, on top of the site search and notification and on the right side chat-box and other ad links are defined. Similarly every website follows their own predefined layouts. It is very important.




Website Development Tutorials

What is CSS?

CSS is a markup language used with HTML to design the user Interface of a website. CSS stands for Cascading Style Sheet. CSS describes the style of HTML on a web page.
CSS can be used to HTML in three different methods.
Inline - In this method we use style attribute inside the HTML element. We have already learnt this method above.
Internal - In this method we use to define the CSS property: value pair inside <style> element within <head> section. We target to select the elements by its name or selector attributes like id and class. We have learnt about the selector attributes in HTML5 Tutorial - HTML Attributes chapter.
External - I this method we use external CSS file and create a hyperlink between HTML and CSS documents and target to select the elements by its name or selector attributes like id and class.
Copyright © progrramers.com



HTML Layout Element


Website often displays the content in multiple columns which separated to each other like heading in header section, menu bar in navigation section, article and main contents in article section and footer content in footer section. HTML5 offers new type of semantic elements that define the different parts of a web page like below image:

HTML Layout Elements


How to create a web page multi column Layout

  1. Create HTML Layout using HTML Tables
  2. Create HTML Layout using CSS float property
  3. Create HTML Layout using CSS frameworks
  4. Create HTML Layout using CSS flex box

HTML Layout using HTML Tables


HTML layout can be created by using HTML tables. When you start learning HTML and create web page, you will find to define HTML Layout is very easy using HTML tables. Somewhere you will able to create responsive design too with HTML table. But it is also true that HTML Table is not designed to be used as layout tool. The purpose of HTML Tables is to show the tabular data. So it not recommended creating a web page layout using HTML tables.


<table width = "100%" border = "0" style = "border:1px solid #46A274;">
         <tr>
            <td colspan = "2" bgcolor = "#46A274" style = "text-align:center;">
               <h1>Website Development Tutorials</h1>
            </td>
         </tr>
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "50" style = "text-align:center;">
               HTML<br />
               CSS<br />
        Java Script<br />
        SQL<br />
               PHP
            </td>
            <td bgcolor = "#eee" width = "100" height = "200">
               <h2>What is CSS?</h2>
  <p>CSS is a markup language used with HTML to design the user Interface of a 
                   website. CSS stands for Cascading Style Sheet.CSS describes the style of 
                   HTML on a web page.</p>
            </td>
         </tr>
         <tr>
            <td colspan = "2" bgcolor = "#46A274" style = "padding:20px;">
               <center>
                  Copyright &copy; progrramers.com
               </center>
            </td>
         </tr>
</table>



Tips: Don’t ever try to do this as a professional.


Create HTML Layout using CSS float property


CSS float property is most common way to create an HTML Layout. CSS float property can be learning while learning CSS. It is very easy to learn; only we need to understand how Float and Clear properties work. Meanwhile you can see use of the float property in the below example:


<style>
.progrramers-layout {
    width: 100%;
    border: 1px solid #46A274;
 margin:0px;
 padding:0px;
}

.progrramers-layout header, footer {
    padding: 1em;
    color: white;
    background-color: #46A274;
    clear: left;
    text-align: center;
 font-family:ubuntu;
}

.progrramers-layout nav {
    float: left;
    max-width: 160px;
 min-width: 160px;
    margin: 0;
    padding: 0em;
}

.progrramers-layout nav ul {
    list-style-type: none;
    padding: 0;
}
   
.progrramers-layout nav ul a {
    text-decoration: none;
 color:green;
}

.progrramers-layout article {
    margin-left: 170px;
    border-left: 1px solid #46A274;
    padding: 1em;
    overflow: hidden;
 color:#424242;
}
</style>
</head>
<body>
<div class="progrramers-layout">
<header>
   <h1>Website Development Tutorials</h1>
</header>
<nav>
  <ul>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">Java Script</a></li>
    <li><a href="#">SQL</a></li>
    <li><a href="#">PHP</a></li>
  </ul>
</nav>
<article>
 <h2>What is CSS?</h2>
  <p>CSS is a markup language used with HTML to design the user Interface of a website. CSS stands for Cascading Style Sheet. CSS describes the style of HTML on a web page.</p>
  <p>CSS can be used to HTML in three different methods.</p> 
</article>
<footer>Copyright &copy; progrramers.com</footer>
</body>



Tips: Floating Elements depend on the flow of documents which may create trouble to the Layout flexibility.

Create HTML Layout using CSS frameworks


These days CSS became more advance. CSS and Java Script combined ready to use frameworks are getting more popular and preferred choice. Frameworks like W3.CSS and bootstrap are used to create HTML Layout. But before using frameworks progrramers tutorials recommends learning CSS and Java Script first. Use of CSS is more helpful while you are trying to customize framework as you wish.


<style>
  body{
   background: #eee;color:#424242;
  }
  .progrramer-container{
   background: #46A274;color:white;font-family:ubuntu;
  }
  </style>
</head>
<body>

<div class="jumbotron text-center progrramer-container">
  <h1>Website Development Tutorials</h1>
  <p>Learn Website Development with Lots of Examples</p> 
</div>
  
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>HTML</h3>
      <p>HTML stands for "Hyper Text Markup Language".</p>
      <p>HTML is a markup language use to create web pages and web application.</p>
    </div>
    <div class="col-sm-4">
      <h3>CSS</h3>
      <p>CSS stands for Cascading Style Sheet. CSS describes the style of HTML on a web page.</p>
      <p>CSS is a markup language used with HTML to design the user Interface of a website.</p>
    </div>
    <div class="col-sm-4">
      <h3>PHP</h3>        
      <p>PHP stands for Hyper Text Pre Processor.</p>
      <p>PHP is a server side scripting language and a powerful tool to navigate with server database. </p>
    </div>
  </div>
</div>

</body>



Tips: CSS frameworks are based on predefined classes. Customization can be harmful. It is good to use self-define classes to define the custom style to the HTML Elements.

Remember: HTML elements can contain the multiple classes. Read Class Attribute and Multiple Classes in HTML5 Tutorial - Attributes Id and Class.


Create HTML Layout using CSS flex box


CSS Flex box module is new entry in CSS3. We will learn CSS flex box in CSS Tutorial. Flex box layout makes easier to design flexible and responsive layout structure without using float, clear or position properties. Using flex box ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.


<style> 
.flex-progrramers {
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    text-align: center;
 border:1px solid #46A274;
}

.flex-progrramers > * {
    padding: 15px;
    -webkit-flex: 1 100%;
    flex: 1 100%;
}

.article {
    text-align: left;
 color:#424241;
}

header {background: #46A274;color:white;font-family:ubuntu;}
footer {background: #46A274;color:white;font-family:ubuntu;}
.nav {background:#eee;}

.nav ul {
    list-style-type: none;
    padding: 0;
}
.nav ul a {
    text-decoration: none;
}
a:link{
 color:#424242;
}
a:hover{
 color:#000000;
}
@media all and (min-width: 768px) {
    .nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
    .article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
    footer {-webkit-order:3;order:3;}
}
</style>
</head>
<body>

<div class="flex-progrramers">
<header>
  <h1>Website Development Tutorials</h1>
</header>
<nav class="nav">
<ul>
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">Java Script</a></li>
  <li><a href="#">SQL</a></li>
  <li><a href="#">PHP</a></li>
</ul>
</nav>
<article class="article">
  <h1>What is CSS?</h1>
  <p>CSS is a markup language used with HTML to design the user Interface of a website. CSS stands for Cascading Style Sheet. CSS describes the style of HTML on a web page.</p>
  <p>CSS can be used to HTML in three different methods.</p> 
</article>

<footer>Copyright &copy; progrramers.com</footer>
</div>



HTML Tutorial - HTML Layout Elements
> Related Topics

Progrramers is optimized for Web Development Tutorials, Framework7, MeanStack, MongoDB, ExpressJS, AngularJS, NodeJS, HTML, CSS, JavaScript, PHP, SQL

HTML Block and Inline Elements


Every HTML Element has a default display. It depends on type of elements. There are two types of elements as per display in which HTML elements can be categorized:

1. Block Level Elements
2. Inline Elements


<h1>This is heading.</h1>
<h1>This is Second heading.</h1>
<p>This is paragraph.</p>
<p>This is Second paragraph.</p>
<div>This is a section.</div>
<div>This is a second section.</div>
<p>The paragraph element is block level element but <span>span is inline element.</span></p>


In above example you can clearly notice that <h1>, <p>, <div> elements are covering full with of web page. They starched out from left to right with full available width.

Block Level Element


Block level elements are HTML elements that by default always cover full width on webpage. By default they have line break before and after them. They always start with a new line.

In above example <h1> and <p> have default margin that is why they are maintaining a distance between each other but <div> is a block level element that has no default margin and padding. This is the reason that both of the <div> are stick with each other.

Block level elements can be customized to display with CSS.

List of Block level elements

<div>
<article>
 <p>
 <blockquote>
 <nav>
 <canvas>
 <center>
 <picture>
 <pre>
 <figure>
 <header>
<ul>
 <footer>
 <ol>
 <section>
 <h1> - <h6>
<form>
 <hr>
 <address>
 <main>
 <aside>
 <output>


Inline Element


Inline elements are HTML Elements that cover up only as much width as they required. They don’t have line breaks by default and they only starched up to area till where the content require.

In the very first example of this chapter you can see yellow bordered area which is written inside <span> element, is actually an inline element.

List of Inline elements

<a>
<br>
<i>
 <object>
<abbr>
<span>
<strong>
<big>
<small>
<sub>
<sup>
<img>
<b>
<code>
<kbd>
<script>
<label>
<select>
<button>
<cite>
<q>
<em>



HTML Grouping Elements


HTML Grouping Elements are used to group other elements. There are two most important tags which regularly used to group the HTML elements.

1. <div> tag
2. <span> tag

The <div> tag


<div> is a block level element or tag that is used at high frequency to group the other HTML elements. It defines block level section in a document. It can be used to define the layout of a webpage. This tag doesn’t have any special default visual on webpage and not has any required attribute but this is very useful and meaningful when it is used with CSS. In other words it can be said that <div> is the block level container of another <div> tag or other HTML tags.


<div style = "color: #369000;">
 <h1>Asian Countries Group - 1</h1>
        <p>List of Asian Countries</p>
   <ul>
    <li>India</li>
    <li>Pakistan</li>
    <li>China</li>
    <li>Singapore</li>
    <li>Japan</li>
   </ul>
</div>
 
<div style = "color: #424242;">
 <h1>European Countries Group - 2</h1>
  <p>List of European Countries</p>
   <ul>
    <li>United Kingdom</li>
    <li>Germany</li>
    <li>Italy</li>
    <li>Spain</li>
    <li>Switzerland</li>
   </ul>
</div>


The <span> tag


<span> is an inline element that is used to group inline elements. It defines an inline section in HTML document. This tag doesn’t have any special default visual on webpage but this is very useful and meaningful when it is used with CSS. It doesn't required any special attribute.


<p>The Apples are <span style = "color:red;">Red</span> and 
 Guavas are <span style = "color:green;">Green</span>.</p>


HTML5 Tutorial - HTML Block and Inline Elements

Related Topics