Web Visualization with HTML5, CSS3, and JavaScript is the course with the rapidly changing web development technologies, it has become important to stay in line with them to progress within the industry, which is why this course in web virtualization has been brought to you to spruce up your web designing and animating skills using HTML5, CSS3 and JavaScript. The latest features of HTML5, CSS3 and JavaScript is set to be provided to you through this course, hence, it is desired that you have basic knowledge on these programming languages for a smoother learning experience. This course will start off by walking you through the CSS3 virtualization techniques to design and animate webs. You will be taught how to create a 3D element using CSS transition and to transform animates into 2D and 3D, along with an insight into the elements of scalable vector graphics which is needed to create basic images and polygons and to animate. Our tutors will further take you through the canvas aspects of HTML5 to start drawing grids and animations using it. You will also get to learn how to create a callback and create and activate a queue that is needed in animating and the animation libraries that will be essential to your web designing projects. By the end of this course, you will have an outstanding knowledge of web visualization using HTML5, CSS3 and JavaScript to secure yourself a prominent place within the web development industry.

1. Creating you First Web
page!
BY. TR. MJ FERNANDEZ
JOY IN LEARNING SCHOOL

2. Objectives:
1. Define a personal page;
2. Define home page;
3. Apply the different levels of headings;
4. Write web contents in paragraphs and use the line breaks;
5. And list and;
6. Create a simple web page.

3. What is personal web page?
Show your thought, ideas, interest, hobbies, friends, and family that you strongly
want to inform others.
◦ An online diary
◦ Family
◦ Pets
◦ Self-written books poems
◦ Favorite topics, health, politics, music, arts, etc.

4. What is home page?
Home page serves as the entry point in your website. It is the page that is first
displayed by the browser when you type in website address.
It includes:
◦ A welcome message or introduction
◦ A logo- for website branding
◦ The site navigation bar- a link other
pages on your website.
◦ Latest update and modification of you site.

5. Creating your headings.
Headings is used to give emphasis to a certain topic title. Normally, text on the Home page is
given a different look your normal text.

6. Hands-on exercise 6.1: Applying headings
1. Launch Notepad
2. type the following syntax:
3. Save you documents as six levels
Of headings.hmtl.
4. to check the output, open your
file in browser.

8. Creating paragraphs and Line Breaks
Writers separate their and arguments into sequence of paragraphs. The <p> elements is used to
mark a block into paragraph.
Line Breaks: this tag forces the browser to have single line break. It is just like pressing the Enter
key separate a blank space or start a new line in MS word.

9. Adding list
A list is series of names, words, or other items written printed, or imagined one after the other.
TAGS DESCRIPTION
<ol> Defines an ordered list items. (number list)
<ul> Defines an unordered list items. (bulleted list)
<li> It is used for specifying a list item
<dl> It is used for declaring a definition

10. Unordered HTML List - Choose List Item
Marker
The CSS list-style-type property is used to define the style of the list item marker:
Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked

11. Example - Disc

12. Example - Circle

13. Example - Square

14. Example - None

15. Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The type attribute of the <ol> tag, defines the type of the list item marker:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers

16. Numbers:

17. Uppercase Letters:

18. Lowercase Letters:

19. Lowercase Letters:

20. Uppercase Roman Numbers:

21. Lowercase Roman Numbers:

22. HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name),
and the <dd> tag describes each term:

24. Control List Counting
By default, an ordered list will start counting from 1. If you want to start counting
from a specified number, you can use the start attribute:

26. References:
https://www.w3schools.com/html/html_lists.asp
D whiz in Web designing HTML and CSS