CreatingWebPages
advertisement
Creating Web Pages Part 1 1 OVERVIEW: HTML-What is it? HyperText Markup Language, the authoring language used to create documents on the World Wide Web. It defines the structure and layout of a Web document by using a variety of tags and attributes. The correct structure for an HTML document starts with <html><head>(enter here what document is about)</head><body> and ends with </body></html>. All the information to be displayed on the Web page goes between the <body> and </body> tags. There are hundreds of other tags used to format and lay out the information in a Web page. Tags are also used to specify hypertext links, which allow Web developers to direct users to other Web pages with only a click of the mouse on either words or an image. 2 THE WEB DEVELOPMENT PROCESS What Does HTML Look Like? Sample Web Page HTML that generated this Sample Web Page* * You can see the code underlying a Web page by selecting View / Source from your browser menu. 3 THE WEB DEVELOPMENT PROCESS: How do I create HTML code? You can (1) create it using Windows Notepad, (2) save it as an HTML file, and then (3) view it locally using your browser. 4 THE WEB DEVELOPMENT PROCESS: How do I put my HTML files on the Web? You can (1) get an FTP program such as the free coreFTP, (3) transfer (i.e., “upload”) your file(s). (2) use it to sign on to a web host for which you have an account, and then 5 THE WEB DEVELOPMENT PROCESS: How do I view my Web page? By typing its address into a Web browser: 6 HTML FILE STRUCTURE: What are the basic structural elements? The <html> tag should start at the beginning of the document and end after the close of the body element. The <head> element provides useful, but hidden, information about the page. The <title> element is also found within most HTML documents. The title is placed within the <head> element and so cannot be seen when the page is displayed. Most browsers display the title in the title bar at the top of the browser window. When an HTML document is published on the Web, search engines will access the title element. To attract users to your page, you should write a clear and concise title that describes what the page is about. The <body> element encloses the displayable content of the HTML documents. It starts at the end of the <head> element and ends just before the closing <html> tag. 7 HTML FILE STRUCTURE: What are HTML Elements? HTML elements are represented by tags, which are enclosed in angle brackets. Most HTML elements include a start tag, an end tag, and the content between them. HTML elements have their own unique attributes that assign specific qualifies, such as color, to the element. Attributes are always assigned values that are enclosed in double quotes and set equal to the attribute name. 8 HTML FILE STRUCTURE: What do I need to know about HTML syntax? It is not casesensitive. It ignores all white space in a document other than the single spaces between words. When you nest elements within other elements, they must close in the reverse order in which they were opened. 9 HTML FILE STRUCTURE: Does neatness matter? Code snippet #1 Yes, it does matter, because neat code is much easier to create, edit, and maintain. Here are some guidelines to help you to create neat code: Code snippet #2 Start each element on a new line Leave a blank line between elements that define large chunks of content. Indent elements that are nested within other elements 10 LEARNING HTML: Is there a quick way to practice writing and executing code without having to create an .html file? Yes! You can use W3Schools’ Tryit Editor* on the Web. You type your code in on the left, press the button, and the result appear on the right. * http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic 11 HTML ENTITIES: <h1> … <h6>: 12 HTML ENTITY ATTRIBUTES: <body bgcolor=“” text=“” link=“” alink=“” vlink=“”>: 13 HTML COLOR: Hexadecimal Color Codes 14 CONTROLLING TEXT FLOW: <br> 15 CONTROLLING TEXT FLOW: <p></p> 16 CONTROLLING TEXT FLOW: &nbsp; 17 CONTROLLING TEXT FLOW: <hr > 18 LINKS: The basic <a></a> tag 19
