Scribd
Upload
64 views

L3 HTML5

The document introduces HTML5 and its basics, including its structure, tags and syntax. It describes the new features in HTML5 that simplify document structure and provide new elements. It also explains common HTML tags and elements in the head and body sections.

Uploaded by

keeweikuang123
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
64 views

L3 HTML5

The document introduces HTML5 and its basics, including its structure, tags and syntax. It describes the new features in HTML5 that simplify document structure and provide new elements. It also explains common HTML tags and elements in the head and body sections.

Uploaded by

keeweikuang123
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 69

Introduction to HTML5

Lek Hsiang Hui

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
Learning Objectives
At the end of this lecture, you should understand:
The basics of HTML
The new features and characteristics of HTML5 (current version)

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 2
HTML
HTML = HyperText Markup Language
Scripting language used to create webpages (it is essentially a text document)
Defines the format, layout, and resources in a webpage
Used together with:
Cascading Style Sheets (CSS): Styling
Javascript: Additional effects/logic

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 3
Structure & Syntax
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 4
Getting The HTML Source

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 5
Structure Of An HTML Page
Consists of:
DOCTYPE
<html> tag

<head> tag

<body> tag

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
Page Body
</body>
</html>
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 6
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 7
DOCTYPE Tag
Defines the type of the document (e.g. HTML 4.01, XHTML 1.0, HTML5, etc)
XHTML 1.0:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5:
<!DOCTYPE html>

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 8
HTML5 Simplifies Things
"Less is More"

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 9
Other New Things In HTML5
https://www.w3.org/TR/html5-diff/
New elements and attributes to address modern web development
Removed certain elements and attributes
Still backward compatible with XHTML1 and HTML4

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 10
HTML Tagging Structure
Most tags have a starting and ending tag:
<p>...</p>

While others are self-closing tags:


