Sayadasite: ECOMMERCE 3 SEM NEP UNIT I

INTRODUCTION TO ECOMMERCE AND TECHNOLOGY INFRASTRUCTURE

WORKING OF WEB

The browser sends an HTTP request message to the server, asking it to send a copy of the website to the client (you go to the shop and order your goods). This message, and all other data sent between the client and the server, is sent across your internet connection using TCP/IP.

The Web physically consists of the following components −

Your personal computer − This is the PC at which you sit to see the web.

A Web browser − A software installed on your PC which helps you to browse the Web.

An internet connection − This is provided by an ISP and connects you to the internet to reach to any Website.

A Web server − This is the computer on which a website is hosted.

Routers & Switches − They are the combination of software and hardware who take your request and pass to appropriate Web server.

The Web is known as a client - server system. Your computer is the client and the remote computers that store electronic files are the servers.

Working of Web

When you enter something like Google.com the request goes to one of many special computers on the Internet known as Domain Name Servers (DNS). All these requests are routed through various routers and switches. The domain name servers keep tables of machine names and their IP addresses, so when you type in Google.com it gets translated into a number, which identifies the computers that serve the Google Website to you.

When you want to view any page on the Web, you must initiate the activity by requesting a page using your browser. The browser asks a domain name server to translate the domain name you requested into an IP address. The browser then sends a request to that server for the page you want, using a standard called Hypertext Transfer Protocol or HTTP.

The server should constantly be connected to the Internet, ready to serve pages to visitors. When it receives a request, it looks for the requested document and returns it to the Web browser. When a request is made, the server usually logs the client's IP address, the document requested, and the date and time it was requested. This information varies server to server.

An average Web page actually requires the Web browser to request more than one file from the Web server and not just the HTML / XHTML page (EXtensible) , but also any images, style sheets, and other resources used in the web page. Each of these files including the main page needs a URL to identify each item. Then each item is sent by the Web server to the Web browser and Web browser collects all this information and displays them in the form of Web page.

We have seen how a Web client - server interaction happens. We can summarize these steps as follows −

