Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
8 views

Lecture 3.1 HTML - Part 1

Uploaded by

right2abhinavrs
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
8 views

Lecture 3.1 HTML - Part 1

Uploaded by

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

Introduction to HTML

HTML
 Stands for HyperText Markup Language
 Used to create a Web page
 Made up of tags that specify the structure of the document (this
section is a heading, this section is a paragraph, etc..)
 An excerpt from a sample HTML document:

<html>
<head>
<title>Bob’s Web page</title>
</head>
<body>
<h1>This is my first Web
page</h1></body>
</html> 2
HTML Tags
 Most HTML tags work in pairs. There is an
opening and a closing tag. For example:
<p>Some content here.</p>
 The <p>…</p> tag displays a paragraph

 <p> opens the paragraph (opening tag)

 </p> closes the paragraph (closing tag)

 “Some content here.” will be displayed on the

page
3
How does HTML work?
 HTML stands for HyperText Markup
Language. "Markup language" means that,
rather than using a programming language to
perform functions, HTML uses tags to identify
different types of content and the purposes
they each serve to the webpage.

4
Example
 Take a look at the article below.
 If I were to ask you to label the types of

content on the page, you'd probably do pretty


well:
 There's the header at the top,
 then a subheader below it,
 the body text,
 and some images at the bottom
 followed by a few more bits of text….

5
6
What is this?
 Markup languages work in the same way as you
just did when you labeled those content types,
except they use code to do it -- specifically, they
use HTML tags, also known as "elements." These
tags have pretty intuitive names: Header tags,
paragraph tags, image tags, and so on.
 Every web page is made up of a bunch of these

HTML tags denoting each type of content on the


page. Each type of content on the page is
"wrapped" in, i.e. surrounded by, HTML tags.
7
Self-closing Tags
 Some HTML tags are self closing. For
example:
<br />
 The <br /> tag will display a line break.

8
Required Tags
 All HTML documents should have html, head and
body tags, along with the DOCTYPE identifier.
 !DOCTYPE – Tells the browser which set of standards the
page adheres to
 <html>…</html> -- Surrounds the contents of the entire
page
 <head>…</head> -- Lists the identification information on
the page, such as the title
 <title>…</title> -- Gives the name of the page that
appears in the top of the browser window
 <body>…</body> -- Frames the content of the page to be
displayed in the browser
9
Tags.. What they mean?
 <!DOCTYPE HTML>: This special tag is
used to inform the browser that the document
type is HTML. This is how the browser knows
you’ll be writing an HTML5 document. You
will sometimes see other values for the
doctype, but HTML5 is the way to go these
days.

10
Language
 <html lang = “en”></html>: The <html> tag is the
foundation of
 the entire web page. The tag begins the page. Likewise,
</html> ends the page.
 For example, the page begins with <html> and ends with
</html>.
 The <html></html> combination indicates that everything in
the page is defined as HTML code.
 In HTML5, you’re expected to tell the browser which
language the page will be written in.
 Because we write in English, specifying with the code “en”

11
Meta tag
 <meta charset=“UTF-8”>: The meta tag is
used to provide a little more information to
the browser.
 This command gives a little more information

to the browser, telling it which character set


to use.
 English normally uses a character set called

(for obscure reasons) UTF-8.

12
Comments .. Not for execution

 <!-- -->: This tag indicates a comment, which


is ignored by the browser.
 However, a comment is used to describe

what’s going on in a particular part of the


code.

13
More on tags
 <title></title>: This tag is used to determine
the page’s title. The title usually contains
ordinary text.
 <body></body>: The page’s main content is

contained within these tags.


 <h1></h1>: H1 stands for heading level one.

 <p></p>: p stands for the paragraph tag.

14
Basic Elements
A text header, denoted using the <h1>, <h2>,
<h3>, <h4>, <h5>, <h6> tags.
 A paragraph, denoted using the <p> tag.

 A horizontal ruler, denoted using the <hr> tag.

 A link, denoted using the <a> (anchor) tag.

 A list, denoted using the <ul> (unordered list),

<ol> (ordered list) and <li> (list element) tags.


 An image, denoted using the <img> tag

 A divider, denoted using the <div> tag

 A text span, denoted using the <span> tag


15
Text headers and paragraphs
 six different types of text header you can
choose from, h1 being the topmost heading
with the largest text, and h6 being the most
inner heading with the smallest text.
 In general, you should have only one h1 tag

with a page, since it should be the primary


description of the HTML page.

16
Example of Header –Save this and execute
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>My First Page</h1>
<p>This is my first page.</p>
<h2>A secondary header.</h2>
<p>Some more text.</p>
</body> </html> 17
Horizontal rulers
 A horizontal ruler <hr> tag acts as a simple separator between page
sections.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>My First Page</h1>
<p>This is my first page.</p>
<hr/>
<p>This is the footer - all rights are reserved to me.</p>
</body>
</html>

18
Exercise

 Add an HTML <h1> tag with the text "I'm the


most important!"
 Add an HTML <h2> tag with the text "I'm less

