HTML

HTML
DFT3013
Web Design Technologies

Create web page
using HTML
HTML
LO
Create web page using HTML – Apply BODY tag with Bgcolor,
– Describe HTML – Apply background with image and text
– Define Markup language color.
– Identify the structure of HTML – Identify Text formatting
document: – Identify Text attributes
– a. <html>
– Heading tags (H1–H6)
– b. <head>
– c. <title> – Marquee text with or without
background, Blink the text attributes
– d. <body>
– Explain the Head section and its – Divide section using <HR> line with
width, align, size
elements
– a. Meta tags – Create a simple HTML file.
– b. external link tags
What is HTML?
 HTML is the standard markup language for creating Web pages.

 HTML stands for Hyper Text Markup Language
 HTML describes the structure of Web pages using markup
 HTML elements are the building blocks of HTML pages
 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
of the page
Markup language
– Markup languages are designed for the processing, definition and

presentation of text. The language specifies code for formatting, both the
layout and style, within a text file. The code used to specify the formatting
are called tags. HTML is a an example of a widely known and used markup
language.
HTML Tags
– HTML tags are element names surrounded by angle brackets:

<tagname>content goes here...</tagname>
– HTML tags normally come in pairs like <p> and </p>
– The first tag in a pair is the start tag, the second tag is the end tag
– The end tag is written like the start tag, but with a forward slash inserted
before the tag name
– Tip: The start tag is also called the opening tag, and the end tag the closing
tag.
<html>
<body>
<h1>This is the Main Heading</h1>
<p>This text might be an introduction to the rest of
the page. And if the page is a long one it might
be split up into several sub-headings.<p>
<h2>This is a Sub-Heading</h2>
<p>Many long articles have sub-headings so to help
you follow the structure of what is being written.
There may even be sub-sub-headings (or lower-level
headings).</p>
<h2>Another Sub-Heading</h2>
<p>Here you can see another sub-heading.</p>
</body>
</html>
HTML Page Structure
Head section and its elements
– HTML lets you specify metadata - additional important information about a

document in a variety of ways. The META elements can be used to include
name/value pairs describing properties of the HTML document, such as
author, expiry date, a list of keywords, document author etc.
– The <meta> tag is used to provide such additional information. This tag is an
empty element and so does not have a closing tag but it carries information
within its attributes.
Adding Meta Tags to Your
Documents
– You can add metadata to your web pages by placing <meta> tags
inside the header of the document which is represented by
<head> and </head> tags. A meta tag can have following
attributes in addition to core attributes:
Example
– Define the character set used:

– <meta charset="UTF-8">
– Define a description of your web page:
– <meta name="description" content="Free Web tutorials">
– Define keywords for search engines:
– <meta name="keywords" content="HTML, CSS, XML, JavaScript">
– Define the author of a page:
– <meta name="author" content="John Doe">
– Refresh document every 30 seconds:
– <meta http-equiv="refresh" content="30">
External link tags
– The <link> tag defines a link between a document and an external resource.
– The <link> tag is used to link to external style sheets.
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
– Note: The <link> element is an empty element, it contains attributes only.
– Note: This element goes only in the head section, but it can appear any
number of times.
The <!DOCTYPE> Declaration
– The <!DOCTYPE> declaration represents the document type, and helps

browsers to display web pages correctly.
– It must only appear once, at the top of the page (before any HTML tags).
– The <!DOCTYPE> declaration is not case sensitive.
– The <!DOCTYPE> declaration for HTML is:
– <!DOCTYPE html>
HTML Versions
HTML Editors
–Step 1: Open Notepad (PC)

– Windows 8 or later:
– Open the Start Screen (the window symbol at the
bottom left on your screen). Type Notepad.
– Windows 7 or earlier:
– Open Start > Programs > Accessories > Notepad
– Step 2: Write Some HTML
– Write or copy some HTML into Notepad.
– <!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
– Step 3: Save the HTML Page
– Save the file on your computer. Select File > Save as in the Notepad menu.
– Name the file "index.htm" and set the encoding to UTF-8 (which is the
preferred encoding for HTML files).
You can use either .htm

or .html as file
extension. There is no
difference, it is up to
you.
– Step 4: View the HTML Page in Your Browser
– Open the saved HTML file in your favorite browser (double click on the file,
or right-click - and choose "Open with").
– The result will look much like this:
<body> tag
– The <body> tag defines the document's body.

