The following section contains information on getting familiar with HTML and developing your first home page. It describes in brief how to write HTML code and the basic rules as well as creating new HTML pages in WebDesign and previewing them in your browser.
After reading this section you should be on your way to developing simple HTML pages in WebDesign. If you would like to continue learning about HTML or become more familiar with some of its advanced features, follow the links provided in the What is HTML section.
Before using WebDesign it is important that you have a brief knowledge of HTML and know the basics of writing HTML code.
HTML (Hypertext Markup Language) is the language used to create and design web pages. HTML files are simply text documents containing instructions telling the web browser how to format your web page. An HTML document contains HTML tags which are in the form of:
<TAGNAME ATTRIBUTE="VALUE">
and in some cases an HTML tag may need an ending tag which are simply written as:
</TAGNAME>
For example, to tell your browser to make some text bold you would write;
<B>...bold text...</B>.
<HTML> <HEAD> <TITLE>Web Page Title</TITLE> </HEAD> <BODY> ...anything that should be displayed in the browser window goes here... </BODY> </HTML>
Any text that is written between the <BODY> and </BODY> tags will show up on your web site unless it is incased in (<>). HTML is not case sensitive so <BODY> and <body> are seen as the same instructions to a web browser. Some users find it easier to read HTML pages when the tags are written in uppercase, however it is now a common practice to keep all tags in lowercase to maintain compatibility with different kinds of devices.
Fortunately, WebDesign allows you to convert tags to lowercase or uppercase simply by going to HTML Tools->Change Tag Case.
Online Resources
HTML, XHTML and CSS hands on tutorial
http://www.w3.org
http://www.HTMLHelp.com
http://www.w3schools.com
Now that you are familiar with the basics of HTML you are now ready to use WebDesign to create your first web page. The following is a step by step process for creating new HTML documents;
<BODY> and </BODY> tags will be displayed in your browser.
During web site development it is often the case that you would want to see how your web site looks in a web browser. WebDesign provides the ability to not only preview your web pages in an unlimited number of web browsers, but it also provides a built in preview feature.
Before being able to preview your documents you must add browsers to the Open In Applications list. Open the preferences window and click the 'Internet' Tab. Then click the 'Add' button to add web browsers to the list. Save your preferences and you are now ready to start previewing your documents.
You can add any kind of application to this list and WebDesign will open the current document in that Application when it is selected. So for example, you can add your favorite CSS editor, open the current document in the CSS Editor, edit your CSS code and when you return to WebDesign, your document will be updated to reflect those changes. You can also add things such as link checkers, HTML validators or even a WYSIWYG HTML editor to edit complex HTML code in.
While working with your web site you may click the 'Preview' button (third button from the top with the globe icon) or go to File->Preview In and select the web browser you want to preview your page in. If you select 'In WebDesign...' your document can be previewed with WebDesign's preview features. In Mac OS X 10.2 or later you can have side by side previews. In OS 10.1 and OS 9, WebDesign will switch to preview mode within the main editor window.
(note: WebDesign's preview feature uses Apple's HTMLRenderingLib on OS 9 and OS X 10.1 which does not support the latest in web technologies. Some pages may not show up correctly in WebDesign's preview mode. However, in OS X 10.2 and later it used the exact same rendering as Safari.)
It is recommended that you save your document before previewing so that images and other code using relative paths show up correctly. WebDesign can automatically save your document before previewing by setting this option in the 'Application' tab in the preferences.
As of WebDesign 2.5 you can not only have side by side web page previews, you can also preview both client side scripts such as javascript, as well as server side scripts such as PHP or CGI on Mac OS X 10.2. To do this, you have to set up personal web sharing as well as install PHP. Fortunately, this is very easy to do, and PHP is installed by default in Mac OS X 10.2 or later, it just has to be enabled.
To use personal web sharing do the following;
Now that you have successfully set up your Personal File Sharing, you can now enable PHP so that you will be able to preview PHP code locally. To do this you must do the following;
As noted above, all text placed with the the <BODY> and </BODY> tags, excluding text incased in (<>), will show up in your web browser. This, however, is not entirely true when working with line breaks. Line Breaks are ignored by browsers and this can usually cause confusion for first time web developers.
There are two ways to insert line breaks in your document.
You can use the <BR> tag which will create a single line breaks.
These lines of text appear on
<BR> different lines in your browser
or the;
<P>...</P> tag to create a new paragraph which will insert two line breaks around the surrounded text.
(note: </P> is not required when creating a paragraph).
If you would like users to be able to access another web site, or another page on your site, you can use a hyper link to accomplish this. To create a hyperlink either use the drag and drop tools palette to your left or use the Insert menu and select 'Link...'.
Type the address that you would like the link to take the user to in the URL field. Type the text that should be displayed in the browser in the 'Text' field. Click the 'Insert' button and the text will be inserted into your document.
Notice the code that is entered;
<a href="http://www.ragesw.com">Rage Software</a>
As you can see the <a> tag is used to create a link to another web site and the 'href' attribute is used to specify the location of the web site. The text to be displayed in the browser is between the <a> and </a> tags. It is a good idea to study the code that is generated by WebDesign's wizards so that you are able to more quickly become familiar with the different tags and attributes in the HTML language.
If you are not fully familiar or comfortable with the HTML language, or you just can't remember every single tag and attribute, WebDesign's HTML wizards will become very useful to you as you design your web pages. For example, if you do not know the correct code for placing an image on your page, or you get confused when creating complex tables with many rows and columns, WebDesign's wizards will output the correct code for you. They can even create entire image maps without you writing a single line of code.
To access WebDesign's wizards you can either use the drag and drop tools palette to your left or the Insert menu. The tools palette offers some of the most common HTML wizards while the Insert menu will give you access to all of WebDesign's wizards. You simply drag and drop a wizard into the correct location in your document to open the wizard and insert the HTML code position you dropped it in.
Each wizard contains an options menu in the lower left corner allowing you to specify the output options on a per tag basis. You can set the default values for the options menu in the preferences under the 'Application' tab. You can choose to output lowercase code, XHTML code and/or leave out attributes with no value. Almost all HTML wizards include a help button. This button will take you to the integrated HTML help (on OS X 10.2 or later) or take you online to find detailed descriptions of what the code that the wizards output will do.
It is a good idea to play around with WebDesign's wizards to become familiar with each one as well as to see what they can do.