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  Camino  Opera  Safari

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

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

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

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

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.

HTML  A forward slash in the brackets indicates an ending tag very Very: will appear in bold

HTML  Some HTML Tags come in pairs  A HTML Tag that requires just an opening tag is called an empty tag - add a line break - insert a horizontal line - insert an image

HTML  Nested Tags – nesting refers to the order in which HTML tags appear very

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

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.

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

HTML  very This is a tag set that makes text bold

HTML TAGS  It is very important to carefully proofread your HTML code. It is very important to carefully proofread your HTML code.

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.

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 very

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 To add a horizontal line enter

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

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

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

EXAMPLE Giraffes are known for their long necks

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)

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

Project Enter the Initial HTML Tags Your title is: My Web Page Select a color and (ie: #00066) and insert a new paragraph with My Web Page a different color

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