1 / 29

HTML

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

trevorl
Download Presentation

HTML

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 Computers and Information Systems

  2. 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

  3. 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

  4. 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

  5. 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

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

  7. Getting Started • Create a New Folder on your desktop: name it Comp Info • Create a New Folder insideComp Info folder: name it MynameWebPortfolio (substitute your last name for myname in title of folder)

  8. 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 NotePadMorePin to Taskbar

  9. 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>

  10. Save Your Web Page FileSave As • Save on your Desktop Computer Info FolderMyNameWebPortfolio 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)

  11. 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 desktop …CompInfoWebPortfoliogoogle icon with your last name) • OK • You are now viewing what your source code looks like displayed on the browser, Internet Explorer.

  12. Suggestionfor 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

  13. 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?

  14. 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

  15. 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

  16. HTML Tags (continued) • 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.

  17. 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

  18. 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

  19. 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

  20. Using HTML Structure Tags (continued) • <body> </body> • Contains the information that will appear on the screen • Text • Graphics • Links, etc

  21. 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>

  22. 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

  23. 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.

  24. 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

  25. 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”>

  26. 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

  27. 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>

  28. Getting Started (continued) • Save notepad file: FILESAVE 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!

  29. 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

More Related