Scribd
Upload
14 views30 pages

Full Stack Web Development Internship

Uploaded by

setruyamanappa72
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
14 views30 pages

Full Stack Web Development Internship

Uploaded by

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

Full stack web development

internship

DAY 6
Content

1.HTML meta tags


2.Block and Inline
3.Font tag
4.Audio and video
5.HTML Canvas
6. Styles
1.HTML meta tags

What are meta tags in HTML?

Why it is important for SEO?

Definition and syntax/usage .

Attributes.

How to define the character set of a website

How to adjust viewport settings

How to add a description of your webpage

How to add the name of the website's author


What are meta tags in HTML?

 Meta tags live within the head tag of the HTML document.

 The head tag is used for configuring the html file.

 Meta tags represent metadata.

 There are many meta tags. Some of them help improve the SEO
(search engine optimisation) of your website, making sure that
the content of your site is relevant to what people are searching
for.
Why it is important for SEO?

 Meta tags are important because they impact how your site
appears in the SERPs and how many people will be inclined to
click through to your website.

 They will therefore impact your traffic and engagement rates,


which can impact your SEO and rankings. Meta tags are an

important part of a solid SEO strategy.


Definition and syntax/usage

 The <meta> tag defines metadata about an HTML document. Metadata is


data (information) about data.

 <meta> tags always go inside the <head> element, and are typically used to
specify character set, page description, keywords, author of the document,
and viewport settings.

 Metadata will not be displayed on the page, but is machine parsable.

 Metadata is used by browsers (how to display content or reload page),


search engines (keywords), and other web services.

 There is a method to let web designers take control over the viewport (the
user's visible area of a web page), through the <meta> tag (See "Setting
The Viewport" example below).
 META tag is the element in the HTML that interacts
with the search engines.

 It’s contain 2 attributes that should always be used:

 NAME: is an identification of the type of META tag


( eg: keywords, description)

 CONTENT: attribute provides information that search


engine will be cataloguing about your site.
 Syntax :
 <meta propety:”value”>
 <meta property1: “value1”; property2: “value2”>

 E.g.:
 <meta charset="UTF-8">
Attributes.
Attribute Value Description

charset character_set Specifies the character encoding for the HTML document

content text Specifies the value associated with the http-equiv or name attribute

http-equiv content-security-policy Provides an HTTP header for the information/value of the content
content-type attribute
default-style
refresh

name application-name Specifies a name for the metadata


author
description
generator
keywords
viewport
How to define the character set of a
website

 <meta charset="UTF-8"> defines the character set


that will be used in the site.
 UTF-8, which stands for 8-bit Unicode
Transformation Format, is the standard character
encoding used with the latest version of HTML,
which is HTML5.
How to adjust viewport settings
 Nowadays, it is important that all sites look good on all
devices, especially mobile phones.
 <meta name="viewport" content="width=device-width, initial-
scale=1.0">
 viewport refers to how the site is displayed on different screen
sizes, and how much visual area a user has available.
 Each device has a different viewport. For example, mobile
devices have a smaller one and desktop computers have a
larger one.
 content="width=device-width” is the first step to making sure
that websites look good on mobile devices.
 initial-scale=1.0 sets how the webpage scales,and sets the
initial zoom when the page is first loaded by the browser.
How to add a description of your
webpage
 Using a meta description tag for your page helps search engines figure out
and rank your website against other websites. It's used primaraly for SEO
(Search Engine Optimization) purposes.

 The meta description tag is used to explain in a brief and concise way what
your website is about.

 A meta description tag could look something like this:


 <meta name="description" content="Our mission: to help people learn to
code for free. We accomplish this by creating thousands of videos, articles,
and interactive coding lessons - all freely available to the public.">

 You use the name and content attributes, with the text value passed
to content showing up in the search results:
How to add the name of the website's
author

 Another useful meta element to include is the author's


name.
 This could look like the following:

 <meta name="author" content="Quincy Larson">

 It can be helpful to know who authored the page.

 This info shares who created and built the website, who
authored the content, or to whom the copyright belongs
2.Block and inline
 Every HTML element has a default display value, depending on what type of element it is.

 There are two display values: block and inline.

 Block-level Elements

 A block-level element always starts on a new line, and the browsers automatically add some space (a

margin) before and after the element.

 A block-level element always takes up the full width available (stretches out to the left and right as far

as it can).

 Two commonly used block elements are: <p> and <div>.

 The <p> element defines a paragraph in an HTML document.

 The <div> element defines a division or a section in an HTML document.

 The <p> and <div> elements are a block-level element.

 Example: <p>Hello World</p> <div>Hello World</div>


 Inline Elements
 An inline element does not start on a new line.
 An inline element only takes up as much width as
necessary.
 This is a <span> element inside a paragraph.
 Example
 <span>Hello World</span>
HTML Font tag

 The <font> tag in HTML plays an important role in the web page
to create an attractive and readable web page. The font tag is
used to change the color, size, and style of a text. The base font
tag is used to set all the text to the same size, color and face.

 Syntax:

 <font attribute = "value"> Content </font>


 The font tag has basically three attributes which are
given below:
 Font Size attribute
 Face/Type attribute
 Color attribute
 Note: Font tag is not supported in HTML5.
 We will discuss all these attributes & understand them
through the examples.
 font Size: This attribute is used to adjust the size of the
text in the HTML document using a font tag with the size
attribute. The range of size of the font in HTML is from 1
to 7 and the default size is 3.
 Syntax:
 <font size="number">
 Font type/Face: Font type can be set by using face
attribute with font tag in HTML document. But the fonts
used by the user need to be installed in the system first.
 Syntax:
 <font face="font_family">
 Font Color: Font color is used to set the text color using a
font tag with the color attribute in an HTML document.
Color can be specified either with its name or with its hex
code.
 Syntax:
 <font color="color_name|hex_number|rgb_number">
 <!DOCTYPE html>
 <html>
 <body>
 <!--HTML font face tag starts here-->
 <font face="Times New Roman" size=“7“ color=“red”> HTML
</font> <br/>
 <font face="Verdana" size=“8“color=“blue”> HTML
</font><br />
 <font face="Comic sans MS" size=“10“color=“green”> HTML
</font><br/>
 <font face="WildWest" size=“5“ color=“#009900”> HTML
</font><br />
 <font face="Bedrock" size=“6“ color=“#011099”> HTML
</font><br />
 <!--HTML font face tag ends here-->
 </body>
 </html>
Html Audio and video
 HTML Audio
 Definition and Usage
 The <audio> tag is used to embed sound content in a
document, such as music or other audio streams.
 The <audio> tag contains one or more <source> tags with
different audio sources. The browser will choose the first
source it supports.
 The text between the <audio> and </audio> tags will only
be displayed in browsers that do not support
the <audio> element.
 There are three supported audio formats in HTML:
 1)MP3, 2)WAV, and 3)OGG.
