Software that is designed according to the client's requirements is known as a software application. ie IRCTC app etc
Software that is designed according to the market requirements is known as a software product. ie Ms Office.
In HTML, the computer can interpret the raw text that is wrapped in HTML elements.
Hypertext is the text displayed on a computer or device that provides access to other text through links, also known as hyperlinks. You probably clicked on a couple of hyperlinks on your way to this Codecademy course.

<aside> 💡 Network:- A computer network comprises a group of computers connected for sharing information and resources.

</aside>

Popular Web Server Software:-

Microsoft IIS - Internet Information Services
Apache Tomcat
JBOSS
IBM Lotus

HTML: Hypertext Markup Language

The term markup is derived from general computer terminology where markup means preparing for a presentation.
A markup language is used in web development to present information on the browser.
GML - Generic Markup Language
SGML - Standard Generic Markup Language
These two markup languages are the first markup language used by the browser
Teem Berners Lee introduced HTML as a markup language for designing pages on the web.
It is a markup language used over HTTP, hence it is named hypertext markup language.
HTML standards are maintained by W3C(World Wide Web Consortium).
The elements of HTML can be presented dynamically by using functions of any client-side script(Java Script) or statically by using tags.

Element - image()

Tag - <img>

Normal Elements :- It can directly return a presentation on callback.

It can not stop returning the presentation, hence it requires an end tag.

ie. <b> </b>
Void Elements :- The term void means that elements can not return any presentation directly on a callback.

It can return only specified values and stops returning the value, hence itself an ending element without any end tag.

ie. <img>
RC(Rich Content) Data Elements :- It is an element used for presenting rich text contents however it will not allow any formats for text.

You can not use any other element without RC Data Elements.

ie. <textarea> </textarea>
Raw Text Elements :- The elements in HTML that can be presented by using raw text like "&", "<", ">" are known as Raw Text Elements.

ie. ©2
Foreign Elements :- These elements are used in HTML but are not native to HTML.

They require libraries to be linked with web pages.

ie MathML, SVG etc...

Structure of HTML Documents

A typical HTML document comprises of two major components :

Documents Declaration
Documents Scope

Document Declaration:-

The webpage is accessed and viewed on the browser.
A page comprises tags that are converted into elements.
Every browser has a parser that translates HTML tags into elements.
A parser can use several versions of HTML, hence developers have to define document declaration in the codes. ie <!DOCTYPE html>
It specifies that the page is designed in HTML 5.

Documents Scope:-

A browser window can display multiple documents, hence every document scope is defined by using the tag. ie <html> </html>

**<!DOCTYPE html>
<html>
<!-- This is the documents scope -->
</html>**

Structure of HTML Documents Scope

An HTML documents scope separates documents into two sections.
Head
Body

A typical head section of HTML comprises of following tags :

**<title>
<link>
<meta>
<script>
<style>**

Title :- It defines the text that is displayed as a title for the page in the browser title bar.

Syntax :

**<title>CodeTrekClub</title>**

Link :- It is an element used to link any external file to webpage, which include favourite icons, stylesheets etc...

**Syntax : 
<link href="Images/favicon.ico" rel="icon">**

**Syntax :
<!DOCTYPE html>
<html>
    <head>
        <title>CodeTrekClub</title>
        <link href="Images/favicon.ico" rel="icon">
    </head>
    <body></body>
</html>**

Meta :-

It describes metadata that is information about the web page.
Meta comprises of details like language, culture, keywords etc...
Meta makes the webpage more SEO(Search Engine Optimization) friendly.

Most commonly used attributes and values in meta are :

Charset :- It specifies the character set used to design web page. It is according to UTF standard (UTF-8:English US). ie

**<meta charset="UTF-8">**

Keyword :- It specifies the keyword used by SEO to search for your page show in search the result.

**Syntax :
<meta name="keyword" description="coding, programming, developement, software">
<!-- Whenever a client type these keyword then my wesite will be there in the search feed -->**

Description :- It defines the summary that is displayed in the search result for your website.

