Scribd
Upload
67 views

G. Pullaiah College of Engineering and Technology

The document discusses various HTML tags and their usage including: 1. Common text formatting tags like <h1>-<h6> for headings, <p> for paragraphs, and <br> for line breaks. 2. Other tags like <img> for images, <a> for links, <center> for centering content, and <hr> for horizontal rules. 3. Tags for preserving formatting like <pre> and non-breaking spaces using &nbsp;. 4. The <meta> tag for providing metadata about the document.

Uploaded by

kdhanamjay
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
67 views

G. Pullaiah College of Engineering and Technology

The document discusses various HTML tags and their usage including: 1. Common text formatting tags like <h1>-<h6> for headings, <p> for paragraphs, and <br> for line breaks. 2. Other tags like <img> for images, <a> for links, <center> for centering content, and <hr> for horizontal rules. 3. Tags for preserving formatting like <pre> and non-breaking spaces using &nbsp;. 4. The <meta> tag for providing metadata about the document.

Uploaded by

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

G.

Pullaiah College of Engineering and Technology

Department of Computer Science & Engineering


UNIT-1
FUNDAMENTALS
FLAVORS OF HTML
There are many versions of HTML
HTML 2 The basic standard supported by early browsers
like Mosaic.
HTML 3.0 A standard that was never widely adopted, as
it was developed during the time of heavy browser
innovation.
HTML 3.2 A version of the HTML 3.0 specification that
adopted many browser-invented elements and removed
nonimplemented HTML 3.0 elements.

Department of Computer Science & Engineering


Introduction to the Internet
HTML 4.0 Transitional The modern version of HTML,
complete with frames, scripting, and style sheet support.
This version includes presentational elements.
HTML 4.0 Strict A version of HTML that removes most
of the presentational features of the language in favor of
CSS-based presentation.
HTML 4.0 Frameset A version of HTMLthat defines
support for frames and inline frames.
HTML 4.01 Transitional, Strict, and Frameset A slight
bug fix release of the HTML 4 specifications.

Department of Computer Science & Engineering


.
HTML Documents :
All HTML documents must start with a document type
declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends
with </html>.
The visible part of the HTML document is
between <body> and </body>.
Example
.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Headings :
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines
the least important heading:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Paragraphs :
HTML paragraphs are defined with the <p> tag:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links :
HTML links are defined with the <a> tag:
<a href="http://www.w3schools.com">This is a link</a>
HTML Images :
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and
height are provided as attributes :
<img src="w3schools.jpg" alt="W3Schools.com" width="
104" height="142">
HTML Elements :
An HTML element usually consists of a start tag
and end tag, with the content inserted in between:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to
the end tag:
<p>My first paragraph.</p>
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br>
.
Nested HTML Elements :
HTML elements can be nested (elements can contain
elements).
All HTML documents consist of nested HTML elements.
This example contains four HTML elements:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Attributes

All HTML elements can have attributes


