META ELEMENT

META ELEMENT
 Meta Elements can be used to describe parts of a webpage in
code.
 It provides Metadata about webpages.
 Meta Elements are situated in the head section of the sourse
code.
 It can be used as an alternative to an HTTP response header
field.
USES OF THE META ELEMENT
 The name attribute specifies the name for the metadata
 The name attribute specifies a name for the information/value of the content attribute.
Author:
Specifies the name of the author or the document.
<meta name="author"content="John Doe">
Description:
Specifies a description of the page.
<metaname="description"content="Free web tutorials">
Generator:
Specifies one of the software packages used to generate the document.
<meta name="generator"content="FrontPage 4.0">
USES OF THE META ELEMENT
Keywords:
Specifies a comma-separated list of keywords-relevant to the page.
TIP: Always specify keywords (needed by search engines what the page is about.
<meta name="keywords"content="HTML, meta tag, tag
reference">
Viewport:
Controls the viewport (the users’s visible area of a web page).
It gives the browser instructions on how to control the pages dimensions and scaling.
<meta name="viewport"content="width=device-width, initial-
scale=1.0">
ADDING SOUND
 The HTML <audio> element is used to embed sound content in documents.
 It may contain one or more audio sources represented using the src attribute or the <source>
element.
 To play an audio file in HTML use the <audio> element:
<audio controls>
  <source src="horse.ogg"type="audio/ogg">
   <source src="horse.mp3"type="audio/mpeg">
Your browser does not support the audio element.
</audio>
 The controls attribute adds audio controls like play, pause and volume.
 The <source> element allows you to specify alternative audio files which the browser may
choose from. The browser will use the first recognized format.
 The text between the <audio> and </audio> tags will only be displayed in browsers that do not
support the <audio> element.
EMBED ELEMENT

 The HTML <embed> element embeds external content at the specified point in the
document.

ATTRIBUTES:
Height: The displayed height of the resource in css pixels.
Src: The URL of the resource being embedded.
Type: The MIME type to use to select the plug-in to instantiate.
Width: The displayed width of the resource in css pixels.
<embed type="video/quicktime" src="movie.mov" width="640" height="480">
BGSOUND ELEMENT
 The HTML <bgsound> tag is used to play a soundtrack in the background.

ATTRIBUTES:
Balance: It defines a number between -10,000 and +10,000 that determines how the
volume will be divided between the speakers.
Loop: It indicates the number of times a sound is to be played and either has a numeric
value or the keyword infinite.
Src: This specifies the URL of the sound file to be played, which must be one of the
following types: .wav, .au, or .mid.
Volume: It defines a number between -10,000 and 0 that determines the loudness of
page’s background sound.
<bgsound src="sound1.mid"> <bgsound src="sound2.au" loop="infinite">
HTML ANIMATION ELEMENTS
 The <marquee> is an HTML tag used to create a scrolling text or an image.
 <marquee>This text will scroll from right to left</marquee> <marquee direction="up">This text will scroll from bottom to top</marquee>
<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"> <marquee behavior="alternate"> This text
will. bounce </marquee> </marquee>
ATTRIBUTES:
Behavior: It defines the scrolling type.
Bgcolor: It is used to give a background color.
Direction: It sets the direction for the scrolling content.
Height: It defines the marquee’s height.
Hspace: It defines horizontal space around the marquee.
Loop: It defines how many times the content will scroll.
Scrollamount: It defines the scrolling amount at each interval in pixels. Default value is 6.
Scrolldelay: It defines how long delay will be between each jump.
Truespeed: If you use this attribute, you can delay the scroll lesser than 60.
Vspace: It defines vertical space around the marquee.
Width: It defines the marquee’s width.
EMBEDDED OBJECT
 On the internet or an internet web page an embedded object is any external media that has
been included in a web page using the HTML <embed> command.
 Use this element to embed multimedia (like audio, video, Java, applets, ActiveX, PDF and
Flash) in your web pages.

Example:
When sharing a Youtube video on your web page that video
can be shown using the HTML embed code provided by Youtube.
EMBEDDING OBJECTS
 The HTML <embed> element embeds external content at the specified point in the document.
 This content is provided by an external application or other source of interactive content such
a browser plug-in.

ATTRIBUTES:
Height
Src
Type
Width
<embed type="video/quicktime" src="movie.mov" width="640“ height="480">
PLUG INS
 The purpose of a plug in is to extend the functinality of a web browser.
 Helper applications (plug ins) are computer programs that extend the standard
functionality of a web browser.
 Plug ins can be added to web pages with the <object> tag or the <embed> tag.
 Plug ins can be used for many purposes: display maps, scan for viruses, verify
your bank ID, etc.
 Examples of well-known plug ins are Java applets.
BROWSERS WITHOUT PLUG-INS
SUPPORT
 A plug in runs in an HTML page in browser window. The HTML author uses the
HTML <embed> element to invoke the plug-in and control it’s display.
 The default plug-in is only automatically invoked when you use the embed
element.
 You can create private plug-in specific attributes and use them in the embed
attribute to pass extra information between the HTML page and the plug in code.
The browser these nonstandard attributes when parsing the HTML but it passes all
the attributes to the plug-in allowing the plug-in to examine the list for any private
attributes that could modify it’s behavior.
OBJECT ELEMENT
 The HTML <object> element represents an external resource, which can be treated as an image, a nested browsing context or a resource to
be handled by a plug-in.
<!-- Embed a flash movie --> <object data="movie.swf" type="application/x-shockwave-flash"></object> <!-- Embed a flash movie with
parameters --> <object data="movie.swf" type="application/x-shockwave-flash"> <param name="foo" value="bar"> </object>
ATTRIBUTES
Archive: A space-separated list of URLs for archives of resources for the object.
Border: The width of a border around the control in pixels.
Classid: The URL of the object’s implementation.
Codebase: The base path used to resolve relative URLs specified by classid, data or archive.
Codetype: The content type of the data specified by classid.
Data: The address of the resource as a valid URL.
Height: The height of the displayed resource in css pixels.
Name: The name of valid browsing context (HTML5) or the name of the control (HTML4).
Type: The content type of the resource specified by data.
Width: The width of the display resource in css pixels.
WEB PAGE DESIGN
CONSIDERATIONS

1. 320 x 240
2. 640 x 480
5 3. 800 x 600
4 4. 1024 x 768
3. 3
1 2. 2 5. 1400 x 1050
WEB PAGE DESIGN CONSIDERATION

TRUE COLORS

256 COLORS NO DITHERING

256 COLORS ERROR DIFUSSION

16 COLOR NO DITHERING

16 COLOR ERROR DIFFUSION

WEB PAGE DESIGN CONSIDERATION

 HyperText Markup Language (HTML) is the primary building block of

creating a website. HTML is a very basic markup language and requires
memorization of a few dozen HTML commands that structure the look and
layout of a web page. Before writing any HTML code or designing your first
web page, you must decide on an HTML editor or text editor, such as 
Notepad or WordPad.

 Once you have obtained an HTML editor and are ready to begin setting up
your website, think about how you want the site to look and be set up.
Consider even drawing out your ideas, to help visualize the site and pages
on the site.
PAGE LAYOUT
 Websites often display content in multiple columns (like a magazine or
newspaper).
 HTML offers semantic elements that define the different parts of the web page.
 There are 4 different ways to create multicolumn layouts. Each way has its prons
and cons:
HTML TABLES
CSS FLOAT PROPERTY
CSS FLEX BOX
CSS FRAMEWORK
SITE DESIGN FACTORS AND
CRITERIA
User Interface (UI) Design focuses on anticipating what users might need to do and
ensuring that the interface has elements that are easy to access, understand, and use to
facilitate those actions. UI brings together concepts from interaction design, visual design,
and information architecture.

 Users have become familiar with interface elementsacting in a certain way, so try to be

consistent and predictable in your choices and their layout. Doing so will help with task
completion, efficiency, and satisfaction.

 Everything stems from knowing your users, including understanding their goals, skills,
preferences, and tendencies.