Scribd
Upload
4 views

HTML

Uploaded by

csfrockz
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
4 views

HTML

Uploaded by

csfrockz
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 98

• Markup languages- HTML and XML

• Style sheet languages- CSS & Extensible Stylesheet Language Family (XSL)

• Client-side scripting- JavaScript,C# Script & VBScript

• Server-side scripting- JSP,PHP and ASP

• Multimedia technologies- Flash and Silverlight


PHP: Hypertext Preprocessor
 Server-side scripting language, like ASP

 Supports many databases like (MySQL, Informix, Oracle,


Sybase, Solid, PostgreSQL, Generic ODBC, etc.)
 Open Source software
 File extensions are ‘.php’, ‘.php3’ or ‘.phtml’
 PHP runs on different platforms (Windows, Linux, Unix,
etc.)
 PHP is compatible with almost all servers used today
(Apache, IIS, etc.)
 PHP is FREE to download from the official PHP resource:
www.php.net
 PHP is easy to learn and runs efficiently on the server side
A PHP scripting block always starts with <?php and ends with ?>.

A PHP scripting block can be placed anywhere in the document.

 PHPautomatically converts the variable to the correct data type,


depending on its value

 Justlike ASP it uses Variables, Strings, Operators, IF.. Else, Switch,


For Loops, Functions, Forms, Arrays
 Designed to transport data and not display data

 Tags are not predefined. User can define Tags.Self


descriptive

 Used to create new languages like XHTML, WSDL, WAP

 Simplifies data sharing and data transport

 XML documents form a Tree structure


1. JavaScript used in client-side but node.js
puts the JavaScript on server-side thus
making communication between client and
server will happen in same language

3. Node.JS programs are executed by V8


Javascript engine the same used by Google
chrome browser.

4. Runs on Google's V8 JavaScript Engine


1. It's fast
2. It can handle tons of concurrent requests
3. It's written in JavaScript (which means you can
use the same code server side and client side)

Platform Number of request per


second
PHP ( via Apache) 3187,27
Static ( via Apache ) 2966,51
Node.js 5569,30
 Hyper Text Markup Language
◦Web authoring software language

◦Specifically created to make World


Wide Web pages

◦Created by Tim Berners-Lee in 1993


from SGML
 HTML files
◦Text files

◦Contain mark-up tags

◦Tags direct how page is to be


displayed by browser

◦Can be created from a simple text


editor

◦File extension “.htm” or “.html”


 Notepad or Wordpad (PC) or SimpleText
(Mac)
 First tag: <html>
◦ Indicates that you are starting an HTML document

 Last tag: </html>


◦ Indicates that you are ending an HTML document
◦ *Note* the open & close structure to HTML
◦ Fictional example: <HTML> and </HTML>
 Save file as “index.html”
◦ This is a typical default title for home pages
◦ Windows may seem to prefer “.htm” but “.html”
will also work just fine.
<html>

</html>
 Header information
◦ <head> to begin, and </head> to end
◦ Gives information about the page that is not
displayed on the page itself

 Page Title
◦ <title> to begin, and </title> to end
◦ Example: <title>Transcriptions
Studio</title>
<html>
<head>
<title>Transcriptions Studio</title>
</head>

</html>
 Body Tags
◦ <body> and </body>
◦ *Note* that all text that appears on the page must
be encapsulated within the body tags

 Text headings
◦ <h1> and </h1>
◦ There are six defined heading sizes
◦ <h1> (largest) through <h6> (smallest)

 Paragraphs
◦ <p> and </p>
Headings
 There are 6 heading commands.

<H1>This is Heading 1</H1>


<H2>This is Heading 2</H2>

<H3>This is Heading 3</H3>

<H4>This is Heading 4</H4>

<H5>This is Heading 5</H5>

<H6>This is Heading 6</H6>


HTML Tags

 For example: <b>, <font>,<title>, <p>


etc.
 Tag usually goes with pair: an open tag
(<b>) and an end tag (<\b>)
Effect Code Code Used What It Does
Bold B <B>Bold</B> Bold
Italic I <I>Italic</I> Italic

 Single tag: <hr>,<br>


 Tags are NOT case sensitive
Text
 Put text on a webpage
