Computers and Information Systems HTML Computers and Information Systems

How the Web Works To access a web site Enter its address (URL) in the address box of your browser http://www.iwacademy.org The http:// 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 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 Web pages are made up of text, graphics, and links to other documents. You use HTML to provide browsers with information about how to display pages and create links. HTML is the Web’s universal programming language, it’s not specific to any platform, computer brand, or operating system. It is a simple markup language that places codes or tags in a Web document, providing information to browsers about the structure of the document.

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 First version contained only 30 commands, or tags, which the user embedded in a document. Later versions improved and expanded the capability of the language to the point where highly interactive, dynamic Web sites could be created. W3C (World Wide Web Consortium is the international organization dedicated to maintaining and improving the standards used by the World Wide Web, like HTML. HTML documents are actually text (ASCII) files with HTML tags embedded. HTML tags tell browsers how to display the document; however EACH browser interprets the commands in its own way. For example, if you define a line of text on your Web page as a heading, each browser (Internet Explorer, Mozilla Fire Fox, Netscape) knows to display the line of text as a heading, however each browser may embellish the text in the heading differently, so your Web document will look different when displayed in different browsers That is why it is a good idea to display your web page in different browsers so you can preview how others will be viewing your page. For any Web page that you display in your browser, you display the HTML by having the browser display the source code.

Why HTML and not HTML Editors? Best way to learn HTML Easier to solve problems Tweak appearance Include new features on your page HTML Editors (Dreamweaver, InDesign, Microsoft FrontPage, Kompozer, WebEdit Professional, HotMetal Pro, HotDog Professional are often preferred by professional web developers. We will be using a plain text editor, Notepad, to edit HTML because this is the best way to learn HTML. You will need to be familiar with HTML to be able to solve problems, tweak appearances and learn to include new features on your pages. To do this you will need to do more than have a Wizard create a Web document for you.

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 Next to the “Start” menu (symbol in lower left corner that looks like window pane) Click in box Search the web and Windows and type: Notepad Right Click on NotePadPin to Taskbar

Creating HTML Document in Notepad (cont.) After opening NotePad type the following: <html> <head> <title>The Name of My Page</title> </head> <body> Welcome to my Web Page! <p>This my first web page. My name is... <br>I can't wait to learn more about this. </body> </html> When you save an HTML file, you can use either the .html or the .htm extension. .htm is a habit from the past, when software only allowed three letters in file extensions. With today’s software it is perfectly safe to use .html.

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. Ask if everyone has menu bar for internet Explorer. If you do not have menu bar, right click on command line on Internet Explorer page, select MENU BAR, then select FILEOPEN and continue with directions.

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 The work of creating a Web page is often referred to as “coding”. Format: bold, underline, italicize, font size, color, etc. Graphics: Pictures Links: hyperlinks, e-mail links, video links, etc.

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: <HTML> This tag designates beginning of an HTML document

HTML Tags (continued) Includes a forward slash (/) before command Many tags are paired Closing tag has same syntax of Opening tag BUT: Includes a forward slash (/) before command Example : </HTML> 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. Many tags are paired, meaning the first tag indicates the beginning of the command and the second tag ends the command. If you forget to close a paired set of tags or you include a backslash or some other character rather than a forward slash, the tag will not be closed, and the command will stay in effect.

Review: HTML Tags HTML tags are keywords surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> 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 <b> before the word first Insert </b> 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 <head> </head> 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) <body> </body> Contains the information that will appear on the screen Text Graphics Links, etc

Structure of a Web Document <HTML> <HEAD> <TITLE> text that appears in the browser’s title bar</TITLE> </HEAD> <BODY> all info that will be displayed on screen </BODY> </HTML>

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

MISCELLANEOUS E-mail link with anchor will NOT go to your google e-mail account UNLESS you do the following: Use Chrome to open your e-mail account In the upper right corner of your search bar, to the left of the Star you will see an icon of two diamond shapes intersecting Right click on the diamonds icon Click on allow Close e-mail, then open e-mail Your e-mail link on your web page should now link directly to your google e-mail account

Adding an Image (graphic) When using the source code to add an image to your web page use a web address for the image instead of a file name <img src=“http://................”> To get an image with a URL go to Google Images, select a picture and then select “View Image” to the right of the picture This will prevent problems with the picture not appearing on your web page.