but only do this for void elements (https://www.w3.org/TR/html5/syntax.html#void-elements)
Use <p></p> instead of <p /> , <script></script> instead of <script/>
<br />
<input ... />

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 11
HTML Tagging Structure
Tags can have attributes
Attribute values are enclosed with " " or ' ' (if the value does not have spaces, may omit the quotation marks)
<a href="http://www.google.com" target="_blank">google</a>

google
Possible to have attributes with no values
<input type="text" value="readonly textbox" disabled />

readonly textbox
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 12
HTML Comments
Similar to coding, when creating HTML pages, sometimes we will add comments
They are useful to embed additional information for the developer without
displaying on the page itself
Comments are written using:
<!-- this is an HTML comment -->

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 13
Common HTML Tags
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 14
Head-Related Tags
The <head>...</head> section contains information about the page
Elements defined here are usually not visible (with the exception of the tag) <title>

Head-related tags:
<title> , <meta>

<style> , <link> , <script> (these can also be placed in the body section)

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 15
<meta> Tag
Used to capture various meta-information about the page (e.g. description, keywords, author)
These tags are traditionally used by search engines for indexing pages
<meta name="description" content="Some description of page" />
<meta name="keywords" content="html, css, javascript" />

<!-- useful for mobile devices for more readable pages-->


<meta name="viewport" content="width=device-width, initial-scale=1.0" />

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 16
<meta> Tag
Now also used by social networking sites
<!-- meta tags for Twitter Card -->
<meta name="twitter:title" content="Front-End Developer ..." />
<meta name="twitter:image" content="https://...image.jpg" />
<!-- meta tags for Facebook -->
<meta property="og:title" content="When Great Minds Don’t ..." />
<meta property="og:image" content="http://...image.jpg" />

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 17
<script> Tag
Can be placed either in the head or body section
Used to be:
<script type="text/javascript" src="..."></script>

Now (Javascript is the default language in HTML5):


<script src="..."></script>

Can also write the JS within the <script> </script> tags


<script>
var num1 = 1,
num2 = 2;
console.log(num1 + num2);
</script>
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 18
<script> Pitfall
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Self-closing tag pitfall</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" />
hello world
<!-- Notice Hello World is not displayed! -->
</body>
</html>

https://www.comp.nus.edu.sg/~lekhsian/html/01_pitfalls/script_pitfall.html
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 19
Async <script>
New in HTML5: async
Script will be executed asynchronously (script is executed while the page continues to parse)
<script src="..." async></script>

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 20
<style> & <link> Tags
Used to define CSS (style of the page)
Can be placed in either the head or body section (usually in the head section)
<style>
body {
color: blue; /* make all text blue */
}
</style>
<link rel="stylesheet" type="text/css" href="style.css" />

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 21
Body-Related Tags
The <body>...</body> section contains presentational content for the page
Can be divided into a few major categories (non-exhaustive)
Text
Table, List, Blocks Links
Images
Iframes
Form elements

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 22
Text-Related Tags
Headings: <h1> , <h2> , ..., <h6>
<p> , <b> , <i> , <u> , <s> , , <sup>
<sub>

<b> , <em> , <ins> , <del>

<blockquote>

<br /> , <hr />


<mark>

https://www.comp.nus.edu.sg/~lekhsian/html/02_text/text.html
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 23
Displaying Text
Multiple spaces will only be displayed with single space
New line in the file has no effect (need to use ) <br/>

Alternatively, can use the <pre>...</pre> tag


<pre>
hello
world
</pre>

hello
world

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 24
Setup Development Environment: Visual Studio Code

https://code.visualstudio.com/
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 25
Table, List, Blocks
To lay out the text, possible to put them in:
Table
List
Blocks ( <div>...</div> , <span>...</span> )

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 26
Table-Related Tags
Table definitions enclosed within <table>...</table>
Use <tr>...</tr> to define a row
Then use <td>...</td> to define a column in a row
or <th>...</th> to define a header column (bold)
Idea:
Tables made up of rows
Each row should have an equal number of columns
But you can merge columns using the colspan attribute
(or merge rows using rowspan attribute)
https://www.comp.nus.edu.sg/~lekhsian/html/03_tables/tables.html
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 27
Table-Related Tags
In additional to <tr> , <td> , can define <thead> ,
<tbody> , <tfoot> which allows us to better do styling

https://www.comp.nus.edu.sg/~lekhsian/html/03_tables/tables.html

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 28
List-Related Tags
3 types of lists:
Ordered list ( <ol> , <li> )
Unordered list ( <ul> , <li> )
Definition list ( <dl> , <dt> , <dd> )
https://www.comp.nus.edu.sg/~lekhsian/html/04_lists/lists.html

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 29
<div> & <span>
To define a section in the page, we use:
<div> - can be a floating box

<span> - for inline section (usually for styling text)

<div style="border: 5px solid black; width: 300px; float: left;">block 1</div>
<div style="border: 5px solid black; width: 200px; float: left;">block 2</div>
<p>Hello <span style="text-decoration: underline">there</span></p>

block 1 block 2 Hello there

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 30
Links
Using <a> tag
And define the href attribute for the url
Add target="_blank" attribute if want it to show on new window
<a href="http://www.google.com" target="_blank">Google</a>

Google

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 31
Images
Using <img> tag
And define the src attribute for the url of image
<img src="images/cats.gif" />

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 32
<iframe>
Similar to embedding another page in the current page
Using <iframe> tag
<!-- can also be an URL -->
<iframe src="hello.html" width="90%" height="150px"> </iframe>

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 33
Form-Related Tags
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 34
Form-Related Tags
Form elements should be enclosed within <form>...</form>
Usually add these attributes:
action - url to submit to
method - get or post
Form elements: <input> (has different type: button, checkbox, radio, text, etc), <select> , <textarea>
Element usually have the name and value attributes

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 35
<input> Tag
Different types defined using the type attribute
button, checkbox, file, hidden, password, reset, submit, text
<form>
<input type="text" />
<input type="password" />
<input type="checkbox" />
<input type="file" />
<input type="hidden" name="personId" value="100" />
<input type="button" value="Button 1" />
<input type="reset" />
<input type="submit" />
</form>

https://www.comp.nus.edu.sg/~lekhsian/html/05_forms/form_elements.html
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 36
New Form Elements
New type in HTML5: url, email, date, time, number, range, color
New attributes: autocomplete (on/off), placeholder, required
Traditionally achieved through Javascript
<form>
<input type="url" placeholder="Enter url" required />
<input type="email" placeholder="[email protected]" required />
<input type="color" value="#cc00cc" />
<input type="submit" value="Submit" />
</form>

Enter url [email protected] Submit


https://www.comp.nus.edu.sg/~lekhsian/html/05_forms/new_form_elements.html
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 37
New Form Elements
However, not all browsers can support these features
So have to be careful when using it. Javascript components are still more reliable
<form>
<input type="date" value="2017-01-01" />
<input type="time" />

<!-- does not work (well) on FF -->


<input type="number" value="5" />
<input type="submit" value="Submit" />
</form>

01/01/2017 --:---- 5 Submit


©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 38
Autofocus
Possible to autofocus on a form field
Should only have one autofocus element
<form>
<label for="firstName">First Name</label>
<input type="text" id="firstName" placeholder="John" autofocus />
<label for="lastName">Last Name</label>
<input type="text" id="lastName" placeholder="Doe" />
<label for="contact">Contact</label>
<input type="text" id="contact" placeholder="+6591234567" />
<input type="submit" value="Submit" />
</form>

https://www.comp.nus.edu.sg/~lekhsian/html/05_forms/autofocus.html
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 39
Form Validation
Simple validation: min, max
<input type="date" max="2018-12-31" />
<input type="date" min="2006-01-01" />
<input type="date" min="2016-01-01" max="2017-12-31" />
<input type="number" min="1" max="10" />

https://www.comp.nus.edu.sg/~lekhsian/html/05_forms/validation.html

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 40
Form Validation
Simple validation: minlength, maxlength
<input type="text" minlength="3" maxlength="5" />

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 41
Regex Validation
Possible to use the pattern attribute to do regex validation
<input
type="text"
placeholder="Enter username"
pattern="[a-zA-Z0-9]{3,5}"
required
/>
<input type="text" placeholder="91234567" pattern="[0-9]{8}" required />

https://www.comp.nus.edu.sg/~lekhsian/html/05_forms/pattern_validation.html
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 42
Range
Slider component (new in HTML5)
Control using: value, min, max, step (optional)
<input type="range" value="90" min="0" max="100" />
<input type="range" value="380" min="0" max="1000" step="10" />

Continuous: 90
Step: 380

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 43
Other New Elements
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 44
Semantic Tags
<section> , <article> , <main> , <aside> , <header> , <footer> , <nav> ,
<figure> , <figcaption>
Mainly to help in defining the layout of modern websites
Each of them is effectively a <div> tag but the name of the tag is more informative

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 45
Layout Example https://www.comp.nus.edu.sg/~lekhsian/html/06_semantic_elements/layout.html
<header>
<h1>Welcome to IS3106</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
...
</ul>
</nav>
</header>
...
<footer>
<p>Copyright © 2017 Lek Hsiang Hui</p>
<nav>
<ul>
<li><a href="#">Home</a></li>
...
</ul>
</nav>
</footer>
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 46
Benefits Of Semantic Tags
A common web structure looks something like:
<div id="header">...</div>
<div id="nav">...</div>
<div id="a123" class="article">...</div>
<div id="footer">...</div>

Now with semantic tag:


<header>...</header>
<nav>...</nav>
<article id="a123">...</article>
<footer>...</footer>

Allow us to better describe the semantic of the content


©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 47
contenteditable
Possible to use the contenteditable attribute to specify that an element is editable
Can be used to achieve in-place editing
Style hover (and focus) using CSS
Capture the events (keypress) using Javascript
Name: <span id="name_editable" contenteditable>John Doe</span>

Name: John Doe

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 48
Progress
Meter is used for specifying static gauge
Progress is used for progress bar
value and max used to control the progress
Use Javascript to modify the value attribute
<progress value="0" max="100"></progress>

Start Reset

https://www.comp.nus.edu.sg/~lekhsian/html/07_others/contenteditable.html
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 49
Canvas
A component used for drawing (text, lines, shapes)
Drawing is performed through Javascript
Useful for drawing charts and graphs
<canvas id="myCanvas" width="100" height="100">
This will be shown if canvas is not supported
</canvas>

Draw Text Draw Shape Draw Chart

https://www.comp.nus.edu.sg/~lekhsian/html/07_others/canvas.html
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 50
Scalable Vector Graphics (SVG)
https://www.comp.nus.edu.sg/~lekhsian/html/07_others/svg.html
SVG is another way to draw charts
Vector graphics format => allows scaling to any size without a loss in quality
Unlike canvas, you can use an XML-like approach to position the drawing
components
<svg width="400" height="100">
<g class="bar">
<rect class="bar" width="30" height="30" x="0" y="70"></rect>
<text x="5" y="60">30</text>
</g>
...
</svg>

50 70
30 20 40
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 51
Video
Much easier to embed video using just the video tag (previously require browser plug-ins)
Use the source tag to define the media sources (mp4, webm, ogg)
Use the track tag to specify the subtitles (srt)
<video width="35%" controls>
<source src="videos/674888138.mp4" type="video/mp4" />
Your browser does not support HTML5 video
</video>

0:00

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 52
Audio
Much easier to embed audio using just the audio tag (previously require browser plug-ins - similar to video)
Use the source tag to define the media sources (mp3, ogg, wav)
<audio controls>
<source src="audio/bensound-cute.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio
</audio>

0:00 / 0:00

(Credits: audio from bensound.com)

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 53
Hands-On Time: Building Your Profile Page

You can ignore the styling for now (we will cover styling in the CSS lecture)
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 54
Publishing Your Page To WWW (Optional)

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 55
Step 1: Create A GitHub Account
1. Sign up a GitHub account (https://github.com/)

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 56
Step 2: Create A GitHub Repository
1. Login to your GitHub account
2. Create a Repository (https://github.com/new)

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 57
Step 2: Create A GitHub Repository
1. Login to your GitHub account
2. Create a Repository (https://github.com/new)

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 58
Step 2: Create A GitHub Repository
3. Give it a Repository name (e.g. aboutme)
4. Check Add a README file
5. Click Create repository

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 59
Step 2: Create A GitHub Repository
If everything works out, it should look like this

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 60
Step 3: Upload Web Page
6. Name your file index.html
7. Drag and drop index.html to the repository main screen

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 61
Step 3: Upload Web Page
8. It should look like this. Press Commit changes

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 62
Step 3: Upload Web Page
If everything works out it should look like this. index.html should show up under the list of
files

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 63
Step 4: Configure GitHub Pages
9. Go to the Settings

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 64
Step 4: Configure GitHub Pages
9. Go to the Settings

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 65
Step 4: Configure GitHub Pages
10. Go to the Pages section under the settings page

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 66
Step 4: Configure GitHub Pages
12. Under the Branch section, select the main branch, and press Save

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 67
Step 5: Visit The Page
13. Wait a few minutes
14. The page should now be accessible at:
https://YOUR_GITHUB_NAME.github.io/aboutme/

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 68
What's Next
JavaServer Faces (JSF)

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 69

You might also like