Roadmap To Web Development

How To Build HTML Forms?

2020-08-16T17:36:00.001+05:30

HTML Form Tutorial:

Creating forms in HTML:

What are the forms in HTML and how to create forms in HTML?

we are going to take a look at HTML5 forms basics and HTML form designs. Forms in HTML5 are something we use a lot when we are on a website. They used to collect information

You might have filled out contact information on a website and when you submit that it is handled by the Web-page in HTML.

1.One-line text box :

Tag used: <input> we are going to create input fields in HTML. Now it all starts with a form element tag. The form element is just used to declare that this is the form that we are going to submit. We have to put the input element inside the form element. The most common input element is a one-line text box.

For this we use <input type= “text” name= “ ”> Input tag doesn’t need closing and we have mentioned the type is text. We can add the size of the box by using the size attribute.

The ‘name’ attribute is a JavaScript part, so don’t worry about that I will explain it in my JavaScript article.

<!doctype html>

<html>

</form>

</body>

</html>

OUTPUT:

2.Lable to the text box:

Tag used : <label>

label HTML for adding in an empty text box<label > tag is used. This should have an opening and closing tag. For example: We want to tie this to the input element. And we do that by ‘for’ element. You can give any name to the ‘for’ element. We have to create another attribute in the ‘input’ element which is ‘id’ and it should be matched with the ‘for’ element. And that’s what ties them together.

<!doctype html>

<html>

<head> Lable to text box</head>

<label for="firstname">First Name:</label>

</form>

</body>

</html>

OUTPUT:

3.Field box and legend elements :

If you want to add a box around your form or any particular part of your form then you can use the field box tag.

This element has an opening and closing tag. This is denoted as a <fieldset>.

And legend element is used for nt tag is used to bring your text from inside the box to running the border of the field box.

For this <legend > tag is used with both opening and closing pattern.

4.Multi-line text box:

Tag used : <textarea>

If you want to add multiple lines in the text box then this is used. And the element tag used is <textarea> input HTML. Unlike a one-line text box, you need a closing tag for a multi-line text-box.

For example:

From this example, we can add a multi-line text box having rows “40” and columns “10”.

I want to and label this you can add it by just typing simple text.

<!doctype html>

<html>

<h2>Multi line text box</h2>

<p>The textarea element defines a multi-line Text box.</p>

<textarea name="message" rows="5" cols="30">HTML is basic of web development

</textarea>

</br> </br>

</form>

</body>

</html>

OUTPUT:

5.Number input box:

Tag used : <input>

In this box, you can add only numbers. By giving text type as a number in the input tag you can get a number input box.

Also, you can give a maximum and minimum range of numbers.

For this we use <input type= “number” min= “ 0 ” max= “20”>

For example:

OUTPUT:

6.HTML Forms Email Address :

Tag used : <input>

If you want to add an input field that contains an email in HTML form then we use

<input type = “email”>.

Some smartphones automatically recognize and add ‘.com’ to the keyboards for matching the email address input.

HTML Form code for Email Address:

<label for="email">Enter your email id:</label>

OUTPUT:

7.HTML Forms File Upload:

Tag used : <input>

How to add pdf files in HTML form?

We see that option to add a resume or any of your certificates in the forms on the web page.

So how to create that option in form?

<input type= “file”> is used for adding files in the forms. And you have one “browse” button below that for uploading files from your computer.

HTML forms upload file is a very important function.

Example:

<label for="myfile">select file:</label>

OUTPUT:

8.Date and number box:

Tag used : <input>

In this, we are going to create a date and number box. If you want to add the date and number in your form.

For this, you are going to give type as the date and name as day.

For this we can use <input type= “date” name= “ ”>

You can use ‘max’ and ‘min’ attributes for giving restrictions to dates.

Example:

<label for="birthday">Birthday:</label>

OUTPUT:

9.Radio button:

Tag used : <input>

Radio buttons are those small circular buttons on websites that are used to survey or ask users their preferences. Radio buttons are used to select one choice from many options.

If you give different names to the radio buttons then it will select all the buttons. That’s why you should give the same name so that it will select one among them.

Value is just server-side code or you can say whatever be the answer is sent as a value to a server.

Example:

OUTPUT:

10.Checkbox:

Tag used : <input>

The checkbox is the same as a radio button but the only difference is you can select multiple answers or choices in a checkbox. This is the only major difference between radio buttons and checkbox

For example:

Which game are you interested in? <br>

<input type= “checkbox” name = “ ”> “football” <br>

<input type= “checkbox” name = “ ”> “basketball” <br>

So you can select all or whichever game you want to select from this list. And as you know the type of the button is a checkbox.

<label for="Education1">Computer Engineering</label>

OUTPUT:

11.Dropdown list:

Tag used: <select>

This is a little bit different from the checkbox. In a drop-down, you can select one from multiple choices. We use the “ select” element in the drop-down list.

Opening and closing of the select tag are necessary. Then we use the “option” element. You can add as many as an option you want to give to users. The first option in the drop-down list is by default get selected.

For example:

Code for dropdown list in HTML:

</select>

That is users can select only one value from 1 or 2 from drop-down options.

<!doctype html>

<html>

<h2>The Drop-Down Element</h2>

<label for="Education">Choose your education:</label>

<option value="BTech">BTech</option>

</select>

</form>

</body>

</html>