– The <body> element contains all the contents of an
HTML document, such as text, hyperlinks, images,
tables, lists, etc.
HTML <body> bgcolor Attribute
– The bgcolor attribute specifies the background color of a document.

– The <body> bgcolor attribute is not supported in HTML5. Use CSS instead.
– CSS syntax: <body style="background-color:#E6E6FA">
– Syntax
– <body bgcolor="color_name|hex_number|rgb_number">
HTML <body> bgcolor Attribute
HTML Color Coding Methods
– There are following three different methods to set colors in your web page:
– Color names - You can specify color names directly like green, blue or red.
– Hex codes - A six-digit code representing the amount of red, green, and blue
that makes up the color.
– Color decimal or percentage values - This value is specified using the rgb( )
property.
https://www.tutorialspoint.com/html/html_colors.htm
Example
HTML <body> background
Attribute
– The background attribute specifies a background image for a document.

– The <body> background attribute is not supported in HTML5. Use CSS
instead.
– CSS syntax: <body style="background-image:url(bgimage.jpg)">
– Syntax
– <body background="URL">
HTML <body> background
Attribute
HTML Text Formatting
– HTML also defines special elements for defining text with a special meaning.
– HTML uses elements like <b> and <i> for formatting output, like bold or italic
text.
– Formatting elements were designed to display special types of text:
– <b> - Bold text
– <strong> - Important text
– <i> - Italic text
– <em> - Emphasized text
– <mark> - Marked text
– <small> - Small text
– <del> - Deleted text
– <ins> - Inserted text
– <sub> - Subscript text
– <sup> - Superscript text https://www.w3schools.com/html/html_formatting.asp
Heading tags (H1–H6)
– The <h1> to <h6> tags are used to define HTML headings.

– <h1> defines the most important heading. <h6> defines the least important
heading.
– Search engines use the headings to index the structure and content of your web
pages.
– Users skim your pages by its headings. It is important to use headings to show the
document structure.
– <h1> headings should be used for main headings, followed by <h2> headings,
then the less important <h3>, and so on.
– Note: Use HTML headings for headings only. Don't use headings to make text BIG
or bold.
Heading tags (H1–H6)
– <h1>This is heading 1</h1>

<h2>This is heading 2</h2>
Marquee text with or without
background, Blink the text
attributes
– Another non-standard tag that can be as irritating as the <blink> tag is
<marquee>. This can be used to create a moving text effect, similar to some
"matrix" type LED and illuminated signs.
– <marquee behavior="scroll" bgcolor="#00CCCC" loop="-1"
width="40%">Demonstration of a Marquee tag.</marquee>
– <blink> ... </blink>
– Place around text to make it flash.
<HR> line with width, align, size
– The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).
– The <hr> element is used to separate content (or define a change) in an
HTML page.
– In HTML5, the <hr> tag defines a thematic break.
– In HTML 4.01, the <hr> tag represents a horizontal rule.
– However, the <hr> tag may still be displayed as a horizontal rule in visual
browsers, but is now defined in semantic terms, rather than presentational
terms.
– All the layout attributes are removed in HTML5. Use CSS instead.
<HR> line with width, align, size
Hyperlinks
HTML
LO
Hyperlinks
– Use the <a> tag to link:
– a. within a page
– b. between pages
Hyperlinks
– Links are the defining feature of the web because they allow you to move
from one web page to another — enabling the very idea of browsing or
surfing.
– You will commonly come across the following types of links:
– Links from one website to another
– Links from one page to another on the same website
– Links from one part of a web page to another part of the same page
– Links that open in a new browser window
– Links that start up your email program and address a new email to someone
<a> tag
– A link is specified using HTML tag <a>. This tag is called anchor tag and
anything between the opening <a> tag and the closing </a> tag becomes part
of the link and a user can click that part to reach to the linked document.
Following is the simple syntax to use <a> tag.
– <a href="Document URL" ... attributes-list>Link Text</a>
Writing Links
Links are created using the <a> element. Users can click on anything
between the opening <a> tag and the closing </a> tag. You specify
which page you want to link to using the href attribute.
Linking to Other Sites
<p>List of polytechnics:
<ul>
<li><a href="http://www.psp.edu.my">
PSP</a></li>
<li><a href="http://www.puo.edu.my">
PUO</a></li>
<li><a href="http://www.ptss.edu.my ">
PTSS</a></li>
<li><a href="http://www.polimas.edu.my">
POLIMAS</a></li>
</ul>
</p> When you link to a different website, the
value of the href attribute will be the full
web address for the site, which is known
as an absolute URL.
Linking to Other Pages on the
Same Site
<p>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about-us.html">About</a></li>
<li><a href="movies.html">Movies</a></li>
<li><a href="contact.html">Contact</a></li>
</ul> When you are linking to other pages within the
same site, you do not need to specify the
</p>
domain name in the URL. You can use a
shorthand known as a relative URL.
Linking to a Specific Part of the
Same Page
<h1 id="top">Film-Making Terms</h1>
<a href="#arc_shot">Arc Shot</a><br />
<a href="#interlude">Interlude</a><br />

