HTML Exercise
Basic HTML Text Formatting Elements
H1 to H6 : Heading tags
i or em: i means italic style for any text or em used to give
emphasis for any part of the text
b or strong: b for bold and strong also do the same job
Mark: used to highlight a part of the text. Default color is
yellow
small: it reduce the font size of the regular text
ins: used to insert any text inside the paragraph
Del: to delete any text of a paragraph and it is represented as
strikethrough
Sup: for super-script
Design a HTML Page for basic text formatting
Create a HTML page with basic structure
Set the title of page My First Page
Start the body of the page
Start a paragraph with heading 1 as “My First Paragraph”
You can put any content to the paragraph
Paragraph must contain at-least 4 lines
All the lines should be start in new individual line
Change the paragraph text color to red
The first word of the paragraph should be bold
Now design a formula after the paragraph and it should be
2 2 2
𝑥 + 𝑦 + 𝑧 =( 𝐴+ 𝐵)
centre of the page 1
Design a HTML Page
First start with basic html document
Title of the page: Lovely Professional University
Start the body of the page
Give any background color to the page
Heading should be placed at centre of the page
Heading should be given as Computer Science and Engineering
Select the font Arial for the Heading
Give a horizontal line with size 3
Create a paragraph after this
Select paragraph font Arial with size -1
More Text Editing HTML elements Related to Quotation
blockquote: defines a text taken from another source. The source
can be mentioned to the cite attribute
q: used to mark quotations to a small part of the text
address: this tag used to represent address in the webpage
abbr: abbreviation and using title attribute we can mentioned
the full-form
cite: defines the title of a creative page
bdo: used for bi-directional override, used to change the current
text direction. We can use dir attribute to change the text
direction. It has following three directions:
auto
rtl
ltr
Design a Page
Start the page with quotation take
Set the Heading of the Paragraph HTML use H2
Start a paragraph and it must contain the word HTML
Set the abbreviation for the HTML
Paragraph should be displayed with justified alignment
Set the paragraph background color
Set the paragraph text color and font using the inline
style
Draw a horizontal line after the paragraph
Print the address
HTML Colors
Set the background-color of H1 and P element
Set the color (text-color) of P element
Set the border color of H1 element
Dotted
Solid
Set color values using
RGB value (min = 0, max = 25)
Color code (hex code)
Hsl value (Hue, saturation, lightness)
Hue is degree on color wheel from 0 to 360 degree
Saturation and lightness values are in percentage
HSLA (Hue, saturation, lightness, alpha)
Alpha set the transparency of the background (0 is full transparent, 1 not
transparent)
Example of some color based on lightness
Some sample color code
HTML Style - CSS (Cascading Style Sheet)
With CSS, you can control the
color
Font
the size of text
the spacing between elements
how elements are positioned and laid out
what background images or background colors are to be used,
different displays for different devices and screen sizes, and
much more!
Using CSS
CSS can be added to HTML documents in 3 ways:
Inline - by using the style attribute 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
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.
The following example sets the text color of the <h1> element to
blue, and the text color of the <p> element to red:
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.
The following example sets the text color of ALL the <h1> elements (on that page) to
blue, and the text color of ALL the <p> elements to darkorange. In addition, the page will
be displayed with a "powderblue" background color:
External CSS
The external style sheet can be written in any text editor. The file must not contain any
HTML code, and must be saved with a .css extension.
CSS Colors, Fonts and Sizes
Use these styles as internal css
CSS Boarders, Margin and Padding
The CSS border property defines a border around an HTML element.
The CSS padding property defines a padding (space) between the text and
the border.
The CSS margin property defines a margin (space) outside the border.
CSS Boarders
CSS Boarders
CSS Boarders with padding
CSS Boarders, padding and margin
Design this page
Create a page with H3 and set the color as follows
Background color using hsla with lightness = 60%, saturation = 100%,
alpha = 0.5, hue = 100
Text color using hex code as white
Create a paragraph
Set the background color using RGB with R = 150, G = l90, B = 255
Set the text color of the paragraph as hex code
All the colors should be given using style tag as internal CSS
Set the paragraph
Padding
Margin
Border
Set the border radius
HTML Links
Links are found in nearly all web pages. Links allow users to click their way from page to
page.
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
HTML Links 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
HTML URL types
HTML URLs are two types
• Absolute URL (complete website address), used to open an external
page
• Relative URL (without http://www part), used to visit within same
webpage
Image as HTML link
To use an image as a link, just put the <img> tag inside the <a> tag:
Link to an Email Address
Use mailto: inside the href attribute to create a link that opens the user's
email program (to let them send a new email):
Link As HTML Button
To use an HTML button as a link, you have to add some JavaScript code.
JavaScript allows you to specify what happens at certain events, such as
a click of a button:
HTML Link Title
The title attribute specifies extra information about an element. The
information is most often shown as a tooltip text when the mouse moves
over the element.
Design a page with external CSS only
Set the heading of the page with H2 and only use bottom border and it
should be border with hsl color values
Set two paragraph
First paragraph takes the styles from external
Set rounded border with dotted line
Set the backgroud color with transparent color
Second paragraph should be take the style as inline
Create a link to open LPU home page as button
Page should be open in now window
HTML Link Colors
By default, a link will appear like this (in all browsers):
An unvisited link is underlined and blue (a:link)
A visited link is underlined and purple (a:visited)
An active link is underlined and red (a:active)
A select link with mouse has no default property (a:hover)
You can change the link state colors, by using CSS:
HTML Link Colors (link color)
HTML Link Colors (visited link color)
HTML Link Colors (mouse over link color)
Link Bookmark
HTML links can be used to create bookmarks, so that readers can jump
to specific parts of a web page.
Bookmarks can be useful if a web page is very long.
To create a bookmark - first create the bookmark, then add a link to it.
When the link is clicked, the page will scroll down or up to the location
with the bookmark.
Link Bookmark
HTML Images
u