OUTPUT:

12.Submit button:

Tag used: <input>

After filling the information in the form you see one submit button on the webpage. Basically, it is for submitting your information to the form-handler.

So, how to create a form HTML submit button on your web-page? <input type= “submit”> is used for creating the submit your form.

This is basically used under the forms “action” attribute.

13.Action attribute:

After submitting the form which action to be performed is defined by the “action” attribute. When a user submits the form, all the data in the form is sent to the server. If you don’t use the action attribute, the action remains on the current webpage.

14.Target attribute:

The target attribute is used to specify the where to show the reaction that is gotten after submitting the form.

Target attribute take values:

1._self: This value is a default value. This is used for opening the response on the same tab or on the same window.

2._blank: This is used for opening the response on the new tab or on the new window.

3._parent: This is used for opening the response on the patent tab or window.

4._top: This is used for opening the response on the full body of the window.

5._framename: This is used for opening the response on the named iframe

There are some HTML forms builder or HTML forms generators free available in the market. HTML forms online easily created and used.

Important Things To Learn About HTML Table, HTML Styles And HTML Quotation Marks

2020-08-13T20:57:00.004+05:30

HTML STYLES:

HTML style is used to give a style to an element. Styles like font size, size, color, etc. HTML Style is not a tag, it is an attribute.

Syntax:

Property and Value is a part of CSS. So, we will discuss it in the CSS blog.

Some important HTML style CSS properties :

1.HTML style: Font-family :

This property is used for specifying HTML which font to be used.

2.HTML style:Text size :

Defines the text size of the HTML element.

3.HTML style:Text alignment :

Used for giving horizontal text alignment to HTML elements.

4.HTML style:Background-color:

Used for giving background-color of HTML elements.

5.HTML style:Text color :

Used for giving text color of HTML elements.

Program:

<!DOCTYPE HTML>

<HTML>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

HTML TEXT FORMATTING:

Text formatting is designed to give special meaning to the text. All tags require closing tags.

Formatting elements are created for defining special types of text:

1.<b> and <strong> tag:

Bold tag (<b>)is used to bold the letters. But it does not specify extra importance

Syntax:

The strong tag also used to bold the letters. But it specifies extra importance.

Syntax :

<strong>This is a strong tag. </strong>

2.<i> and <em> tag:

<i>tag is used to give an italic effect to the text. It is basically a part of a text in an alternative mood.

Syntax:

<i> Text is italic.</i>

em tag i.e. <em> is used to give an emphasized effect to the text. Content under this tag is basically italic. It is used for readers to read the text in verbal stress.

Syntax:

3.<small> tag:

Small tag (<small> tag) is used to define the element in smaller text.

Syntax:

<small> This is a small tag. small>

Program:

<!DOCTYPE HTML>

<HTML>

<p><strong>This text is strong.</strong></p>

<p><i>This text is italic.</i></p>

<p><em>This text is of emphasized effect.</em></p>

<p><small>This text is small.</small></p>

</body>

</html>

4<mark> tag:

<mark> tag is used to define the text with the highlighted effect.

Syntax:

<p> Always try to use<mark> mark tag </mark>for important text.</p>

5.<del> tag:

<del> tag is used to define the text with a strike-through effect. It is basically to show that the text has been deleted from that web-page.

6.<ins> tag:

<ins> tag is used to define the text with an underline effect. It is basically to show that the text has been inserted on that web-page.

Syntax:

<p> Use <del>delete tag </del> and <ins> insert tag</ins>.</p>

Program:

<!DOCTYPE HTML>

<HTML>

<h1>The ins and del element</h1>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

<h1>The mark element</h1>

<p>Learn Web Development from <mark>Techfreaktalks </mark> today.</p>

</body>

</html>

7.<sub> and <sup> tags:

<Sub> is used to give a subscript effect to that text. Subscript defines that half character below the usual line.

It is normally used for displaying ‘chemical formulas’ on web pages.

<Sup>is used to give a superscript effect to that text. Superscript defines that half character above the usual line. It is normally used for displaying ‘footnotes’ on web pages

Program:

<!DOCTYPE HTML>

<HTML>

<h1>The sub and sup elements</h1>

<p>This line contains <sub>subscript</sub> text.</p>

<p>This line contains <sup>superscript</sup> text.</p>

</body>

</html>

</body>

</html>

How to make an HTML table?

We see a large number of tabular data is displayed by using tables as it is easy and convenient for users to understand the data.

Using HTML, the HTML Table is created very easily.HTML table is used to organize your data into a number of columns and rows.

HTML Table is added to the web page by using the <table> tag.

The table tag requires a closing tag. As the table contains rows we require to specify it by using <tr>.

In each table, we categorize the data by adding a header to the top of the table. So, for adding a header we use the <th> tag.

Each text in the <th> tag is by default bold and its alignment is centered.

In each table, the data or cell which comes under the specified header is added by using the <td> tag. Each text in the <td> tag is by default regular and it is left aligned.

Html Table Attributes:

1.For Spanning the cell into many rows:

If you want to span the cell into more than one row, then the “rowspan” attribute is used.

2.For adding the caption:

For adding a caption to a table a “caption” tag is used. It must be added immediately after adding the <table> tag.

Syntax:

<Caption>Basic HTML Table</Caption>

3.Id:

For adding any special style for one specific table use the “id” attribute to a table.

