HTML Web Authoring Tonya L. DeZarn Janice Thompson Juana Wallace

HTML Overview How to begin Barebones HTML page Images, sound, background HTML Linking

Beginning-Tools Needed Text Editor-Notepad or Simple Text Web browser Internet access and password-protected account ( these are needed to publish to the WWW )

Basic Need to Know… Create pages as.html The first or main page is index.html. By default FTP used to upload files to the server in the public_html folder (note: computers recognize this folder as the main web folder by default) Best way to learn webpage building is by viewing other web pages (note: when using other’s work, get their permission and cite them )

Barebones HTML Page --tells computer this is a webpage file --metadata (general info not shown in page) page title, shown in upper left corner (note: the body is where all contents of a page go)

Images, sound, background Points to Remember -use non-glaring colors and non-distracting colors -not recommended for web pages unless you have a good reason to have it -Size of the image matters

Web Authoring Tools Once you mastered the basics of HTML, you can speed up the process by using special software designed to expedite Web page development, such as: FrontPage Dreamweaver Netscape Composer

Dreamweaver …is the professional choice for building web sites and applications. It provides a powerful combination of visual layout tools, application development features, and code editing support. This web authoring tool enables web designers and developers to easily create and manage any website.

Advantages of using Dreamweaver Saves time entering tedious HTML codes manually Split view of code/design: what-you-see-is-what-you- get Environment built around Cascading Style Sheets Property Inspector: enables quick, comprehensive property editing…and many other features that makes Dreamweaver the web authoring tool of choice

CSS Used to globally apply a style to your web page. Inline has the highest priority and external the lowest. Saves a lot of work and time!

CSS Syntax Pretty simple – selector {property:value} – i.e. p {font-family:arial} – The selector is usually the html tag you are defining – The property is the attribute you want to change – The value is how you want that attribute to look Be sure not to leave spaces between your property value units – i.e. p {font-size: 12 px} should be p {font-size: 12px}. Grouping – This defines attributes and values for multiple selectors - - another time saving tool! – i.e. h1,h2,h3,h4,h5,h6 {color:red; font-family: arial}

Properties you can define in a CSS Background Text Font Borders Margins Padding Lists

Words of Caution Not all browsers will support all the CSS defintions. Older browsers may not display items the way you intended. When you design your site, keep this in mind – Design the site to have the same meaning with or without the styles.

Layout Design Frames Layout Cells Tables

Website Design Tips Set goals Organize site structure

Design Tips (cont.) Create the look – Be consistent – Maintain design throughout the site so users aren’t confused. – Consider using named anchors Navigation scheme Planning and gathering assets