@Html

Hyper Text Markup Language (HTML)

2
HTML Intro…
 HTML, an abbreviation of Hyper
Text Markup Language, was first
proposed by Tim Berners-Lee of
CERN in late 1991.
 Hypertext is text, displayed on a
computer, with references
(hyperlinks) to other text.
 A markup language is a set of
annotations to text that describe
how something is to be structured.

3
Basics of HTML
 HTML is not a programming
language, it is a markup language.
 A markup language is a set of
markup tags.
 It uses markup tags to describe web
pages.
 HTML documents are text files made
up of HTML elements or tags.

4
Basics of HTML continued...
 An HTML file must have an .htm or
.html file extension.
 An HTML file can be created using a
simple text editor (e.g. Notepad or
vi editor).
 HTML documents are also called web
pages.

5
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.

6
HTML Tags continued....
 Start and end tags are also called
opening tags and closing tags.
 Some HTML tags have no ending,
e.g. <hr />, <br />, <img /> etc.
 The text between the start and end
tags is the element content.
 HTML tags are not case sensitive,
<b> means the same as <B>.

7
A bit about web browsers
 The purpose of a web browser (like
Internet Explorer or Mozilla 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.

8
HTML Example
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
 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.

9
Common HTML Tags
Tag Description
<html> Defines an HTML document
<head> Defines the document's head
<title> Defines the document's title under head
section
<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
<!--> Inserts a single line break

10
HTML Tags continued…
Tag Description
<a> Defines an anchor
<img/> Defines an image
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<table> Defines a table
<form> Defines a form
<frameset> Defines a set of frames
<frame/> Defines a sub-window (a frame)

11
HTML Styles
<html>
<body style="background-
color:PowderBlue;">
<h1>Look! Styles and colors</h1>
<p style="font-family:verdana;
color:red">
This text is in Verdana and red</p>
<p style="font-
family:times;color:green">
This text is in Times and green</p>
<p style="font-size:30px">This text
is 30 pixels high</p>
</body>
</html>

12
HTML QUIZ
 You can test your HTML skills with
this Quiz.
 The test contains 20 questions.
 Let’s start the QUIZ now…

13
HTML QUIZ:-Q1
1. What does HTML stand for?
a> Home Tool Markup Language
b> Hyper Text Markup Language
c> Hyperlinks and Text Markup Language
Answer
(b)

14
HTML QUIZ:-Q2
2. Who is making the Web
standards?
a> Mozilla
b> Microsoft
c> The World Wide Web Consortium
d> The World Wide Web Corporation
Answer
(c)

15
HTML QUIZ:-Q3
3. Choose the correct HTML tag for
the largest heading
a> <h6>
b> <h1>
c> <head>
d> <heading>
Answer
(b)

16
HTML QUIZ:-Q4
4. What is the correct HTML tag for
inserting a line break?
a> <br />
b> <lb />
c> <break />
Answer
(a)

17
HTML QUIZ:-Q5
5. What is the correct HTML for
adding a background color?
a> <body background="yellow">
b> <background>yellow</background>
c> <body style="background-color:yellow">
Answer
(c)

18
HTML QUIZ:-Q6
6. Choose the correct HTML tag to
make a text bold
a> <bold>
b> <b>
Answer
(b)

19
HTML QUIZ:-Q7
7. Choose the correct HTML tag to
make a text italic
a> <italic>
b> <i>
Answer
(b)

20
HTML QUIZ:-Q8
creating a hyperlink?
a> <a url="http://www.aot.com">AOT.com</a>
b> <a>http://www.aot.com</a>
c> <a href="http://www. aot.com"> AOT </a>
d> <a name="http://www. aot.com"> AOT.com </a>
Answer
(c)

21
HTML QUIZ:-Q9
9. How can you create an e-mail
link?
a] <mail>xxx@yyy</mail>
b] <mail href="xxx@yyy">
c] <a href="xxx@yyy">
d] <a href="mailto:xxx@yyy">
Answer
(d)

22
HTML QUIZ:-Q10
10. How can you open a link in a
new browser window?
a] <a href="url" new>
b] <a href="url" target="_blank">
c] <a href="url" target="new">
Answer
(b)

23
HTML QUIZ:-Q11
11. Which of these tags are all
<table> tags?
a] <table><tr><tt>
b]<thead><body><tr>
c]<table><tr><td>
d]<table><head><tfoot>
Answer
(c)

24
HTML QUIZ:-Q12
12. Choose the correct HTML to left-align the
content inside a tablecell
a] <td align="left">
b] <tdleft>
c] <td valign="left">
d] <td leftalign>
Answer
(a)

25
HTML QUIZ:-Q13
13. How can you make a list that
lists the items with numbers?
a] <list>
b] <ol>
c] <ul>
d] <dl>
Answer
(b)

26
HTML QUIZ:-Q14
14. How can you make a list that
lists the items with bullets?
a] <ol>
b] <ul>
c] <dl>
d] <list>
Answer
(b)

27
HTML QUIZ:-Q15
making a checkbox?
a] <input type="check" />
b] <input type="checkbox" />
c] <check>
d] <checkbox>
Answer
(b)

28
HTML QUIZ:-Q16
making a text input field?
a] <input type="text" />
b] <input type="textfield" />
c] <textfield>
d] <textinput type="text" />
Answer
(a)

29
HTML QUIZ:-Q17
making a drop-down list?
a] <input type="list" />
b] <select>
c] <list>
d] <input type="dropdown" />
Answer
(b)

30
HTML QUIZ:-Q18
making a text area?
a] <textarea>
b] <input type="textarea" />
c] <input type="textbox" />
Answer
(a)

31
HTML QUIZ:-Q19
inserting an image?
a] <img>image.gif</img>
b] <img src="image.gif" />
c] <image src="image.gif" />
d] <img href="image.gif />
Answer
(b)

32
HTML QUIZ:-Q20
inserting a background image?
a] <body background="background.gif">
b] <background img="background.gif">
c] <img src="background.gif" background />
Answer
(a)

33
End of Quiz…
HOPE YOU HAVE
ENJOYED THE SESSION… !!!

@Html

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie @Html

Ähnlich wie @Html (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

@Html