Program:

<!DOCTYPE HTML>

<HTML>

<Caption>Basic HTML Table</Caption>

<table>

<tr>

<th>Lucky</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

HTML table with CSS:

1.For adding HTML table border:

For adding borders to a table we use “border” CSS property.

Syntax:

Table, th, td{

Border: 1px solid black;

}

2.For adding collapsed border:

For adding collapsed borders to a table we use “border-collapse” CSS property.

Syntax:

Table, th,td {

Border: 1px solid black;

Border-collapse: collapse;

}

3.For adding cell padding:

If you want to add space between cell content and it’s borders. If you don’t use it your content looks attached to the borders. For adding padding to a table we use “padding” CSS property.

Syntax:

Th, td{

Padding: 15px;

}

4.For adding border-spacing in HTML table:

For adding space between the cells we use this property. For adding border spacing to a table we use “border-spacing” CSS property.

Syntax:

table {

Border-spacing: 5px;

}

5.For left align heading:

As every heading text is by default centrally aligned. If you want to align it on the left side, “text-align” CSS property is used.

Syntax:

th{

Text-align: left;

}

HTML Quotation Marks:

In this section, we are going to see how to add Quotation type text on your web-page. We will look at some tags one by one.

1.HTML Short Quotation:

The HTML <q> element defines short quotation. If you want to add quotations to specific text then this tag is used.

Program:

<!DOCTYPE HTML>

<HTML>

<p>Browsers itself insert quotation marks due to the q element.</p>

<p>WHO's goal is to: <q>To improve reduce health risks,equity in health and promote healthy lifestyles .</q></p>

</body>

</html>

2.HTML Long Quotation:

The HTML <blockquote> element defines the quoted section. If you add quotations with some extra importance to that text then these Long quotation is used.

Program:

<!DOCTYPE HTML>

<HTML>

<p>Browsers usually indent blockquote elements.</p>

HTML was created for the purpose of giving structure to documents like paragraphs, headings and those were used for sharing scientific and technical documents.

</blockquote>

</body>

</html>

Improve Your HTML5 Formatting And HTML5 Image tag

2020-08-09T19:11:00.008+05:30

HTML5 Tags for line break,spacing,comments

1.Tags For line break:

For line break in HTML, the <br> tag is used.

As this is an empty tag it does not need a closing tag. If you want a break of three lines then three times break tag should be used.

It is used for writing addresses or poems. It is used for adding breaks in line not for adding spaces in the paragraph. This tag supports Global Attributes and Event Attributes in HTML.

SYNTAX:

<br>Learning Web development <br> is easy <br> with techfreaktalks.

PROGRAM:

<!DOCTYPE HTML>

<HTML>

<body>

<h1>The br element</h1>

<p><br>Learning Web development <br> is easy <br> with techfreaktalks </p>

</HTML>

</body>

OUTPUT:

2.For additional spacing (HTML for space) :

Additional spaces in HTML cannot be added by clicking the space-bar multiple times.

HTML spacing code is“  ”.

nbsp stands for non-breaking space.

For example:

If you want to print,

test1 test2

Then you have to write it like test1 &nbsp &nbsp &nbsp test2

3.Comment in HTML:

The HTML comments section is used to keep notes in your code section but it does not get displayed on the web page.

If your code is too big or too complicated then for making it easy to understand commonly comments are used. Comment tag does not support the Standard attribute and Event attribute.

For this we use

PROGRAM:

<!DOCTYPE HTML>

<HTML>

<body>

<p>HTML COMMENT.</p>

</body>

</html>

OUTPUT:

Learn HOW TO MAKE HTML LIST

HTML Tags for LISTS

If you look virtually at every web page, they always have some sort of list whether it is a menu or bullet list.If you want to add a group of related items to a list for your web page HTML lists tag are used.

HTML tags for lists:

Unordered list
Ordered List

We just have to use some specific tags to create a list. Both the list uses the Li element tag(<li>)

This is embedded inside either the OL or the UL element.

1.Unordered list :

An Unordered list is created by using the UL tag(<ul>).

It is the default list which people use while designing web pages. But every list item starts with a <li> tag.

In this unordered list, items are marked by bullets i.e. small black discs which are by default.

For other markers like circle and square, there is a CSS property “ list-style-type”.

The unordered list can be nested. List items can contain other HTML components.

SYNTAX:

<ul>

<li>JAVASCRIPT</li>

</ul>

2.Ordered list:

    An ordered list is created by using the OL tag (<ol>). 

An ordered list is used at lesser content. The ordered list contains alphabets and numbers.

Each item in the ordered list starts with <li> tag and ends with </li>But the default ordered list takes numerical values. An ordered list can be nested.

SYNTAX:

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JAVASCRIPT</li>
</ol>  

PROGRAM:

<!DOCTYPE HTML>
<HTML>
<body>

<h2>An Unordered HTML List</h2>

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JAVASCRIPT</li>
</ul>  

<h2>An Ordered HTML List</h2>
<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JAVASCRIPT</li>
</ol>  

</body>
</html>

OUTPUT:

In the ordered list we use the “type” attribute for defining the type of list item marker.

Type attribute

1. Type=“A”:

In this list, items are numbered as Uppercase letters.

2.Type=“a” :

In this list, items are numbered as lowercase letters.  

