Presentation is loading. Please wait.

Presentation is loading. Please wait.

BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ

Published byChloe Simpson Modified over 8 years ago

Similar presentations

Presentation on theme: "BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ"— Presentation transcript:

1 CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT
BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES

2 Outline Hyper Text Markup Language (HTML) Introduction to HTML
Effective HTML Page HTML Version Information HTML Basic Tags HTML Elements HTML Attributes HTML Character Reference HTML Text Formatting HTML Date & Time (HTML5) HTML Links (Hyperlinks) HTML Lists HTML Table FSKM UiTM Pahang  Page 2

3 Hyper Text Markup Language (HTML)
Introduction to HTML Hyper Text Markup Language Contain markup tags Tell web browser how to display the page It has either ".htm" or ".html" file extension Can be created using a Notepad :-0 Did you know? HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists, and so on to facilitate information sharing between researcher FSKM UiTM Pahang  Page 3

4 Hyper Text Markup Language (HTML)
Effective HTML Page Don‘t make users think Obvious & self-explanatory Don‘t squander users‘ patience Less action is required from users (user friendly) Manage to focus users‘ attention Images are more eye-catching than text Human eye is a non-linear, instantly recognize edges, patterns, motions Strive for feature exposure Visually appealing: inviting, informative Make use of effective writing No long texts, use effective simple text or images FSKM UiTM Pahang  Page 4

5 Hyper Text Markup Language (HTML)
Effective HTML Page Strive for simplicity K-I-S, users are looking for information, not enjoying the design Don‘t be afraid of white space Reduce page load, easy for users to look for information Communicate effectively with a visible language Organize, economize, communicate Conventions are our friends reduce the learning curve Test early, test often (TETO) provide crucial insights into significant problems and issues FSKM UiTM Pahang  Page 5

6 Hyper Text Markup Language (HTML)
HTML Version Information The document type declaration names the document type definition (DTD) in use for the document The DTDs vary in the elements they support The HTML 4.01 Strict DTD includes all elements and attributes that have not been deprecated or do not appear in frameset documents. For documents that use this DTD, use this document type declaration: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " FSKM UiTM Pahang  Page 6

7 Hyper Text Markup Language (HTML)
HTML Version Information The HTML 4.01 Transitional DTD includes everything in the strict DTD plus deprecated elements and attributes (most of which concern visual presentation). For documents that use this DTD, use this document type declaration: The HTML 4.01 Frameset DTD includes everything in the transitional DTD plus frames as well. For documents that use this DTD, use this document type declaration: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " FSKM UiTM Pahang  Page 7

8 Hyper Text Markup Language (HTML)
HTML Tags FSKM UiTM Pahang  Page 8

9 Hyper Text Markup Language (HTML)
HTML Tags Markup tags should be in: Lowercase OR Uppercase HTML tags are not case sensitive BUT for good practice, please avoid mix up the tags with lowercase and uppercase <html> <head> <title></title> </head> <body> </body> </html> <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> </BODY> </HTML> <HtML> <HEaD> <TITle></TItle> </HeaD> <BodY> </bODY> </hTML> Good Good Avoid FSKM UiTM Pahang  Page 9

10 Hyper Text Markup Language (HTML)
HTML Tags Remember your first code? Notice that all tags are used to markup HTML elements Notice that all tags started with ‘<‘ and end with ‘>‘ Notice that all tags came in pairs <html>...</html>, <body>...</body>, etc Willing to know what are available tags in HTML? Visit: FSKM UiTM Pahang  Page 10

11 Hyper Text Markup Language (HTML)
HTML Elements Remember your first code? Example: <title>My First HTML Page</title> <body>Hello World!</body> HTML element: HTML element: body Start with a start tag: <body> Content of the element is: Hello World! End with an end tag: </body> Nested HTML elements (element inside element) Example: <p>I <b>Love</b> HTML</p> FSKM UiTM Pahang  Page 11

