Embed Size (px)
Citation preview
Web Publishing Basics 2
HTML and CSS Coding
Jeff Pankin
Information Services and Technology
Page 1
Contents
Contents ..................................................................................................... 1
Course Objectives ....................................................................................... 2
Creating a Web Page with HTML ................................................................. 3
What is Dreamweaver? ................................................................................ 3
What is HTML? ............................................................................................ 3
Create a New HTML Document ...................................................................... 3
What are the basic elements of an HTML document? ........................................ 3
What is the basic set of code for an html document? ....................................... 4
Create a Site Definition ................................................................................ 5
Create the initial web page ........................................................................... 5
Preview the File in a Browser ........................................................................ 5
Add html tags to the web page ..................................................................... 5
Enhance the visual appearance of a page with additional html tags ................... 6
Add an image to a web page ......................................................................... 6
Practice ...................................................................................................... 6
Add a Link to a Page ................................................................................... 7
Practice ...................................................................................................... 7
Formatting a Web Page using Cascading Style Sheets (CSS) ...................... 8
CSS Style Tags ........................................................................................... 8
Examples of Properties and Values ................................................................ 8
Practice ...................................................................................................... 8
Using Class styles to format content .............................................................. 9
Apply a Class style ...................................................................................... 9
Practice ...................................................................................................... 9
Using the Design View in Dreamweaver .................................................... 10
The Properties Panel .................................................................................. 10
Upload Your Files to the Live Web Server .................................................. 11
Create a Site Definition in Dreamweaver ...................................................... 11
Connect to your site locker, upload your files and view in your browser ........... 12
Final Page ................................................................................................ 13
Final Code ................................................................................................ 14
Resources ................................................................................................. 16
Copyright © 2011 by Massachusetts Institute of Technology. All Rights Reserved.
Page 2
Course Objectives
1. Create and publish a simple document on the Web.
2. Use HTML to create a web page.
3. Learn to code basic HTML elements including headings, paragraphs,
lists, images and links.
4. Upload files to Athena for access from web browsers.
5. Format page elements using Cascading Style Sheets.
6. Examine MIT websites to identify HTML elements.
7. Review MIT resources for help and further learning.
Page 3
Creating a Web Page with HTML
What is Dreamweaver?
Dreamweaver is the most popular web design, development and management tool
in use today. It allows you work in a WYSIWYG Design view or to work directly
with HTML in the Code view.
What is HTML?
HTML (HyperText Markup Language) is a language for describing web pages. HTML
documents are read and displayed (rendered) by web browsers - Firefox, Safari,
Internet Explorer, or Chrome.
Create a New HTML Document
From the File menu choose New, then Blank Page, then HTML and then click the
Create button.
What are the basic elements of an HTML document?
HTML consists of plain text and markup tags which describe how to display the
text.
1. Tags are keywords surrounded by angle brackets.
<html>
2. Tags usually come in pairs.
<title> </title>
<h1> </h1>
<p> </p>
3. Plain text content is placed between the pairs of tags.
<title> The MIT Center for Industrial Growth </title>
<h1> Welcome to the Center for Industrial Growth</h1>
<p> The Center was founded in 1953 when Professor John Pendleton… </p>
Page 4
What is the basic set of code for an html document?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" />
<title>The MIT Center for Industrial Growth</title>
</head>
<body>
<h1>Welcome to the Center for Industrial Growth</h1>
<p> The Center was founded in 1953 when… </p>
</body>
</html>
Tag Description
DOCTYPE Explains the HTML version to use.
Note the use of XHTML* – see explanation below
html Marks the beginning and end of the html document.
head An area of the document to place information which will not be
displayed but is needed by the browser.
body The area of the code to place content which is to be displayed in the
browser.
title A tag placed in the head which displays its content in the top window
bar.
*XHTML is the most current version of HTML. XHTML requires adherence to
standards but is designed to work more consistently across more platforms and
with future updates.
Page 5
Create a Site Definition
1. From the Site menu choose New Site.
2. Click on the Advanced tab.
3. Select Local Info from the Category list.
4. Type a name for your project (e.g., cig).
5. Locate the Local Root folder on your hard drive using the browse icon. The
Root Folder is the one with all your files.
Mac: select the folder and click Choose; Windows: open folder and click
Select. Double check to be sure it’s correct and edit if necessary.
Create the initial web page
1. From the File menu choose New, then Blank Page, then HTML and then
click the Create button. (We have already created a new HTML page!)
2. Open the file source.txt.
3. Copy the entire file and paste it into the new page – in the code view below
the <body> tag.
4. Save the file as index.html.
Preview the File in a Browser
1. From the File menu choose Preview in Browser.
2. Select Firefox or Safari.
Add html tags to the web page
Tag Description
p Marks the content as a paragraph and adds space before and after.
h1, h2, h3, h4, h5, h6 Marks the content as a section heading. h1 is the largest and h6 is
the smallest.
ul, ol These tags create an unordered list or ordered list.
li Each list item is enclosed in a set of li tags.
Page 6
Enhance the visual appearance of a page with additional html tags
Tag Description
blockquote Indents content enclosed by a pair of blockquote tags. You may
blockquote several tags at once.
<hr /> Adds a horizontal rule (straight line) at the point where the tag is
placed. The hr tag does not require a closing tag. Note the format for
a single tag.
<br /> Creates a line break at point where the tag is placed. The break is a
single line break. The br tag does not require a closing tag. Note the
format for a single tag.
em Adds italic to the enclosed content. The em tag is recognized by
screen readers.
strong Adds bold to the enclosed content. The strong tag is recognized by
screen readers.
Add an image to a web page
Tag Description
<img /> Adds an image at the point where the tag is placed. The img tag does not
require a closing tag. Note the format for a single tag.
Images displayed on web pages are stored in separate files and loaded
when required.
src=”logo.jpg” The img tag alone does not indicate where the image file is located. The
src attribute calls the actual image file. The src attribute sits inside the
img tag.
<img src=”logo.jpg” />
alt=”mit logo” The alt attribute holds text which is read by screen readers. It is also
displayed if the image cannot be loaded. The alt attribute sits inside the
img tag. NOTE: The order of the attributes does not matter.
<img src=”logo.jpg” alt=”image of mit logo” />
border=”0” The border attribute may be used to add or remove a border from an
image. The border attribute sits inside the img tag.
<img src=”logo.jpg” alt=”image of mit logo” border=”0” />
Practice
1. Add the mit-dome.jpg image to the title.
2. Add the mit-logo.gif image to the footer.
Page 7
Add a Link to a Page
Tag Description
a The link tag used to create a link to an external web page,
another page in the current web site or a mailto link. The link tag
encloses the text or image the user will click on.
<a href=”directory.html”>Click for Directory</a>
href=”http://web.mit.edu” The link tag alone does not indicate the destination after the click
on the link. The href attribute indicates where the click will go.
The href attribute sits inside the a tag. The tag surrounds the
thing people will click on.
<a href=”http://web.mit.edu”>MIT</a>
<a href=”directory.html”>Directory</a>
href=”mailto:[email protected]” The mailto link will open the default mail program and address a
message. The mailto: includes a colon, has no spaces and sits
inside the href attribute.
<a href=”mailto:[email protected]”>Richard Johnson</a>
Practice
1. Add a link from Dr. Donald Edwin Martin to his bio page donald-martin-
bio.html.
2. Add a link to the words email the center in the last paragraph which
addresses an email to [email protected].
3. Add a link from the MIT logo image in the footer to the MIT homepage.
Page 8
Formatting a Web Page using Cascading Style Sheets (CSS)
What is CSS and what how can it enhance my web page?
A style is a rule describing how to format a piece of html. A collection of
these styles is called a style sheet.
A style might contain several formatting elements e.g., bold, blue, 24px. By
applying a style to content all the formatting in the style is applied at once.
When the formatting of a style is changed all content with that style gets
updated automatically.
A style definition contains three parts: a selector, a property and a value.
selector property value
h1 {color: red}
CSS Style Tags
The style tags including the type attribute is placed in the <head> of the
document. A single style declaration may include multiple property/value pairs
separated by a semicolon.
<style type="text/css">
h1 {color: red}
p {color: blue; font-size: 18px}
</style>
Examples of Properties and Values
Property Values
color (text color) blue, #44AA77
background (background color) blue, #44AA77
font-family arial, “times new roman”, sans-serif
font-size 24px, 1.5em
Practice
1. Add the CSS style tags to the head of the web document.
2. Add style definitions for body, h1 and h2.
Page 9
Using Class styles to format content
There are several ways to use styles.
A tag style names a particular tag and defines how that tag will look every time it
is used. A style which defines h2 to blue would cause all content with the h2 tag to
be blue.
h2 {color: blue} Tag selector
Suppose you have a special h2 tag which needs to be green, not blue. Here you would define a class style instead. A class style uses a name which you choose instead of a tag name. Class styles are defined in a similar way to tag styles but they are applied
in a different way.
.highlight {color: maroon} Class selector
Note the selector name is not a tag but a name you choose (.color-it). It begins
with a period and may not have any spaces.
Apply a Class style
1. To apply a class style to an individual tag use the class attribute in the open
tag.
<h2 class=”highlight”>The MIT Center for Industrial Growth</h2>
Note: We drop the period from the name of a class style when it is applied.
2. You can also apply a class style to a piece of content using the <span> tag. Here
only MIT is green.
<h2>The <span class="highlight">MIT</span> Center for Industrial Growth.</h2>
Practice
1. Create a class style to make the letters MIT in the title the color maroon.
Page 10
Using the Design View in Dreamweaver
Everything we have accomplished using html in the Code view we can also
accomplish through point and click in the Design view.
The Properties Panel
The Properties Panel is used for formatting. It is context sensitive based on the
cursor location. If your cursor is located in some text you will see the following
choices in the panel.
Note: This image shows the Properties panel for Dreamweaver CS4 and CS5. Older
versions will look and act differently depending on which options you choose.
Page 11
Upload Your Files to the Live Web Server
Create a Site Definition in Dreamweaver
1. From the Site menu choose New Site
2. Click on the Advanced tab
3. Select Local Info from the Category list
4. Type a name for your project (e.g., same name as your project folder)
5. Locate the Local Root folder on your hard drive using the browse icon. The
Root folder is the one with your files.
Mac users can select the folder and then click Choose. Windows users must
open the folder and then click Select. Double check to be sure it’s correct
and edit if necessary.
6. Select Remote Info from the Category list
7. Select Access then FTP
8. Select or enter the following:
FTP Host athena.dialup.mit.edu
Host Directory examples /afs/athena.mit.edu/org/c/cig/a#
Login your Kerberos username
Password leave blank
Use Passive FTP check this option
Use Firewall uncheck this option
Use Secure FTP (SFTP) check this option
Page 12
Connect to your site locker, upload your files and view in your browser
1. Click the Expand/Collapse tool to see files on your computer and on
the server in a split screen.
2. Click on the Connect icon on the toolbar. It looks like a plug.
3. Select your files from the local folder (right column) then click the upload
button.
4. Click Yes when asked to upload dependant files.
Note: To restore the default screen arrangement click on Windows, then
Workspace Layout, then choose Classic. You’ll choose Default (on a Mac) or
Designer (on Windows) with earlier versions of Dreamweaver.
For more complete details on site definition, uploading and downloading files see
the appropriate sections of the Web Maintenance Essentials course
documentation.
Page 13
Final Page
Page 14
Final Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MIT Center for Industrial Growth</title>
<style type="text/css">
body {font-family: arial, helvetica, sans-serif;}
h1 {font-family: "trebuchet ms", arial, helvetica, sans-serif;
font-size: 2em;
color: navy;}
h2 {font-family: "trebuchet ms", arial, helvetica, sans-serif}
.highlight {color: #900}
.copyright {font-size: 0.8em;
color: maroon;
text-align: center;}
</style>
</head>
<body>
<h1><img src="mit-dome.jpg" alt="mit dome"> The <span
class="highlight">MIT</span> Center for Industrial Growth</h1>
<hr />
<h2>About the Center</h2>
<blockquote>
<p>MIT and industry have a long record of cooperation through projects
ranging from joint education and research (where student participation is
often a strong component) to intensive continuing education programs. </p>
<p>The collaboration is extensive: industry executives serve on the MIT
Corporation and its committees; MIT faculty members serve as consultants for
industry; and MIT educates and prepares its students for careers in industry.
The relationship between MIT and industry has had an important effect on the
direction of education at the Institute.</p>
<p>The Center was founded by <a href="donald-martin-bio.html">Dr. Donald
Edwin Martin</a> who still heads the Center today. Dr. Martin's research
areas include organizational process, plant safety, managing turnover, and
diversity in the workplace. </p>
</blockquote>
Page 15
<h2>Center Research Activities</h2>
<blockquote>
<p>The Center's core faculty members represent a variety of academic units
from the Sloan School of Management, but with participation from other
faculty and collaborating faculty from Harvard and Tufts Universities and
representatives of State and Federal agencies. These faculty participate in
research programs focusing on the following primary research areas:</p>
<ul>
<li>Lean Manufacturing</li>
<li>Green Management Innovations</li>
<li>American Manufacturing and the US Trade Deficit</li>
<li>Six Sigma and Plant Safety</li>
</ul>
<p>Visit the other areas of our website for more information. You may also
<a href="mailto:[email protected]">email the Center</a> with any
questions.</p>
</blockquote>
<hr />
<p class="copyright"><a href="http://web.mit.edu"><img src="mit-logo.gif"
alt="mit logo" border="0" /></a></p>
<p class="copyright">Copyright 2011 MIT <br />All Rights Reserved</p>
</body>
</html>
Page 16
Resources
1. Web Resources at MIT
http://ist.mit.edu/services/web
2. MIT Software
http://ist.mit.edu/services/software
3. TSM No-cost Backup Service
http://ist.mit.edu/services/backup/tsm
4. MIT IS&T Help Desk
http://ist.mit.edu/support
Email: [email protected] Phone: 617-253-1101
5. IS&T Training Resources
IS&T Training Home http://ist.mit.edu/services/training IS&T Web Training: https://ist.mit.edu/services/training/webpublishing
lynda.mit.edu
6. Athena User Accounts
http://ist.mit.edu/support/accounts
Email: [email protected] Phone: 617.253.1325
7. Publishing Services Bureau (PSB)
http://web.mit.edu/psb
