Downloaded 105 times
Uploaded byChidanand Byahatti
Html
1) The document provides an introduction to HTML and discusses basic HTML tags, document structure, and how to create and view HTML documents. 2) It explains common HTML tags like <HEAD>, <TITLE>, <BODY> and text formatting tags and how to add images, links, and change colors. 3) The document also demonstrates how to specify relative paths to links and images when the file structure changes.
![Introduction to basic HTML [Librarian edition]](https://cdn.slidesharecdn.com/ss_thumbnails/introductiontohtmllibrarianedition-130605110026-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Html
- 1. Introduction to HTML1999 Asian Women's Network Training Workshop
- 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 followingterm mean : Web server: a system on the internet containg one or more web site Web site: a collection of one or more web pages Web pages: single disk file with a single file name Home pages: first page in website Think about the followings before working your Web pages. Think about the sort of information(content) you want to 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 and topics.
- 4. What is HTML?Telling the browser what to do, and what props to use. A serises of tags that are integrated into a text document. 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(offswitch) 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. 1999 Asian Women's Network Training Workshop
- 6. Basic HTML DocumentFormat 1999 Asian Women's Network Training Workshop <HTML> <HEAD> <TITLE>WENT'99</TITLE> </HEAD> <BODY> Went'99 </BODY> </HTML> See what it looks like:
- 7. How to Createand View an HTML document? 1.Use an text editor such as Editpad to write the document. 2.Save the file as filename.html on a PC. This is called the Document Source. 3.Open Netscape (or any browser) Off-Line 4.Switch to Netscape 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 Netscape. 1999 Asian Women's Network Training Workshop
- 8. 7.You may nowswitch back and forth between the Source 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 HTML Document switch to Notepad with the Document Source...... 1999 Asian Women's Network Training Workshop
- 9. Tags in head <HEAD>...</HEAD>-- contains information about the document <TITLE>...</TITLE>-- puts text on the browser's title bar. 1999 Asian Women's Network Training Workshop
- 10. Tags in BodyLet's 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 1999 Asian Women's Network Training Workshop
- 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=right alt=āMy imageā> 1999 Asian Women's Network Training Workshop
- 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 1999 Asian Women's Network Training Workshop
- 13. How to makecolors 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>WENT'99</FONT> Image Background < BODY BACKGROUND=bgimg.gif > 1999 Asian Women's Network Training Workshop
- 14. The current HTMLdocument is my.html and the current directory is Iam C:\- ļ± Iam -my.html -your.html ļÆ Type this ; <A href=your.html>Your link </A> C:\- ļ± Iam -my.html ļ° Child -your.html ļÆ Type this ; <A href=Child/your.html>Your link </A> C:\- ļ± Iam -my.html ļ° Sister -your.html ļÆ Type this ; <A href=../Sister/your.html>Your link </A> C:\- ļ° Mother -your.html ļ± Iam -my.html ļÆ Type this ; <A href=../your.html>Your link </A> ļŖ Go to Back 1999 Asian Women's Network Training Workshop How to specify Relative pathnames
- 15. How to specifyRelative pathnames The HTML document is my.html and the image file is dragonfly.gif C:\- ļ± Iam -my.html ā Type this ; <IMG SRC=dragonfly.gif> -dragonfly.gif C:\- ļ± Iam -my.html ā Type this ; <IMG SRC=Image/dragonfly.gif> ļ° Image -dragonfly.gif C:\- ļ± Iam -my.html ā Type this ; <IMG SRC=../Image/dragonfly.gif> ļ° Image -dragonfly.gif C:\- ļ° Image -dragonfly.gif ā Type this ; <IMG SRC=../dragonfly.gif> ļ± Iam -my.html Go to Back 1999 Asian Women's Network Training Workshop