**Syntax : 
<meta name="description" context="Best offer online website">**

Http-equiv :- It specifies how the request is handled and client is trying to access the page. ie To reload or To be static on request.

**Syntax :
<meta http-equiv="refresh" content="4">**

Style :- It is an element used to embed the style that makes the presentation more attractive and interactive.

Body Section

The body section specifies contents to display in the browser workspace.
The element body <body> defines the following attribute.

Bg Color :- It defines background color for the page.

**Syntax :
<body bgcolor="red">**

Background :- It sets the page background.

**Syntax : 
<body background="Images/myimage.jpg">**

Text :- It defines the color for text display in the body section.

**Syntax :
<body text="blue">**

Vlinks :- It defines a color for visited link.

**Syntax : 
<body vlink="green">**

Alinks :- It defines the active links on the page.

**Syntax :
<body vlink="green" alink="blue">**

Left, Right, Top, Bottom Margin:- It defines the space between text or contents in the page with regard to the browser window and it is defined in pixels.

**Syntax : 
<body leftmargin="50" rightmargin="50" bottommargin="50" topmargin="50">**

Elements Of Body Section

Elements mean tags.
HTML 5 introduce several new elements into the body section to make it more SEO and user-friendly: They are,

Aside :- It is a container that is comprised of constants which are non-related to HTML that adds advertisements.
Article :- It publishes constants that are related to the website.
Dialogue:- It specifies an area from where a user can interact. It is an optional area that can be closed dynamically.
Figure:- It encapsulates an image along with a caption.
Figcaption:- It defines a caption bound to an image.
Header:- It specifies that the contents are to be displayed at the top margin of the page.
Footer:- It specifies that the contains to be displayed at the bottom margin of the page.
Section:- It defines an area between the header and footer.
Menu:- It organises elements according to behaviour and defines and defines navigation within the page.
Nav:- It defines the navigation area within the menu.
Div:- It is a container used to represent a large block of code.

Div is a container that divides the pages into sections.
```
**Syntax : 
<div>
     <p>Lorem ipsum dolor si</p>
</div>**
```
Span:- It is a container that defines an inline block of code.

Headings:- Heading in HTML are defined by using a tag <hn>, where n refers to the level from 1 to 6.

**Syntax :
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>**

**Syntax :

<!DOCTYPE html>
<html>

<head>
        <title>First Page</title>
</head>

<body>
    <h1>One</h1>
    <h2>Two</h2>
    <h3>Tree</h3>
    <h4>Four</h4>
    <h5>Five</h5>
    <h6>Six</h6>
</body>

</html>**

Heading can use align attribute to align the heading left, centred or right.

**Syntax :
<h3 align="center">Three</h3>**

Paragraph & Block-quote

Paragraph:-

HTML ignores the default paragraph marks defined in the source code and presents them in a single block.
To add the manual paragraph you can use the tag <p> with align attributes left, right, and justify.

**Syntax :
<p align="justify">Welcome to new era of developement</p>**

Blockquote:-

A blockquote is similar to a paragraph but define the content with a left and right indentation.
The paragraph and blockquote by default have a line break before and after the content.

**Syntax :
<blockquote align="justify">You are in Blockquote tag</blockquote>**

Ordered & Unordered List

Ordered List :-

It is an auto-numbering style defined for items in a list. So that the numbering updates automatically when you add or remove a list.
The list is defined by using the tag<ol> and items are defined by using the tag <li>.

**Syntax :
<ol>
<li>Apple</li>
<li>Papaya</li>
<li>Pineapple</li>
<li>Grapes</li>
</ol>**

**Output :
1.Apple
2.Papaya
3.Pineapple
4.Grapes**

The numbering style for an ordered list can be defined by using the attribute type.

**Syntax :
<ol type="1">
<ol type="a">
<ol type="A">**

The numbering for list items always starts from level 1 you can change it by using the attribute start.

**Syntax :
<ol type="A" start="5">
<li>Apple</li>
<li>Papaya</li>
<li>Pineapple</li>
<li>Grapes</li>
</ol>**

