Lecture 0

Course Code: CSE 326
INTERNET PROGRAMMING
LABORATORY
Course parameters
• L- T- P : 0-0-2
• Marks Weightage:
– Attendance: 05
– Continuous Assessment (CA): 45
– End Term Practical : 50
# Note: MTT is not applicable for this course.

CA Component
PROJECT-WEBSITE DESIGN OFFLINE COMPULSORY

Allocation week:3 Submission week:11
Lab Evaluation OFFLINE BEST 1 OUT OF 2
Allocation week: 5 Submission week:6
CODE BASED TEST 1 OFFLINE BEST 1 OUT OF 2
Allocation week:11 Submission week:12
Books
Text Books:
•HTML 5 COVERS CSS3, JAVASCRIPT,XML,XHTML,AJAX by KOGENT
LEARNING, DREAMTECH PRESS
Reference Books:
1.WEB ENABLED COMMERCIAL APPLICATION DEVELOPMENT USING
HTML,DHTML,JAVASCRIPT, DHTML AND PHP by IVAN BAYROSS, BPB
PUBLICATIONS
2. BEGINNING HTML, XHTML, CSS AND JAVASCRIPT by JON DICKETT,
WILEY
WEBSITE ?????
Website is a collection of related web pages, including multimedia

content, typically identified with a common domain name, and published
on at least one web server.
DOMAIN NAMES
WEB SERVER
The primary function of a web server is to store, process and deliver web
pages to clients.
What we will be studying
⮚ HTML 5
⮚ CSS
⮚ Java Script
COURSE OUTCOME
• Use current techniques, skills, and methods necessary for Web Designing.
• Design and implement responsive web pages with the help of CSS and
Javascript.
• Create personal or business webpages following current industry
standards using HTML5 technologies.
• Apply web programming principles to create an interactive website.
HTML
⮚ HTML stands for Hyper Text Markup Language, which is the most widely
used language on Web to develop web pages.
⮚ HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the
first standard HTML specification which was published in 1995. HTML 4.01
was a major version of HTML and it was published in late 1999. Though
HTML 4.01 version is widely used but currently we are having HTML-5
version which is an extension to HTML 4.01, and this version was published
in 2012.
HTML
⮚ Hypertext refers to the way in which Web pages (HTML documents)
are linked together. Thus the link available on a webpage are called
Hypertext.
⮚ As its name suggests, HTML is a Markup Language which means you
use HTML to simply "mark up" a text document with tags that tell a Web
browser how to structure it to display.
HTML document structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
Tag Description
<!DOCTYPE...> This tag defines the document type and HTML version.
This tag encloses the complete HTML document and mainly comprises of
<html> document header which is represented by <head>...</head> and document
body which is represented by <body>...</body> tags.
<head> This tag represents the document's header which can keep other HTML tags like
<title>, <link> etc.
<title> The <title> tag is used inside the <head> tag to mention the document title.
This tag represents the document's body which keeps other HTML tags like
<body> <h1>, <div>, <p> etc.
<h1> This tag represents the heading.
<p> This tag represents a paragraph.
HTML element
An HTML element is defined by a starting tag. If the

element contains other content, it ends with a closing
tag, where the element name is preceded by a forward
slash. So here <p>....</p> is an HTML element,
<h1>...</h1> is another HTML element.
HTML Tag vs. Element
An HTML element is defined by a starting tag. If the

element contains other content, it ends with a closing
tag.
For example <p> is starting tag of a paragraph and </p>
is closing tag of the same paragraph but <p>This is
paragraph</p> is a paragraph element.
Nested HTML Elements
It is very much allowed to keep one HTML element inside another HTML
element:
Example
<!DOCTYPE html>
<html>
<head> <title>Nested Elements Example</title> </head>
<body> <h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>
</html>
Heading Tags
Any document starts with a heading. You can use different sizes for your
headings. HTML also has six levels of headings, which use the elements
<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading,
browser adds one line before and one line after that heading.
<!DOCTYPE html>
Example
<html>
<head>
<title> Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>
Paragraph Tag
The <p> tag offers a way to structure your text into

