Introduction to HTML

Index

Web Server

Web server is dedicated computers that uses HTTP to serve web pages. the web server has an IP address and a domain name. By entering URL https:www.mk7college.com/index.html in the browser, it requests to the webserver having a domain name, "mk7college.com". The server in response fetches the page named index.html to the browser.

Any computer can act as a web server after installing server software on it There are many web server software, like public domain software and commercial packages.

Web server working

The web server responds to the client's request in either of the two ways:

Attaching the file with the requested URL and sending it to the client.
Response generation by invoking script and communicating with the database.

Web Client/ Browser

A web client is a program capable of communicating with web servers, requesting and receiving information from them, and processing it for display or other users. The web browser at the client computer requests the web server and the webserver responds to the results on the client's computer or other Internet-enabled devices that support a browser.

HTML

HTML, an acronym for HyperText Markup Language, specifies how the structure of a webpage will be with the help of various markups. It is a structured markup language that is used to create Web pages. Markup languages like HTML bundle together codes which are elements that are used to represent the structure and format of a document. A user agent, usually a Web browser which renders (delivers) the document, interprets the meaning of these codes to decipher (making it into simpler human-readable text) how to structure or display a document. The HTML elements are made up of alphanumeric tokens surrounded by angle brackets, for example, <B>, <HTML>, <IMG> and <HR>

HTML Tags

Since HTML is a markup language, therefore, it uses certain tags for formatting the content. The tags are used with angle braces as in <Tag Name>. Leaving few tags, most tags require to be supplemented with closing tags </Tag Name>. As for example, the closing tag of <html> is </html> and the closing tag of <body> is </body>.

HTML document uses the following tags:

Tag	Description
<! DOCTYPE…>	It represents the document type and HTML version.
<html>	The HTML document itself begins with <html> and ends with </html>
<head>	This tag defines the header of the document and it can keep other HTML tags like <title></title>
<title>	The <title> tag is used inside the <head> tag to represent document title
<body>	It represents the document’s body which keeps other HTML tags like <h1></h1>
<h1>	It defines the heading
<p>	This tag represents a paragraph

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>It is the First Heading</h1>
    <p>It is the first paragraph.</p>
  </body>
</html>

Types of Tags in HTML

Paired Tag: - An HTML tag is known as a paired tag when the tag consists of an opening tag and a closing tag as its companion tag. An HTML paired tag starts with an opening tag: the tag name enclosed inside the angle brackets: for example, a paragraph opening tag is written as <p> and closing tag is written as </p>
Unpaired/Singular Tag: - An HTML tag is called an unpaired tag when the tag only has an opening tag and does not have a closing tag or a companion tag. The unpaired HTML tag does not require a closing tag; an opening tag is sufficient in this type.

Commonly used HTML Commands

Document Head

The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag. Metadata is data about the HTML document. Metadata is not displayed. Metadata typically defines the document title, character set, styles, scripts, and other meta information.

The following elements can go inside the <head> element:

Tag	Description
<title>	The <title> tag defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.
<style>	The <style> tag is used to define style information (CSS) for a document.
<base>	The <base> tag specifies the base URL and/or target for all relative URLs in a document.
<link>	The <link> tag defines the relationship between the current document and an external resource. The <link> tag is most often used to link to external style sheets or to add a favicon to your website.
<meta>	The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data. Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.
<script>	The <script> tag is used to embed a client-side script (JavaScript). The <script> element either contains scripting statements, or it points to an external script file through the src attribute.
<noscript>	The <noscript> the tag defines alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support script.

Example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
    <link rel="stylesheet" href="styles.css">
    <style>
    h1 {color:red;}
    p {color:blue;}
    </style>
  </head>
  <body>

  </body>
</html>

Document Body

The <body> tag defines the document's body. The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Title

The <title> is an important tag required to show the title of the HTML documents and it only contains text and other tags contained in the title are ignored. The title is displayed in the browser's toolbar. IT also shows the title of the favorite page which we added during browsing and in the search-engine results title.

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of page</title>
  </head>
  <body>
  </body>
</html>

Output:

Footer

The <footer> tag is HTML represents a footer for a document or section. An <footer> element generally contains information about its author, copyright data or links to other related documents. You can have several <footer> elements in one document.

Example:

<!DOCTYPE html>
<html>
  <body>
    <footer>
      <p>Posted by: xyz</p>
      <p>Contact information: <a href="#">xyz@yahoo.com</a>.</p>
    </footer>
    <p><strong>Note:</strong> The footer tag is supported only from Internet Explorer 9 and later versions.</p>
  </body>
</html>

Output:

Text Formatting

The text formatting tags are used to change the appearance of some text so that it looks different from normal text in web pages.

The following HTML tags can be used to display special types of text:

<del> - Deleted text - The <del> tag specifies a part of the text that was deleted from the document. Browsers display this text as a strikethrough.
<i> - Italic text - The <i> tag is only responsible for the visual appearance of the enclosed text, without any extra importance.
<b> - Bold text - The <b> tag is a physical tag that stands for bold text.
<small> - Small text - The <small> tag decreases the text font size by one size smaller than a document’s base font size (from medium to small, or from x-large to large). The tag usually contains items of secondary importance such as copyright notices, side comments, or legal notices.
<em> - Emphasized text - The <em> tag defines the emphasized text, with added semantic importance.
<strong> - Important text - Whereas the <strong> tag being a logical tag is used to emphasize the importance of the text.
<mark> - Marked text - The <mark> tag is used to present a part of the text in one document as marked or highlighted for reference purposes.
<sub> - Subscript text - The <sub> defines subscript texts. Subscript text is under the baseline of other symbols of the line and has a smaller font.
<sup> - Superscript text - The <sup> tag defines superscript, which is set slightly above the normal line of type and is relatively smaller than the rest of the text.

Example:

<!DOCTYPE html>
<html>
  <body>
    <h3>This is <del>good</del> very good book for me</h3>
    <h3>is a <i>physical tag</i> that stands for <b>bold text.</b></h3>
    <h2>tag is used to <small>present</small> a part of the text in <em>one document</em></h2>
    <p>tag defines <strong>superscript</strong>, which is <mark>set slightly</mark></p>
    <h2>normal <sub>line</sub> of type and is <sup>relatively</sup> smaller than</h2>
  </body>
</html>

Output:

Break Line

The <br> HTML element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.

Example:

<!DOCTYPE html>
<html>
  <body>
    <h1>The br element</h1>
    <p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p>
</body>
</html>

Output:

Heading Style

HTML documents begin using a heading. Different sizes can be applied for using headings. HTML features mainly six heading levels using the elements <h1>, <h2>, <h3>, <h3>, <h5>, and <h6>. The web browser inserts one line before and after a heading for fulfilling the purpose of displaying it.

Example:

<!DOCTYPE html>
<html>
  <head>
    <title> Example of a Heading</title>
  </head>
  <body>
    <h1> Example of heading 1</h1>
    <h2> Example of heading 2</h2>
    <h3> Example of heading 3</h3>
    <h4> Example of heading 4</h4>
    <h5> Example of heading 5</h5>
    <h6> Example of heading 6</h6>
  </body>
</html>

Output:

Drawing Line

The <hr> element is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page. The <hr> HTML element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.

Example:

<!DOCTYPE html>
<html>
  <body>
    <p>This is some text. This is some text. This is some text.</p>
    <hr>
    <p>This is some text. This is some text. This is some text.</p>
  </body>
</html>

Output:

Search This Blog

Web Technologies