COMPUTERS AND INFORMATION SYSTEMS HTML

How the Web Works To access a web site  Enter its address (URL) in the address box of your browser   The indicates browser & web server will communicate using Hypertext Transfer Protocol  The www indicates a resource on the World Wide Web  The iwacademy.com is called a domain name  Identifies which computer (web server), hosts site Your web browser sends the request to the appropriate web server on the Internet

Connecting to the Internet Your modem converts signals from your computer to signals that travel over wire lines to an internet service provider (ISP) Your ISP provides a connection to the Internet

What is HTML? Hypertext Markup Language Web’s universal programming language Places codes or tags in a Web document Provides browsers with info about how to display pages and create links Developed in 1989  Simplified version of Standard Generalized Markup Language  Developed to share documents on different types of computers Uses hypertext to link documents

What is HTML? (continued) First version contained only 30 commands (tags) Subsequent versions expanded so Web sites could become highly interactive and dynamic W3C (World Wide Web Consortium) Text (ASCII) files with HTML tags embedded Display the HTML by having browser display source code  View  Source

Why HTML and not HTML Editors? Best way to learn HTML Easier to solve problems Tweak appearance Include new features on your page

Getting Started Create a New Folder in your H-Drive: name it Comp Info Create a New Folder inside Comp Info folder: name it MynameWebPortfolio (substitute your last name for myname in title of folder)

Creating Web Pages with HTML in NotePad Click the “Start” menu Click on:  All Programs  Accessories  Right Click on NotePad  Pin to Taskbar

Creating HTML Document in Notepad (cont.) After opening NotePad type the following: The Name of My Page Welcome to my Web Page! This is my first web page. My name is... I can't wait to learn more about this.

Save Your Web Page File  Save As Save in your H:Drive  Computer Info Folder  MyNameWebPortfolio Folder (you used your name where it says MyName) Name the file: myname1.htm Save as type: All Files Click Save

View the Source Code (HTML) Open Internet Explorer File  Open (If you do not have the menu bar commands showing on Internet Explorer : right click on the status line at the top of the page containing the commands you do have, select MENU BAR, then FILE  OPEN) Browse (lower right corner of dialog box) Select file (from H:drive) OK You are now viewing what your source code looks like displayed on the browser, Internet Explorer.

Display Notepad and Browser on Desktop at Same Time Open Notepad File Restore down to ½ size Open Browser, Browse for file Restore down to ½ size Make changes to Notepad file Refresh Browser to see changes

Problem Viewing in Browser? Did you save notebook file with the file extension.htm or.html? Are you looking at type of file ALL? Did you open/close all tags?

Understanding HTML Tags HTML is a set of codes (tags) used to create a document (“coding”) Tags:  Format text  Place graphics on the page  Create links

HTML Tags (continued) Syntax (format) is required Each tag begins with an opening angle bracket (<) Ends with a closing angle bracket (>) Contains a command between brackets  Example:  This tag designates beginning of an HTML document

HTML Tags (continued) Many tags are paired Closing tag has same syntax of Opening tag BUT:  Includes a forward slash (/) before command  Example : is the tag for the ending of an HTML document All text between the opening and closing tags is affected by the tags If the tag is not closed the command will stay in effect.

Review: HTML Tags HTML tags are keywords surrounded by angle brackets like HTML tags normally come in pairs like and The first tag in a pair is the start tag The second tag is the end tag Start and end tags are also called opening tags and closing tags

Practice Using a Tag Open your practice html in Wordpad (Remember how you saved: change type of file from Text Documents to All Files) Add a tag to your source code to bold the word first Insert before the word first Insert after the word first REMEMBER: Save Open (or Refresh) Internet Explorer  The changes you made to your source code (bold format) are now displayed on your browser

Using HTML Structure Tags Web pages have two main sections: Head and Body  Must contain a title  This title is displayed in title bar when document is displayed (Open Web Page in Browser, look at title)  May contain other info (format styles for document or keyword info for Web search engines)

Using HTML Structure Tags (continued)  Contains the information that will appear on the screen  Text  Graphics  Links, etc

Structure of a Web Document text that appears in the browser’s title bar all info that will be displayed on screen

About Titles (Head) A Web page can have only one title The title should be specific and descriptive because it is displayed as:  a line item in a browser’s history list  in bookmarks  in indexes  other programs that catalog Web pages The title should be concise Title cannot be formatted like other text, you cannot change its appearance