HTML
WEBLAUNCH
We will start at 5:30pm!
WhatsApp QnA
HTML
WEBLAUNCH
The first step of your web development journey
Web Development
Front-end
Back-end
Front-end
HTML
( Bricks )
CSS
( Painting )
JS
( Switches, Lights )
SPEAKERS
General Committee of
Sunway Tech Club
Diploma in Information Technology (2nd Year)
Marcus Wong Ke Lun
H.O.E of Sunway Tech Club
Degree in Computer Network and Security (3rd year)
Lynus Hong Yong Tat
INTRO TO HTML
Creates the structure of the website
Hypertext Markup Language
Not a programming language
source :
Pop Quiz
A) How To Make Lemonade
What is the full title of HTML ?
B) How To Make License
C) Hypertext Markup Language
D) How Technology advanced so Much that the possibility of a fabricated reality indistinguishable to one another introduce an idea that we might live in a simulation created by a higher being, governing/deciding our daily Lives
BROWSER SUPPORT
TEXT EDITOR
WEBSITE LAYOUT
source :
FILE STRUCTURE
source :
TAGS
ELEMENTS
source :
BOILERPLATE
INDENTATION
Do This
Not This
PRACTICAL 1
2. BASICS
<!--COMMENTS-->
Add text messages to your code
Provides information
Temporary code removal
<!--COMMENTS-->
This comment indicates the code below is the navigation bar of your website
This section of code is commented out and will not run on your website
<TITLE>
Located in <head> element
Displays the website title in browser
<TITLE>
3. TEXT
HEADINGS <h1> to <h6>
Large bold text with six sizes
Use for headings/titles of your content
PARAGRAPH <p>
Paragraph of text
LINE BREAK <br>
Creates a new line
Self-closing tag
FORMATTING
STRONG <strong>
EMPHASIS <em>
UNDERLINE <u>
Bold text
Italic text
Underlined text
FORMATTING
MARK <mark>
SUBSCRIPT <sub>
SUPERSCRIPT <super>
Highlighted text
Subscript text
Superscript text
FORMATTING
Formatting can be done within paragraph tags
4. IMAGES
IMAGES <img>
Inserts an image
Self-closing tag
Requires attributes
ATTRIBUTES
Provides information
Placed in opening tag
IMAGE ATTRIBUTES
src
alt
width & height
Source of the image
Display text if image cannot load
Adjust the size of the image in pixels
IMAGES <img>
The first image is a cat in the images folder
The second image is a dog from a website link
The third image is a wolf which is adjusted to width 400 and height 200 in pixels
5. LINKS
LINKS <a>
Creates a hyperlink
Directs to a section or page
Requires attributes
LINK ATTRIBUTES
href
target
URL of the destination link
How the link opens
LINKS <a>
You can create a link for an image element by inserting it between the <a> tags
6. CONTAINERS
To contain multiple elements
Useful for styling many elements at once
CONTAINERS
A
B
C
A blue
B blue
C blue
A
B
C
I want to make A, B and C blue.
Wrap A, B and C in D
D blue
D
CONTAINERS
DIVISION <div>
SPAN <span>
Block container (new line, full width)
Wrap large sections of content
Inline container (same line, necessary width)
Wrap small amounts of content
CONTAINERS
PRACTICAL 2
TODOZ WEBSITE
7. LISTS
LISTS
Create a list of items
ORDERED LIST <ol>
UNORDERED LIST <ul>
Uses numbers
Uses bullet points
LIST ITEM <li>
Creates a list item
LISTS
8. TABLES
TABLES
Create a table
TABLE <table>
TABLE ROW <tr>
Defines a table container
Creates a table row (horizontal)
TABLE HEADING <th>
Insert table heading
TABLE DATA <td>
Insert table data
TABLES
9. FORMS
FORMS
Create a form
FORM <form>
LABEL <label>
Defines a form container
Create labels of user input
INPUT <input>
Create different types of user input
LABEL ATTRIBUTES
for
Assign the label to the input with same ID
INPUT ATTRIBUTES
type
id
name
Type of the input field
Assign the input to the label with same 'for'
Set the name for an input
INPUT ATTRIBUTES
placeholder
value
required
Display a hint in the input
Set the initial value for an input
Set an input to be compulsory to fill up
TEXT AREA <textarea>
Creates a multi-line text input
Collect longer user input in forms
Requires attributes
TEXTAREA ATTRIBUTES
cols
rows
id, name
Set the number of columns or width
Set the number of rows or lines
Refer to input attributes
FORMS
FORMS
TIPS
Don't forget to close tags when needed
No need to memorise all the tags
Keep practicing and explore
RESOURCES
FEEDBACK FORM
https://forms.gle/PPT3TKDzxdMsKKiq8
SOCIAL MEDIA