3.Type=“1” :

 In this list, items are numbered as numbers. This is the default marker.

4.Type=“I” : 

In this list, items are numbered as Uppercase roman letters. 

5.Type=“i”:  

 In this list, items are numbered as lowercase roman letters.  

There is a special attribute in the ordered list i.e. “start”. In the ordered list, the default list starts from 1. But if you want to start your list from a special counting then the “start” attribute is used. 

     

OTHER LIST in HTML:
In the HTML description list is also used. 
<dl> is used for description lists.
<dt> is used for description terms(name).
<dd> is used for describing each term.

HTML Image tag:
How to insert an HTML image?
Html images are used to give an aesthetic look and design to your web pages.

<img> HTML tag is used to add the desired image to a web page.

This tag does not require a closing tag. Actually <img>tag links up the image to the web page rather than inserting it to the webpage.

Two attributes are used along with the <img>tag in HTML.

Src: gives the path of the image.HTML image URL is added in the source.
Alt: gives the alternate text to be displayed if the image is not loaded due to technical issues.

The src attribute:

Src attribute detects an image by its URL. The image from the URL is retrieved with the help of a browser and then embedded into the document when the web page loads.

The Alt attribute:

The alt attribute is useful when an image is not displayed on the webpage. By seeing the alternate text added, the user comes to know about some idea of the image.

SYNTAX:

<img src= “img url” alt=”alternatetext">

You can define the HTML image size by width and height of the image by adding width and height attributes in the <img>tag.

<img src= “img url” alt=”alternatetext'' width ="200" height="300">

PROGRAM :

<!DOCTYPE HTML>

<HTML>

<body>

<h1>The img element</h1>

</body>

</html>

HTML Image map tag :

Image mapping is used to create clickable areas on the image.

So, don’t you think the first point is a little bit confusing, let's make it easy.

What is the use of the anchor tag?
For adding hyperlinks to your image we use an anchor tag.
If you click on any section of the image it will direct you to that connected hyperlink.
But what if I want two hyperlinks on the same image? Clearly, it is not possible by using an anchor tag.

So, we have another way to create hot-spot areas or more than one hyperlink on our image.
To create more than one hyperlinks we need to create a map. To create a map we use <map> tag.

<map> tag is a pair tag so we need to create a closing tag of map i.e. </map> tag.Inside a map tag, we create hotspot areas. So for that, we need to create a <area> tag. This is an unpaired tag.

<area> tag:

<area> tag  takes few attributes.

We have to assign values to those attributes.

Shape attribute:

The first is the shape. It gives us what type of shape that area should be. Values to shape are:
 Rect: It is going to create a rectangle area
Circle:  It is going to create a circular area
poly:  It is going to create a polygonal area
default:  It is going to take the entire area
So tag is syntax as: 

     <area shape= “rect”>

coords attribute:
 coords is an attribute that takes coordinates. Here we have to give values to coords attribute.
Values that we give to coords are “‘left’, ‘top’, ‘right’, ‘bottom’”.

So, what is left, top, right, bottom for the rectangle? 

Basically it is “x,y,(x+width),(y+height). By using some software like ‘Photoshop’ you can get it.

And after that, you can add a hyperlink to that area.

Syntax: 

    <area shape= “rect” coords= “x,y,(x+width),(y+height) href= “techfreaktalks”>

Now, the next important step is to give a name to the map. And this name which is given to the map tag is going to be used by <img> tag. We use an attribute called a usemap. In between, we give ‘# name of that image.

For different sections in the image, we will use different <area> tags and we will repeat this process. 

For mapping,  HTML image map online generators are available.
Html image map creator is basically used for creating multiple clickable areas in the image.

Basics Of HTML5 Tags And HTML5 Attributes

2020-08-03T15:03:00.015+05:30

HTML5 Tags:

As I mentioned in an earlier basic html5 tutorial blog, HTML uses various tags as it is a markup language.

In this blog, I am going to explain to you HTML Tags basic. These tags are closed into angled brackets. E.g. <Tag Name> .

Types of tags :

Opening tag
Closing tag

For example :

<p> opening tag

Content

</p> closing tag

HTML5 Elements:

Lots of students are always confused about what is the difference between HTML5 Tags and HTML elements.

HTML elements have an opening tag than some content and then a closing tag. That is everything from opening tag to closing tag.

<tag name> content …..</tag name>

For example:

<p> content…. </p>
<b> content….. < /b>

1.Empty Elements :

Empty HTML5 elements are those who do not have content in them. Also, they don’t have an end tag.

Example : <br> :

Break tags do not need an end tag.

2.Nested HTML5 Elements :

Elements in HTML can be nested easily. Nested means one element in other elements.

Following example shows nesting in HTML:

Fig

Here,

<html> is the root element. It has an opening and closing tag.

<body> is mentioned in the < html > tag.

<h1> is called inside the both tags.

So,If <h1> is a child then we can say <html> is grandparent of child<h1> and <body> is parent of child<h1>.

Basic HTML Document Structure:

1.HTML Doctype:

Web browsers can display a lot of different documents, it's not just HTML.

It can display SVG, SML files. So the very first thing we have to do is what type of file this is. And we do that by using the doctype declaration.

So that browser moves into a top-down manner & realizes that this is HTML language that’s it going to render the web page.

Doctype declaration: <! doctype html>

2.HTML5 Element:

