Scribd
Upload
4 views75 pages

Presentation1 (2)

The document provides a comprehensive overview of HTML, covering essential tags, attributes, and formatting options. It explains the structure of HTML documents, the use of tags for headings, paragraphs, and links, as well as the creation of forms and tables. Additionally, it discusses best practices such as using lowercase tags and quoting attribute values.

Uploaded by

Deo sagar kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
4 views75 pages

Presentation1 (2)

The document provides a comprehensive overview of HTML, covering essential tags, attributes, and formatting options. It explains the structure of HTML documents, the use of tags for headings, paragraphs, and links, as well as the creation of forms and tables. Additionally, it discusses best practices such as using lowercase tags and quoting attribute values.

Uploaded by

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

<html>

• <head>
• <title>Title of page
• </title>
• </head>
• <body>This is my first homepage.
• <b>This text is bold</b>
• </body>
• </html>
HTML Tags
• HTML tags are used to mark-up HTML
elements
• HTML tags are surrounded by the two
characters < and >
• The surrounding characters are called angle
brackets
• HTML tags normally come in pairs like <b> and
</b>
• The first tag in a pair is the start tag, the second
tag is the end tag
• The text between the start and end tags is the
element content
• HTML tags are not case sensitive, <b> means
the same as <B>
• <html>
• <head>
• <title>Title of page
• </title>
• </head>
• <body>This is my first homepage.
• <b>This text is bold </b>
• </body>
• </html>
Why do We Use Lowercase Tags?
• We have just said that HTML tags are
not case sensitive: <B> means the
same as <b>. If you want to follow the
latest web standards, you should
always use lowercase tags. The
World Wide Web Consortium (W3C)
recommends lowercase tags in their
HTML 4 recommendation, and
XHTML (the next generation HTML)
demands lowercase tags.
Tag Attributes
• Tags can have attributes. Attributes provide
additional information to an HTML element.
• Attributes always come in name/value pairs like
this: name="value".
• Attributes are always specified in the start tag of
an HTML element.
• Attributes and attribute values are also case-
insensitive. However, the World Wide Web
Consortium (W3C) recommends lowercase
attributes/attribute values in their HTML 4
recommendation, and XHTML demands
lowercase attributes/attribute values.
Always Quote Attribute Values
• Attribute values should always be
enclosed in quotes. Double style
quotes are the most common, but
single style quotes are also
allowed.
• In some rare situations, like when
the attribute value itself contains
quotes, it is necessary to use single
quotes:
Headings
• Headings are defined with the <h1> to <h6>
tags. <h1> defines the largest heading. <h6>
defines the smallest heading.
• <h1>This is a heading</h1>
• <h2>This is a heading</h2>
• <h3>This is a heading</h3>
• <h4>This is a heading</h4>
• <h5>This is a heading</h5>
• <h6>This is a heading</h6>
• HTML automatically adds an extra blank line
before and after a heading.
Paragraphs

• Paragraphs are defined with the <p> tag.


