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 ViewSource 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 on your desktop: 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 Go to “Start” menu (symbol in lower left corner that looks like window pane) Click on “Windows Accessories” Right Click on NotePadMorePin 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 is 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 FileSave As Save on your Desktop Computer Info FolderMyNameWebPortfolio Folder Name the file: myname1.htm (type in your last name where it says MyName) Save as type: All Files Click Save (Check folder to see if file saved correctly. Should show the google icon and your filename)
View the Source Code (HTML) Open Internet Explorer FileOpen (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 FILEOPEN) Browse (lower right corner of dialog box) Select file (from desktop …CompInfoWebPortfoliogoogle icon with your last name) 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 FILEOPEN and continue with directions. You will browse for the file located on your desktop in your ComputerInfo folder, WebPortfolio, the file with the google icon and your last name.
Suggestion for easy editing Display both your notepad file and your internet explorer browser on your screen As you edit your notepad file you can Refresh (F5) your web page
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 open angle bracket (<) Each tag ends with a forward slash and close 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 as 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 open tags and close tags <br> break, <p> paragraph, do not require closie 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…F5) 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) Title cannot be formatted
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
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. This will help prevent problems with the picture not appearing on your web page. <img src=“web address is inserted between quotation marks” width=“277” height=“200” /> Find your image on the internet. Right click on the image. Select: Copy Image Address. Paste image between quotation marks. Enter width and height. See above for proper syntax. The width and height can be anything you choose. To center image on page: <center> can be inserted above command for image…remember to close center tag.
Linking to School E-mail 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
Web Page Requirements Web Page Title Name 2 Working Hyperlinks <a href=“http://sunrisecantina.net”>Sunrise Cantina</a> 2 different Heading Levels (<h1>,</h1>, thru h6) Ordered (numbered) List (<ol> </ol>) Unordered (bulleted) List (<ul> </ul>) 2 Relevant Graphics <IMG SRC=“http://stedentripper.com/wp-content/uploads/2010/12/louvre-parijs.jpg” width=“227” height=“200”>
Web Page Requirements (continued) Table: see https://www.w3schools.com/ Select “Learn HTML” under the “HTML Tutorial” heading. Also: See resources on Weebly. Horizontal Line used as separator <HR size=10 width=“75%” color=pink> Link to e-mail with correct anchor (SEE SLIDE 24) <a href=mailto:cclaxton@iwacademy.org>E-mail Mrs. Claxton</a> Web page saved as index.html Folder with web page, notepad, & ALL graphics…MUST BE IN THE SAME FOLDER
Now, Lets Get Started! Open new file in Notepad, Enter the following: <HTML> <HEAD> <TITLE>Enter name of your title </TITLE> </HEAD> <BODY> </BODY> </HTML>
Getting Started (continued) Save notepad file: FILESAVE AS Name of File: index.html Save as Type: All Files Save in: Your desktop folder Comp Info in the folder titled yournameWebPortfolio Reduce Notepad file to ½ screen size Open file in Internet Explorer (Browse) Reduce Internet Explorer to ½ screen size so both Notepad and Browser appear on screen Check that your title appears correctly in Browser CREATE BODY OF YOUR WEB PAGE…HAVE FUN!
View Sample Web Page and Source Code Compare “notepad” view of html code to “source code” on Internet Explorer view of notepad Show “These are a Few of My Favorite Things!” To View Source Code: Right Click View Source Code