Now the very first thing that comes after the doctype declaration is the HTML element. This is a container tag because we can add more tags under this tag.

<html> is opening tag.

As you know we need a closing tag i.e.</html>.

So, it works more like a wrapper. Everything that document content goes between this opening tag and closing tag.

3.Head Section:

After the HTML tag, we need a head section. So, we need an opening and closing head tags. i.e we need a head element. This is the first real section.

<head> opening tag

</head> closing tag

4.Title element:

Now we are going to embed another element. That is the title element.

For example: <title> My web page </title>

5.Body Section

Now we move on to the body section where all the action takes place. This is the heart and soul of your web page.

Pretty much everything between these two tags in the body element will show up on your web page

< body> opening tag

</body> closing tag

<!DOCTYPE html>

<head>

<title>HTML Elements Reference</title>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

Basic HTML Tags:

In this section, we are going to discuss basic tags in HTML. Some common tags which are used to make a pretty good website.

We are going to learn how to lay out a bunch of content inside an HTML and display it in your browser

1.Meta tags:

The meta tags are tags that define information about your file. So it's giving us metadata.

Meta tags are always used inside the head tag.

It is used to describe the character set, meta tags for description, keywords, viewport setting, etc.

Meta Tags are used by browsers like chrome, Mozilla Firefox to display content.

For example:

This tag is used for describing the character set.

If you are thinking about What is name and content here, so they are called as an Attribute.

2.HTML heading Tag:

The heading tag is newly introduced in the HTML5 version.<header> tag is used to define heading to section or document in HTML.

The header tag contains the title of the content which is to be displayed.

The header tag is newly introduced in the HTML5 version.

Both opening and closing tags are required. More than one header tag can be used in one document.

Header tags can be divided into H1 to H6 tags. These <h1> to <h6> tags displays different sized headings.

<h1> element is the superior form of heading followed by other tags in decreasing order of size and <h6> is smaller heading elements in all.

<!DOCTYPE html>

<html>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

</body>

</html>

3.HTML Paragraph Tag:

<p>...</p> is the paragraph tag needed to give a fixed format to the text contained in the main body section. Both opening and closing tags are essential.

When a paragraph tag is added in HTML code then the browser adds one blank line space before and after it.

<!DOCTYPE html>

<html>

<body>

<p>This is a paragraph.</p>

</body>

</html>

4.HTML Line Break Tag:

For line break, the <br> tag is used.

As this is an empty element it does not need a closing tag.

If you want a break of three lines then three times break tag should be used.

<!DOCTYPE html>

<html>

<body>

<h1>The br element</h1>

<p>To force<br> line breaks<br> use the br<br> element.</p>

</body>

</html>

Html Attributes list:

Attributes are used to give additional information about tags.

We can use attributes for any element.
Attributes should be declared in opening tags.
Attributes normally declared in pairs.
They are modifiers for tags.

For example:

<a href= “ https://linktr.ee/TechFreakTalks” title= “HTML5 Tutorial”>Google</a>

<a>is a basic anchor tag. I will explain to you in my next blog what an anchor tag does. This is an example of an attribute.

The href is mentioned inside <a> and it is an attribute of <a>.

Link is provided as a value.

Types of attributes:

Core attribute :

1. ID :

The id property indicates an unique id for an HTML5 component (the worth must be special inside the HTML document).

The id attribute is generally used to highlight a style in a template.

Syntax:

2. Class :

The class attribute determines at least one class name for a component.

The class attribute is generally used to highlight a class in a template

Syntax:

<p class= “important note”> This is an important event </p>

3. Style:

The style attribute can be utilized on any HTML element. It allows the Cascading sheet style within elements.

This attribute is under HTML with CSS.

Syntax:

<p style="color:gray;">This is a gray paragraph.</p>

4.Title:

It gives title to an element. It is extra information about an element.

When we move the cursor tooltip on that element it will get visible.

Syntax:

International attribute:

1.dir

The dir attribute permits you to demonstrate to the program about the direction in which the content should flow. The dir attribute can take one of two qualities.

Itr is used to flow left to right and rtl is used to flow content right to left

Syntax:

<p dir="ltr">Write this text left-to-right!</p>

2.Lang :

The lang attribute permits you to show the primary language utilized in a document, however, this property was kept in HTML just for in reverse similarity with the new version of HTML.

Syntax:

<!DOCTYPE html>

<body>

...

</body>

</html>

3.XML:lang :

The XML: lang attribute is the XHTML substitution for the lang attribute. The estimation of the XML:lang characteristic should be an ISO-639 nation code.

That means it describes language which is contained in a tag.

Syntax:

<a xml:lang= “en” href= “ABC” hreflanf= “XY”> Click for Hindi </a>

Here HTML anchor tag is used which is denoted by <a>.

There are some different attributes from all above attributes which are mostly used

1.Valign:

You can use this attribute for top, middle, and bottom alignment. Vertical alignment takes place by using this attribute.

Syntax:

<Tag name Valign = “value”> content goes here </tag name>

2.Background:

Given by any specific URL. It is used to place the background image behind an element.

Syntax:

<tag name style= “background-img: url(url of that img);”> content goes here </tag name>

3.Height:

It is given by numerical value. This attribute is used to specify the height of the table, images, etc.

Syntax:

4.Width:

It is also given by numerical value. This attribute is used to specify the width of the table, images, etc.

