HTML Basics and CSS style

Transcript HTML Basics and CSS style

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.
 Copy Everything from my public folder (including
this ppt file) to your P:\ drive.
U:\msu\user\n\a\nanzhang\public
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
p:\web\index.html
TEST by BROWSING to the page
http://www.msu.edu/~msunetid/index.html
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> </H6> are headlines with different
sizes.
Formatting Your Web Page with more
tags
Underline & Italic
H1
My name is your name
Italic
H2
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
http://www.msu.edu/~MSUNetID/commons/
Why didn’t 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 of separation
Changing 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.
 Let’s 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 user’s
mouse is over it.
Extra material
Downloading the Macromedia
Dreamweaver tutorial file from the lecture
notes page.

HTML Basics and CSS style

Transcript HTML Basics and CSS style

Directory