Post on 13-Jul-2015
Learn HTML in 30mins
Hi Friends..
• This tutorial specially designed for my friends to learn HTML easily keeping in view of NON-CSE/IT students.
• My Language will be so simple and friendly.. !!
Introduction
What is HTML??
HTML stands for Hyper Text Markup Language.
Let us understand word by word ->
Language -> HTML is a programming language similar to C,C++, etc. With this language we can interact with Computer.
Markup -> It is type of programming language. It you know “C”, it is called procedural language. Because, it is written in form of functions.
Procedural Type of language:-
It contains all functions. we will write everything inside the functions only.
Example:-
main(){ // starting of function
}//closing of function
Markup Type of language:-
It contains all TAGS..instead of functions.
<main> </main> <sum> </sum>
Here, <main> refers to starting TAG. </main> refers to end of TAG.
• Hey… Don’t think so much. In MARKUP type language, we WRITE with TAGS instead of functions. That’s it!
• Now, What is HYPER TEXT??
• The text you can see in NOTEPAD or MS-WORD are normal text. When you click on NORMAL TEXT, nothing happens.
• But, in some websites, when you click on some TEXT, some ACTION Like Opening other website may occur. So, such text is called HYPERTEXT. Understood???
• If you didn’t understood, Go to Google.com and Click “GMAIL”. Then it navigates to Gmail Website. Here, GMAIL is HYPERTEXT.
• So, finally, with HTML , we can design our own websites!! Excited??
• Go to NEXT Slide.. We will quickly design our own website.
We can write our HTML code in any editor. Many IDEs and editors available on net.
But, we start with NOTEPAD.
So, Open NOTEPAD from your Computer.
Now Write the following code
<HTML>
<HEAD> <TITLE> HTML TUTORIAL</TITLE></HEAD>
<BODY>WELCOME TO HTML</BODY>
</HTML>
Don’t worry.. I will explain the code later.
Save as HTML File
1. Click on FILE2. Click on save as3. Under SAVE AS TYPE:
SELECT ALL FILES as shown in Picture.
1. Now, Type file name as “start.html”
1. Go to DESKTOP and you can see start.html is created.
1. Double click on start.html,
2. You can see the file is opened in browser.
3. Check the preview.
Understanding the code!!
1. Here, <HTML> is basic and parent tag for all TAGs. All tags we will write inside the <HTML> tag.
• You may get doubt? Is HTML CASE sensitive…?
No,You can write <HTML> or <html> or <Html> or <hTML>…
• <html> is a root tag. Like main() function in C. Whatever code we write, we write inside the <HTML>.
• Inside <HTML>, We have <HEAD> and <BODY> tags.
• Inside <HEAD> tag, we will write all HEADER information like JAVASCRIPT, STYLEs, TITLE information. We will discuss this later.
• Inside <TITLE> tag, we will write the TEXT to be displayed in the title bar of the browser.
• Inside <BODY> tag, we will write the content to be displayed in the browser.
Explanation:-
Whatever we wrote in <BODY> will appear in BODY of webpage.
Explanation:-
Whatever we wrote in <TITLE>Will appear in TITLE of webpage.
• Let us write our 2nd program.
<html>
<head>
</head>
<body>
<h1>Welcome</h1>
<h2>Welcome</h2>
</body>
</html>
Now, we will check the output.
Note:- Check that, we have not written the <TITLE> in our code. But, there is no error. But, now, the text of the TITLEBAR is default will be PATH of the HTML FILE.
HEADING TAGS.
• <h1>, <h2>,<h3> … are called heading tags.
• If we write the text in <h1> tag, the text WILL BE LARGER and BOLD. It is called HEADING-1.
• If we write the text in <h2> tag, comparatively, the text size will be reduced. Similarly, we have <h1> to <h6> tags.
• You can see the output of <h1> ,<h2> in previous slide.
Let us write our 3rd Program in HTML.
<html><head></head><body bgcolor=black></body></html>
In the above program, we are changing the property of BODY TAG.There may be may one or more properties for each tag. For a BODY TAG, there are many properties,such BACKGROUND COLOR, BACKGROUND IMAGE,TEXTCOLOR, etc etc.
• So, For EACH TAG,like <body>, there may be many number of properties. Here, I am calling those properties as ATTRIBUTES.
• So, BACKGROUND COLOR is named as “bgcolor”. Bgcolor is attribute name.
• So, for every tag, there are many attributes.
• And bgcolor has so many values like RED,BLUE,GREEN,PINK etc etc.
• So, each attributes has so many values.
<p>
• Now, what all TAGS, I will introduce, we will write in <BODY> unless specially mentioned.
• <p> is paragraph tag. Whetever the text is inside the <p> will be rendered as new paragraph.
• Attributes:- align {right,left,center,justify}
• Here, ( right, left,center,justify are values)
• Syntax:-
• <p align=“left”>
<HTML>
<Head>
</head>
<body>
<p align="center">
India officially the Republic of India (Bharat Ganrajya)[c], is a country in South Asia. It is the seventh-largest country by area, the second-most populous country with over 1.2 billion people, and the most populous democracy in the world.
</p>
</body>
</html>
Formatting
• We can format the text as BOLD,ITALIC,UNDERLINE,STRIKETHROUGH, SUPERSCRIPT,SUBSCRIPT.
• <b> - BOLD
• <i> - ITALIC
• <u> - underline
• <strike> - strikethrough
• <sup> - superscript
• <sub> - subscript
<HTML>
<Head>
</head>
<body>
<b> This is in BOLD </b> <br/>
<i> This is in ITALIC </i><br/>
<u> This is in underline </u><br/>
<strike> STRIKETHROUGH </strike><br/>
2<sup>5<br/>
H<sub>2</sub>O
</body>
</html>
Links-HYPERTEXT
<HTML><Head></head><body><a href="http://google.com"> Click here</a></body></html>
Here, <a> is anchor tag. When we click on “CLICK HERE”, the page will be navigated to GOOGLE HOME PAGE. That link, we have to specity in “href” attribute.
• Congratulations once again. You just now completed your HTML Basics.
• But, Don’t stop it here. You have to learn so many tags in HTML for creating awesome websites. But, If you know these basics, now, it just exploring all the new tags .. That’s it! Enjoy..
• I prefer go to w3schools.com first, and explore all the tags.
-
Teja Swaroop Arukoti
tejaswarooparukoti@gmail.com
@TejaArukoti – Twitter