1Introduction to HTMLIntroduction to HTMLVibrant Technologies &Computers
2Contents• Getting Started..• What is HTML?• How to create and View an HTML document?• Basic HTML Document Format• The HTM...
What the following term mean:Web server: a system on the internet containg oneor more web siteWeb site: a collection of on...
4What is HTML?Telling the browser what to do, and what props to use.A serises of tags that are integrated into a textdocum...
5The second tag(off switch) starts with a forward slash.For example ,<B> text </B>can embedded, for instance, to do this:<...
6Basic HTML Document Format<HTML><HEAD><TITLE>WENT99</TITLE></HEAD><BODY>Went99</BODY></HTML><HTML><HEAD><TITLE>WENT99</TI...
7How to Create and View an HTML document?1.Use an text editor such as Editpad to write thedocument.2.Save the file as file...
87.You may now switch back and forth between theSource and the HTML Documentswitch to Notepad with the Document Sourcema...
9 Tags in head <HEAD>...</HEAD>-- contains information about thedocument <TITLE>...</TITLE>-- puts text on the browsers...
10 Tags in Body Lets talk TextHeading: <H1> </H1>Center:<Center> </Center>Line Break <P> ,<Br>Phrase Markups: <I></I...
11 Add ImagesUse <IMG SRC=imagefilename> tagsHow to specify Relative pathnamesAttributes of IMG tag-width,height-Alt-A...
12 Add some LinkUse <A href=filename|URL></a>tagsHow to specify Relative pathnamesKinds of URLs-http://www.women.or.kr...
13 How to make colors changes?Hexadecimal number :Color names : <Font color=white>Changing the Background color<BODY B...
14The current HTML document is my.html and the current directory is IamC:- Iam -my.html-your.htmlType this ; <A href=your...
15How to specify Relative pathnamesThe HTML document is my.html and the image file is dragonfly.gifC:-  Iam -my.html Type...
Upcoming SlideShare
Loading in …5
×

Introduction To Html & CSS_Vibrant Technologies & Computers

390 views

Published on

HyperText Markup Language (HTML) is the main markup language for creating web pages and other information that can be displayed in a web browser.
HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags, known as empty elements, are unpaired, for example <img>. The first tag in a pair is the start tag, and the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments and other types of text-based content.
The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.
http://vibranttechnologies.co.in/
http://vibrantgroup.co.in/

Published in: Education, Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
390
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introduction To Html & CSS_Vibrant Technologies & Computers

  1. 1. 1Introduction to HTMLIntroduction to HTMLVibrant Technologies &Computers
  2. 2. 2Contents• Getting Started..• What is HTML?• How to create and View an HTML document?• Basic HTML Document Format• The HTML Basic tags
  3. 3. What the following term mean:Web server: a system on the internet containg oneor more web siteWeb site: a collection of one or more web pagesWeb pages: single disk file with a single file nameHome pages: first page in websiteThink about the followings before workingyour Web pages.Think about the sort of information(content) you wantto put on the Web.Set the goals for the Web site.Organize your content into main topics.Come up with a general structure for pages andtopics.
  4. 4. 4What is HTML?Telling the browser what to do, and what props to use.A serises of tags that are integrated into a textdocument.Tags are ;surrounded with angle brackets like this<B> or <I>.The first tag turns the action on, and the second turns itoff.
  5. 5. 5The second tag(off switch) starts with a forward slash.For example ,<B> text </B>can embedded, for instance, to do this:<HEAD><TITLE> Your text </HEAD></TITLE> it wont work.The correct order is <HEAD><TITLE> Your text </TITLE></HEAD>not case sensitivity.Many tags have attributes.For example, <P ALIGN=CENTER> centers the paragraph following it.Some browsers dont support the some tags and someattributes.
  6. 6. 6Basic HTML Document Format<HTML><HEAD><TITLE>WENT99</TITLE></HEAD><BODY>Went99</BODY></HTML><HTML><HEAD><TITLE>WENT99</TITLE></HEAD><BODY>Went99</BODY></HTML>See what itlooks like:
  7. 7. 7How to Create and View an HTML document?1.Use an text editor such as Editpad to write thedocument.2.Save the file as filename.html on a PC. This is calledthe Document Source.3.Open Netscape (or any browser) Off-Line4.Switch to Netscape5.Click on File, Open File and select the filename.htmldocument that you just created.6.Your HTML page should now appear just like anyother Web page in Netscape.
  8. 8. 87.You may now switch back and forth between theSource and the HTML Documentswitch to Notepad with the Document Sourcemake changessave the document againswitch back to Netscapeclick on RELOAD and view the new HTMLDocumentswitch to Notepad with the DocumentSource......
  9. 9. 9 Tags in head <HEAD>...</HEAD>-- contains information about thedocument <TITLE>...</TITLE>-- puts text on the browsers titlebar.
  10. 10. 10 Tags in Body Lets talk TextHeading: <H1> </H1>Center:<Center> </Center>Line Break <P> ,<Br>Phrase Markups: <I></I> ,<B></B> Create a List Unordered list : <UL><li>Ordered list: <OL><li>Nested
  11. 11. 11 Add ImagesUse <IMG SRC=imagefilename> tagsHow to specify Relative pathnamesAttributes of IMG tag-width,height-Alt-Align-<Img src=my.gif width=50 height=50 align=rightalt=“My image”>
  12. 12. 12 Add some LinkUse <A href=filename|URL></a>tagsHow to specify Relative pathnamesKinds of URLs-http://www.women.or.kr- ftp://ftp.foo.com/home/foo- gopher://gopher.myhost.com/- news://news.nuri.net- mailto:skrhee@women.or.kr
  13. 13. 13 How to make colors changes?Hexadecimal number :Color names : <Font color=white>Changing the Background color<BODY BGCOLOR=#19378a>Changing Text color<BODY BGCOLOR=#19378a TEXT=#ffffff LINK=#ffff66VLINK=#66ffff>Spot color<FONT COLOR=#66ffcc>WENT99</FONT>Image Background<BODY BACKGROUND=bgimg.gif >
  14. 14. 14The current HTML document is my.html and the current directory is IamC:- Iam -my.html-your.htmlType this ; <A href=your.html>Your link </A>C:- Iam -my.htmlChild -your.htmlType this ; <A href=Child/your.html>Your link </A>C:-  Iam -my.html Sister -your.htmlType this ; <A href=../Sister/your.html>Your link </A>C:-  Mother -your.html Iam -my.htmlType this ; <A href=../your.html>Your link </A> Go toBackHow to specify Relative pathnames
  15. 15. 15How to specify Relative pathnamesThe HTML document is my.html and the image file is dragonfly.gifC:-  Iam -my.html Type this ;☞ <IMG SRC=dragonfly.gif>-dragonfly.gifC:-  Iam -my.html Type this ;☞ <IMG SRC=Image/dragonfly.gif> Image-dragonfly.gifC:-  Iam -my.html Type this ;☞ <IMG SRC=../Image/dragonfly.gif> Image-dragonfly.gifC:-  Image -dragonfly.gif Type this ;☞ <IMG SRC=../dragonfly.gif> Iam-my.html Go to Back

×