Simple introduction about HTML:

  • In 1989, Tim Berners-Lee invents the web with HTML as its publishing language.
  • Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications.
  • It is a platform independent language that can be used on any platform such as Windows, Linux, Macintosh, and so on.

Functionality and working of HTML :

  • HTML is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript(JS).
  • Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages.
  • HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
  • HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page.
  • HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
  • HTML elements are delineated by tags, written using angle brackets.
  • Tags such as <img /> and <input /> directly introduce content into the page.
  • Other tags such as surround and provide information about document text and may include other tags as sub-elements.
  • Browsers do not display the HTML tags, but use them to interpret the content of the page.
  • HTML can embed programs written in a scripting language such as JavaScript, which affects the behavior and content of web pages.
  • Inclusion of CSS defines the look and layout of content.

DEFINITION FOR HTML:

  • “H” yper is the opposite of linear. It used to be that computer programs had to move in a linear fashion. This before this, this before this, and so on. HTML does not hold to that pattern and allows the person viewing the World Wide Web page to go anywhere, any time they want.
  • “T”ext is what you will use. Real, honest to goodness English letters
  • “M”arkup is what you will do. You will write in plain English and then mark up what you wrote. More to come on that in the next Primer.
  • “L”anguage because they needed something that started with “L” to finish  HTML and Hypertext Markup Louie didn’t flow correctly. Because it’s a language, really—but  the language is plain English.

Definition for Markup Language:

Markup languages are designed for the processing, definition and presentation of text. The language specifies code for formatting, both the layout and style, within a text file. The code used to specify the formatting are called tags. HTML is  an example of a widely known and used markup language.

Why HTML is important?
It is the fundamental technology behind everything you see in a web browser, and it’s used (alongside other tech like JavaScript and CSS) to build everything from simple web pages to complex web applications and services.

HTML documents:

  • All HTML documents must start with a document type declaration:<!DOCTYPE html>
  • The HTML document itself begins with <html> and ends with </html>.
  • The visible part of the HTML document is between <body> and </body>.
  • The <head> element is a container for metadata (data about data) and is placed between the <html>tag and the <body> tag.metadata: <title>,<style>, <meta>, <link>, <script>, and <base>.For Example:-

Note: The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML, the page is written in.

  • Now save the file by using .html extension here i am saving this with the file name as myhtml.html.
  • In the file explorer, you can see your html file will be saved like this,

  • Simply double click on that file or open that .html file, the output will be displayed in the browser like follows,

Html tags & Elements:

  

  • Technically, an HTML element is the collection of start tag, its attributes, an end tag and everything in between.
  • On the other hand an HTML tag either opening or closing is used to mark the start or end of an element.
  • <tagname>type your data here…</tagname>
  • For example:
  • <p> is starting tag of a paragraph and </p> is closing tag of the same paragraph. But, <p> you can type paragraph here… </p> is a paragraph element.
  • HTML elements with no content are called empty elements. Empty elements do not have an end tag, such as the <br> element (which indicates a line break).

HEADINGS:

  • HTML defines six levels of headings. A heading element implies all the font changes, paragraph breaks before and after, and any white space.
  • It is necessary to render the heading. The heading elements are H1, H2, H3, H4, H5, and H6.
  • H1 being the highest (or most important) level and H6 the least

For example:

  • Now, run the code and you can get the output like below,

HTML Horizontal Rules:

  • The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
  • The <hr> element is used to separate content (or define a change) in an HTML page.

Example:

  • I just updated the previous example with the horizontal rules within it.

  • After adding the <hr> tag run your program and see the output consists of rulers after every header.

PARAGRAPHS:

  • HTML paragraph tags are used to define the HTML paragraph element. The paragraph element begins with the HTML <p> tag and ends with the HTML </p>
  • The HTML paragraph element should not contain tables and other block elements.
  • The HTML paragraph element can only contain inline elements, we will see about the inline elements in detail once we go with the CSS.
  • The paragraph element consists of the following  attributes,
  • <p align = “ ”> </p>
  • <p style = “ ”> </p>
  • <p class = “ ”> </p>
  • <p id = “ ”> </p>
  • <p title = “ ”> </p>
  • Browsers automatically add some white space (a margin) before and after a paragraph.

Example:-

  • Try with multiple lines for the paragraph element and display the output.

DIV element:

  • The <div> tag is a block-level element that defines a division or a section in an HTML document.
  • This tag is used for grouping large sections of HTML elements and styling them with CSS.
  • The <div> tag defines a division or a section in an HTML document.
  • The <div> element is often used as a container for other HTML elements or to perform certain tasks with JavaScript.
  • The <div> tag also supports the Global Attributes in HTML.
  • The <div> tag also supports the Event Attributes in HTML.

Example:

  • <div> with style attribute and here it acts as a container to hold <h3> and <P>.

  • Run the code and the output will be displayed like below,

LIST ELEMENT:

  • HTML offers three ways for specifying lists of information. All lists must contain one or more list elements.

Lists may contain,

❖<ul> − An unordered list. This will list items using plain bullets.
❖ <ol> − An ordered list. This will use different schemes of numbers to list your
items.
❖ <dl> − A definition list. This arranges your items in the same way as they are
arranged in a dictionary

1.Unordered List:

− A definition list. This arranges your items in the same way as they are arranged in a dictionary.

  • An unordered list is a collection of related items that have no special order or sequence.
  • This list is created by using HTML.Each item in the list is marked with a bullet.

Example:

 Type attribute:

  • You can use type attribute for tag <ul>to specify the type of bullet you like.
  • By default, it is a disc. Following are the possible options,

➔<ul type = “square”>
➔ <ul type = “disc”>
➔ <ul type = “circle”>

You can give the type as disc to display the bullet in the form of disc as follows,

2. Ordered List:

  • If you are required to put your items in a numbered list instead of bulleted, then HTML ordered list will be used.
  • This list is created by using <ol> tag.The numbering starts at one and is incremented by one for each successive ordered list element tagged with <ol>.

Example:

Type Attribute:

You can use type attribute for <ol> tag to specify the type of numbering you like.
 By default, it is a number. Following are the possible options,

1. <ol type = “1”> – Default-Case Numerals.
2. <ol type = “I”> – Upper-Case Numerals.
3. <ol type = “i”> – Lower-Case Numerals.
4. <ol type = “A”> – Upper-Case Letters.
5. <ol type = “a”> – Lower-Case Letters.

In our example we used the <ol type = 1> , so the output will display like below,

  1. Definition List:
  • HTML and XHTML supports a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia.
  • The definition list is the ideal way to present a glossary, list of terms, or other name/value list.
  • Definition List makes use of following three tags.

1. <dl> − Defines the start of the list
2. <dt> − A term
3. <dd> − Term definition
4. </dl> − Defines the end of the list

Example:

The output will display like as follows,