Monday, November 13, 2017

Uki2 Class 6 - HTML Exercises

Today 6 th day at Uki. We did HTML exercises.

<tagname>Content goes here...</tagname>

We learned some tags in HTML
  1. Heading Tag
  • Heading tag has 6 different styles. h1to 6.
  • For an example

<html>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>
  • The font size of the headings will decrease gradually from h1 to h6.

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6
2. Paragraph Tag
This will begin as <p> tag and end as </p> tag. 
Inside p tag we can customize the font using inline css.

<p style="color:red">I am a paragraph</p>

Output:  I am a paragraph


3.Create Links
<a href="URL"> This is a link </a>
In the URL we have to put the address of site we are going to browse when clicking "This  is a link" word.
4. Image Inserting
<img src="Url" width="20px" height="25px" alt="Image">
src represents source.
So, we have to put the file path of the Image in Url place..
width and height of the Image can be customized by user's comfortable. 
Alt is used when the Image is not seen in the page, the word in the alt attribution will show.

5.Preformatted Text
<pre> tag is used to show in the browser in the format how its typed in source code.

6.Line Break Tag
<br> tag is used to break the line by one line from where it has written lastly.

  • <b> - Bold text
  • <strong> - Important text ( Like as Bold )
  • <i> - Italic text
  • <em> - Emphasized text
  • <mark> - Marked text
  • <small> - Small text
  • <del> - Deleted text
  • <ins> - Inserted text
  • <sub> - Subscript text
  • <sup> - Superscript text
7.Comment Tag
Comment tag is used by developer to know what has typed in the code. It will not visible in Page.
<!--      -->

8.Creating Table
<table> - To create table
<tr> -  Table Row
<td> - Table Data
<th> - Table Header

9.Lists
List is categorized as 3 parts
  1. Ordered List - <ol>
  2. Un- Ordered List - <ul>
  3. List - <li>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Output: 
  • Coffee
  • Tea
  • Milk
inside <ul> tag there are three types to point out in list section...
They are..
  1. disc        -Sets the list item marker to a bullet (default)
  2. circle -Sets the list item marker to a circle
  3. square -Sets the list item marker to a square

<!DOCTYPE html>
<html>
<body>

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

</body>
</html>

Output:
    • Coffee
    • Tea
    • Milk
    Following is a screen-shot of a Page We did in the class...

    Thank You...

    No comments:

    Post a Comment