different paragraphs. Each paragraph of text should go in
between an opening <p> and a closing </p> tag
Example
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
Line Break Tag
Whenever you use the <br /> element, anything following it starts from
the next line. This tag is an example of an empty element, where you do
not need opening and closing tags, as there is nothing to go in between
them.
The <br /> tag has a space between the characters br and the forward
slash. If you omit this space, older browsers will have trouble rendering
the line break, while if you miss the forward slash character and just use
<br> it is not valid in XHTML
Example
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz </p>
</body>
</html>
Centering Content
You can use <center> tag to put any content in the

center of the page or any table cell.
Example
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center> <p>This text is in the center.</p> </center>
</body>
</html>
Horizontal Rules
Horizontal lines are used to visually break up sections of a

document. The <hr> tag creates a line from the current position
in the document to the right margin and breaks the line
accordingly.
Example
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
Preserve Formatting
Sometimes you want your text to follow the exact format

of how it is written in the HTML document. In those
cases, you can use the preformatted tag <pre>.
<!DOCTYPE html>
Example
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction ( strText )
{
alert (strText)
}
</pre>
</body>
</html>
Nonbreaking Spaces
Suppose you want to use the phrase "12 Angry Men."

Here you would not want a browser to split the "12,
Angry" and "Men" across two lines:
Example
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>
An example of this technique appears in the movie "12 Angry Men.“
</p>
</body>
</html>
HTML Comments
Comment is a piece of code which is ignored by any web browser. It is a

good practice to add comments into your HTML code, especially in
complex documents, to indicate sections of a document, and any other
notes to anyone looking at the code. Comments help you and others
understand your code and increases code readability.
HTML comments are placed in between  tags. So any content
placed with-in  tags will be treated as comment and will be
completely ignored by the browser.
Example
<!DOCTYPE html>
<html>
<head> 
<title>This is document title</title>
</head> 
<body>
<p>Document content goes here.....</p>
</body>
</html>
Valid vs Invalid Comments
Comments do not nest which means a comment can not

be put inside another comment. Second the double-dash
sequence "--" may not appear inside a comment except
as part of the closing --> tag. You must also make sure
that there are no spaces in the start-of-comment string.
Multiline Comments
So far we have seen single line comments, but HTML

supports multi-line comments as well.
You can comment multiple lines by the special beginning
tag  placed before the first line
and end of the last line as shown in the given example
below.
Example
<!DOCTYPE html>
<html>
<head>
<title>Multiline Comments</title>
</head>
<body>

<p>Document content goes here.....</p>
</body>
</html>
Using Comment Tag
There are few browsers that support <comment> tag to comment a part of
HTML code.
Example
<!DOCTYPE html>
<html>
<head>
<title>Using Comment Tag</title>
</head>
<body>
<p>This is <comment>not</comment> Internet Explorer.</p>
</body>
</html>
HTML Quotation
The HTML <q> element defines a short quotation.

Browsers usually insert quotation marks around the <q> element.
<p>WWF's goal is to: <q>Build a future where people live in harmony

with nature.</q></p>
HTML <abbr> for Abbreviations
The HTML <abbr> element defines an abbreviation or an acronym.

Marking abbreviations can give useful information to browsers,
translation systems and search-engines.
Example
<p>The <abbr title="World Health Organization">WHO</abbr> was
founded in 1948.</p>
HTML <cite> for Work Title
The HTML <cite> element defines the title of a work.

Browsers usually display <cite> elements in italic.
Example
<!DOCTYPE html>
<html>
<body>
<p>The HTML cite element defines the title of a work.</p>

<p>Browsers usually display cite elements in italic.</p>
<img src="img_the_scream.jpg" width="220" height="277" alt="The Scream">

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
</body>
</html>
TYPES OF TAGS IN HTML
⮚ Basic HTML
⮚ Formatting
⮚ Forms and Input
⮚ Frames
⮚ Images
⮚ Audio / Video
⮚ Links
⮚ Lists
⮚ Tables
⮚ Styles and Semantics
⮚ Meta Info
⮚ Programming
Basic HTML
Tag Description
<!DOCTYPE> Defines the document type
<html> Defines an HTML document
<title> Defines a title for the document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a thematic change in the content
 Defines a comment