12 Hyper Text Markup Language (HTML)
HTML Attributes Specified in the start tag of HTML element: attr = "value" Provide additional information to an HTML element <html> <head> <title>HTML Attributes</title> </head> <body> <h4 title="Do You See me?"> Put your mouse cursor on me ;) </h4> </body> </html> FSKM UiTM Pahang  Page 12

13 Hyper Text Markup Language (HTML)
HTML Attributes Have you tried the code? <h4>...</h4>: define the start of the heading title: is an attribute placed in <h4>...</h4>. It suggested the title for the element Willing to know what are available attributes in HTML? Visit: FSKM UiTM Pahang  Page 13

14 Hyper Text Markup Language (HTML)
HTML Character Reference A.K.A Character Entities Result Description Entity Name Entity Number non-breaking space < less than < > greater than > & ampersand & & " quotation mark " " ' apostrophe  &apos; (does not work in IE) ' FSKM UiTM Pahang  Page 14 14

15 Hyper Text Markup Language (HTML)
FSKM UiTM Pahang  Page 15

16 Hyper Text Markup Language (HTML)
These tags are compulsory to create an HTML file/document. HTML elements and attributes are some kind of information that you HAVE to know. FSKM UiTM Pahang  Page 16

17 Hyper Text Markup Language (HTML)
identify the document as an HTML (Web) document Meta-information:: information about the document such as its title & keywords, that may be useful to search engines, & other data that is not considered as document content. ex: <title> :: identifies the document displayed in the browser’s title bar contains of the document’s content you can think of the body as a canvas where the content appears: text, images, colors, graphics, etc. FSKM UiTM Pahang  Page 17

18 Hyper Text Markup Language (HTML)
Basic HTML Tags Tag Description <html> Defines an HTML document <body> Defines the document’s body <h1> to <h6> Defines header 1 to header 6 <p> Defines a paragraph <br> Inserts a single line break <hr> Defines horizontal rule <!--…--> Defines a comment FSKM UiTM Pahang  Page 18 18

19 Hyper Text Markup Language (HTML)
Basic HTML Tags It is very important for you to know the most important tags in HTML for: Headings Paragraphs Line breaks <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> FSKM UiTM Pahang  Page 19

20 Hyper Text Markup Language (HTML)
Basic HTML Tags Paragraphs Defined with <p> tag <p>This is paragraph 1</p> <p>This is paragraph 2</p> FSKM UiTM Pahang  Page 20

21 Hyper Text Markup Language (HTML)
Basic HTML Tags Line breaks <br> forces line break wherever you place it <p>This <br> is a para<br>graph with line breaks</p> FSKM UiTM Pahang  Page 21

22 Hyper Text Markup Language (HTML)
Basic HTML Tags Comment in HTML Comment tag is used when you want to put comment in the HTML code Comment tag can be placed anywhere, as long as in the HTML code <html> <head> <title>Comment Tag in HTML</title> <!–- This is comment tag --> </head> <body> <h4 title="Do You See me?"> Put your mouse cursor on me ;) </h4> </body> </html> FSKM UiTM Pahang  Page 22

23 Hyper Text Markup Language (HTML)
HTML Date & Time (HTML5) <time> tag is used for declaring the date and/or time within an HTML document Introduced in HTML 5 <p>On Saturdays, we open at <time>09:00</time>.</p> <p>The concert is <time datetime=" ">next Wednesday</time>.</p> <p>We finally hit the road at <time datetime=" T05:00-07:00"> 5am last Tuesday</time>.</p> FSKM UiTM Pahang  Page 23

24 Hyper Text Markup Language (HTML)
HTML Text Formatting Tag Description <b> Defines bold text <big> Defines big text <em> Defines emphasized text <i> Defines italic text <small> Defines small text <strong> Define strong text <sub> Defines subscripted text <sup> Defines superscripted text <ins> Defines inserted text <del> Defines deleted text FSKM UiTM Pahang  Page 24 24