Attributes provide additional information about an
element
Attributes are always specified in the start tag
Attributes usually come in name/value pairs
like: name="value"
The lang Attribute :
The language of the document can be declared in
the <html> tag.
The language is declared with the lang attribute.
<!DOCTYPE html>
<html lang="en-US">
<body>
..
</body>
</html>
The first two letters specify the language (en). If there is a
dialect, use two more letters (US).
The title Attribute :
Here, a title attribute is added to the <p> element. The
value of the title attribute will be displayed as a tooltip
when you mouse over the paragraph:
Example
<p title="I'm a tooltip">
This is a paragraph.
</p>
The href Attribute :
HTML links are defined with the <a> tag. The link
address is specified in the href attribute:
Example
<a href="http://www.w3schools.com">This is a link</a>
Size Attributes :
HTML images are defined with the <img> tag.
The filename of the source (src), and the size of the
image (width and height) are all provided as attributes:
Example
<img src="w3schools.jpg" width="104" height="142">
The image size is specified in pixels: width="104" means
104 screen pixels wide.
The alt Attribute :
The alt attribute specifies an alternative text to be used,
when an image cannot be displayed.
The value of the attribute can be read by screen readers.
This way, someone "listening" to the webpage, e.g. a
blind person, can "hear" the element.
Example :
<img src="w3schools.jpg" alt="W3Schools.com" width="
104" height="142">
TAGS
Tag Description
<!--...--> Defines a comment
<!DOCTYPE> Defines the document type
<a> Defines a hyperlink
<abbr> Defines an abbreviation or an acronym
<acronym> Not supported in HTML5. Use <abbr> instead.
Defines an acronym
<address> Defines contact information for the author/owner of a
document
<applet> Not supported in HTML5. Use <embed> or <object>
instead.
Defines an embedded applet
<area> Defines an area inside an image-map
<article> Defines an article
<aside> Defines content aside from the page content
<audio> Defines sound content
<b>
.
Defines bold text
<base> Specifies the base URL/target for all
relative URLs in a document
<basefont> Not supported in HTML5. Use CSS
instead.
Specifies a default color, size, and
font for all text in a document
<bdi> Isolates a part of text that might be
formatted in a different direction from
other text outside it
<bdo> Overrides the current text direction
<big> Not supported in HTML5. Use CSS
instead.
Defines big text
<blockquote> Defines a section that is quoted from
another source
<body> Defines the document's body
<br> Defines a single line break
<button> Defines a clickable button
.
<canvas> Used to draw graphics, on the fly, via
scripting (usually JavaScript)
<caption> Defines a table caption
<center> Not supported in HTML5. Use CSS
instead.
Defines centered text
<cite> Defines the title of a work
<code> Defines a piece of computer code
<col> Specifies column properties for each
column within a <colgroup> element
<colgroup> Specifies a group of one or more
columns in a table for formatting
HTML BASIC TAGS
Heading tag :
. You can use different sizes for your headings. HTML
also has six levels of headings, which use the
elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>

Paragaph Tag :
The <p> tag offers a way to structure your text into
different paragraphs. Each paragraph of text should go
in between an opening <p> and a closing </p> tag
.
Line Break Tag :
Whenever you use the <br /> element, anything
following it starts from the next line. This tag is an
example of an empty element, where you do not need
opening and closing tags, as there is nothing to go in
between them.
The <br /> tag has a space between the
characters br and the forward slash. If you omit this
space, older browsers will have trouble rendering the line
break, while if you miss the forward slash character and
just use <br> it is not valid in XHTML
.
Centering content :
You can use <center> tag to put any content in the center of
the page or any table cell.
Example
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
.
Horizontal Line :
Horizontal lines are used to visually break up sections of
a document. The <hr> tag creates a line from the current
position in the document to the right margin and breaks
the line accordingly.
Preserve Formatting :
Sometimes you want your text to follow the exact format
of how it is written in the HTML document. In those
cases, you can use the preformatted tag <pre>.
Example
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText )
{ alert (strText)
} </pre>
</body> </html>
Nonbresking Spaces :
Suppose you want to use the phrase "12 Angry
Men." Here you would not want a browser to split
the "12, Angry" and "Men" across two lines:
An example of this technique appears in the movie "12
Angry Men."In cases where you do not want the client
browser to break text, you should use a nonbreaking
space entity &nbsp; instead of a normal space. For
example, when coding the "12 Angry Men" in a
paragraph, you should use something similar to the
following code:
Example
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie
"12&nbsp;Angry&nbsp;Men."</p>
</body> </html>
Meta Tag :
Metadata is data (information) about data.
The <meta> tag provides metadata about the HTML
document. Metadata will not be displayed on the page,
but will be machine parsable.
Meta elements are typically used to specify page
description, keywords, author of the document, last
modified, and other metadata.
The metadata can be used by browsers (how to display
content or reload page), search engines (keywords), or
other web services.
Browser Support
Element Chrome Mozilla Uc Opera others
<meta> Yes Yes Yes Yes Yes

Tips and Notes


