Scribd Logo
Hochladen

Willkommen bei Scribd!

  • EPPD1063: HTML Programming Language

    Hochgeladen von

    navin212
    41 Ansichten28 Seiten
    b

    Originaltitel

    3. HTML

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    PPTX, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    b

    Copyright:

    © All Rights Reserved
    Als PPTX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    41 Ansichten28 Seiten

    EPPD1063: HTML Programming Language

    Hochgeladen von

    navin212
    b

    Copyright:

    © All Rights Reserved
    Als PPTX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 28

    EPPD1063

    HTML
    Programming Language
    HTML
    Programming
    Language
    1. Introduction
    2. HTML Editor
    3. Web Page Development
    1) Introduction
    HTML
    HyperText Markup Language
    is the major language of the Internet's World
    Wide Web
    ability to bring together text, pictures,
    sounds, and links
    HTML Version 4.0 - plus some additional
    features that have been widely and
    consistently implemented in browsers
    <html> <head>
    <link rel="stylesheet"
    href="style.css"
    type="text/css">
    <title>
    </title></head>
    <body><h3>
    </h3><br>
    <hr><table>
    <tr><th>
    </th></tr><td>
    </td> </table>
    <form>...
    </body>
    Hypertext
    Active text
    Link
    Clicking causes an action
    Markup Language
    Tags indicate formatting and
    document structure
    Source is processed by a program
    that understands the tags and
    formats the page
    Introduction
    2) HTML Editor
    HTML documents are plain-text (also known as
    ASCII) files that can be created using any text
    editor.
    Popular editor
    Netscape Composer
    Microsoft Frontpage
    Microsoft Visual InterDev
    HomeSite
    HotDog
    Web Publisher
    Dreamweaver
    Other notepad, word.

    3) Web Page
    Development
    Preparing a web page
    Writing vehicle
    Programming in HTML
    Authoring software
    Browser
    Test the code locally
    Test the code on the server
    Server
    Test links to other sites
    Store your published site
    Web Page
    Development
    HTML document - tags
    HTML is composed of tags
    Tags - tells browser how to display the information
    provided
    HTML tags are always enclosed in angle-brackets ( <
    > ) and are case-insensitive
    <tag> ... </tag>
    e.g., <H1> and </H1>
    Generally used in pairs
    Open tag
    Closing tag same tag with / in front
    Web Page
    Development
    <HTML> </HTML>
    Beginning and end of every HTML document
    <HEAD> </HEAD>
    Contains information about the document
    including the title that is to appear in the title bar
    <BODY> </BODY>
    All content for the page is placed between these
    tags
    <!-- -->
    Comment tags
    Web Page
    Development
    HTML document basic tags
    <HTML>
    <HEAD>
    </HEAD>

    <BODY>
    </BODY>
    </HTML>

    If you view this from the browser, you will see a
    blank page
    Web Page
    Development
    Each document consists of head and
    body text.
    The head contains the title, and the body
    contains the actual text that is made up of
    paragraphs, lists, and other elements.
    Web Page
    Development -
    example
    <html>
    <head>
    <TITLE>A Simple HTML Example</TITLE>
    </head>
    <body>
    <H1>HTML is Easy To Learn</H1>
    <P>Welcome to the world of HTML. This is the first
    paragraph. While short it is still a paragraph!</P>
    <P>And this is the second paragraph.</P>
    </body>
    </html>
    Web Page
    Development
    HTML document heading
    HTML has six levels of headings, numbered
    1 through 6, with 1 being the largest
    Headings are typically displayed in larger
    and/or bolder fonts than normal body text
    The syntax of the heading element is:
    <Hy>Text of heading </Hy>
    where y is a number between 1 and 6
    specifying the level of the heading
    Web Page
    Development
    HTML document heading tags

    <H1> </H1> Largest heading
    <H2> </H2>
    <H3> </H3>
    <H4> </H4>
    <H5> </H5>
    <H6> </H6> Smallest heading
    Web Page
    Development
    HTML document - body
    Background color / graphics
    Attributes of <BODY>
    BGCOLOR=code
    Specify color for background of the screen
    BACKGROUND=path/file
    Tiles the graphic in the file to fit the screen

    <BODY BGCOLOR=green>
    <BODY BGCOLOR=#00FF00>
    <BODY BACKGROUND=flower.jpg>
    Web Page
    Development
    HTML Document list
    - HTML supports unnumbered,
    numbered, and definition lists

    Unnumbered Lists
    <UL>
    <LI> apples
    <LI> bananas
    <LI> grapefruit
    </UL>
    Output
    - apples
    - bananas
    - grapefruit

    Numbered List
    <OL>
    <LI> oranges
    <LI> peaches
    <LI> grapes
    </OL>
    Output
    1. oranges
    2. peaches
    3. grapes

    Find - Definition List & Nested List

    Web Page
    Development
    Web Page
    Development
    HTML Document text formatted
    <BR> - tag break same as enter/return
    <B></B> - bold text
    <I> </I> - italic text
    <U></U> - underline
    <PRE></PRE> - generate text in a fixed-
    width font
    <BLOCKQUOTE></BLOCKQUOTE>
    - tag to include lengthy quotations in a
    separate block on the screen
    Web Page
    Development
    HTML Document linking
    Hyperlink - browser highlights the identified text or
    image with color and/or underlines to indicate that
    it is a hypertext link
    Relative linking - the path to the linked file relative
    to the location of the current file.
    <A HREF=page1.html> Click Page 1 </A>
    Absolute linking - linking to documents that are not
    directly related
    <A
    HREF=http://www.fsktm.upm.edu.my>FSKT
    M</A>
    Web Page
    Development
    HTML Document mailto
    send electronic mail to a specific person or
    mail alias by including the mailto attribute in
    a hyperlink

    <A href=mailto:masura@ftsm.ukm.my> Mail to Madam
    Masura</A>
    Web Page
    Development
    HTML Document line break tag

    <BR>
    Line Break --- Forces a new line

    <br>Learning HTML<br>is<BR>fun!</P>
    Web Page
    Development
    HTML Document image
    Format such as *.gif, *.jpeg, *.jpg, *.xbm,
    *png.
    <IMG SRC=picture1.gif >
    <IMG SRC=picture1.gif HEIGHT=100
    WIDTH=65>
    <A HREF=page1.html"><IMG
    SRC=picture1.gif"></A>
    Web Page
    Development
    GIF
    Graphics Interchange Format
    Use for graphics
    JPG
    Joint Photographic Experts Group
    Use for photographs
    PNG
    Portable Network Graphics
    Expected to replace GIF
    Web Page
    Development
    Tables
    <TABLE> ... </TABLE>
    - define table in HTML
    <TR> ... </TR>
    - specifies a table row within a table
    <TH> ... </TH>
    - defines a table header cell
    <TD> ... </TD>
    -defines a table data cell
    <TABLE BORDER>
    <TR>
    <TD>Country</TD>
    <TD>Capital</TD>
    </TR>
    <TR>
    <TD>Malaysia</TD>
    <TD>Kuala Lumpur</TD>
    </TR>
    <TR>
    <TD>China</TD>
    <TD>Beijing</TD>
    </TR>
    </TABLE>
    Table example

    Output:
    Country Capital
    Malaysia Kuala Lumpur
    China Beijing
    Web Page
    Development
    Web Page
    Development
    Tables more properties
    BORDER = X
    - add borders to the table
    WIDTH=x, HEIGHT=x,
    - control the size of the table
    ALIGN=left or center or right
    - align a table/data to the left,center or right
    CELLSPACING-the width of the spacing between
    cell and along edges of cells.
    CELLPADDING-amount of space inserted btw cell
    content and the inner edge of a cell
    Web Page
    Development
    Themes
    Unified set of design elements and color
    schemes that you can apply to a page to give
    it a consistent and attractive appearance
    Background
    Fonts
    Banners
    Bullets
    Link buttons
    Web Page
    Development
    Using a theme is a quick and easy way to
    make sure your Web pages are visually
    consistent and appealing.
    Microsoft FrontPage includes many complete
    themes that you can use right away.
    You can also change those themes or create
    new ones
    Web Page
    Development
    Themes e.g.

    Das könnte Ihnen auch gefallen