Scribd
Upload
46 views

Learn How Get Started With HTML5

This book contains a helpful information which will allow you to create your webpage by using html language

Uploaded by

abhieduo12
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
46 views

Learn How Get Started With HTML5

This book contains a helpful information which will allow you to create your webpage by using html language

Uploaded by

abhieduo12
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 29

INSTALLING THE HTML TOOLS

Steps For Installing Notepad++:


1) Open up the browser Install the google chrome first.

2) Specify the address www.google.com search notepad++. 3) You will get the below screen

4)

5) Now click on the Download of current version.

6) Open the download folder and double click on it then following window will occur.

7) Click on OK

. 8) Click on accept the agreement.

9) Click on next option button.

10)

Click or checked on short icon on desktop.

11)

Click on Finish.

12) Run notepad++ i.e Double Click on it.Having lot more option

13)

Click on new menu.

14)

Write the simple code like

<h1>This is the test program</h1> <p>Welcome To EDUONIX LEARNING.

15)

Click on save from file menu.

16)

Double click on test i.e our file name.

17) Example of heading tag like <h1>to <h6> <p>paragraph tag and some other tag . Write the Code in notepad++ .

18)

Write the code..

<html> <head> <b>Program1</b></head> <title>THIS IS FIRST PROGRAM </title> <style> </style> </head> <body > <marquee><h1>THESE ARE THE DIFFERENT TYPE OF HEADING </h1> </marquee> <h1>THIS IS THE FIRST HEADING</h1> <h2>THIS IS THE SECOND HEADING</h2> <h3>THIS IS THE THRID HEADING</h3> <h4>THIS IS THE THRID HEADING</h4> <h5>THIS IS THE THRID HEADING</h5> <h6>THIS IS THE THRID HEADING</h6> <p bgcolor="red">This is the paragraph tag.</p> </body> </html>

19)

You will get the following window.

20) Click on save and open or double click on it i.e open google chrome browser it will display the following output

21)

Adding simple css in an html document.

Write the code.


<!DOCTYPE html> <html> <head> <style> body { background-color:#b0c4de; } </style> </head> <body> <h1>My CSS web page!</h1> <p>Hello welcome! This is a eduonix learning solution.</p> </body> </html>

22)

It will display the following output.

23) CREATE AN HTML DOCUMENT FOLLOWING ARE THE PROCEDURE.i.e create an new folder

24) Double click on folder right click ,and click on text document.

25)

Give it to the name index .html.

26) When we open in the brower the file i.e index.html it has .txt extension look like.

27) So we have to remove that txt extension Go to organize click on folder and search option .

28)

Click on view .

29) Click on view and uncheck Hide extensions for known file types and click on Ok button.

30)

Remove the txt extension click on yes .

31)

It will change the icon of index.html.

32)

Right click on index.html edit with notepad++

33) <html>

Write the html code

<head> <b>Program1</b></head> <title>THIS IS second PROGRAM in the TEST </title> <style>

</style> </head> <body > <h1>THIS IS THE FIRST HEADING</h1> <h2>THIS IS THE SECOND HEADING</h2> <h3>THIS IS THE THRID HEADING</h3> <h4>THIS IS THE THRID HEADING</h4> <h5>THIS IS THE THRID HEADING</h5> <h6>THIS IS THE THRID HEADING</h6> <a href="E:\vivek\simplecss.html">This is the first link.</a> <a href="E:\vivek\v1.html">This is the first link.</a> <p bgcolor="red">This is the paragraph tag.</p></body>

</html>

34)

Here look like this.

35)

Output .

36) <html>

Write the code .

<head> <b>Program1</b></head> <title>THIS IS second PROGRAM in the TEST </title> <style>

</style>

</head>

<body >

<h1>THIS IS THE FIRST HEADING</h1> <h2>THIS IS THE SECOND HEADING</h2> <h3>THIS IS THE THRID HEADING</h3> <h4>THIS IS THE THRID HEADING</h4> <h5>THIS IS THE THRID HEADING</h5> <h6>THIS IS THE THRID HEADING</h6> <a href="E:\vivek\simplecss.html">This is the first link.</a> <br> <a href="E:\vivek\v1.html">This is the second link.</a><br /> <a href="http://www.google.com">Welcome to google.</a><br /> <p bgcolor="red">This is the paragraph tag.</p> <div> <img src="C:\Users\password\Desktop\Penguins.jpg" alt=Sample Image />

</div> </body>

</html>

37)

The window will look like.

Output.

You might also like