Scribd
Upload
23 views31 pages

Unit 1

Uploaded by

Pudi Sekhar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
23 views31 pages

Unit 1

Uploaded by

Pudi Sekhar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 31

• The HyperText Markup Language or HTML is the standard markup language for documents

designed to be displayed in a web browser. It is often assisted by technologies such as


Cascading Style Sheets and scripting languages such as JavaScript.
• Hypertext is text which contains links to other texts. The definition of hypertext is a word or
words that contain a link to a website. An example of hypertext is the word "Facebook" that
links to the Facebook page.
• The hypertext is basically a simple text that contains a link which redirects the user to
somewhere else on the computer network. While the hyperlink is a link that allows users to
navigate between difference computer resources like webpages.
• Markup language is a text-encoding system consisting of a set of symbols inserted in a text
document to control its structure, formatting, or the relationship between its parts.
• The set of markup symbols or codes inserted into a file intended for display on the Internet.
The markup tells web browsers how to display a web page's words and images.
• The fundamental syntactic units of HTML are called tags.
• In general, tags are used to specify categories of content. For each kind of tag, a browser has
default presentation specifications for the specified content.
• The syntax of a tag is the tag’s name surrounded by angle brackets (< and >).
• Tag names must be written in all lowercase letters
• Most tags appear in pairs: an opening tag and a closing tag.
• For example, if the tag’s name is p, its closing tag is </p>.
• Whatever appears between a tag and its closing tag is the content of the tag.
• A browser display of an HTML document shows the content of all of the document’s tags; it is
the information the document is meant to portray. Not all tags can have content.
• The opening tag and its closing tag together specify a container for the content they enclose. The
container and its content together are called an element
• Consider the following element: <p> This is simple stuff. </p>
• Comments in programs increase the readability of those programs. Comments in HTML have the
same purpose. They are written in HTML in the following form:
<!-- anything except two adjacent dashes -->
• Browsers ignore all unrecognized tags. They also ignore line breaks. Line breaks that show up
in the displayed content can be specified, but only with tags designed for that purpose The same
is true for multiple spaces and tabs.
• However, a misspelled tag name usually results in the tag being ignored by the browser, with no
indication to the user that anything has been left out.
Standard HTML Document Structure:
• The first line of every HTML document is a DOCTYPE command <!DOCTYPE html>
• An HTML document must include the four tags <html>, <head>, <title>, and <body>
• The <html> tag identifies the root element of the document. So, HTML documents always have
an <html> tag following the DOCTYPE command and they always end with the closing html
tag, </html>
• The html element includes an attribute, lang, which specifies the language in which the
document is written, as shown in the following element: <html lang = "en">
• An HTML document consists of two parts, named the head and the body.
• The head element provides information about the document but does not provide its content.
• The head element always contains two simple elements, a title element and a meta element.
• The meta element is used to provide additional information about a document.
• The meta element has no content; rather, all of the information provided is specified with
attributes.
• At a minimum, the meta tag specifies the character set used to write the document.
• The most popular international character set used for the Web is the 8-bit Unicode
Transformation Format (UTF-8).
• This character set uses from one to six bytes to represent a character.
<meta charset = "utf-8“ />
• The slash at the end of this tag indicates that it has no closing tag—it is a combined opening and
closing tag.
• The content of the title element is displayed by the browser at the top of its display window,
usually in the browser window’s title bar.
• The body of a document provides the content of the document.
Basic Text Markup:
Paragraphs:
• Text is normally organized into paragraphs in the body of a document.
• Text is often placed in the content of a paragraph element, specified with the tag <p>. In
displaying text, the browser puts as many words as will fit on the lines in the browser window.
• The browser supplies a line break at the end of each line.
<!DOCTYPE html>
<!-- greet.html
A trivial document
-->
<html lang = "en">
<head>
<title> Our first document </title>
<meta charset = "utf-8" />
</head>
<body>
<p>
Greetings from your Webmaster!
</p>
</body>
</html>

• If a paragraph tag appears at a position other than the beginning of the line, the browser breaks
the current line and inserts a blank line.

