jeff pankin information services and technology
TRANSCRIPT
Web Publishing Basics I
Jeff Pankin
Information Services and Technology
Page 1
Contents
Course Objectives ....................................................................................... 2
Creating a Web Page with HTML ................................................................. 3
What is Dreamweaver? ................................................................................ 3
What is HTML? ............................................................................................ 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 ...................................................................................................... 7
Add a link to a page ..................................................................................... 7
Practice ...................................................................................................... 7
Formatting a Web Page using Cascading Style Sheets (CSS) ...................... 8
What is CSS and what how can it enhance my web page? ................................ 8
Basic CSS Syntax ........................................................................................ 8
Examples of Properties and Values ................................................................ 8
Practice ...................................................................................................... 9
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
Resources ................................................................................................. 13
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 the graphical Dreamweaver editor and 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 and non-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.
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 http-equiv="Content-Type" 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 Professor John Pendleton… </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.
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, Blank Page, HTML then click the Create
button.
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 learn.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.
<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” />
Page 7
Practice
1. Add the MIT dome image to the title.
2. Add the MIT logo image to the footer.
Add a link to a page
Tag Description
a The anchor tag used to create a link to an external web
page, another page in the current web site or a mailto
link. The anchor 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 anchor 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.
<a href=”http://web.mit.edu”>click here</a>
<a href=”directory.html”>click here</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]”>click here</a>
Practice
1. Add a link from MIT in title and the MIT logo image to the MIT homepage.
2. Add a link to the words “click here” in the footer which addresses an email to
3. Add a link from Dr. Hardt to his bio page hardt-bio.html.
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 the name of a tag (tag style)
a name you create (class
style)
h1, p, body
.mit, .align-table
property the attribute you wish to change font-size, font-family, color
value what the attribute will change to 24px, “times new roman", blue
Basic CSS Syntax
The style tag 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">
selector {property: value}
selector {property: value; property: value}
</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
Page 9
Practice
1. Add the CSS style tag to the head of the web document.
2. Add style definitions for p, h1, h2, ul and li.
Using Class styles to format content
With a tag style definition, all places where the tag is used are styled according to
the definition. A style which defines h2 to blue would cause all content with the h2
tag to be blue.
Suppose a single piece of content with the h2 tag needs to be green instead of blue. You can accomplish this with a class style.
A class style is a type of style which you name, define and apply manually to a tag or individual piece of content. Class styles are defined in a similar way to tag styles.
.mit {color: maroon}
Note the selector name is not a tag but a name you choose. It begins with a
period.
Apply a Class style
Apply a class style to a tag.
<p class=”mit”>Welcome to the MIT Watercolor Club Home Page</p>
Apply a class style to content using the <span> tag.
<p>Welcome to the <span class="mit">MIT Watercolor Club</span> Home Page.</p>
We drop the period from the name of a class style when it is applied.
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.
With an image selected these choices are available.
If the cursor in located in a table these are the choices.
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. 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 > Workspace,
and choose Default (Mac) or Designer (Windows).
For more complete details on site definition, uploading and downloading files see
the appropriate sections of the Web Maintenance Essentials course
documentation.
Page 13
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.com: 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