Scribd
Upload
18 views

01-Introduction To HTML

Uploaded by

mohamednoamann54
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
18 views

01-Introduction To HTML

Uploaded by

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

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

You might also like