HTML Tutorial Help - Codersarts

Updated: Sep 13, 2019


Html Tutorial Help


Introduction:


HTML is a standard markup language for creating Web pages.

  • HTML stands for Hyper Text Markup Language

  • HTML describes the structure of a Web page

  • HTML consists of a series of elements

  • HTML elements tell the browser how to display the content

  • HTML elements are represented by tags

  • HTML tags label pieces of content such as "heading", "paragraph", "table", and so on


Note: - Browsers do not display the HTML tags, but use them to make the content of the page.


Example:


Example Explained

  • The <html> element is the root element of an HTML page

  • The <head> element contains meta information about the document

  • The <title> element specifies a title for the document

  • The <body> element contains the visible page content

  • The <h1> element defines a large heading

  • The <p> element defines a paragraph

Applications of HTML


HTML is one of the most widely used language over the web.

  • Web pages development - HTML is used to create pages which are displayed over the web. Almost every page of web is having html tags in it to provide its details in browser.

  • Internet Navigation - HTML provides tags which are used to navigate from one page to another and is heavily used in internet navigation.

  • Responsive UI - HTML pages now-a-days works well on all platform, mobile, tabs, desktop or laptops owing to responsive design strategy.

  • Offline support HTML pages once loaded can be made available offline on the machine without any need of internet.


HTML Tags

HTML tags are element names surrounded by angle brackets<Tag Name>:

Syntax: - <tagname>content lies here...</tagname>
  • Except a few, usually tags come in pairs.

  • The first tag is called a start tag, and the second tag is called the end tag.

  • The end tag is written like the start tag, but with a forward slash inserted before the tag name.

Note: - The start tag is also called the opening tag, and the end tag as closing tag.



HTML Page Structure

<html>

<head>

<title>Page title</title>

</head>


<body>

<h1>This is a heading</h1>

<p>This is a paragraph. </p>

<p>This is another paragraph. </p>

</body>

</html>

Note: - Only the content inside the <body> section is displayed in browser.


HTML Versions


HTML was introduced in the year 1991 by Tim Berners-Lee. Since then there have been many versions of HTML:

Version Year

  • HTML 1991

  • HTML 2.0 1995

  • HTML 3.2 1997

  • HTML 4.01 1999

  • XHTML 2000

  • HTML5 2014


HTML Editors

  • Web pages are usually created and modified by using professional HTML editors like NetBeans, Notepad++, Visual Studio Code, etc.

  • However, for learning purpose simple text editor like Notepad, TextEdit is recommended.

Following steps are too followed to create a web page with Notepad.

Step 1: Open Notepad

Windows 8 or later:

Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.

Windows 7 or earlier:

Open Start > Programs > Accessories > Notepad

Step 2: Write Some HTML Code

<!DOCTYPE html> <html> <body>

<h1>Heading</h1>

<p>This is my first paragraph. </p>

</body> </html>

Write or copy some HTML into Notepad.

Step 3: Save the HTML Page

Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file "demo1.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML files).

Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your favourite browser (double click on the file, or right-click - and choose "Open with").


Example:



HTML Documents

  • All html documents start with a document type declaration: <!DOCTYPE html>.

  • The HTML document begins with <html> and ends with </html>.

  • The visible part of the HTML document is between <body> and </body>.

Example:



HTML Headings

  • HTML defines six levels of headings.

  • HTML headings are defined with the <h1> to <h6>tags.

  • <h1> defines the most important heading and <h6> defines the least important heading.

Example:


HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

Example:


HTML Links

  • A link is a connection from one web source to another.

  • Links are specified in HTML using the “a” tag.

Syntax: <a href=”url”>Text to be Displayed </a>
  • href: The href attribute is used to specify the destination address of the link used.

  • Attributes are used to provide additional information about HTML elements.

  • Text to be displayed: It is the visible part of the link.

Example:



HTML Images

  • HTML images are defined with the <img> tag.

Syntax: <img src="image name" alt="Text to be displayed" width="104" height="142">
  • The alt attribute provides alternative text for users who are unable to view the image.

  • Height and width attributes is used to provide dimensions for the image.