**Output :
E.Apple
F.Papaya
G.Pineapple
H.Grapes**

The numbering will reset for every ordered list. If you want to continue the number list you can add the contents into <ol> tag without defining <li> list items.
An ordered list can be nested that is it can use a multilevel numbering style by changing the type at each level.

Unordered List :-

It represents a collection of items as a bulleted list with types such as disk, square, or circle.

**Syntax :
<ul type="bulleted">
<ul type="circle">
<ul type="square">**

The list is defined by using tag <ul> and the items are defined by using the tag<li>.

**Syntax :
<ul type="circle" >
<li>Item1</li>
<li>Item2</li>
</ul>**

Basic HTML elements and entities to present content in the browser :

The code that you write in any editor to present on the browser is not presented exactly as expected.
HTML ignores the line brackets, blank spaces and paragraph mark that you manually define in code. You have to use the following elements and entities.
A manual line break in HTML defines by using tag <br>.

Syntax :

Hellow guys<br>

Welcome to <br>

Karnatka<br>Bangalore

Output :

Hello guys

Welcome to

Karnataka

Bangalore

Blank spaces :-

HTML allows one character space between words or characters.
The additional spaces are ignored, you can manually define a blankspace by using entity &nbsp.

**Syntax :
H &nbsp; T &nbsp; M &nbsp; L**

**Output :
H   T   M   L**

Pre-formatted Text :-

HTML present any block of content exactly as defined in the editor without losing the format by using tag <pre>.
It effects only the formats defined in source and not the elements.

**Syntax :
<div>Simple C++ Program</div>

<div>

<pre>

#include "bits/stdc++.h"

using namespace std;

int main(){

cout<<"Welcome to new era of developement";

}

</pre>

</div>**

**Output :

#include "bits/stdc++.h"

using namespace std;

int main(){

cout<<"Welcome to new era of developement";

}**

Acronyms:-

The <acronym> tag defines an acronym or abbreviation. To decipher an acronym, the global title attribute is used (displayed as a pop-up text prompt when you hover the mouse over an acronym).
HTML documents have to present several contents that may be optional to display we can use the acronyms to display the contents only on mouse hover.
The contents are shown as screen tips (Tooltip).

**Syntax :
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Hover the mouse cursor over acronym HTML</p>
    <acronym title="Hyper Text Markup Language">HTML</acronym>
  </body>
</html>**

Details & Summary :-

HTML provides <details> elements to encapsulate a caption and it's a definition so that the user can expand the definition dynamically.
The element <summary> is used in detail to define a caption for definition.
The attribute open is used in detail to keep the summary open always.

**Syntax : 
<details>
    HTML is a markup language used to present the content on browser
</details>
<details>
    <summary>HTML</summary>
    HTML is a markup language used to present the content on browser
</details>
<details open>
    <summary>JavaScript</summary>
    JavaScript is a client side script 
</details>**

Datalist with terms and definitions:-

A catalyst encapsulates terms and definitions which are presented with indentation and margins.
The list is defined by using the tag <dl> -> data list and it contains the term defined with <dt> -> data term with definition as <dd> ->data definition.

**Syntax :**
**<dl>
<dt>Your terms : </dt>
<dd>Your definitions</dd>
</dl>**

Output :

Your terms :

Your definitions

Text Formatting In HTML

Formatting of text in HTML documents does not depend on how it is defined in the editor you have to use various elements to format text.

Such as :

Font <font>
Font <style>
Font <effect>

Font Style :- The character font styles include bold and italic which are defined by using the following tag

Bold :- <b> or <strong>
Italic :- <i> or <em> emphasized

Note :-

The element strong and emphasized are used while reviewing a document.
A developer can highlight the changes made in the document by signing the <strong> and <em> tags.

Font Effects:-

The font effect will change the character display mode by highlighting or by changing the position raised or lowered from the baseline.
The tags used for font effects are :

