Web Programming
01 Introduction to HTML
Dr. Mostafa Elgendy
2
Agenda
❖ Introduction to HTML
❖ HTML tags
❖ Summary
Web Programming 1-Mar-23
3
Basic HTML
Web Programming 1-Mar-23
What is HTML? 4
❖ HTML stands for Hyper Text Markup Language
❖ HTML is the standard markup language for creating Web
pages
❖ HTML describes the structure of a Web page
Web Programming 1-Mar-23
What is HTML? 5
❖ HTML consists of a series of elements
❖ HTML elements tell the browser how to display the
content
❖ HTML elements label pieces of content such as "this is a
heading", "this is a paragraph", "this is a link", etc
Web Programming 1-Mar-23
6
Environment
Web Programming 1-Mar-23
What I need to learn HTML? 7
❖ Text Editor: Visual Studio Code, Atom.
❖ Browser: Google Chrome, Firefox.
Web Programming 1-Mar-23
8
Setting Up Environment
Web Programming 1-Mar-23
HTML Tags 9
❖ Each tag's name is called an element
❖ An HTML element is defined by a start tag, some
content, and an end tag:
❖ syntax: <element> content </element>
❖ example: <p>This is a paragraph</p>
Web Programming 1-Mar-23
Structure of HTML page 10
Web Programming 1-Mar-23
Structure of HTML page 11
❖ HTML is saved with extension .html
<!DOCTYPE html>
❖ Basic structure: tags that enclose <html>
<head>
content. information about the page
</head>
❖ Header describes the page <body>
page contents
</body>
❖ Body contains the page’s contents </html>
Web Programming 1-Mar-23
12
Page Title <title>
❖ Placed within the head of the page
❖ Displayed in web browser’s title mark and when
bookmarking the page
…
<head>
<title> HARRY POTTER AND THE DEATHLY HALLOWS - PART 2 </title>
</head>
… HTML
Web Programming 1-Mar-23
13
Paragraph <p>
❖ Placed within the body of the page
…
<body>
<p> Harry Potter and the Deathly Hallows, the last book in the series,
begins directly after the events of the sixth book. Voldemort has
completed his ascension to power and gains control of the Ministry of
Magic</p>
</body>
HTML
Harry Potter and the Deathly Hallows, the last book in the series, begins directly after the events of the
sixth book. Voldemort has completed his ascension to power and gains control of the Ministry of Magic
output
Web Programming 1-Mar-23
14
Comments <!-- … -- >
❖ Comments are useful for disabling sections of a page
❖ Comments cannot be nested and cannot contain a --
<!–- This tag is used to add useful information -->
<p>CS courses are <!-- NOT --> a lot of fun!</p>
HTML
CS courses are a lot of fun!
output
Web Programming 1-Mar-23
15
Headings <h1>, <h2>, … <h6>
❖ Represents the different heading elements
<h1> Harry Potter </h1>
<h2> Books </h2>
<h3> Harry Potter and the Philosopher’s Stone </h3>
HTML
Harry Potter
Books
Harry Potter and the Philosopher’s Stone
output
Web Programming 1-Mar-23
16
Horizontal rule <hr />
❖ Should be immediately closed with />
<p> First paragraph </p>
<hr />
<p> Second Paragraph </p>
HTML
First Paragraph
Second Paragraph
Web Programming 1-Mar-23
17
More HTML tags
❖ Some tags can contain additional information called
attributes
❖ syntax:
❖ <element attribute="value"> content </element>
❖ example: <a href="page2.html">Next page</a>
Web Programming 1-Mar-23
18
More HTML tags
❖ Some tags don't contain content; can be opened and closed in one tag
❖ syntax:
❖ <element attribute="value" attribute="value" />
❖ Examples:
❖ example: <hr />
❖ example: <img src=“Harry.jpg" alt="pic of Harry Potter" />
Web Programming 1-Mar-23
19
Nesting tags
❖ Tags must be correctly nested: a closing tag must match the most
recently opened tag
❖ The browser may render it correctly anyway, but it is invalid HTML
<p>
<a href=" deathlyHallows-book.html"> Harry Potter and
the Deathly Hallows Book </p>
<p>
This text also links to Harry Potter Book</a>
</p>
HTML
Web Programming 1-Mar-23
20
Line Break <br>
❖ br should be immediately closed with />
❖ br should not be used to separate paragraphs or used multiple times in a
row to create spacing
<p>One Ring to rule them all, One Ring to find them,
<br /> One Ring to bring them all and in the darkness
bind them.</p>
HTML
One Ring to rule them all, One Ring to find them,
One Ring to bring them all and in the darkness bind them
output
Web Programming 1-Mar-23
21
Links <a>
❖ The href attribute specifies the destination URL
❖ Links or anchors are inline elements, so they must be placed inside a
block element such as a p or h1
<p>
Search <a href="http://www.google.com/">Google</a>
now!
</p>
HTML
Search Google now!
output
Web Programming 1-Mar-23
22
More about anchors
❖ Types of URLs that can appear in anchors:
❖ Absolute: to another web site
❖ Relative: to another page on this web site
<p><a href=“deathlyHallows-book.html">
Harry Potter and the Deathly Hallows Book</a></p>
<p><a href=http://en.wikipedia.org >Wikipedia</a></p>
HTML
Harry Potter and the Deathly Hallows
Wikipedia
output
Web Programming 1-Mar-23
23
Formatting Elements
❖ Used to format the page:
❖ <b>: used to make the text in bold style.
❖ <i>: used to make the text in italic style.
<p><i>Harry Potter</i> and the <b>Deathly</b>
Hallows Book</p>
HTML
Harry Potter and the Deathly Hallows Book
output
Web Programming 1-Mar-23
24
Formatting Elements
❖ Used to format the page:
❖ <u>: used to make the text in underlined style.
❖ <mark>: used to mark the text.
<p><u>Harry Potter</u> and the <b>Deathly</b>
Hallows <mark>Book</mark></p>
HTML
Harry Potter and the Deathly Hallows Book
output
Web Programming 1-Mar-23
25
Formatting Elements
❖ Used to format the page:
❖ <sub>: used to make the text in subscripted style.
❖ <sup>: used to make the text in superscripted style.
<p>Harry <sub>Potter</sub> and the <b>Deathly</b>
Hallows <sup>Book</sup></p>
HTML
Harry Potter and the Deathly Hallows Book
output
Web Programming 1-Mar-23
26
Images <img>
❖ The src attribute specifies source of the image URL
❖ HTML also requires an alt attribute describing the image.
<img src="images/tobby.jpg" alt=“Tobby from Harry Potter" />
HTML
Web Programming 1-Mar-23
27
Images <img>
❖ If placed inside an anchor, the image will become a link
❖ The title attribute specifies an optional tooltip
<a href="http://harrypotter.net/">
<img src="images/dumbledore.jpg"
alt=“Dumbledore from Harry Potter"
title="Alas! Ear wax!"/> </a>
HTML
Web Programming 1-Mar-23
28
Unordered list: <ul>, <li>
❖ ul: represents a bulleted list of items (block)
❖ li: represents a single item within the list (block)
<ul>
<li>No shoes</li>
<li>No shirt</li>
<li>No problem!</li>
</ul>
HTML
• No shoes
• No shirt
• No problem!
output
Web Programming 1-Mar-23
29
Unordered list: <ul>, <li>
<ul>
<li>Harry Potter characters:
<ul>
<li>Harry Potter</li> • Harry Potter characters:
<li>Hermione</li> • Harry Potter
<li>Ron</li>
• Hermione
</ul>
</li> • Ron
<li>LOTR characters: • LOTR characters:
<ul> • Frodo
<li>Frodo</li> • Bilbo
<li>Bilbo</li> • Sam
<li>Sam</li> output
</ul>
</li>
</ul> HTML
Web Programming 1-Mar-23
30
Unordered list: <ul>, <li>
❖ If you leave a list open, subsequent contents will be indented
<ul>
<li>No shoes</li>
<li>No shirt</li>
<li>No problem!</li>
<p>Paragraph after list...</p> HTML
• No shoes
• No shirt
• No problem!
Paragraph after list... output
Web Programming 1-Mar-23
31
Ordered list: <ol>, <li>
❖ ol: represents a numbered list of items
<p>Apple business model:</p>
<ol>
<li>Beat Microsoft</li>
<li>Beat Google</li>
<li>Conquer the world!</li>
</ol> HTML
Apple business model:
1. Beat Microsoft
2. Beat Google
3. Conquer the world output
Web Programming 1-Mar-23
32
Tables <table>, <tr>, <td>
❖ table defines the overall table, tr each row, and td each
cell
❖ Useful for displaying large row/column data sets
❖ th cells in a row are considered headers
❖ a caption at the start of the table labels its meaning
Web Programming 1-Mar-23
33
Tables <table>, <tr>, <td>
<table >
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
Web Programming 1-Mar-23
34
Tables <table>, <tr>, <td>
<table >
<caption>Important data</caption>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
Web Programming 1-Mar-23
Questions
