![Page 1: HTML Basics and CSS style. Before we start Dreamweaver (DW) may take several minutes to start. Click on Start => Program Files => Development Apps =>](https://reader035.vdocument.in/reader035/viewer/2022062417/551a980c550346b52d8b6167/html5/thumbnails/1.jpg)
HTML Basics and CSS style
![Page 2: HTML Basics and CSS style. Before we start Dreamweaver (DW) may take several minutes to start. Click on Start => Program Files => Development Apps =>](https://reader035.vdocument.in/reader035/viewer/2022062417/551a980c550346b52d8b6167/html5/thumbnails/2.jpg)
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
![Page 3: HTML Basics and CSS style. Before we start Dreamweaver (DW) may take several minutes to start. Click on Start => Program Files => Development Apps =>](https://reader035.vdocument.in/reader035/viewer/2022062417/551a980c550346b52d8b6167/html5/thumbnails/3.jpg)
HTML File Structure
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Open a Notepad window. Copy the HTML tags to the Notepad.
![Page 4: HTML Basics and CSS style. Before we start Dreamweaver (DW) may take several minutes to start. Click on Start => Program Files => Development Apps =>](https://reader035.vdocument.in/reader035/viewer/2022062417/551a980c550346b52d8b6167/html5/thumbnails/4.jpg)
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
![Page 5: HTML Basics and CSS style. Before we start Dreamweaver (DW) may take several minutes to start. Click on Start => Program Files => Development Apps =>](https://reader035.vdocument.in/reader035/viewer/2022062417/551a980c550346b52d8b6167/html5/thumbnails/5.jpg)
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>
![Page 6: HTML Basics and CSS style. Before we start Dreamweaver (DW) may take several minutes to start. Click on Start => Program Files => Development Apps =>](https://reader035.vdocument.in/reader035/viewer/2022062417/551a980c550346b52d8b6167/html5/thumbnails/6.jpg)
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>
![Page 7: HTML Basics and CSS style. Before we start Dreamweaver (DW) may take several minutes to start. Click on Start => Program Files => Development Apps =>](https://reader035.vdocument.in/reader035/viewer/2022062417/551a980c550346b52d8b6167/html5/thumbnails/7.jpg)
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!
![Page 8: HTML Basics and CSS style. Before we start Dreamweaver (DW) may take several minutes to start. Click on Start => Program Files => Development Apps =>](https://reader035.vdocument.in/reader035/viewer/2022062417/551a980c550346b52d8b6167/html5/thumbnails/8.jpg)
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.
![Page 9: HTML Basics and CSS style. Before we start Dreamweaver (DW) may take several minutes to start. Click on Start => Program Files => Development Apps =>](https://reader035.vdocument.in/reader035/viewer/2022062417/551a980c550346b52d8b6167/html5/thumbnails/9.jpg)
Formatting Your Web Page with more tags
My name is your name
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 & Italic
Italic
H1
H2
Separate Paragraph
Separate ParagraphUnderline
![Page 10: HTML Basics and CSS style. Before we start Dreamweaver (DW) may take several minutes to start. Click on Start => Program Files => Development Apps =>](https://reader035.vdocument.in/reader035/viewer/2022062417/551a980c550346b52d8b6167/html5/thumbnails/10.jpg)
Now it is time to use Dreamweaver MX
![Page 11: HTML Basics and CSS style. Before we start Dreamweaver (DW) may take several minutes to start. Click on Start => Program Files => Development Apps =>](https://reader035.vdocument.in/reader035/viewer/2022062417/551a980c550346b52d8b6167/html5/thumbnails/11.jpg)
Creating a Link
My name is your name
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!
Make this a link to the
LBS Home page
Question: what is the HTML tag for Links?
![Page 12: HTML Basics and CSS style. Before we start Dreamweaver (DW) may take several minutes to start. Click on Start => Program Files => Development Apps =>](https://reader035.vdocument.in/reader035/viewer/2022062417/551a980c550346b52d8b6167/html5/thumbnails/12.jpg)
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?
![Page 13: HTML Basics and CSS style. Before we start Dreamweaver (DW) may take several minutes to start. Click on Start => Program Files => Development Apps =>](https://reader035.vdocument.in/reader035/viewer/2022062417/551a980c550346b52d8b6167/html5/thumbnails/13.jpg)
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?
![Page 14: HTML Basics and CSS style. Before we start Dreamweaver (DW) may take several minutes to start. Click on Start => Program Files => Development Apps =>](https://reader035.vdocument.in/reader035/viewer/2022062417/551a980c550346b52d8b6167/html5/thumbnails/14.jpg)
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.
![Page 15: HTML Basics and CSS style. Before we start Dreamweaver (DW) may take several minutes to start. Click on Start => Program Files => Development Apps =>](https://reader035.vdocument.in/reader035/viewer/2022062417/551a980c550346b52d8b6167/html5/thumbnails/15.jpg)
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?
![Page 16: HTML Basics and CSS style. Before we start Dreamweaver (DW) may take several minutes to start. Click on Start => Program Files => Development Apps =>](https://reader035.vdocument.in/reader035/viewer/2022062417/551a980c550346b52d8b6167/html5/thumbnails/16.jpg)
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
![Page 17: HTML Basics and CSS style. Before we start Dreamweaver (DW) may take several minutes to start. Click on Start => Program Files => Development Apps =>](https://reader035.vdocument.in/reader035/viewer/2022062417/551a980c550346b52d8b6167/html5/thumbnails/17.jpg)
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?
![Page 18: HTML Basics and CSS style. Before we start Dreamweaver (DW) may take several minutes to start. Click on Start => Program Files => Development Apps =>](https://reader035.vdocument.in/reader035/viewer/2022062417/551a980c550346b52d8b6167/html5/thumbnails/18.jpg)
Modifying CSS stylesh2 {
font-family : Tahoma;
color: blue;
text-align: center;
text-transform : uppercase;
}
body {
font-family : Courier New;
background-color : #FFEEDD;
color : #777733;
}
![Page 19: HTML Basics and CSS style. Before we start Dreamweaver (DW) may take several minutes to start. Click on Start => Program Files => Development Apps =>](https://reader035.vdocument.in/reader035/viewer/2022062417/551a980c550346b52d8b6167/html5/thumbnails/19.jpg)
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
![Page 20: HTML Basics and CSS style. Before we start Dreamweaver (DW) may take several minutes to start. Click on Start => Program Files => Development Apps =>](https://reader035.vdocument.in/reader035/viewer/2022062417/551a980c550346b52d8b6167/html5/thumbnails/20.jpg)
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
![Page 21: HTML Basics and CSS style. Before we start Dreamweaver (DW) may take several minutes to start. Click on Start => Program Files => Development Apps =>](https://reader035.vdocument.in/reader035/viewer/2022062417/551a980c550346b52d8b6167/html5/thumbnails/21.jpg)
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.
![Page 22: HTML Basics and CSS style. Before we start Dreamweaver (DW) may take several minutes to start. Click on Start => Program Files => Development Apps =>](https://reader035.vdocument.in/reader035/viewer/2022062417/551a980c550346b52d8b6167/html5/thumbnails/22.jpg)
Extra material
Downloading the Macromedia Dreamweaver tutorial file from the lecture notes page.