1 / 16

HTML Web Authoring

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

cedric-valenzuela
Télécharger la présentation

HTML Web Authoring

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTMLWeb Authoring Tonya L. DeZarn Janice Thompson Juana Wallace

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

  3. 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)

  4. 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)

  5. Barebones HTML Page • <html>--tells computer this is a webpage file • <head>--metadata (general info not shown in page) • <meta – where all meta data is contained> • <title> page title, shown in upper left corner</title> • </Head> • <body various attributes placed here to apply to all the content-background color, font> • (note: the body is where all contents of a page go) • </body> • </html>

  6. 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

  7. 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

  8. 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.

  9. 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

  10. 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!

  11. 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}

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

  13. 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.

  14. Layout Design • Frames • Layout Cells • Tables

  15. Website Design Tips http://www.macromedia.com/support/dreamweaver/layout/site_planning/ • Set goals • Organize site structure

  16. 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

More Related