Syntax:

Why is HTML5 so popular nowadays?

2020-07-29T19:50:00.004+05:30

INTRODUCTION TO HTML:

Even if your goal is not to become a web developer or web designer and do it professionally, still learn HTML and CSS because it’s an amazing skill to have, especially in today’s day and age.

HTML is an invaluable skill.

HTML is the bedrock of the World Wide Web and if you are going to do anything even in other languages involving the web it is highly important you know HTML.

Web development broadly refers to the task related to your web applications or web pages. It basically adds up life to your ordinary web page. And HTML is the first and basic step towards your web development career.

HTML full form HyperText Markup Language. It’s basically just a language that we can use to create web pages. So, if you have ever been on the internet almost every single page on the internet was written in this language called HTML.

HTML adds meaning to raw content by marking it up.

HTML describes the structure of web pages using a process called markup.HTML mostly consists of elements and these elements are the building blocks of any HTML page and are represented by HTML tags.

THE HISTORY OF HTML:

The person named ‘Tim Berners-Lee’ invented HTML in 1991 who was not a Technical person but a physicist in Switzerland.

“HTML was created for the purpose of giving structure to documents like paragraphs, headings and those were used for sharing scientific and technical documents.”

Researchers from across the world were able to share their ideas after HTML creation.

VERSIONS OF HTML:

HTML 2.0 was the first definitive version of the HTML in 1995. This version covered most of the elements except elements like tables, align attributes, etc.
HTML 3.0 was also invented in late 1995 which upgraded the utilities and functions of HTML.
HTML 3.2 was the version that had integrated support for images, tables, most of the align attributes invented in 1996.
HTML 4.0 included stylesheets in it.
Html 5 was released by W3C in 2014 and it is in use nowadays.

Why html is important :

1) For Students or working professionals to become a Software Engineer:

HTML is a document that contains text, so similar to a Microsoft word or even notepad. It is very easy to read. Web browsers read and display documents that contain HTML. There are lots of advantages to having knowledge of HTML. Students or working professionals must have knowledge of HTML for building their career in web development or any field of Information Technology.

Just having an understanding of tags is a basic requirement of HTML. Some advantages of knowing HTML

Building website or web pages: Creating websites or web pages is so easy if you learn HTML. That means if you want to know more about Front end developer skills then HTML is a must.

Learn computer languages: If you have knowledge about HTML then learning technologies related to HTML like CSS, JavaScript, PHP, etc becomes easier.

Web development jobs: There are lots of job opportunities in web development and the first requirement for becoming a web developer is HTML.

Web designer: If you are willing to become a web designer then HTML is a must.

2) For bloggers:

This question gets brought up a lot because many people wonder well why is HTML needed if there are things like WIX, WordPress and blogger or another place is where I can just go up and I can make a blog and I can just build something really quickly and it does all of the codings for the most part for me, what is the importance of learning HTML when there is no need for. But if you dig deeper into it you actually could find out there is more use for that then what meets the eye.

It gives you insight on what to do when you have a problem with your site instead we are just blaming it on WordPress or site builder you could actually fix it because you have that basic knowledge

It will give you the opportunity to tweak things when you are in your web browser. You can just go into the HTML and if there is an advertisement or something and that’s annoying you, you can just get rid of it.

3)For Marketing Specialists:

In a wide range, HTML is required for marketing specialists to optimize their web pages and landing pages.

4)For Freelancers:

In this growing digital era, web development is taking a peak rapidly. As in freelancing, web development service is highly in demand. So, to make yourself capable of being the best freelancer you must start with the HTML.

You can define the series of HTML tags which will define the layout and the look and the feel of your website. So, if you can learn what those HTML tags are and if you can learn where to put them and how to use them together, then you can build your own website. It’s actually a lot easier than people think to build a custom website. I mean so often people will run off to use as a content management system or they use programs to build websites for them. But sometimes it’s fun to just go in and get your hands dirty and start building a website from scratch.

Don’t think more and start to learn HTML. You will surely become super interested after seeing each element in the way it works.

APPLICATIONS OF HTML:

As mentioned before the importance of HTML in every aspect. following are some of the applications of HTML:

OFFLINE SUPPORT:

We can download the HTML page without the internet if it is loaded already.

HTML5 GAME DEVELOPMENT:

These days, HTML is used in the game development sector.

INTERNET NAVIGATION:

Using HTML tags, navigation through one web page to another page becomes simpler.

WEB PAGE DEVELOPMENT:

Almost every web page is made up of HTML.

ADVANTAGES OF HTML:

HTML can be learned easily
It is supported by all browsers.
It’s syntax is very simple.
It is supported by most of the web development tools.
It is free to use.

TEXT EDITORS FOR HTML :

Very first thing in writing HTML is picking some programs that you can use to write HTML files and there are a bunch of different options when you are trying to choose an HTML text editor. If you are thinking you need some software for that, then you are wrong.

You can use notepad as a HTML editor if you have Windows and a text editor for HTML mac users is TextEdit. These are just bare-bones

If you want a specially designed type of text editor then it’s totally fine. You can use open-source HTML editor like Visual Studio, Dreamweaver,bluegriffon.

The advantage of specially designed types of editors is they have some add-ons or some shortcuts. But they might be complicated for beginners.

