Scribd Logo
Carica

Benvenuto in Scribd!

  • HTML & Frontpage - Session 1

    Caricato da

    muni18
    24 visualizzazioni30 pagine
    Internet is the collection of two or more distinct networks joined together. The basic unit of information displayed over the net is A Web page. A Web site is a collection of web pages, which are interlinked.

    Descrizione originale:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    PPT, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    Internet is the collection of two or more distinct networks joined together. The basic unit of information displayed over the net is A Web page. A Web site is a collection of web pages, which are interlinked.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PPT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    24 visualizzazioni30 pagine

    HTML & Frontpage - Session 1

    Caricato da

    muni18
    Internet is the collection of two or more distinct networks joined together. The basic unit of information displayed over the net is A Web page. A Web site is a collection of web pages, which are interlinked.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PPT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 30

    Session 1

    HTML in Web Pages

    Session Objectives
    Explain what a Web page is List the purpose of a website Design Web pages

    Spell out the guidelines for making a Web page


    Introduction to FrontPage 2000 as a Web Development tool

    Introduction

    Internet is the collection of two or more distinct networks joined together.

    Webpages and Website


    What is a Website ?

    Webpages and Website(cont..)

    The basic unit of information displayed over the net is a Web Page. A Web site is a collection of web pages, which are interlinked

    Webpages and Website(cont..)

    The link for a Web Page is basically its URL (Uniform Resource Locator) that is the address of the computer where the page is present

    Webpages and Website(cont..)

    The First Page of a Website is meant to welcome the user. This Page is called the Home Page. All Sites necessarily have this Page. The user can navigate to other Pages through Hyperlinks.

    Webpages and Website(cont..)


    A Typical Home Page

    Basics of a Web Page and Web Site Design

    A Website should ideally incorporate : Information about the business that it has been built for
    Text, Graphics, Photo & Multimedia as or when required
    Simplicity in presenting the matter A layout that facilitates easy access to all the information

    Markup languages

    Markup languages are mainly required for performing typical formatting functions like :

    Setting margins for the Page


    Enhancing the look by changing Font Settings Adding special effects to the text and so on

    Markup languages The Evolution

    First introduced in 1980 Main objective was to ensure consistent display of documents It was named SGML or Standard Generalized Markup Language HTML has evolved from SGML

    HTML

    HTML stands for Hyper Text Markup Language HTML evolved from SGML HTML is used to construct formatted Pages on the Web For this, it uses Tags These tags tell the Browser how to display information on the Pages These pages subsequently can be viewed on any Browser

    HTML Document Structure

    Header Section
    <HTML> <HEAD>

    The Structure of an HTML Document :

    </HEAD>
    <BODY> </BODY> </HTML>

    Actual Body

    The HEADER Section


    Contains information about the current document
    Includes information like the Title and the Keywords
    The text contained within the <TITLE> Tag is displayed on the Title Bar of Browser The <META> Tag contains the Keywords that describe the content of the Page

    <HTML> <HEAD> <META name=Author content=Graham>

    <TITLE> Aptech Education </TITLE>


    </HEAD> </HTML>

    The BODY Section


    Contains the matter that is to be displayed on the Page

    Enclosed within the <BODY> and </BODY> Tags


    <HTML> <HEAD>

    <META name=Generator content=FrontPage 2000


    <TITLE> My Home Page </TITLE> </HEAD> <BODY> <H1> This is the First Heading </H1> <P> This Page is about FrontPage 2000 </P> </BODY> </HTML>

    Guidelines for writing HTML Documents

    Tags are enclosed within a Left Bracket < and a Right Bracket >
    These Brackets differentiate the Tags from the rest of the Text Opening Tag is denoted as <> and Closing Tag is denoted as </> Example of this : <h1> for beginning a heading and </h1> for closing it Tag names, though not case-sensitive should be written in Caps This is advised, so that the Tag names stand out among other Text

    HeadlineTag
    Used to display Headings & Sub-headings of different Sizes 6 Levels of Headings are supported : <H1> to <H6> <H1> is the biggest and <H6> is the smallest size
    <HTML> <HEAD></HEAD> <BODY> <H1> This Heading is created with H1 tag </H1> <H2> This Heading is created with H2 tag </H2> <H3> This Heading is created with H3 tag </H3> <H4> This Heading is created with H4 tag </H4>

    <H5> This Heading is created with H5 tag </H5>


    <H6> This Heading is created with H6 tag </H6> </BODY> </HTML>

    Headline Tag (cont)


    Attributes
    By Default, Headings are Left-aligned The Alignment can be changed to Center or Right The ALIGN attribute is used for this

    <H1 ALIGN=CENTER> My Heading </H1>


    OR <H1 ALIGN=RIGHT> My Heading </H1>

    Paragraph Tag
    The HTML Tags <P>.</P> are used to format Text into paragraphs

    By default, the <P> tag displays a blank line at the top and bottom
    To insert Blank lines within a Paragraph, the <BR> Tag is used The ALIGN attribute is used to align the Paragraph on the page The values for the ALIGN attribute are Center, Left and Right The <CENTER> tag can also be used instead of <ALIGN=CENTER>
    <HTML> <HEAD></HEAD> <BODY> <P ALIGN=RIGHT> Right Aligned Text </P> </BODY> </HTML>

    Font Tag
    The tag is <FONT>..</FONT>
    Used for Text style specifications The FACE Attribute is used to set the Font of the Text The SIZE Attribute is used to specify the Size of the Text The COLOR Attribute is used to specify the Color of the Text The <B></B> Tag is used with Text/Paragraph to mark Bold text The <I></I> Tag is used to mark Italic text

    Font Tag - Example


    <HTML> <HEAD> <TITLE> The Font Testing Page </TITLE> </HEAD> <BODY> <P> <FONT FACE=ARIAL SIZE=4 COLOR=DARKBLUE><B><I> This page demonstrates how the Font to be displayed On a Web page is controlled </P> </B></I>

    </FONT>

    The <DIV> tag


    Used for applying Alignment and Style characteristics to only a section of the Document
    <HTML> <HEAD></HEAD> <BODY> <DIV ALIGN=RIGHT>] <H1>Aligning a block of text to the Right</H1> </DIV> <DIV ALIGN=CENTER> <H1>This is how you center-align the Text</H1> </DIV> </BODY> </HTML>

    MULTICOL Tag
    The <MULTICOL> Tag places the text of the document into multiple, equal-width columns.
    <HTML> <HEAD></HEAD> <BODY> <MULTICOL COLS=5 GUTTER=2 WIDTH=5 The Text to be written in the document </MULTICOL> </BODY></HTML>

    MULTICOL Tag - Attributes

    Cols
    Specifies the number of text columns for the text

    Gutter
    Specifies the distance / gap between the text columns

    Width
    Specifies the width of every column. Incidentally, the width of all the columns should be the same

    Horizontal line
    It can be added to a HTML document using the <HR> tag The Syntax is as below : <BODY> <HR>

    Paragraph Specification
    <HR> </BODY>

    Horizontal line - Attributes

    Width
    The Width of the Line can be specified in terms of Percentage of the Page Width

    Size
    The Thickness of the Line can be specified in terms of Pixels

    Body Attributes
    BGCOLOR
    Specifies the Background Color for the Page

    <BODY BGCOLOR=RED> TEXT


    Specifies the Color of Text on the Page

    <BODY TEXT=#FF0000> BGSOUND


    Specifies a background Sound / Music that starts playing as soon as the Page loads

    <BODY BGSOUND=MYSOUND.WAV>

    IMG tag
    Images play a major role in enhancing the Look of a page The Look on its part, attracts the users to visit and explore the Page Images put into Web pages are called Inline Images Images are mainly used as Buttons, Bullets, Photographs, Banners etc. Most common formats are JPEG and GIF Images for a Page should be in the same Folder as the HTML document The <IMG> Tag is used to incorporate an Image into the document

    IMG tag - attributes


    SRC
    Used to specify the name of the Image

    <IMG SRC=IMAGE1.GIF>

    ALIGN
    Used for aligning the text description with respect to the Image. Possible values are TOP, BOTTOM & MIDDLE

    <IMG SRC=IMAGE1.GIF ALIGN=MIDDLE>

    BORDER
    This attribute adds a Border around the Image <IMG SRC=IMAGE1.GIF ALIGN=MIDDLE BORDER=2>

    Microsoft FrontPage 2000

    An easy to use WYSIWYG Tool for designing Web pages

    Works closely with MS-Office


    Can directly import documents from Word, Excel & PowerPoint Features a gallery of Graphical design Themes

    Includes Wizards and Templates, thus making life simpler


    Active Page elements like Hit counters can be included directly

    Potrebbero piacerti anche