25 Hyper Text Markup Language (HTML)
HTML Text Formatting Bold <b> tag is used to bold any characters in your HTML <html> <head> <title>HTML Formatting</title></head> <body> This is how we <b>bold</b> characters in HTML. <br> <b>Another example in bold-ing characters</b> </body> </html> FSKM UiTM Pahang  Page 25

26 Hyper Text Markup Language (HTML)
HTML Text Formatting Italic & Emphasized <i> & <em> tags are used to define italic and emphasized text <html> <head> <title>HTML Formatting</title> </head> <body> <i>This text is italic</i> <br> <em>This text is emphasized</em> </body> </html> FSKM UiTM Pahang  Page 26

27 Hyper Text Markup Language (HTML)
HTML Text Formatting Strong <strong> tag is used to render emphasized text <html> <head> <title>HTML Formatting</title> </head> <body> <strong>Strong</strong> the text <br> <strong>Try Again</strong> </body> </html> FSKM UiTM Pahang  Page 27

28 Hyper Text Markup Language (HTML)
HTML Text Formatting Superscript & Subscript <sup> & <sub> tags are used to define superscript and subscript text <html> <head> <title>HTML Formatting</title></head> <body> This text contains <sup>superscript</sup> <br> This text contains <sub>subscript</sub> </body> </html> FSKM UiTM Pahang  Page 28

29 Hyper Text Markup Language (HTML)
HTML Text Formatting Small & Big <small> & <big> tag are used to define small and big text <html> <head> <title>HTML Formatting</title> </head> <body> <small> This text is small </small> <br> <big> This text is big </big> </body> </html> FSKM UiTM Pahang  Page 29

30 Hyper Text Markup Language (HTML)
HTML Text Formatting Preformatted <pre> tag is used to control spaces and line breaks in HTML <html> <head> <title>Preformatted</title> </head> <body> <pre> This is preformatted text. It preserves both spaces and line breaks. </pre> </body> </html> FSKM UiTM Pahang  Page 30

31 Hyper Text Markup Language (HTML)
HTML Links (Hyperlinks) Tag Description <a> Defines an anchor. Always use with href attribute FSKM UiTM Pahang  Page 31 31

32 Hyper Text Markup Language (HTML)
HTML Links (Hyperlinks) Anchor Tag and Href Attribute <a> tag use to point to any resource (document/Web) on the Web: HTML file, sound, movie, Website, etc <a href="url">Text to be displayed</a> <a href=" <a href="member_reg.asp">Registration</a> FSKM UiTM Pahang  Page 32

33 Hyper Text Markup Language (HTML)
HTML Links (Hyperlinks) Target Atrribute Defined where linked documet will be opened _blank: open URL in a new browser _self: open URL in a current browser _parent: open URL in the parent frame, still within the current browser. Only applicable when using frames. _top: open URL in the current browser window, but cancelling out any frames. <a href=" target="_blank">Google</a> FSKM UiTM Pahang  Page 33

34 Hyper Text Markup Language (HTML)
HTML Links (Hyperlinks) Anchor Tag and Name Attribute The link will "jump" to another section on the same page <a name="link_target"<h2>I Am Here!></h2></a> <a href="#link_target/">Link Target</a> FSKM UiTM Pahang  Page 34

35 Hyper Text Markup Language (HTML)
HTML Links (Hyperlinks) Link Create a hyperlink to an address <a href="url">Text to be displayed</a> <a to me</a> FSKM UiTM Pahang  Page 35

36 Hyper Text Markup Language (HTML)
HTML Lists Tag Description <ol> Defines an ordered list <ul> Defines an unordered list <li> Defines a list item <dl> Defines a definition list <dt> Defines a definition term <dd> Defines a definition description FSKM UiTM Pahang  Page 36 36