I think for beginners less complicated things are better. So you may want to err more on the side of doing something simple and then once you learn HTML move up to one of the specially designed text editors.

WHAT’s NEXT:

If you are thinking, How I learn HTML or how I learn to code after knowing all this information about HTML. In the next blog, we are going to explain HTML in detail. Basically a full tutorial on HTML.

HTML tutorial or HTML5 tutorial covers all the concepts including basic and advanced. This HTML Tutorial is specially created for people who are absolute beginners or professionals (Web Designers or web developers) who want to leverage their skills.

Each topic is explained step by step which makes it easier to learn the topic.

In this tutorial, every point is explained with at least one example.

So, Are you interested in learning HTML?

How To Become Front End Developer In Easy Way

2020-07-13T19:10:00.020+05:30

Technology assumes a huge job in our everyday lives, from the simplest of applications to the most ground-breaking developments. Each site or piece of programming that we experience has been worked by a web engineer -yet what precisely is web development, and what do

web designer do?

Responsive Web Design is utilized in a wide range of present-day web development.

Let’s get some foundation first, however —we have to figure out how to walk before we can run. How to become a web developer from scratch is always a question for a lot of students who don’t have more knowledge about coding.

Essential steps you'll have to take toward turning into a web developer:

Make sense of The Skills You'll Need
Assemble Experience (While Learning) Through Test Web Development Projects
Locate the Ideal Web Developer Jobs for Your Goal

It's essential to note there are two classes of web developer jobs:

Front-end developer
Back-end developer

In this article, we are going to talk about front end developers.

HTML and CSS are really not in fact programming languages; they're simply page structure and style data.

However, before proceeding onward to JavaScript and other genuine languages, you have to know the basics of HTML and CSS, as they are toward the front of each website page and application.

An overview:

HTML gives the fundamental structure of sites, which is improved and altered by different innovations like CSS and JavaScript.

CSS is utilized to control presentation, design, and format.

JavaScript is utilized to control the behavior of various components.

HTML(HyperText Markup Language):-

HTML is the Skeleton of a website It contains the data that mentions to the program what is on the page regarding text, links, where to discover images. It also gives priorities to text, is it a header? Is it a paragraph? Is it a subheading?

WHY HTML IS USED?

Using HTML, you create a user interface for web applications and mobile applications.HTML allows image, video, and other files to be linked which is used to create interactive web pages.

Once you master it, you can create simple websites and complex web applications.

HTML includes:-

Page formatting
Tag and document structure
Displaying images
Using nav, article, and div elements
Hyperlinks
Linking to pages and downloadable content
Creating lists
HTML color codes
Controlling styling (fonts, colors, and more)

HTML5 Tags play a vital role in HTML. Below is one example of how heading tags work in HTML. Let's see

As we go from H1 to H6, heading size decreases as follows:

Isn't interesting?

CSS(Cascading Style Sheets):-

This programming language directs how the HTML components of a website ought to show up on the frontend of the page.

HTML vs CSS

HTML gives the row tools expected to structure content on a site. CSS, then again, assists with styling this substance so it appears to the user how it was expected to be seen. These languages are kept separate to guarantee sites are built effectively before they're reformatted.

Let’s take look on CSS syntax:

A CSS rule comprises a selector and a declaration block:

The selector focuses on the HTML component to style (h1).

Every declaration incorporates a CSS property name and a value, isolated by a colon.

Now, let’s take an example of how CSS works:

My program's default font style is Calibri, size 10, so on the off chance that I visited a site page where the designer didn't apply my template, I would see the site page in Calibri, size 10.

The vast majority of web pages I visit don't use Calibri, size 10 -that's because the web designers behind those pages started with a default style sheet that had a default font style, and afterward, they overrode my program's defaults with custom CSS. That is the place "cascading" becomes possibly the most important factor.

JavaScript:-

JavaScript is an object scripting language that is used in web pages along with HTML.

JavaScript is very popular and used universally by all web browsers for its support which allows dynamic content to get executed on a web page.

JavaScript can calculate, control, and validate data.

What is JavaScript utilized for?

JavaScript is a logic-based programming language that can be utilized to modify site content and cause it to carry on in various manners in the response to a user's activities.

Regular uses of JavaScript incorporate confirmation boxes, invitations to take action, and adding new identities to existing data.

In short, the vast majority of the dynamic conduct you'll see on a website page is because of JavaScript, which expands a browser's default controls and practices.

HOW JavaScript WORKS?

Most importantly JavaScript is limitlessly simpler than Java.

One case of JavaScript in real life is taking care of the boxes that pop up on your screen. Consider the last time you entered your data into an online form and a confirmation box popped, requesting that you press "OK" or "Cancel" to continue. That was made conceivable as a result of JavaScript.

In the code, you'd discover an "if ... else ..." statements that advise the PC to do a certain thing if the user clicks "OK," and an alternate thing if the client clicks "Cancel."

You can add JavaScript to an HTML report by including these "scripts," or scraps of JavaScript code, into your document's body.

WHY JavaScript?

Today, there are millions of websites using JavaScript. As a customer-side programming language, JavaScript causes web developers to make web pages dynamic and intelligent by executing custom customer-side scripts.

These are some companies using JavaScript language.

Practically every company you can think of uses JavaScript. Why?