<a href="#prologue">Prologue</a><br /><br />
<h2 id="arc_shot">Arc Shot</h2>
<p>A shot in which the subject is photographed by an
encircling or moving camera</p>

<h2 id="interlude">Interlude</h2>
<p>A brief, intervening film scene or sequence, not
specifically tied to the plot, that appears

within a film</p>
<h2 id="prologue">Prologue</h2>
<p>A speech, preface, introduction, or brief scene
preceding the the main action or plot of a film;

contrast to epilogue</p>
<p><a href="#top">Top</a></p>
HTML Links - The target
Attribute
– The target attribute specifies where to open the linked document.

– The target attribute can have one of the following values:
– _blank - Opens the linked document in a new window or tab
– _self - Opens the linked document in the same window/tab as it was clicked
(this is default)
– _parent - Opens the linked document in the parent frame
– _top - Opens the linked document in the full body of the window
– framename - Opens the linked document in a named frame
Example
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click any of the following links</p>
<a href="www.psp.edu.my" target="_blank">Opens in
New</a> |
<a href="www.psp.edu.my" target="_self">Opens in Self</a> |
<a href="www.psp.edu.my" target="_parent">Opens in
Parent</a> |
<a href="www.psp.edu.my" target="_top">Opens in Body</a>
</body>
</html>
Example
HiDAAHM | JUN2017
Table
HTML
LO
Table
– Set table and cell colour.
– Cell padding, table border and cell spacing.
– Align text in cells (horizontally, vertically).
– Set column and row span.
Table
– A table represents information in a grid format.

– Examples of tables include financial reports, TV schedules, and sports results.
– Grids allow us to understand complex data by referencing information on two
axes.
– Each block in the grid is referred to as a table cell. In HTML a table is written
out row by row.
Example
Table Headings
The <th> element is used just like the <td>

element but its purpose is to represent the
heading for either a column or a row. (The th
stands for table heading.)
Browsers usually display the content of a <th>

element in bold and in the middle of the cell.
Tables Backgrounds
– You can set table background using one of the following two ways:
– bgcolor attribute - You can set background color for whole table or just for
one cell.
– background attribute - You can set background image for whole table or just
for one cell.
– You can also set border color also using bordercolor attribute.
Tables Backgrounds
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" bgcolor="yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>
Tables Backgrounds
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" background="/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell
3</td></tr>
</table>
</body>
</html>
Cellpadding and Cellspacing
Attributes
– There are two attribiutes called cellpadding and cellspacing which you will
use to adjust the white space in your table cells.
– The cellspacing attribute defines the width of the border, while cellpadding
represents the distance between cell borders and the content within a cell.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Colspan and Rowspan
Attributes
– You will use colspan attribute if you want to merge two or more columns into
a single column. Similar way you will use rowspan if you want to merge two
or more rows.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell
3</td></tr>
</table>
</body>
</html>
HTML <tr> align Attribute
– The align attribute specifies the horizontal alignment of the content in a table
row.
– The align attribute of <tr> is not supported in HTML5. Use CSS instead.
– CSS syntax: <tr style="text-align:right">
– Syntax
– <tr align="left|right|center|justify|char">
HTML <tr> align Attribute
Example
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr align="right">
<td>January</td>
<td>$100</td>
</tr>
</table>
Frames
HTML
HiDAYAHM | JUN2017
LO
– Frame and frameset.

