Scribd Logo
Upload

Welcome to Scribd!

  • SynapseIndia Review On HTML Basics and CSS Style

    Uploaded by

    synapseindia
    15 views22 pages
    SynapseIndia Review on HTML Basics and CSS Style, Shamit Khemka, SynapseIndia Bond, SynapseIndia Employee Bond, SynapseIndia Cases, SynapseIndia abuse employee

    Original Title

    SynapseIndia Review on HTML Basics and CSS Style

    Copyright

    © © All Rights Reserved

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    SynapseIndia Review on HTML Basics and CSS Style, Shamit Khemka, SynapseIndia Bond, SynapseIndia Employee Bond, SynapseIndia Cases, SynapseIndia abuse employee

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    15 views22 pages

    SynapseIndia Review On HTML Basics and CSS Style

    Uploaded by

    synapseindia
    SynapseIndia Review on HTML Basics and CSS Style, Shamit Khemka, SynapseIndia Bond, SynapseIndia Employee Bond, SynapseIndia Cases, SynapseIndia abuse employee

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 22

    SynapseIndia Review on

    HTML Basics and CSS style

    Before we start
    Dreamweaver

    (DW) may take several minutes to

    start.
    Click on Start => Program Files => Development
    Apps => Web => Dreamweaver MX =>
    Dreamweaver MX to start the program.
    Accept default choice for layout.
    Minimizing the Dreamweaver. We will use it
    later.

    HTML File Structure


    <HTML>
    <HEAD>
    </HEAD>
    <BODY>
    </BODY>
    </HTML>
    Open a Notepad window. Copy the HTML tags to the Notepad.

    Web Page Development Cycle

    EDIT and SAVE the file in your AFS

    TEST by BROWSING to the page

    Adding Text to Your HTML File


    <HTML>
    <HEAD>
    <TITLE>My home page</TITLE>
    </HEAD>
    <BODY>
    My name is your name.
    My major is your major.
    </BODY>
    </HTML>

    Making paragraphs
    <HTML>
    <HEAD>
    <TITLE>My home page</TITLE>
    </HEAD>
    <BODY>
    <p> My name is your name.</p>
    <p> My major is your major. </p>
    </BODY>
    </HTML>

    Adding Information to Web Page


    My name is your name
    My major is your major
    I am creating this page for LBS 126 and will
    be modifying this page throughout the course.
    Please visit again!

    More HTML tag pairs


    <u>

    </u> tag pair is for underline


    <em> </em> tag pair is for italic style.
    <H1>

    </H1>

    <H6>

    sizes.

    </H6> are headlines with different

    Formatting Your Web Page with more


    tags
    H1
    H2

    My name is your name

    Underline & Italic


    Italic

    My major is your major


    I am creating this page for CSE 101
    and will be modifying this page
    throughout the course.
    Please visit again!

    Underline

    Separate
    Paragraph

    Separate
    Paragraph

    Now it is time to use Dreamweaver MX

    Creating a Link
    My name is your name
    My major is your major

    Make this a
    link to the
    LBS Home
    page

    I am creating this page for CSE 101


    and will be modifying this page
    throughout the course.
    Please visit again!
    Question: what is the HTML tag for Links?

    More things to do
    Make

    a bullet list for your four favorite


    things in MSU. Change the font of this list
    to Times New Roman
    Changing page properties:
    Set

    background color for the page.


    What else can you change for the page
    properties?
    Download

    a MSU logo, save to your web


    folder and insert to the top of your page.
    Question: what is the HTML tag for Images?

    Problems
    The

    Tags only provided limited formatting.

    H1

    is always that big.


    Links always have an underscore.
    You

    can manually change the format for


    all the H1 headlines, but what about your
    have 100 pages in your web site?
    Can we customize the HTML tags?

    Cascading Style Sheets (CSS)


    What

    is style?

    Style

    is a list of formatting instructions.

    A Cascading

    Style Sheet is a file with a list


    of formatting instructions.
    CSS style sheets are the modern way to
    control the appearance and layout of your
    web pages.
    4.0 and up Navigator and IE fully support
    CSS.

    Unpacking Sample Web Site


    Open

    the file common.zip you just copied


    using EnZIP
    Click on Edit => Extract and extract the files
    to your web folder

    The files will appear in a new folder commons

    Browse

    to the practice web site

    Why didnt you give a file name in the URL?


    View all seven pages in the site.
    What tags control the formatting of the headings?

    Cascading Style Sheet


    Enter

    the following text into a new


    Notepad document
    h2 {
    font-family : Tahoma;
    color : blue;
    text-align : center;
    }

    Save

    the document in the commons


    folder as csense.css
    Save

    as file type Text Document

    Attach a Style Sheet to HTML files


    In

    properties window>Styles drop box,


    choose Manage
    styles
    Use Attach to
    attach the .css file
    you just created.
    Do the same thing for
    all the seven pages.
    What happens?

    Modifying CSS styles


    h2 {
    font-family : Tahoma;
    color: blue;
    text-align: center;
    text-transform : uppercase;
    }
    body {
    font-family : Courier New;
    background-color : #FFEEDD;
    color : #777733;
    }

    Separation of Content and


    Presentation
    Content
    Use

    tags like <h1>, <h2>, <p>, <em> or


    <li> to indicate the structure of your pages

    Presentation
    Use

    a CSS style sheet to determine how the


    tags are formatted

    Advantage
    Changing

    of separation

    the formatting only requires editing


    the style sheet

    Edit styles in Dreamweaver


    In

    the Design->CSS Styles


    window you can edit the
    styles you already have, or
    create new styles.
    Lets create a new style for
    the link HTML tag: <a>
    </a>
    High light the CSS file first
    Click here

    Change the style of HTML Link Tag

    a:link Customizes the style of a link that has not been


    visited recently
    a:visited -- Customizes the style of a link that has been
    recently visited
    a:hover -- Customizes the style of a link while the users
    mouse is over it.

    Extra material
    Downloading

    the Macromedia
    Dreamweaver tutorial file from the lecture
    notes page.

    You might also like