The web is all-unavoidable in our world.
The web browser (or a web browser part) is the main tool accessible for utilizing the web.
JavaScript is the only language that is native to the web browser, so if you’re going to write a web browser application, you have to use JavaScript.

Go and explore front end development by following courses:

1)Foundation of web development by udemy

2)HTML, CSS, and Javascript for Web Developers by class central

3)Introduction to HTML5 by freecodecamp

4)Web development Bootcamp by udemy

5)Learn HTML5 and CSS3 From Scratch— Full Course by freeCodeCamp

JOBS & CAREER :

Lots of students have questions that, is HTML, CSS, and JavaScript sufficient to get a job?

Indeed surely yes… there is no uncertainty in it.

As a fresher on the off chance that you need to begin your profession in Web Development, these are the technologies you would need to begin with.

JavaScript developer is in demand.

Given their analysis of more than 100,000 coding tests, they found that 70% of organizations are hoping to hire JavaScript engineers.

A report by HackerRank, then, found that the worldwide interest for JavaScript exceeds the expertise available.

When you've developed a strong web developer range of abilities, it's an ideal opportunity to consider what sort of work you need to do—do you need a standard activity as a developer for a built-up organization, or would you say you are more qualified to begin a freelancing business and working for yourself?

1) Freelance work:

In freelancing, the web development niche is leading.

You can start working in this COVID 19 crisis period on various trusted freelancing sites. Just put one thing in mind "provide high-value work" to be on top and you will see growth in your freelancing profile. You can start with the following platforms:

1. FIVERR
2. UPWORK
3. FREELANCER

2) 9-5 web developer job:

Beginning at a built-up organization is a good method to learn best practices at an early stage.

3) Web developer job resources:

In either case, when you begin looking for paid work as a web designer you'll have to stick your eyes to online job boards. Resources like

1. Glassdoor

2. Indeed

4) Remember TO NETWORK WITH OTHER WEB DEVELOPERS!

Destinations like Meetup.com and Women Who Code are important resources with regards to network opportunities and making up close and personal occupation associations at gatherings, job fairs, and workshops. Use them!

CONCLUSION

If you want to do business, if you are interested in freelancing or have a career in the Web Development industry, particularly as a designer.

Web Development has a couple of angles however, coding or other specialized, yet in addition the project management, examination, testing, business and so on.

The main fact is you can have lots of opportunities for gaining money as I have mentioned in the article.

So, don't you think learning about web development is good for your career?

Roadmap To Web Development

How To Build HTML Forms?

HTML Form Tutorial:

Creating forms in HTML:

1.One-line text box :

2.Lable to the text box:

3.Field box and legend elements :

4.Multi-line text box:

5.Number input box:

6.HTML Forms Email Address :

7.HTML Forms File Upload:

8.Date and number box:

9.Radio button:

10.Checkbox:

11.Dropdown list:

Tag used: <select>

12.Submit button:

Tag used: <input>

13.Action attribute:

After submitting the form which action to be performed is defined by the “action” attribute. When a user submits the form, all the data in the form is sent to the server. If you don’t use the action attribute, the action remains on the current webpage.

14.Target attribute:

The target attribute is used to specify the where to show the reaction that is gotten after submitting the form.

Important Things To Learn About HTML Table, HTML Styles And HTML Quotation Marks

HTML STYLES:

HTML TEXT FORMATTING:

Bold tag (<b>)is used to bold the letters. But it does not specify extra importance

Syntax:

Syntax :

3.<small> tag:

How to make an HTML table?

Html Table Attributes:

2.HTML Long Quotation:

Improve Your HTML5 Formatting And HTML5 Image tag

HTML5 Tags for line break,spacing,comments

Learn HOW TO MAKE HTML LIST

HTML Tags for LISTS

HTML Image tag:

Basics Of HTML5 Tags And HTML5 Attributes

HTML5 Tags:

Basic HTML Document Structure:

Html Attributes list:

International attribute:

Why is HTML5 so popular nowadays?

INTRODUCTION TO HTML:

THE HISTORY OF HTML:

VERSIONS OF HTML:

Why html is important :

1) For Students or working professionals to become a Software Engineer:

2) For bloggers:

3)For Marketing Specialists:

4)For Freelancers:

APPLICATIONS OF HTML:

ADVANTAGES OF HTML:

TEXT EDITORS FOR HTML :

WHAT’s NEXT:

How To Become Front End Developer In Easy Way

Essential steps you'll have to take toward turning into a web developer:

It's essential to note there are two classes of web developer jobs:

An overview:

HTML(HyperText Markup Language):-

WHY HTML IS USED?

HTML includes:-

CSS(Cascading Style Sheets):-

HTML vs CSS

Let’s take look on CSS syntax:

JavaScript:-

What is JavaScript utilized for?

HOW JavaScript WORKS?

WHY JavaScript?

Go and explore front end development by following courses:

JOBS & CAREER :

1) Freelance work:

In freelancing, the web development niche is leading.

You can start working in this COVID 19 crisis period on various trusted freelancing sites. Just put one thing in mind "provide high-value work" to be on top and you will see growth in your freelancing profile. You can start with the following platforms:

1. FIVERR 2. UPWORK 3. FREELANCER

2) 9-5 web developer job:

3) Web developer job resources:

4) Remember TO NETWORK WITH OTHER WEB DEVELOPERS!

CONCLUSION

1. FIVERR
2. UPWORK
3. FREELANCER