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