• <p>This is a paragraph</p><p>This is
another paragraph</p>
Line Breaks
• The <br> tag is used when you
want to end a line, but don't want
to start a new paragraph.
• The <br> tag forces a line break
wherever you place it.
• The <br> tag is an empty tag. It
has no closing tag.
Comments in HTML
• The comment tag is used to insert
a comment in the HTML source
code.
• <!-- This is a comment -->
• Note that you need an
exclamation point after the
opening bracket, but not before
the closing bracket.
• <html>
• <body>
• <p>
• This paragraph
• contains a lot of lines
• in the source code,
• but the browser
• ignores it.
• </p>
• <p>
• </html>
Line breaks
• This example demonstrates the use of line
breaks in an HTML document.
• <html>
• <body>
• <p>
• To break<br>lines<br>in
a<br>paragraph,<br>use the br tag.
• </p>
• </body>
• </html>
Center aligned heading
• <html>
• <body>
• <h1 align="center">This
is heading 1</h1>
• </body>
• </html>
Horizontal rule
• <html>
• <body>
• <p>The hr tag defines a horizontal rule:</p>
• <hr>
• <p>This is a paragraph</p>
• <hr>
• <p>This is a paragraph</p>
• <hr>
• </body>
• </html>
Basic HTML Tags
• TagDescription<html>Defines an
HTML document
• <body>Defines the document's body
• <h1> to <h6>Defines header 1 to
header 6
• <p>Defines a paragraph
• <br>Inserts a single line break
• <hr>Defines a horizontal rule
• <!-->Defines a comment
Text formatting cond..
• <html>
• <body>
• <b>This text is bold</b>
• <br>
• <strong>
• This text is strong
• </strong>
• <br>
• <big>
• This text is big
• </big>
• <br>
• <em>
• This text is emphasized
• </em>
• <br>
• <i>
• This text is italic
• </i>
• <br>
• <small>
• This text is small
• </small>
• <br>
• This text contains
• <sub>
• subscript
• </sub>
• <br>
• This text contains
• <sup>
• superscript
• </sup>
• </body>
• </html>
Preformatted text
This example demonstrates how you can control the
line breaks and spaces with the pre tag. How ever you
are formatting in the same way it will be printed
• <html>
• <body>
• <pre>
• This is
• preformatted text.
• It preserves
• both spaces
• and line breaks.
• </pre>
• <p>The pre tag is good for displaying computer code:</p>
• <pre>
• for i = 1 to 10
• print i
• next i
• </pre>
• </body>
• </html>
Address
This example demonstrates how to write an
address in an HTML document.
• <html>
• <body>
• <address>
• Donald Duck<br>
• BOX 555<br>
• Disneyland<br>
• USA
• </address>
• </body>
• </html>
Abbreviations and acronyms
• <html>
• <body>
• <abbr title="United Nations">UN</abbr>
• <br>
• <acronym title="World
• Wide Web">WWW</acronym>
• <p>The title attribute is used to show the
spelled-out version when holding the
mouse pointer over the acronym or
abbreviation.</p>
• </body>
• </html>
Text direction
This example demonstrates
how to change the text direction.
• <html>
• <body>
• <p>If your browser supports bi-directional
override (bdo), the next line will be written
from the right to the left (rtl):
• </p>
• <bdo dir="rtl">
• Here is some text
• </bdo>
• </body>
• </html>
Deleted and inserted text
This example demonstrates how to mark a text
that is deleted or inserted to a document.
• <html>
• <body>
• <p>a dozen is
• <del>twenty</del>
• <ins>twelve</ins>
• pieces
• </p>
• <p>
• Most browsers will overstrike deleted text
and underline inserted text.
• </p>
• </body>
• </html>
The Anchor Tag and the Href Attribute
HTML uses the <a> (anchor) tag to create a link to another document.
• An anchor can point to any resource on the
Web: an HTML page, an image, a sound file, a
movie, etc.
• The syntax of creating an anchor:
• <a href="url">Text to be displayed</a>The <a>
tag is used to create an anchor to link from, the
href attribute is used to address the document to
link to, and the words between the open and
close of the anchor tag will be displayed as a
hyperlink.
• <a href="http://www.yahoo.com/">Visit yahoo!
</a>The line above will look like this in a
browser:
Frames
• With frames, you can display more than
one HTML document in the same browser
window. Each HTML document is called a
frame, and each frame is independent of
the others.
• The disadvantages of using frames are:
• The web developer must keep track of
more HTML documents
• It is difficult to print the entire page
The Frameset Tag
• The <frameset> tag defines how
to divide the window into frames
• Each frameset defines a set of
rows or columns
• The values of the rows/columns
indicate the amount of screen
area each row/column will occupy
The Frame Tag
• The <frame> tag defines what HTML document to put
into each frame
• In the example below we have a frameset with two
columns. The first column is set to 25% of the width of
the browser window. The second column is set to 75% of
the width of the browser window. The HTML document
"frame_a.htm" is put into the first column, and the HTML
document "frame_b.htm" is put into the second column:
• <frameset cols="25%,75%">
• <frame src="frame_a.htm">
• <frame src="frame_b.htm">
• </frameset>
Vertical frameset
This example demonstrates how to make a
vertical frameset with three different
documents.
• <html>
• <frameset cols="25%,50%,25%">
• <frame src="frame_a.htm">
• <frame src="frame_b.htm">
• <frame src="frame_c.htm">
• </frameset>
• </html>
Horizontal frameset
This example demonstrates how to make a
horizontal frameset with three different documents.
• <html>
• <frameset rows="25%,50%,25%">
• <frame src="frame_a.htm">
• <frame src="frame_b.htm">
• <frame src="frame_c.htm">
• </frameset>
• </html>
Tables
• Tables are defined with the <table> tag.
• A table is divided into rows (with the
<tr> tag), and
• each row is divided into data cells (with
the <td> tag).
• The letters td stands for "table data,"
which is the content of a data cell.
• A data cell can contain text, images,
lists, paragraphs, forms, horizontal
rules, tables, etc.
• <table border="1">
• <tr>
• <td>row 1, cell 1</td>
• <td>row 1, cell 2</td>
• </tr><tr><td>row 2, cell 1</td>
• <td>row 2, cell 2</td>
• </tr>
• </table>
• <table border="1">
• <tr>
• <td>Row 1, cell 1</td>
• <td>Row 1, cell 2</td>
• </tr>
• </table>
Headings in a Table
-are defined with the <th> tag.
• <table border="1">
• <tr>
• <th>Heading</th>
• <th>Another eading</th>
• </tr>
• <tr>
• <td>row 1, cell 1</td>
• <td>row 1, cell 2</td>
• </tr>
• <tr>
• <td>row 1, cell 1</td>
• <td>row 1, cell 2</td>
• </tr> </table>
Forms
• A form is an area that can contain
form elements.
• Form elements are elements that
allow the user to enter information
(like text fields, textarea fields, drop-
down menus, radio buttons,
checkboxes, etc.) in a form.
• A form is defined with the <form> tag.
• <form>
• <input>
• <input>
• </form>
Input

