Level no.4

Lecture 4

How to create Boilerplate Automatically in html?
To create boilerplate automatically  in html. "Shift + 1" keyword is used.


How to change color in html?
<font></font> tags are used to change color in html. In font tag color attribute are used.

How to use Font tag with color attribute?
<font color="purple"> Hello World </font>.
Hello World

Difference between tags and attribute?
Tags are used to hold the html element and attributes add additional information in tags.We can apply multiple attribute in tags.

How to change size in html?
To change size in html <font></font> tag with size attribute.

How to use Font tag with size attribute?
<font size="100">Pakistan</font>.
Pakistan.

How to change writing style  in html?
The style of the writing is changed by using font tag with face attribute.

How to use?
To use font tag with face attribute we can change writing style.
<font face=" Georgia"> Hello World </font>.
Hello World.

Tip: We can use color, size and face attributes in one font tag.
<font color="yellow" size="200" face="Arial"> Islamabad is capital of Pakistan.</font>.
Islamabad is capital of Pakistan.

Ordered and Unordered List in html

Ordered List: For ordered list <ol></ol> tags are used.In ordered list, it is used to create a list of items in  specific order.<li></li> tags are as used in ordered list for text.

For Example:
<ol>
<li>Black Phone</li>
<li>Missing</li>
<li>Get out</li>
<li>Red Eye</li>
</ol>

Output
1.Black Phone
2.Missing 
3.Get out
4.Red Eye

There are some more ordered list e.g. uppercase letters, lowercase letters, uppercase roman numbers, lowercase roman numbers and numbers(default).These all are used with "type" attribute in <ol> tag.
 
Uppercase Letters: 
<ol type="A"></ol>

Code:
<ol type="A">
<li>Black Phone</li>
<li>Missing</li>
<li>Get out</li>
<li>Red Eye</li>
</ol>

Output
A. Blach Phone
B. Missing
C. Get out
D. Red Eye

Lowercase Letters:
<ol type="a"> </ol>

Code:
<ol type="a"> 
<li>Black Phone</li>
<li>Missing</li>
<li>Get out</li>
<li>Red Eye</li>
</ol>

Output
a.Black Phone
b.Missing
c.Get out
d.Red Eye

Uppercase Roman Numbers:
<ol type="I"></ol>

Code:
<ol type="I"> 
<li>Black Phone</li>
<li>Missing</li>
<li>Get out</li>
<li>Red Eye</li>
</ol>

Output
I.Black Phone
II.Missing
III.Get out
IV.Red Eye

Lowercase Roman Numbers:
<ol type="i"></ol>

Code:
<ol type="i"> 
<li>Black Phone</li>
<li>Missing</li>
<li>Get out</li>
<li>Red Eye</li>
</ol>

Output
i. Black Phone
ii. Missing 
iii.Get out
iv.Red Eye

Numbers list:
<ol type="1"></ol>

Code:
<ol type="1"> 
<li>Black Phone</li>
<li>Missing</li>
<li>Get out</li>
<li>Red Eye</li>
</ol>

Output
1. Black Phone
2.Missing
3. Get out
4. Red Eye

Unordered List:
<ul></ul> are tags used for unordered list. Every text or number is start with <li> and end with </li> tags. Bullets, Squares and black circle are used in unordered list.

For Example:
<ul>
<li>Cow</li>
<li>Goat</li>
<li>Dog</li>
<li>Cat</li>
</ul>

Output
  • Cow
  • Goat
  • Dog
  • Cat
In unordered List Circle, square and disc attributes are used to print different styles.

Circle:
<ul type="circle"></ul>

Code
<ul type="circle">
<li>Cow</li>
<li>Goat</li>
<li>Dog</li>
<li>Cat</li>
</ul>

Output
  • Cow
  • Goat
  • Dog
  • Cat

Square
<ul type="square"></ul>

Code
<ul type="square">
<li>Cow</li>
<li>Goat</li>
<li>Dog</li>
<li>Cat</li>
</ul>

Output
  • Cow
  • Goat
  • Dog
  • Cat

Disc
<ul type="disc"></ul>

Code
<ul type="disc">
<li>Cow</li>
<li>Goat</li>
<li>Dog</li>
<li>Cat</li>
</ul>

Output
  • Cow
  • Goat
  • Dog
  • Cat
Summary:

  • List provide a natural and commonly used grouping of content.
  • Very often, list used for structuring navigation portions of the web page.

Comments

Post a Comment

Popular posts from this blog

Level no.21

Image
CSS Properties  In this lecture we will study about properties of CSS, that define  how HTML element should be displayed on web-page and how we make our web-page layout defined and manageable. Here are some CSS properties: border: It is used for defining the border around the element. syntax:  border: 5px solid black; border-width: It is used for setting width of the border around the element. Syntax:  border-width: 10px; border-style: It is used for setting style of border, in which style the border will appear. Syntax: border-style:solid; border-color:  It is used for changing the color of the border around the HTML element. syntax: border-color: 5px   solid black; border-radius:  It is used for making border corners round, giving them round shape.You can make any side of the border round just by assigning the exact position. Syntax: border-radius: 39px;  You can gradually increase the value according to your preference. Width and Height: This property sets the dimensions of the
Read more

Level no.3

Image
 Lecture 3 In this lecture I study about tags which are used in html. Bold:   To do text bold in html. we use tags <b> </b>. For example <b> Hello World </b>. Hello World Italic: To do text  italic in html.we use tags <i> </i>. For example <i> Hello World < /i>. Hello World     Underline: To place line under any text. we use tags <u> </u>. For example <u> Hello World </u>   Hello World Strike: To use Strike tag in html for unimportant and inaccurate text. For example <strike> 100 </strike>. 100   How to create random paragraph in html? We use "lorem" keyword to create random paragraph in html.           How to use ? <p> lorem <p>. To keep paragraph  on  one page: To keep paragraph on one page in html we use "Alt+Z" keyword.  Superscript and Subscript in html We use superscript and subscript in html to write any formula's and power of a number. Superscript:  Superscri
Read more