◦ <p>Today is my first day at my new job, I’m so
excited!</p>
◦ Output: Today is my first day at my new job, I’m
so excited!

 Put text in center of a page


◦ <center>Hello</center>
◦ Output: Hello

 Put text on the right of a page


◦ <p align=“right”>Hello</p>
◦ Output: Hello
<html>
<head>
<title>Transcriptions Studio</title>
</head>
<body>

<h1>This is a big heading!</h1>


<h2>This is a smaller heading</h2>
<p>This is an example of a paragraph.</p>

</body>
</html>
<HTML>
<TITLE>Centre for Development of Advanced Computing </TITLE>
<BODY BGCOLOR=“#E7CCCC”>
...
...
<A
HREF=“mailto:[email protected]”>
webmaster</A>
</BODY>
</HTML>
This is a big heading!
This is a smaller heading!

This is an example of a paragraph.


 To change text size
◦ <font size=“+3”>Hello</font>
◦ Output: Hello Tag attribute

 To change text color


◦ <font color=“red”>Hello</font>
◦ Output: Hello

 Using both
◦ <font size=“+3” color=“red”>Hello</font>
◦ Output: Hello
List

 Unordered list  Ordered list

◦ Code: ◦ Code:
<ul> <ol>
<li>Coffee</
li> <li>Milk</li> <li>Coffee</li>
</ul> <li>Milk</li>
</ol>
◦ Output:
 Coffee ◦ Output:
 Milk 1. Coffee
2. Milk
Table

<table border=“1">
<tr>
<th>Heading</th>
<th>Another
Heading</th>
</tr> Heading Another Heading
<tr> Row 1, cell 1 Row 1, cell 2
<td>row 1, cell 1</td>
Row 2, cell 1
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>
<html>
<body background=“c:\cloud.gif”> Table
<table border=“1">
<tr align=center>
<th
rowspan=2>Name</th>
<th colspan=2>Marks</th>
</tr>
<tr align=center>
<th>C Language</th>
<th>English</th> Name Marks
</tr>
<tr align=center> C Language English
<td>amit</td>
amit 90 95
<td>90</td>
<td>95</td> sumit 95 96
</tr>
<tr align=center>
<td>sumit</td>
<td>95</td>
<td>96</td>
</tr>
</table>
Create Links
 A Hypertext link
◦ <a href=“http://www.birlainstitute.co.in”>BIAS Institute</a>
◦ Output: BIAS Institute

 A Email link
◦ <a href=mailto:[email protected]>Email me</a>
◦ Output: Email me
Image Formats
 .gif
◦ Graphics Interchange Format

 .jpeg or .jpg
◦ Joint Photographic Experts Group

 .bmp
◦ bitmap
Inserting Image
 Place all images in the same directory/folder
where you web pages are

 <img src> is a single tag

 <img src=“image.gif”>

 Turn an image into a hyerlink


<a href=“http://www.iusb.edu”><img
src=“image.gif”></a>
Image Size
 Computer images are made up of “pixels”

 <IMG HEIGHT=“100" WIDTH=“150" SRC="image.gif">

Height

Width
Forms
 A form is an area that can contain form
elements.

 <form></form>

 Commonly used form elements includes:


◦ Text fields
◦ Radio buttons
◦ Checkboxes
◦ Submit buttons
Text Input Fields
 Used when you want the user to type letters, number,
etc.

<form>
First name: <input type="text"
name="firstname">
<br>
Last name: <input type="text"
name="lastname"> </form>
 Output

First name:
Last name:
Checkboxes
 Used when you want the user to select one or more
options of a limited number of choices.

<form>
<input type="checkbox" name="bike“ value=“bike”>
I have a bike
<br>
<input type="checkbox" name="car“ value=“car”>
I have a car
</form>
 Output

In a checkbox group, a user can I have a bike


select more than one option. I have a car
Radio Buttons
 Used when you want the user to select one of a limited
number of choices.

