Scribd
Upload
81 views

Creating Web Page Using HTML

HTML is a markup language used to structure and present content on the web. It uses tags to define headings, paragraphs, lists, links, and other elements. An HTML file is a plain text file that uses tags like <h1> and <p> to denote headings and paragraphs. It can have a .html or .htm file extension. The HTML source code can be viewed by clicking "View Source" in the browser.

Uploaded by

Tejas Patel
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
81 views

Creating Web Page Using HTML

HTML is a markup language used to structure and present content on the web. It uses tags to define headings, paragraphs, lists, links, and other elements. An HTML file is a plain text file that uses tags like <h1> and <p> to denote headings and paragraphs. It can have a .html or .htm file extension. The HTML source code can be viewed by clicking "View Source" in the browser.

Uploaded by

Tejas Patel
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 40

Creating web page using HTML

DR. TEJAS B PATEL


What is an html File?

 HTML is a format that tells a computer how to display a


web page. The documents themselves are plain text files
with special "tags" or codes that a web browser uses to
interpret and display information on your computer
screen.
1. ƒHTML stands for Hyper Text Markup Language ƒ
2. An HTML file is a text file containing small markup tags ƒ
3. The markup tags tell the Web browser how to display the
page ƒ
4. An HTML file must have an htm or html file extension
HTM or HTML Extension?

 When you save an HTML file, you can use either the
.htm or the .html extension.
 The .htm extension comes from the past when some of
the commonly used software only allowed three letter
extensions.
 It is perfectly safe to use either .html or .htm, but be
consistent. mypage.htm and mypage.html are treated
as different files by the browser.
How to View HTML Source

 A good way to learn HTML is to look at how other


people have coded their html pages.
 To find out, simply click on the View option in your
browsers toolbar and select Source or Page Source.
 This will open a window that shows you the actual
HTML of the page. Go ahead and view the source html
for this page.
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>
Logical vs. Physical Tags

 In HTML there are both logical tags and physical tags.


Logical tags are designed to describe (to the browser)
the enclosed text's meaning.
 An example of a logical tag is the tag <strong>
</strong>.
 By placing text in between these tags you are telling
the browser that the text has some greater
importance.
 By default all browsers make the text appear bold
when in between the <strong>and </strong> tags.
Logical vs. Physical Tags

 Physical tags on the other hand provide specific


instructions on how to display the text they enclose.
 Examples of physical tags include:
 <b>: Makes the text bold. ƒ
 <big>: Makes the text usually one size bigger
than what's around it. ƒ
 <i>: Makes text italic.
Logical vs. Physical Tags

 Physical tags were invented to add style to HTML


pages because style sheets were not around, though
the original intention of HTML was to not have
physical tags.
 Rather than use physical tags to style your HTML
pages, you should use style sheets.
HTML Elements

 This is an HTML element:


<b>This text is bold</b>
 The HTML element begins with a start tag: <b>
 The content of the HTML element is: This text is bold
 The HTML element ends with an end tag: </b>
 The purpose of the <b> tag is to define an HTML element that
should be displayed as bold.
Nested Tags

 You may have noticed in the example above, the <body>


tag also contains other tags, like the <b> tab. When you
enclose an element in with multiple tags, the last tag
opened should be the first tag closed.
 For example:
 <p><b><em>This is NOT the proper way to close
nested tags.</p></em></b>
 <p><b><em>This is the proper way to close nested
tags. </em></b></p>
Tag Attributes

 Tags can have attributes. Attributes can provide


additional information about the HTML elements on
your page.
 For instance, if we add the bgcolor attribute, we can
tell the browser that the background color of your
page should be blue, like this: <body
bgcolor="blue">.
Tag Attributes

 This tag defines an HTML table: <table>.


 With an added border attribute, you can tell the browser
that the table should have no borders: <table
border="0">.
 Attributes always come in name/value pairs like this:
name="value".
 Attributes are always added to the start tag of an HTML
element and the value is surrounded by quotes
 For a complete list of tags, visit W3C.org.
Basic HTML Tags
 The most important tags in HTML are tags that define
headings, paragraphs and line breaks.
Basic HTML Tags
 Headings
 Headings are defined with the <h1> to
<h6> tags. <h1> defines the largest
heading while <h6> defines the
smallest.
 HTML automatically adds an extra
blank line before and after a heading.
A useful heading attribute is align.
 <h5 align="left">I can align headings
</h5>
 <h5 align="center">This is a centered
heading </h5>
 <h5 align="right">This is a heading
aligned to the right </h5>
Basic HTML Tags
 Paragraphs
 Paragraphs are defined with the <p> tag. Think of a
paragraph as a block of text. You can use the align attribute
with a paragraph tag as well.
 <p align="left">This is a paragraph</p>
 <p align="center">this is another paragraph</p>

Important: You must indicate paragraphs with <p>


elements.
A browser ignores any indentations or blank lines in the source
text. Without <p> elements, the document becomes one large
paragraph. HTML automatically adds an extra blank line
before and after a paragraph.
Basic HTML Tags
 Line Breaks
 The <br> tag is used when you want to start a new line, but
don't want to start a new paragraph.
 The <br> tag forces a line break wherever you place it.
 It is similar to single spacing in a document.
 The <br> tag has no closing tag.
Basic HTML Tags
Basic HTML Tags
Basic HTML Tags
Other HTML Tags
Other HTML Tags
HTML Backgrounds
 Backgrounds
 The <body> tag has two attributes where you can specify
backgrounds. The background can be a color or an image.
 Bgcolor
 The bgcolor attribute specifies a background-color for an
HTML page. The value of this attribute can be a hexadecimal
number, an RGB value, or a color name:
 <body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
 The lines above all set the background-color to black.
HTML Backgrounds
 Background
 The background attribute can also specify a background-
image for an HTML page. The value of this attribute is the
URL of the image you want to use. If the image is smaller
than the browser window, the image will repeat itself until it
fills the entire browser window.
 <body background="clouds.gif">
 <bodybackground="http://profdevtrain.austincc.e
du/html/graphics/clouds.gif">
Note: The bgcolor, background, and the text attributes in the <body> tag
are deprecated in the latest versions of HTML (HTML 4 and XHTML). The
World Wide Web Consortium (W3C) has removed these attributes from its
recommendations. Style sheets (CSS) should be used instead (to define the
layout and display properties of HTML elements).
Try It Out!
HTML Colors
 Colors are defined using a
hexadecimal notation for
the combination of red,
green, and blue color
values (RGB). The lowest
value that can be given to
one light source is 0 (hex
#00). The highest value is
255 (hex #FF). This table
shows the result of
combining red, green, and
blue:
HTML Colors

 Color Names
 A collection of color names is supported by most
browsers. To view a table of color names that are
supported by most browsers visit this web page:
http://profdevtrain.austincc.edu/html/colo
r_names.htm
HTML Lists
 HTML provides a simple way to show unordered lists
(bullet lists) or ordered lists (numbered lists).
 Unordered Lists
 An unordered list is a list of items marked with bullets
(typically small black circles). An unordered list starts
with the <ul> tag. Each list item starts with the <li> tag.
HTML Lists
 Ordered Lists
 An ordered list is also a list of items. The list items
are marked with numbers. An ordered list starts
with the <ol> tag. Each list item starts with the <li>
tag.
Definition Lists
 Definition lists consist of two parts:
 a term and a description.
 To mark up a definition list, you need three
HTML elements;
 a container <dl>,
 a definition term <dt>, and
 a definition description <dd>.
HTML Images

 The Image Tag and the Src Attribute


 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.
HTML Images
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.
Tables
Tables
Tables
Tables
Tables

You might also like