mimi
Uploaded by
31 SLIDES
478 VUES
310LIKES

Understanding HTML: Your Guide to Hypertext Markup Language and Web Development Basics

DESCRIPTION

Dive into the fundamentals of HTML, the backbone of web content, and learn how it utilizes tags to structure text and elements on websites. This guide covers important HTML concepts, including DTD, different HTML versions (like XHTML), and the W3C standards, while exploring practical HTML writing techniques. Understand the nuances between tags, the creation of lists, inserting images, and the importance of cross-browser compatibility. Perfect for beginners and seasoned developers alike, this resource will enhance your web design skills and knowledge.

1 / 31

Télécharger la présentation

Understanding HTML: Your Guide to Hypertext Markup Language and Web Development Basics

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

Playing audio...

  1. HTML Your Friend or Foe? and a little bit from Lazar

  2. Some Terms. . . • HTML: Hypertext Markup Language • SGML: Standard Generalized Markup Language • DTD: Document Type Definitions • HTML is a SGML DTD used on the WWW

  3. What does HTML Do? • HTML script uses a code called a tag to describe how items should look • HTML uses a syntax that is supposedly generally agreed upon to make it portable

  4. Specifications or Standards • The World Wide Web Consortium (W3) • 0.0, 1.0, 2.0, 3.2, 4.0, 4.01 (recent) • xhtml 1.1 • http://www.w3.org • Proprietary code problems

  5. Ways to Write HTML • HTML Converters (Word, StarOffice) • HTML Editors • WYSIWYG • WYSIWAG • UNIX Editors (pico, jpico, vi, emacs) • Notepad ;} • EditPlus

  6. Creating an HTML Document (AKA Web page) • Let’s look at Mary’s Resume. . .

  7. Creating an HTML Document (AKA Web page) - cont. • Document Content -- controlled by HTML Tags <tag name Properties> Document Content </tag name>

  8. HTML Tags • <h1 align=center> Mary Taylor </h1> • Different Browsers interpret tags . . . differently. • <font size = "4"> Mary Taylor </font> • A different approach

  9. More HTML Tags <html> <head> <title> </title> </head> <body> </body> </html>

  10. Subtle Differences. . . • h tags versus font tags • <h1> versus <font size=1> • spacing • bold • the align property (3.2 and higher) • the <p> tag -- to </p> or not to </p>? • your friend the <br>

  11. Lists • Unordered • Ordered • Definition

  12. Unordered Lists <ul> <li>Item</li> <li>Item</li> <li>Item</li> </ul> </li> and a </p> are optional right now, but this is changing

  13. Ordered Lists <ol> <li>Item #1</li> <li>Item #2</li> <li>Item #3</li> </ol>

  14. Definition List <dl>definition list <dt>definition term <dd>definition <dt> <dt> <dd> </dl>

  15. Options on Lists • Unordered List • <ul type=disk> • <ul type=circle> • <ul type=square> • Ordered List • <ol type=[1,i,A,a] start=[1,i,A,a]> • Let's Look

  16. Using Notepad and Browser • Saving the file as “foo.htm” (or foo.html) • Making sure to save it as "All Files (*.*)" • Looking at file in browser • Saving before looking

  17. Character Tags • physical versus logical • physical: exactly how you want the text to appear -- <b>, <i>, <big>, <small> (big and small are html 3.0 and above) • logical: how you want to use the text -- <em>, <strong>, <var>, <cite>, <code>, <kbd> • when to use one over another?

  18. Example <em><strong> satellite technician </strong></em> <i><b> satellite technician </b></i>

  19. Horizontal Lines <hr> <hr align=center> <hr size="12"> <hr width="30%"> <hr width="15"> <hr align=center size="12" width="30%">

  20. More Line Options • More Options • <hr noshade><p> • <hr noshade size="8"><p> • With Explorer • <hr color="#ff0000"><p> • <hr size="10" width=30% color="green"> • Let’s Look

  21. Inserting Images • Inline Image • Appears directly on the Web page • External Image • Browser needs a file viewer

  22. Image Tag <img src = “filename”> GIF versus JPEG Needs to be one of them

  23. Two Ways to Center <p align=center><img src=“taylor.gif”></p> (3.x and above) <center><img src=“taylor.gif”></center> Filenames are case sensitive!

  24. Lifecycle and Evolutionary • SDLC • Hoffer, George, and Valacich • Whitten and Bentley • Evolutionary • Spiral model • Risk factors • End user plays somewhat of a role

  25. Lazar User-Centered Web Development Lifecycle • Define the mission of the Website and the user population • Collect the user requirements for the Website • Create the conceptual design of the Website

  26. Lazar User-Centered Web Development Lifecycle (cont.) • Create the physical design of the Website • Perform usability testing on the Website • Implement and market the Website • Evaluate and improve the Website

  27. Challenges to Web Development • Browser Type • Browser Version • Screen Size • Operating System • Download Time • Infrequency of use • Users don’t use your site all the time • Some exceptions, of course

  28. Clients versus Users • Melding Mission with Need • Determining User base • Negotiating soltions

  29. Clients • Client versus User • Not the same people • Make sure the client has a clear purpose • Make sure the client is committed • Keep client frequently updated • Learn the client's interaction style and use it to your advantage • Meld client mission with user needs

  30. Mission of the Website • Type of Website • Informational • E-Commerce • Entertainment • Target Population • local, international • audience-split? • WMU site

  31. Let’s Set Up Your Site

More Related