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> 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
Self-closing Tags
⚫ Some HTML tags are self closing. For
example:
<br />
⚫ The <br /> tag will display a line break.
4
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
5
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: [Link] 6
Basic HTML Template
Screenshot
7
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
8
⚫
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>
9
Paragraph Example
Screenshot
10
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>
11
Line Break Example
Screenshot
12
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>
13
Horizontal Rule Example
Screenshot
14
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>
15
Heading Example Screenshot
16
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 -->
17
Heading Example Screenshot
18
Ordered List Example
<ol>
<li>Print Review Questions for Exam 1.</li>
<li>Work on Review Questions for Exam 1.</li>
</ol>
19
Ordered List Screenshot
20
Unordered List Example
<ul>
<li>country music</li>
<li>monday mornings</li>
<li>brussels sprouts</li>
</ul>
21
Unordered List Screenshot
22
Hyperlinks
<a href="[Link] Main page</a>
A hyperlink is a clickable link in a web page that allows the user to
move from one web page to another, or to a specific section of
the same page
Parts of a Hyperlink
<a> → Anchor tag
href → Hypertext Reference (destination URL)
Link text → Clickable text shown to the user
23
Link Screenshot
24
Image Example
<img src="[Link]" alt="Tux the Penguin" />
25
Image Screenshot
26
HTML Elements
An HTML element is a complete unit of
HTML that consists of a start tag, content,
and an end tag.
It tells the browser what to display and how
to display it.
27
Examples of HTML Elements
28
Creating Lists
29
Creating Tables
⚫ HTML tables are used to display data in rows and
columns, such as marks lists, timetables, price lists, etc.
⚫ <table>
⚫ <tr>
⚫ <th>Heading 1</th>
⚫ <th>Heading 2</th>
⚫ </tr>
⚫ <tr>
⚫ <td>Data 1</td>
⚫ <td>Data 2</td>
⚫ </tr>
⚫ </table> 30
⚫ 1. <table>
⚫ Defines the table
⚫ Acts as the container for all table elements
⚫ 2. <tr> (Table Row)
⚫ Defines a row in the table
⚫ Each row can contain heading or data cells
⚫ 3. <th> (Table Heading)
⚫ Defines header cells
⚫ Text is bold and centered by default
⚫ 4. <td> (Table Data)
⚫ Defines normal data cells
⚫ Holds actual data
31
32
Creating Forms
⚫ An HTML form is a section of a web page
that contains input elements where users
can enter data and submit it to a server.
33
Simple Login Form
⚫ <!DOCTYPE html>
⚫ <html>
⚫ <head>
⚫ <title>Login Page</title>
⚫ </head>
⚫ <body>
⚫ <h2>Login Page</h2>
⚫ <form>
⚫ <label>Username:</label><br>
⚫ <input type="text" name="username"><br><br>
⚫ <label>Password:</label><br>
⚫ <input type="password" name="password"><br><br>
⚫ <input type="submit" value="Login">
⚫ </form>
⚫ </body>
⚫ </html> 34
35
36
37
38
39