HTML (Hyper Text Markup Language)

Posted on by

What is HTML?

Html is hypertext markup language.

It is a combination of hypertext and markup language.

Markup language defines the text document within the tag and used to create web pages using markup language. It describes the structure of web pages.

Hypertext defines the link between webpages

Use of HTML:

  • It is used to structure the web pages that are displayed world wide web .
  • It is used to link multiple web pages using hyperlinks.

Basic HTML page format:

<!DOCTYPE html>

<html>

<head>

<title> page title</title>

</head>

<h2> Heading content</h2>

<p>paragraph content</p>

</body>

</html>

  • <!DOCTYPE html> – A document type declaration is an instruction that tells the browser about the language in which the web page is written.
  • <html>- This tag is used to define the root element of HTML. It is the second outer cintainer element that contains all other elements in it.
  • <head>- The head portion contains information related to the document. Elements within this tag are not visible in the front end of the website.
  • <body>- The information in the body tag is the visible content of the web page.

HTML Elements: HTML elements tells the browser how to display the contents on the web page. contents like videos, images, and other contents. All HTML elements will have start tag and an end tag.

start tag: <tagname> end tag: </tagname>

HTML elements is made up of start tag, attributes, contents, end tags.

. Headings: These headings are defined with the tags h1 to h6

<h1> is most important heading of the webpage and <h6> is least important of the web page.

. Paragraphs: These are defined by <p> tag

.Link: These are defined by <a> tag

The link’s destination is given the href attribute.

. Images: These are defined by the <img> tag.

The source file, width, height, alternative text are given as attributes.

. List: There are two types of list

  1. ordered list <0l> </ol>
  2. unordered list<ul></ul>

.<br>: It defines the line break. This tag does not have end tag.

HTML Attributes: All HTML elements have the attributes. These provide additional information about elements.

.href attribute: The href attribute specifies the URL of the page that the link goes to

. src: The image tag is used to embed an image. The src attribute specifies the path to the image to be displayed

. Width and Height attributes: The image tag contains the height and width attributes which specify the height and width of the image.

.alt attribute: This attribute of image tag specifies the alternate text for the image incase the image is not displayed due to slow connection.

. Style attribute: The style attribute is used to add styles, fonts, colors to the text.

. lang attribute: The language attribute should be given inside the html tag to declare the language of the website.

.HTML Headings: Web pages use the headings to show the document structure. There is a default size for each heading. We can change the default size by using the style attribute.

<h1 style=”font-size:120px:”>heading1</h1>

HTML formatting elements:

Formatting elements were designed to display special types of text:

  • <b> – Bold text
  • <strong> – Important text
  • <i> – Italic
  • <em> – Emphasized te
  • <mark> – Marked text
  • <small> – Smaller text
  • <del> – Deleted text
  • <ins> – Inserted text
  • <sub> – Subscript text
  • <sup> – Superscript text

HTML Comments: These are not displayed on the website but are useful for sourcing the code.

-> Everything between the <!-- and the --> will be hidden from the display.

HTML CSS: By using Cascading Style Sheets we can control color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes.

HTML links: These links are hyperlinks i.e it jumps from one page to another.

<a href=”url” target=”value” > link content</a>

url describes the destination address. and target attribute defines where to open the link document.

_blank- It opens the linked document in new winndow

– parent- It opens the linked document in the parent frame

_self- It opens the linked document in the same window

-top- It opens the linked document in the full window

HTML image : A image cann be used to create a link in a specified URL. The <img> tag is used to add or embed the images to a webpage/website. The “img” tag is an empty tag, which means it can contain only a list of attributes and it has no closing tag. The addition of the images improves the quality along with enhancing the design structure, appearance of the webpage.

<a href=”url”>

                          <img src=”file address (on device or on web)” alt=”_” style=”width:__ ; height:__ ; border:__”>

                     </a>

. src- It is used to specify the path to the image

. alt- It is used to specify an alternate text for the image. It is useful as it informs the user about what the image means and also due to any network issue if the image cannot be displayed then this alternate text will be displayed.

.crossorigin- It is used to import images from third-party sites that allow cross-origin access to be used with canvas.

height- It is used to specify the height of the image.

width-  It is used to specify the width of the image.

ismap- It is used to specify an image as a server side image

srcset- It is used to specify a set of image files to use in different times.

HTML Tables: HTML tables are defined by table tag. Each table row is defined by tr tag, table heading by th tag and table data by td tag. by default headings are displayed in bold and centered.

-adding cell padding to the table: padding specifies space between the cell content and its borders.