Trending

Learn HTML in easy way from basics

byAdmin •
0

HTML stands for Hyper Text Markup Language. HTML allows you to format, arrange and group text, display text as links, and add images and multimedia to a webpage. Tim Berner’s Lee introduced HTML in 1991. HTML 1.0 is the first version & HTML 5.0 is currently used. It is used for making websites. To make website, every code written inside the HTML by using editors like notepad, notepad++, visual studio etc.

Learn HTML in easy way from basics
Learn HTML in easy way from basics

STRUCTURE OF HTML

Rules to write HTML code

  • Use Proper Document Structure.
  • Always starts from <html> and ends to </html>
  • Back slash( / ) is used to close the tag.
  • Every tag has their close tag. Except some empty tags.
  • Main codes are written inside the body.
  • Don not Use Presentational or Behavioral Markup.
  • Use <h1> Tag Only Once Per Page.
  • Avoid Too Much Commenting.
  • Always Write Standards-Compliant Markup.

Advantages of HTML

  • Easy to learn and use.
  • Every browser support HTML.
  • Easy to update and maintain any website.
  • It is not case sensitive.
  • IT is lightweight and quick.
  • Easy to edit.
  • Software is free.
  • Very useful for beginner web designers.

Disadvantages of HTML

  • Need to write lot of codes for making simple website.
  • Security features are not good in HTML.
  • Long codes make complexity.
  • Some times long code and lots of pages can hard to handle.

HTML Attributes

Attributes are also known as property of Tags. It provides additional features of the tag. All HTML elements can have attributes. Attributes are always specified in the start tag. Attributes usually come in name/value pairs like: name=”value” . Most trending and used tags are ;

  1. Height & Width:-
    • it is used to set height and width of image.
      • <img src="image_name.jpg/png" height="200" width="150">
  2. bgcolor:-
    • it is used to set background color.
      • <body bgcolor=”red”>
  3. href:-
    • The href attribute specifies the URL of the page. <a> attribute define the hyperlink.
      • <a href="file_name.html>
  4. src:-
    • The <img> tag is used to put an image in an HTML page. The src attribute specifies the path to the image to be displayed.
      • <img src="image_name.png/jpg>
  5. lang:-
    • it is used to declare language.
      • <html lang="en">
  6. title:-
    • it is used in <p>. The value of title attribute will be displayed as a tooltip. When you mouse over the paragraph.
      • <p title="this is tooltop"> hello mouse over me </P>
  7. Style:-
    • it is used to specifies the inline CSS style for an element.
      • <p style="color:red"> this is Red paragraph </P>
  8. alt:-
    • it is used to specifies an alternate text for an image.
      • <img src="image_name.png" alt="rose">
<html lang="en"><head><title> HTML attribute </title></head><body bgcolor="green"><img src="techguru.jpg" height="350" width="300" alt="follow techguru"><h1 style="color:red">this is red heading</h1><p title="this is tooltip"> mouse over me</P><a href="#"> you can link here </a></body></html>

HTML headings

There are six different levels of heading tag. i.e. <h1>,<h2>,<h3>,<h4>,<h5> & <h6>. <h1> is the largest heading and <h6> is the smallest .

<html><body><head><title> HTML headings </title></head><body><h1> This is first heading </h1><h2> This is second heading </h2><h3> This is third heading </h3><h4> This is fourth heading </h4><h5> This is fifth heading </h5><h6> This is sixth heading </h6></body></html>

HTML Text Formatting

<b> – To make the text bold

<i> – To make the text italic

<u> – To make the txt underline

<br>- To break the line

<hr>- To insert horizontal line

<sup>- To make the text upper to it’s normal position

<sub>- To make the text lower to it’s normal position

<strong> – Important text

<em> – Emphasized text

<mark> – Marked text

<ins> – Inserted text

<del> – Deleted text

<small> – Smaller text

<html><body><p>this is normal paragraph</p><p><b>This text is bold</b></p><p><i>This text is italic</i></p><p>This is<sub> subscript</sub> and <sup>superscript</sup></p><p><strong>This text is important!</strong></p><p><em>This text is emphasized.</em></p><p><small>This is some smaller text.</small></p><p>Do not forget to buy <mark>milk</mark> today.</p><p>My favorite color is <del>blue</del> red.</p><p>My favorite color is <del>blue</del> <ins>red</ins>.</p><p><hr>horizontal line</hr></p></body></html>

May you also read: I Was My Own Route Exercise Class 12 English: Question Answers solutions

How to insert image in HTML

We can use <img> tag to insert image in the webpage. Scr, height, width, alt are the attributes of <img> tag. It is a empty tag.

Syntax:

<img src="image_name" height="value" width="value">example :-<img src="rose.png" height="500" width="400" alt="this is rose">

Marquee Tag in HTML

This tag is used to make the text or image moveable into the screen. Value of direction are up, down, left, right.

syntax :-<marquee behavior="alternate" direction="value"> This text is move </marquee>

How To Insert Style in HTML

Setting the style of an HTML element can be done with the help of Style attribute. It is usually use with paragraph <P>, headings <h1> etc. It is generally comes inside the html tags.

Syntax:<tag_name="property : value">

How to set background color in HTML

To set background color use style attribute inside the body tag.

<body style="background-color:green">

How to set font-family, size & text alignment in HTML

To set font family we have to use style attribute . 

<p style="font-family : new times roman"><p style="font-size : 300%"><p style="text-align : center">

How can we create Table in HTML

