HTML 4.0. A Beginner s Guide. Traci Terrill
|
|
- Scott James
- 7 years ago
- Views:
Transcription
1 HTML 4.0 A Beginner s Guide Traci Terrill traci.terrill@netxv.net
2 Table of Contents Understanding How the Web Works... 2 Planning a Web Site... 3 HTML Rules of Syntax... 4 Starting an HTML Document... 5 Setting up the Basic Structure... 6 Viewing an HTML Document... 8 Using Basic Text Tags... 9 Changing Background Color Formatting Text Creating Lists Adding Graphics Linking it all Together! HTML 4.0 2
3 Understanding How the Web Works There are three basic components of the web: Web Server A computer that is connected to the Internet or Intranet. It runs a program that allows it to make information available when a client requests it. HTML Documents The pages on the Web server are simple text files composed in a language known as HTML (Hypertext Markup Language). This language allows Web page authors to format text, display graphics, play sounds and create links to other documents. Web Browsers The web browser running on your computer puts all the pieces together. *The most popular web browsers are Microsoft Internet Explorer and Netscape Navigator. Both interpret HTML code, but each browser loads the page slightly differently-leading to different looks on-screen. HTML was developed at CERN, the European high-energy physics center, which was also the birthplace of the World Wide Web. A technical definition of the World Wide Web is: all the resources and users on the Internet that are using the Hypertext Transfer Protocol (HTTP). HTML is a high-level document description language, meaning it specifies the structure of a document in general terms and leaves the specifics to the Web browser. This gives the individual more control on how the web page looks. As Navigator and Internet Explorer compete for the Web market each adds new features that are not supported by the other browser. The significance of these developments to Web page authors is the need for awareness that some browsers may not be able to use some features that the other browsers don t have. Authors must weigh the advantages of the new features against this disadvantage. HTML 4.0 3
4 Planning a Web Site Think of a web site as a collection of web pages linked together by a single organization and for a single purpose. When you plan a Web site, please consider the following questions: Top-level planning issues Questions include: What is your goal? Why are you creating this site? Who is your audience? What info are they looking for? What are your resources? Can you incorporate video and other items? The structure of the web site The main page you see when you visit the site is the homepage. Questions you need to consider: What is the relationship between the pages? Is it going to be in a linear plan with one page linking to another? Or a logical plan where information is presented in a tree like fashion. The directory structure If the number of pages, graphics, and other items in the website is small it is recommended to keep the entire site in a single directory. You will not have to worry about references to the directory in the links. If the website is to be large, plan on subdirectories for different types of files or pages/divisions of the website. Consider web page design issues Remember that different browsers can have an effect on your web pages. Something to consider are: inline graphics (used to enhance the appearance of the page), inline video clips (some users may not have the necessary hardware or software to play files), inline sound files (some users may not have the necessary hardware or software to play files), navigators (help users find information on website), hypermedia links (seen in the form of thumbnails), and multimedia files (some users may not have the necessary hardware or software to play files). HTML 4.0 4
5 HTML Rules of Syntax Tags and Attributes HTML is written with a series of document markers known as tags. (Capitalization of tags and attributes are not necessary!) There are two types of tags: Container <B> First Name </B> Container tags have a beginning tag and ending tag. The tag is active until you end it. The <B> tag tells a browser to bold all the text that follows until the closing </B> the slash indicates closure. Non-container <BR> A non-container tag (sometimes called an empty tag) has no closing tag. There are only a few closing tags. If you add a closing tag IE or Navigator will ignore the closing tag. Facts about attributes and tags To enhance the appearance of the web pages include attributes in your tags. Several attributes can be added to change the size, color, or alignment of items. It is not necessary to capitalize tags and attributes, but some designers capitalize tags to make them stand out from the rest of the text. Just be consistent on whatever you decide to use. If attribute values contain a space, the value must be enclosed in quotation marks: <FONT face= Times New Roman >First Name</FONT> If the attribute value doesn t contain spaces quotes are not necessary. Tags can be written all on one line, but tags can be placed on separate line-this will not interfere with the display of code-you must enter a tag to actually simulate a return. HTML 4.0 5
6 Starting an HTML Document There are basically four different tools required to start creating HTML document: Text Editor Notepad, Word Pad, Word. Browser Microsoft Internet Explorer or Netscape Navigator to check your work. Graphics Software needed if you are going to create or edit graphics. Multimedia Software/Hardware needed if you plan to work with multimedia files. Things to remember while creating HTML pages: Text files are saved with an.htm or.html extension. Pick either.htm or.html do not mix the extensions. HTML document names must not contain spaces; place an underscore if you need separation in names. Test your pages in as many browsers as possible to see how they look. World Wide Web Consortium (W3C) The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential as a forum for information, commerce, communication, and collective understanding. Visit the W3C website at to view latest updates and additions to HTML 4.0 and other technologies. This is W3C's home page for HTML Here you will find specifications for HTML, guidelines on how to use HTML to the best effect, and pointers to related work at W3C. HTML 4.0 6
7 Setting up the Basic Structure Each HTML page has several tags that set up the basic structure of the web page and appear in every HTML document. Beginning/End Head Title Body Meta Information The first pair of tags defines the beginning and end of a document. All text and tags appear between these two tags. </HTML> The next tag defines the head of an HTML document, the head contains tags and text that is not displayed in the browser window-but is used to describe the page. <HEAD> </HEAD> </HTML> The main item that appears in the <HEAD> is the title. The title appears on the title bar of the browser window. <HEAD> <TITLE>Welcome to my web page!</title> </HEAD> </HTML> *If you create a bookmark or create a favorite in your browser it is the title of the web page that is displayed in the list. HTML 4.0 7
8 Basic Structure Continued The body of the HTML document contains everything you see when you view a page in a browser. <HEAD> <TITLE>Welcome to my web page!</title> </HEAD> <BODY> </BODY> </HTML> <META> tags can include information about the document. For example: name of document s author, expiration date, and list of key words. Tags are written in this format: <META attribute= value > Attributes include: Name which can include author or keyword Content dates document will expire, or list of keywords for search engines A separate <META> tag must be used for each piece of meta information you want to include in a document. <HEAD> <META name= keywords content= education, technology > <META name= author content= Joe Smith > <TITLE>Welcome to my web page!</title> </HEAD> <BODY> </BODY> </HTML> HTML 4.0 8
9 Viewing an HTML Document All it takes to view your HTML document is two steps: Save the document with an.htm or.html extension (remember pick one and stay with it). Open browser and select the File menu and Open command. Browse to the location of the document. View your page! *As you make changes to the file in the text editor you can display those changes by saving the file and then switching to the browser and clicking on either the Refresh or Reload button. Notepad file saved as.htm Displayed in browsernotice title. HTML 4.0 9
10 Using Basic Text Tags Headings HTML allows you to create structured documents by providing six heading levels. Heading levels that are larger numbers are a larger size font and might appear bold. Heading tags are container tags, which means they have to have closing tags to stop the format. A blank line will also follow each heading; this space after the style is part of the style and can t be removed. <HEAD> <TITLE>Welcome to my web page!</title> </HEAD> <BODY> <H1>This is Level 1 Heading</H1> <H2>This is Level 2 Heading</H2> <H3>This is Level 3 Heading</H3> <H4>This is Level 4 Heading</H4> <H5>This is Level 5 Heading</H5> <H6>This is Level 6 Heading</H6> </BODY> </HTML> HTML
11 Plain Text If you insert text that does not have tags, the text is treated like plain text. The browser determines the actual font and size. It is also good to remember that HTML ignores multiple spaces and paragraph returns. Line and Paragraph Breaks You must use HTML tags to create line and paragraph breaks to control the location of your text. If you want to break the current line and start a new line immediately after it with no extra spacing us the break tag <BR>. This is a non-container tag so no tag is needed to start and stop the tag. If you want to break the current line and start a new paragraph, an extra space is needed between lines, then use the paragraph tag <P>. This is a non-container tag so no tag is needed to start and stop the tag. Plain text plain text plain text plain text. Plain text with line break.<br> Plain text plain text plain text plain text. Plain text plain text plain text plain text. Plain text plain text plain text plain text. Plain text with paragraph break. <P> Plain text plain text plain text plain text. Plain text plain text plain text plain text. Line break Paragraph break Preformatted Text Tag that allows you to include spaces, tabs, and paragraph breaks in HTML without adding the tags for those formats. Just include the formatted text inside the preformatted text tags <PRE> </PRE>. <PRE> Notepad Browser Window </PRE> HTML
12 Changing Background Color To change the background color of the web page, put the background color attribute inside the <BODY> body tag using the bgcolor attribute. The color can come from a hexadecimal value or use the color name itself. A very good color chart is located at: or <HEAD> <TITLE>Welcome to my web page! </TITLE> </HEAD> <BODY bgcolor=ff0000 red> Note: Using the name of the color is supported in IE and Netscape but may not be supported in other browsers. </BODY> </HTML> Background Images Background images can be added to web pages instead of solid color background. To add a background image use the background attribute in the <BODY> body tag. Note: background images can slow down the loading of a web page and make text difficult to read. <HEAD> <TITLE>Welcome to my web page! </TITLE> </HEAD> <BODY background= filename> </BODY> </HTML> Note: It is a very good idea to keep all images, buttons, etc in the same folder as the HTML files. This will make it much easier for the browser to find the added features in the HTML pages. One good place to find free backgrounds: HTML
13 Formatting Text Default Text and Link Colors Define the color of the default text and the link text on your web page. Add the attributes in the <BODY> body tag. <HEAD> <TITLE>Welcome to my web page! </TITLE> </HEAD> <BODY bgcolor=ff0000 text=0000ff link=ffffff vlink=af2faf alink=bc8f8f> <H1>Welcome to my Webpage!</H1> </BODY> </HTML> Text sets default for all text on page. Link sets color of text that contains links not visited yet. Vlink sets color of text that contains a link you have already visited. Alink sets the color of text on a link you are clicking on. Selected Text Colors To change the colors of selected text enclose the text in the <FONT> container. <HEAD> <TITLE>Welcome to my web page! </TITLE> </HEAD> <BODY bgcolor=ff0000 text=0000ff link=ffffff vlink=af2faf alink=bc8f8f> <H1>Welcome to <FONT color= fffff >my</font> Webpage!</H1> </BODY> </HTML> HTML
14 Basefont Size The basefont tag <BASEFONT> allows you to change the size of all text on the page. The basefont tag goes in the <BODY> tag. <HEAD> <TITLE>Welcome to my web page! </TITLE> </HEAD> <BODY bgcolor=ff0000 text=0000ff link=ffffff vlink=af2faf alink=bc8f8f> <basefont size=4> <H1>Welcome to <FONT color= fffff >my</font> Webpage!</H1> This is the area where you add the text in your webpage. Type everything you want to right here! </BODY> </HTML> Basefont tag sizes range from 1 to 7 with seven the largest. If you do not specify a basefont tag the size will default to 3, which is equal to 12-point font. Text affected by the Basefont tag. Text affected by the Heading tag and font color tag. HTML
15 Font Size of Selected Text If you only want to change the size of selected text use the Font container <FONT> and size attribute. Sizes range from 1 to 7 with seven the largest. You can change the size of the selected text relative to the basefont size by using a plus or minus sign and a number. Size = -1 is one size smaller than the basefont size. <HEAD> <TITLE>Welcome to my web page! </TITLE> </HEAD> <BODY bgcolor=ff0000 text=0000ff link=ffffff vlink=af2faf alink=bc8f8f> <basefont size=4> <H1>Welcome to <FONT color= fffff >my</font> Webpage!</H1> This is the area where you <FONT size=6>add the text </FONT>in your webpage. Type everything you want to right here! </BODY> </HTML> <FONT size=6> is added to enhance a portion of the text. HTML
16 Font Face Use the face attribute with the <FONT> container to change the font of your text. You can also use the face attribute with the <BASEFONT> tag. Types of fonts that you can use and have a good idea that the person looking at the page will be able to see are Arial, Times New Roman, and Comic Sans MS. If you use a font that consists of several words like Times New Roman, you must enclose the text in quotes. If you designate a font that people do not have on their machines it will default to whatever the browser uses. <HEAD> <TITLE>Welcome to my web page! </TITLE> </HEAD> <BODY bgcolor=ff0000 text=0000ff link=ffffff vlink=af2faf alink=bc8f8f> <basefont size=4> <H1>Welcome to <FONT color= fffff >my</font> Webpage!</H1> This is the area where you <FONT size=6>add the text </FONT>in your webpage. Type everything you want to right here! <FONT face=arial>this is Arial text </FONT> <FONT face= Comic Sans MS >This is Comic Sans MS</FONT> <FONT face= Times New Roman > This is Times New Roman</FONT> </BODY> </HTML> Notice the different font faces of the last three sentences. HTML
17 Aligning Text By default text is left aligned in HTML. If you want to center text add the <CENTER> tags around the selected text. This is a container tag so you will need to close it with </CENTER>. To align a paragraph use the following tags: <P align=left right center> paragraph information </P> You can also define a division in the document and determine the alignment for information in that division. <DIV align = left right center> data data data </DIV> Special Effects Tags There are two special effects tags that can be added to your HTLML document. Both tags are not supported by the HTML standard and not all browsers support them. Most web designers have agreed not to use these tags. But they are fun for students to work with. Marquee is supported only by Internet Explorer, and when used the selected text scrolls across the screen. <MARQUEE>This is scrolling text. </MARQUEE> Blink is supported only by Netscape Navigator, and when used the selected text flashes on and off the screen. <BLINK> This is blinking text. </BLINK> Special Characters Characters such as and & require a special type of HTML code to make these symbols appear in a webpage. & & " HTML
18 Comments If comments need to be added to your web page, but you don t want anyone to see the comments enclose them in the <!-- -- > tag. Anything that is enclosed in these tags will not appear to the user in the browser, the only way to see the comments is to look at the source code. Comments! HTML
19 Creating Lists Unordered Lists An unordered list allows you to present information in bulleted form. There are two different tags that are required to make an unordered list. First, a tag that will identify the beginning and end of the bullet and indent each bullet item, <UL> </UL>, then a tag that will identify each bulleted item <LI> will be used. Indenting is not necessary; it just makes it easier to read the code. <UL> Notepad <LI> item <LI> item <LI> item <LI> item </UL> Browser Window Type in the name of the bullet you want to use in the beginning <UL> tag. <UL type= square circle disk > <LI> item <LI> item <LI> item <LI> item </UL> Use one of the bullet shapes not all in one line of code! HTML
20 Ordered Lists An ordered list allows you to present information that needs to be in a numbered list. Like the unordered list, there are two different tags that are required to make an unordered list. First, a tag that will identify the beginning and end of the bullet and indent each bullet item, <OL> </OL>, then a tag that will identify each bulleted item <LI> will be used. Indenting is not necessary; it just makes it easier to read the code. <OL> <LI> first item <LI> second item <LI> third item <LI> fourth item </OL> <OL type= I > <LI> first item <LI> second item <LI> third item <LI> fourth item </OL> Numerical Types Roman Numerals: I Lower Case: i Alphabetical: A Lower Case: a HTML
21 Definition Lists Use the definition list to present a list of terms and their definitions, as in a glossary. It is similar to the lists already mentioned in this handout. Like the other lists already described; there are three different tags that are required to make a definition list. First, a tag that will identify the beginning and end of the definition, <DL> </DL>, then a tag that will identify the term <DT> will be used; finally the definition itself is represented with <DD>. Indenting is not necessary; it just makes it easier to read the code. <DL> <DT>term <DD>definition <DT>term <DD>definition </DT> HTML
22 Adding Graphics Graphics can be added to web pages to add color and design to a website. Just be aware that the more graphics you add the slower the page could download for some viewers. Horizontal Rule The simplest graphic device that can be added to a web page is the horizontal rule <HR>. A horizontal rule is a line that the browser displays in a certain location. It is a non-container tag, so it requires no ending tag. <HEAD> <TITLE>Welcome to my web page! </TITLE> </HEAD> <BODY bgcolor=yellow text=0000ff link=ffffff vlink=af2faf alink=bc8f8f> <basefont size=2> <H1>Welcome to <FONT color="ffffff">my </FONT>Webpage!</H1> <HR> </BODY> Horizontal Rule HTML
23 Formatting the Horizontal Rule You can control several attributes of the <HR> with the following tags additions: Tag HTML Explanation Align <HR align=center> Aligns the position of the line. Size <HR size=10> Change the size of the line-defaults to a 2-pixel line if no size is specified. Width <HR width = 50%> Specify the width of the line across the page-defaults to 100% if no size is Color <HR color=red> <HR color=ffff00> specified. Specify the color of the line-only works in Internet Explorer. Inline Objects Inline objects are objects you place directly on a page and the browser displays them along with the text on the page. Graphics Two types of objects that are inserted into web pages are.gif and.jpg. GIF CompuServe Graphics interchange format JPG Joint Photographic Experts Group GIF files contain 256 colors (8-bit color) and are compressed and are suggested as the best choice for online graphics. JPG files contain up to 16.7 million colors (24-bit color) and are compressed even more than GIF files. Because of the high compression rate, browsers take awhile to download these images. They are not used very often for online images, but are sometimes used for graphics you can display in a separate window. Use the <IMG> tag to include an image on the web page. <IMG src= image.gif > If the image is in the same directory as the HTML document only put the name of the image. It is so much easier to keep up with your graphics and successful links if all images and HTML documents are in the same folder. HTML
24 Video Files An inline video file plays when the web page loads. Internet Explorer supports inline video, Netscape Navigator does not. You will have to embed the video file (inserts a video player applet) on the page to see it in Netscape. The basic code for entering an.avi file in Internet Explorer: <IMG dynsrc= video.avi > If the video clip includes sound, Internet Explorer will play the sound as well. One thing you might consider is creating a separate link to the video so it doesn t play every time some one opens your page. If you want the video to look include the loop attribute within the <IMG dynsrc> code. <IMG dynsrc= video.avi loop=3> The video will play three times. *********************************** The basic code for entering an.avi file in Netscape Navigator: <EMBED src= video.avi > Netscape adds a small video window on the web page that must be clicked by the user to see the video in action. Another thing to remember is the <EMBED> tag doesn t work consistently with Netscape. Sound Files Use the <BGSOUND> tag to insert an inline sound into your web page. When the page loads in Internet Explorer the sound will play. One thing to consider, the browser loads the sound file first before any other HTML data, even if the use doesn t have a sound card. This will increase the loading time of the page. <BGSOUND src= sound.wav loop=3 volume=5000> This tag features a looping ability like the video and a volume (10,000 to 0) with 0 representing full volume. Sound works the same way in Netscape as the video files, use the <EMBED> tag and click on the applet that appears on the web page. HTML
25 Alt Tags Alternative text is text that identifies the graphic or video file displayed on the web page. As you hover your mouse above the image a screen tip will display with text for the user to read. Add the ALT attribute within the image source line of code. <IMG src= image.gif alt= Name of Image > Aligning an Image Use the align attribute to position an image on the screen. The align tag is placed in the <IMG src> tag. If one is not specified the text will align with the bottom of the image. <IMG src= image.gif align= right left> Image is left aligned. Aligning Text with Images When an image is aligned on a web page the text typed in next to is wrapped next to the image. Even if a break tag <BR> is inserted the text still wraps. To break the text clear of the image use the clear attribute with the <BR> break tag. <BR clear= left right all> Image is left aligned with a <BR clear = left> command. See entire code on next page! HTML
26 Code for the images on the previous page. Code without a break. Code with a clear break. HTML
27 Linking it all Together! Linking to your Pages Use a relative URL to link other pages you have created to each other. By saving all the HTML pages in one location you can easily add a link to reference the page. A link is created using the <A> tag, the text that is in the tag appears underlined in the browser and is the clickable link. The href attribute allows you to point to the reference. <A href= vacation.html > Click here to book your vacation! </A> Name of the file Clickable text Linking to other Websites To link to a page that doesn t reside on your server you must use the entire (absolute) URL to create the link. <A href = > Region XV Education Service Center </A> Linking to other Documents/Information You can create links to other kinds of documents on your HTML web page. Use the same tags as above. When the link is clicked the browser opens an application so you can view the document. <A href = registration.doc > ESC XV registration form </A> Word will open to view this document. <A href= mailto:traci.evans@netxv.net > Click here to me! </A> Allows you to the author-opens your default application. Linking with Images You can create a link using a graphic. Use the <A> tag and the <IMG> tag. <A href= vacation.html ><IMG src= computersummer.gif ></A> HTML
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
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
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
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
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...
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.
Web Authoring. www.fetac.ie. Module Descriptor
The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,
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
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
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
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
Web page design in 7 days!
Learnem Group presents: Web page design in 7 days! Lessons 1-7 By: Siamak Sarmady Start Here Copyright Notice : 2000,2001 Siamak Sarmady and Learnem Group. All rights reserved. This text is written to
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
Contents. Launching FrontPage... 3. Working with the FrontPage Interface... 3 View Options... 4 The Folders List... 5 The Page View Frame...
Using Microsoft Office 2003 Introduction to FrontPage Handout INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 1.0 Fall 2005 Contents Launching FrontPage... 3 Working with
NURSING 3225 NURSING INQUIRY WEB SITE DEVELOPMENT GUIDE BOOK
Nursing 3225 Web Dev Manual Page 1 NURSING 3225 NURSING INQUIRY WEB SITE DEVELOPMENT GUIDE BOOK Nursing 3225 Web Dev Manual Page 2 N3225: Nursing Inquiry Student Created Group Website Addresses (1 of 2)
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
Learnem.com. Web Development Course Series. Learn em. HTML Web Design in 7 days! By: Siamak Sarmady
Learnem.com Web Development Course Series Learn em HTML Web Design in 7 days! By: Siamak Sarmady L E A R N E M W E B D E V E L O P M E N T C O U R S E S E R I E S HTML Web Design in 7 Days! Ver. 2.08.02
How to Use the Text Editor in Blackboard
How to Use the Text Editor in Blackboard The image below is the text editor in Blackboard. No matter you add an item or discussion forum for your course as an instructor, post threads and replies on a
How To Create A Website In Drupal 2.3.3
www.webprophets.com.au PO Box 2007 St Kilda West Victoria Australia 3182 Phone +61 3 9534 1800 Fax +61 3 9534 1100 Email info@webprophets.com.au Web www.webprophets.com.au Welcome to the Drupal How to
Appendix H: Cascading Style Sheets (CSS)
Appendix H: Cascading Style Sheets (CSS) Cascading Style Sheets offer Web designers two key advantages in managing complex Web sites: Separation of content and design. CSS gives developers the best of
SiteBuilder 2.1 Manual
SiteBuilder 2.1 Manual Copyright 2004 Yahoo! Inc. All rights reserved. Yahoo! SiteBuilder About This Guide With Yahoo! SiteBuilder, you can build a great web site without even knowing HTML. If you can
Introduction To Microsoft Office PowerPoint 2007. Bob Booth July 2008 AP-PPT5
Introduction To Microsoft Office PowerPoint 2007. Bob Booth July 2008 AP-PPT5 University of Sheffield Contents 1. INTRODUCTION... 3 2. GETTING STARTED... 4 2.1 STARTING POWERPOINT... 4 3. THE USER INTERFACE...
Requirements for Developing WebWorks Help
WebWorks Help 5.0 Originally introduced in 1998, WebWorks Help is an output format that allows online Help to be delivered on multiple platforms and browsers, which makes it easy to publish information
QUESTION BANK COMPUTER SCIENCE. Class VIII LESSON-1 INTRODUCTION TO MS ACCESS
QUESTION BANK COMPUTER SCIENCE Class VIII LESSON-1 INTRODUCTION TO MS ACCESS 1. What is a database? 2. Explain various types of database? 3. What is Normalization? Why is it required? 4. Database 5. Table
Jadu Content Management Systems Web Publishing Guide. Table of Contents (click on chapter titles to navigate to a specific chapter)
Jadu Content Management Systems Web Publishing Guide Table of Contents (click on chapter titles to navigate to a specific chapter) Jadu Guidelines, Glossary, Tips, URL to Log In & How to Log Out... 2 Landing
Using Adobe Dreamweaver CS4 (10.0)
Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called
Using Microsoft Word. Working With Objects
Using Microsoft Word Many Word documents will require elements that were created in programs other than Word, such as the picture to the right. Nontext elements in a document are referred to as Objects
Microsoft PowerPoint 2010 Handout
Microsoft PowerPoint 2010 Handout PowerPoint is a presentation software program that is part of the Microsoft Office package. This program helps you to enhance your oral presentation and keep the audience
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
A Beginner s Guide to PowerPoint 2010
A Beginner s Guide to PowerPoint 2010 I. The Opening Screen You will see the default opening screen is actually composed of three parts: 1. The Slides/Outline tabs on the left which displays thumbnails
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
TUTORIAL 4 Building a Navigation Bar with Fireworks
TUTORIAL 4 Building a Navigation Bar with Fireworks This tutorial shows you how to build a Macromedia Fireworks MX 2004 navigation bar that you can use on multiple pages of your website. A navigation bar
Creating a website using Voice: Beginners Course. Participant course notes
Creating a website using Voice: Beginners Course Topic Page number Introduction to Voice 2 Logging onto your website and setting passwords 4 Moving around your site 5 Adding and editing text 7 Adding an
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
WEBSITE CONTENT MANAGEMENT SYSTEM USER MANUAL CMS Version 2.0 CMS Manual Version 1.0 2-25-13
WEBSITE CONTENT MANAGEMENT SYSTEM USER MANUAL CMS Version 2.0 CMS Manual Version 1.0 2-25-13 CONTENTS Things to Remember... 2 Browser Requirements... 2 Why Some Areas of Your Website May Not Be CMS Enabled...
Create a GAME PERFORMANCE Portfolio with Microsoft Word
Create a GAME PERFORMANCE Portfolio with Microsoft Word Planning A good place to start is on paper. Get a sheet of blank paper and just use a pencil to indicate where the content is going to be positioned
Creating Web Pages with Microsoft FrontPage
Creating Web Pages with Microsoft FrontPage 1. Page Properties 1.1 Basic page information Choose File Properties. Type the name of the Title of the page, for example Template. And then click OK. Short
Lab 1.3 Basic HTML. Vocabulary. Discussion and Procedure
Lab 1.3 Basic HTML The World Wide Web (commonly just called the web ) is an enormous and rapidly growing collection of documents stored on computers all around the world connected by the Internet. In addition
Basic Website Creation. General Information about Websites
Basic Website Creation General Information about Websites Before you start creating your website you should get a general understanding of how the Internet works. This will help you understand what goes
Saving work in the CMS... 2. Edit an existing page... 2. Create a new page... 4. Create a side bar section... 4
CMS Editor How-To Saving work in the CMS... 2 Edit an existing page... 2 Create a new page... 4 Create a side bar section... 4 Upload an image and add to your page... 5 Add an existing image to a Page...
Hypercosm. Studio. www.hypercosm.com
Hypercosm Studio www.hypercosm.com Hypercosm Studio Guide 3 Revision: November 2005 Copyright 2005 Hypercosm LLC All rights reserved. Hypercosm, OMAR, Hypercosm 3D Player, and Hypercosm Studio are trademarks
HOW TO USE THIS GUIDE
HOW TO USE THIS GUIDE This guide provides step-by-step instructions for each exercise. Anything that you are supposed to type or select is noted with various types and colors. WHEN YOU SEE THIS Click Help
Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl. Web Design in Nvu Workbook 1
Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl Web Design in Nvu Workbook 1 The demand for Web Development skills is at an all time high due to the growing demand for businesses and individuals to
Brock University Content Management System Training Guide
Brock University Content Management System Training Guide Table of Contents Brock University Content Management System Training Guide...1 Logging In...2 User Permissions...3 Content Editors...3 Section
SiteBuilder User Guide
SiteBuilder User Guide Page 1 of 41 SiteBuilder Manual Table of contents SiteBuilder Manual... 2 Table of contents... 2 What is SiteBuilder?... 4 Tips for building a great site... 4 Getting started...
JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA
JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA All information presented in the document has been acquired from http://docs.joomla.org to assist you with your website 1 JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA BACK
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
ADOBE DREAMWEAVER CS3 TUTORIAL
ADOBE DREAMWEAVER CS3 TUTORIAL 1 TABLE OF CONTENTS I. GETTING S TARTED... 2 II. CREATING A WEBPAGE... 2 III. DESIGN AND LAYOUT... 3 IV. INSERTING AND USING TABLES... 4 A. WHY USE TABLES... 4 B. HOW TO
Mastering the JangoMail EditLive HTML Editor
JangoMail Tutorial Mastering the JangoMail EditLive HTML Editor With JangoMail, you have the option to use our built-in WYSIWYG HTML Editors to compose and send your message. Note: Please disable any pop
Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu)
Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu) Updated on 10/17/2014 Table of Contents About... 4 Who Can Use It... 4 Log into Ingeniux... 4 Using Ingeniux
General Electric Foundation Computer Center. FrontPage 2003: The Basics
General Electric Foundation Computer Center FrontPage 2003: The Basics September 30, 2004 Alternative Format Statement This publication is available in alternative media upon request. Statement of Non-discrimination
HIT THE GROUND RUNNING MS WORD INTRODUCTION
HIT THE GROUND RUNNING MS WORD INTRODUCTION MS Word is a word processing program. MS Word has many features and with it, a person can create reports, letters, faxes, memos, web pages, newsletters, and
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
Mura CMS. (Content Management System) Content Manager Guide
Mura CMS (Content Management System) Content Manager Guide Table of Contents Table of Contents 1. LOGGING IN...1 2. SITE MANAGER...2 3. ADDING CONTENT (Pages, Folders, etc.)...6 4. WORKING WITH IMAGES...15
Garfield Public Schools Fine & Practical Arts Curriculum Web Design
Garfield Public Schools Fine & Practical Arts Curriculum Web Design (Half-Year) 2.5 Credits Course Description This course provides students with basic knowledge of HTML and CSS to create websites and
Please select one of the topics below.
Thanks for choosing WYSIWYG Web Builder! In this section we will give a short introduction to Web Builder so you can start building your web site in (almost) no time. Please select one of the topics below.
Power Point 2003 Table of Contents
Power Point 2003 Table of Contents Creating a Presentation... 2 Selecting Background and Format for Slide... 3 Creating the Title Slide... 4 Adding a New Slide... 5 Types of Text for a Slide: Taken from
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,
How To Write A Web Page In Html
HTML Basics Welcome to HTML Basics. This workshop leads you through the basics of Hyper Text Markup Language (HTML). HTML is the building block for web pages. You will learn to use HTML to author an HTML
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
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
Umbraco v4 Editors Manual
Umbraco v4 Editors Manual Produced by the Umbraco Community Umbraco // The Friendly CMS Contents 1 Introduction... 3 2 Getting Started with Umbraco... 4 2.1 Logging On... 4 2.2 The Edit Mode Interface...
Word Processing programs and their uses
Word Processing programs and their uses An application that provides extensive tools for creating all kinds of text based programs. They are not limited to working with text and enable you to add images
Learnem.com. Web Development Course Series. Quickly Learn. Web Design Using HTML. By: Siamak Sarmady
Learnem.com Web Development Course Series Quickly Learn Web Design Using HTML By: Siamak Sarmady L E A R N E M W E B D E V E L O P M E N T C O U R S E S E R I E S Quickly Learn Web Design Using HTML Ver.
USM Web Content Management System
University of Southern Maine USM Web Content Management System USM Web CMS Technical Development Group 4/26/2011 Content o Introduction o Login o User Roles o Group Member o Group Publisher o Group Admin
Chapter 14: Links. Types of Links. 1 Chapter 14: Links
1 Unlike a word processor, the pages that you create for a website do not really have any order. You can create as many pages as you like, in any order that you like. The way your website is arranged and
7 th Annual LiveText Collaboration Conference. Advanced Document Authoring
7 th Annual LiveText Collaboration Conference Advanced Document Authoring Page of S. La Grange Road, nd Floor, La Grange, IL 6055-455 -866-LiveText (-866-548-3839) edu-solutions@livetext.com Page 3 of
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,
Action settings and interactivity
Interactivity in Powerpoint Powerpoint includes a small set of actions that can be set to occur when the user clicks, or simply moves the cursor over an object. These actions consist of links to other
Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl. Web Design in Nvu Workshop Session Plan
Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl Web Design in Nvu Workshop Session Plan Workshop Schedule By failing to prepare, you are preparing to fail. Event Set Up 30 minutes Introduction Welcome/Pre-day
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
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
ICT 6012: Web Programming
ICT 6012: Web Programming Covers HTML, PHP Programming and JavaScript Covers in 13 lectures a lecture plan is supplied. Please note that there are some extra classes and some cancelled classes Mid-Term
DESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site
Page 1 of 22 DESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site Before you create your Web site, ask yourself these questions: What do I want the site to do? Whom do I want to visit
WebCT 4.x: HTML Editor
Competencies After reading this document, you will be able to: Employ the HTML Editor capabilities to create and publish content. About HTML Editor The HTML editor provides word-processor-like features
What is HTML? a)hyper Text Marking Language b) Hyper Text Machine Language c)hyper Text Middle Language d)hyper Text Markup Language
ONE MARKS QUESTIONS What is HTML? a)hyper Text Marking Language b) Hyper Text Machine Language c)hyper Text Middle Language d)hyper Text Markup Language 1. In email address character is essential a) _
Caldes CM12: Content Management Software Introduction v1.9
Caldes CM12: Content Management Software Introduction v1.9 Enterprise Version: If you are using Express, please contact us. Background Information This manual assumes that you have some basic knowledge
Dreamweaver: Getting Started Website Structure Why is this relevant?
Dreamweaver: Getting Started Dreamweaver is a Graphic Designer s tool to create websites as he or she designs. As part of the Adobe Creative Suite, Dreamweaver is able to work in conjunction with Photoshop,
Adobe Acrobat 6.0 Professional
Adobe Acrobat 6.0 Professional Manual Adobe Acrobat 6.0 Professional Manual Purpose The will teach you to create, edit, save, and print PDF files. You will also learn some of Adobe s collaborative functions,
Quick Reference Guide
Simplified Web Interface for Teachers Quick Reference Guide Online Development Center Site Profile 5 These fields will be pre-populated with your information { 1 2 3 4 Key 1) Website Title: Enter the name
NETSCAPE COMPOSER WEB PAGE DESIGN
NETSCAPE COMPOSER WEB PAGE DESIGN Many thanks to Patsy Lanclos for this valuable contribution. With the newer versions of Netscape, you can build web pages for free using the built in web page program
PowerPoint 2007 Basics Website: http://etc.usf.edu/te/
Website: http://etc.usf.edu/te/ PowerPoint is the presentation program included in the Microsoft Office suite. With PowerPoint, you can create engaging presentations that can be presented in person, online,
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
Using PowerPoint Short Course
Using PowerPoint Short Course PowerPoint is a software package that enables you to create presentation slides. Your presentation can include Text and Bulleted points, Tables, Graphs even Flow charts. To
We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.
Creative Specs Gmail Sponsored Promotions Overview The GSP creative asset will be a ZIP folder, containing four components: 1. Teaser text file 2. Teaser logo image 3. HTML file with the fully expanded
Going Above and Beyond
Whitepaper Going Above and Beyond Using Advanced Techniques to Create Customized HTML Templates August 3, 2010 Copyright 2010 L-Soft international, Inc. Information in this document is subject to change
Talking: Web. Web design is the hardest thing you will ever do in life. At least when you do it for the first time. Home Page. Talking: Resources
1 Talking: Web Web design is the hardest thing you will ever do in life. At least when you do it for the first time. Home Page Yale: http://info.med.yale.edu/caim/manual/ Design for designers: http://www.wpdfd.com/
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
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
Content Management System User Guide
CWD Clark Web Development Ltd Content Management System User Guide Version 1.0 1 Introduction... 3 What is a content management system?... 3 Browser requirements... 3 Logging in... 3 Page module... 6 List
Web Authoring CSS. www.fetac.ie. Module Descriptor
The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,
CSE 3. Marking Up with HTML. Tags for Bold, Italic, and underline. Structuring Documents. An HTML Web Page File
CSE 3 Comics Updates Shortcut(s)/Tip(s) of the Day Google Earth/Google Maps ssh Anti-Spyware Chapter 4: Marking Up With HTML: A Hypertext Markup Language Primer Fluency with Information Technology Third
BLACKBOARD 9.1: Text Editor
BLACKBOARD 9.1: Text Editor The text editor in Blackboard is a feature that appears in many different areas, but generally has the same look and feel no matter where it appears. The text editor has changed
Macros in Word & Excel
Macros in Word & Excel Description: If you perform a task repeatedly in Word or Excel, you can automate the task by using a macro. A macro is a series of steps that is grouped together as a single step
Where do I start? DIGICATION E-PORTFOLIO HELP GUIDE. Log in to Digication
You will be directed to the "Portfolio Settings! page. On this page you will fill out basic DIGICATION E-PORTFOLIO HELP GUIDE Where do I start? Log in to Digication Go to your school!s Digication login
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
Web Development I & II*
Web Development I & II* Career Cluster Information Technology Course Code 10161 Prerequisite(s) Computer Applications Introduction to Information Technology (recommended) Computer Information Technology
WORDPRESS MANUAL WEBSITEDESIGN.CO.ZA
WORDPRESS MANUAL WEBSITEDESIGN.CO.ZA All information presented in the document has been acquired from http://easywpguide.com/wordpress-manual/ to assist you with your website 1 WORDPRESS MANUAL WEBSITEDESIGN.CO.ZA
RIT Message Center Compose and Send Messages
RIT Message Center Compose and Send Messages Table of Contents Table of Contents... 2 Logging into Message Center... 3 Category Display... 3 Message Center: Create a Message... 4 Create a New Message without
ANATOMY OF A WEB PAGE...
Web Design Contents INTRODUCTION... 4 WHAT YOU WILL LEARN... 4 ABOUT THE HOME AND LEARN WEB DESIGN SOFTWARE... 5 INSTALLING THE SOFTWARE... 6 WEB COURSE FILES... 6 ANATOMY OF A WEB PAGE... 7 WHAT IS A