Web Publishing Basics 2

(1)

Web Publishing Basics 2

HTML and CSS Coding

Jeff Pankin

[email protected]

(2)

Page 1

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.

(4)

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. <html>

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 by Dr. Donald Edwin Martin… </p> 4. Some tags are singles and have no closing.

5. Some tags have attributes.

(5)

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>

<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.

(6)

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 open <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

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.

(7)

Page 6

Enhance the visual appearance of a page with additional html tags

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.

<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.

blockquote Indents content enclosed by a pair of blockquote tags. You may blockquote several tags at once.

Add an image to a web page

<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=”mit-dome.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.

alt=”image of MIT dome”

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.

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.

Practice

1. Add the mit-dome.jpg image to the title. 2. Add the mit-logo.gif image to the footer.

MIT logos are currently located at: web.mit.edu/graphicidentity/logo/forweb.html Click Direct Download.

(8)

Page 7

Add a Link to a Page

There are three types of links:

 a link to an external web page (to a url address)

 a link to an internal web page on your site (to an html document)

 a link to an email address (opens an email program and adds the address you supply)

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” href="index.html"

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].

(9)

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, red, 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 what thing is selected to be styled? property what attribute is being styled? value what is it being styled to?

h1 {color: navy}

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: navy}

h2 {font-family: arial, sans-serif; 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

Visit www.w3schools.com/html/html_colornames.asp for color suggestions.

Practice

1. Add the CSS style tags to the head of the web document. 2. Add/modify style definitions for body, h1 and h2.

(10)

Page 9

Using Class styles to format content

There are several ways to use styles. Here are two ways: tag styles and class styles.

1. 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

2. 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.

.color-it {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. The period is dropped when the style is actually used.

Apply a Class style to a tag

To apply a class style to an individual tag use the class attribute in the open tag.

<h1 class=”color-it”>The MIT Center for Industrial Growth</h1>

Apply a Class style to content within a tag

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="color-it">MIT</span> Center for Industrial

Growth.</h2>

Practice

1. Create a class style to make the letters MIT in the title the color maroon. 2. Create a new class style to make the words Sloan School of Management

(11)

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.

(12)

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

(13)

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.

(14)

Page 13

(15)

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>

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>

(16)

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 />

</body>

(17)

Page 16

Resources

1. MIT Legal and Policy Guidelines for the Use of Web Space

ist.mit.edu/services/web/reference/requirements/legal-and-policy-guidelines

2. MIT Software Downloads

ist.mit.edu/services/software/available-software

3. TSM Backup Service

ist.mit.edu/services/backup/tsm

4. Web Publishing reference pages at MIT

ist.mit.edu/services/web/reference

5. MIT IS&T Help Desk & Support

ist.mit.edu/support

6. Departmental Consulting and Application Development (DCAD)

ist.mit.edu/dcad

7. IS&T Training Resources

ist.mit.edu/services/training lynda.mit.edu

8. Athena User Accounts

ist.mit.edu/support/accounts

9. Publishing Services Bureau (PSB)

(18)

Page 17

Books

Dreamweaver CS4 (or CS5) The Missing Manual - David Sawyer McFarland, 2006, O'Reilly Media, Inc.

Spring into HTML and CSS -Molly E. Holzschlag, 2005, Addison Wesley Head First HTML with CSS & XHTML - Eric Freeman and Elisabeth Freeman, 2005, O'Reilly Media, Inc.

CSS The Definitive Guide - Eric A. Meyer, 2006, O'Reilly Press

Eric Meyer on CSS: Mastering the Language of Web Design - Eric A. Meyer, 2002, New Riders

Web Sites at MIT

Web Resources at MIT – ist.mit.edu/services/web

MIT DCAD - Departmental Consulting and Application Development - ist.mit.edu/dcad

Lynda.com - lynda.mit.edu

Web Publishing Training Classes and Resources - ist.mit.edu/services/training/webpublishing

Web Sites outside of MIT

A List Apart - www.alistapart.com HTML Dog - www.htmldog.com W3C Schools - www.w3schools.com Web Monkey – www.webmonkey.com YouTube - www.youtube.com

(19)

Page 18

Fonts on the web and a list of web safe fonts

July 18th, 2007 by Dustin Brewer http://dustinbrewer.com/

Many of you have been asking, “What fonts are safe for me to use on the web?” and “Is there a

list of web safe fonts for reference?” Well I am here to help. Web safe fonts are ever important

but a lot of designers I have seen lately are forgoing this important step in their design creation.

Some are taking the steps to use a font similar to a web safe font but because it is not in fact

web safe they inevitably have to default back to a font that isn’t quite the same. Their design

loses a little of itself and at this point they typically struggle to find a font that is close and web

safe. There are plenty of web safe fonts available it just takes some creativity in using them to

your advantage. I have a list of web safe fonts available in the article to help everyone out.

Some of you that may have heard of the term web safe before and not quite known it’s

meaning, others don’t fully know the reasoning behind it. I am here to clear all of these things

up. First off, web safe fonts are those that are nearly universally available on any computer. So

that when the end user, regardless of their machine preferences, goes to the web site they get

the same experience as anyone else going to the web site. This is what web standards are all

about and ensuring that you are using web safe fonts throughout your website is just as

important as including a DOCTYPE and HTML tag in the beginning.

A little background on fonts

So now that I have explained what web safe fonts are you need to know a little about fonts

themselves to make sure we are all on the same page. There are basically two types of fonts

there are serif and sans serif fonts. Serif fonts are fonts that have fine cross lines at the ends of

the letters. Sans serif (French for without serifs) are fonts that don’t have anything at the end of

the letters. The most common serif font is Times New Roman and just happens to be the

default for most windows-based browsers.

Mono-spaced fonts are fonts that have the same amount of space between them for all of

the letters.

There are others types of fonts that fall into one of these two major categories but I think I will

save that article for another time and focus on the topic at hand. Be looking for an article on

Typography to be coming up soon.

(20)

Page 19

Web Publishing Basics 2