important!"
 Add an HTML <h6> tag with the text "I'm the

least important!"

19
Text Formatting
 Text
formatting tags modify the text between the
opening tag and the closing tag
 Ex. <b>Hello</b> makes “Hello” bold

20
Links
 A link ("anchor") is a small span of text that will direct you
to a different section in the page, or to a different page. To
create a link, you will need to specify where you would
like the user to be directed to when the link is clicked by
specifying the href attribute.
 For example:
 <a href="https://www.google.com">A link to Google</a>
 To create a link to a different section in the same page,
you will need to use a hash sign along with the element ID
to where you would like the browser to jump to.
 For example:
 <a href="#faq">Click here to read the Frequently Asked
Questions</p> 21
Hyperlinks: <a> Tag (2)

 Link to an external Web site:


<a href="http://www.devbg.org"
target="_blank">BASD</a>
 Always use a full URL, including "http://", not
just "www.somesite.com"
 Using the target="_blank" attribute opens the
link in a new window
 Link to an e-mail address:
<a href="mailto:bugs@example.com?
subject=Bug+Report">
Please report bugs here (by e-mail only)</a>
22
Hyperlinks: <a> Tag
to a document called form.html on the
 Link

same server in the same directory:


<a href="form.html">Fill Our Form</a>
to a document called parent.html on the
 Link

same server in the parent directory:


<a href="../parent.html">Parent</a>
to a document called cat.html on the
 Link

same server in the subdirectory stuff:


<a href="stuff/cat.html">Catalog</a>

23
Element ID
 The element ID is denoted using the id
attribute:
<h3 id="faq">Frequently asked questions
</h3>
<p>The first rule about fight club is that you do
not talk about fight club.
</p>

24
Try this now…
<!DOCTYPE html>
<html> <head> </head> <body>
<h1>My First Page</h1>
<p>This is my first page.</p>
<a href="#faq">Click here to read the Frequently Asked
Questions</a>
<hr/> <h3 id="faq">Frequently asked questions</h3>
<p>The first rule about fight club is that you do not talk
about fight club.</p>
<p>However, if you do have questions, please e-mail me at
foo@bar.com</p>
</body> </html>
25
Lists
 HTML provides a way to create both an ordered list (with
elements counting up, 1, 2, 3...) and an unordered list
with bullets instead of numbers. Lists are a good way to
formalize a list of items and let the HTML styling do the
work for you.
 Ordered lists

 Here is an example of how to create an ordered list:

<p>Here is a list of ordered items:</p>


<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
26
Ordered Lists
 Ordered lists have a "type" attribute which
defines the numbering convention to use.
 To count using numbers, use type="1":

<p>Here is a list of ordered items:</p> <ol


type="1">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
27
Types:
 To count using uppercase letters, use
type="A"
 To count using lowercase letters, use

type="a“
 To count using uppercase roman numerals,

use type="I“
 To count using lowercase roman numerals,

use type="i"

28
Unordered lists
 Example to create an unordered list:
<p>Here is a list of unordered items:</p>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>

29
Style attributes
 To change the list style attributes, we can use
the CSS attribute called list-style-type.
 The available types are:
 disc
 circle
 square
 none
<p>Here is a list of unordered items:</p>
<ul style="list-style-type: disc">
<li>First item</li> <li>Second item</li> <li>Third
item</li> </ul>
30
Definition lists: <dl> tag
• Create definition lists using <dl>
– Pairs of text and associated definition; text is in <dt>
tag, definition in <dd> tag
<dl>
<dt>HTML</dt>
<dd>A markup language …</dd>
<dt>CSS</dt>
<dd>Language used to …</dd>
</dl>
– Renders without bullets
– Definition is indented

31
Lists – Example
<ol type="1">
<li>Apple</li>
lists.html
<li>Orange</li>
<li>Grapefruit</li>
</ol>

<ul type="disc">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>

<dl>
<dt>HTML</dt>
<dd>A markup lang…</dd>
</dl>

32
The <div> Tag
 <div> creates logical divisions within a page
 Block style element
 Used with CSS
 Example:

div-and-
span.html
<div style="font-size:24px; color:red">DIV
example</div>
<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>
33
The <span> Tag
 Inline
style element
 Useful for modifying a specific portion of text
 Don't create a separate area
(paragraph) in the document
 Very useful with CSS
span.html
<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>
<p>This one is another <span style="font-
size:32px; font-weight:bold">TEST</span>.</p>
34
Images
 Images in HTML are inline elements that can
be placed within a paragraph. To add an
image, use the <img> tag along with the src
attribute to specify the location of the image.
<img src="/static/img/code.jpg">
<img src="/static/img/code.jpg" width="100">
<img src="/static/img/code.jpg" style="width:
100px">

35
Image Types
 There are three main types of image formats:
 Lossless formats - useful for when you need
pixel-perfect graphics, for example for logos. The
most common format is PNG.
 Lossy formats - useful for displaying rich images.

The most common format used in this category is


JPG
 Animated formats - useful for showing short

animated images. The most common format is


