Scribd
Upload
18 views11 pages

Lecture Notes-HTML Part 2

HTML

Uploaded by

seif
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views11 pages

Lecture Notes-HTML Part 2

HTML

Uploaded by

seif
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

Web Development for Business Applications

Lecture Notes: Fundamentals of HTML (2)

Learning Objectives:
• Understand Tags, Elements and Attributes
• Understand the basic Structure of HTML
• Text Elements
• Lists
• Article Tag
• Tables
• Embedded Content: image, Audio, video, links etc.
• Forms
• Meta Tag
• Layout
• Additional Tags

1. Tables:
Tables is used to arrange data in a row and column format, it is similar to show data in a
database format or excel sheet
<table> </table>: used to define the table
<th> </th>: define headings
<tr> </tr>: used to mention row
<td> </td>: represent column data in a table

1|Page
Another Example with Table and borders:

<body>
<table border=”1”>
<tr> <th> Heading 1 </th> <th> Heading 2 </th>
</tr>
<tr> <td> Col1</td> <td> <table border=”1”>
<tr> <th> Heading 1 </th> <th> Heading 2 </th>
</tr> <tr> <td> Col1</td> <td> Col2</td> </tr>
</table> </td>
</table>
</body>

Table with Header and Footer: Header and footer as they are used to specify some text before
row and after row like headings and subtotal
Example 1 With header and footer

<html>
<head>
</head>
<body>
<caption> Employee Salary </caption>
<table border="1">
<thead> <tr> <th> Month </th> <th> Salary </th></tr>
<tbody> <tr> <td> Jan </td> <td> $500 </td>
</tr> <tr> <td> May </td> <td> $500 </td></tr></tbody>
<tfoot> <tr> <td> 2018</td> <td> $1000</td> </tr>
</tfoot>
</table> </body></html>

2|Page
Example 2 with header and footer

<body>
<table border="1">
<caption>Table Caption</caption>
<thead><tr> <td> Heading 1 </td>
<td> Heading 2 </td>
<td> Heading 3 </td>
</tr> </thead>
<tbody>
<tr> <td> Col1</td>
</tr><tfoot><tr><td> Footer 1 </td>
<td> Footer 2 </td><td> Footer 3 </td>
</tr></table></body>

Table with Row span and column Span


Rowspan and colspan: is to add spacing to the cell if you want to merge two cells together then
this attribute will help use it in <td> <th> or <tr>
Example:

<body> <table border="2">


<tr> <th colspan="2"> Language and
Frameworks </th></tr>
<tr> <td> Python </td> <td>
Django</td></tr>
<tr> <td rowspan="2"> JavaScript </td>
<td> React.js</td></tr>
<tr> <td> Vue.js</td></tr>
<tr> <td>Ruby </td> <td> Ruby on Rails
</td></tr></table> </body>

3|Page
2. Articles
Articles is used to define one group of content which has headings, links and paragraph to make
up one independent content on the page
A blog page can have list of all the articles displayed in a small summary
<section > : section tag used to group articles into one section
<article>
<header>
<footer>
All these tags can be used inside the article tag
Example:
<body>
<section style="background-color: gray; padding:1px;">
<h1 style="color: white;"> Articles Today </h1>
<article style="background-color: lightblue; margin:3px;">
<header> <h2> Cybersecurity in Digital age </h2></header>
<p> Cybersecurity is the shield that guards our digital lives. In a world powered by technology, it's the
frontline defense against cyber threats. <br>It encompasses measures like strong passwords, firewalls, and
regular updates to safeguard our data and privacy.<br>
<br>From phishing scams to ransomware attacks, the digital landscape is rife with dangers. Cybersecurity is
our armor against these threats<br>ensuring the integrity and confidentiality of our information. It's a
constant race to stay one step ahead of cybercriminals, making it<br>
a critical concern for individuals and organizations alike. </p><footer> #Footer</footer>
</article>
<article style="background-color: lightgreen; margin:3px;">
<header><h2> Welocme To PSUT </h2> </header>
<p> This Spectaular University offer for stuednts the oppoutunity to choose the major want based on the
departments <br>they offer Engineering, computing science and business </p>
<footer>#Footer</footer></article> </section>
</body>
</html>

4|Page
</body>
Output:

3. Embedded Content:
Embedded tags are used to include external resources into html page, these resources could be in
your server or located at some other location
Main purpose of www. : connect all contents together with a link and that makes the web so
powerful
❖ Images
❖ Image with attributes
❖ Image with Article
❖ Audio
❖ Video
❖ Embed one page into another (iFrame)
❖ Link page
❖ Anchor link
❖ Map Tag
Embed Image:
<img> tag: used to embed image in the html page, the image could be in the same server or
different server location file
<img src=” location”> src: point to the location of image file

5|Page
Example: <html>
<head>
</head><body>
<h2> Flower Images </h2>
<img src="images.jpeg">
<img src="image34.jpeg"></body></html>
Output

Embed Image with attributes


<img> tag has the same attribute to resize the image control the position of the image
Alt attribute : specifies the alternative text of that image ( when image cannot be loaded)
Width and height attributes are used to resize the image
Example
<html>
<head>
</head><body>
<h2> Kinds of apples</h2>
<img src="apple1.jpeg" width="110" height="140" alt="Apple1">
<img src="apple2.jpg" width="110" height="140" alt="Apple2">
<img src="apple3.jpeg" width="110" height="140" alt="Apple3">
<img src="apple4.jpg" width="110" height="140" alt="Apple4">
</body></html>

6|Page
Output with correct image load:

Output with wrong image load

Embed Image in the Article:


<figure> element inside the article that let you define image properly Example:

<section><table><tr>

<td> <img src="camels-treasury-petra-jordan-ac93988c79b7.jpg" width="230" height="230"></td>

<td> </td><td> <img src="download.jpeg" width="230" height="230"> </td> </tr><tr><td> <article><h1>


Petra </h1> <p> Petra is located in the south of the <br>Hashemite Kingdom of Jordan<br>specifically in
the province of Ma’an<br> which was chosen as one of the seven<br> new wonders of the world in the
year<br> 2000 and 7 AD.</p></article></td> <td> </td>

<td> <article> <h1> Aqaba </h1> <p> The Gulf of Aqaba is the eastern part of the Red Sea<br>located to
the east of the Sinai Peninsula. <br> Egypt, Israel, Jordan and Saudi Arabia have coasts<br> on this Gulf. It
is called the Gulf of Aqaba <br>after the city of Aqaba on its northern coast</p></table>
</section></body>

7|Page
Output

Embed Audio
<audio> tag used to embed audio file in html page it include <source> tag to add path of audio
Controls: used to define the control buttons for the audio like : play , pause and close

<body>
<h2> Audio Example </h2>
<audio controls>
<source src="RZFWLXE-bell-hop-bell.mp3" type="audio/mpeg">
</audio>

Output:

8|Page
Embed Video
<video> elements are used to embed video file in the html page it include <source> tag to add
the path of the video and type , you can resize the video using width and height attributes

<h3> Video Example </h3>


<video width="320" height="320" controls>
<source src="Take a thrilling aerial ride through Jordan's iconic wonders with
this drone adventure!.mp4" type="video/mp4">
</video>

Output:

Embed Iframe:
<iframe> tag used to embed other html page inside the existing one

<body>
<iframe src="Page.html" height="300"></iframe>
</body>

9|Page
Output

Embed Link
<a> tag allows you to link other pages, images, audio or video file or any other url using the <a>
tag.
This is the most powerful and important tag in HTML that you will be using alot.
TAG: <a>
ELEMENT: <a href=” location” >
target – This attribute decides where the link should open
target = “_blank” – Will open the link in another window
Example:

<body>
<a href="https://portal.psut.edu.jo/"> Welcome to PSUT Portal </a><br>
<a href="PSUT_7.jpg"> Open PSUT </a></body>

Output

10 | P a g e
Embed Anchor
<a> tag allows you to link to the specific section of the page.
Anchors helps users to jump on the specific section of the same page.
id – This id attribute is first assigned to the tag to mark as a anchor.
Using <a> tag, we can provide link to that specific location of the page.

<body>
<h1> Anchor Example </h1>
<a href="#location">Go to location 1 </a>
<br>
<br><br><br><br> <br> <br> <br> <br>
<h1 id="location">Welcome To PSUT </h1>

Map Tag:
Used to define image map with clickable area contains number of area inside the map

<body>
<i> Map Example </i>
<img src="list-d14.jpg" usemap="#laptop">
<map id="laptop">
<area shape="rect" coords="780,249,875,324"
href="https://consumer.huawei.com/en/laptops/">
</map></body>

11 | P a g e

You might also like