Note: <meta> tags always go inside the <head> element.
Note: Metadata is always passed as name/value pairs.
Note: The content attribute MUST be defined if the name or the http-equiv
attribute is defined. If none of these are defined, the content attribute
CANNOT be defined.
HTML5 introduced a method to let web designers take
control over the viewport, through the <meta> tag.
The viewport is the user's visible area of a web page. It
varies with the device, and will be smaller on a mobile
phone than on a computer screen.
You should include the following <meta> viewport
element in all your web pages:
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
Site Structure :
When confronted with a new and complex information
system, users build mental models. They use these
models to assess relations among topics and to guess
where to find things they havent seen before. The
success of the organization of your web site will be
determined largely by how well your sites information
architecture matches your users expectations. A logical,
consistently named site organization allows users to
make successful predictions about where to find things.
Consistent methods of organizing and displaying
information permit users to extend their knowledge from
familiar pages to unfamiliar ones. If you mislead users
with a structure that is neither logical nor predictable, or
constantly uses different or ambiguous terms to describe
site features, users will be frustrated by the difficulties of
getting around and understanding what you have to
offer. You dont want your users mental model of your
web site to look like figure 3.1.
MULTIMEDIA CONTENT
Multimedia content is the horn of abundance of online
content. It bonds writing with images, videos, audio and
slideshows in a useful and engaging way.
People are far more likely to engage with and share your
stories and posts if they contain images, graphics, audio
clips or video presentations. Were all aware of this. If
youre continually pushing endless strings of
dry text against a stark-white screen with maybe one,
unrelated, image thrown-in for good measure well your
reward will undoubtedly match your effort.
Aside from enjoying increased engagement and shares,
there are three very powerful reasons you should be
including multimedia in everything you produce online.
Multimedia Increases Time on Site: We live in times of
fast cars, fast internet speeds, audio books and people
with small attention spans. The internet has radically
changed the way we think and has dramatically reduced
our attention spans. Given this fact, writers, journalists
and bloggers have adapted their writing to compensate
for this shift in our thinking paradigm. No matter how
brilliant you think your piece is, if its too long and without
multimedia to aid in breaking-up the monotony, you
will experience an increased number of Diagonal
Readers and lower time spent on your page.
Video clips :
Video clips incorporated in a website are all the rage now.
Before the YouTube revolution, video clips had to be
downloaded before anyone could see them. With the
advances in technology, Internet speeds got a lot faster, which
allowed for live video streaming over the net, and YouTube-
like sites were born. Today, embedding a video clip in a web
page is more than easy, and video clips can be easily shared
via your blog, forum or even a small video commercial which
you can put on your online store - something, which would cost
you a fortune if you had to air it on the television.
Audio :
Audio is another thing, which was affected by the
technology advances. And while a video clip will require
much more bandwidth and server resources, audio files
are much faster to process from a servers point of view.
This helped for their distribution among website creators
much faster. Today, a website with a
musical background is something more than normal, and
on a lot of websites you can easily listen to an audio track,
which is uploaded on the web server with the help of a
simple player. This has also assisted many independent
musicians in promoting their music and has allowed even
for the creation of Internet music labels.
Images :
Images were the first type of multimedia to be ever used in
a web page. They quickly became an indispensable part
of the website design process. Due to the fact that images
were pretty small back then, and mostly in the GIF file
format, they used very little disk space and bandwidth and
were ideal to illustrate every article. This gave birth to the
first online news portals, which intended to replace the
regular newspapers, offering last minute news without the
need to purchase a separate newspaper.
Images in the websites also inspired the creation of image
galleries - websites, dedicated specifically to the display of
various pictures, painting or photographs. With the
introduction of the thumbnails, galleries and website
perfected themselves with the ability to offer a small
version of the image as a thumbnail, instead of the full
picture.
Images became also an important part of the layout of a
web page - images could now be used for buttons,
navigational menus and backgrounds. Today's images are
mostly raster graphics (GIF, JPG, PNG, TIFF), with
vector graphics not so widely used, mainly due
to browser incompatibility.
cascading style sheets
Advantages of Using CSS :
The biggest advantage of CSS is that it allows separating
content of an html document from the style and layout of
that document. It can thus make documents much easier to
maintain and give much better control over the layout of
your web pages, because content of an entire set of HTML
pages can be easily controlled using one or more style
sheets.
CSS Save lots of time -CSS gives lots of flexibility to set
the properties of an element. You can write CSS once; and
then the same code can be applied to the groups of HTML
elements, and can also be reused in multiple HTML pages.
Easy maintenance -CSS provide an easy means to
update document formatting and maintain consistency
across multiple documents. By making one change to the
website's CSS, elements in all the web pages will be
updated automatically.
Pages load faster -CSS enable multiple pages to share
formatting, and reduce complexity and repetition in the
structural content. It significantly reduces the file transfer
size, which results in a faster page loading.
Superior styles to HTML CSS has much wider
presentation capabilities than HTML, so you can give far
better look to your HTML pages in comparison to the HTML
presentational elements and attributes.
Multiple Device Compatibility CSS can also allow the
HTML document to be optimized for more than one type of
device or media. Using CSS the same HTML document can be
presented in different viewing styles for different rendering
devices such as computer screen, cell phones, printer, etc.
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on
screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple
web pages all at once.
CSS can be added to HTML elements in 3 ways:
Inline - by using the style attribute in HTML elements
Internal - by using a <style> element in the <head> section
External - by using an external CSS file
The most common way to add CSS, is to keep the styles in
separate CSS files. However, here we will use inline and
internal styling, because this is easier to demonstrate, and
easier for you to try it yourself.
Inline CSS :
An inline CSS is used to apply a unique style to a single
HTML element.
An inline CSS uses the style attribute of an HTML element.
This example sets the text color of the <h1> element to
blue:
Example:
<h1 style="color:blue;">This is a Blue Heading</h1>
Internal CSS
An internal CSS is used to define a style for a single HTML
page.
An internal CSS is defined in the <head> section of an
HTML page, within a <style> element:
Example

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body></html>
External CSS:
An external style sheet is used to define the style for many
HTML pages.
With an external style sheet, you can change the look of
an entire web site, by changing one file!
To use an external style sheet, add a link to it in the <head>
section of the HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Fonts :
The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.
EXAMPLE :
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Property IE Firefox Chrome Safari Opera