We can create table with the help of <table> tag including table header<th>, table data<td>, colspan and rowspan (spans many column and rows). Table is very useful in HTML. Table row is defined by <tr> tag.

Example:<html><head><title> This is table </title></head><body><table border="10" align="center" cellspacing="10"><tr><th> Name </th><th> Roll no </th><th> Address </th></tr><tr><td> Sujan Thapa Magar </td><td> 25 </td><td> Nepalgunj, Banke </td></tr><tr><td> Ramesh Shahi Thakuri </td><td> 4 </td><td> Nepalgunj, Buspark  </td></tr><tr><td> Manoj Bohora </td><td> 18 </td><td> Tulsipur, Dang </td></tr><tr><th> follow techguru66</th></tr></table></body></html>

Hyper Text Markup Language lists

Lists allow web developers to group a set of related items in lists.

Example

An unordered HTML list:

  • Item
  • Item
  • Item
  • Item

An ordered HTML list:

  1. First item
  2. Second item
  3. Third item
  4. Fourth item

Unordered List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

Example

<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>

Ordered List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

Example

<ol>
 <li>Coffee</li>
 <li>Tea</li>
 <li>Milk</li>
</ol>

Description Lists

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

Example

<dl>
 <dt>Coffee</dt>
 <dd>- black hot drink</dd>
 <dt>Milk</dt>
 <dd>- white cold drink</dd>
</dl>
<html><body><h2>An unordered HTML list</h2><ul>  <li>Coffee</li>  <li>Tea</li>  <li>Milk</li></ul>  <h2>An ordered HTML list</h2><ol>  <li>Coffee</li>  <li>Tea</li>  <li>Milk</li></ol>  <h2>A Description List</h2><dl>  <dt>Coffee</dt>  <dd>- black hot drink</dd>  <dt>Milk</dt>  <dd>- white cold drink</dd></dl></body></html>

How to create Form in HTML

Form is a format where user provide their information. Those information can be the personal information or any other information about user or feedback about something.

A form may contain form elements as boxes, drop-down list, and radio button. It’s elements are input, select and option, text area, button etc.

what are the input elements in HTML

The input elements enables you to insert fields such as radio buttons, check boxes, text boxes etc.

Following are the common attributes of input element ;
  1. Type – Define the type of field to be created in the form.
  2. Name – Specifies the name of a field in the form.
  3. Value – Specifies the default value of a field in the form.
Value of input element ( type )
  1. Radio – You can select only one radio at a time.
  2. Check box – You can select multiple check-boxes at a time.
  3. Password – Any character you type in the password field is displayed as a password character.
  4. Text – It creates text fields.
  5. Submit – When you click submit button the values of the form are submitted.
  6. Reset – When you click reset button, the values entered in the form are cleared automatically.

How to create form in HTML

<html><head><title> HTML Form page </title></head><form>  <label for="fname">First name:</label><br>  <input type="text" id="fname" name="fname" placeholder="Enter firstname"><br>  <label for="lname">Last name:</label><br>  <input type="text" id="lname" name="lname" placeholder="Enter lastname"><br>   <label for="pass">Password:</label><br>  <input type="password" id="pass" name="password" placeholder="Enter password"><br><br>   Gender:<br>   <label for="male">Male</label>  <input type="radio" id="male" name="gender" value="male" checked> <label for="female">Female</label>  <input type="radio" id="female" name="gender" value="female"> <label for="other">Others</label>  <input type="radio" id="other" name="gender" value="other"><br><br>Do you like this page <i>(techguru66)</i><br><label for="yes"><b>Yes</label>  <input type="checkbox" id="yes"  name="yes" value="yes"> <label for="no"><b>No</label>  <input type="checkbox" id="no"  name="no" value="no"><br><br><br><input type="submit" value="submit"><input type="reset" value="reset"></form></body></html>

It defines a drop down list. Use “select” attribute in option to get one option selected. It is very useful in a webpage, it allows to select a option among multiple choices. It makes easy to select some values for user.

Syntax:<select name="name"><option value="value> value name</option>Example :-<html><head><title> HTML Form page </title></head><h3>Mobiles available in nepal<h3><select name="mobile"><option value="iphone">iphone</option><option value="samsung">samsung</option><option value="vivo">vivo</option><option value="redmi">Redmi</option><option value="motorolla>motorolla</option><option value="nokia">Nokia</option><option value="xiaomi">xiaomi</option></select></body></html>

Text Editor for HTML

Text editor are usually used to Edit or write codes for webpage. Some mostly used Text editors are;

  1. Notepad
  2. Visual studio
  3. Sublime text
  4. Notepad++
  5. Atom
  6. Brackets
  7. Bluefish
  8. Textedit
  9. Editplus
  10. TextMate

How to use Notepad

  • At first, open Notepad
  • Write some code on this blank page
  • Click on “File”
  • Click on “save as”
  • Select destination
  • Write file_name.html
  • Click on “ok”

How to use Visual Studio

  • At first open visual studio
  • Click “ctrl+N” for new page
  • Save before write
  • Click on “save as”
  • Select destination
  • Write file_name.html
  • Click on “ok”
  • Now start write code

Benefits of visual studio

  • Lightweigt, powerful & can be easily installed in any platform.
  • VS code also supports CSS, java, python, Php etc and other languages.
  • Easy to use for begginners
  • It has live server to run code

Here you will find something new , Go for more –>

You can follow me here, Follow me

Check out our official Facebook page: (1) TechGuru66_Official | Facebook

Tags:

Post a Comment

Previous Post Next Post