|
|
Post by Admin on Jun 29, 2015 14:45:11 GMT
Write your own HTML programs and applications.
|
|
|
|
Post by Admin on Jun 29, 2015 14:45:24 GMT
HTML Instruction: Follow the 4 steps below to create your first web page with Notepad. Step 1: Open Notepad. To open Notepad in Windows 7 or earlier: ... Step 2: Write Some HTML. Write or copy some HTML into Notepad. ... Step 3: Save the HTML Page. Save the file on your computer. ... Step 4: View HTML Page in Your Browser. Step 1: Open Notepad To open Notepad in Windows 7 or earlier: Click Start (bottom left on your screen). Click All Programs. Click Accessories. Click Notepad. To open Notepad in Windows 8 or later: Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad. Step 2: Write Some HTML Write or copy some HTML into Notepad. <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> Step 3: Save the HTML Page Save the file on your computer. Select File > Save as in the Notepad menu. Name the file "index.htm" or any other name ending with htm. UTF-8 is the preferred encoding for HTML files. ANSI encoding covers US and Western European characters only. Step 4: View HTML Page in Your Browser Open the saved HTML file in your favorite browser. The result will look much like this: To open a file in a browser, double click on the file, or right-click, and choose open with. |
|
|
|
Post by Admin on Jun 29, 2015 14:45:35 GMT
Just like "follow the bouncing ball", power up Notepad and start with this...
<html>
</html>
Each one of those is called a tag. There is a starting tag and a closing tag. To make a closing tag just add a / to the starting tag. Most, but not all tags have a closing tag. Think of tags as enclosing a bit of text for the browser to interpret. The browser will interpret everything between <html> and </html> as an HTML document. Different tags are interpreted different ways by the browser. Let's proceed...
Every HTML document needs a pair of head tags.
<html>
<head>
</head>
</html>
The only thing we have to concern ourselves with in the head tags (for now) are the title tags.
<html>
<head>
<title></title>
</head>
</html>
And the bulk of the page is going to be within the body tags.
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Oh, and one more thing, give your document a title, and put something in the body.
<html>
<head>
<title>onestopseller page!</title>
</head>
<body>
Hello Guest!
</body>
</html>
Now save it, not as a text document, but as a html document. Save it as page1.html in a new folder somewhere. If yer a little fuzzy about how to do this then here's what you do...
In your Notepad window click File then Save As.
|
|
|
|
Post by Admin on Jun 29, 2015 14:45:50 GMT
type the following code -
<html><head><title>Web Designing</title></head>
<body bgcolor="black">
<font face="Bradley Hand ITC" color="white" size="5">You are learning Web Designing</font>
<font face="Cooper Black" color="green" size="4">You are learning Web Designing</font>
<font face="broadway" color="red" size="6">You are learning Web Designing</font>
<font face="Aerial" color="yellow" size="8"> You are learning Web Designing</font>
<font face="Comic Sans MS" color="purple" size="10"> You are learning Web Designing</font>
<font face="broadway" size="4" color="#FF0000">
</body></html>
|
|
|
|
Post by Admin on Jun 29, 2015 14:45:57 GMT
Here is the explanation to the the HTML code of this Web page: As you see here that all the text are in written in one complete line, but you can change it by using <br> [break tag. Its a empty tag] or <p> [paragraph tag. Its a container tag]. You need to use it just where you want to break the line ( <br> ) or from where you want to start a new paragraph ( <p> ). After you use <br> tag or <p> tag you will see the output like this:- You can also use the hexadecimal number of any color. Like you can also use this line for displaying text in red color |
|
|
|
Post by Admin on Jun 29, 2015 14:46:36 GMT
To make text look BOLD in your web pages use <b> tag. Its a container tag so you need to close it every time you open it
Example of <b> tag:-
<b>You are learning Web Designing</b>
To make text look Italic in your Web pages use <i> tag. Its also a container tag so you need to close it every time you open it.
Example of <i> tag:-
<i>You are learning Web Designing</i>
To make text look underlined, you have to use <u> tag. Its also a container tag.
Example of <u> tag:-
<u>You are learning Web Designing</u>
|
|
|
|
Post by Admin on Jun 29, 2015 14:46:46 GMT
Here is how you will type it on the Notepad
<html><head><title>Web Designing</title></head>
<body>
This is text will be displayed with default color, size and font style. <font size="5" color="green"><b>you are learning web designing</b></font>
<i>text will be displayed in italic </i>
<u>text will be displayed underlined</u>
</body>
</html>
|
|
|
|
Post by Admin on Jun 29, 2015 14:46:58 GMT
Warnings
While using two or more container tags on text, you should take very care while closing those tags. Suppose you opened <font> tag for a text before <b> tag then you should close that <b> tag first then <font> tag.
If the opening pattern of tags are like this --- any tag A > any tag B > any tag C
then the closing pattern of tags should be like this --- any tag A < any tag B < any tag C
The grater sign in opening pattern of tags shows that "tag A" have be opened before "tag B" and "tag B" have been opened before "tag C"
And the less than sign in closing pattern of tags shows that "tag A" have been closed at last, "tag B" have been closed just after "tag C" while "tag C" has been closed at the first.
It might have got very confusing here. Don't worry I fill show you with an example -
Suppose here is the code--
<font><b><i>You are learning Web Designing</i></b></font>
as you can see the closing pattern of tags is just opposite of the opening pattern of the tags
similarly, if
<font size="6"><b><i><u>You are learning Web Designing</u></i></b></font>
here also the closing pattern of tags is just opposite the opening pattern of tags.
You should also know that use of attributes in any tags will not change this method. As here size attribute of font tag doesn't change the closing pattern.
The <b>, <i> and <u> tags which we saved earlier will give this output:-
|
|
|
|
Post by Admin on Jun 29, 2015 14:47:11 GMT
ADDING HEADINGS
There are six levels of heading in HTML. These are -
<h1> </h1> -- the biggest
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6> -- the smallest
This is how you will use the heading tags in your web page -
<h1> example of heading </h1>
<h2> example of heading </h2>
<h3> example of heading </h3>
<h4> example of heading </h4>
write similar to his upto <h6> and you can even use font , bold, italic, underline tags to customize it more
|
|
|
|
Post by Admin on Jun 29, 2015 14:47:13 GMT
WHAT YOU HAVE LEARNED in THIS STEP
You learned the following things:-
Basic structure of web page
what are container and non-container tags.
How to add text, background color and title to you web page
How to make your text more customized using bold, italic, underline and heading tags and some attributes.
What should be the closing pattern of tags.
Step 3: CUSTOMIZING YOUR WEB PAGE
Customizing your web page means enhancing the look of your page. You can do this by adding pictures, videos and other media files too such as audio clips (.mp3, .wmv, etc)
ADD BACKGROUND IMAGE
Here I will tell you how you will add images to your web pages instead of colors as we did earlier.
For adding image as a background of your web pages you can choose either of the following options:-
Using Background attribute:
By using background attribute you can easily add image as a background. This is how you will be using it-
<body background="image source">
Here you will replace "image source" [without the quotes] with the complete path of the image.
Example: Suppose your image is stored in the folder named "images" located in the "E" drive of your computer, then you will be using the following path for this image:-
C:\image\something.jpg
Here something.jpg is your image name with .jpg extension.
|
|
|
|
Post by Admin on Jun 29, 2015 14:47:25 GMT
ADDING IMAGE to YOUR WEB PAGE • For adding images to your web pages you will be using <img> tag. Some of the attributes of <img> tag are: 1. alt: every text assigned with this attribute will be displayed by the web browser when the image will be being loaded or if its unable to display the images. 2. src: you will use this attribute to assign the path of the image you want to display on your web page 3. height/width: these attributes are used to assign height and width of the image. You can set the height and width of you image by either percentage value or by pixel value. 4. align: using this attribute you can position your images either on right or left side of your web page Tips You can also apply border to your image by using "style" attribute: <img style="border:5 solid yellow" src="F:\Wallpaper\Wallpapers5\abismo.jpg" height="200" width="400" alt="image"> OR <img style="border:5 dotted red" src="F:\Wallpaper\Wallpapers5\abismo.jpg" height="200" width="400" alt="image"> You can choose any size and color of your border but remember to use "solid" or "dotted" before color name. Applying border could give this type of images: |
|
|
|
Post by Admin on Jun 29, 2015 14:47:43 GMT
ADDING VIDEO to YOUR WEB PAGE
You can simply use <embed> tag to add videos.
<embed src="E:\image\video1.mp4" height = "350" width="500" autostart="false"></embed>
If you change the "autostart" value to "true" then your video will start playing as soon as you open your web page.
|
|
|
|
Post by Admin on Jun 29, 2015 14:47:55 GMT
ADDING AUDIO to YOUR WEBPAGE
You can add music to your web page in the same way to added video. Just instead of video file path use the path to your music file.
<embed src="E:\image\song.mp3" height="100" width="100" autostart="false"></embed>
If you use this tag then you will see a audio player on your web page.
You can also run any audio file in the background by using this tag:
<bgsound src="E:\image\ck.mp3" loop="infinite">
Here "loop" represents the number of times you want to play the audio. You can use 0, 1 ,2 or any other number, depending on your interest.
Use this tag just after the <body> tag:
<body><bgsound src="files/ck.MP3" loop="infinite">XXXXXXXXXXXXXXXXXXXXXXXXXXXXX</body>
Using <bgsound> tag will not add any music player to your web page but still you will be hearing it.
|
|
|
|
Post by Admin on Jun 29, 2015 14:48:02 GMT
ADD LINKS If you want to link a different site or any other web page, then you have to use <a> tag also known as anchor tag. If your web page is named "something.html" and is stored in the folder named "webpages" and you wanna link it to your web pages, then you will use the following code:- <a href="webpages/something.html">Something</a> This code will display the text "Something" in a underlined blue font, the same as this one WonderHowTo. If you want to change the color of the unvisited , visited and active link, then you have to use the following attribute with the <body> tag:- <body link="blue" alink="purple" vlink="red"> If you want to link any Website to your web page then use the URL of that web page withing the <a> tag - <a href="http://wonderhowto.com">WonderHowTo</a> GIVE NAME to ANY SECTION of YOUR WEB PAGE You can use "name" attribute of the <a> tag to give unique name to any section of your web page. In other words, You create a bookmark within your web page. You can use this bookmark to create links directly to this section - <a name="section name">My section</a> Now you can create direct links to the section named "My section" withing the same web page using this code format - <a href="#section name">Link to My section of this web page</a> If you want to link this section from another web page, then use this code format:- <a href="ck.html#section name">Link to the My section of ck web page</a> |
|
|
|
Post by Admin on Jun 29, 2015 14:48:13 GMT
ADDING CLICKABLE IMAGE To make any image clickable, you just need to use <a> tag before the <img> tag. Here is an example: <a href="http://google.com"><img src="path of the image"></a> So, any click on this image will redirect the web browser to google.com |
|
|
|
Post by Admin on Jun 29, 2015 14:48:34 GMT
ADDING TABLES to YOUR WEB PAGE You add tables in you web page using <table> tag. For rows you have to use <tr> tag and each column is divided into cells using <td> tag. The syntax of <table> tag:- <table><tr><td>xxxxxxxxxxxx</td><td>xxxxxxxxxxxxx</td></tr> <tr><td>xxxxxxxxxxxxxx</td><td>xxxxxxxxxxxxxxxxxxx</td></tr> </table> |
|
|
|
Post by Admin on Jun 29, 2015 14:48:36 GMT
Cellpadding and Cellspacing: Cellpadding: Cellpadding is an attribute of <table> tag. By using cellpadding attribute you can set the amount of space between the contents of the cell and the cell wall. Ex:- <table cellpadding="4"> Cellspacing: Cellspacing is also an attribute of <table> tag. By using cellspacing attribute you can set the amount of space between the table cells. Ex:- <table cellspacing="4"> |
|
|
|
Post by Admin on Jun 29, 2015 14:48:58 GMT
ADDING BACKGROUND COLOR and IMAGE to TABLE BACKGROUND COLOR: You can background color to your table and cells simply by using "bgcolor" attribute. <center><table bgcolor="yellow" cellpadding="20" cellspacing="25" style="border:10 solid green"> <tr><td bgcolor="light blue" style="border:4 solid red">xxxxxxxxxxxx</td> <td bgcolor="purple" style="border:5 dotted purple">xxxxxxxxxxxxx</td></tr> <tr><td style="border:5 solid blue">xxxxxxxxxxxxxx</td> <td bgcolor="pink">xxxxxxxxxxxxxxxxxxx</td></tr> </table> |
|
|
|
Post by Admin on Jun 29, 2015 14:49:12 GMT
UNORDERED LISTS An unordered list starts with the <ul> tag and each list item starts with the <li> tag. Example:- <ul> <li>List number 1</li> <li>List number 2</li> <li>List number 3</li> </ul> Output:- All the list items written within <li> tag will be displayed with bullets. If you want to change the shape of these bullets from circle to square then use "type" attribute. Example:- <ul type="square"> <li>List number 1</li> <li>List number 2</li> <li>List number 3</li> </ul> Output:- Try using "disc" value in "type" attribute! You can get the same result but by using different method. If you use "value" attribute with <li> tag then you will get the same result. But here is a twist, suppose you started your first list with number 5 but wanted to list second item with number 10, then you will use the following cod:- <ol> <li value="5">List number 1</li> <li value="10">List number 2</li> <li value="20">List number 3</li> </ol> DEFINITION LIST Definition list contains list of items with a description or definition of each item. Every definition list start with <dl> tag and ends with </dl> tag. <dt> tag which is used within the <dl> tag defines a definition list. <dd> tag which is used within <dt> tag defines the description for each list. Example:- <dl> <dt>Item number 1</dt> <dd>Definition or Description for 1st Item</dd> <dt>Item number 2</dt> <dd>Definition or Description for 2nd Item</dd> <dt>Item number 3</dt> <dd>Definition or Description for 3rd Item</dd> </dl> |
|
|
|
Post by Admin on Jun 29, 2015 14:49:26 GMT
ADD MARQUEE EFFECT
By using <marquee> tag you can make text, photos, horizontal line and many more things scroll horizontally or vertically automatically.
Attributes of <marquee> tag:-
Scrollamount:- Scrollamount attribute defines the value by which the content withing <marquee> tag should move.
Direction:- Direction attribute defines the direction in which the content should move. ( right, left, up and down)
There are many more.
Try using these examples and modify it according to your needs:
<marquee scrollamount="12" direction="right">You are learning Web Designing</marquee>
<marquee scrollamount="2" direction="left">You are learning Web designing</marquee>
<marquee behavior="alternate" width="600" height="100"><font color="red" size="5"><b>You are learning Web designing<b></font></marquee>
<marquee behavior="scroll">You are learning Web Designing</marquee>
<marquee behavior="slide">You are learning Web Designing</marquee>
<marquee direction="up">You are learning Web designing</marquee>
<marquee direction="down">You are learning Web designing</marquee>
<marquee bgcolor="yellow" vspace="50" hspace="50"> You are learning Web designing</marquee>
Here "vspace" means "vertical space" and "hspace" means "horizontal space". Assigning value to these attributes will leave space vertically and horizontally.
<marquee scrollamount="20" loop="2"> you are learning web designing</marquee>
Tips
You can also add <marquee> tag before <hr> tag to make it scroll in any direction.
You can use <marquee> tag for creating sliding images.
|
|
|
|
Post by Admin on Jun 29, 2015 14:49:41 GMT
ADD SUBSCRIPT, SUPERSCRIPT and STRIKE
SUBSCRIPT and SUPERSCRIPT:
Use <sub> and <sup> tags to give subscript and superscript affect to any text or number. Generally, these tags are helpful while creating Science subject (mathematics, physics, chemistry, etc) related web pages.
STRIKE:
This tag ( <strike> ) will display a line through the middle of the text.
|
|