align-content 11 28 21 9 12.1

align-items 11 20 21 9 12.1

align-self 11 20 21 9 12.1

all 27 37 24

@keyframes 10 16 43 9 30

animation 10 16 43 9 30

animation-name 10 16 43 9 30

animation-duration 10 16 43 9 30

animation-timing-function 10 16 43 9 30

animation-delay 10 16 43 9 30

animation-iteration-count 10 16 43 9 30

animation-direction 10 16 43 9 30

animation-play-state 10 16 43 9 30

backface-visibility 10 16 36 9 23

background-clip 9 4 4 3 10.5

background-origin 9 4 4 3 10.5

background-size 9 4 4 4.1 10

border-bottom-left-radius 9 4 5 5 10.5

border-bottom-right-radius 9 4 5 5 10.5

border-image 11 15 16 6 15

border-image-outset 11 15 15 6 15

border-image-repeat 11 15 15 6 15

border-image-slice 11 15 15 6 15

border-image-source 11 15 15 6 15

border-image-width 11 13 15 6 15

border-radius 9 4 5 5 10.5

border-top-left-radius 9 4 5 5 10.5

border-top-right-radius 9 4 5 5 10.5

box-decoration-break 32 22 6.1
HTML Layout Elements :
Websites often display content in multiple columns (like
a magazine or newspaper).
HTML5 offers new semantic elements that define the
different parts of a web page:
<header> - Defines a header for a document or a section
<nav> - Defines a container for navigation links
<section> - Defines a section in a document
<article> - Defines an independent self-contained article
<aside> - Defines content aside from the content (like a
sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details
<summary> - Defines a heading for the <details>
element
CSS SELECTORS
Selector Example Example description CSS
.class .intro Selects all elements with class="intro" 1
#id #firstname Selects the element with id="firstname" 1
* * Selects all elements 2
element p Selects all <p> elements 1
element,element div, p Selects all <div> elements and all <p> elements 1

element element div p Selects all <p> elements inside <div> elements 1

element>element div > p Selects all <p> elements where the parent is a <div> element 2

element+element div + p Selects all <p> elements that are placed immediately after <div> elements 2

element1~element2 p ~ ul Selects every <ul> element that are preceded by a <p> element 3

[attribute] [target] Selects all elements with a target attribute 2

[attribute=value] [target=_blank] Selects all elements with target="_blank" 2

[attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word "flower" 2

[attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting with "en" 2

[attribute^=value] a[href^="https"] Selects every <a> element whose href attribute value begins with "https" 3
Department of Computer Science & Engineering

You might also like