1 / 14

Introduction to HTML

Introduction to HTML. Contents Getting Started.. What is HTML? How to create and View an HTML document? Basic HTML Document Format The HTML Basic tags. What the following term mean : Web server : a system on the internet containing one or more web site

mellisa
Download Presentation

Introduction to HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to HTML

  2. Contents • Getting Started.. • What is HTML? • How to create and View an HTML document? • Basic HTML Document Format • The HTML Basic tags

  3. What the following term mean: • Web server: a system on the internet containing one or more web site • Web site: a collection of one or more web pages • Web page: single disk file with a single file name • Home page: first page in website • URL: Uniform Resource Locator • Http: Hypertext transfer protocol • Browser: A software program which is used to show web pages Examples: Google chrome, Internet explorer, Mozilla • HTML Editor: A word processor that has been specialized to make the writing of HTML documents more effortless.

  4. What is HTML? • It tells the browser what to do, and what props to use. • A services of tags that are integrated into a text document. • HyperText Markup Language • The Language of Web Pages on the World Wide Web. • It is a text formatting language. Tags are ; • surrounded with angle brackets like this • <B> or <I>. • Most tags come in pairs • exceptions: <P>, <br>, <li> tags … • The first tag turns the action on, and the second turns it off.

  5. The 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 won't 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 don't support the some tags and some attributes.

  6. Basic HTML Document Format <HTML> <HEAD> <TITLE>WENT'99</TITLE> </HEAD> <BODY> Went'99 </BODY> </HTML> See what it looks like:

  7. <HTML> <HEAD> <TITLE>My First Page</TITLE> </HEAD> <BODY> This is what is displayed. </BODY> </HTML>

  8. How to Create and View an HTML document? 1.Use an text editor such as Notepad to write the document. (Dream weaver) 2.Save the file as filename.html on a PC. This is called the Document Source. 3.Open Google Chrome (or any browser) Off-Line 4.Switch to Google Chrome 5.Click on File, Open File and select the filename.html document that you just created. 6.Your HTML page should now appear just like any other Web page in Google Chrome.

  9. 7.You may now switch back and forth between the Source and the HTML Document • switch to Dreamweaver with the Document Source • make changes • save the document again • switch back to Google Chrome • click on RELOAD and view the new HTML Document • switch to Notepad with the Document Source......

  10. Tags in head • <HEAD>...</HEAD>-- contains information about the document • <TITLE>...</TITLE>-- puts text on the browser's title bar.

  11. Tags in Body • Let's talk about 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

  12. 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=right alt=“My image”>

  13. 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 1999 Asian Women's Network Training Workshop

  14. 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=#ffff66 VLINK=#66ffff> • Spot color <FONT COLOR=#66ffcc>My First Page</FONT> • Image Background <BODY BACKGROUND=bgimg.gif >

More Related