– Frame and frameset properties.
– Technique of frame design.
– Creating frames.
Frame
– HTML frames are used to divide your browser window into multiple sections
where each section can load a separate HTML document.
– A collection of frames in the browser window is known as a frameset. The
window is divided into frames in a similar way the tables are organized: into
rows and columns.
Creating Frames
– To use frames on a page we use <frameset> tag instead of <body> tag.

– The <frameset> tag defines how to divide the window into frames.
– The rows attribute of <frameset> tag defines horizontal frames and cols
attribute defines vertical frames.
– Each frame is indicated by <frame> tag and it defines which HTML document
shall open into the frame.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
<frame name="top" src="/html/top_frame.htm" />
<frame name="main" src="/html/main_frame.htm" />
<frame name="bottom" src="/html/bottom_frame.htm" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols="25%,50%,25%">
<frame name="left" src="/html/top_frame.htm" />
<frame name="center" src="/html/main_frame.htm" />
<frame name="right" src="/html/bottom_frame.htm" />
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>
The <frameset>
Tag Attributes
The <frame>
Tag Attributes
Frame Design
<!DOCTYPE html>
<html>
<head>
<title>HTML Target Frames</title>
</head>
<frameset cols="200, *">
<frame src="/html/menu.htm" name="menu_page" />
<frame src="/html/main.htm" name="main_page" />
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>
Frame Design
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<html>
<body bgcolor="#4a7d49">
<body bgcolor="#b5dcb3">
<a href="https://www.google.com"
<h3>This is main page and content from any
target="main_page">Google</a>
link will be displayed here.</h3>
<br /><br />
<p>So now click any link and see the
<a href="https://www.microsoft.com"
result.</p>
target="main_page">Microsoft</a>
</body>
<br /><br />
</html>
<a href="https://news.bbc.co.uk"
target="main_page">BBC News</a>
</body>
</html>
target
Forms in a web page
HTML
HiDAYAHM | JUN2017
LO
– Forms tag and attributes.

– POST and GET method
– Form tools:
– a. text box
– b. radio button
– c. combo box
– d. text area
– e. submit button
– f. reset button
– g. file upload field
– h. hidden textfield
– i. password textfield
– Creating a complete web form
Forms tag and attributes
– The HTML <form> element defines a form that is used to collect user input:
<form action="Script URL" method="GET|POST">
form elements like input, textarea etc.
</form>
– An HTML form contains form elements.
– Form elements are different types of input elements, like text fields,
checkboxes, radio buttons, submit buttons, and more.
GET & POST Methods
– There are two ways the browser client can send information to the web server.
– The GET Method
– The POST Method
– Before the browser sends the information, it encodes it using a scheme called
URL encoding.
– In this scheme, name/value pairs are joined with equal signs and different pairs are
separated by the ampersand.
– name1=value1&name2=value2&name3=value3
– Spaces are removed and replaced with the + character and any other non-alphanumeric
characters are replaced with a hexadecimal values.
– After the information is encoded it is sent to the server.
The GET Method
– The GET method sends the encoded user information appended to the page request.
The page and the encoded information are separated by the ? character.
– http://www.test.com/index.htm?name1=value1&name2=value2
– The GET method produces a long string that appears in your server logs, in the
browser's Location: box.
– The GET method is restricted to send up to 1024 characters only.
– Never use GET method if you have password or other sensitive information to be
sent to the server.
– GET can't be used to send binary data, like images or word documents, to the
server.
– The data sent by GET method can be accessed using QUERY_STRING environment
variable.
– The PHP provides $_GET associative array to access all the sent information using
GET method.
Example
<?php
if( $_GET["name"] || $_GET["age"] ) {
echo "Welcome ". $_GET['name']. "<br />";
echo "You are ". $_GET['age']. " years old.";
exit();
}
?>
<html>
<body>
<form action = "<?php $_PHP_SELF ?>" method = "GET">
Name: <input type = "text" name = "name" />
Age: <input type = "text" name = "age" />
<input type = "submit" />
</form>
</body>
</html>
The POST Method
– The POST method transfers information via HTTP headers. The information is
encoded as described in case of GET method and put into a header called
QUERY_STRING.
– The POST method does not have any restriction on data size to be sent.
– The POST method can be used to send ASCII as well as binary data.
– The data sent by POST method goes through HTTP header so security depends on
HTTP protocol. By using Secure HTTP you can make sure that your information is
secure.
– The PHP provides $_POST associative array to access all the sent information using
POST method.
Example
<?php
if( $_POST["name"] || $_POST["age"] ) {
if (preg_match("/[^A-Za-z'-]/",$_POST['name'] )) {
die ("invalid name and name should be alpha");
}
echo "Welcome ". $_POST['name']. "<br />";
echo "You are ". $_POST['age']. " years old.";
exit();
}
?>
<html>
<body>
<form action = "<?php $_PHP_SELF ?>" method = "POST">
Name: <input type = "text" name = "name" />
Age: <input type = "text" name = "age" />
<input type = "submit" />
</form>
</body>
</html>
A form may have several form controls,
each gathering different information.
The server needs to know which piece
of inputted data corresponds with
which form element.
Form
– A web form is a collection of text boxes, lists, buttons, and other