37 Hyper Text Markup Language (HTML)
HTML Lists Ordered List <ol> tag is used to create ordered list in HTML <html> <head> <title>Ordered List</title> </head> <body> <h2>Ordered List:</h2> <ol> <li>Comp. Science</li> <li>Engineering</li> </ol> </body> </html> FSKM UiTM Pahang  Page 37

38 Hyper Text Markup Language (HTML)
HTML Lists Unordered List <ul> tag is used to create ordered list in HTML <html> <head> <title>Unordered List</title> </head> <body> <h2>Unordered List:</h2> <ul> <li>Comp. Science</li> <li>Engineering</li> </ul> </body> </html> FSKM UiTM Pahang  Page 38

39 Hyper Text Markup Language (HTML)
HTML Lists Nested List <html> <head> <title>List</title> </head> <body> <h2>Unordered List:</h2> <ol> <li>Comp. Science</li> <ul> <li>CS110</li> <li>CS220</li> <li>CS225</li> <li>CS226</li> </ul> <li>Engineering</li> <ol> <li>EC110</li> <li>EC220</li> <li>EM110</li> <li>EM220</li> </ol> </body> </html> FSKM UiTM Pahang  Page 39

40 Hyper Text Markup Language (HTML)
HTML Table Tag Description <table> Defines a table <th> Defines a table header <tr> Defines a table row <td> Defines a table cell <caption> Defines a table caption <colgroup> Defines groups of table columns <col> Defines the attribute values for one or more columns in a table <thead> Defines a table head <tbody> Defines a table body <tfoot> Defines a table footer FSKM UiTM Pahang  Page 40 40

41 Hyper Text Markup Language (HTML)
HTML Table Table <table> tag is used to create table in HTML <tr> tag is used to create row, and <td> tag is used to create table data where it can contains text, image, and so forth Attribute like border can be placed in <table> tag. If border value is 0, there will be no border will be displayed, but, it the value is 1, there will be a border. If you want to place the content in the (center|left|right), place align attribute in <td> tag like below: *Note: specify align value with center, left, or right. Default value is left. <td align="center"> content </td> FSKM UiTM Pahang  Page 41

42 Hyper Text Markup Language (HTML)
HTML Table Table <table> tag is used to create table in HTML <html> <head> <title>HTML Table</title> </head> <body> <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </table> </body> </html> FSKM UiTM Pahang  Page 42

43 Hyper Text Markup Language (HTML)
HTML Table Table with heading <th> tag is used to create heading in a table <html> <head> <title>HTML Table</title> </head> <body> <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </table> </body> </html> FSKM UiTM Pahang  Page 43

44 Hyper Text Markup Language (HTML)
HTML Table Table with cellpadding Attribute cellpadding is used to create more white space between the cell content and its border <html> <body> <h4>With cellpadding:</h4> <table border="1" cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr> <td>Second</td> </table> </body> </html> FSKM UiTM Pahang  Page 44 44

45 Hyper Text Markup Language (HTML)
HTML Table Table with cellspacing Attribute cellspacing is used to increase the distance between the cells <html> <body> <h4>With cellspacing:</h4> <table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <td>Second</td> </table> </body> </html> FSKM UiTM Pahang  Page 45 45

46 Hyper Text Markup Language (HTML)
HTML Table Table with colspan Attribute To make a cell span multiple columns <html> <head> <title>HTML Table</title> </head> <body> <table border="1" width="30%"> <tr> <th colspan="2">Table header</th> </tr> <td width="20%">Table cell 1</td> <td>Table cell 2</td> </table> </body> </html> FSKM UiTM Pahang  Page 46 46

47 Hyper Text Markup Language (HTML)
HTML Table Table with rowspan Attribute To make a cell span multiple rows <html> <head> <title>HTML Table</title> </head> <body> <table border="1" width="30%"> <tr> <th rowspan="2">Table header</th> <td>Table cell 1 </tr> <td>Table cell 2</td> </table> </body> </html> FSKM UiTM Pahang  Page 47 47