<form>
<input type="radio" name="sex" value="male">
Male
<br>
<input type="radio" name="sex" value="female">
Female
</form>
Radio buttons, however,
operate as a group and provide  Output
mutually exclusive selection
values. A user can select only Male
one option in a radio button Female
group.
Text Box
Used when you want to get input from user.
<form>
<p>Please provide your suggestion in the text box
below:</p>
<textarea row=“10” cols=“30”>
</textarea>
</form> Output
Please provide your
suggestion in the text box
below:
Pull-down Menu
 Used when you want user to respond with one
specific answer with choices you given.
<p>Select a fruit:</p>
<select name="Fruit">
<option selected> Apples
<option> Bananas
<option > Oranges
</select> Output

Select a fruit:
Submission Button
 When user clicks on the “Submit” button, the content of
the form is sent to another file.

<form name="input" action="html_form_action.asp" >


Username: <input type="text"
name="user">
<br>
<input type="submit" value="Submit">
</form>
 Output

Username:
 Comments
◦ Comments are notes in your HTML file

◦ Comments make no functional difference to


your web browser

◦ “<!--” begins a comment, and “ -->” ends it


<html>
<head>
<title>Transcriptions Studio</title>
</head>
<body>

<h1>This is a big header!</h1>


<h2>This is a smaller heading</h2>
<p>This is an example of a paragraph.</p>

</body>
</html>

<!-- This is an example of a comment.-->


Commonly Used Character
Entities
Result Description Entity Name
Non-breaking space &nbsp;
< Less than &lt;
> Greater than &gt;
& Ampersand &amp;
“ Quotation mark &quot;
© Copyright &copy;
 This frameset was created by the following code:

 <frameset cols="35%,65%"> </frameset>


 This frameset was created by the following code:
 <frameset rows=“60%,*"> </frameset>
 Placed between the <frameset> </frameset> tags

 The src attribute specifies the file that will appear


in the frame

 In the following example, the page that will appear


in the top frame is the file fl-toc.html, and the
page that will appear in the lower frame is fl-
second.html.
<frameset rows="80%,*">
<frame src="fl-toc.html"/>
<frame src="fl-second.html"/>
</frameset>
<frameset rows=“20%,*">
<frameset Cols=“*,*">
<frame src="fl-toc.html"/>
<frame src="fl-second.html"/>
</frameset>
<frameset Cols=“60%,*">
<frame src="f2-toc.html"/>
<frame src="f2-second.html"/>
</frameset>
</frameset>
 To create borderless frames, add the
frameborder attribute to the <frame> tag

◦ frameborder= "1" causes borders to display (the


default)
◦ frameborder= "0" hides borders

 Example:
<frame src="home.html" name="main" frameborder="0"/>
 Scrolling frames
◦ The scrolling attribute to the <frame> tag controls
whether the scrollbar appears

◦ The scrolling attribute values:


 "yes" — enables scrolling (the default)
 "no" — disables scrolling
 "auto" — allows the browser to decide

 Example:
<frame src= "ex.html" name= "ex" frameborder="0" scrolling="no"/>
<A NAME=“Location_Name”>

<A HREF=“xyz.htm #Location_Name”>Visit to my


page<A>
 The previous version, HTML 4, was standardized
in 1997
 On 28 October 2014, HTML5 was released

 this is the final and complete fifth revision of the


HTML standard of the World Wide Web
Consortium (W3C)

The World Wide Web Consortium (W3C) is an international community where Member
organizations, a full-time staff, and the public work together to develop Web standards.
 Placeholder text
 Specific text input: email, URL, number,

search
 Slider
 Date picker
 User Agent validation
<!DOCTYPE HTML>
<html>
<body>

<video src="movie.ogg" width="320"


height="240”>
Your browser does not support the video tag.
</video>

</body>
</html>
<!DOCTYPE HTML>
<html>
<body>

<audio src="song.ogg" controls="controls">


Your browser does not support the audio element.
</audio>

</body>
</html> If this attribute is present, the browser will offer
controls to allow the user to control audio
playback, including volume, seeking, and
pause/resume playback.
The email type is used for input fields that should
contain an e-mail address.

The value of the email field is automatically validated


when the form is submitted.

E-mail: <input type="email" name="user_email" />

Tip: Safari on the iPhone recognizes the email input


type, and changes the on-screen keyboard to match
it (adds @ and .com options).
 Sundar Pichai
