Tag Description
<html> Defines the root of an HTML document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines a part of text in an alternate voice or mood
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
•Use the style attribute for styling HTML
<body style='background-color:pink;'>
<body background-color='pink;'>
<body style='bgcolor:pink;'>
elements
•Use background-color for background color
•Use color for text colors
•Use font-family for text fonts
•Use font-size for text sizes
•Use text-align for text alignment
Tag Description
<p> Defines a paragraph
<hr> Defines a thematic change in the
content
<br> Inserts a single line break
<pre> Defines pre-formatted text
HTML Quotation and Citation Elements
Tag Description
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a section that is quoted from another source
<cite> Defines the title of a work
<q> Defines a short inline quotation
Using CSS
CSS can be added to HTML documents in 3
ways:
•Inline - by using the style attribute
<-- This is a comment -->
<## This is a comment ##>
<--> This is a comment </-->
<!-- This is a comment -->
inside HTML elements
•Internal - by using a <style> element in
the <head> section
•External - by using a <link> element to
link to an external CSS file
CSS Colors, Fonts and
Sizes
• Here, we will demonstrate some
commonly used CSS properties.
You will learn more about them
later.
• The CSS color property defines
the text color to be used.
• The CSS font-family property
defines the font to be used.
• The CSS font-size property
defines the text size to be used.
Chapter Summary
•Use the HTML style attribute for inline styling
•Use the HTML <style> element to define internal
CSS
•Use the HTML <link> element to refer to an
external CSS file
•Use the HTML <head> element to store <style> and
<link> elements
•Use the CSS color property for text colors
•Use the CSS font-family property for text fonts
•Use the CSS font-size property for text sizes
•Use the CSS border property for borders
•Use the CSS padding property for space inside the
border
•Use the CSS margin property for space outside the
border
HTML Links - The target
Attribute
By default, the linked page will be displayed in the
current browser window. To change this, you must
specify another target for the link.
The target attribute specifies where to open the
linked document.
The target attribute can have one of the following
values:
•_self - Default. Opens the document in the same
window/tab as it was clicked
•_blank - Opens the document in a new window or
tab
•_parent - Opens the document in the parent frame
•_top - Opens the document in the full body of the
window
Chapter Summary
•Use the <a> element to define a link
•Use the href attribute to define the link
address
•Use the target attribute to define
where to open the linked document
•Use the <img> element (inside <a>) to
use an image as a link
•Use the mailto: scheme inside
the href attribute to create a link that
opens the user's email program
Common Image Formats
Abbreviation File Format File Extension
APNG Animated Portable .apng
Network Graphics
GIF Graphics Interchange .gif
Format
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert .jpg, .jpeg, .jfif, .pjpeg, .pj
Group image p
PNG Portable Network .png
Graphics
SVG Scalable Vector Graphics .svg
HTML Image Tags
Tag Description
<img> Defines an image
<map> Defines an image map
<area> Defines a clickable area
inside an image map
<picture> Defines a container for
multiple image resources
Char Number Entity Description
© © © COPYRIGHT
® ® ® REGISTERED
TRADEMARK
€ € € EURO SIGN
™ ™ ™ TRADEMARK
← ← ← LEFT ARROW
↑ ↑ ↑ UP ARROW
→ → → RIGHT ARROW
↓ ↓ ↓ DOWN ARROW
♠ ♠ ♠ SPADE
♣ ♣ ♣ CLUB
♥ ♥ ♥ HEART
♦ ♦ ♦ DIAMOND
Char Number Entity Description
∀ ∀ ∀ For all
∂ ∂ ∂ Partial
differential
∃ ∃ ∃ There exists
∅ ∅ ∅ Empty sets
∇ ∇ ∇ Nabla
∈ ∈ ∈ Element of
∉ ∉ ∉ Not an
element of
∋ ∋ ∋ Contains as
member
∏ ∏ ∏ N-ary product
∑ ∑ ∑ N-ary
summation
Char Number Entity Description
Α Α Α GREEK ALPHA
Β Β Β GREEK BETA
Γ Γ Γ GREEK GAMMA
Δ Δ Δ GREEK DELTA
Ε Ε Ε GREEK EPSILON
Ζ Ζ Ζ GREEK ZETA
Common URL Schemes
The table below lists some common schemes:
Sche Short for Used for
me
http HyperText Transfer Common web pages. Not
Protocol encrypted
http Secure HyperText Secure web pages. Encrypted
s Transfer Protocol
ftp File Transfer Protocol Downloading or uploading files
file A file on your computer
The <input> Element
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute.
Here are some examples:
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting
one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero
or more of many choices)
<input type="submit"> Displays a submit button (for submitting
the form)
<input type="button"> Displays a clickable button
The Target Attribute
The target attribute specifies where to display the response that is received after
submitting the form.
The target attribute can have one of the following values:
Value Description
_blank The response is displayed in a new window or tab
_self The response is displayed in the current window
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the window
framename The response is displayed in a named iframe
TML Form Elements
Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist> Specifies a list of pre-defined options for input controls
<output> Defines the result of a calculation
HTML Input Types
Here are the different input types you can use in HTML:
•<input type="button">
•<input type="checkbox">
•<input type="color">
•<input type="date">
•<input type="datetime-local">
•<input type="email">
•<input type="file">
•<input type="hidden">
•<input type="image">
•<input type="month">
•<input type="number">
•<input type="password">
•<input type="radio">
•<input type="range">
•<input type="reset">
•<input type="search">
•<input type="submit">
•<input type="tel">
•<input type="text">
•<input type="time">
•<input type="url">
•<input type="week">
Input Restrictions
Here is a list of some common input restrictions:
Attribute Description
checked Specifies that an input field should be pre-selected when the page loads (for
type="checkbox" or type="radio")
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field
