CSCI 1101 Intro to Computers 7.1 Learning HTML

2 Introduction Web pages are written using HTML Two key concepts of HTML are:  Hypertext (links Web pages together) and  Markup (embeds special tags in Web pages to structure and format them) HTML = Hyper Text Markup Language

3 Limits on web page content A Web page, regardless of how complex it looks, can have a maximum of eleven elements. They are: 1.text, 2.hyperlinks, 3.color, 4.lists, 5.images, 6.image maps, 7.sound, 8.video, 9.forms, 10.frames, and 11.tables

4 Design of Web pages A Web page is content and design. The design should enhance content presentation. Page design is related to the goal of the page whether it is to sell a product or convey information. When designing a Web page, Web authors should take advantage of HTML power such as links, colors, etc.

5 What is a Markup language? HTML Markup language uses tags HTML tags convert Web page design into an actual Web page that can be viewed in a browser HTML tags surround page content to format it

6 How are html files displayed? Web browsers render (interpret) HTML tags and display their results Each web browser has it's own peculiarities and personality An experienced web author knows to test their pages in a variety of web browsers

7 What is a markup tag? The generic format of an HTML tag is content goes here HTML tags are categorized as  One-sided tags  Tags that do not require a "closing" tag  Two-sided tags  Matched pair tags - the closing tag uses the </ format. Many HTML tags have attributes to provide finer control of the tag formatting results

8 Methods of developing HTML documents Bottom-up approach: write HTML code in a text editor, and then view the Web page in a browser Steps:  Open a text editor  Enter text and tags  Save file as xxx.html  Open the file in a browser to view the Web page  Repeat above steps if you need to debug the page Top-down approach: build the Web page elements using an HTML editor, and then view the HTML code later Steps:  Open an HTML editor  Add HTML elements using the editor’s GUI  Save the automatically generated HTML code in a file as xxx.html  Exit the editor and view the page

9 Advantages and disadvantages for each Bottom-up  Advantages  Can use any text editor  Allows complete control over page elements  Disadvantages  Requires understanding and knowing HTML code  Elaborate designs can be time consuming Top-down  Advantages  Quick and easy to get started  Elaborate designs easy to create  Disadvantages  Requires HTML editor software  Errors can be difficult to trace and find  Easy to create a page without any understanding of what is truly required