Scribd
Upload
7 views

Java Unit4

The document provides an overview of HTML, a markup language for creating web pages, detailing its structure, tags, and elements. It covers various aspects such as HTML headings, links, images, and styling with CSS, including how to save and view HTML files in a browser. Additionally, it explains the use of attributes, comments, and the importance of the <!DOCTYPE> declaration for proper web page rendering.

Uploaded by

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

Java Unit4

The document provides an overview of HTML, a markup language for creating web pages, detailing its structure, tags, and elements. It covers various aspects such as HTML headings, links, images, and styling with CSS, including how to save and view HTML files in a browser. Additionally, it explains the use of attributes, comments, and the importance of the <!DOCTYPE> declaration for proper web page rendering.

Uploaded by

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

UNIT-IV

HTML: use of commenting, headers, text styling, images, formatting text with ,
special characters, horizontal rules, line breaks, table, forms, image maps, tags,
tags, file formats including image formats.

What is HTML?
HTML is a markup language for describing web documents (web pages).

 HTML stands for Hyper Text Markup Language


 A markup language is a set of markup tags
 HTML documents are described by HTML tags
 Each HTML tag describes different document content

Example
<!DOCTYPE html>
.in
hi
<html>
at
<head>
ss

<title>Page Title</title>
</head>
pu

<body>
m

<h1>My First Heading</h1>


ca

<p>My first paragraph.</p>

</body>
</html>

 The <!DOCTYPE html> declaration defines this document to be HTML5


 The text between <html> and </html> describes an HTML document
 The text between <head> and </head> provides information about the
document
 The text between <title> and </title> provides a title for the document
 The text between <body> and </body> describes the visible page
content
 The text between <h1> and </h1> describes a heading
 The text between <p> and </p> describes a paragraph
HTML Tags
HTML tags are keywords (tag names) surrounded by angle brackets:

<tagname>content goes here...</tagname>


 HTML tags normally come in pairs like <p> and </p>
 The first tag in a pair is the start tag, the second tag is the end tag
 The end tag is written like the start tag, but with a forward
slash inserted before the tag name

The start tag is also called the opening tag, and the end tag the closing tag.

.in
hi
Web Browsers
at
ss

The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML
pu

documents and display them.


m

The browser does not display the HTML tags, but uses them to determine how
to display the document:
ca
HTML Page Structure .in
hi
at
ss

Below is a visualization of an HTML page structure:


pu

<html>
<head>
m

<title>Page title</title>
ca

</head>

<body>
<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>

</html>

Note: Only the content inside the <body> section (the white area above) is
displayed in a browser.

The <!DOCTYPE> Declaration


The <!DOCTYPE> declaration represents the document type, and helps the
browser to display a web page correctly.

It must only appear once, at the top of the page (before any HTML tags).

There are different document types. To display a web page correctly, the
browser must know both type and version.

The doctype declaration is not case sensitive. All cases are acceptable:

<!DOCTYPE html>

<!doctype HTML>

HTML Versions
Since the early days of the web, there have been many versions of HTML:

.in
Version Year hi
HTML 1991
at

HTML 2.0 1995


ss

HTML 3.2 1997


pu

HTML 4.01 1999


m
ca

XHTML 2000

HTML5 2014

Save the HTML Page


Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file "index.htm" and set the encoding to UTF-8 (which is the
preferred encoding for HTML files).
View the HTML Page in Your Browser
Open the saved HTML file in your favorite browser (double click on the file, or
right-click - and choose "Open with").

The result will look much like this:

.in
hi
at
ss
pu
m
ca

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important
heading:

Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

HTML Links
HTML links are defined with the <a> tag:

Example
<a href="http://www.w3schools.com">This is a link</a>

Empty HTML Elements .in


hi
at
HTML elements with no content are called empty elements.
ss

<br> is an empty element without a closing tag (the <br> tag defines a line
pu

break).
m

Empty elements can be "closed" in the opening tag like this: <br />.
ca

HTML5 does not require empty elements to be closed. But if you want stricter
validation, or if you need to make your document readable by XML parsers, you
must close all HTML elements properly.

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
.in
hi
<img src="w3schools.jpg" width="104" height="142">
at

The alt Attribute


ss
pu

The alt attribute specifies an alternative text to be used, when an image cannot
m

