UNIT-3
XML
AND
AJAX A New Approach
Web Technologies UNIT-3 R16
netaji gandi
Monday, December 23, 2019
Results for
"WEB TECHNOLOGY"
Contents of a Web Page
HTML has come a long way right from its initial version HTML. However, despite the fact that you can use HTML for much more than serving up static text documents, the basic organization and structure of the HTML document remains the same.
Before we dive into the specifics of various elements of HTML, it is important to summarize what each element is, what is it used for, and how it affects other elements in the document? A high-level overview of the standard HTML document and its elements is given below.
Specifying Document Type
The <!DOCTYPE> tag in a HTML document is used to specify a Document Type Definition (DTD). This tag is frequently overlooked by many of the web developers. This tag precedes all other tags in a HTML document. It specifies the format of the content that follows – what tags to expect, methods to support and so forth.
Validation systems use DTDs to actually perform the validation, using the DTD contents as a road map and a syntax guide. HTML editors use the DTD to provide tag auto completion and on-the-fly syntax checking.
The <!DOCTYPE> tag is generally written as follows:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
This above tag specifies the following information:
- The document’s top tag level is HTML (html).
- The document adheres to the formal public identifier (FPI) ‘‘W3C HTML 4.01 Strict English’’ standards (PUBLIC “-// W3C//DTD HTML 4.01//EN”).
- The full DTD can be found at the URL www.w3.org/TR/html401/strict.dtd.
HTML Document Structure
All HTML tags will have three document-level tags in common. These tags (essential or fundamental tags in HTML), <html>, <head> and <body> delimit certain sections of the HTML document.
The <html> tag
The <html> tags enclose the entire HTML document. This tag tells the browser where the HTML markup begins and ends. Also tells the browser that it is a webpage. We can think of the <html> tags as the virtual top and bottom of a web page, as shown below:
Additional attributes can be specified along with the <html> tag. Attributes like lang and dir can be specified which tells the browser about the language in the document and about the direction of the text respectively. For the dir attribute, the possible values are ltr (left to right) and rtl (right to left).
The <head> tag
The <head> tag delimits the header section of a HTML document. The document’s title, meta information, scripts and style information are all contained in the <head> section. Most of the information available in the head tag is not visible to the user.
The information specified in the meta tags is useful for search engines like google, yahoo etc… The <head> tag contains one of the important tags in html, the <title> tag, which is used to specify the title for the web page.
The <body> tag
The HTML document’s main visual content is contained within the <body> tags. That’s not to say that everything appearing between the <body> tags will be visible, but, like a printed document, this is where the main body of the document is placed and appears.
Styles
Styles effect the way how the elements in a webpage are presented to the user. This mechanism should not be neglected while developing web pages. Style definitions may appear in the head section of a document or linked from a separate file or specified inside the tags by using the style attribute.
The important point about styles is that they enable you to radically change a document’s appearance by simply applying new styles. This enables you to display the document differently for different uses – different display or output devices or to provide a different look and feel for different audiences.
Block Elements
Like word processors (Ex: Microsoft Word, Notepad, Wordpad etc…), HTML includes several tags to format blocks of text. These tags include the following:
- <p> – Paragraphs
- <h1> through <h6> – Headings
- <blockquote> – Quoted text
- <pre> – Preformatted text
- <ul>, <ol> and <dl> – Lists
- <div> – Divisions
Each of the block elements results in a line break and noticeable space padding after the closing tag. The block elements works only on blocks of text. They cannot be used to format characters or words inside blocks of text.
Paragraphs: The paragraph tag (<p>) is used to delimit entire paragraphs of text.
Headings: HTML supports six levels of headings. A heading is displayed generally large and in bold formatting to identify it as a heading. Level 1 heading (<h1>) is the largest and Level 6 heading (<h6>) is the smallest.
Quoted Text: The <blockquote> tag displays the text as a quote instead of plain text. The text inside a block quote will be offset from the left margin.
List Elements: The list elements are used to display a list of items in a web page. There are three types of lists namely: unordered lists (<ul>), ordered lists (<ol>) and definition lists (<dl>).
Preformatted Text: Generally, while displaying text in a web browser, the browser eliminates unnecessary white spaces and tab spaces before displaying it to the user. To prevent that and to display the text along with all the whitespaces and tab spaces, the preformatted text tag (<pre>) can be used.
Divisions: Divisions are a higher level of block formatting, usually reserved for groups of related elements, entire pages or sometimes just a single element. Divisions are generally used as containers for elements in a web page. Divisions make it easier to apply styles to a set of elements.
Inline Elements
The finest level of markup possible in HTML is at character level. Like in a word processor, HTML allows formatting on individual characters. Inline formatting elements include the following:
- <b> – Bold
- <i> – Italics
- <big> – Big text
- <small> – Small text
- <em> – Emphasized text
- <strong> – Strong text
- <tt> – Teletype (monospaced) text
Several inline tags like strikethrough <strike> and underline <u> tags, have been deprecated in the current HTML specifications. Even the <font> tag has been deprecated in favor of styles. The <strike> and <u> tags have been replaced with <del> (deleted) and <ins> (inserted).
Several experienced web developers recommend the usage of <strong> and <em> tags for strong and emphasized text instead of using <b> and <i> respectively. The reasoning has to do with what is to be accomplished – is it strengthen or emphasize text or the look (bold and italic).
The span tag (<span>) is used to span styles across one or more inline characters or words. In effect, the <span> tag enables you to apply your own inline styles.
Special Characters (Character Entities)
Some special characters must be referenced directly instead of simply typed into the document, and some of these characters cannot be typed on a standard keyboard, such as the trademark symbol (™) or the copyright symbol (©). Others could cause the HTML client confusion (such as the angle brackets,< and >). These specially coded characters are commonly referred to as character entities.
Entities are referenced by using a particular code in your documents. This code always begins with an ampersand (&) and ends with a semicolon (;). Three different ways to specify an entity exist:
- mnemonic code (such as copy for the copyright symbol)
- decimal value corresponding to the character (such as #169 for the copyright symbol)
- hexadecimal value corresponding to the character (such as #xA9 for the copyright symbol)
The following are all examples of valid entities:
- —A nonbreaking space (used to keep words together)
- <—The less-than symbol, or left-angle bracket (< )
- ©—The copyright symbol (©)
- &—An ampersand (&)
- ——An emdash ( — )
Organizational Elements
Two HTML elements allow us to organize information in a document: tables and forms. Tables allow us to present the data in column and row format, like a spreadsheet. Forms enable us to retrieve and present data using elements common to GUI interfaces (textboxes, radio buttons, check boxes etc…).
Linking to Other Pages (Hyperlinks)
The main advantage of the World Wide Web (WWW) is the ability to link to other documents on the web. A link typically appears as underlined text and is often rendered in a different color than normal text. Hyperlinks (links) are created by using the anchor tag (<a>). The href attribute of the anchor tag specifies the address (URL) of the destination resource. For example a link to Google appears as follows:
<a href=”http://www.google.com”>Google</a>
Images
One of the great innovations that the World Wide Web (WWW) and HTTP brought to the internet was the ability to serve up multimedia to the clients. The precursors to full-motion video and audio were graphical images in the Web-friendly Graphics Interchange Format (GIF) and Joint Photographic Experts Group (JPEG) format.
Images can be inserted into web pages by using the image tag (<img>). A typical image tag looks as shown below:
<img src=”/images/sun.jpg” alt=”Sunrise” width=”200” height=”100” />
The src attribute specifies the location of the image. The alt attribute specifies the alternate name for the image and the height and width attributes specifies the dimensions of the image.
Comments
Although HTML documents tend to be fairly legible all on their own, there are several advantages to adding comments in our HTML code. Some typical uses are: comments aid in document organization or marking particular document sections for later reference.
Comments in HTML begin with <!– tag and end with –> tag. A comment can span multiple lines. All the text in between the comment tags, is not visible to the end user.
Scripts
HTML is used to deploy content which is static in nature. The static content is sent to a user agent (browser) where it is rendered and presented to the user, but once it is sent, it doesn’t change. However, there is a need in HTML documents for such things as decision making ability, form validation and in the case of Dynamic HTML (DHTML), dynamic object attribute changes.
In these cases, client-side scripting can be used. One of the famous client-side scripting languages is Javascript. Scripts can be included in HTML documents by using the script tag (<script>) inside the <head> tag.
Summary
After looking at all the elements that can be placed inside a HTML document, it can be said that all HTML documents should have a <!DOCTYPE> declaration, <html>, <body> tags and atleast a <title> tag within the <head> section. The rest of the elements are strictly optional, but they help define a document’s purpose, style and ultimately its usability.
Contents of a Web Page
netaji gandi
Thursday, November 21, 2019
History of HTML
- Initially work on HTML was started in 1989 by Tim Berners Lee.
- In 1995, HTML 2.0 was published by IETF (Internet Engineering Task Force). HTML 2.0 is the first standard HTML specification.
- In 1997, HTML 3.2 was published by W3C (World Wide Web Consortium).
- In 1997, HTML 4.0 was published by W3C. It provides three variations: strict, transitional and frameset.
- In 1999, HTML 4.01 was published by W3C.
- HTML 5 was published in October, 2014
HTML Values and Units
HTML Syntax
The basic syntactic units in any HTML document are: tags, elements and attributes. HTML describes information in a web document with the help of tags, which provide a way for marking the text. The syntax of a tag is shown below:
< tag-name >
For example, using HTML, we can display paragraphs in a web document using the <p> tag. Every browser will have default presentation effects for each tag. Almost all of the tags are written in pairs (a opening tag and a closing tag) as shown below:
< tag-name > content here…. </ tag-name >
In HTML, the content in a web document is described using the tags. The collection of content and the enclosing tags is known as an element. For example, a paragraph element looks as shown below:
<p> This is a paragraph… </p>
In general, all tags in HTML support attributes using which additional information is specified to the browser to render the content of the element. For example, an old way of aligning the text in a paragraph to the center of the document is shown below:
<p align=”center”>This is a paragraph…</p>
In the above example, align is the attribute-name and center is its value. General syntax for writing attributes is:
attribute-name = “value”
Text and Comments
HTML comments can be used by the developer of the web pages to document certain sections in the web page. A comment in HTML should be written as follows:
<!– Your comment here. –>
Comments are generally used for short text, not for commenting out large sections of HTML code. The text included in the comments is not visible to the user.
CDATA Sections
For larger comment sections, CDATA (character data) sections can be used. CDATA structures are also useful in XML and XHTML. The format for the CDATA tag is as follows:
<![CDATA[ Commented text goes here. ]]>
Both comments and CDATA tags cannot be nested.
The term CDATA is used about text data that should not be parsed by the XML parser. Characters like “<” and “&” are illegal in XML elements. “<” will generate an error because the parser interprets it as the start of a new element. “&” will generate an error because the parser interprets it as the start of a character entity.
Some text, like JavaScript code, contains a lot of “<” or “&” characters. To avoid errors, script code can be defined as CDATA. Everything inside a CDATA section is ignored by the parser. A CDATA section starts with “<![CDATA[” and ends with “]]>“.
History of HTML
netaji gandi
Introduction to HTML
HTML is a mark up language used to describe the content in a web document. HTML (HyperText Markup Language) was defined using SGML (Standard Generalized Markup Language) which is an ISO (International Organization for Standardization) standard for describing text-formatting languages.
One must remember that HTML is not a programming language. A file with HTML code is saved with .html extension.
A web page (web document) is a document which contains many elements like text, audio, video, images, flash animations etc. The web pages are generally stored on a server and a user requests these web pages by using a web browser.
Web documents are created using different technologies. Among them HTML plays a crucial role. Every web page is made up of HTML and other technologies like CSS, Javascript etc.
HTML is responsible for telling a web browser (Ex: Microsoft Internet Explorer, Firefox, Chrome, Safari, Opera etc…) how text and other objects (like video, images etc…) should appear in a web browser.
Whether the text should be small, large, bold, underlined, left aligned or right aligned is determined by the HTML in the web page.
HTML is not a programming language like C, C++, Java etc. It is a markup language.
HTML is a markup language which describes the content in web pages.
A user is concerned with only the content in the webpage. User doesn’t worry about the HTML which makes the browser understand the content in a webpage. HTML is hidden from the user. However, as a creator of web pages, he or she should have knowledge about HTML and its uses.
Hypertext
The hypertext in HyperText Markup Language refers to the text in a web page which contains links to other web pages. When a user clicks on a link, the user gets redirected to another web page. This term was coined to describe documents that could change, redirect and otherwise overcome the linearity of normal text.
Markup
Writing explicit editing instructions in or around text is generally known as marking up text. While creating web pages, we use markup (tags) which specifies the browser how it should display the text (bold, underline, big text etc…).
In the early 1990’s a new language was created, Hypertext Markup Language, or HTML. The language was created to provide a way for developers to mark up documents so web browsers could display certain elements in bold, underline or in italics etc.
Several requirements must be considered when telling a computer how to format text. Following are some of the requirements for a markup language:
- The instructions should follow a stringent set of guidelines (syntax).
- The instructions should be included in a textual document.
- The instructions should be invisible to the end user.
- The instructions should tell the display program (generally a web browser) where to start and where to end, and how to apply the formatting specified.
The HTML markup instructions are delimited with angle brackets (< >) also known as less than and greater than symbols. The markup instructions are made of angular brackets and a keyword. These markup instructions are known as tags.
In HTML there are opening tags and closing tags. An opening tag specifies the beginning of formatting and an end tag specifies the end of formatting. For example to underline text in a web page we should use <u> and </u> tags. All the closing tags begin with a / followed by the keyword.
Introduction to HTML
netaji gandi
HTTP Protocol
All web communications use the same protocol HTTP. Latest version of HTTP is 1.1 released in 1999. A HTTP communication consists of two phases: a request (from client to server) and a response (from server to client).
In both the request and response phases, the unit of communication contains two parts: one is the header and the other is the body part.
The format for a HTTP request is shown below:
HTTP-request-method Resource-path HTTP-version
Header fields
Blank line
Body of the request
According to HTTP 1.1 there are several request methods, among which some important methods are listed below:
Among the HTTP request methods mentioned above, GET and POST are the most frequently used methods. After the first line, the request message contains request header, which contains different fields known as the header fields. Each header field is a key-value pair. The format of a header field is header field name followed by a colon and a value.
Some of the frequently used header fields are: Accept (which specifies the MIME types supported by the browser), Host (which specifies the name of the host), Content-length (which specifies the no of characters in the body of the request message).
Below is an example which shows a live example of HTTP request message and HTTP response messages:
The general format of a HTTP response is shown below:
Status lineHeader fieldsBlank lineBody of the response
The status line contains information like HTTP version, Status code and Short message corresponding to the status code. Well known status codes and corresponding status messages are 200 (success), 301 (redirection), 404 (Page not found) and 500 (Internal server error).
After the first line (status line), a response message contains a set of fields which is known as the response header. Frequently used fields in the response header are: Server (which specifies information about the web server), Last-modified (which specifies the date on which the requested resource was last modified), Content-length (which specifies the length of the content in the body of the response message) and Content-type (which specifies the MIME type of the content in the body part of the response message).
Difference between HTTP GET and POST:
Although the HTTP and GET and POST can be used to send requests (data) to a web server, there are some subtle yet, important differences between them which are specified below:
- The data sent through GET request can be seen by the user in the address bar of the browser, as the data will be sent as a query string. In a POST request, the data sent by the user is hidden.
- HTTP GET is less secure (refer to the first difference) when compared to HTTP POST.
- Web servers will have limited buffer size (typically 512 bytes) for receiving the query string sent by the user using HTTP GET. If data sent by the user exceeds the buffer size, the data may be truncated or the server might crash or the server might be led to run some hidden code as part of the query string data. The last case is the so-called buffer overflow problem, a common way used by the hackers to take control of the servers and spread virus and worms. There are no restrictions on the amount of data that can be sent using HTTP POST.
HTTP Protocol
netaji gandi
Subscribe to:
Posts
(
Atom
)