HTML

 Introduction to HTML:

Hypertext Markup Language(HTML) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as cascading style sheets (CSS) and scripting languages  such as JavaScript. 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 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  <img /> and <input /> directly introduce content into the page. Other tags such as <p> 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. The World Wide Web Consortium (W3C), former maintainer of the HTML and current maintainer of the CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997.

History:

HTML is a markup language that web browsers use to interpret and compose text, images, and other material into visual or audible web pages. Default characteristics for every item of HTML markup are defined in the browser, and these characteristics can be altered or enhanced by the web page designer’s additional use of CSS. Many of the text elements are found in the 1988 ISO technical report TR 9537 Techniques for using SGML, which in turn covers the features of early text formatting languages such as that used by the RUNOFF command developed in the early 1960s for the CTSS (Compatible Time-Sharing System) operating system: these formatting commands were derived from the commands used by typesetters to manually format documents. However, the SGML concept of generalized markup is based on elements (nested annotated ranges with attributes) rather than merely print effects, with also the separation of structure and markup; HTML has been progressively moved in this direction with CSS.

Berners-Lee considered HTML to be an application of SGML. It was formally defined as such by the Internet Engineering Task Force (IETF) with the mid-1993 publication of the first proposal for an HTML specification, the “Hypertext Markup Language (HTML)” Internet Draft by Berners-Lee and Dan Connolly, which included an SGML document type definition define the grammar. The draft expired after six months, but was notable for its acknowledgment of the NCSA Mosaic browser’s custom tag for embedding in-line images, reflecting the IETF’s philosophy of basing standards on successful prototypes. Similarly, Dave  Raggett’s competing Internet-Draft, “HTML+ (Hypertext Markup Format)”, from late 1993, suggested standardizing already-implemented features like tables and fill-out forms.

 

Web Browsers:

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.

A browser does not display the HTML tags, but uses them to determine how to display the document:

 

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>.

Example:-

<!DOCTYPE html>
<html>
<body><h1>My First Heading</h1>
<p>My first paragraph.</p></body>
</html>

The <!DOCTYPE> Declaration:

The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

For e.g<!DOCTYPE html>

HTML Links:

HTML links are defined with the <a> tag:

Example:-
<a href=”https://www.w3schools.com”>This is a link</a>

HTML Images:

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes:

Example
<img src=”w3schools.jpg” alt=”W3Schools.com” width=”104″ height=”142″>
 

How to View HTML Source?

Have you ever seen a Web page and wondered “Hey! How did they do that?”

Right-click on an element (or a blank area), a

View HTML Source Code:
Right-click in an HTML page and select “View Page Source” (in Chrome) or “View Source” (in Edge), or similar in other browsers. This will open a window containing the HTML source code of the page.
Inspect an HTML Element:

nd choose “Inspect” or “Inspect Element” to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.

 

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>
<p>My first paragraph.</p>
Start Tag            End Tag                      Element Content 
<h1>                     </h1>                         My first heading
<p>                           </p>                  My first paragraph
<br>                      none                                    none
Note: Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag.
 

Nested HTML Elements:

HTML elements can be nested (this means that elements can contain other elements).

All HTML documents consist of nested HTML elements.

The following example contains four HTML elements (<html>, <body>, <h1> and <p>):

Example:-
<!DOCTYPE html>
<html>
<body><h1>My First Heading</h1>
<p>My first paragraph.</p></body>
</html>Explanation Of Example:-

It has a start tag <html> and an end tag </html>.

Then, inside the <html> element there is a <body> element:

The <html> element is the root element and it defines the whole HTML document.

<body>
<h1>my first heading</h1>
<p>my first paragraph</p>
</body>
Note:-  Never skip the End Tag.

 

Empty HTML Elements:

HTML elements with no content are called empty elements.

The <br> tag defines a line break, and is an empty element without a closing tag:

 Example:-

              <p>This is a <br> paragraph with a line break.</p>

HTML is not case sensitive:

HTML tags are not case sensitive: <P> means the same as <p>.

The HTML standard does not require lowercase tags, but W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.

 

HTML Tag Reference:

 

<html>          –Defines the root of an HTML document

<body>         –Defines the document body

<h1>to<h6>Defines

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:

the HTML headings

 

HTML Attributes:

  • All HTML elements can have attributes
  • Attributes provide additional information about elements
  • Attributes are always specified in the start tag
  • Attributes usually come in name/value pairs like: name=”value”
 

The href Attribute:-

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:

Example:-
                 <a href=”https://www.w3schools.com”>Visit W3Schools</a>

The src Attribute:

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed:

Example:-
                     <img src=”img_girl.jpg”>

There are two ways to specify the URL in the src attribute:

1. Absolute URL – Links to an external image that is hosted on another website. Example: src=”https://www.w3schools.com/images/img_girl.jpg”.

Note: External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; it can suddenly be removed or changed.

 

2. Relative URL – Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. Example: src=”img_girl.jpg”. If the URL begins with a slash, it will be relative to the domain. Example: src=”/images/img_girl.jpg”.

Tip: It is almost always best to use relative URLs. They will not break if you change domain.

 

The width and height Attributes:

The <img> tag should also contain the width and height attributes, which specifies the width and height of the image (in pixels):

 Example:-
     <img src=”img_girl.jpg” width=”500″ height=”600″>

The alt Attribute:

The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to slow connection, or an error in the src attribute, or if the user uses a screen reader.

 Example 1:-
            <img src=”img_girl.jpg” alt=”Girl with a jacket”>
Example 2:-
            <img src=”img_typo.jpg” alt=”Girl with a jacket”>

The style Attribute:-

The style attribute is used to add styles to an element, such as color, font, size, and more.

 Example:-
             <p style=”color:red;”>This is a red paragraph.</p>

The lang Attribute:

We should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.

Example:-

<!DOCTYPE html>
<html lang=”en”>
<body>

</body>
</html>

Country codes can also be added to the language code in the lang attribute. So, the first two characters define the language of the HTML page, and the last two characters define the country.

The following example specifies English as the language and United States as the country:

Example:-

<!DOCTYPE html>
<html lang=”en-US”>
<body>

</body>
</html>

The Title Attribute:

The title attribute defines some extra information about an element.

The value of the title attribute will be displayed as a tooltip when you mouse over the element:

Example:-

<p title=”I am a tooltip>”this is a paragraph.<p>

 

Single or Double Quotes:

Double quotes around attribute values are the most common in HTML, but single quotes can also be used.

In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:

<p title=‘John”shotgun” Nelson>

or

<p title=“John’shotgun’Nelson>

 

HTML Styles:

  • The HTML Style Attribute:-

Syntax:-

<tagname style=”property: value;”>

 

Background color:-

The CSS background-color property defines the background color for an HTML element.
Example:-
<!DOCTYPE html>
<html>
<body=”Background-color:Red;”>
<h1>This is heading</h1>
<p>This is paragraph</p>
</body>
</html>
  • background color for two different element:- 
Example:-
<!DOCTYPE html>
<html>
<body>
<h1 style=”Background color:Red;”>This is heading</h1>
<p style=”Background color:Blue;”>This is paragraph</p>
</body>
</html>

Text Color:-

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

Example:-

<!DOCTYPE html>

<html>

<body>

<h1 style=”color:Red;”>This is heading</h1>

<p style=”color:Blue;”>This is paragraph</p>

</body>

</html>

 

 

Fonts:-

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

Example:-

<!DOCTYPE html>

<html>

<body>

<h1 style=Font-family:verdana;”>This is heading</h1>

<p style=Font-family:courier;”>This is paragraph</p>

</body>

</html>

 

Text Size:-

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

Example:-

<!DOCTYPE html>

<html>

<body>

<h1 style=”Font size:300%”>This is heading</h1>
<p style=”Font size:150%This is paragraph</p>
</body>
</html>

Text Alignment:-

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

Example:-

<!DOCTYPE html>

<html>

<body>

<h1 style=”text -align:center;”>This is heading</h1>

<p style=”text align:centrer;”>This is paragraph</p>

</body>

</html>

 

ghlighted.

HTML Text Formatting:

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>    -Smaller text
  • <del>         -Deleted text
  • <ins>          -Inserted text
  • <sub>          -Subscript text
  • <sup>          -Superscript text

     HTML <b> elements:-

    The html <b> element defines the bold text,without any extra importance.                                                                               Example:- 

    <b>This text is bold</b>

 HTML <strong> elements:-

The html <strong> element defines text with strong importance.The content inside is typically displayed in bold.

Example:-

<strong>This text is strong</strong>

 HTML <I> elements:-

 The HTML <i> element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.
 Example:-
 <i>This text is italic</i>

 HTML <em> elements:-

The HTML <em> element defines a emphasized text.The content inside is typically displayed in Italic.

Example:-

<em>This text is emphasized</em>

HTML <mark> elements:-

The HTML <mark>element defines the text that shold be marked or hi

Example:-

<p>do not forget to buy<mark>milk</mark>today.</p>

HTML <small> elements:-

The HTML <small> element defines the text is samll.

Example:-

<small>This is some smaller text</small>

HTML <del> elements:-

The HTML <del> element defines the text that has been deleted from a document.Browsers usually strike a line through deleted text.

Example:-

<p> My favourite color is <del> blue</del>.red</p>

HTML <ins> elements:-

The HTML <ins> element defines the text has been inserted into a document.

Example:-

<p>My favourite color is<del>blue</del> <ins>red</red>.</p>

HTML <sub> elements:-

The HTML <sub> element defines the subscript text.Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O:

Example:-

<p>This is <sub>subscripted</sub> text.</p>

HTML <sup> elements:-

The HTML <sup> element defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1]:

Example:-
<p>This is <sup>superscripted</sup> text.</p>

HTML Style CSS:-

What is CSS:-

  • Cascading Style Sheets (CSS) is used to format the layout of a webpage.
  • With CSS, you can control the 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, and much more!  CSS can be added to HTML documents in 3 ways:
  1. Inline–   by using the style attribute inside HTML element.
  2. Internal-by using a <style> element in the <head> section
  3. External– by using a <link> element to link to an external CSS file.

 1.Inline-An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

Example:-

<h1 style=”color :blue;”>A Blue Heading</h1>

<p style=”color :red;”>A red paragraph.</p>

2.internal:-

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within a <style> element.

Example:-

<!DOCTYPE html>
<html>
<head>
<style>
<body>
{background color :blue;}
 h1{color :Red;}
p{color :pink;}

</style>

</head>

<body>

<h1>This is heading</h1>

<p>This is a paragraph</p>

</body>

</html>

3.External:-

An external style sheet is used to define the style for many HTML pages.

Example:-

 <!DOCTYPE html>
<html>
<head>
  <link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</body>
</html>