A user enters a URL into a browser (for example, Google.com. This request is passed to a domain name server.

The domain name server returns an IP address for the server that hosts the Website (for example, 68.178.157.132).

The browser requests the page from the Web server using the IP address specified by the domain name server.

The Web server returns the page to the IP address specified by the browser requesting the page. The page may also contain links to other files on the same server, such as images, which the browser will also request.

The browser collects all the information and displays to your computer in the form of Web page.

INTRODUCTION

Introduction to HTML HTML is a language for describing web pages. It stands for Hyper Text Markup Language. A markup language is a set of markup tags. The tags describe document content and these documents contain tags and plain text. The HTML documents are also called web pages. HTML markup tags are usually called HTML tags. These tags are keywords (tag names) surrounded by angle brackets like . They normally come in pairs like and. The first pair of tags is the start tag and the second tag is the end tag and end tag contains a forward slash before the tag name. Start and end tags are also called opening tags and closing tags. The HTML tags are also called as the HTML elements. The general form is as shown below.

<tagname> content </tagname> Now let us understand about the general HTML Page Structure.

HTML PAGE STRUCTURE:

Example

Generally these html tags are edited in a any text editor or notepad. It is important to save these HTML pages by giving the extension as “.html”.

To open the notepad the following steps has to be followed.

Start All programs Accessories Select Notepad

The next step is to open this file in any browser in order to have the resultant view of the final web page. To view the web page, Start your web browser and open your html file from the File, Open menu, or just browse the folder and double-click your HTML file.

Basic Tags :

<html> : This element defines the whole HTML document. The element has a start tag and an end tag

</html> : The element content is another HTML element (the body element).

<body> : This element defines the body of the HTML document. This element has a start tag and an </body>end tag

The element content is another HTML element (a p element).

 : This element defines a paragraph in the HTML document. The element has a start tag and an end tag

The element content is: This is my first paragraph.

<head> : This element is displayed in title bar of the browser as a part of the browser’s window.

<title> : The title appears in the title bar on the top of the browser’s window. This element also has a start tag <title> and an end tag </title>. This contains the document title explains the content of the web page on the whole.

<heading> : There are six levels of headings starting from h1 through h6. This tag makes the font size of the text to appear larger and bolder at different levels. These tags can be used as headings, subheadings, sections and sub sections as shown in web program1 below.

Formatting tags

: Defines bold text. It makes the data to appear as thicker and darker.

Example 17.1

: VIRTUAL MEMORY 

DISPLAYS

VIRTUAL MEMORY

: Defines italicized text. It makes the data to appear as italic.

Example 17.2:

VIRTUAL MEMORY

DISPLAYS

VIRTUAL MEMORY

: Defines underlined word. It makes the data to be underlined.

Example 17.3:

VIRTUAL MEMORY

VIRTUAL MEMORY

 : Defines a single line break. Use the   tag to enter line breaks, not to separate paragraphs.
 tag is useful for writing addresses or poems.

Example 17.4:

HTML XHTML DHTML

DISPLAYS

HTML

XHTML

DHTML

5. : <a> This tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link’s destination. By default, links will appear as follows in all browsers:

Ø An unvisited link is underlined and blue

Ø A visited link is underlined and purple

Ø An active link is underlined and red

Example 17.4:

DISPLAYS

this respective website

6. <img> : The <img> tag defines an image in an HTML page. The <img> tag has two required attributes: src(Specifies the URL of an image)and alt(Specifiesate text for an image).

Note that images are not technically inserted into an HTML page, images are linked to HTML pages. The tag creates a holding space for the referenced image.

To link an image to another document, simply nest the tag inside tags but, has no end tag.

17.7 Lists in HTML

The <li> tag defines a list item. They are of three types and they are:

The <li> tag is used in ordered lists (<ol>)

The (<ul>) tag is used in unordered lists (ul)

The (dl) tag is used in ordered lists (dl)

SOME ADDITIONAL TAGS AND SIMPLE PROGRAMS

The resultant web page after opening this in the web browser appears as shown below

OUTPUT

1. Coffee

2. Tea

3. Milk

5. Coffee

6. Tea

7. Milk

LIST WEB PAGE

The resultant web page after opening this in the web browser appears as shown below

OUT PUT

· CHARLES BABBAGE

· LADY ADA LOVE LACE

· HERMAN HOLLERITH

UNORDERED LIST

The resultant web page after opening this in the web browser appears as shown below

MARKING UP TEXT IN HTML

The tag in HTML is used to define the marked text. It is used to highlight the part of the text in a paragraph. The tag is new in HTML 5.

Example 1: This example uses tag to highlight the text.

Typical use cases for include:

When used in a quotation (<q>) or block quote (<blockquote>), it generally indicates text which is of special interest but is not marked in the original source material, or material which needs special scrutiny even though the original author didn't think it was of particular importance. Think of this like using a highlighter pen in a book to mark passages that you find of interest.

Otherwise, indicates a portion of the document's content which is likely to be relevant to the user's current activity. This might be used, for example, to indicate the words that matched a search operation.

Don't use for syntax highlighting purposes; instead, use the element with appropriate CSS applied to it.

Note: Don't confuse with the element; is used to denote content which has a degree of relevance, while indicates spans of text of importance.

MARKING TEXT OF INTEREST

In this first example, a element is used to mark some text within a quote which is of particular interest to the user.

It is a period of civil war. Rebel spaceships, striking from a hidden base,

have won their first victory against the evil Galactic Empire. During the

battle, Rebel spies managed to steal secret plans to the Empire's

ultimate weapon, the DEATH STAR, an armored space station with enough power to

destroy an entire planet.

</blockquote>

The resulting output looks like this:

Identifying context-sensitive passages

This example demonstrates using to mark search results within a passage.

It is a dark time for the Rebellion. Although the Death Star has been

destroyed, Imperial troops have driven the Rebel

forces from their hidden base and pursued them across the galaxy.

Evading the dreaded Imperial Starfleet, a group of

freedom fighters led by Luke Skywalker has established a new secret base on

the remote ice world of Hoth.

To help distinguish the use of for search results from other potential usage, this example applies the custom class "match" to each match.

The results look like this:

Accessibility concerns

The presence of the mark element is not announced by most screen reading technology in its default configuration. It can be made to be announced by using the CSS content property, along with the ::before and ::after pseudo-elements.

mark::before,

mark::after {

clip-path: inset(100%);

clip: rect(1px, 1px, 1px, 1px);

height: 1px;

overflow: hidden;

position: absolute;

white-space: nowrap;

width: 1px;

}

mark::before {

content: " [highlight start] ";

}

mark::after {

content: " [highlight end] ";

}

FORMS

These fields can be added to your forms:

Ø Text field

Ø Password field

Ø Hidden field

Ø Text area

Ø Check box

Ø Radio button

Ø Drop-down menu

Ø Submit button

Ø Reset button

Ø Image button

You can click on the field type to get a detailed explanation. Finally, if you want to learn how to validate inputs to form fields (valid email address etc.) Text fields are one line areas that allow the user to input text.

HTML5

HTML5 was designed to do virtually anything you want to do online without having to download browser plugins or other software. Want to create animations? Embed music and movies? Build advanced applications that run in your browser? You can with HTML5.

What is HTML5?

Ø HTML5 is the newest version of HTML. The term refers to two things. One is the updated HTML language itself, which has new elements and attributes. The second is the larger set of technologies that work with this new version of HTML like a new video format

Ø And enable you to build more complex and powerful websites and apps.

To understand how HTML has evolved over the years, let’s look at the differences between HTML and HTML5.

HTML vs HTML5

HTML is the World Wide Web's core markup language. Originally designed to semantically describe scientific documents, it has since evolved to describe much more.

Most pages on the web today were built using HTML4. Although much improved since the first version of HTML written in 1993, HTML4 still had its limitations. It’s biggest was if web developers or designers wanted to add content or features to their site that weren’t supported in HTML. In that case, they would have to use non-standard proprietary technologies, like Adobe Flash, which required users to install browser plugins. Even then, some users wouldn’t be able to access that content or feature. Users on iPhones and iPads, for example, wouldn’t be able to since those devices don't support Flash.

HTML5 was designed to cut out the need for those non-standard proprietary technologies. With this new version of HTML, you can create web applications that work offline, support high-definition video and animations, and know where you are geographically located.

To understand how HTML5 can do all that, let’s look at what’s new in this latest version of HTML.

What is new in HTML5?

HTML5 was designed with major objectives, including:

Making code easier to read for users and screen readers

Reducing the overlap between HTML, CSS, and JavaScript

Promoting design responsiveness and consistency across browsers

Supporting multimedia without the need for Flash or other plugins

Each of these objectives informed the changes in this new version of HTML. Let’s focus on seven of those changes below.

New Semantic Elements

HTML5 introduced several new semantically meaningful tags. These include <section>, <header>, <footer> <nav>, , <figure>, <aside> <figcaption>, <data>, <time>, <output>, <progress>, <meter> and <main>. These make it easier to write cleaner code that clearly delineates style from content, which is particularly important to users with assistive technologies like screen readers.

Sayadasite

Multiple Ads

Search

Menu Bar

ECOMMERCE 3 SEM NEP UNIT I

No comments: