1 Creating Web Pages Part 1

2 OVERVIEW: HTML-What is it? HyperText Markup Language, the authoring language used to create documents on the World Wide Web. 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. 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 (enter here what document is about) and ends with. The correct structure for an HTML document starts with (enter here what document is about) and ends with. All the information to be displayed on the Web page goes between the and tags. All the information to be displayed on the Web page goes between the and tags. There are hundreds of other tags used to format and lay out the information in a Web page. 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. 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.

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

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

5 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, (2) use it to sign on to a web host for which you have an account, and then (3) transfer (i.e., “upload”) your file(s).

6 THE WEB DEVELOPMENT PROCESS: How do I view my Web page? By typing its address into a Web browser:

7 HTML FILE STRUCTURE: What are the basic structural elements? The title is placed within the element and so cannot be seen when the page is displayed. The title is placed within the 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. 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. 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. To attract users to your page, you should write a clear and concise title that describes what the page is about. The tag should start at the beginning of the document and end after the close of the body element. The tag should start at the beginning of the document and end after the close of the body element. The element provides useful, but hidden, information about the page. The element provides useful, but hidden, information about the page. The element is also found within most HTML documents. The element is also found within most HTML documents. The element encloses the displayable content of the HTML documents. It starts at the end of the element and ends just before the closing tag. The element encloses the displayable content of the HTML documents. It starts at the end of the element and ends just before the closing tag.

8 HTML FILE STRUCTURE: What are HTML Elements? HTML elements are represented by tags, which are enclosed in angle brackets. 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. 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. 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. Attributes are always assigned values that are enclosed in double quotes and set equal to the attribute name.

9 HTML FILE STRUCTURE: What do I need to know about HTML syntax? It is not case- sensitive. It is not case- sensitive. It ignores all white space in a document other than the single spaces between words. 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. When you nest elements within other elements, they must close in the reverse order in which they were opened.

10 HTML FILE STRUCTURE: Does neatness matter? 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 #1 Code snippet #2 Start each element on a new line Start each element on a new line Leave a blank line between elements that define large chunks of content. Leave a blank line between elements that define large chunks of content. Indent elements that are nested within other elements Indent elements that are nested within other elements

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

12 HTML ENTITIES: … :

13 HTML ENTITY ATTRIBUTES: :

14 HTML COLOR: Hexadecimal Color Codes

15 CONTROLLING TEXT FLOW: CONTROLLING TEXT FLOW:

16 CONTROLLING TEXT FLOW: CONTROLLING TEXT FLOW:

17 CONTROLLING TEXT FLOW: &nbsp ;

18 CONTROLLING TEXT FLOW: CONTROLLING TEXT FLOW:

19 LINKS: The basic tag