• The most used form tag is the <input> tag.


The type of input is specified with the type
attribute. The most commonly used input
types are explained below.
Text fields

• This example demonstrates how to create


text fields on an HTML page. A user can
write text in a text field.

• Example:
• <html>
• <body>
• <form action="">
• First name:
• <input type="text" name="firstname">
• <br>
• Last name:
• <input type="text" name="lastname">
• </form>
• </body>
• </html>
Username:
• <html>
• <body>
• <form action="">
• Username:
• <input type="text" name="user">
• <br>
Password:
• <html>
• <body>
• <input type="password" name="password">
• </form>
• <p>
• Note that when you type characters in a
password field, the browser displays asterisks
or bullets instead of the characters.
• </p>
• </body>
• </html>
• Text fields are used when you want the
user to type letters, numbers, etc. in a
form.
• <form>
• First name:
• <input type="text" name="firstname">
• <br>
• Last name:
• <input type="text" name="lastname">
• </form>
Radio Buttons
Radio Buttons are used when you
want the user to select one of a
limited number of choices.
<form>
<input type="radio" name="sex" value="male">
Male
<br>
<input type="radio" name="sex" value="female">
female
</form>
Checkboxes
Checkboxes are used when you want the user
to select one or more options of a limited
number of choices.
• <form>I have a bike:
• <input type="checkbox" name="vehicle"
value="Bike" />
• <br />I have a car:
• <input type="checkbox" name="vehicle"
value="Car" />
• <br />I have an airplane:
• <input type="checkbox" name="vehicle"
value="Airplane" />
• </form>
The Form's Action Attribute and the
Submit Button
• When the user clicks on the "Submit"
button, the content of the form is sent to
another file.

• The form's action attribute defines the


name of the file to send the content to.

• The file defined in the action attribute