A beautiful speech by Sundar Pichai - an IIT-MIT Alumnus and Global Head Google Chrome and now
CEO of Google..
The cockroach theory for self development
At a restaurant, a cockroach suddenly flew from somewhere and sat on a lady.
She started screaming out of fear. With a panic stricken face and trembling voice, she started
jumping, with both her hands desperately trying to get rid of the cockroach. Her reaction was
contagious, as everyone in her group also got panicky. The lady finally managed to push the
cockroach away but ...it landed on another lady in the group. Now, it was the turn of the other lady
in the group to continue the drama.
The waiter rushed forward to their rescue. In the relay of throwing, the cockroach next fell upon the
waiter. The waiter stood firm, composed himself and observed the behavior of the cockroach on his
shirt. When he was confident enough, he grabbed it with his fingers and threw it out of the
restaurant. Sipping my coffee and watching the amusement, the antenna of my mind picked up a
few thoughts and started wondering, was the cockroach responsible for their histrionic behavior?

If so, then why was the waiter not disturbed? He handled it near to perfection, without any chaos.

It is not the cockroach, but the inability of those people to handle the disturbance caused by the
cockroach, that disturbed the ladies. I realized that, it is not the shouting of my father or my boss or
my wife that disturbs me, but it's my inability to handle the disturbances caused by their shouting
that disturbs me.
It's not the traffic jams on the road that disturbs me, but my inability to handle the disturbance caused
by the traffic jam that disturbs me.
More than the problem, it's my reaction to the problem that creates chaos in my life.
Lessons learnt from the story:
I understood, I should not react in life.I should always respond. The women reacted, whereas the waiter
responded. Reactions are always instinctive whereas responses are always well thought of. A
beautiful way to understand............LIFE. Person who is HAPPY is not because Everything is RIGHT in
his Life..
He is HAPPY because his Attitude towards Everything in his Life is Right..!!,,,,,,,
A website is a collection of publicly accessible,
interlinked Web pages that share a single domain
name. Websites can be created and maintained by
an individual, group, business or organization to
serve a variety of purposes.

Web Page:
A document which can be displayed in a
web browser such as Firefox, Google
Chrome, Opera, Microsoft Internet Explorer
or Edge, or Apple's Safari. These are also
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:
 Google Chrome

 Internet Explorer

 Firefox

 Safari

 Edge
A static website contains Web pages with
fixed content. Each page is coded in HTML
and displays the same information to every
visitor.
Dynamic website contain web pages that are
generated in real-time.
HTML is an acronym which stands for Hyper Text Markup

Language which is used for creating web pages and web

applications.

Hyper Text: Hyper Text simply means “Text within Text”. A text

has a link within it, is a hypertext. Whenever you click on a link

brings you to a new webpage, you have clicked on a hypertext.

Markup language: A markup language is a computer language

that is used to apply layout and formatting conventions to a text

document.
Developed by Tim Berners-Lee in 1991
 Web Page Layout Language
 Hyperlink Specification Language
 Markup Language
 We can create a static website by HTML only
 Word Processing Tool
 Programming Language
Sublime
Notepad
Text
 Open Notepad
 Type the required codes
 Save the file with .html or .htm extension
 Open the browser window
 Go to File
 Click Open
 Select the location where the file is placed
 Select the File
 Click Open
The HTML page will open up
There is no need to be connected to the internet
Tag Formatting i.e.
how a web page will appear?

<HTML>,<HEAD>,<TITLE> etc. are tags. Tags


are enclosed within angular brackets.
Element
It has
1.A start tag
Ele
<TITLE> men
2.An ending tag ts
</TITLE>
3.Content between the tags My First web page
Attributes Provide the
extra information about the formatting.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>Uttarakhand Open
University</h1>
<p>My first Paragraph</p>

