FUTM-CPT112 & FUTM-SWE112:
(Front-End Web Development I)
HTML Part I
Learning Outcomes
On completion of the course, students should be
able to:
Define Markup language
Define Hyper Text Markup Language (HTML)
List
and use at least 20 HTML tags for creating
websites
HTML
What is Markup language?
A markup language is a programming language that is used to make
text more interactive and dynamic. It can turn a text into images,
tables, links etc.
What is Hyper Text Markup Language (HTML)?
It is the standard markup language for creating Web pages.
HTML documents contain HTML tags and plain text
HTML documents are also called web pages
It consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements are represented by tags
HTML tags label pieces of content such as heading, paragraph, table,
and so on
Browsers do not display the HTML tags, but use them to render the
content
What is HTML Tag?
HTML tags are element names surrounded by angle
brackets:
<tagname> content goes here...</tagname>
HTML tags normally come in pairs like <p> and </p>
Thefirst tag in a pair is the start tag, the second tag is
the end tag
Theend tag is written like the start tag, but with a
forward slash inserted before the tag name
The structure of an HTML element
The structure of an HTML element
The minimal structure of HTML
documents:
1. Identifies the document as written in HTML.
2. The head provides information about the
document.
3. A descriptive title is required.
4. The body contains the content that displays
in the browser.
HTML Element
The <!DOCTYPE html> declaration defines this document to
be HTML version 5
The <html> element is the root element of an HTML page
The <head> element contains meta information about
the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph
Heading Tags
Any document starts with a heading. You can use
different sizes for your headings.
HTML also has six levels of headings, which use the
elements <h1>, <h2>, <h3>, <h4>, <h5>, and
<h6>. While displaying any heading, browser adds one
line before and one line after that heading.
Heading Tags: Example:
<!DOCTYPE html>
<html>
<head> <title>Heading Example</title> </head>
<body>
<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>
</body>
</html>
Heading Tags
Save the above example with an .html extension using any text
editor (Notepad, Sublime Text), IDE (Adobe Dreamweaver, NetBeans),
or Web Development Software (Webflow, Google Web designer).
Open it in any browser (such as Internet Explorer, Google Chrome,
Mozilla Firefox, etc) of your choice to see the output. Repeat this
process for all subsequent examples. Below is the output of the code
using Notepad and IE.
Line Break Tag
Whenever you use the <br /> element, anything following it
starts from the next line. The <br /> tag has a space between the
characters br and the forward slash. Example
<!DOCTYPE html>
<html>
<head> <title>Line Break Example</title> </head>
<body>
<p>Hello<br />
You delivered your assignment on time. <br />
Thanks<br />
Mahnaz</p>
</body>
</html>
Paragraph Tag
The <p> tag offers a way to structure your text into different
paragraphs. Each paragraph of text should go in between an opening
<p> and a closing </p> tag as shown below in the example:
<!DOCTYPE html>
<html>
<head> <title>Paragraph Example</title> </head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
Centering Content
You can use <center> tag to put any content in the
center of the page or any table cell. Example
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body> <p>This text is not in the center.</p>
<center> <p>This text is in the center.</p>
</center>
</body>
Horizontal Lines
Horizontal lines are used to visually break-up sections of a document.
The <hr> tag creates a line from the current position in the document to
the right margin and breaks the line accordingly. For example, you may
want to give a line between two paragraphs as in the given example
below:
<!DOCTYPE html>
<html>
<head> <title>Horizontal Line Example</title> </head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
Nonbreaking Spaces
In cases, where you do not want the client browser to break text, you
should use a nonbreaking space entity instead of a normal space.
For example, when coding the "12 Angry Men" in a paragraph, you should
use something similar to the following code:
<!DOCTYPE html>
<html>
<head> <title>Nonbreaking Spaces Example</title> </head>
<body>
<p>An example of this technique appears in the movie
"12 Angry Men."</p>
</body>
</html>
HTML Links
HTML links are defined with the <a> tag: <a href="url">link
text</a>. The link's destination is specified in the href
attribute. Attributes are used to provide additional
information about HTML elements. Example:
<a href="[Link]
our HTML tutorial</a>
HTML image
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and
height are provided as attributes. Example:
<img src="[Link]" alt="Smiley face"
height="42" width="42">
HTML Lists
HTML lists are defined with the <ul> (unordered/bullet list) or the
<ol> (ordered/numbered list) tag, followed by <li> tags (list items):
Example: unordered/bullet list
<!DOCTYPE html>
<html>
<head> <title>HTML list Tag</title> </head>
<body>
<p >Following is a list of fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</body>
</html>
HTML Lists cont…
Example: ordered/numbered list
<!DOCTYPE html>
<html>
<head> <title>HTML list Tag</title> </head>
<body>
<p>Following is a list of vegetables</p>
<ol>
<li>Beetroot</li>
<li>Radish</li>
</ol>
</body>
</html>
HTML Comments
Comment is a piece of code which is ignored by any web
browser. It is a good practice to add comments into your
HTML code, especially in complex documents, to indicate
sections of a document, and any other notes to anyone
looking at the code. Comments help you and others
understand your code and increases code readability.
HTML comments are placed in between <!-- ... -->
tags. So, any content placed with-in <!-- ... --> tags will
be treated as comment and will be completely ignored by
the browser. In HTML there are three types of comments
those are described as follows:
HTML Comments cont…
Single comment
<!DOCTYPE html>
<html>
<head> <!-- Document Header Starts --> <title>This is
document title</title>
</head> <!-- Document Header Ends -->
<body>
<p>Document content goes here.....</p>
</body>
</html>
HTML Comments cont…
Multiline Comments
You can comment multiple lines by the special beginning tag <!--
and ending tag --> placed before the first line and end of the last
line as shown in the given example below. Example
<!DOCTYPE html>
<html>
<head> <title>Multiline Comments</title> </head>
<body>
<!--
This is a multiline comment and it can
span through as many as lines you like.
-->
<p>Document content goes here.....</p>
</body> </html>
HTML Tables
HTML Tables is used to preset data in rows and columns
format. A Table is the collection of rows and rows is the
collection of columns.
<tr> stands for table rows. To add a row in a table
<table row> tags are used. <td> or <th> is used to
put the column inside the row. Whereas <td> means
table data and <th> means table head. Syntax:
<table>
<tr>
<td>row1col1</td>
<td>row1col2</td>
</tr>
</table>
HTML Tables cont…
Example
<table border="1">
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tr>
<td>phptpoint</td>
<td>phptpoint@[Link]</td>
</tr>
<tr>
<td>phptpoint blog</td>
<td>blog@[Link]</td>
</tr>
</table>
How to merge table column
you want to merge 2 or more than 2 column (cell), use colspan
property of <td colspan="2″> or <th colspan=”2″>. Example
<table border="1">
<tr>
<th colspan="2"> User Details</th>
</tr>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tr>
<td>phptpoint</td>
<td>phptpoint@[Link]</td>
</tr>
<tr>
<td>phptpoint blog</td>
<td>blog@[Link]</td>
</tr> </table>
How to merge table rows
To merge table rows in HTML, you can use the `rowspan` attribute. Here's a
simple example:
<<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td rowspan="2">John</td>
<td>25</td>
</tr>
<tr>
<td>30</td>
</tr>
</table>
Nested Table
Nested table means how to use table inside a table. When you want to use a table inside
a table write the syntax of table in between your cell i.e either <td> or <th>. Example
<html>
<body>
<table border="1" bgcolor="gray" width="200" height="200">
<tr>
<th>
<table align="center" border="1" bgcolor="#F8F8F8" width="100" height="100">
<tr>
<th>Inner Table</th>
</tr>
</table>
</th>
</tr>
</table>
</body>
</html>
