CSE 101 – Introduction to Computers I
Topic:
HTML Tags
HTML Lists
HTML Tables
HTML Links
1 09/02/20
HTML Basics
HTML stands for Hyper Text Markup Language.
An HTML file is a text file containing markup tags.
The markup tags tell the Web browser how to display the page.
An HTML file must have an ‘htm’ or ‘html’ file extension.
An HTML file can be created using a simple text editor – Notepad or
Notepad++.
2 09/02/20
HTML Example
Creating a simple web page
Start Notepad.
Write the following code and save the file as "firstpage.html"
<html>
<head>
<title> Title of page</title>
</head>
<body>
This is a very basic webpage.
</body>
</html>
Open the saved file with your favorite browser.
3 09/02/20
Example Explained
The first tag in your HTML document is <html>. This tag tells your
browser that this is the start of an HTML document.
The last tag in your document is </html>. This tag tells your browser
that this is the end of the HTML document.
The text between <head> and </head> tags is header information.
The text between <title> and </title> tags is the title of your
document. The title is displayed in your browser's caption.
The text between <body> and </body> tags is the text that will be
displayed in your browser.
4 09/02/20
HTML Tags
HTML tags are surrounded by the two characters < and >
The surrounding characters are called angle brackets.
HTML tags normally come in pairs like <title> and </title>
The first tag in a pair is the start tag, the second tag is the end tag.
HTML tags are not case sensitive, <title> means the same as <TITLE>
But it is recommended to use lower case letter.
5 09/02/20
HTML-Text Formatting
Create a page like below:
<html>
<head>
<title>Title of page</title>
</head>
<body>
We are learning <b>HTML</b> today.
</body>
</html>
<b> tag is used to bold the text.
6 09/02/20
HTML-Text Formatting
Create a page like below:
<html>
<head>
<title>Title of page</title>
</head>
<body>
We are learning <i>HTML</i> today.
</body>
</html>
<i> tag is used to make the text italic.
7 09/02/20
HTML-Text Formatting
Create a page like below:
<html>
<head>
<title>Title of page</title>
</head>
<body>
We are learning <u>HTML</u> today.
</body>
</html>
<u> tag is used to underline the text.
8 09/02/20
HTML-Text Formatting
Create a page like below:
<html>
<head>
<title>Title of page</title>
</head>
<body>
We are learning <q>HTML</q> today.
</body>
</html>
<q> tag is used to insert double quotation.
9 09/02/20
HTML Headings
<html>
<head>
<title>Title of page</title>
</head>
<body>
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
</body>
</html>
Headings are defined with the <h1> to <h6> tags.
<h1> defines the largest heading and <h6> defines the smallest heading.
HTML automatically adds an extra blank line after a heading.
10 09/02/20
HTML Headings
<html>
<body>
<h1 style="text-align:center;">This is a heading</h1>
<h2 style="text-align:left;">This is a heading</h2>
<h3 style="text-align:right;">This is a heading</h3>
</body>
</html>
style attribute is used to style HTML elements.
text-align: is used to locate the text in a proper place.
11 09/02/20
HTML Paragraphs
<html>
<head>
<title>Title of page</title>
</head>
<body>
<p> This is CSE 101 course. There are two midterms and one final
exam.</p>
<p>There are about 30 students in the class. </p>
</body>
</html>
Paragraphs are defined with the <p> tag.
HTML automatically adds an extra blank line after a paragraph.
12 09/02/20
HTML Line Breaks
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is CSE 101 course. There are two midterms and one final
exam. <br>
There are about 30 students in the class.
</body>
</html>
The <br> tag is used to start a new line, but not to start a new paragraph.
The <br> tag is an empty tag. It has no closing tag.
13 09/02/20
HTML Line Breaks
Create a page like below using html:
14 09/02/20
HTML Line Breaks
<html>
<body>
To <br>
The Vice Chancellor, <br>
Through <br>
Chairperson, Dept. of CSE <br>
East West University
</body>
</html>
15 09/02/20
Lists in HTML
HTML supports ordered, unordered and definition lists.
Unordered Lists: An unordered list is a list of items where items are
marked with bullets (typically small black circles).
<html>
<body>
<ul>
<li>CSE 101</li>
<li>CSE 102</li>
<li>MAT 101</li>
</ul>
</body>
</html>
16 09/02/20
Unordered Lists in HTML
<html>
<body>
<ul style=“list-style-type: disc">
• Coffee
<li>Coffee</li> • Tea
<li>Tea</li> • Milk
<li>Milk</li>
</ul>
</body>
</html>
17 09/02/20
Unordered Lists in HTML(Cont…)
<html>
<body>
<ul style=“list-style-type: square"> Coffee
<li>Coffee</li> Tea
<li>Tea</li> Milk
<li>Milk</li>
</ul>
</body>
</html>
18 09/02/20
Unordered Lists in HTML(Cont…)
<html>
<body>
<ul style=“list-style-type: circle"> o Coffee
<li>Coffee</li> o Tea
<li>Tea</li> o Milk
<li>Milk</li>
</ul>
</body>
</html>
19 09/02/20
Ordered Lists in HTML
Ordered Lists: An ordered list is also a list of items where items are
marked with numbers.
<html>
<body>
<ol>
<li>CSE 101</li>
<li>CSE 102</li>
<li>MAT 101</li>
</ol>
</html>
</body>
20 09/02/20
Ordered Lists in HTML(Cont…)
<html>
<body>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> 1. Coffee
2. Tea
</body> 3. Milk
</html>
21 09/02/20
Ordered Lists in HTML(Cont…)
<html>
<body>
<ol type=“a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> a. Coffee
b. Tea
</body> c. Milk
</html>
22 09/02/20
Ordered Lists in HTML(Cont…)
<html>
<body>
<ol type=“A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> A. Coffee
B. Tea
</body> C. Milk
</html>
23 09/02/20
Ordered Lists in HTML(Cont…)
<html>
<body>
<ol type=“i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> i. Coffee
ii. Tea
</body> iii. Milk
</html>
24 09/02/20
Ordered Lists in HTML(Cont…)
<html>
<body>
<ol type=“I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> I. Coffee
II. Tea
</body> III. Milk
</html>
25 09/02/20
Definition Lists in HTML
Definition Lists: A definition list is not a list of items. This is a list of
terms and explanation of the terms.
<html>
<body>
<dl>
<dt> CSE 101 </dt>
<dd> Computer Fundamental </dd>
<dt> CSE 102 </dt>
<dd> Programming </dd>
<dt> MAT 101 </dt>
<dd> Mathematics </dd>
</dl>
</html>
</body>
26 09/02/20
Lists in HTML
Create a page like Below:
27 09/02/20
HTML Table
<html>
<body>
<table>
<tr>
<th>ID</th>
<th>Marks</th>
</tr>
<tr>
<td>101</td>
<td>80</td> HTML table is defined with the <table> tag.
</tr> <tr> defines a table row.
<tr> <th> defines a table heading.
<td>102</td> By default, table headings are bold and centered.
<td> defines a table data.
<td>65</td>
</tr>
</table>
</body>
</html>
28 09/02/20
HTML Table
<html>
<style>
table, th, td { border: 1px solid black - Defines a border outline.
border: 1px solid black;
}
</style>
<body>
<table>
<tr>
<th>ID</th>
<th>Marks</th>
</tr>
<tr>
<td>101</td>
<td>80</td>
</tr>
<tr>
<td>102</td>
<td>65</td>
</tr>
29 09/02/20
</table></body></html>
HTML Table
<html>
<style>
table, th, td { border-collapse: collapse - Border collapses into one border.
border: 1px solid black;
border-collapse: collapse;
}
</style>
<body>
<table>
<tr>
<th>ID</th>
<th>Marks</th>
</tr>
<tr>
<td>101</td>
<td>80</td>
</tr>
<tr>
<td>102</td>
<td>65</td>
</tr>
</table>
30 </body></html> 09/02/20
HTML Images
<img> tag defines an image in an HTML page.
<html> <img> tag has no end tag.
<body> src defines the source of the image.
<h2> POPULAR PIZZAS</h2> width and height defines the size of the image.
align –location of image in the page.
<p>Cheese Pizza <img src="Cheese.png" width="80" height="80" align="center"></p>
<p>Supreme Pizza <img src="Supreme.png" width="80" height="80" align="center"><p>
<p>Pepperoni Pizza <img src="pepperoni.png" width="80" height="80" align="center"> </p>
</body>
</html>
31 09/02/20
HTML Images
<html>
<body>
<h2> POPULAR DRINKS</h2>
<p>Pepsi<img src=“Pepsi.png" width="80" height="80" align="center"></p>
<p>Mountain Dew<img src=“Dew.png" width="80" height="80" align="center"><p>
<p>Sprite<img src=“Sprite.png" width="80" height="80" align="center"></p>
</body>
</html>
32 09/02/20
HTML Links-Hyperlinks
In HTML, links are defined with the <a> tag.
The href attribute specifies the destination address of the link.
Click here is the visible part.
<html>
<body>
<a href="https://www.google.com"> Click Here </a>
</body>
</html>
33 09/02/20
HTML Links-Local Links
• Suppose you have created a webpage named Home.html for PIZZA HUT.
• The webpage contains two links: PIZZAS and DRINKS.
• First create a webpage for the link PIZZAS named Pizza.html as shown in Slide 37.
• Create another webpage for the link DRINKS named Drink.html as shown in Slide 38.
• All three html files should be in the same folder.
• Now write the following code in Home.html:
<html>
<body>
<h2 PIZZA HUT</h2>
<p> <a href="Pizza.html"> PIZZAS </a> </p>
<p> <a href="Drinks.html"> DRINKS </a> </p>
</body>
</html>
34 09/02/20
HTML Links-Local Links
<html>
<body>
<h2> POPULAR PIZZAS</h2>
<p>Cheese Pizza<img src="Cheese.png" width="80" height="80" align="center"></p>
<p>Supreme Pizza <img src="Supreme.png" width="80" height="80" align="center"><p>
<p>Pepperoni Pizza<img src="pepperoni.png" width="80" height="80" align="center"></p>
</body>
</html>
35 09/02/20
HTML Links-Local Links
<html>
<body>
<h2> POPULAR PIZZAS</h2>
<p>Cheese Pizza<img src="Cheese.png" width="80" height="80" align="center"></p>
<p>Supreme Pizza <img src="Supreme.png" width="80" height="80" align="center"><p>
<p>Pepperoni Pizza<img src="pepperoni.png" width="80" height="80" align="center"></p>
<p> <a href="Home.html"> Back to Home! </a> </p>
</body>
</html>
36 09/02/20
HTML Links-Local Links
<html>
<body>
<h2> POPULAR PIZZAS</h2>
<p>Pepsi<img src=“Pepsi.png" width="80" height="80" align="center"></p>
<p>Mountain Dew<img src=“Dew.png" width="80" height="80" align="center"><p>
<p>Sprite<img src=“Sprite.png" width="80" height="80" align="center"></p>
</body>
</html>
37 09/02/20
HTML Links-Local Links
<html>
<body>
<h2> POPULAR PIZZAS</h2>
<p>Pepsi<img src=“Pepsi.png" width="80" height="80" align="center"></p>
<p>Mountain Dew<img src=“Dew.png" width="80" height="80" align="center"><p>
<p>Sprite<img src=“Sprite.png" width="80" height="80" align="center"></p>
<p> <a href="Home.html"> Back to Home! </a> </p>
</body>
</html>
38 09/02/20
Thank You
39 09/02/20