Example:

HTML Buttons

  • The button tag in HTML is used to define the clickable button.

  • It is usually used to submit the content.

  • The image and text content can be used inside <button> tag.

Syntax: <button type = “button”>

Example:


HTML Lists

  • A list is a record of short pieces of information.

  • In HTML there are three ways to specify lists of information.

  • All lists must have at least one or more list elements.

  • Types of lists used in HTML are:

  1. ul: An unordered list. This will list items using plain bullets.

  2. ol: An ordered list. This will use different schemes of numbers to list the items.

  3. dl: A definition list. This arranges the items in the same way as they are arranged in a dictionary.

Example:


HTML Elements

  • HTML element is the collection of start and end tag with the content inserted in between them.

  • In HTML end tag of element is necessary. Otherwise the displayed content may not be displayed correctly.

Note: - A HTML element with no content are called empty elements. Empty elements do not have an end tag, such as <br> element (which indicates a line break).

Start Tag Element Content End Tag

<h1> Heading </h1>

<p> Paragraph </p>

<br> -- --


Nested HTML Elements

  • The elements of HTML can be nested.

  • When a HTML element is used inside another HTML element it is called Nested HTML Elements.

  • All HTML documents consists of nested HTML elements.


Example:

Note: - Some HTML elements will display correctly, even if we forget the end tag like paragraph tag<p>.


Empty HTML Elements

  • The element which has no content are called empty elements.

  • <br> is an empty element.

  • Empty elements do not have closing tag.

  • The <br> tag is used for line break.


Example:

Note: - HTML5 do not require empty elements to be closed, but it is recommended to close all HTML elements properly for reliability.


HTML is Not Case Sensitive

  • HTML tags are not case sensitive.

  • In HTML <P> is same as <p>.

  • HTML5 standard do not require lowercase tags, but W3C recommends lowercase in HTML, for stricter document types like XHTML.


HTML Attributes

  • An attribute is used to provide extra or additional information about an element.

  • It takes two parameters: a name and a value.

  • Attributes are always specified in the start tag.

  • The value of an attribute must be written within quotes.

The href Attribute

  • HTML links are defined with the <a> tag.

  • The link address is specified in the href attribute.


Example:

The src Attribute

  • HTML images are defined with the <img>tag.

  • The src attribute is used to specify the URL of the source image.


Example:

The width and height Attribute

  • HTML images uses width and height attributes.

  • It specifies the width and height of the image.

Example:


The alt Attribute

  • In HTML the alt attribute is used to specify the alternative text to be used, if an image cannot be displayed.

  • The value of alt attribute can be read by screen readers.

  • It can also be heard if someone is listening to the web page.

Example:


The style Attribute

  • Styles in HTML are basically the rules that describe how a document is presented in a browser.

  • The style attribute is used for styling the element, like color, font, size, etc.

Example:

The lang Attribute

  • The language attribute contains single value language code which is used to specify the language of the content.

  • The language of a document is declared in the <html> tag.

  • The language is declared with the lang attribute.

<!DOCTYPE html> <html lang="en-US"> <body>
...
</body> </html>

The title Attribute

  • The title attribute is used to specify extra information about the element.

  • When we move cursor over the element then it shows the information.

  • A title attribute is added to the <p> element.

Example:

Are attributes case sensitive?

  • HTML5 is not case sensitive, i.e. it can be written in either uppercase or lowercase.

  • For example, the title attribute can be written like title or TITLE.

  • But W3C recommends HTML attributes to be in lower case, as demanded for stricter document types like XHTML.

HTML Headings

  • HTML has six levels of headings element.

  • The six heading elements are H1, H2, H3, H4, H5 and H6.

  • Importance:

  1. Search Engines use headings for indexing the structure and content of the webpage.

  2. Headings are used for highlighting important topics.

  3. They provide valuable information and tell us about the structure of the document.

Note: - HTML headings are used only for headings. It can’t be used for making text BIG or bold.


Headings Size

  • Each HTML heading has a default size.

  • Also, size of the headings can be specified with the style attribute using the CSS font-size property.

Example:

