Scribd
Upload
16 views17 pages

UNIT 1 - Edited

The document provides a comprehensive overview of web design, covering the origins and evolution of HTML, CSS, and JavaScript. It details the basic syntax, text markup, images, lists, tables, forms, and frames, along with features of HTML5 and CSS3. Additionally, it explains the structure and functionality of HTML documents, including the use of various tags and attributes for web development.

Uploaded by

rekha.prabhu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views17 pages

UNIT 1 - Edited

The document provides a comprehensive overview of web design, covering the origins and evolution of HTML, CSS, and JavaScript. It details the basic syntax, text markup, images, lists, tables, forms, and frames, along with features of HTML5 and CSS3. Additionally, it explains the structure and functionality of HTML documents, including the use of various tags and attributes for web development.

Uploaded by

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

UNIT 1: WEB DESIGN

Topics : Origins and evolution of HTML, Basic syntax, Basic text markup, Images, Lists,
Tables, Forms, Frame, Overview and features of HTML5. CSS: Introduction, Levels of
style sheets, Style specification formats, Selector forms, Property value forms, Font
properties, List properties, Color, Alignment of text, The <span> and <div> tags; Overview
and features of CSS3. JavaScript: Object orientation and JavaScript; General syntactic
characteristics; Primitives, operations, and expressions; Screen output and keyboard input
WEB DESIGN
 Web design encompasses the process of creating and designing the visual
appearance and user experience of websites.
 It involves various elements such as layout, colors, typography, graphics, and
interactive features to enhance the aesthetics and functionality of a website.
ORIGINS AND EVOLUTION OF HTML

Basic Syntax of HTML


Fundamental syntactic units of HTML are called tags. Most tags appear in pairs.
Tag format:
• Opening tag: <name>
• Closing tag: </name>

Eg: <a href="default.html"> this is a link </a>


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.
 The html element includes an attribute lang. Which specifies the language in
which the document is written.
Eg : <html lang = “en”> en means english .
An html document consists of 2 parts: head and body.
 The head element provides information about the document. The head element
contains 2 simple elements,
 a title element
 meta element (It is used to provide additional information about a
document).
BASIC TEXT MARKUP
 Basic text markup refers to the use of formatting and styling techniques to enhance
the appearance and structure of text.
 Markup languages like HTML provide tags or syntax to apply formatting to text.
 Here are some commonly used basic text markup techniques:
HTML Images

The HTML <img> tag is used to embed an image in a web page.The <img> tag is empty, it
contains attributes only, and does not have a closing tag.

SYNTAX : img src="url" alt="alternatetext">

Eg <img src="img_china.jpg" alt="Flowers in China">


Attributes of HTML img tag
The src and alt are important attributes of HTML img tag. All attributes of HTML image tag are
given below.
1) src : It describes the source or path of the image. It instructs the browser where to look for the
image on the server.
2) alt : It defines an alternate text for the image, if it can't be displayed.
3) width : It is an optional attribute which is used to specify the width to display the image.
4) height : It describes how high the picture appear on the webpage
5) align : It is used to align an image within the page.
6) border: A border is line that can appear around an image. By default, images do not have
borders.
7) hspace and vspace : These attributes can be used to control the amount of white space around
an image.
Example:
<html>
<head>IMAGE DEMO </head>
<body>
<img src="anima.gif" alt="Animal image" width="128" height="128" border=”2” align=”left”
hspace=”10” vspace=”12”>
</body>
</html>
HTML Lists

HTML Lists are used to specify lists of information. All lists may contain one or more list
elements. There are three different types of HTML lists:

1. Ordered List or Numbered List (ol)


2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)
1. Ordered List or Numbered List

In the ordered HTML lists, all the list items are marked with numbers by default. The ordered
list starts with <ol> tag and the list items start with <li> tag.

<ol>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ol>

Output:

1. Aries
2. Bingo
3. Leo
4. Oracle

2. Unordered List or Bulleted List

ALL the list items are marked with bullets. The Unordered list starts with <ul> tag and list items
start with the <li> tag.

<ul>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ul>

Output:

o Aries
o Bingo
o Leo
o Oracle

3. Description List or Definition List

In definition list where entries are listed like a dictionary or encyclopedia .The definition list is
very appropriate when you want to present glossary, list of terms or other name-value list.
The HTML definition list contains following three tags:

1. <dl> tag defines the start of the list.


2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).

<dl>
<dt>Bingo</dt>
<dd>-One of my evening snacks</dd>
<dt>Oracle</dt>
<dd>-It is a multinational technology corporation.</dd>
</dl>
Output:

Bingo
-One of my evening snacks
Oracle
-It is a multinational technology corporation.

TABLES
A table is a collection of information or data arranged into related columns and rows. The point
of intersection of any given columns and rows is known as cell.
1. Basic table tags
 < table> : used to define a table.
 <tr> ; Used to add rows to the table.
 <td> ; Used to divide rows into columns. It should be always enclosed within <tr>
2. Table header <th>
 Table heading can be defined using <th> element.
 Only for the top row we put <th>
