HTML
© Gilbert Phuah
Try to create a website using HTML
1. Open Notepad 3. Save this file as
2. Type this code [Link] to desktop
Browse your Website
1. DO NOT close the notepad 3. Now, your web-browser will be
2. Double click your file on desktop opened and looked like this:
HTML File
When opened by Notepad When opened by Browser
Congratulations
Why Learn web development?
Syllabus of Create own As
IGCSE ICT web blog. freelancer
Is there any other language to create
a website?
No
What is HTML?
HTML is the standard markup language for creating Web pages.
• HTML stands for Hyper Text Markup Language
• HTML describes the structure of Web pages using markup
• HTML elements are the building blocks of HTML pages
• HTML elements are represented by tags
• HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
• Browsers do not display the HTML tags, but use them to render the content of the page
HTML tags
<tagname>content goes here...</tagname>
• HTML tags normally come in pairs like <p> and </p>
• The first tag in a pair is the start tag, the second tag is the end tag
• The end tag is written like the start tag, but with a forward slash inserted
before the tag name
A Simple HTML Document
meta information about
declaration defines this <!DOCTYPE html> the document
document to be HTML5 <html>
<head>
the root element of an <title>Page Title</title> title for the document
HTML page
</head>
visible page content <body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
large heading
</body>
</html> paragraph
When you did changes, you need to
save your work first!
Caution
Web Browsers
• The purpose of a web browser
(Chrome, IE, Firefox, Safari) is to read
HTML documents and display them.
• The browser does not display the
HTML tags, but uses them to
determine how to display the
document
Notepad++
• You can write HTML in any text editing
software (Notepad, TextEdit,
Dreamweaver…)
• Notepad++ is a text editor and source code
editor for use with Microsoft Windows.
Notepad++ is distributed as free software.
• It has been downloaded over 28 million
times.
• It may properly highlight code written in a
supported schema but whether the syntax is
internally sound or compilable cannot be
verified.
Write HTML Using Notepad++
• Step 1: Open Notepad++ • Step 3: Save the HTML Page
Select location
• Step 2: Write the HTML
• <!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p> Name your file
</body>
</html>
Choose filetype as Click to save file
Hyper Text Markup Language
View your HTML
HTML Basic Tag
• HTML template
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
HTML Basic Tag → Heading Text
HTML Basic Tag → Paragraph
• HTML Paragraphs :
• <p>Your text here</p>
• HTML Break line :
• Your <br> text here
• HTML Preformatted text:
• <pre>Your text
he re </pre>
HTML Basic Tag → List
HTML Basic Tag → Hyperlink, button and
image
• HTML Links
• <a href="[Link] is a link</a>
• HTML Buttons
• <button>Click me</button>
• HTML Images
• <img src=“image url"/ >
HTML Basic Tag → Hyperlink, button and
image
<img
<button
<a…
HTML Attributes → Size
HTML Attributes
• The alt attribute specifies an alternative text to be used, when an image
cannot be displayed.
• The title Attribute is added to the <p> element. The value of the title
attribute will be displayed as a tooltip when you mouse over the paragraph
HTML Attributes
alt attribute title Attribute
HTML Style
• <tagname style="property:value;">
• Setting the style of an HTML element, can be done with the style attribute.
• Basic elements:
• background-color
• color
• font-family
• font-size
• text-align
HTML Style
HTML Style
• In HTML, a color can be specified by using a color name
• HTML supports 140 standard color names (click me)
HTML Tag →Text Formatting
• <b> - Bold text
• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Small text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text
HTML Tag →Text Formatting
HTML Tag →Quotation and Citation
HTML Tag → Comment
• Comment tags are used to insert comments in the HTML source code.
• <!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
• <!-- Do not display this at the moment
<img border="0" src="pic_mountain.jpg" alt="Mountain">
-->
HTML Tag → Lists
HTML Tag → Table
Table tag
header
row
data
HTML Symbols
• Many mathematical, technical, and
currency symbols, are not present on
a normal keyboard.
• To add such symbols to an HTML
page, you can use an HTML entity
name.
• If no entity name exists, you can use
an entity number, a decimal, or
hexadecimal reference.
• All HTML symbol (click me)
HTML → CSS
HTML → CSS
• CSS stands for Cascading Style Sheets.
• CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
• CSS saves a lot of work. It can control the layout of multiple web pages all at once.
• CSS can be added to HTML elements in 3 ways:
• Inline - by using the style attribute in HTML elements
• Internal - by using a <style> element in the <head> section
• External - by using an external CSS file
• The most common way to add CSS, is to keep the styles in separate CSS files. However, here we
will use inline and internal styling, because this is easier to demonstrate, and easier for you to try
it yourself.
Inline CSS
• An inline CSS is used to apply a unique style to a single HTML element.
• An inline CSS uses the style attribute of an HTML element.
• This example sets the text color of the <h1> element to blue:
• <h1 style="color:blue;">This is a Blue Heading</h1>
Internal CSS
• An internal CSS is used to define a
style for a single HTML page.
• An internal CSS is defined in the
<head> section of an HTML page,
within a <style> element:
External CSS
• An external style sheet is used to define • <!DOCTYPE html>
the style for many HTML pages. <html>
<head>
• With an external style sheet, you can <link rel="stylesheet" href=
change the look of an entire web site, by "[Link]">
changing one file! </head>
• To use an external style sheet, add a link <body>
to it in the <head> section of the HTML
page: <h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>