</body>
</html>
• The <!DOCTYPE html> declaration defines that this
document is an HTML5 document
• The <html> element is the root element of an HTML
page
• The <head> element contains meta information
about the HTML page
• The <title> element specifies a title for the HTML
page (which is shown in the browser's title bar or in
the page's tab)
• The <body> element defines the document's body,
and is a container for all the visible contents, such as
headings, paragraphs, images, hyperlinks, tables,
lists, etc.
• The <h1> element defines a large heading.
• The <p> element defines a paragraph.
An HTML element is defined by a start tag, some
content, and an end tag:
<tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to


the end tag:
<h1>Uttarakhand Open University</h1>
<p>My first paragraph.</p>
HTML headings are titles or subtitles that
you want to display on a webpage.
HTML headings are defined with
the <h1> to <h6> tags.
<h1> defines the most important
heading. <h6> defines the least important
heading
A paragraph always starts on a new line, and is
usually a block of text.
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and
browsers automatically add some white space
(a margin) before and after a paragraph.
The <hr> tag defines a thematic break in an HTML
page, and is most often displayed as a horizontal
rule.
The <hr> element is used to separate content (or
define a change) in an HTML page:

The <hr> tag is an empty tag, which means that it


has no end tag.
The HTML <br> element defines a line
break.
Use <br> if you want a line break (a new
line) without starting a new paragraph:
The <br> tag is an empty tag, which means
that it has no end tag.
The HTML style attribute is used to add styles to
an element, such as color, font, size, and more.

The HTML Style Attribute


Setting the style of an HTML element, can be
done with the style attribute.
The HTML style attribute has the following
syntax:

<tagname style="property:value;">
The property is a CSS property. The value is a
CSS value.
The CSS background-color property defines the
background color for an HTML element.

<!DOCTYPE html>
<html>
<body style="background-color:red;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
The CSS font-family property defines the font to
be used for an HTML element:

<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">UOU</h1>
<p style="font-family:courier;">Uttarakhand
Open University</p>
</body>
</html>
HTML contains several elements for defining text with a special
meaning.
HTML Formatting Elements
Formatting elements were designed to display special types of
text:
•<b> - Bold text
•<i> - Italic text
•<small> - Smaller text
•<sub> - Subscript text
•<sup> - Superscript text
•<strong> - Important text
•<em> - Emphasized text
HTML links are hyperlinks.
You can click on a link and jump to another
document.
When you move the mouse over a link, the
mouse arrow will turn into a little hand.
The HTML <a> tag defines a hyperlink. It has the
following syntax:
<a href="url">link text</a>
The most important attribute of the <a> element is
the href attribute, which indicates the link's destination.
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified
URL address.
<!DOCTYPE html>
<html>
<body
<h1>HTML Links</h1>
<p><a href="https://www.w3schools.com/">Visit
W3Schools.com!</a></p>
</body>
</html>
By default, the linked page will be displayed in the
current browser window. To change this, you must specify
another target for the link.
The target attribute specifies where to open the linked
document.
The target attribute can have one of the following values:
•_self - Default. Opens the document in the same
window/tab as it was clicked
•_blank - Opens the document in a new window or tab
•_parent - Opens the document in the parent frame
•_top - Opens the document in the full body of the window
Images can improve the design and the appearance of a web page.
The HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are
linked to web pages. The <img> tag creates a holding space for
the referenced image.
The <img> tag is empty, it contains attributes only, and does not
have a closing tag.
The <img> tag has two required attributes:
•src - Specifies the path to the image
•alt - Specifies an alternate text for the image
HTML tables allow web developers to arrange data into
rows and columns.
Define an HTML Table
A table in HTML consists of table cells inside
rows and columns
Table Cells
Each table cell is defined by a <td> and a </td> tag.
Table Rows
Each table row starts with a <tr> and end with
a </tr> tag.
Table Headers
Sometimes you want your cells to be headers, in
those cases use the <th> tag instead of
the <td> tag:
HTML lists allow web developers to group a set of
related items in lists.

Unordered HTML List


An unordered list starts with the <ul> tag. Each list
item starts with the <li> tag. The list items will be
marked with bullets (small black circles) by default:

Ordered HTML List


An ordered list starts with the <ol> tag. Each list
item starts with the <li> tag. The list items will be
marked with numbers by default:
HTML Description Lists
HTML also supports description lists. 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:
An HTML iframe is used to display a web page within a
web page.
The HTML <iframe> tag specifies an inline frame.
An inline frame is used to embed another document
within the current HTML document.

Iframe - Set Height and Width


Use the height and width attributes to specify the
size of the iframe.
The height and width are specified in pixels by default:

You might also like