Attributes
Attribute Value Description

autoplay autoplay Specifies that the audio will start playing as soon as it is ready

controls controls Specifies that audio controls should be displayed (such as a


play/pause button etc)

loop loop Specifies that the audio will start over again, every time it is
finished

muted muted Specifies that the audio output should be muted

preload auto Specifies if and how the author thinks the audio should be
metadata loaded when the page loads
none

src URL Specifies the URL of the audio file


EXAMPLE

 <!DOCTYPE html>
 <html>

 <body>
 <p>Audio Sample</p>

 <!-- audio tag starts here -->
 <audio controls (muted , autoplay)>
 <source src="test.mp3" type="audio/mp3">
 <source src="test.ogg" type="audio/ogg">
 </audio>
 <!-- audio tag ends here -->

 </body>
 </html>
 HTML Video
 The HTML <video> element is used to show a video on a
web page.
 How it Works
 The controls attribute adds video controls, like play,
pause, and volume.
 It is a good idea to always
include width and height attributes. If height and width
are not set, the page might flicker while the video loads.
 The <source> element allows you to specify alternative
video files which the browser may choose from. The
browser will use the first recognized format.
 The text between the <video> and </video> tags will
only be displayed in browsers that do not support
the <video> element.
HTML Video - Media Types

File Format Media Type

MP4 video/mp4

WebM video/webm

Ogg video/ogg

Syntax:
<video src="" controls> </video>
Attributes
 Autoplay: It tells the browser to immediately start
downloading the video and play it as soon as it can.
 Preload: It intends to provide a hint to the browser about
what the author thinks will lead to the best user experience.
 Loop: It tells the browser to automatically loop the video.
 height: It sets the height of the video in CSS pixels.
 width: It sets the width of the video in CSS pixels.
 Controls: It shows the default video controls like play, pause,
volume, etc.
 Muted: It mutes the audio from the video.
 Poster: It loads an image to preview before the loading of
the video.
 src: It is used to specify the URL of the video file
EXAMPLE
 <!DOCTYPE html>
 <html>
 <body>
 <center>
 <h1 style="color:green;">HTML video</h1>
 <h3>HTML video tag</h3>
 <p>Adding video on the webpage
 <p>
 <video width="450" height="250" controls preload="auto">
 <source src=“file name.mp4” type="video/mp4">
 <source src=“filename.ogg” type="video/ogg"> </video>
 </center>
 </body>
 </html>
HTML Canvas Tag
 The HTML canvas element provides HTML a bitmapped
surface to work with. It is used to draw graphics on the
web page.
 The HTML 5 <canvas> tag is used to draw graphics using
scripting language like JavaScript.
 The <canvas> element is only a container for graphics, you
must need a scripting language to draw the graphics. The
<canvas> element allows for dynamic and scriptable
rendering of 2D shapes and bitmap images.
 It is a low level, procedural model that updates a bitmap
and does not have a built-in scene. There are several
methods in canvas to draw paths, boxes, circles, text and
add images.
How to create a HTML canvas?
 A canvas is a rectangle like area on an HTML page. It is
specified with canvas element. By default, the <canvas>
element has no border and no content, it is like a container.
 Note: The <canvas> tag is new in HTML5.
 Syntax:
 <canvas id = "script"> Contents... </canvas>
 Attributes: The tag accepts two attributes as mentioned
above and described below.
 height: This attribute is used to set the height of the canvas.
 width: This attribute is used to set the width of the canvas.
 <canvas id = "mycanvas" width ="200" height ="100"> </
canvas>
HTML Canvas Tag Example
 <!DOCTYPE html>
 <html>
 <body>

 <!-- canvas Tag starts here -->
 <canvas id = “HTML canvas" width = "200"
 height = "100" style = "border:1px solid black">
 </canvas>
 <!-- canvas Tag ends here -->

 </body>
 </html>

 Output:

Note: It is always necessary to specify the id attribute and the height & width attribute to define the
size of the canvas. You can have multiple canvas elements on one HTML page.

You might also like