Introduction to html
Download
1 / 15

Introduction to HTML - PowerPoint PPT Presentation


  • 274 Views
  • Updated On :

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 containg one or more web site

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Introduction to HTML' - HarrisCezar


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Introduction to html l.jpg

Introduction to HTML

1999 Asian Women's Network Training Workshop


Slide2 l.jpg

Contents

  • Getting Started..

  • What is HTML?

  • How to create and View an HTML document?

  • Basic HTML Document Format

  • The HTML Basic tags

1999 Asian Women's Network Training Workshop


Slide3 l.jpg

What the following term 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.


Slide4 l.jpg

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.

  • 1999 Asian Women's Network Training Workshop


    Slide5 l.jpg

  • 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


    Slide6 l.jpg

    Basic HTML Document Format

    <HTML>

    <HEAD>

    <TITLE>WENT'99</TITLE>

    </HEAD>

    <BODY>

    Went'99

    </BODY>

    </HTML>

    See what it

    looks like:

    1999 Asian Women's Network Training Workshop


    Slide7 l.jpg

    How to Create and 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


    Slide8 l.jpg

    7.You may now switch 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


    Slide9 l.jpg

  • <HEAD>...</HEAD>-- contains information about the document

  • <TITLE>...</TITLE>-- puts text on the browser's title bar.

  • 1999 Asian Women's Network Training Workshop


    Slide10 l.jpg

  • Let'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


    Slide11 l.jpg

    • Add Images the HTML Document

      • 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


    Slide12 l.jpg

    • Add some Link the HTML Document

      • 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:[email protected]

    1999 Asian Women's Network Training Workshop


    Slide13 l.jpg

    • How to make colors changes? the HTML Document

      • 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


    Slide14 l.jpg

    How to specify Relative pathnames the HTML Document

    The current HTML document 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


    Slide15 l.jpg

    How to specify Relative pathnames the HTML Document

    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


    ad