Web Publishing Basics I Jeff Pankin Information Services and Technology
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 1
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 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. 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 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"> <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 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. 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 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 blockquote <hr /> <br /> em strong Description Indents content enclosed by a pair of blockquote tags. You may blockquote several tags at once. 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. 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. Add an image to a web page Tag <img /> src= logo.jpg alt= mit logo 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= logo.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. <img src= logo.jpg alt= image of mit logo /> 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 6
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 a href= http://web.mit.edu href= mailto:sjones@mit.edu Description 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> 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> 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:sjones@mit.edu >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 admin@cig.edu. 3. Add a link from Dr. Hardt to his bio page hardt-bio.html. 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, 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 color (text color) background (background color) font-family font-size Values blue, #44AA77 blue, #44AA77 arial, times new roman, sansserif 24px, 1.5em Page 8
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 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. With an image selected these choices are available. If the cursor in located in a table these are the choices. 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. 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 > 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 12
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: help-desk@mit.edu 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: accounts@mit.edu Phone: 617.253.1325 7. Publishing Services Bureau (PSB) http://web.mit.edu/psb Page 13