3. Table with border
To display table with borders, we need to specify the border attribute that is border = “X” ,
where X= size of the border eg : <table border=”5”>
4. Table width
It specifies the width for the entire table. <table width =”X”>, there X is the number of pixels.
5. Cell width and height
It specifies the width and the height for a single cell. <td width = “X” height=”X”>
6. Table caption
Caption tags will serve as a title or explanation. It can be displayed in either top, bottom come
on left or right of the table.
7. Spanning cells
i) Column spans(colspan)
It is created with colspan attribute in the <td> or <th> element, stretch cell to the right to span
over subsequent columns.
<td colspan = “x”>
ii) Row span (rowspan)
It is created with a rowspan attribute which will stretch the cell to downwards.
8. Table alignment
 halign is the horizontal alignment of the text within the cell that is left,center and right.
 valign is the vertical alignment of the text that is top, bottom, middle, baseline.
9. Cell padding and spacing
 Cell padding is the amount of space held between the contents of the cell and cell border.
 Cell spacing is the amount of space held between cells specified in number of pixels.
COMPUTER MULTIMEDIA AND ANIMATION

HTML Form

An HTML form is a section of a document which contains controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to be sent to the server for
processing such as name, email address, password, phone number, etc.

HTML Form Syntax


1. <form action="server url" method="get|post">
2. //input controls e.g. textfield, textarea, radiobutton, button
3. </form>

HTML Form Tags


Tag Description

<form> It defines an HTML form to enter inputs by the used side.

<input> It defines an input control.

<textarea> It defines a multi-line input control.

<label> It defines a label for an input element.

<fieldset> It groups the related element in a form.

<legend> It defines a caption for a <fieldset> element.

<select> It defines a drop-down list.

<optgroup> It defines a group of related options in a drop-down list.

<option> It defines an option in a drop-down list.

<button> It defines a clickable button.


Example
<html>
<head>
COMPUTER MULTIMEDIA AND ANIMATION

<title>Form in HTML</title>
</head>
<body>
<h2>Registration form</h2>
<form>
<fieldset>
<legend>User personal information</legend>
<label>Enter your full name</label><br>
<input type="text" name="name"><br>
<label>Enter your email</label><br>
<input type="email" name="email"><br>
<label>Enter your password</label><br>
<input type="password" name="pass"><br>
<label>confirm your password</label><br>
<input type="password" name="pass"><br>
<br><label>Enter your gender</label><br>
<input type="radio" id="gender" name="gender" value="male"/>Male <br>
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>
<input type="radio" id="gender" name="gender" value="others"/>others <br/>
<br>Enter your Address:<br>
<textarea></textarea><br>
<input type="submit" value="sign-up">
</fieldset>
</form>
</body>
</html>
COMPUTER MULTIMEDIA AND ANIMATION

HTML FRAMES
HTML frames are used to divide your browser window into multiple sections where each
section can load a separate HTML document. A collection of frames in the browser
window is known as a frameset.
Disadvantages of Frames

1. Smaller devices cannot cope with frames because their screen is not big enough to
be divided up.
2. Your page will be displayed differently on different computers due to different
screen resolution.
3. The browser's back button might not work as the user hopes.
4. There are still few browsers that do not support frame technology.
Creating Frames
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset>
tag defines, how to divide the window into frames. The rows attribute of <frameset> tag
defines horizontal frames and cols attribute defines vertical frames.
The <frameset> Tag Attributes
COMPUTER MULTIMEDIA AND ANIMATION

Attribut Description
e

Specifies how many columns are contained in the frameset and the size of
each column. eg : to create three frames−
Absolute values in pixels. Eg : cols = "100, 500, 100".
A percentage of the browser window. Eg: cols = "10%, 80%, 10%".
Cols
Using a wildcard symbol. Eg : cols = "10%, *, 10%". In this case wildcard
takes remainder of the window.
As relative widths of the browser window. Eg: cols = "3*, 2*, 1*". Here the
window is divided into sixths: the first column takes up half of the window,
the second takes one third, and the third takes one sixth.

Rows It is used to specify the rows in the frameset. rows = "10%, 90%".

The <frame> Tag Attributes


Attribute Description

src This attribute is used to give the file name that should be loaded in the
frame.

name This attribute allows you to give a name to a frame. This is used when you
want to create links in one frame that load pages into an another frame.

Specifies whether a 3D border should be displayed between frames.


Frameborder
Frameborder=0 means no border.

marginwidth It specifies the width of the space between the left and right of the frame's
borders and the frame's content.

marginheight This allows you to specify the height of the space between the top and
bottom of the frame's borders and its contents.
COMPUTER MULTIMEDIA AND ANIMATION

noresize The frame cannot be resized with mouse.

scrolling It controls the appearance of the scrollbars that appear on the frame. This
takes values either "yes", "no" or "auto".

FEATURES OF HTML5

1. Semantic Elements: HTML5 introduced several new semantic elements, such as