usually does something with the received
• <form name="input" action=
• "html_form_action.asp“method="get">
• Username:
• <input type="text" name="user">
• <input type="submit" value="Submit">
• </form>
Cond..
• If you type some characters in the text
field above, and click the "Submit" button,
you will send your input to a page called
"html_form_action.asp". That page will
show you the received input.
Simple drop down box
• <html>
• <body>
• <form action="">
• <select name="cars">
• <option value="volvo">Volvo</option>
• <option value="saab">Saab</option>
• <option value="fiat">Fiat</option>
• <option value="audi">Audi</option>
• </select>
• </form>
• </body>
• </html>
Create a button
• <html>
• <body>
• <form action="">
• <input type="button" value="Hello !">
• </form>
• </body>
• </html>
Fieldset around data
• <html>
• <body>
• <fieldset>
• <legend>
• Health information:
• </legend>
• <form action="">
• Height <input type="text" size="3">
• Weight <input type="text" size="3">
• </form>
• </fieldset>
• <p>
• If there is no border around the input form, your browser
is too old.
• </p>
• </body>
Form with input fields and a submit button
• <html>
• <body>
• <form name="input" action="html_form_action.asp"
method="get">
• Type your first name:
• <input type="text" name="FirstName" value="Mickey"
size="20">
• <br>Type your last name:
• <input type="text" name="LastName" value="Mouse"
size="20">
• <br>
• <input type="submit" value="Submit">
• </form>
• <p>
• If you click the "Submit" button, you will send your input to
a new page called html_form_action.asp.
• </p>
• </body>
Form with checkboxes
• <html>
• <body>
• <form name="input"
action="html_form_action.asp"
method="get">
• I have a bike:
• <input type="checkbox" name="vehicle"
value="Bike" checked="checked" />
• <br />
• I have a car:
• <input type="checkbox" name="vehicle"
value="Car" />
• <br />
• I have an airplane:
• <input type="checkbox" name="vehicle"
value="Airplane" />
• <br /><br />
• <input type="submit" value="Submit" />
• </form>
• <p>
• If you click the "Submit" button, you send
your input to a new page called
html_form_action.asp.
• </p>
• </body>
• </html>
Lists
HTML supports a variety of lists.
• Unordered or Bulleted lists
• Ordered or Numbered lists
• Glossary or Definition Lists
• Nesting Lists
Unordered or Bulleted lists

• <ul> ... </ul> delimits list.


• <li> indicates list items. No closing </li> is
required.
• For Example:
• <ul><li> apples. <li>
bananas.</ul>
Ordered or Numbered lists

• <ul> ... </ul> delimits list.


• <li> indicates list items. No closing </li> is
required.
• For Example
• <ol><li> apples.<li> bananas.</ol>
Glossary or Definition Lists

• <dl> ... </dl> delimits list.


• Each list item has two parts: a term and a
definition.
• <dt> indicates the term in the list item, <dd>
indicates the definition. No closing </dt>, </dd>
is required.
• For Example:
• <dl><dt> apples <dd> A fruit usually green
and/or red.<dt> bananas <dd> A yellow
fruit.</dl>
Nesting Lists
• <ul>
• <li> Some fruit:
• <ul>
• <li> bananas.
• </ul>
• <li> Some more fruit
• <ul>
• <li> oranges.
• </ul>
• </ul>
Text Formatting with HTML

• Logical Character Formatting


• Physical Character formatting
• Special Characters
• Horizontal rules and Line breaks
• Fonts and Font Sizes
Logical Character Formatting

• Emphasis <em>
• Strong emphasis <strong>
• Code <code> -- fixed width ( Courier) font.
• Variable name <var>
• Definition <dfn>
• Citation <cite>
• Address <address>
Physical Character formatting
• Bold <b>
• Italics <i>
• Underline <u>
• Fixed width <tt>
• Strike Through <s>
• Bigger print <big>
• Smaller print <small>
• Subscript <sub>
• Superscript <sup>
Special Characters

• Character strings that represent special