clickable widgets that a web surfer uses to supply some sort of
information to a website.
– Forms are all over the Web—they allow you to sign up for email
accounts, review products, and make bank transactions.
– The simplest possible form is the single text box that adorns
search engines like Google.
Form tools:
https://www.tutorialspoint.com/html/html_forms.htm
https://www.w3schools.com/html/html_forms.asp
https://www.javatpoint.com/html-form
– a. text box
– b. radio button
– c. combo box
– d. text area
– e. submit button
– f. reset button
– g. file upload field
– h. hidden textfield
– i. password textfield
Example
<form action="#"> <td><input type="password" name="password"

<table> id="register_password" style="width:160px"/></td>
<tr> </tr>
<td class="tdLabel"><label for="register_name" <tr>
class="label">Enter name:</label></td> <td class="tdLabel"><label for="register_email"
<td><input type="text" name="name" value="" class="label">Enter Email:</label></td>
id="register_name" style="width:160px"/></td> <td
</tr> ><input type="email" name="email" value=""
<tr> id="register_email" style="width:160px"/></td>
<td class="tdLabel"><label for="register_password" </tr>
class="label">Enter password:</label></td>
Example
<tr> <td><select name="country" id="register_country"

<td class="tdLabel"><label for="register_gender" style="width:160px">
class="label">Enter Gender:</label></td> <option value="india">india</option>
<td> <option value="pakistan">pakistan</option>
<input type="radio" name="gender" <option value="africa">africa</option>
id="register_gendermale" value="male"/> <option value="china">china</option>
<label for="register_gendermale">male</label> <option value="other">other</option>
<input type="radio" name="gender" </select>
id="register_genderfemale" value="female"/> </td>
<label for="register_genderfemale">female</label> </tr>
</td> <tr>
</tr> <td colspan="2"><div align="right"><input
<tr> type="submit" id="register_0" value="register"/>
<td class="tdLabel"><label for="register_country" </div></td>
class="label">Select Country:</label></td> </tr>
</table>
</form>

HTML

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

HTML

Web Design Technologies

 HTML is the standard markup language for creating Web pages.

– Markup languages are designed for the processing, definition and

– HTML tags are element names surrounded by angle brackets:

– HTML lets you specify metadata - additional important information about a

– Define the character set used:

– The <!DOCTYPE> declaration represents the document type, and helps

–Step 1: Open Notepad (PC)

<h1>My First Heading</h1>

<p>My first paragraph.</p>

You can use either .htm

– The <body> tag defines the document's body.

– The bgcolor attribute specifies the background color of a document.

– The background attribute specifies a background image for a document.

– The <h1> to <h6> tags are used to define HTML headings.

– <h1>This is heading 1</h1>

<a href="#arc_shot">Arc Shot</a><br />

<a href="#interlude">Interlude</a><br />

<h2 id="arc_shot">Arc Shot</h2>

<p>A shot in which the subject is photographed by an

encircling or moving camera</p>

<p>A brief, intervening film scene or sequence, not

specifically tied to the plot, that appears

preceding the the main action or plot of a film;

– The target attribute specifies where to open the linked document.

– A table represents information in a grid format.

The <th> element is used just like the <td>

Browsers usually display the content of a <th>

– Frame and frameset.

– To use frames on a page we use <frameset> tag instead of <body> tag.

– Forms tag and attributes.

– A web form is a collection of text boxes, lists, buttons, and other

<form action="#"> <td><input type="password" name="password"

<tr> <td><select name="country" id="register_country"

You might also like