48 Question? FSKM UiTM Pahang  Page 48 48

49 Bibliography (Websites)
Bibliography (Book) Knuckles (2001). Introduction to Interactive Programming on the Internet using HTML & Javascript. John Wiley & Sons, Inc. Bibliography (Websites) FSKM UiTM Pahang  Page 49 49

Download ppt "BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ"

Similar presentations

HTML popo.

HTML popo.
Learning HTML. > Title of page This is my first homepage. Tells Browser This is an HTML page Basic Tags Tells Browser End of HTML page Header information.

Learning HTML. > Title of page This is my first homepage. Tells Browser This is an HTML page Basic Tags Tells Browser End of HTML page Header information.
HyperText Markup Language (HTML). Introduction to HTML Hyper Text Markup Language HTML Example The structure of an HTML document Agenda.

HyperText Markup Language (HTML). Introduction to HTML Hyper Text Markup Language HTML Example The structure of an HTML document Agenda.
CREATED BY : VIRAL M.KORADIYA. Anchor elements are defined by the element. The element accepts several attributes, but either the Name or HREF attribute.

CREATED BY : VIRAL M.KORADIYA. Anchor elements are defined by the element. The element accepts several attributes, but either the Name or HREF attribute.
Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.

Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
HTML: HyperText Markup Language Hello World Welcome to the world!

HTML: HyperText Markup Language Hello World Welcome to the world!
INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.

INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.
HTML/XML XHTML Authoring. Creating Tables  Table: An arrangement of horizontal rows and vertical columns. The intersection of a row and a column is called.

HTML/XML XHTML Authoring. Creating Tables  Table: An arrangement of horizontal rows and vertical columns. The intersection of a row and a column is called.
1 eVenzia Technologies Learning HTML, XHTML & CSS Chapter 1.

1 eVenzia Technologies Learning HTML, XHTML & CSS Chapter 1.
1 Outline 9.1Introduction 9.2Markup Languages 9.3Editing HTML 9.4Common Tags 9.5Headers 9.6Text Styling 9.7Linking 9.8Images 9.9Formatting Text With 9.10Special.

1 Outline 9.1Introduction 9.2Markup Languages 9.3Editing HTML 9.4Common Tags 9.5Headers 9.6Text Styling 9.7Linking 9.8Images 9.9Formatting Text With 9.10Special.
 2001 Deitel & Associates, Inc. All rights reserved. 1 Outline 9.1Introduction 9.2Markup Languages 9.3Editing HTML 9.4Common Tags 9.5Headers 9.6Text Styling.

 2001 Deitel & Associates, Inc. All rights reserved. 1 Outline 9.1Introduction 9.2Markup Languages 9.3Editing HTML 9.4Common Tags 9.5Headers 9.6Text Styling.
MR.Mohammed Sharaf al Shareef

MR.Mohammed Sharaf al Shareef
XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists.

XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists.
 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.

 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.
Week 1 8/10/2015iSTTS, 2008. Agenda Introduction to HTML Creating and publishing a Web page Validating a document Main HTML elements Block-level HTML.

Week 1 8/10/2015iSTTS, Agenda Introduction to HTML Creating and publishing a Web page Validating a document Main HTML elements Block-level HTML.
CpSc 462/662: Database Management Systems (DBMS) (TEXNH Approach) HTML Basics James Wang.

CpSc 462/662: Database Management Systems (DBMS) (TEXNH Approach) HTML Basics James Wang.
CS105 Introduction to Computer Concepts HTML

CS105 Introduction to Computer Concepts HTML
Chapter 2: The Client Side: HTML CIS 275—Web Application Development for Business I.

Chapter 2: The Client Side: HTML CIS 275—Web Application Development for Business I.
HTML. What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language.

HTML. What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language.
Headings, Paragraphs, Formatting, Links, Head, CSS, Images

Headings, Paragraphs, Formatting, Links, Head, CSS, Images

Similar presentations

Ads by Google