Scribd
Upload
71 views

HTML

HTML is a markup language used to define the structure and layout of web pages. It uses tags to describe paragraphs, headings, lists, links and other items that make up a web page. Images are defined using the <img> tag along with attributes like src, alt, height and width. Hyperlinks allow linking within pages and to external pages using the <a> tag and href attribute.

Uploaded by

anurag_garg_20
Copyright
© Attribution Non-Commercial (BY-NC)
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
71 views

HTML

HTML is a markup language used to define the structure and layout of web pages. It uses tags to describe paragraphs, headings, lists, links and other items that make up a web page. Images are defined using the <img> tag along with attributes like src, alt, height and width. Hyperlinks allow linking within pages and to external pages using the <a> tag and href attribute.

Uploaded by

anurag_garg_20
Copyright
© Attribution Non-Commercial (BY-NC)
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/ 52

HTML

 HTML is a language for describing web pages.


 HTML stands for Hyper Text Markup
Language
 HTML is not a programming language, it is a
markup language
 A markup language is a set of markup tags
 HTML uses markup tags to describe web
pages
HTML
 short for hypertext markup language
• Hyper is the opposite of linear. HTML does
not hold to the old linear pattern but allows
the person viewing the Web page to go
anywhere, any time
• Text is what you will use
• Mark up is what you will do
• Language it's a language, really -- but the
language is plain English
Writing HTML
 by hand
 using tools such as NotePad on Windows
 OS X users can use TextEdit on the Mac

 using an HTML assistant program


 easier than by hand
 but harder to understand HTML because the
program does all work
HTML documents
 must be text only
 when you save an HTML document, you
must save only the text, nothing else.
 HTML browsers can only read text
 They don't understand anything else
HTML TAGS
 HTML markup tags are usually called HTML tags
 HTML tags are keywords surrounded by angle
brackets like <html>
 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
 Start and end tags are also called opening tags and
closing tags
Nested Tags
 Like a tree, each element is contained inside a parent
element
 Each element may have any number of attributes

<html>...</html>

<head>...</head> <body>...</body> bgcolor="white"

<title>...</title> other stuff <p>...</p> <br> <table>...</table>

This is some text!


Basic Tags
 <hr> horizontal rule
 <br> new line
 <b>...</b> bold
 <i>...</i> italicize text in between
HTML Documents = Web Pages

 HTML documents describe web pages


 HTML documents contain HTML tags and plain
text
 HTML documents are also called web pages
 The purpose of a web browser (like Internet
Explorer or Firefox) is to read HTML documents
and display them as web pages. The browser does
not display the HTML tags, but uses the tags to
interpret the content of the page:
.HTM or .HTML File Extension?

 When you save an HTML file, you can use


either the .htm or the .html file extension.
There is no difference, it is entirely up to you.
Example
 <html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
Tags
 The text between <html> and </html>
describes the web page
 The text between <body> and </body> is the
visible page content
 The text between <h1> and </h1> is displayed
as a heading
 The text between <p> and </p> is displayed as
a paragraph
Creating and Publishing a Web
PAGE
 Create an HTML document
 Place the document in the world-accessible
directory (often public HTML or WWW) on a
system running an HTTP server.
 Access the webpage through
http://hostname/~username/filename
 Eg. http://www.apl.jhu.edu/~lmb/test.htm
 Validate the document
HTML DOCUMENT
TEMPLATE
MAIN HTML ELEMENTS
 DOCTYPE
 HTML
 HEAD
- TITLE element required
-Optional elements
-BASE
-META
-BGSOUND
-SCRIPT,NOSCRIPT
-STLYE
 BODY element
- HTML Attributes and attribute values
-BACKGROUND
-BGCOLOR
-TEXT
-LINK,VLINK,ALINK
 Elements inside BODY element
 bgcolor: This is the background color of the entire HTML
document, and may be specified either by the color name
directly or by the six-digit hex code.
 alink: The color of the links.
 vlink: The color of the visited links.
 topmargin: The margin from the top of the browser window.
 leftmargin: The margin from the left of the browser window.
BLOCK LEVEL ELEMENTS
 HEADINGS
 Types Of Headings:
 <H1>….</H1>
 <H2>….</H2>
 <H3>….</H3>
 <H4>….</H4>
 <H5>….</H5>
 <H6>….</H6>
 Headings are from H1 to H6
 Attributes are: LEFT(default), RIGHT,CENTER
P- The BASIC PARAGRAPH
 Paragraphs are defined with the <p> tag.
 <html>
 <body>

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

 </body>
 </html>
Formatting Tags
 Font(face,size,color)
 <font size=2 face="Helvetica" color=red>This
illustrates the attributes of the font tag.</font>
 <center>
 The <center> tag causes all the text within the tag to be
centered.
<center>This is centered text.</center>
<b>-Bold
<i>-Italic
<u>Underline
<html> This is a paragraph.
<body> This is a paragraph.
<p>This is a This is a paragraph.
paragraph.</p>
<p>This is a
paragraph.</p>
<p>This is a
paragraph.</p>
</body>
</html>
HTML LISTS
 The most common HTML An unordered list:
