HTML(Hyper Text Markup Language)

HTML

What is HTML?


Most of us know that HTML stands for Hyper Text Markup Language. HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet. It is relatively easy to learn, with the basics being accessible to most people in one sitting; and quite powerful in what it allows you to create.

HyperText Markup Language is defined as:
  • HyperText is the method by which you move around on the web — by clicking on special text called hyperlinks which bring you to the next page.
  • Markup is what HTML tags do to the text inside them. They mark it as a certain type of text (italicised text, for example).
  • HTML is a Language, as it has code-words and syntax like any other language.

How does it work?

HTML consists of a series of short codes typed into a text-file by the site author — these are the tags. The text is then saved as a html file, and viewed through a browser, like Google Chrome, Internet Explorer or Netscape Navigator. This browser reads the file and translates the text into a visible form, hopefully rendering the page as the author had intended.

Writing your own HTML entails using tags correctly to create your vision. You can use anything from a rudimentary text-editor to a powerful graphical editor to create HTML pages. Further we will let you know about the editors and there usage.


Features of HTML


1) It is a very easy and simple language. It can be easily understood and modified.

2) It is very easy to make an effective presentation with HTML because it has a lot of formatting tags.

3) It facilitates programmers to add a link on the web pages (by html anchor tag), so it enhances the interest of browsing of the user.

4) It is platform-independent because it can be displayed on any platform like Windows, Linux, and Macintosh, etc.

5) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which makes it more attractive and interactive.


Description of HTML Example

< !DOCTYPE> : It defines the document type or it instruct the browser about the version of HTML.

< html> :This tag informs the browser that it is an HTML document. Text between html tag describes the web document. It is a container for all other elements of HTML except

< head> : It should be the first element inside the element, which contains the metadata(information about the document). It must be closed before the body tag opens.

< title> : As its name suggested, it is used to add title of that HTML page which appears at the top of the browser window. It must be placed inside the head tag and should close immediately. (Optional)

< body> : Text between body tag describes the body content of the page that is visible to the end user. This tag contains the main content of the HTML document.

< h1> : Text between < h1> describes the first level heading of the webpage. There are total 6 heading tag from h1 to h6 they all differ in size.

< p> : Text between < p> describes the paragraph of the webpage.

< b> : Text between < b> makes the text bolder.

< br> : When break tag is used the content after it will start from new line. You can see the example of it in next section.

< hr> : Horizontal tag is a line which separate the content in HTML Page.

< span> : Span tag is an inline container used to mark up a part of a text, or a part of a document.

< img> : Image tag is used to insert image in a HTML Page.

< div> : Division tag defines a division or a section in an HTML document.

< li> : List tag is used to define a list item. They are used inside the ol and ul tag.

< ol> : Odered List is used to make the list item in ordered form i.e 1,2,3,...

< ul> : Unordered list is used to make the list item in Unordered form i.e in bullet form •

<table> : table tag is used to make table in webpage.It contain sub tag such as <th>, <tr>, <td>.

<th> : th tag is used to give heading of each cell of table.

<tr> : tr tag is used for giving row to table.

<tr> : td tag is used for giving table data/cell of table.

NOTE: We have only covered some basic tags of HTML till now which will be helpful for starting of web development. Example of all tags have been given below in our next section.
• Left Side image shows the Code of each tags where as Right side image show the result of each code. You can run them in any browser of your choice.


Complete Form in HTML

• Form is really important for storing the user data.
• <form> tag is used to create an HTML form for user input.
• <form> elements contain one or more of them:-

  1. <input>
  2. <label>
  3. <option>
  4. <select>
  5. <button>
  6. <textarea>
  7. <fieldset>

• Attributes used in form tag are:-
  1. action
  2. name
  3. method
  4. target

Above all are some mandatory attributes used for form.

  1. <input>

    • Input tag specifies an input field where the user can enter data.

How to run Html file in browser?

  • Firstly, create one folder where you will save your html files.
  • Then go to your Code editor (in our case we have use VS-Code)and open that desired folder.
  • After that create one new file inside that folder with the help of code editor and give extension as ".html" it is important to give extension as .html so that it can run in our browser.
  • Write your code and save it.Then open that folder where you have saved it and then open your saved file, you will see that your file will open in your browser.
  • It is best if you use Google Chrome as your default browser.

    • You can watch below video which has covered all the above steps.


HTML Tags

HTML is all about Tags. These Tags are like keywords which defines that how web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML content and a simple content. HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags.

When a web browser reads an HTML document, browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties. An HTML file must have some essential tags so that web browser can differentiate between a simple text and HTML text. You can use as many tags you want as per your code requirement.

  • All HTML tags must enclosed within <> these brackets.
  • Every tag in HTML perform different tasks.
  • If you have used an open tag , then you must use a close tag (except some tags)

Following are explaination of some tags which are most important and are used in every website which we go through in our day to day life:


# Basic Format of every website:
Basic Format

# Heading Tag:
Heading Tag Code
Heading Tag Result

# Para Tag:
Para Tag Code
para Tag Result

# Anchor Tag:
Anchor Tag Code
Anchor Tag Result

# Image Tag:
Image Tag Code

# Bold Tag:
Bold Tag Code
Bold Tag Result

# How to write a comment while writing a code of any website as comments are useful for our colleagues to understand our code:
Comment Tag Code

# Break Tag:
Break Tag Code
Break Tag Result

# Division Tag:
Division Tag Code
Division Tag Result

# Horizontal Tag:
Horizontal Tag Code
Horizontal Tag Result

# Span Tag:
Span Tag Code
Span Tag Result

# Ordered List Tag:
Order List Tag Code
Order List Tag Result

# Unordered List Tag:
Unorder List Tag Code
Unorder List Tag Result

# Underline Tag:
Underline Tag Code
Underline Tag Result

# Example:
Underline Tag Code
Underline Tag Result

•Here is a full tutorial video on HTML Tags


HTML Attributes

• Attributes are special properties which are given to html elements ( tags ) which are used to customize the code.
• Attributes are always given to the opening of any tags.
• Attributes give additional information about Tags.
• List of some basic Attributes used in HTML:-

  1. href: href attributes is used to specify the URL of the other page that you want to link.It is used with anchor tag.
    Ex. <a href="https://collegeacademy.in"> collegeacademy</a>.

  2. src: src attributes is used to give path of the image. It is also used with other tags like link tag to link external css file and with script tag to link external JavaScript file.
    Ex. <img src="source of image file will come here">

  3. height and width: height and width attributes are used to give height and width to image.
    Ex. <img src="source of image file will come here" width="200px" height="200px">

  4. alt: alt attribute is used for giving text name of an image, if image cannot display due to some reason then in place of that image the text you have given in alt attribute will be displayed.
    Ex. <img src="webdevelopment.jpg" alt="webdevelopment image" >

  5. style: style attribute is used to give inline css to html elements like font-size, color and many other properties, you will learn more about it in our css tutorials.
    Ex. <p style="font-size:20px;color:red" > Welcome to College Academy </p>

  6. target: target="_blank" is the attribute used to open a webpage in new window / new tab. It is given in anchor tag.
    Ex. <a target="_blank" href="https://collegeacademy.in"> Welcome to College Academy </a>

Test your Knowledge

•As you all have learn the basic of Html above which will help you to make your first webpage. This doesn't cover all the elements of Html, we have started with basic of HTML.
•Now, its time to take quiz and test your Knowledge.

( Currently quiz are not there we will add it soon. )

For "CSS Tutorial" click the provided link CSS Tutorial( Click Here )

Himanshu College Academy
Author- Himanshu
( Core Member )