<p> Mary had a little lamb, </p> <p> its fleece was white as snow. </p>
Line Breaks:
• Sometimes text requires an explicit line break without the preceding blank line.
• The break tag differs syntactically from the paragraph tag in that it can have no content and
therefore has no closing tag. <br />
• The slash indicates that the tag is both an opening and closing tag. The space before the slash
represents the absent content.
<p> Mary had a little lamb, <br /> its fleece was white as snow.</p>
• In HTML, the break tag can be written as <br>, without a closing tag or slash
Headings:
• Text is often separated into sections in documents by beginning each section with a heading.
• Larger sections sometimes have headings that appear more prominent than headings for
sections nested inside them.
• In HTML, there are six levels of headings, specified by the tags <h1>, <h2>, <h3>, <h4>,
<h5>, and <h6>, where <h1> specifies the highest-level heading.
• Headings are usually displayed in a boldface font whose default font size depends on the
number in the heading tag.
• On most browsers, <h1>, <h2>, and <h3> use font sizes that are larger than that of the default size
of text, <h4> uses the default size, and <h5> and <h6> use smaller sizes.
• The heading tags always break the current line, so their content always appears on a new line.
Browsers usually insert some vertical space before and after all headings.

<!DOCTYPE html>
<!-- headings.html
An example to illustrate headings
-->
<html lang = "en">
<head>
<title> Headings </title>
<meta charset = "utf-8" />
</head>
<body>
<h1> Aidan's Airplanes (h1) </h1>
<h2> The best in used airplanes (h2) </h2>
<h3> "We've got them by the hangarful" (h3) </h3>
<h4> We're the guys to see for a good used airplane (h4) </h4>
<h5> We offer great prices on great planes (h5) </h5>
<h6> No returns, no guarantees, no refunds,
all sales are final! (h6) </h6>
</body>
HTML Attributes:
• HTML attributes provide additional information about HTML elements.
• 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"
Images:
• The file in which the image is stored is specified in a tag. The image is inserted into the display
of the document by the browser.
• The two most common methods of representing images are the Graphic Interchange Format
(GIF, pronounced like the first syllable of jiffy) and the Joint Photographic Experts Group
( JPEG, pronounced jay-peg) format.
The Image Element:
• The image element, whose tag is <img />, is an inline element that specifies an image that is to
appear in a document.
• In its simplest form, the image tag includes two attributes: src, which specifies the file
containing the image; and alt, which specifies text to be displayed when it is not possible to
display the image.
• For example, the image files might be stored in a subdirectory named images. If the image
file’s name is stars.jpg and the image file is stored in the images subdirectory, the value of src
would be as follows: “images/stars.jpg”
• The value of alt is displayed whenever the browser cannot or has been instructed not to display
the image.
• Two optional attributes of img—width and height—can be included to specify (in pixels) the
size of the rectangle for the image.
• Can be used to scale the size of the image (i.e., to make it larger or smaller).
• <img src = "c210.jpg" height = "200" width = "200" alt = "Picture of a Cessna 210" />
• A percentage value can be given for the width of an image. This specifies the percentage of the
width of the display that will be occupied by the image. For example, width = "50%" will
result in the image filling half of the width of the display.
• If no height is given and a percentage value is given for the width, the browser will scale the
height to the width, maintaining the original shape of the image
Hypertext Links:
• A hypertext link in an HTML document, which we simply call a link here, acts as a pointer to
some particular place in some Web resource.
• Without links, Web documents would be boring and tedious to read. There would be no
convenient way for the browser user to get from one document to a logically related document.
• Most Web sites consist of many different documents, all logically linked together. Therefore,
links are essential to building an interesting Web site.
Links:
• A link that points to a different resource specifies the address of that resource. Such an address
might be a file name, a directory path and a file name, or a complete URL.
• Links are specified in an attribute of an anchor element, a, which is an inline element. The
anchor element that specifies a link is called the source of that link.
• The document whose address is specified in a link is called the target of that link for creating
links, only one attribute is required: href (an acronym for hypertext reference). The value
assigned to href specifies the target of the link.
<a href = “eenadu.net"> Information on the Cessna 210 </a>
Targets within Documents:
• If the target of a link is not at the beginning of a document, it must be some element within
the document, in which case there must be some means of specifying that target element.
• If the target element has an id attribute, that value can be used to specify the target. Consider
the following example:
<h2 id = "avionics"> Avionics </h2>
• If the target is in the same document as the link, the target is specified in the href attribute value by
preceding the id value with a pound sign (#), as in the following example:
<a href = "#avionics"> What about avionics? </a>
• When the target is an element in another document, the value of that element’s id is specified at the
end of the URL, separated by a pound sign (#), as in the following example:
<a href = "aidan1.html#avionics"> Avionics </a>
• One common use of links to parts of the same document is to provide a table of contents in which
each entry has a link.
• This technique provides a convenient way for the user to get to the various parts of the document
simply and quickly.
• Such a table of contents is implemented as a stylized list of links by using the list specification
capabilities of HTML.
Lists:
• We frequently make and use lists in daily life—for example, to-do lists and grocery lists.
• HTML provides simple and effective ways to specify lists in documents.
• Unordered lists and Ordered lists
Unordered Lists:
• The <ul> tag, which is a block tag, creates an unordered list. Each item in a list is specified with an <li> tag (li is an
acronym for list item).
• Any tags can appear in a list item, including nested lists. When displayed, each list item is implicitly preceded by a
bullet.
</html>
<head>
<title> Unordered list </title>
</head>
<body>
<h3> Some Common Single-Engine Aircraft </h3>
<ul>
<li> Cessna Skyhawk </li>
<li> Beechcraft Bonanza </li>
<li> Piper Cherokee </li>
</ul>
</body>
Ordered Lists:
• Ordered lists are lists in which the order of items is important. This orderedness of a list is shown in the display of the
list by the implicit attachment of a sequential value to the beginning of each item.
• The default sequential values are Arabic numerals, beginning with 1.
• An ordered list is created within the block tag <ol>. The items are specified and displayed just as are those in unordered
lists, except that the items in an ordered list are preceded by sequential values instead of bullets.
<html>
<head>
<title> Ordered list </title>
<meta charset = "utf-8" />
</head>
<body>
<h3> Cessna 210 Engine Starting Instructions </h3>
<ol>
<li> Set mixture to rich </li>
<li> Set propeller to high RPM </li>
<li> Set ignition switch to "BOTH" </li>
<li> Set auxiliary fuel pump switch to "LOW PRIME" </li>
<li> When fuel pressure reaches 2 to 2.5 PSI, push
starter button </li>
</ol>
</body>
• Lists can be nested. However, a list cannot be directly nested; that is, an <ol> tag cannot
immediately follow an <ol> tag. Rather, the nested list must be the content of an <li> element.
Definition Lists:
• Definition lists are used to specify lists of terms and their definitions, as in glossaries.
• A description list is a list of terms, with a description of each term.
• The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes
each term

<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd> black hot drink</dd>
<ul> Defines an unordered list
<dt>Milk</dt> <ol> Defines an ordered list
<dd> white cold drink</dd> <li> Defines a list item
</dl> <dl> Defines a description list
<dt> Defines a term in a description list
</body>
<dd> Describes the term in a description list
Tables:
• Tables provide a highly effective way of presenting many kinds of information.
• A table is a matrix of cells. The cells in the top row often contain column labels, those in the
leftmost column often contain row labels, and most of the rest of the cells contain the data of
the table.
• The content of a cell can be almost any document element, including text, a heading, a
horizontal rule, an image, or a nested table.
Basic Table Tags:
• Each table cell is defined by a <td> and a </td> tag. td stands for table data.
• Everything between <td> and </td> are the content of the table cell.
• Each table row starts with a <tr> and ends with a </tr> tag. tr stands for table row.
• Table Headers: Table header cells. In those cases use the <th> tag instead of the <td> tag. th
stands for table header.
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
• In many cases, tables have multiple levels of row or column labels in which one label covers two
or more secondary labels.

• To make a cell span over multiple columns, use the colspan attribute
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
• To make a cell span over multiple rows, use the rowspan attribute
<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
HTML <thead> Tag:
• The <thead> tag is used to group header content in an HTML table.
• The <thead> element is used in conjunction with the <tbody> and <tfoot> elements to
specify each part of a table (header, body, footer).
• Browsers can use these elements to enable scrolling of the table body independently
of the header and footer.
• Also, when printing a large table that spans multiple pages, these elements can
enable the table header and footer to be printed at the top and bottom of each page.
• The <thead> element must have one or more <tr> tags inside.
• The <thead> tag must be used in the following context: As a child of a <table>
element, after any <caption> and <colgroup> elements, and before any <tbody>,
<tfoot>, and <tr> elements.
• The <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by
default. However, you can use CSS to style these elements.
Forms:
• The most common way for a user to communicate information from a Web browser to the
server is through a form.
• HTML provides tags to generate the commonly used objects on a screen form. These objects
are called controls or widgets or components
• There are controls for single-line and multiple-line text collection, checkboxes, radio buttons,
and menus, among others. All control tags are inline tags. Most controls are used to gather
information from the user in the form of either text or button selections. Each control can have
a value, usually given through user input.
• Together, the values of all of the controls (that have values) in a form are called the form data.
• Every form whose data is to be processed on the server requires a Submit button. When the
user clicks the Submit button, the form data is encoded and sent to the Web server
The Form Element:
• The HTML <form> element is used to create an HTML form for user input.
• The <form> element is a container for different types of input elements, such as: text
fields, checkboxes, radio buttons, submit buttons, etc.

<form>
.
form elements
.
</form>
• Many of the commonly used controls are specified with the inline tag <input>, including those
for text, passwords, checkboxes, radio buttons, and the action buttons reset, submit, image, and
button.
• The type attribute, which specifies the particular kind of control, is required in the input tag
• All of the previously listed controls except reset and submit also require a name attribute
• The values of the name attributes are included in the form data that is sent to the server.
• They are used by the server form processing software to find the specific component values in
the form data.
• The controls for checkboxes and radio buttons require a value attribute, which initializes the
value of the control.
• The values of these controls are placed in the form data that is sent to the server when the
Submit button is clicked
GET and POST:
• The Hypertext Transfer Protocol (HTTP) is designed to enable communications between
clients and servers.
• A protocol is a system of rules that define how data is exchanged within or between computers.
Communications between devices require that the devices agree on the format of the data that
is being exchanged. The set of rules that defines a format is called a protocol.
• HTTP is a protocol for fetching resources such as HTML documents. It is the foundation of
any data exchange on the Web and it is a client-server protocol, which means requests are
initiated by the recipient, usually the Web browser.
• A complete document is reconstructed from the different sub-documents fetched, for instance,
text, layout description, images, videos, scripts, and more.
• Clients and servers communicate by exchanging individual messages (as opposed to a stream
of data). The messages sent by the client, usually a Web browser, are called requests and the
messages sent by the server as an answer are called responses.
• Components of HTTP-based systems:
• HTTP is a client-server protocol: requests are sent by one entity, the user-agent (or a proxy on
behalf of it). Most of the time the user-agent is a Web browser, but it can be anything, for
example, a robot that crawls the Web to populate and maintain a search engine index.
• Each individual request is sent to a server, which handles it and provides an answer called the
response.
The GET Method:
• GET is used to request data from a specified resource.
• Note that the query string (name/value pairs) is sent in the URL of a GET request:
• /test/demo_form.php?name1=value1&name2=value2
• GET requests can be cached
• GET requests remain in the browser history
• GET requests can be bookmarked
• GET requests should never be used when dealing with sensitive data
• GET requests have length restrictions
• GET requests are only used to request data (not modify)
The POST Method:
• POST is used to send data to a server to create/update a resource.
• The data sent to the server with POST is stored in the request body of the HTTP request:
POST /test/demo_form.php HTTP/1.1
Host: w3schools.com

name1=value1&name2=value2

Some notes on POST requests:

POST requests are never cached


POST requests do not remain in the browser history
POST requests cannot be bookmarked
POST requests have no restrictions on data length

You might also like