symbols, e.g.
– &amp for &
– &gt for >
– &quot for double quote (``)
Fonts and Font Sizes
• The size attribute changes the size of the font.
Allowed values are 1 to 7.
Normal font size. Larger font size.
<font size=1>font size 1</font><br>
<font size=2>font size 2</font><br>
<font size=3>font size 3</font><br>
<font size=4>font size 4</font><br>
<font size=5>font size 5</font><br>
<font size=6>font size 6</font><br>
<font size=7>font size 7</font><br>
Send e-mail from a form cont..
• <html>
• <body>
• <form action="MAILTO:________@gmail.com"
method="post" enctype="text/plain">
• <h3>This form sends an e-mail to your
friend.</h3>
• Name:<br>
• <input type="text" name="name"
• value="yourname" size="20">
• <br>
• Mail:<br>
• <input type="text" name="mail"
• value="yourmail" size="20">
• <br>
• Comment:<br>
• <input type="text" name="comment"
• value="yourcomment" size="40">
• <br><br>
• <input type="submit" value="Send">
• <input type="reset" value="Reset">
• </form>
• </body>
• </html>
The Image Tag and the Src
Attribute
• In HTML, images are defined with the <img>
tag.
• The <img> tag is empty, which means that it
contains attributes only and it has no closing tag.
• To display an image on a page, you need to use
the src attribute.
• Src stands for "source". The value of the src
attribute is the URL of the image you want to
display on your page.
• The syntax of defining an image:
• <img src="url">
Insert images
• <html>
• <body>
• <p>
• An image:
• <img src=“file name . Extn”
• width="144" height="50">
• </p>
• <p>
• A moving image:
• <img src=“file name . Extn”
• width="48" height="48">
• </p>
• <p>
• Note that the syntax of inserting a moving image is no different from
that of a non-moving image.
• </p>
• </body>
• </html>
Background image
• <html>
• <body background="background.jpg">
• <h3>Look: A background image!</h3>
• <p>Both gif and jpg files can be used as
HTML backgrounds.</p>
• <p>If the image is smaller than the page,
the image will repeat itself.</p>
• </body>
• </html>
Adjust images to different sizes
• <html>
• <body>
• <p>
• <img src=“--------.gif"
• width="20" height="20">
• </p>
• <p>
• <img src=“--------.gif"
• width="45" height="45">
• </p>
• <p>
• You can make a picture larger or smaller changing the
values in the "height" and "width" attributes of the
• img tag.
• </p>
• </body>
• </html>
Good background and text color
• <html>
• <body bgcolor="#d0d0d0">
• <p>
• This is a paragraph. This is a paragraph. This is a
paragraph. This is a paragraph. This is a paragraph.
• </p>
• <p>
• This is another paragraph. This is another paragraph.
This is another paragraph. This is another paragraph.
• </p>
• </body>
• </html>
• <html>
• <body bgcolor="#ffffff" text=“yellow">
• <p>
• This is a paragraph. This is a paragraph. This is a
paragraph. This is a paragraph. This is a paragraph.
• </p>
• <p>
• This is another paragraph. This is another paragraph.
This is another paragraph. This is another paragraph.
• </p>
• </body>
• </html>
• (Summary)HTML Basic Document
• <html>
<head>
<title>Document name goes here</title>
</head>
• <body>
Visible text goes here
</body>
• </html>
• Heading Elements
• <h1>Largest Heading</h1>
• <h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
• <h6>Smallest Heading</h6>
• Text Elements
• <p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted</pre>
• Logical Styles
• <em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>
• Physical Styles
• <b>This text is bold</b>
<i>This text is italic</i>
• Links, Anchors, and Image Elements
• <a href="http://www.example.com/">This
is a Link</a>
<a href="http://www.example.com/"><img
src="URL" alt="Alternate Text"></a>
<a
href="mailto:webmaster@example.com">
Send e-mail</a>
• A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips
Section</a>
• Unordered list
• <ul>
<li>First item</li>
<li>Next item</li>
</ul>
• Ordered list
• <ol>
<li>First item</li>
<li>Next item</li>
</ol>
• Definition list
• <dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
• Forms
• <form action="http://www.example.com/test.asp"
method="post/get">
• <input type="text" name="lastname" value="Nixon"
size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">
<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
• <textarea name="Comment" rows=“20"
cols="20"></textarea>
/form>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy