1 / 27

HTML BASICS

HTML BASICS. Web Design I. Web Design. WWW created in the late 1980’s Used in academics for the next 5 years Mosaic (1994) allowed both pictures & text in Web Pages {freeware out of University of Illinois Champaign-Urbana) Netscape Navigator (1995). Web Design. Internet Explorer Firefox

allen-johns
Download Presentation

HTML 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

  1. HTML BASICS Web Design I

  2. Web Design • WWW created in the late 1980’s • Used in academics for the next 5 years • Mosaic (1994) allowed both pictures & text in Web Pages {freeware out of University of Illinois Champaign-Urbana) • Netscape Navigator (1995)

  3. Web Design • Internet Explorer • Firefox • Camino • Opera • Safari

  4. HTML • HTML Page or HTML Document • Create: • Specialized Software • FrontPage – Microsoft • GoLive – Adobe • Dreamweaver – Macromedia “Macromedia now owns Adobe”

  5. HTML • Software programs organize, enter text, Create Superior Web Page Effects without ever entering HTML • New Version of Microsoft Word and Corel WordPerfect also have built in HTML Tags • Most word processing programs or text editors today will work to create HTML and/or JavaScript

  6. Extensions • .doc – Microsoft Word Document • .rtf – Microsoft’s Rich Text Format • .wpd – Corel WordPerfect Document • .txt – Text File • .html – HTML file • .htm – HTML file on some computer Systems

  7. HTML • Devised by Tim Berners-Lee late 1980’s • Particle Physics Lab in Cern, Switzerland • 1993 Marc Anderson developed an image tag; HTML could display images and text

  8. HTML • HTML tag: <> angle brackets • HTML tags: come in pairs called tag sets • HTML tags: starting tag or opening tag and an ending tag or closing tag • HTML tag sets tell the browser where formatting should start and end.

  9. HTML • A forward slash in the brackets indicates an ending tag <bold>very</bold> Very: will appear in bold

  10. HTML • Some HTML Tags come in pairs • A HTML Tag that requires just an opening tag is called an empty tag <BR> - add a line break <HR> - insert a horizontal line <IMG> - insert an image

  11. HTML • Nested Tags – nesting refers to the order in which HTML tags appear <html><P><bold>very</bold></P></html> very

  12. HTML • Hypertext Markup Language (html) • Code used to create Web Pages • Customize pages created in FrontPage and other Web Design Software • Use a text editor to enter HTML code into a text document • Or use software (like FrontPage) to do it for you

  13. HTML TAGS (< >) HTML tag is text that appears between two angle brackets This text tells the browser how to display the a page’s content.

  14. TAG SETS • HTML tags often come in pairs that are called tag sets. • Each pair includes a starting tag (opening tag) and an ending tag (closing tag) • The tag sets tell a browser where formatting should start and end. • A forward slash </> means an ending tag

  15. HTML • <b> very </b> This is a tag set that makes text bold

  16. HTML TAGS • <html><p>It is <i>very</i> important to carefully proofread your <b>HTML</b> code. </p></html> It is very important to carefully proofread your HTML code.

  17. NESTED TAGS • Nesting refers to the order in which HTML tags appear • A nested tag is a tag enclosed inside another set of tags. • In other words, our example shows: the italic tag and the boldface tag are nested within the paragraph tag set.

  18. NESTED TAGS • When nesting tags, make sure you close the tag when you want the format to stop • The browser will format until it comes to an end tag <html><p><b>very</b></p></html> very

  19. EMPTY TAGS • A tag that requires only an opening tag is called an empty tag or an orphan tag {there isn’t a closing tag} EXAMPLES • To add a line break enter <br> • To add a horizontal line enter <hr>

  20. SPACING • Html documents display a single space between words • If you use the space bar, tab key, or enter key to add spaces you will not see those spaces in a Web Browser SPACING DOES NOT MATTER

  21. CASE SENSITIVITY • If a tag is in upper case or lower case it does not matter HTML IS NOT CASE SENSITIVE

  22. SOURCE CODE • A Web page’s source code is the text and HTML commands used to create that page. View Menu: Source or Page FrontPage: • code view or • HTML view & with 2003 Split View

  23. EXAMPLE Giraffes are known for their long necks <B> Giraffes </B> are known for their long necks Giraffes are known for their long necks

  24. NEW LANGUAGE • XHTML – Extensible Hypertext Markup Language developed by the W3C is a hybrid of HTML and will soon replace it. (World Wide Web Consortium)

  25. Project • All examples of HTML can be found on the Internet: How Stuff Works.com and various sites • To write code you must use notepad or wordpad

  26. Project Enter the Initial HTML Tags <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML> Your title is: My Web Page Select a color and (ie: #00066) and insert a new paragraph with My Web Page a different color

  27. Project • In the body of your HTML insert a picture (jpeg) of your choice. • Then: • Print your notepad; then copy and paste your notepad document into Front Page

More Related