DAMBI DOLLO UNIVERSITY
COLLEGE OF ENGINEERING AND TECHNOLOGY
DEPARTMENT OF COMPUTER SCIENCE
WEEK-END PROGRAM (THRID YEAR SECOND TERM)
Web Programming Individual Assignment
Name : Sabona Abera
ID No : NSW/315/19
SUBMISSION DATE 26Th -March-2023GC.
SUBMITTED TO : MR. MENDASA. T
Chaptert 1
HTML Tags
1. Basic HTML Tags
1.1 Hypertext Markup Language
HTML, which stands for Hypertext Markup Language, is the predominant markup language used
for creating web pages.
1.2 HTML, HEAD, TITILE and BODY Tags
The <html> tag is called the root element because it contains all the elements in the document,
and it can not be contained within any other element.
- Every web page starts with <html> tag and ends with </html>.
<HEAD> </HEAD>
- The web page should have only one head tag. The head tag starts with <head> and ends with
</head>.
The <BODY> Element
This is where we will place our content for our visitors.
The <title> Element
You should specify a title for every page that you write inside the <title> element.
This element is a child of the <head> element.
HTML Tag Attributes
Attributes provide additional information about HTML tags.
o <html> attribute
Setting HTML Language
The HTML lang attribute can be used to declare the language of a Web page or a portion of a
Web page.
This is meant to assist search engines and browsers.
o <body> Attributes
Background Color
You can change background color of your web page by using <BODY> tag attribute bgcolor
<body bgcolor=“green”>
o Background Image
We can use a background picture for web page instead of background color.
Text Color
We can also set the text color of the web page just like background color. We use text attribute of
<BODY> to do this.
<body bgcolor=“yellow” text="red">
1.3 Creating Links
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new
document or a new section within the current document.
1.4 Working with Colors
It can be used to change the background of your webpage, the color of your text or the content
of a table.
1.5 HTML Text Formatting Tags
HTML Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading and <h6> the
smallest heading.
1.6 Working with Graphics and Images
It is often said that an single image is worth than thousands of words.
2. Tables and Lists
2.1 Creating Tables
Tables are defined with the <table> tag.
2.2 Using Ordered and Unordered List
An unordered list starts with the <ul> tag.
An ordered list starts with the <ol> tag.
3. Frames
3.1 Working with Frames
Frames can divide the screen into separate windows.
3.2 Working with iframes (internal frames)
The <iframe> tag defines an inline frame that contains another document.
4. HTML Forms
HTML forms are used to pass data to a server.
Password
A password field works just like a text entry field, except the characters are obscured from view
using asterisk (*) or bullet (•) characters, or another character determined by the browser.
Text Area
1.9 Using Radio Buttons, Checkboxes and Selection Lists
1.10 Linking HTML Forms with PHP Scripts
1.11 Automating Processing: Info Forms and Emails
1.12 Inserting Multimedia
Unit 2
Cascading Style Sheet(css)
A cascading style sheet file allows you to separate your web sites HTML content from its style.
The ID Selectors
You can define style rules based on the id attribute of the elements.
Multiple Style Rules
You may need to define multiple style rules for a single element.
You can define these rules to combine multiple properties and corresponding values into a
single block.
Grouping Selectors
You can apply a style to many selectors if you like.
Just separate the selectors with a comma(,)
1.3 Linking CSS to HTML
Embedded CSS(internal) - The <style> Element
Inline CSS - The style Attribute
External CSS - The <link> Element
Imported CSS - @import Rule
Embedded CSS(internal) - The <style> Element
This tag is placed inside the <head>...</head> tags.
Rules defined using this syntax will be applied to all the elements available in the document.
Inline CSS - The style Attribute
You can use style attribute of any HTML element to define style rules.
External CSS - The <link> Element
The <link> element can be used to include an external stylesheet file in your HTML document.
An external style sheet is a separate text file with .css extension.
Imported CSS - @import Rule
@import is used to import an external stylesheet in a manner
similar to the <link> element.
2. CSS Styling
2.1 Styling Backgrounds
You can style the background of an element in one declaration with the background property.
2.2 Styling Text
• Color
• Letter Spacing
• Word Spacing
• Line height
• Text Align
• Text Decoration
• Text Transform
2.3 Styling Fonts
The font property can set the style, weight, variant, size, line height and font:
2.4 Styling Links
List Style
You can control the appearance of ordered and unordered lists in one declaration with the list-
style property:
list-style: image position type;
• List Style Image
• List Style Position
• List Style Type
3. CSS Box Model
3.1 The Box Model
The CSS box model is essentially a box that wraps around HTML elements, and it consists of:
margins, borders, padding, and the actual content.
• Margin - Clears an area around the border.
• Border - A border that lies around the padding and content
• Padding - Clears an area around the content.
• Content - The content of the box, where text and images appear
3.2 CSS Border
Border
You can set the color, style and width of the borders around an element in one declaration by
using the border property.
3.4 CSS Padding
The padding clears an area around the content (inside the border) of an element.
3.5 Styling Tables
• Table Borders : To specify table borders in CSS, use the shorthand border property.
border: border-width border-style border-color;
4. Classes and Visibility
4.1 CSS Class and ID
4.1 CSS Class
let’s say you want to change the word "sentence" in the paragraph formatted by the above CSS
to green bold text, while leaving the rest of the sentence untouched.
4.2 CSS ID
IDs are similar to classes, except once a specific ID has been declared it cannot be used again
within the same HTML file.
4.2 CSS Display and Visibility
The display property specifies if/how an element is displayed
Chapter 3
JavaScript programming
•
1.1 Introduction
JavaScript is a cross-platform, object-oriented scripting language modeled after C++.
1.2 Running the JavaScript
Any time you include JavaScript in an HTML document, you must enclose the code inside a
<SCRIPT>...</SCRIPT> tag pair.
Adding JavaScript
There are three ways to add JavaScript commands to your HTML pages.
• Embedding code
• Inline code
• External file
External File
If you want to run the same JavaScript on several pages, without having to write the same script
on every page, you can write a JavaScript in an external file.
• 1.3 Working with Variables and Data
Declaring Variables
To declare variable, we use the var keyword, followed by the name we want to give to the
variable.
• 1.4 Operators and Expressions
Arithmetic Operators
Assignment Operators
Comparison Operators
Logical Operators
Bitwise Operators
• 1.5 Working with Conditional Statements
Broadly, there are two ways to execute code conditionally in JavaScript:
· If statement
· switch statement
2.2 Using Arrays
An array is an ordered collection of data.
• 2.3 JavaScript Functions
Functions are one of the fundamental building blocks in JavaScript
• 3. JavaScript Objects and Events
3.1 Managing Events
Events are occurrences generated by the browser, such as loading a document, or by the user,
such as moving the mouse.
• Registering Events
In JavaScript, events can be registered to HTML elements in three different ways:
· registering using the HTML element attribute
· registering using property assignment
· registering using registerEventListener() method
• 3.2 Working with JavaScript Objects
JavaScript has many built-in objects that you can use to perform different activities.
4 Object Properties and Methods
All objects have properties and methods that are associated with them.
• 4.1 Date Object
Most of your date and time work is done with the Date object.
4.1.1 String Object
A string is any text inside a quote pair
var myString = “Hello there.”;
var stringVar = new String(“characters”)
• 4.1.2 Form Object
The form object in JavaScript represents the HTML form in the page.
• 4.2 Form Processing and Validation
4.2.1 Accessing Form and Form Elements
It is possible to access form and form elements from JavaScript.
You can set attributes for NAME,TARGET, ACTION, METHOD, and ENCTYPE for form.
• Selection Lists
List boxes let you pick the item you want out of a multiple-choice box.
Use the selectedIndex property to test which option item is selected in the list.
