Transcript HTML
HTML Overview Part 1 1 The World Wide Web 2 (pp 41-42) The most widely used Internet service is the World Wide Web (WWW), also called The Web. The Web is used to search and access information available on the Internet. A web browser application provides a graphical interface to present information from a web site. Internet Explorer Opera Amaya Chrome Netscape Firefox Safari A web site consists of a series of related web pages. 3 Most web pages are created using HTML (Hypertext Markup Language) and other code. HTML is a markup language that supports hypertext and multimedia. Hypertext is a database system where objects, such as text and images, can be linked. Multimedia includes video, images, audio, and applets which can be embedded in an HTML document. 4 HTML Code (p 42) 5 HTML Tags Purpose of Tags: Define and describe text, graphics, hypertext links, and other multimedia elements found on web pages Tell the browser how to display the document. By viewing the source code of a web page, the user can see the HTML tags used to display the page. 6 To view a web page’s source code: In the browser window, Click on the View menu and choose Source. Tags “mark up” plain text so that a browser application can interpret the text. A tag is comprised of an element inside angle brackets (<>). <title> is called the title tag, where title is the element Tags affect the text between them Tags are usually paired to indicate where an instruction starts and stops. A slash (/) before the element indicates the end of an instruction. text that the tag affects element element <title>Mrs. Walls Resume</title> start tag 7 end tag Text entered between the HTML tags is formatted with the code specified by those tags. Example: <h1>Welcome to my website!</h1> The browser will turn on heading 1 formatting to display the text and then turn it off at the end of that text. Note the source code showing the 6 levels of the heading tag. 8 HTML vs. XHTML W3C created XHTML as an extended version of HTML. XHTML requires some modification of the old HTML standard. 9 All tags must be in lowercase. All tags must have a closing tag. All tags must be properly nested. The <html> tag must be the start tag for every document. While many old browsers can display “old” HTML, newer ones rely on the current standard. Remember, web pages are accessed from desktop computers, mobile phones and handheld devices—all using a variety of browser technologies! Nesting HTML Tags Nesting refers to the order in which tags are opened and closed. Enter the closing tags in the reverse order from the opening tags Closing tags in a different order than they were opened may keep the browser from displaying the page as intended by the author. 10 Adding Attributes to Tags Attributes provide additional information about tags and control how the tag will be interpreted by the browser. Example: The anchor tag, <a>, defines an anchor that converts text or an image into a hyperlink. <a href=http://www.unc.edu>University of North Carolina</a> href is the attribute instructing the browser to set the text between the anchor tags as a hyperlink to the specified web address. 11 Rules for Using Attributes Attributes are entered inside the opening tag but not in the closing tag. Attributes are keyed in name/value pairs. Syntax: name=”value” 12 The attribute should have an equal symbol followed by the value or setting for the attribute. Attribute values should be enclosed inside quotation marks. Using Multiple Attributes Example: <img src=“image.gif” alt=“smiley face image” /> Space once between multiple attributes. The source (src) attribute tells the browser where the image is located. The alt attribute instructs the browser to display alternative text if the image file will not load. 13 Look at the example HTML text and illustration on page 42 <html> <head> <title>An example HTML document</title> </head> <body> <p>Hello world!</p> </body> </html> 14 Creating an HTML Document 15 (p 43) HTML documents are plain text files and can be created using any text editor such as Notepad. The basic structure of and HTML document should be: <html> <head> <title>document title</title> </head> <body> content </body> </html> HTML documents are free-form, which means that spaces and blank lines have no effect on the web page appearance. 16 Creating and Saving HTML Files 17 (p 44) Notepad is a text editor that comes with the Windows operating system. HTML code can be typed directly in the Notepad window. When you open the program, a new document is created. To create a new document when Notepad is already open: 1) 2) 3) choose: File New At the top of your page, type your name and class period. Hit Enter one time and type the name of the assignment. Jayne Wall, 3rd period first_doc practice <html> 18 To save an HTML document: 1) 2) 3) choose: File Save (or Save As) Give your file a descriptive name without spaces.You can separate words with the underscore ( _ ) character. Add .html to the end of your file name so browser software recognizes if as an HTML document. first_document.html 1) 2) 19 In the “Save as Type” box, make sure *.txt is the chosen option. Click the Save button To print an HTML document: 1) choose: File Print To quit the Notepad program: 1) 20 choose: File Quit Viewing HTML Documents in a Web Browser (p 45) 21 To view your HTML document in Internet Explorer: 1) 2) 3) Open Internet Explorer Select File Open to display the Open dialog box. Select Browse to open another dialog box and navigate to the location of the HTML file you want to view. It is easier to open windows on your desktop for both the HTML document and Internet Explorer at the same time, using the task bar at the bottom of your screen to switch between the two. 1) Save changes you make in your HTML document. 2) Switch to the Internet Explorer window and press the Refresh button. 22 HTML Tags Tag Description <html> </html> Defines the HTML document. <head> </head> Defines the header of the document, which is not displayed on the web page. <title> </title> Defines the title of the document, which will be displayed in the title bar of the browser window. <body> </body> Defines the content of the document that will appear as the Web page. Practice: first_document.htm on page 45-46 in binder 24