GIF

36
Images: <img> tag
 Inserting an image with <img> tag:

<img src="/img/basd-logo.png">
 Image attributes:
src Location of image file (relative or absolute)
alt Substitute text for display (e.g. in text mode)
height Number of pixels of the height
width Number of pixels of the width
border Size of border, 0 for no border

 Example:
<img src="./php.png" alt="PHP Logo" />
37
HTML- Image Maps
 Image with clickable areas.
 <map> tag - define a client-side image-map.

 attribute of the <map> element 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.
Image Map- Example

Clicking on Larger Circle --


 The<area> coords attribute is used to
specify the coordinate of an area in an
image-map. It is used with shape attribute to
specify the size, shape, and placement of an
area. (0, 0) is the coordinate of the top-left
corner.

40
https://www.geeksforgeeks.org/html-area-
coords-attribute/?ref=gcse
 Syntax:
<area coords="value">Attribute Values:

 x1, y1, x2, y2: It specifies the coordinate of top-left (x1,


y1) and bottom-right (x2, y2) corner of the rectangle.
 x, y, radius: It specifies the center coordinates (x, y) and
radius (radius) of circle.
 x1, y1, x2, y2, .., xn, yn: It specifies the coordinates of
polygon. If the first and last coordinate pairs are not the
same, the browser will add the last coordinate pair to
close the polygon.
41
Basic HTML Template

<!DOCTYPE html>
<html>
<head>
<title>CMSC104 HTML Template</title>
</head>
<body>
This is just a basic HTML template to be used in CMSC104.
</body>
</html>

Example file: template.html 42


Basic HTML Template
Screenshot

43
Some Common HTML Tags
and Their Meanings
 <p>…</p> -- Creates a paragraph
 <br /> -- Adds a line break

 <hr /> -- Separates sections with a horizontal

rule
 <h1>…</h1> -- Displays a heading (h1-h6)

 <!--…--> -- Inserts a comment

 <ol>…</ol> -- Creates an ordered list

 <ul>…</ul> -- Creates an unordered list

 <img /> -- Inserts an image into the document

 <a>…</a> -- Inserts a link into the document 44


Paragraph Example
<p>
The exam next week will consist of T/F,
multiple choice, short answer and pseudocode
questions. You cannot use a calculator.
</p>
<p>
After the exam, we will learn JavaScript.
It should be fun!!
</p>
45
Paragraph Example
Screenshot

46
Line Break Example
<p>
Roses are Red. <br />
Violets are Blue. <br />
You should study for Exam 1. <br />
It will be good for you!
</p>

47
Line Break Example
Screenshot

48
Horizontal Rule Example
<p>
The exam next week will consist of T/F,
multiple choice, short answer and
pseudocode questions. You cannot use a
calculator.
</p>
<hr />
<p>
After the exam, we will learn JavaScript.
It should be fun!!
</p> 49
Horizontal Rule Example
Screenshot

50
Heading Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

51
Heading Example Screenshot

52
Comment Example
<!-- This is just some sample html
to illustrate the use of a
comment -->
<p>
Here is my paragraph.
</p>
<!-- Here is another comment -->

53
Heading Example Screenshot

54
Ordered List Example

<ol>
<li>Print Review Questions for Exam 1.</li>
<li>Work on Review Questions for Exam 1.</li>
</ol>

55
Ordered List Screenshot

56
Unordered List Example
<ul>
<li>country music</li>
<li>monday mornings</li>
<li>brussels sprouts</li>
</ul>

57
Unordered List Screenshot

58
Link Example

<a href="http://www.cs.umbc.edu/104/">CMSC104 Main page</a>

59
Link Screenshot

60
Image Example

<img src="linux-tux.png" alt="Tux the Penguin" />

61
Image Screenshot

62
Validating your web pages
 Introducing the concept of valid pages
 Using a doctype
 Setting the character set
 Meeting the W3C validator
 Fixing things when they go wrong
 Using HTML Tidy to clean your pages

63
Pointers for validation
 Alltags have endings.
 Tags can’t be overlapped

 Everything’s lowercase

 Attributes must be in quotes

 Layout must be separate from markup

(css – we shall see later)

64
Online validator
 You can validate your code using W3C
validator at http://validator.w3.org
 A validator is actually the front end of a piece

of software that checks pages for validity. It


looks at your web page’s doctype and sees
whether the page conforms to the rules of
that doctype. If not, it tells you what might
have gone wrong.

65
66
Methods
 Validate by URI - this option is used when a page is hosted
on a web server. Files stored on local computers can’t be
checked with this technique.
 Validate by file upload. This technique works fine with files
you haven’t posted to a web server. It works great for pages
you write on your computer but that you haven’t made
visible to the world. This is the most common type of
validation for beginners.
 Validate by direct input. The validator page has a text box
you can simply paste your code into. It works, but I usually
prefer to use the other methods because they’re easier.

67
Working Example
 Tosee an example page that uses all of the
tags we discussed today, visit

http://userpages.umbc.edu/~dblock/lecture6.html

68

You might also like