Scribd
Upload
5 views26 pages

Futm-cpt112 - HTML 1

Uploaded by

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

Futm-cpt112 - HTML 1

Uploaded by

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

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 &nbsp; 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&nbsp;Angry&nbsp;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="https://www.w3schools.com/html/">Visit
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="smiley.gif" 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>[email protected]</td>
 </tr>
 <tr>
 <td>phptpoint blog</td>
 <td>[email protected]</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>[email protected]</td>
 </tr>
 <tr>
 <td>phptpoint blog</td>
 <td>[email protected]</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>

You might also like