HTML Horizontal Rules

  • The <hr> tag in HTML stands for horizontal rule.

  • It is used to insert a horizontal rule or a thematic break in an HTML page to divide or separate document sections.

  • The <hr> tag is an empty tag and it does not require an end tag.


Example:


HTML <head> Element

  • The <head> element is a container for metadata.

  • HTML metadata is data about the HTML document.

  • Metadata is not displayed.

  • The <head> element is always placed in between <html> tag and <body> tag.


Example:

Note: - Metadata typically define the document title, character set, styles, scripts, and other meta information.


HTML Source Code


View HTML Source Code

  • To view an HTML Source Code, right-click in an HTML page and select "View Page Source" (in Chrome), or similar in other browsers.

  • This will open a window containing the HTML source code of the page.

Inspect HTML Source Code

  • To inspect an HTML Source Code, right-click on an element (or a blank area), and choose "Inspect" or "Inspect Element" to see what elements are made up of. (both the HTML and the CSS can be seen).

  • We can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.


HTML Paragraphs

  • The <p> tag in HTML defines a paragraph.

  • It has both opening and closing tag.

  • Things within <p> and </p> is treated as a paragraph.

  • Usually browsers read a line as a paragraph even if the closing tag i.e, </p> is not used.


Example:

Note: - Browsers automatically add some white space (a margin) before and after a paragraph.



HTML Display

  • You cannot be sure how HTML will be displayed.

  • Large or small screens, and resized windows will create different results.

  • With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code.


Example:


Note: - The browser removes any extra spaces and extra lines when the page is displayed.


HTML Line Breaks

  • The <br> element defines a line break in HTML.

  • <br> tag is used when there is a need of line break ( a new line) without starting a new paragraph.


Example:

HTML <pre> Element

  • The HTML <pre> element defines preformatted text.

  • The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

Example:

HTML Styles

  • Styles in HTML are basically rules that describe how a document will be presented in a browser.

  • Style information can be either attached as a separate document or embedded in the HTML document.

Example:

HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute.

Syntax: <tagname style=”property:value;”>

Background Color

The CSS background-color property defines the background color for an HTML element.


Example:


Text Color

The CSS color property defines the text color for an HTML element.


Example:


Fonts

The CSS font-family property defines the font to be used for an HTML element.


Example:


Text Size

The CSS font-size property defines the text size for an HTML element.


Example:


Text Alignment

The CSS text-align property defines the horizontal text alignment for an HTML element


Example:


HTML Formatting

HTML provides us with the ability for formatting text just like we do it in MS Word or any text editing software.


Example:


HTML Formatting Elements

Formatting elements were designed to display special types of text:

  • <b> - Bold text

  • <strong> - Important text

  • <i> - Italic text

  • <em> - Emphasized text

  • <mark> - Marked text

  • <small> - Small text

  • <del> - Deleted text

  • <ins> - Inserted text

  • <sub> - Subscript text

  • <sup> - Superscript text


HTML <b> and <strong> Elements

  • The HTML <b> elements defines bold text, without any extra importance.

  • The HTML <strong> element defines strong text, with added semantic “strong” importance.

Example:


HTML <i> and <em> Elements

  • The HTML <i> elements defines italic text, without any extra importance.

  • The HTML <em> element defines emphasized text, with added semantic importance.

Example:


HTML <small> Element

The HTML <small> elements defines smaller text.


Example:


HTML <mark> Element

The HTML <mark> elements defines marked/highlighted text.


Example:


HTML <del> Element

The HTML <del> elements defines deleted/removed text.


Example:


HTML <ins> Element

The HTML <ins> elements defines inserted/added text.


Example:


HTML <sub> Element

The HTML <sub> elements defines subscripted text.


Example:


HTML <sup> Element

The HTML <sup> elements defines superscripted text.


Example:


HTML Quotation and Citation Elements

The Quotation elements in HTML are used to insert quoted texts in a web page, that is, portion of texts different from the normal texts in the web page.

HTML <q> for Short Quotations

  • The HTML <q> elements defines short text.

  • For Short Quotations browsers usually insert quotation marks around the <q> element.