lists are ordered and  List item
unordered lists:  List item
 Ordered list
 List item
 Unordered list

An ordered list:
1.The first list item
2.The second list item
3.The third list item
HTML Unordered Lists
 An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
 The list items are marked with bullets (typically small black circles).

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
OUTPUT:
 Coffee

 Milk

 Attributes: type(disc,square,circle)
HTML Ordered Lists

 An ordered list starts with the <ol> tag. Each list item starts
with the <li> tag.
 The list items are marked with numbers.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
OUTPUT:
1.Coffee
2.Milk
HTML Definition Lists
 A definition list is a list of items, with a description of each item.
 The <dl> tag defines a definition list.

 The <dl> tag is used in conjunction with <dt> (defines the item in the list) and
<dd> (describes the item in the list)
 <dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Coffee
- black hot drink
Milk
- white cold drink
TEXT LEVEL ELEMENTS
 Physical character styles
 B,I,TT,U,SUB,SUP,SMALL,BIG,STRIKE,S,BLINK,F
ont
 Logical Character styles

 EM,STRONG,CODE,SAMP,KBD,DFN,VAR,CITE

 Hypertext
 A
 HREF,NAME,TARGET
Image Tag
 IMAGES
 IMG
 SRC,ALT,ALIGN,WIDTH,HEIGHT,HSPACE,VSPAC
E,BORDER,USEMAP,ISMAP
 MISC. TEXT LEVEL ELEMENTS
 BR- Explicit line break
PHYSICAL CHARACTER
STLYES EXAMPLE
OUTPUT
LOGICAL CHARACTER
EXample
OUTPUT
HYPERLINK
 A hyperlink (or link) is a word, group of words, or image that you can
click on to jump to a new document or a new section within the current
document.
 When you move the cursor over a link in a Web page, the arrow will turn
into a little hand.
 Links are specified in HTML using the <a> tag.
 The <a> tag can be used in two ways:
 To create a link to another document, by using the href attribute
 To create a bookmark inside a document, by using the name attribute
Types of Links

 Internal
 External: placing HTML links to another Web site on your Web page
that would be an example of external HTML links
 <a href="http://www.sitename.com"><b>Text for HTML links goes
here.</b></a> Anything extra you want to write goes here.

 Link within same page: For example if you are on the


bottom of a Web page and there is an HTML link that takes you back to
the top that is an example of a same page link.
Links

 The code for a same page link has two parts; the link and the
hook.
 The link is that part that tells the browser where to go when
the user clicks on it.
 The hook is what the link looks for and how it knows where
on the page to go.
 Hook is
 <A NAME="top">Title Of The Page</A>
 code for the link looks like:
 <A HREF="#top">Back To The Top</A>
Links
IMAGES
 In HTML, images are defined with the <img>
tag. 
 The <img> tag is empty, which means that it
contains attributes only, and 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.
Syntax
 <img src="url" alt="some_text"/>
 The URL points to the location where the image is stored. An
image named "boat.gif", located in the "images" directory on
"www.w3schools.com" has the URL:
http://www.w3schools.com/images/boat.gif.
 The browser displays the image where the <img> tag occurs in
the document. If you put an image tag between two
paragraphs, the browser shows the first paragraph, then the
image, and then the second paragraph.
HTML IMAGES- ALT
ATRRIBUTE
 The required alt attribute specifies an alternate
text for an image, if the image cannot be
displayed.
 The value of the alt attribute is an author-defined
text:
 <img src="boat.gif" alt="Big Boat" />
 The alt attribute provides alternative information
for an image if a user for some reason cannot
view it
HTML Images - Set Height and Width
of an Image

 The height and width attributes are used to specify the height
and width of an image.
 The attribute values are specified in pixels by default:
 <img src="pulpit.jpg" alt="Pulpit rock" width="304"
height="228" />
 HSPACE
 VSPACE
 BORDER
 The related HSPACE and VSPACE attributes create a horizontal space and a
vertical space, respectively, between the graphic and the surrounding text, with the
value specified in pixels.
Image tag
 <IMG SRC = "/gifs/wdj134.gif“
 WIDTH = 134 HEIGHT = 28
 BORDER = 0 ALT = "Back to the Web
Developer's Journal Main Page"
 ALIGN = "right" HSPACE = "6" VSPACE =
"6">
HTML IMAGES-MAP TAG
 The <map> tag is used to define a client-side image-
map. An image-map is an image with clickable areas.
 The name attribute is required in the map element.
This attribute is associated with the <img>'s usemap
attribute and creates a relationship between the
image and the map.
 The map element contains a number of area
elements, that defines the clickable areas in the
image map.
Map tag example
<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="planets.gif" width="145" height="126" alt="Planets"


usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>

</body>
</html>
OUTPUT
Click on the sun or on one of the
planets to watch it closer:
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).
 td stands for "table data," and holds the content of a
data cell.
 A <td> tag can contain text, links, images, lists,
forms, other tables, etc.
TABLE ATTRIBUTES
TABLE ROW
TABLE CELLS- TH AND TD

You might also like