Introduction to HTML Webpage Creation

COMP4332/RMBI4310 HTML Prepared by Raymond Wong Presented by Raymond Wong

Data Collection Data Processing Collected Data Processed Data Raw Data Result Presenting Data Mining Processed Data Presentable Forms of Data Mining Results Data Mining Results

Relational data is stored with the technology of “traditional” relational database management system. Data Collection This system could be manipulated with a database programming language called SQL (Structured Query Language). Collected Data Raw Data e.g., purchase records and transaction records e.g., webpages and social network data Relational data Non-relational data Non-relational data is stored with the technology of “new” non-relational database management system. We know how to “access” the TEXT file (e.g., file reading) This system could be manipulated with a database programming language called NoSQL (Not OnlySQL). We could also “access” the webpages(i.e., data crawling)

In order to perform data crawling, we should know HTML (a programming language for writing webpage)

Outline • Overview • Simple Webpage • Table

1. Overview • Hypertext Markup Language (HTML) is the standard markup language which is used for writing webpages. • It could be used with Cascading Style Sheets (CSS) and JavaScript to enrich its flexibility of writing webpages.

1. Overview • When we open an HTML file with our web browser (e.g., Chrome, MS Edge (or IE) and Safari), by default, • we could not see the “raw” form of this HTML file (i.e., the HTML code) • we could see the “display” form of this HTML file (i.e., what we are viewing in many websites with our browsers)

1. Overview Shown in its “raw” form Shown in its “display” form Web Browser <html> … </html> HTML File HTML File

2. Simple Webpage • We will illustrate a “simple” webpage. • More advanced “html” concepts could be learnt in other courses (or by yourself).

HTML The tag indicating that the document type is “html” <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>A Webpage Title</title> </head> <body> … </body> </html> The “html” tag The opening tag of “html” The “header” tag Some “meta” information related to this html file The “title” tag The “body” tag We can write most html codes here The closing tag of “html”

We could use different headings with different sizes. HTML <h1>Webpage Heading (H1)</h1> <h2>Image Heading (H2) </h2> <h3>Ordered/Underordered List Heading (H3) </h3> Output

We could write paragraphs and add “spaces” as follows. HTML <p> Raymond is now teaching how to write an HTML webpage. </p> <p>Raymond is typing this HTML webpage with many spaces (" "). </p> Non-breaking Space Output

We can also write it as <br /> • We could write “enter” and include a hyperlink (absolute link). HTML <enter> <p>We could link to a webpage outside this webpage.<br> This is a <a href="http://home.cse.ust.hk/~raywong/">link (No. 1)</a> linking to Raymond's homepage. This link is an absolute link (linking to a webpage outside this webpage). </p> A hyperlink linking to this “absolute” link Output

If we type “Course/Table.html” in “href”, what is its meaning? If we type “../Table.html” in “href”, what is its meaning? • We could include a hyperlink (relative link). HTML <p>This is a <a href="Table.html">link (No. 2)</a> linking to the next webpage to be taught. This link is a relative link (linking to a webpage outside this webpage).</p> A hyperlink linking to this “relative” link Output

We could link to one part of the same webpage (in addition to the link of another webpage). • Steps • Step 1: We should give a “tag” to each part of the same webpage we want to link • Step 2: We could use the normal “<a href…>” to link to this tag/part.

Step 1 We give a tag called “ImageHeading” for this part • We could give a tag to each of these 2 parts. HTML <h2><a name="ImageHeading">Image Heading (H2)</a></h2> <h3><a name="ListHeading">Ordered/Underordered List Heading (H3)</a></h3> We give a tag called “ListHeading” for this part Output The tag is “invisible” in the “display” form of the html file.

Step 2 We link to the tag called “ImageHeading” • We could link to these 2 parts with the tags. HTML <p>We could also link to a particular part within this webpage.<br> This is a <a href="#ImageHeading">link (No. 3)</a> linking to the part with a heading called "Image Heading (H2)" within this webpage.<br> This is a <a href="#ListHeading">link (No. 4)</a> linking to the part with a heading called "Ordered/Unordered List Heading (H3)" within this webpage. <br> </p> We link to the tag called “ListHeading” Output

We could include an image in a webpage. HTML <p> We could include Raymond's image in this webpage. The image could be found as follows. </p> <img border="1" src="http://home.cse.ust.hk/~raywong/photo/raymond2.JPG" width="166" height="221"> Output

We could include an ordered list as follows. HTML <ol> <li> This is the first ordered item. <li> This is the second ordered item. <li> This is the third ordered item. </ol> Output

We could include an unordered list as follows. HTML <ul> <li> This is the first unordered item. <li> This is the second unordered item. <li> This is the third unordered item. </ul> Output

3. Table • We could write an HTML file with a table

HTML <h1>A Webpage Showing How to Create a Table</h1> <p> The following shows a table. </p> <table width="800" border="1"> <tr> <th scope="col">Student ID</th> <th scope="col">Student Name</th> <th scope="col">Birth Year</th> </tr> <tr> <td>12345678</td> <td>Raymond</td> <td>1998</td> </tr> <tr> <td>87654321</td> <td>Peter Chan</td> <td>1997</td> </tr> <tr> <td>12341234</td> <td>Mary Lau</td> <td>1999</td> </tr> <tr> <td>56785678</td> <td>David Lee</td> <td>1998</td> </tr> <tr> <td>88888888</td> <td>Test Test</td> <td>1998</td> </tr> </table>

Output

Introduction to HTML Webpage Creation

Introduction to HTML Webpage Creation

Presentation Transcript