Example:


HTML <blockquote> for Quotations

  • The HTML <blockquote> elements defines a section which is quoted from another source.

  • <blockquote> elements are usually indented by browsers.

Example:


HTML <abbr> for Abbreviations

  • The <abbr> element is used to define a text as an acronym or abbreviations.

  • The title attribute can be used to show the full version of the abbreviation/acronym when you move cursor over the <abbr> element.

  • It has both opening and closing tags.

  • This is useful for browsers and search engines.

Example:


HTML <address> for Contact Information

  • Using the <address> element, we can define an address in a webpage and the text put inside the address tag will be emphasized.

  • Most browsers will add a line break before and after the element.

Example:


HTML <cite> for Work Title

  • This element is used define a title of a work and emphasizes a text.

  • Browsers usually display <cite> elements in italic.

Example:


HTML <bdo> for Bi-Directional Override

  • The <bdo> element is used to define a bidirectional override which means that the text written from right to left or left to right.

  • It is used to over-ride the current text direction.

  • It takes an attribute “rtl” to display the text from right to left.

Example:


HTML Comments

  • The comment tag is used to insert comments in the HTML code.

  • It is used to help the coder and reader to understand the code.

  • The comment tag is useful during the debugging of codes.

Syntax: <! - - Comments are written here - - >

Note: - Comments are not displayed by the browser, but they help document your HTML source code.


Example:


HTML Colors

  • Colors are used to make the page more attractive.

  • HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

  • The comment tag is useful during the debugging of codes.

Color Names

  • In HTML, a color is specified by using color names.

  • HTML supports 140 standard color names.

Example:


Background Color

We can set the background color for HTML elements.


Example:


Text Color

We can set the color of text in HTML.


Example:


Border Color

We can set the color of borders in HTML.


Example:


Color Values

In HTML, Colors are specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.


Example:


RGB Values

  • RGB values are used to specify a color in HTML.

  • Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.

  • For red color parameters are set as rgb(255, 0, 0), as red is set to its highest value (255) and others are set to 0.

  • Similarly for green rgb(0, 255, 0) and for blue rgb(0, 0, 255).

  • To display the black, all parameters are set to 0, rgb(0, 0, 0).

  • To display the white, all parameters are set to 255, rgb(255, 255, 255).

Example:


HEX Values

  • HEX stands for Hexadecimal values.

  • Hexadecimal values are used to specify a color in HTML.

  • #rrggbb, here rr (red), gg (green), bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).

  • For example, #00ff00 is displayed as green, because green is set to its highest value (ff) and the others are set to the lowest value (00).

Example:


HSL Value

In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form:

hsl(hue, saturation, lightness)

  • Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.

  • Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.

  • Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white.

Example:

Saturation

  • Saturation is described as the intensity of a color.

  • 100% is pure color, no shades of gray

  • 50% is 50% gray, but you can still see the color.

  • 0% is completely gray, you can no longer see the color.

Example:

Lightness

The lightness of a color is described as how much light is given to the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white).


Example:

RGBA Value

  • RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.

  • An RGBA color value is specified with:

  • rgba(red, green, blue, alpha)

  • The range of alpha parameter is 0.0 (fully transparent) and 1.0 (not transparent at all).

Example:

HSLA Value

  • HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color.

  • An HSLA color value is specified with:

  • hsla(hue, saturation, lightness, alpha)

  • The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).

Example:



If you like Codersarts blog and looking for Assignment help,Project help, Programming tutors help and suggestion  you can send mail at contact@codersarts.com.

Please write your suggestion in comment section below if you find anything incorrect in this blog post 

Contact Us

Tel: (+91) 0120  4118730  

Time :   10 : 00  AM -  08 : 00 PM IST 

Registered address: G-69, Sector 63, 

 Noida - 201301, India

We Provide Services Across The different countries

USA    Australia   Canada   UK    UAE    Singapore   New Zealand    Malasia   India   Ireland   Germany

CodersArts is a Product by Sofstack Technology Solutions Pvt. Ltd.

  • CodersArts | Linkedin
  • Instagram