Formatting
Tag Description
<abbr> Defines an abbreviation or an acronym
Defines contact information for the
<address> author/owner of a document/article
<b> Defines bold text
Isolates a part of text that might be
<bdi> formatted in a different direction from
other text outside it
<bdo> Overrides the current text direction
Tag Forms and Input
Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<button> Defines a clickable button

<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list

<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation

Frames
Tag Description
<iframe> Defines an inline frame
Images
Tag Description
<img> Defines an image
<map> Defines a client-side image-map
<area> Defines an area inside an image-map
Used to draw graphics, on the fly, via
<canvas> scripting (usually JavaScript)
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content
Audio / Video
Tag Description
<audio> Defines sound content
Defines multiple media resources for
<source> media elements (<video> and <audio>)
Defines text tracks for media elements
<track> (<video> and <audio>)
<video> Defines a video or movie
Links
Tag Description
<a> Defines a hyperlink
Defines the relationship between a
<link> document and an external resource
(most used to link to style sheets)
<nav> Defines navigation links
Tag
Lists
Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term/name in a description list
Defines a description of a term/name in a
<dd> description list
<menu> Defines a list/menu of commands
Defines a command/menu item that the
<menuitem> user can invoke from a popup menu
Tables
Tag Description
<table> Defines a table
<caption> Defines a table caption
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
Specifies column properties for each
<col> column within a <colgroup> element
Specifies a group of one or more columns
<colgroup> in a table for formatting
Styles and Semantics
Tag Description
<style> Defines style information for a document
<div> Defines a section in a document
<span> Defines a section in a document
Defines a header for a document or
<header> section
Defines a footer for a document or
<footer> section
<main> Specifies the main content of a document
<section> Defines a section in a document
<article> Defines an article
Defines content aside from the page
<aside> content
Defines additional details that the user
<details> can view or hide
<dialog> Defines a dialog box or window
Defines a visible heading for a <details>
<summary> element
Meta Info
Tag Description
<head> Defines information about the document
Defines metadata about an HTML
<meta> document
Programming
Tag Description
<script> Defines a client-side script
Defines an alternate content for users
<noscript> that do not support client-side scripts
Defines a container for an external (non-
<embed> HTML) application
<object> Defines an embedded object
<param> Defines a parameter for an object

Lecture 0

Uploaded by

Document Informationclick to expand document information

Copyright:

Available Formats

Lecture 0

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 0

Uploaded by

Copyright:

Available Formats

Course Code: CSE 326

# Note: MTT is not applicable for this course.

PROJECT-WEBSITE DESIGN OFFLINE COMPULSORY

Website is a collection of related web pages, including multimedia

<h1>My First Heading</h1>

An HTML element is defined by a starting tag. If the

An HTML element is defined by a starting tag. If the

The <p> tag offers a way to structure your text into

You can use <center> tag to put any content in the

Horizontal lines are used to visually break up sections of a

Sometimes you want your text to follow the exact format

Suppose you want to use the phrase "12 Angry Men."

Comment is a piece of code which is ignored by any web browser. It is a

Comments do not nest which means a comment can not

So far we have seen single line comments, but HTML

The HTML <q> element defines a short quotation.

<p>WWF's goal is to: <q>Build a future where people live in harmony

The HTML <abbr> element defines an abbreviation or an acronym.

The HTML <cite> element defines the title of a work.

<p>The HTML cite element defines the title of a work.</p>

<img src="img_the_scream.jpg" width="220" height="277" alt="The Scream">

<textarea> Defines a multiline input control (text area)

<button> Defines a clickable button

<optgroup> Defines a group of related options in a drop-down list

<option> Defines an option in a drop-down list

<legend> Defines a caption for a <fieldset> element

<datalist> Specifies a list of pre-defined options for input controls

<keygen> Defines a key-pair generator field (for forms)

<output> Defines the result of a calculation

You might also like