Underline :- <u> <ins> inserted
Strikeout :- <strike> <del> deleted
Superscript :- <sup>
Subscript :- <sub>

Images in HTML

We can display images by using a markup language.
The image format supported for presentation on a web page is shown below.

.png :- Portable Network Graphics

It is a high-resolution image type
It has more pixels.
It occupies more space.
And it is used for displaying images on a webpage so that users can zoom and view in details.

.jpg or .jpeg :- Joint Photographic Group or Joint Photographic Expert Group

It is a high resolution it is having more pixels but less than png.
It is a compressed image format.
Used for displaying buttons, icons, bullets, logos, etc...

.gif :- Graphic Interchange Format

Low-resolution image.
Very low pixel depth.
It can be animated.
Used for displaying buttons, icons, bullets, logos, etc...

.svg :- Scalar Vector Graphics

It uses vector graphics instead of pixels.
Have higher resolution than png.
Used for architecture diagrams, mathematical equations, etc...

Image Tags

To display images on a webpage HTML provide an image element with tag <img>.
The attributes of image elements are.

Src :- It specifies the name and path of the image to display.
Alt :- It defines an alternative text to display when the image fails to load.
Border:- It sets a border for an image by specified pixels.
Width and Height:- It specifies the width and height of the image in pixels or other.
Espace and Hspace:- It defines vertical and horizontal space between text and images.
Align:- It specifies the alignment of the image.

Links In HTML

A link is clickable text, picture or graphic that navigates the user to any specified location when they click.
The links that handle navigation over HTTP protocol are known as hyperlinks.
A hyperlink can navigate to any specified location or file.
Hyperlinks in the webpage are classified into two types.

Intra-document links.
Inter document links.

Hyperlinks in HTML are created using anchor elements <a>.
The navigation for anchors is defined by using the attribute "href".

**Syntax :
<a href="">Click Here</a><br>**

Intra-document links:-

The hyperlinks that are used within the page.
A hyperlink designed for navigation within the page will use "href" starting with "#".

**Syntax :
<h1 id="toc">Table Of Content</h1>
<ol>
    <li><a href="#html">Bike1</a></li>
    <li><a href="#css">Bike2</a></li>
    <li><a href="#js">Bike3</a></li>
</ol>
<h2 id="html">Bike1</h2>
<a href="#toc"><img src="Images/bike1.jpg" width="100" height="100"></a>
<p>Here's our first bike</p>

<h2 id="css">Bike2</h2>
<a href="#toc"><img src="Images/bike2.jpg" width="100" height="100"></a>
<p>Here's our Bike2</p>

<h2 id="js">Bike3</h2>
<a href="#toc"><img src="Images/bike3.jpg" width="100" height="100"></a>
<p>Here's our Bike3</p>**

Inter document links:-

The hyperlinks that enable navigation from one page to another are referred as inter-document links.
The navigation can be defined as any file or URL.
The target file contents can open in your browser if it supports relative plugins.
The file is downloaded if plugins are not available.

**Syntax : 
<h1>Quick Navigation</h1>
<li><a href="Files/OOPs C++.pdf">OOPs</a></li>
<li><a href="Index.html">Demo Page</a></li>
<li><a href="Images/car2.jpg">MyFavCar</a></li>**

Link Target

The target attribute specifies where to open a new document.
Hyperlinks in HTML always open it’s target in the same browser window by removing the current page.
Link target location in a new tab

<a href="<https://www.w3schools.com>" target="_blank">Visit W3Schools</a>
=========================================================
<a target="_blank|_self|_parent|_top|framename"></a>

Link the target location in a new window.

<a href="javascript:window.open('tutorial.html', 'tutorial', width = 400, height=300)">
        Visit W3Schools
</a>

HTML Elements Reference : https://developer.mozilla.org/en-US/docs/Web/HTML/Element

<!DOCTYPE html> should always be in the first line of the html code so that the browser can understand which version of HTML to expect.

<html> element will contain all the HTML code.

HTML & CSS : Absolute Beginners

Table of contents