Web Publishing Basics 2
|
|
|
- Sophie Carter
- 8 years ago
- Views:
Transcription
1 Web Publishing Basics 2 HTML and CSS Coding Jeff Pankin pankin@mit.edu Information Services and Technology
2 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 The Properties Panel Upload Your Files to the Live Web Server Create a Site Definition in Dreamweaver Connect to your site locker, upload your files and view in your browser Final Page Final Code Resources Copyright 2011 by Massachusetts Institute of Technology. All Rights Reserved. Page 1
3 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
4 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
5 What is the basic set of code for an html document? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" </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
6 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
7 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
8 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 address (opens an 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= 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= >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 the center in the last paragraph which addresses an to admin-cig@mit.edu. 3. Add a link from the MIT logo image in the footer to the MIT homepage. Page 7
9 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 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
10 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
11 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
12 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
13 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
14 Final Page Page 13
15 Final Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <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
16 <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"> the Center</a> with any questions.</p> </blockquote> <hr /> <p class="copyright"><a href=" 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
17 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
18 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 - HTML Dog - W3C Schools - Web Monkey YouTube - Page 17
19 Fonts on the web and a list of web safe fonts July 18th, 2007 by Dustin Brewer 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
20 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
Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University
Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages
How To Use Dreamweaver With Your Computer Or Your Computer (Or Your Computer) Or Your Phone Or Tablet (Or A Computer)
ITS Training Introduction to Web Development with Dreamweaver In this Workshop In this workshop you will be introduced to HTML basics and using Dreamweaver to create and edit web files. You will learn
CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions)
CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) Step 1 - DEFINE A NEW WEB SITE - 5 POINTS 1. From the welcome window that opens select the Dreamweaver Site... or from the main
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates What is a DIV tag? First, let s recall that HTML is a markup language. Markup provides structure and order to a page. For example,
ITNP43: HTML Lecture 4
ITNP43: HTML Lecture 4 1 Style versus Content HTML purists insist that style should be separate from content and structure HTML was only designed to specify the structure and content of a document Style
Short notes on webpage programming languages
Short notes on webpage programming languages What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of
Web Site Maintenance Essentials
Web Site Maintenance Essentials Jeff Pankin Information Services and Technology Contents Course Objectives and Your Role As Site Maintainer... 3 Course Objectives... 3 Your Role... 3 Routine Tasks for
Introduction to Macromedia Dreamweaver MX
Introduction to Macromedia Dreamweaver MX Macromedia Dreamweaver MX is a comprehensive tool for developing and maintaining web pages. This document will take you through the basics of starting Dreamweaver
Web Design Revision. AQA AS-Level Computing COMP2. 39 minutes. 39 marks. Page 1 of 17
Web Design Revision AQA AS-Level Computing COMP2 204 39 minutes 39 marks Page of 7 Q. (a) (i) What does HTML stand for?... () (ii) What does CSS stand for?... () (b) Figure shows a web page that has been
Dreamweaver. Introduction to Editing Web Pages
Dreamweaver Introduction to Editing Web Pages WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 INTRODUCTION TO DREAMWEAVER... 1 Document Window 3 Toolbar 3 Insert Panel 4 Properties Panel
Web Design and Databases WD: Class 7: HTML and CSS Part 3
Web Design and Databases WD: Class 7: HTML and CSS Part 3 Dr Helen Hastie Dept of Computer Science Heriot-Watt University Some contributions from Head First HTML with CSS and XHTML, O Reilly Recap! HTML
Getting Started with KompoZer
Getting Started with KompoZer Contents Web Publishing with KompoZer... 1 Objectives... 1 UNIX computer account... 1 Resources for learning more about WWW and HTML... 1 Introduction... 2 Publishing files
How to code, test, and validate a web page
Chapter 2 How to code, test, and validate a web page Slide 1 Objectives Applied 1. Use a text editor like Aptana Studio 3 to create and edit HTML and CSS files. 2. Test an HTML document that s stored on
Web Development CSE2WD Final Examination June 2012. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards?
Question 1. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards? (b) Briefly identify the primary purpose of the flowing inside the body section of an HTML document: (i) HTML
Introduction to XHTML. 2010, Robert K. Moniot 1
Chapter 4 Introduction to XHTML 2010, Robert K. Moniot 1 OBJECTIVES In this chapter, you will learn: Characteristics of XHTML vs. older HTML. How to write XHTML to create web pages: Controlling document
Dreamweaver CS6 Basics
Dreamweaver CS6 Basics Learn the basics of building an HTML document using Adobe Dreamweaver by creating a new page and inserting common HTML elements using the WYSIWYG interface. EdShare EdShare is a
So we're set? Have your text-editor ready. Be sure you use NotePad, NOT Word or even WordPad. Great, let's get going.
Web Design 1A First Website Intro to Basic HTML So we're set? Have your text-editor ready. Be sure you use NotePad, NOT Word or even WordPad. Great, let's get going. Ok, let's just go through the steps
Web Building Blocks. Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.
Web Building Blocks Core Concepts for HTML & CSS Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.edu @joegilbert Why Learn the Building Blocks? The idea
Creating HTML authored webpages using a text editor
GRC 175 Assignment 1 Creating HTML authored webpages using a text editor Tasks: 1. Acquire web host space with ad free provider 2. Create an index webpage (index.html) 3. Create a class management webpage
ITP 101 Project 3 - Dreamweaver
ITP 101 Project 3 - Dreamweaver Project Objectives You will also learn how to make a website outlining your company s products, location, and contact info. Project Details USC provides its students with
Contents. Downloading the Data Files... 2. Centering Page Elements... 6
Creating a Web Page Using HTML Part 1: Creating the Basic Structure of the Web Site INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Winter 2010 Contents Introduction...
EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING
EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING The European Computer Driving Licence Foundation Ltd. Portview House Thorncastle Street Dublin 4 Ireland Tel: + 353
HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout
CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout Fall 2011, Version 1.0 Table of Contents Introduction...3 Downloading
FETAC Certificate in Multimedia Production. IBaT College Swords. FETAC Certificate in Multimedia Production Web Authoring Dreamweaver 3
IBaT College Swords FETAC Certificate in Multimedia Production Web Authoring Dreamweaver 3 Lecturer: Cara Martin M.Sc. Lecturer contact details: cmartin@ibat.ie IBaT 2009 Page 1 Cascading Style Sheets
Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design
Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design Contents HTML Quiz Design CSS basics CSS examples CV update What, why, who? Before you start to create a site, it s
customer community Getting started Visual Editor Guide! www.pure360community.co.uk
Getting started! 1 Contents Introduction... 3 Visual Editor Options... 3-5 Advanced Tips... 6-7 Do s and Don ts... 7-9 Testing Messages... 10 2 Welcome The Visual Editor tool is the ideal resource for
ICE: HTML, CSS, and Validation
ICE: HTML, CSS, and Validation Formatting a Recipe NAME: Overview Today you will be given an existing HTML page that already has significant content, in this case, a recipe. Your tasks are to: mark it
Microsoft Expression Web
Microsoft Expression Web Microsoft Expression Web is the new program from Microsoft to replace Frontpage as a website editing program. While the layout has changed, it still functions much the same as
Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence
Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.
Module 6 Web Page Concept and Design: Getting a Web Page Up and Running
Module 6 Web Page Concept and Design: Getting a Web Page Up and Running Lesson 3 Creating Web Pages Using HTML UNESCO EIPICT M6. LESSON 3 1 Rationale Librarians need to learn how to plan, design and create
Designing HTML Emails for Use in the Advanced Editor
Designing HTML Emails for Use in the Advanced Editor For years, we at Swiftpage have heard a recurring request from our customers: wouldn t it be great if you could create an HTML document, import it into
Introduction to Web Design Curriculum Sample
Introduction to Web Design Curriculum Sample Thank you for evaluating our curriculum pack for your school! We have assembled what we believe to be the finest collection of materials anywhere to teach basic
Creating an HTML Document Using Macromedia Dreamweaver
INFORMATION SYSTEMS SERVICES Creating an HTML Document Using Macromedia Dreamweaver This tutorial workbook contains a series of exercises that give an introduction to creating HTML documents for the World
HTML, CSS, XML, and XSL
APPENDIX C HTML, CSS, XML, and XSL T his appendix is a very brief introduction to two markup languages and their style counterparts. The appendix is intended to give a high-level introduction to these
The McGill Knowledge Base. Last Updated: August 19, 2014
The McGill Knowledge Base Last Updated: August 19, 2014 Table of Contents Table of Contents... 1... 2 Overview... 2 Support... 2 Exploring the KB Admin Control Panel Home page... 3 Personalizing the Home
Creating your personal website. Installing necessary programs Creating a website Publishing a website
Creating your personal website Installing necessary programs Creating a website Publishing a website The objective of these instructions is to aid in the production of a personal website published on
HTML and CSS. Elliot Davies. April 10th, 2013. ed37@st-andrews.ac.uk
HTML and CSS Elliot Davies ed37@st-andrews.ac.uk April 10th, 2013 In this talk An introduction to HTML, the language of web development Using HTML to create simple web pages Styling web pages using CSS
Microsoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,
Adobe Dreamweaver - Basic Web Page Tutorial
Adobe Dreamweaver - Basic Web Page Tutorial Window Elements While Dreamweaver can look very intimidating when it is first launched it is an easy program. Dreamweaver knows that your files must be organized
Dreamweaver CS5. Module 2: Website Modification
Dreamweaver CS5 Module 2: Website Modification Dreamweaver CS5 Module 2: Website Modification Last revised: October 31, 2010 Copyrights and Trademarks 2010 Nishikai Consulting, Helen Nishikai Oakland,
Creating Web Pages with Dreamweaver CS 6 and CSS
Table of Contents Overview... 3 Getting Started... 3 Web Page Creation Tips... 3 Creating a Basic Web Page Exercise... 4 Create a New Page... 4 Using a Table for the Layout... 5 Adding Text... 6 Adding
Web Development 1 A4 Project Description Web Architecture
Web Development 1 Introduction to A4, Architecture, Core Technologies A4 Project Description 2 Web Architecture 3 Web Service Web Service Web Service Browser Javascript Database Javascript Other Stuff:
BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D
BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D 1 LEARNING OUTCOMES Describe the anatomy of a web page Format the body of a web page with block-level elements
A send-a-friend application with ASP Smart Mailer
A send-a-friend application with ASP Smart Mailer Every site likes more visitors. One of the ways that big sites do this is using a simple form that allows people to send their friends a quick email about
Smartphones and tablets: If you have a data plan, use the SMTP server setting for the company that provides this service.
ARTSPHERE USER MANUAL Hosting for versions 5.0 and 5.1 The hosting control panel is where your website is located. We refer to this as the cpanel. To access the cpanel add /cpanel to your domain name (for
Adobe Dreamweaver CC 14 Tutorial
Adobe Dreamweaver CC 14 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site
CREATING WEB PAGES USING HTML INTRODUCTION
CREATING WEB PAGES USING HTML INTRODUCTION Web Page Creation Using HTML: Introduction 1. Getting Ready What Software is Needed FourSteps to Follow 2. What Will Be On a Page Technical, Content, & Visual
Chapter 2 HTML Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D
Chapter 2 HTML Basics Key Concepts Copyright 2013 Terry Ann Morris, Ed.D 1 First Web Page an opening tag... page info goes here a closing tag Head & Body Sections Head Section
Contents. Introduction... 2. Downloading the Data Files... 2
Creating a Web Page Using HTML Part 3: Multi-page Management and Uploading INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 1.1 Summer 2009 Contents Introduction... 2 Downloading
Advanced Web Design. Zac Van Note. www.design-link.org
Advanced Web Design Zac Van Note www.design-link.org COURSE ID: CP 341F90033T COURSE TITLE: Advanced Web Design COURSE DESCRIPTION: 2/21/04 Sat 9:00:00 AM - 4:00:00 PM 1 day Recommended Text: HTML for
CIS 467/602-01: Data Visualization
CIS 467/602-01: Data Visualization HTML, CSS, SVG, (& JavaScript) Dr. David Koop Assignment 1 Posted on the course web site Due Friday, Feb. 13 Get started soon! Submission information will be posted Useful
How To Create A Web Page On A Windows 7.1.1 (For Free) With A Notepad) On A Macintosh (For A Freebie) Or Macintosh Web Browser (For Cheap) On Your Computer Or Macbook (
CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS The following exercises illustrate the process of creating and publishing Web pages with Notepad, which is the plain text editor that ships as part of
Create Webpages using HTML and CSS
KS2 Create Webpages using HTML and CSS 1 Contents Learning Objectives... 3 What is HTML and CSS?... 4 The heading can improve Search Engine results... 4 E-safety Webpage... 5 Creating a Webpage... 6 Creating
Creating a Resume Webpage with
Creating a Resume Webpage with 6 Cascading Style Sheet Code In this chapter, we will learn the following to World Class CAD standards: Using a Storyboard to Create a Resume Webpage Starting a HTML Resume
U.S. Coast Guard Auxiliary Department of User Services Dynamic Web Template User Guide. Version: 10.0.1
U.S. Coast Guard Auxiliary Department of User Services Dynamic Web Template User Guide Version: 10.0.1 Date: August 2, 2011 [ This page is intentional left blank ] Page: ii Table of Contents List of Figures...
Adobe Dreamweaver Student Organizations Publishing Details Getting Started Basic Web Page Tutorial For Student Organizations at Dickinson College *
Adobe Dreamweaver Student Organizations Publishing Details Getting Started Basic Web Page Tutorial For Student Organizations at Dickinson College * Some Student Organizations are on our web server called
Dreamweaver. Links and Tables
Dreamweaver Links and Tables WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 ADDING HYPERLINKS... 2 New Text Hyperlink 2 Existing Text or Image Hyperlink 2 EXERCISE 1 3 New Text E-mail
IAS Web Development using Dreamweaver CS4
IAS Web Development using Dreamweaver CS4 Information Technology Group Institute for Advanced Study Einstein Drive Princeton, NJ 08540 609 734 8044 * helpdesk@ias.edu Information Technology Group [2] Institute
JISIS and Web Technologies
27 November 2012 Status: Draft Author: Jean-Claude Dauphin JISIS and Web Technologies I. Introduction This document does aspire to explain how J-ISIS is related to Web technologies and how to use J-ISIS
Using an external style sheet with Dreamweaver (CS6)
Using an external style sheet with Dreamweaver (CS6) nigelbuckner.com 2012 This handout explains how to create an external style sheet, the purpose of selector types and how to create styles. It does not
Basic Web Development @ Fullerton College
Basic Web Development @ Fullerton College Introduction FC Net Accounts Obtaining Web Space Accessing your web space using MS FrontPage Accessing your web space using Macromedia Dreamweaver Accessing your
Web Design with Dreamweaver Lesson 4 Handout
Web Design with Dreamweaver Lesson 4 Handout What we learned Create hyperlinks to external websites Links can be made to open in a new browser window Email links can be inserted onto webpages. When the
HTML TIPS FOR DESIGNING
This is the first column. Look at me, I m the second column.
Building Your Website
Building Your Website HTML & CSS This guide is primarily aimed at people building their first web site and those who have tried in the past but struggled with some of the technical terms and processes.
Building a Personal Website (Adapted from the Building a Town Website Student Guide 2003 Macromedia, Inc.)
Building a Personal Website (Adapted from the Building a Town Website Student Guide 2003 Macromedia, Inc.) In this project, you will learn the web publishing skills you need to: Plan a website Define a
HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL
![HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL](/thumbs/40/20611446.jpg "HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL")
HTML CSS Basic Structure HTML [Hypertext Markup Language] is the code read by a browser and defines the overall page structure. The HTML file or web page [.html] is made up of a head and a body. The head
Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com
Essential HTML & CSS for WordPress Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com HTML: Hypertext Markup Language HTML is a specification that defines how pages are created
Responsive Web Design for Teachers. Exercise: Building a Responsive Page with the Fluid Grid Layout Feature
Exercise: Building a Responsive Page with the Fluid Grid Layout Feature Now that you know the basic principles of responsive web design CSS3 Media Queries, fluid images and media, and fluid grids, you
Basic Website Maintenance Tutorial*
Basic Website Maintenance Tutorial* Introduction You finally have your business online! This tutorial will teach you the basics you need to know to keep your site updated and working properly. It is important
Web Editing Basics 1 TOPICS
Web Editing Basics 1 TOPICS 1. Opening your site.1 2. What you see.1 3. Navigate to your Web page 2 4. Make text edits...2 5. Prepare documents and images for the Web 3 6. Move documents and images from
Creating Personal Web Sites Using SharePoint Designer 2007
Creating Personal Web Sites Using SharePoint Designer 2007 Faculty Workshop May 12 th & 13 th, 2009 Overview Create Pictures Home Page: INDEX.htm Other Pages Links from Home Page to Other Pages Prepare
Website Development Komodo Editor and HTML Intro
Website Development Komodo Editor and HTML Intro Introduction In this Assignment we will cover: o Use of the editor that will be used for the Website Development and Javascript Programming sections of
Using Style Sheets for Consistency
Cascading Style Sheets enable you to easily maintain a consistent look across all the pages of a web site. In addition, they extend the power of HTML. For example, style sheets permit specifying point
css href title software blog domain HTML div style address img h2 tag maintainingwebpages browser technology login network multimedia font-family
technology software href browser communication public login address img links social network HTML div style font-family url media h2 tag handbook: id domain TextEdit blog title PORT JERVIS CENTRAL SCHOOL
About webpage creation
About webpage creation Introduction HTML stands for HyperText Markup Language. It is the predominant markup language for Web=ages. > markup language is a modern system for annota?ng a text in a way that
Website Planning Checklist
Website Planning Checklist The following checklist will help clarify your needs and goals when creating a website you ll be surprised at how many decisions must be made before any production begins! Even
Setting Up Dreamweaver for FTP and Site Management
518 442-3608 Setting Up Dreamweaver for FTP and Site Management This document explains how to set up Dreamweaver CS5.5 so that you can transfer your files to a hosting server. The information is applicable
Creating Web Pages With Dreamweaver MX 2004
Creating Web Pages With Dreamweaver MX 2004 1 Introduction Learning Goal: By the end of the session, participants will have an understanding of: What Dreamweaver is, and How it can be used to create basic
Introduction to Web Technologies
Introduction to Web Technologies Tara Murphy 17th February, 2011 The Internet CGI Web services HTML and CSS 2 The Internet is a network of networks ˆ The Internet is the descendant of ARPANET (Advanced
MAPPING THE WEBDRIVE REFERENCE GUIDE
MAPPING THE WEBDRIVE REFERENCE GUIDE INTRODUCTION The university WebDrive is a dedicated drive to host all university web content. For help with mapping the WebDrive, please read the instructions below
Intro to Web Development
Intro to Web Development For this assignment you will be using the KompoZer program because it free to use, and we wanted to keep the costs of this course down. You may be familiar with other webpage editing
How to Manage Your Eservice Center Knowledge Base
Populating and Maintaining your eservice Center Knowledge Base Table of Contents Populating and Maintaining the eservice Center Knowledge Base...2 Key Terms...2 Setting up the Knowledge Base...3 Consider
Dreamweaver Tutorial #1
Dreamweaver Tutorial #1 My first web page In this tutorial you will learn: how to create a simple web page in Dreamweaver how to store your web page on a server to view your page online what the Internet
Dreamweaver CS5. Module 1: Website Development
Dreamweaver CS5 Module 1: Website Development Dreamweaver CS5 Module 1: Website Development Last revised: October 29, 2010 Copyrights and Trademarks 2010 Nishikai Consulting, Helen Nishikai Oakland, CA
Basic tutorial for Dreamweaver CS5
Basic tutorial for Dreamweaver CS5 Creating a New Website: When you first open up Dreamweaver, a welcome screen introduces the user to some basic options to start creating websites. If you re going to
UCL INFORMATION SERVICES DIVISION INFORMATION SYSTEMS. Silva. Introduction to Silva. Document No. IS-130
UCL INFORMATION SERVICES DIVISION INFORMATION SYSTEMS Silva Introduction to Silva Document No. IS-130 Contents What is Silva?... 1 Requesting a website / Web page(s) in Silva 1 Building the site and making
Virtual Exhibit 5.0 requires that you have PastPerfect version 5.0 or higher with the MultiMedia and Virtual Exhibit Upgrades.
28 VIRTUAL EXHIBIT Virtual Exhibit (VE) is the instant Web exhibit creation tool for PastPerfect Museum Software. Virtual Exhibit converts selected collection records and images from PastPerfect to HTML
Outline of CSS: Cascading Style Sheets
Outline of CSS: Cascading Style Sheets nigelbuckner 2014 This is an introduction to CSS showing how styles are written, types of style sheets, CSS selectors, the cascade, grouping styles and how styles
01/42. Lecture notes. html and css
web design and applications Web Design and Applications involve the standards for building and Rendering Web pages, including HTML, CSS, SVG, Ajax, and other technologies for Web Applications ( WebApps
04 Links & Images. 1 The Anchor Tag. 1.1 Hyperlinks
One of the greatest strengths of Hypertext Markup Language is hypertext the ability to link documents together. The World Wide Web itself consists of millions of html documents all linked together via
Creating the Surf Shop website Part3 REVISED
Creating the Surf Shop website Part3 REVISED Part 2 Recap: You should have the navigation completed for the website before starting Part 3. 1)Create a new DIV in index.html. It should come after banner
WHITEPAPER. Skinning Guide. Let s chat. 800.9.Velaro www.velaro.com info@velaro.com. 2012 by Velaro
WHITEPAPER Skinning Guide Let s chat. 2012 by Velaro 800.9.Velaro www.velaro.com info@velaro.com INTRODUCTION Throughout the course of a chat conversation, there are a number of different web pages that
COMMON CUSTOMIZATIONS
COMMON CUSTOMIZATIONS As always, if you have questions about any of these features, please contact us by e-mail at pposupport@museumsoftware.com or by phone at 1-800-562-6080. EDIT FOOTER TEXT Included
Using Internet or Windows Explorer to Upload Your Site
Using Internet or Windows Explorer to Upload Your Site This article briefly describes what an FTP client is and how to use Internet Explorer or Windows Explorer to upload your Web site to your hosting
Page1. Tera Doty-Blance http://library.cortland.edu/ttc/training_center.asp
Page1 Contents Setting Up a Student Web Account on the SUNY Cortland Web Server... 2 Opening the iweb Application and Choosing a Template... 3 Publishing Your iweb site to Student Web... 5 Creating a Copy
Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan
Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan In earlier versions of dreamweaver web developers attach drop down menus to graphics or hyperlinks by using the behavior box. Dreamweaver
Web Design with CSS and CSS3. Dr. Jan Stelovsky
Web Design with CSS and CSS3 Dr. Jan Stelovsky CSS Cascading Style Sheets Separate the formatting from the structure Best practice external CSS in a separate file link to a styles from numerous pages Style
NJCU WEBSITE TRAINING MANUAL
NJCU WEBSITE TRAINING MANUAL Submit Support Requests to: http://web.njcu.edu/its/websupport/ (Login with your GothicNet Username and Password.) Table of Contents NJCU WEBSITE TRAINING: Content Contributors...
Microsoft FrontPage 2003 Creating a Personal Web Page
IT Services Microsoft FrontPage 2003 Creating a Personal Web Page Contents Introduction... 2 Loading a Browser... 2 Looking Behind Web Pages... 2 Creating a Web Page... 3 A Simple Page... 3 Web Page Views...
How To Set Up A Webhosting Website On Windstream.Com
E-commerce Web Hosting Package Welcome To Your Windstream Hosting Service! We are pleased you have chosen us as your solutions provider to help your business become even more successful. We recognize your