1
CSE326:
INTERNET PROGRAMMING
LABORATORY
2
Exam Category: X6
3
COURSE OUTCOMES
• CO1 :: Recognize the components, tools, sturucture and tags
of HTML, CSS and Javascript.
• CO2 :: Paraphrase the effect of various HTML, CSS tags,
properties and combination of them for web page design.
• CO3 :: Apply HTML, CSS and Javascript technologies
according to user requirements and observe the output of the
web page design
4
COURSE OUTCOMES
• CO4 :: Analyze output of web page after application of
different components of HTML, CSS and Javascript as per
required in the website development.
• CO5 :: Assess the effectiveness of selected components of
HTML, CSS and javascript with desired properties and values
for the concerned web based product.
• CO6 :: Construct a project with desired and verified selection
of advance components and features of HTML,CSS and
Javascript.
5
Unit I
• Exposure To HTML : HTML document structure,
Working with HTML basic elements like title, head,
body, Working with Root and Metadata, Script and
NonScript, Horizontal Rules and line breaks and
paragraph, working with citation, quotation, definitions
and comments, Types of Tags in HTML
6
Unit II
• Working with Text, Links, Images , URLS,
Multimedia and Interactive in HTML : Formatting
text with HTML physical style elements, Formatting
text with HTML logical style elements, Creating links
with anchor tag, Multimedia- audio,video tags and
attributes like controls, autoplay and loop, Working
with images in a web page
7
Unit III
• Cascading Style Sheets : CSS selectors like type, id,
class, Introduction To CSS and types of CSS, CSS
properties-text controlling and text formatting, CSS
Box Model- Padding, Margin, Border, Div and Span
Tag in CSS, Working with background Images
8
Unit IV
• Working with Tables : Working With Tables-Colspan and
Rowspan, applying css on tables, creating hoverable tables
• Working with Forms : Working with Forms- action
attribute, get and post methods, Form Elements and
Controls Like Text Inputs, TextArea, Buttons, CheckBoxes,
Dropdown Boxes, Radio Buttons, Select and File Select,
applying css on all controls of forms
• CSS Grids and Webpage Layouts : Grid introduction,
Grid container, Grid Item, Creating different layouts for
webpage
9
Unit V
• JavaScript Application Development : Incorporating
JavaScript in the HEAD and BODY element, Using an
External JavaScript file, Using variables and operators,
Using control statements such as if...else, switch, break and
continue, Using looping statements such as while,
do...while, for, Using Popup boxes such as Alert, Confirm,
and Prompt, Working with JavaScript Objects,Properties and
Methods
• JavaScript Functions, Events and Validation : Working
with Functions-Using function arguments and return
statement, Working with JavaScript Events like Form Based,
Keyboard Based and Mouse Based, JavaScript Form
Validation 10
Unit VI
• Javascript DOM : DOM introduction, DOM methods,
DOM document, DOM elements, DOM HTML, DOM
CSS, DOM Events
11
Text Books
• HTML 5 COVERS CSS3, JAVASCRIPT,
XML, XHTML, AJAX
– Author: KOGENT LEARNING
– Publisher Name: DREAMTECH PRESS
12
References
• WEB ENABLED COMMERCIAL APPLICATION
DEVELOPMENT USING HTML, DHTML,
JAVASCRIPT, DHTML AND PHP
– Author: IVAN BAYROSS
– Publisher Name: BPB PUBLICATIONS
13
References
• BEGINNING HTML, XHTML, CSS AND
JAVASCRIPT
– Author: JON DUCKETT
– Publisher Name: WILEY
14
Introduction to
HTML
15
Definitions
W W W – World Wide Web.
HTML – HyperText Markup Language – The
Language of Web Pages on the World Wide Web.
HTML is a text formatting language.
URL – Uniform Resource Locator.
Browser – A software program which is used to
show web pages. 16
Definitions
“Normal text” surrounded by bracketed
tags that tell browsers how to display web
pages
Pages end with “.htm” or “.html”
HTML Editor – A word processor that has
been specialized to make the writing of
HTML documents more effortless.
17
Tags
Codes enclosed in brackets
Usually paired
<TITLE>My Web Page</TITLE>
Not case sensitive
<TITLE> = <title> = <TITLE>
18
Choosing Text Editor
There are many different programs that
you can use to create web documents.
HTML Editors enable users to create
documents quickly and easily by pushing a
few buttons. Instead of entering all of the
HTML codes by hand.
These programs will generate the HTML
Source Code for you. 19
Choosing Text Editor
HTML Editors are excellent tools for
experienced web developers; however; it
is important that you learn and understand
the HTML language so that you can edit
code and fix “bugs” in your pages.
20
NotePad/ NotePad++
NotePad is the standard text editor that
comes with the microsoft windows
operating system.
Click on the “Start” button located on
your Windows task bar.
Click on “Programs” and then click on the
directory menu labeled “Accessories”.
Locate the shortcut “NotePad” and click
the shortcut once. 21
Visual Studio Code
22
Visual Studio Code
23
Creating a Basic Starting
Document
<HTML>
<HEAD>
<TITLE>University</TITLE>
</HEAD>
<BODY>
This is what is displayed.
</BODY>
</HTML>
24
Creating a Basic Starting
Document
The HEAD of your document point to above window
part.
The TITLE of your document appears in the very top
line of the user’s browser.
The text in your TITLE should be as descriptive as
possible because this is what many search engines,
on the internet, use for indexing your site.
25
Setting Document Properties
Document properties are controlled by
attributes of the BODY element.
For example, there are color settings for
the background color of the page, the
document’s text and different states of
links.
26
Why CSS?
27
CSS Definitions
❖Cascading Style Sheets (CSS) are a stylesheet language used to describe the
presentation of a document written in HTML or XML (including XML dialects like
SVG or XHTML).
❖CSS describes how elements should be displayed on screen, on paper, in
speech, or on other media. CSS is the only document styling language that
browsers understand.
❖CSS has a standardized W3C specification.
❖CSS1 is now obsolete,
❖CSS2.1 is a recommendation,
❖CSS3 is split into smaller modules, progressing on the standardization track.
28
29