be displayed.
ca

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">

HTML Horizontal Rules


The <hr> tag defines a thematic break in an HTML page, and is most often
displayed as a horizontal rule.

The <hr> element is used to separate content (or define a change) in an HTML
page:
Example
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

HTML Display
You cannot be sure how HTML will be displayed.

Large or small screens, and resized windows will create different results.

With HTML, you cannot change the output by adding extra spaces or extra lines
in your HTML code.

.in
The browser will remove any extra spaces and extra lines when the page is
hi
displayed:
at

Example
ss
pu

<p>
m

This paragraph
contains a lot of lines
ca

in the source code,


but the browser
ignores it.
</p>

<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>

HTML Line Breaks


The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new
paragraph:

Example
<p>This is<br>a paragraph<br>with line breaks.</p>

The HTML <pre> Element


The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually


Courier), and it preserves both spaces and line breaks:

Example
<pre>
My Bonnie lies over the ocean.
.in
hi
My Bonnie lies over the sea.
at
ss

My Bonnie lies over the ocean.


pu

Oh, bring back my Bonnie to me.


m

</pre>
ca

HTML Background Color


The background-color property defines the background color for an HTML
element.

This example sets the background color for a page to powderblue:

Example
<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
HTML Text Color
The color property defines the text color for an HTML element:

Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

HTML Fonts
The font-family property defines the font to be used for an HTML element:

Example

.in
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
hi
HTML Text Size
at
ss

The font-size property defines the text size for an HTML element:
pu

Example
m
ca

<h1 style="font-size:300%;">This is a heading</h1>


<p style="font-size:160%;">This is a paragraph.</p>

HTML Text Alignment


The text-align property defines the horizontal text alignment for an HTML
element:

Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

HTML <b> and <strong> Elements


The HTML <b> element defines bold text, without any extra importance.

Example
<b>This text is bold</b>

The HTML <strong> element defines strong text, with added semantic
"strong" importance.

Example
<strong>This text is strong</strong>

HTML <small> Element


The HTML <small> element defines smaller text:

Example .in
hi
at
<h2>HTML <small>Small</small> Formatting</h2>
ss

HTML <q> for Short Quotations


pu
m

The HTML <q> element defines a short quotation.


ca

Browsers usually insert quotation marks around the <q> element.

Example
<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>

HTML Comment Tags


You can add comments to your HTML source by using the following syntax:

<!-- Write your comments here -->

Notice that there is an exclamation point (!) in the opening tag, but not in the
closing tag.
Note: Comments are not displayed by the browser, but they can help document
your HTML source code.

With comments you can place notifications and reminders in your HTML:

Example
<!-- This is a comment -->

<p>This is a paragraph.</p>

<!-- Remember to add more information here -->

<!DOCTYPE html>

<html>

<body>

<h2 style="background-color:red">
.in
hi
Background-color set by using red
at
ss

</h2>
pu

<h2 style="background-color:orange">
m

Background-color set by using orange


ca

</h2>

<h2 style="background-color:yellow">

Background-color set by using yellow

</h2>

<h2 style="background-color:blue;color:white">

Background-color set by using blue

</h2>

<h2 style="background-color:cyan">

Background-color set by using cyan

</h2>
</body>

</html>

Styling HTML with CSS


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
.in
hi
The most common way to add CSS, is to keep the styles in separate CSS files.
at
However, here we will use inline and internal styling, because this is easier to
demonstrate, and easier for you to try it yourself.
ss
pu

External CSS
m
ca

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:

Example
<!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>

An external style sheet can be written in any text editor. The file must not
contain any HTML code, and must be saved with a .css extension.

Here is how the "styles.css" looks:

body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {

.in
color: red;
}
hi
CSS Fonts
at
ss

The CSS color property defines the text color to be used.


pu

The CSS font-family property defines the font to be used.


m
ca

The CSS font-size property defines the text size to be used.

<!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>

CSS Border
The CSS border property defines a border around an HTML element:

Example
p {
border: 1px solid powderblue;
}

CSS Padding .in


hi
at

The CSS padding property defines a padding (space) between the text and the
ss

border:
pu

Example
m
ca

p {
border: 1px solid powderblue;
padding: 30px;
}
ca
m
pu
ss
at
hi
.in

You might also like