Scribd
Upload
4 views

Web Design & Development (Lecture_10)

The document discusses essential HTML concepts, including the use of forms for collecting visitor information, the importance of DOCTYPE declarations, and the role of ID and class attributes for styling elements. It also covers block and inline elements, the use of <div> and <span> for grouping, and introduces HTML5 elements like <video> and <audio> for multimedia integration. Additionally, it highlights the significance of comments and reserved characters in HTML coding.

Uploaded by

zainulabaideen993
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Web Design & Development (Lecture_10)

The document discusses essential HTML concepts, including the use of forms for collecting visitor information, the importance of DOCTYPE declarations, and the role of ID and class attributes for styling elements. It also covers block and inline elements, the use of <div> and <span> for grouping, and introduces HTML5 elements like <video> and <audio> for multimedia integration. Additionally, it highlights the significance of comments and reserved characters in HTML coding.

Uploaded by

zainulabaideen993
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

Web Design &

Development
Lecture #10
• Whenever you want to collect information
from visitors you will need a form, which
lives inside a <form> element.
• Information from a form is sent in
name/value pairs.

Throwback • Each form control is given a name, and


the text the user types in or the values of
the options they select are sent to the
server.
• HTML5 introduces new form elements
which make it easier for visitors to fill in
forms.
At this point, we have
covered the main tags that
fit nicely into groups and
sections.
Next, we will focus on some
helpful topics that are not
easily grouped together.
Let’s see
The different versions of HTML and how
to indicate which version you are using
XML

Strict XHTML
Versions Transitional XHTML
of html
HTML 4

HTML 5
Doctype
Because there have been several
versions of HTML, each web page
should begin with a DOCTYPE
declaration to tell a browser
which version of HTML the page is
using (although browsers usually
display the page even if it is not
included).
Comments in html < ! -- -- >
If you want to add a comment to your code that will not be visible in
the user's browser, you can add the text between these characters:
It is a good idea to add comments to your code because, no matter
how familiar you are with the page at the time of writing it, when you
come back to it later (or if someone else needs to look at the code),
comments will make it much easier to understand.

<! -- comment goes here -- >


To give a unique name to any
Tag / element.
ID
Attribute Every HTML element can carry the id
attribute. It is used to uniquely
identify that element from other
elements on the page
Example
Giving an element a unique identity
allows you to style it differently than any
other instance of the same element on
the page.
For example, you might want to assign
one paragraph within the page (perhaps
a paragraph containing a pull quote) a
different style than all of the other
paragraphs. In the example on the right,
the paragraph with the id attribute
whose value is pullquote is made
uppercase using CSS.
Class Attribute
Every HTML element can
also carry a class attribute.

Sometimes, rather than uniquely


identifying one element within a
document, you will want a way to identify
several elements as being different from
the other elements on the page.
Example
You might have some paragraphs
of text that contain information
that is more important than
others and want to distinguish
these elements, or you might
want to differentiate between
links that point to other pages on
your own site and links that point
to external sites.
Block elements
Some elements will always
appear to start on a new line in
the browser window. These are
known as block level elements.
Examples of block elements
are:
<h1>, <p>, <ul> and <li>
Grouping
Text & The <div> element allows you to group a
set of elements together in one block-
Elements level box.

In a Block
For Example
You might create a <div>
element to contain all of the
elements for the header of your
site (the logo and the
navigation), or you might create
a <div> element to contain
comments from visitors.
Div is also a Block element
Inline elements
Some elements will always
appear to continue on the same
line as their neighboring
elements. These are known as
inline elements.
• Example: <a>, <b>, <i>, <img>
Span
The <span> element acts
like an inline equivalent of
the element.
<iframe>
An iframe is like a little window
that has been cut into your
page — and in that window you
can see another page. The term
iframe is an abbreviation of
inline frame.
Example – Adding Google
Maps link in your Website
<Meta>
The element lives inside
the element and contains
information about that
web page.
Reserved
Characters
There are some characters that are used
in and reserved by HTML code. (For
example, the left and right angled
brackets.)
Reserved
Characters

WMA - Lecture # 13
<Video>
The <video> element has a number of attributes
which allow you to control video playback.
Video Attributes
Poster: This attribute allows you to
specify an image to show while the Src: This attribute defines the path
video is downloading or until the of the video
user tells the video to play.

Width/ Height: These attributes Control: When used, this attribute


specify the size of the player in indicates that the browser should
pixels. supply its own controls for playback.

Autoplay: When used, this attribute Loop: When used, this attribute
specifies that the file should play indicates that the video should start
automatically. playing again once it has ended.
<Audio>
HTML5 introduced the element
to include audio files in your
pages. As with HTML5 video,
browsers expect different
formats for the audio.
Example

You might also like