You are on page 1of 12

HTML is also known as HyperText Markup Language. It is a major markup language for web development.

It is written in the form of HTML tags like <html>. They usually come in pairs like <html> (to open) and </html> (to close). A website is a collection of such tags; browsers like explorer, fire fox, and chrome use these tags to interpret the commands. HTML allows the use of images, videos etc. to create an interactive environment for the user. HTML tags are not directly visible to the user but you can view them by clicking the right click button of the mouse and selecting the view source command. What do you need: You dont need any special software to run the HTML commands, you can use Windows Notepad to execute the commands. Remember to save your file as .htm or .html format otherwise it will not run HTML commands. Getting started with tags How to start: Always start by typing <html> in notepad or other development platform. And end it with </html> tag HTML Headings: To provide headings we use <h> (to open) and </h> (to close) For multiple headings we use <h1> </h1> <h2> </h2> and so on. Input

Save it as .html and then open it in Explorer

Output

Why headings are important: 1. Search engines use your headings to index the webpage 2. Pages are structured as per the headings 3. H1 should be most important and h2 is less important i.e. higher the number lower the preference

The text you want to show to viewers of webpage should always be written between the tags <body> </body> To change the paragraphs: to change the paragraphs you can use <p> (to open) and </p> (to close) That means to start writing you should write everything in between <p> and </p> To provide a link we use the tag: <a href=link address> Link name </a> Example <a href=www.google.com> google </a> Input:

Output:

Note: you can give the link of any file, website or any video, audio etc. using this tag. To insert any image into your webpage use the tag: <img src=image name width= height= /> Example <img src=nothing.jpg width=130 height=125/>

Input:

Output:

<hr /> tag creates a horizontal line on the webpage <br /> tag is used to break the line

Input:

Output:

<b> is used to make the text bold <i> is used to make the text italic <big> is used to make the text appear big <em> is used to emphasize on the text <small> is used to make the text appear small <font> tag is used to define the font size, type etc. in a webpage

Example: <font size=13 color=red face=Ariel> Input:

Output:

Instead of using <font> you can also create CSS (Cascading Style Sheet) which is easier to use and execute. CSS can be used with all the text related tags like <p>, <h> etc. <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>

Input:

Output:

Text Alignment: In order to make webpage attractive text alignment is necessary. You can align the text using CSS tags <p style="text-align:center;">Center-aligned heading </p>

Input:

Output:

Marquee effect on text: In order to scroll text across the webpage you can use <marquee> and </marquee> tags e.g. <marquee width=23 direction=right bgcolor=Red> </ marquee> Tables in HTML:

To work on tables you can use <table> tag, for rows <tr> tag and for cells you can use <td> tag, to display border define border in <table> tag. You can select various border styles from 1 to 10. Example: <table border="1"> <tr> <td> Hello </td> <td> Cell 2 </td> </tr> <tr> <td> Hi </td> <td> Row 2 </td> </tr> </table>

Input:

Output:

HTML Forms: Forms are used to transfer data from the webpage to the server. Forms consist of textfields, checkbox, radio-buttons etc. <form> </from> tag are used to create HTML forms Input element: it is used for users input, e.g. you must have created an email account using input element (entered data in text-fields etc.) The type of input element is defined in <input type> tag Text Field: <form> First name: <input type=text name=firstname /> <br /> Last name: <input type=text name=lastname /> </form> Password box: <form> Enter Password: <input type=password name=pwd /> </form> Radio-buttons: <form> <input type=radio name=gender value=male /> Male <br /> <input type=radio name=gender value=female /> </form> Checkbox: <form> <input type=checkbox name=Class value=First /> First Class <br />

<input type=checkbox name=Class value=Second /> Second Class </form> Submit button: <form name=input action=html_form_act.asp method=get> <input type=submit value=submit /> </form> In order to transfer data to the server you need to learn asp.net or any other database management system. Now we are ready for designing your first compact webpage: Code: <html> <body style="background-color:yellow;"> <h1 style="bgcolor:white;"> <p style="color:green;text-align:center;font-size:30;background-color:red;">This is my first webpage!</p> <br /> </h1> <p style="font-size:20;background-color:Blue;color:white;"> <b> Hi I know HTML </b> </p><br /> <Marquee style="text-align:center;color:white;background-color:black;fontsize:20;Width:135;> <p style="font-size:30;color:White;"> Enter your details </p> </Marquee> <form> First name: <input type="text" name="firstname" /> <br /> Last name: <input type="text" name="lastname" /> <br /> Enter Password: <input type="password" name="pwd" /> <br /> <input type="radio" name="gender" value="male" /> Male <br /> <input type="radio" name="gender" value="female" /> Female <br /> <input type="checkbox" name="Class" value="First" /> First Class <br /> <input type="checkbox" name="Class" value="Second" /> Second Class <br /> <form name="input" action="html_form_act.asp" method="get"> <input type="submit" value="submit" />

</form> </body> </html> Save it as first.html And then open it in explorer Input:

Output:

You might also like