Вы находитесь на странице: 1из 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.