<header>, <footer>, <nav>, <section>, <article>, <aside>, and <main>. These
elements provide a more meaningful structure to web documents.
2. Audio and Video Support: HTML5 introduced built-in support for embedding
audio and video content without the need for third-party plugins like Flash.
3. Canvas: The <canvas> element introduced in HTML5 enables dynamic,
scriptable rendering of 2D graphics and bitmap images..
4. Scalable Vector Graphics (SVG): HTML5 added support for SVG, which allows
developers to create vector graphics directly within an HTML document.
5. Offline Web Applications: HTML5 introduced the Application Cache API, which
enables web applications to work offline or in low-connectivity situations.
6. Geolocation: HTML5 includes a Geolocation API that allows websites to request
a user's geographic location (with their permission) and provides the latitude and
longitude coordinates. s
7. Forms Enhancements: HTML5 introduced new input types and attributes for
form elements. Examples include <input type="date">, <input type="email"> etc
8. Web Storage: HTML5 introduced the localStorage and sessionStorage APIs,
which allow web applications to store data locally on the user's device.
9. Web Workers: HTML5 introduced the concept of web workers, which allow for
multithreading in JavaScript.
10. Drag and Drop: HTML5 introduced native support for drag and drop interactions.

Cascading Style Sheets (CSS)


It is a style sheet language which is used to describe the look and
formatting of a document written in markup language. CSS Syntax
A CSS rule set contains a selector and a declaration block.
COMPUTER MULTIMEDIA AND ANIMATION

Selector: Indicates the HTML element like <h1>, <title> etc.


Declaration Block: It contains a property name and value, separated by a
colon.
Property: A type of attribute of HTML element like color, border etc.
Value: Values are assigned to CSS properties. .
Selector{Property1: value1; Property2: value2;. .;}

LEVELS OF STYLE SHEETS


There are three types of CSS which are given below:
1) Inline CSS
2) Internal or Embedded CSS
3) External CSS

1) Inline CSS: Inline CSS contains the CSS property in the body section attached to the
element is known as inline CSS. This kind of style is specified within an HTML tag using
the style attribute.
Example:
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style="color:”red”; font-size:50px; font-style:italic; text-align:center;">
COMPUTER MULTIMEDIA AND ANIMATION

Bachelor of Computer Application</p>


</body>
</html>
2) Internal or Embedded CSS: This can be used when a single HTML document must
be styled uniquely. The CSS is embedded within the <style> tag inside the head section
of the HTML file.

Example:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
.main {
text-align: center;
}
.course {
font-style: bold;
font-size: 20px;
}
</style>
</head>
<body>
<div class="main">
<div class="course"> Courses Offered BCA, BBA, BCom & BHM </div>
</div>
</body>
COMPUTER MULTIMEDIA AND ANIMATION

</html>
3) External CSS: External CSS property is written in a separate file with a .css extension
and should be linked to the HTML document using a link tag. It means that, for each
element, style can be set only once and will be applied across web pages.
Example: The file name ;bca.css
body {
background-color:powderblue;
}
.main {
text-align:center;
}
#bca {
font-style:bold;
font-size:20px;
}
• link tag is used to link the external style sheet with the html webpage.
• href attribute is used to specify the location of the external style sheet file.

<html>
<head>
<link rel="stylesheet" href="bca.css" />
</head>
<body>
<div class="main">
<div id="bca"> Courses Offered BCA, BBA, BCom & BHM </div>
</div>
</body>
</html>
COMPUTER MULTIMEDIA AND ANIMATION

CSS Selector

CSS selectors are used to select the content you want to style. Selectors are the part of
CSS rule set. CSS selectors select HTML elements according to its id, class, type,
attribute etc.There are several different types of selectors in CSS.

1. CSS Element Selector


2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector

1) CSS Element Selector

The element selector selects the HTML element by name.

<html>
<head>
<style>
p{ text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
2) CSS Id Selector

The id selector selects the id attribute of an HTML element to select a specific element.
An id is always unique within the page so it is chosen to select a single, unique element.

It is written with the hash character (#), followed by the id of the element.
COMPUTER MULTIMEDIA AND ANIMATION

#para1 {
text-align: center;
color: blue;

<p id="para1">Hello Javatpoint.com</p>


<p>This paragraph will not be affected.</p>

3) CSS Class Selector

The class selector selects HTML elements with a specific class attribute. It is used with a
period character . (full stop symbol) followed by the class name.

Note: A class name should not be started with a number.


.center {
text-align: center;
color: blue;

<h1 class="center">This heading is blue and center-aligned.</h1>


<p class="center">This paragraph is blue and center-aligned.</p>

4) CSS Universal Selector

The universal selector is used as a wildcard character. It selects all the elements on the
pages.

* { color: green;

font-size: 20px; }

<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
COMPUTER MULTIMEDIA AND ANIMATION

5) CSS Group Selector

 The grouping selector is used to select all the elements with the same style
definitions.

 Grouping selector is used to minimize the code. Commas are used to separate each
selector in grouping.

h1,h2,p {
text-align: center;
color: blue;
}

You might also like