Web Development Certificate Course HTML Guide

Web-Development Certificate Course MGM’s College of CS&IT, Nanded.
What is Html?
Html stands for Hyper Text Markup Language. Html mainly use for design a client side web
pages, this is a static page it means you can only view Html page not give request and not get response
from server. Using Html pages browser get user information through form (This is an Html element).
Html provides so many elements (like <p>, <img>, <h1>) to design a web page.
Hypertext: is text which contains links to other texts. The hypertext pages are interconnected by
hyperlinks, when mouse click on these link which brings you to a new webpage
Markup language: Any tag based language known as markup language, for example gml, sgml,
html, xml etc.
Web Page: A web page is a document which is commonly written in HTML and translated by a
web browser. A web page can be identified by entering an URL. A Web page can be of the static or
dynamic type. With the help of HTML only, we can create static web pages.
Tim Berners-Lee is known as father of Html. The first publicly
available description of HTML was a document called "HTML Tags", first
described, on the Internet by Berners-Lee in late 1991.
Features of HTML
 It is a very easy and simple language. It can be easily understood and
modified.
 It is very easy to make an effective presentation with HTML because it has a lot of formatting
tags.
 It is a markup language, so it provides a flexible way to design web pages along with the text.
 It facilitates programmers to add a link on the web pages (by html anchor tag), so it enhances the
interest of browsing of the user.
 It is platform-independent because it can be displayed on any platform like Windows, Linux, and
Macintosh, etc.
 It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which makes
it more attractive and interactive.
 HTML is a case-insensitive language, which means we can use tags either in lower-case or upper-
case.
1 Mr.Kadam R.R. (Skill Development Cell)

HTML is a markup language which is used for creating attractive web pages with the help of styling,
and which looks in a nice format on a web browser. An HTML document is made of many HTML tags and
each HTML tag contains different content. E.g.
Creating Your First HTML Document

Step 1: Creating the HTML file
Open up your computer's plain text editor and create a new file
Step 2: Type some HTML code
Start with an empty window and type the following code:
Step 3: Saving the file

Now save the file on your desktop as "myfirstpage.html ".
To open the file in a browser. Navigate to your file then double click on it. It will open in your
default Web browser. If it does not, open your browser and drag the file to it.
Explanation of code
1. The first line <!DOCTYPE html> is the document type declaration. It instructs the web browser
that this document is an HTML5 document. It is case-insensitive.
2. The <head> element is a container for the tags that provides information about the document, for
example, <title> tag defines the title of the document.
3. The <body> element contains the document's actual content (paragraphs, links, images, tables,
and so on) that is rendered in the web browser and displayed to the user.
HTML Tags and Elements

- HTML is written in the form of HTML elements consisting of markup tags. These markup tags are
the fundamental characteristic of HTML.
- Every markup tag is composed of a keyword, surrounded by angle brackets, such
as <html>, <head>, <body>, <title>, <p>, and so on.
- HTML tags normally come in pairs like <html> and </html>. The first tag in a pair is often called
the opening tag (or start tag), and the second tag is called the closing tag (or end tag).
- An opening tag and a closing tag are identical, except a slash (/) after the opening angle bracket of
the closing tag, to tell the browser that the command has been completed.
- In between the start and end tags you can place appropriate contents. For example, a paragraph,
which is represented by the p element, would be written as:
HTML Tags Vs Elements

- Technically, an HTML element is the collection of start tag, its attributes, an end tag and
everything in between. On the other hand an HTML tag (either opening or closing) is used to mark
the start or end of an element, as you can see in the above illustration.
- However, in common usage the terms HTML element and HTML tag are interchangeable i.e. a tag
is an element is a tag. For simplicity's sake of this website, the terms "tag" and "element" are used
to mean the same thing — as it will define something on your web page.
HTML Element Syntax

An HTML element is an individual component of an HTML document. It represents semantics, or
meaning. For example, the title element represents the title of the document.
Elements: An HTML element is an individual component of an HTML file. In an HTML file,
everything written within tags are termed as HTML elements.

Most HTML elements are written with a start tag (or opening tag) and an end tag (or closing tag),
with content in between. Elements can also contain attributes that defines its additional properties. For
example, a paragraph, which is represented by the p element, would be written as:
HTML document consist of its basic building blocks which are:
Tags: An HTML tag surrounds the content and apply meaning to it. It is written between < and >
brackets.
Attribute: An attribute in HTML provides extra information about the element, and it is applied
within the start tag. An HTML attribute contains two fields: name & value.
Syntax
<tag_ name attribute_name= "attr_value"> content </tag_name>
What are Attributes

- Attributes define additional characteristics or properties of the element such as width and height
of an image.
- Attributes are always specified in the start tag (or opening tag) and usually consists of name/value
pairs like name="value".
- Attribute values should always be enclosed in quotation marks. E.g. width=”50px”
- Also, some attributes are required for certain elements. For instance, an <img> tag must contain
a src and alt attributes. Let's take a look at some examples of the attributes usages:

Output
General Purpose Attributes

- There are some attributes, such as id, title, class, style, etc. that you can use on the majority of
HTML elements. The following section describes their usages.
The id Attribute
- The id attribute is used to give a unique name or identifier to an element within a document. This
makes it easier to select the element using CSS or JavaScript.
The class Attribute

