Web Publishing Basics 2 HTML and CSS Coding Jeff Pankin pankin@mit.edu Information Services and Technology
Contents 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 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. Page 2
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> <title> </title> <h1> </h1> <p> </p> </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. <hr /> <img /> 5. Some tags have attributes. <img src="mit-dome.jpg" /> Page 3
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"> </html> <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> Tag DOCTYPE html head body title Description Explains the HTML version to use. Note the use of XHTML* see explanation below Marks the beginning and end of the html document. An area of the document to place information which will not be displayed but is needed by the browser. The area of the code to place content which is to be displayed in the browser. 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 4
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 Tag p Description 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 li These tags create an unordered list or ordered list. Each list item is enclosed in a set of li tags. Page 5
Enhance the visual appearance of a page with additional html tags Tag em strong <hr /> <br /> blockquote Description Adds italic to the enclosed content. The em tag is recognized by screen readers. Adds bold to the enclosed content. The strong tag is recognized by screen readers. 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. 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. Indents content enclosed by a pair of blockquote tags. You may blockquote several tags at once. Add an image to a web page Tag <img /> src= mit-dome.jpg alt= image of MIT dome border= 0 Description 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. 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= mit-dome.jpg /> 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= mit-dome.jpg alt= image of MIT dome /> 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= mit-logo.gif 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. MIT logos are currently located at: web.mit.edu/graphicidentity/logo/forweb.html Click Direct Download. Page 6
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) Tag a Description 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" href= mailto:rjohnson@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> 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:rjohnson@mit.edu >Richard Johnson</a> Practice 1. Add a link from Dr. Donald Edwin Martin to his bio page donald-martinbio.html. 2. Add a link to the words email the center in the last paragraph which addresses an email to admin-cig@mit.edu. 3. Add a link from the MIT logo image in the footer to the MIT homepage. Page 7
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? CSS Style Tags h1 {color: navy} 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 color (text color) background (background color) font-family font-size Values blue, #44aa77 blue, #44aa77 arial, times new roman, sans-serif 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. Page 8
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 appear in a color of your choice. Page 9
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 10
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 Host Directory examples Login Password Use Passive FTP Use Firewall Use Secure FTP (SFTP) athena.dialup.mit.edu /afs/athena.mit.edu/org/c/cig/a# your Kerberos username leave blank check this option uncheck this option check this option Page 11
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 12
Final Page Page 13
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 14
<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:cig-admin@mit.edu">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 15
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) web.mit.edu/psb Page 16
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 Page 17
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. Page 18
A list of web safe fonts and more Below I have included a table listing out all of the most common fonts and what operating systems they usually come with. Granted most machines have a lot more fonts then this, the ones I have listed are the most popular and mostly considered universally acceptable to use as a web safe font. Web safe and common fonts Generic serif sans-serif cursive monospace Font Cambria Constantia Times New Roman Times Georgia Andale Mono Arial Arial Black Calibri Candara Century Gothic Corbel Helvetica Impact Trebuchet MS Verdana Comic Sans MS Consolas Courier New Courier Windows 9x/2K/XP Windows Vista Mac Classic Mac OS X Linux Unix *The green marks show very common fonts, the yellow shows not so common but all are generally accepted as web safe. Page 19