Scribd
Upload
13 views28 pages

HTML Basics for Internet Programming

The document provides an overview of an Internet Programming course taught by Pn. Haslina Hisham, covering HTML, CSS, and JavaScript. It outlines the evaluation components and their respective percentages, as well as the history and structure of HTML, including various tags and their uses. Additionally, it includes examples of HTML code for different formatting and layout techniques.

Uploaded by

Visual Production
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
13 views28 pages

HTML Basics for Internet Programming

The document provides an overview of an Internet Programming course taught by Pn. Haslina Hisham, covering HTML, CSS, and JavaScript. It outlines the evaluation components and their respective percentages, as well as the history and structure of HTML, including various tags and their uses. Additionally, it includes examples of HTML code for different formatting and layout techniques.

Uploaded by

Visual Production
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

 Who is your lecturer?

 Pn. Haslina Hisham


 Phone: 0195536393
 FB: Haslina Hisham
 What you learn?
 HTML
 CSS
 JavaScript
 What you need?
 Web editor – Notepad or Dreamweaver
 Browser – any browser such as IE, Google Chrome, Firefox
or Safari
 How you will be evaluated?
Component Percentage (%)
Quiz 10
Assignment 10
Mid Term Exam 20
Project 1 10
Project 2 20
Final Exam 30
Total 100
Version Year Remarks

HTML 1991

HTML+ 1993

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 1.0 2000

HTML5 2012 HTML5 is a new standard for HTML. More elements are
introduces such as <video> and <audio> elements for
media playback, <canvas> for 2D drawing, etc.
HTML5 Source:
[Link]
XHTML5 2013
 The HTML page structure as follows :

<html>

<head>
<title></title> How to save HTML
</head> document?

1. It is advisable to create your


<body> own folder .
</body> 2. Save the HTML document
with extension .html or .htm
</html>
 HTML tags are the programming code that states how your
page is constructed.
Tag Description
<html> The container for the entire document.
<head> A container for all head elements. Elements inside <head>
can include scripts, instruct the browser where to find style
sheets, provide meta information, and more.
<title> This tag describes the content of your page, appears in the
browser title bar, and used by many search engines
<body> The content of HTML page
To add description of codes and this description cannot be seen in the browser.

<html>

<head> To add description


<title>Internet Programming</title> of the codes and
</head> cannot be seen in
the browser.
<!-- This is HTML comment -->
<body>
This is HTML body
</body>

</html>
 Paragraphs
 Defined using <p> tag
 Example:
<html>
<head>
<title>Internet Programming</title>
</head>
<body>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</body>
</html>
** What the difference between line break(<BR>) and paragraph(<P>)

What is the
 Lines Break difference
 Defined using <br> tag between line
break <br>
 Example: and <p>
<html>
<head>
<title>Internet Programming</title>
</head>
<body>
This is a paragraph<br>
This is another paragraph
</body>
</html>
** What the difference between line break(<BR>) and paragraph(<P>)

 Header
 Defined with <h1> to <h6> tags
 Example:
<html>

<title>Internet Programming</title>

<body>

<h1>This is a header 1</h1>

<h2>This is a header 2</h2>

<h3>This is a header 3</h3>

<h4>This is a header 4</h4>

<h5>This is a header 5</h5>

<h6>This is a header 6</h6>

</body></html>
** What the difference between line break(<BR>) and paragraph(<P>)

 Text formatting
HTML tag Closing tag Description
<B> </B> BOLD TEXT
<I> </I> ITALICIZE TEXT
<CENTER> </CENTER> CENTER TEXT
<U> </U> UNDERLINES TEXT
<STRIKE> </STRIKE> STRIKE THROUGH TEXT
<SUP> </SUP> SUPERSCRIPTS TEXT
<SUB> </SUB> SUBSCRIPTS TEXT
** What the difference between line break(<BR>) and paragraph(<P>)

<html>
<title>Internet Programming</title>
<body>
<b>This is bold text</b><br>
<i>and this is italic text</i><br>
<center>Centering the text</center>
<u>Underlined text goes here</u><br>
<strike>Text Formatting</strike><br>
X<sup>2</sup><br>
X<sub>2</sub>
</body>
</html>
** What the difference between line break(<BR>) and paragraph(<P>)

 Text Alignment
 To arrange the text position, either center, right
and left
 Defined using align attribute
** What the difference between line break(<BR>) and paragraph(<P>)

<html>
<title>Internet Programming</title>
<body>
<p align = "center" >This is first paragraph</p>
<p>This is second paragraph</p>
<p align = "right" >This is third paragraph</p>
</body>
</html>
** What the difference between line break(<BR>) and paragraph(<P>)

<html>
<title>Internet Programming</title>
<body>
<div align = "center" >This is first paragraph</div>
<div>This is second paragraph</div>
<div align = "right" >This is third paragraph</div>
</body>
</html>
** What the difference between line break(<BR>) and paragraph(<P>)

<html>
<title>Internet Programming</title>
<body>
<h1 align = "center">This is header 1</h1>
</body>
</html>
•Value
** What the difference
number : 1between
to 7 line break(<BR>) and paragraph(<P>)

 Font size
 Defined using <font> tag with size attribute.
 Example:
<html>
<title>Internet Programming</title>
<body>
<font size = "1">Font size 1</font><br>
<font size = "2">Font size 2</font><br>
<font size = "3">Font size 3</font><br>
<font size = "4">Font size 4</font><br>
<font size = "5">Font size 5</font><br>
<font size = "6">Font size 6</font><br>
<font size = "7">Font size 7</font>
</body></html>
•Value
** What the difference
number : 1between
to 7 line break(<BR>) and paragraph(<P>)

 Font color
 Defined using <font> tag with color attribute.
 Example:

<html>
<title>Internet Programming</title>
<body>
<font color = "blue">Blue</font>
<br>
<font color = "#ff0000">Red</font>
</body></html>
•Value
** What the difference
number : 1between
to 7 line break(<BR>) and paragraph(<P>)

 Font type
 Defined using <font> tag with face attribute.
 Example:

<html>
<title>Internet Programming</title>
<body>
<font face ="Verdana">
Verdana font type
</font>
</body></html>
•Value
** What the difference
number : 1between
to 7 line break(<BR>) and paragraph(<P>)

<html>
<title>Internet Programming</title>
<body>
<font size = "4" color = "blue">
Font size is 4 and color is blue
</font>
</body></html>
•Value
** What the difference
number : 1between
to 7 line break(<BR>) and paragraph(<P>)

 Special Character
 To make special characters on your pages, use a special set of codes
called character entities, which you insert into your HTML code and
your browser will display as the corresponding symbols or characters
you want.
 You can create these characters by starting with an ampersand (&),
followed by a few letters, and ending with a semicolon (;)
 Example:
A<B  A&lt;B
Cafè  Caf&eacute;
•Value
** What the difference
number : 1between
to 7 line break(<BR>) and paragraph(<P>)
TSE2113 | Internet Programming | Class Exercise Chapter 1

1. Write an HTML codes that will produced the output below:

1
TSE2113 | Internet Programming | Class Exercise Chapter 1

2
TSE2113 | Internet Programming | Class Exercise Chapter 1

1. Write an HTML codes that will produced the output below:

1
TSE2113 | Internet Programming | Class Exercise Chapter 1

You might also like