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.
HTML Multimedia Tag
