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<tag_name> content goes here </tag_name>

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