- Like id attribute, the class attribute is also used to identify elements. But unlike id,
the class attribute does not have to be unique in the document. This means you can apply the same
class to multiple elements in a document, as shown in the following example:
The title Attribute

The title attribute to is used to provide advisory text about an element or its content.
Output

Playing Audio in HTML Document

- Inserting audio onto a web page was not easy before, because web browsers did not have a
uniform standard for defining embedded media files like audio.
- Here demonstrates some of the many ways to embed sound in your webpage, from the use of a
simple link to the use of the latest HTML5 <audio> element.
Using the HTML5 audio Element
- The newly introduced HTML5 <audio> element provides a standard way to embed audio in web
pages. However, the audio element is relatively new but it works in most of the modern web
browsers. The following example simply inserts an audio into the HTML5 document, using the
browser default set of controls, with one source defined by the src attribute.
Attribute Description
controls It defines the audio controls which is displayed with play/pause buttons.
autoplay It specifies that the audio will start playing as soon as it is ready.
Loop It specifies that the audio file will start over again, every time when it is completed.
muted It is used to mute the audio output.
preload It specifies the author view to upload audio file when the page loads.
Src It specifies the source URL of the audio file.

Playing audio using the Object element

- The <object> element is used to embed different kinds of media files into an HTML document.
- An object can be any media object such as audio, video, PDF files, Flash animations or even images.
- The following example code embeds a simple audio file into a web page.
Output:
Playing audio using the Embed element

- The <embed> element is used to embed multimedia content into an HTML document.

Playing Videos, Embedding YouTube Videos

- Inserting video onto a web page was not relatively easy, because web browsers did not have a
uniform standard for defining embedded media files like video.
Using the HTML5 video Element
- The newly introduced HTML5 <video> element provides a standard way to embed video in web
pages. However, the video element is relatively new, but it works in most of the modern web
browsers.
- The following example simply inserts a video into the HTML document, using the browser default
set of controls, with one source defined by the src attribute.

Attribute Description
controls It defines the video controls which is displayed with play/pause buttons.
height It is used to set the height of the video player.
width It is used to set the width of the video player.
poster It specifies the image which is displayed on the screen when the video is not played.
autoplay It specifies that the video will start playing as soon as it is ready.
loop It specifies that the video file will start over again, every time when it is completed.
src It specifies the source URL of the video file.
Example of video tag in HTML where are using height, width, autoplay, controls and loop attributes.
Output
Playing video using the Object element

- The <object> element is used to embed different kinds of media files into an HTML document.
Initially, this element was used to insert ActiveX controls, but according to the specification, an
object can be any media object such as video, audio, PDF files, Flash animations or even images.
- The following code fragment embeds a Flash video into a web page.
- Output
Playing video using the embed Element

- The <embed> element is used to embed multimedia content into an HTML document.

Embedding the YouTube Videos in a Web-Page

- This is the easiest and popular way to embed videos files in the web pages. Just upload the video
on YouTube and insert HTML code to display that video in your web page.
Step 1: Upload video
- Go to YouTube upload video page and follow the instructions to upload your video.
Step 2: Creating the HTML Code to embed the video
- When you open your uploaded video in YouTube you will see something like the following figure
at the bottom of the video. Browse and open your uploaded video in YouTube. Now look for the
share button which is located just below the video as shown in the figure.
Click Here
When you click the share button, a share panel will open displaying some more buttons. Now click
on the Embed button, it will generate the HTML code to directly embed the video into the web pages. Just
copy and paste that code into your HTML document where you want to display the video and you're all
set. By default video embedded inside an iframe.

Output

Web Development Certificate Course HTML Guide

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Development Certificate Course HTML Guide

Uploaded by

Copyright:

Available Formats

Web-Development Certificate Course MGM’s College of CS&IT, Nanded.

1 Mr.Kadam R.R. (Skill Development Cell)

Creating Your First HTML Document

Step 3: Saving the file

HTML Tags and Elements

HTML Tags Vs Elements

HTML Element Syntax

3 Mr.Kadam R.R. (Skill Development Cell)

<tag_ name attribute_name= "attr_value"> content </tag_name>

What are Attributes

4 Mr.Kadam R.R. (Skill Development Cell)

General Purpose Attributes

The class Attribute

The title Attribute

6 Mr.Kadam R.R. (Skill Development Cell)

Playing Audio in HTML Document

muted It is used to mute the audio output.

Src It specifies the source URL of the audio file.

7 Mr.Kadam R.R. (Skill Development Cell)

Playing audio using the Object element

Playing audio using the Embed element

8 Mr.Kadam R.R. (Skill Development Cell)

Playing Videos, Embedding YouTube Videos

9 Mr.Kadam R.R. (Skill Development Cell)

Playing video using the Object element

Playing video using the embed Element

11 Mr.Kadam R.R. (Skill Development Cell)

Embedding the YouTube Videos in a Web-Page

12 Mr.Kadam R.R. (Skill Development Cell)

13 Mr.Kadam R.R. (Skill Development Cell)

You might also like