HTML5 LIST, TABLE

AND IMAGE
COMPUTER PROGRAMMING G11
•
EXPECTATION
The students should be able to:
• 1. Identify the use of list.
• 2. Enumerate the different tags used in HTML5 lists.
• 3. Know why the table tag should only be used for rendering data
that naturally belongs in a grid.
• 4. Appreciate the importance of using images in an html
document.
• 5. Use the list and image syntax in an html document.
 RECAP
•HTML5 follows a structured syntax to avoid errors.
Provide a short description about the structure of
HTML syntax. What are the errors that you usually
encounter in creating a program?
•Differentiate links and hyperlinks.
 HTML 5
• Are you familiar with a table of contents on a page of a book? Or a telephone
and address directory? Have you visited a page in the Wikipedia showing a
list of something like TV shows? Did you notice how organized it was?
• As teenagers, we often look for the exact data that we are searching for. Often
times we skip out on reading other paragraphs and go directly to look for the
list of information that we need. Every once in a while a list can be very
handy.
• A lot of web designers use the list to create their menus and navigations – as
the navigation very often is a set of related links.
 HW TO CREATE LISTS IN HTML 5
• The web pages you create with HTML5 are often about data,
and data is often organized into lists, which can stand alone
or nest within each other. The items in your lists can either be
numbered (an ordered list) or unnumbered (unordered).
• This figure shows an unordered, or bulleted, list; an ordered,
or numbered, list; and a combination nesting list:
 HTML 5
• Lists, like most HTML5 elements, are quite easy to build:
• 1. Designate the beginning of the list with <ul> or <ol>. The <ul> tag indicates an
unordered (bullet) list, and the <ol> tag describes an ordered (numbered) list.
Generally the unordered list has black circles as bullet points – you can actually
change how the bullet points should look, using CSS.
• 2. Surround each item in the list with an <li></li> pair.
• 3. (Optional) Nest lists inside each other. The <li> of one list can contain an entire
new list. Just be sure to close off one list before beginning a new one. Consistent
indentation helps you keep track of how deeply you’re nested.
 HTML5 TABLE
• HTML tables should only be used for rendering data that naturally belongs in a grid. Tables have
previously been used for the layout of HTML pages but this is not how it should have been. A lot of web
designers used the tables for the layout, but there are two main reasons not to do it:
•  It is semantically incorrect.
•  Tables are less flexible than e.g. div’s (and other semantic elements).
• The elements of tables are pretty comprehensive, but the first you will need to know is the <table>
element. This is the first element and defines that the following markup is inside a table.
• When structuring tables, the HMTL markup is basically structured with row and cells (note, that there
are no tags for columns, just rows). The tag for rows is <tr> (abbreviation for table row) and the tag for
each cell is <td> (which stands for table data, and this is where the actual content is. Before writing the
markup for the table, you need to know exactly what it should look like – this will make it a lot easier
for you.
• As you can see, the <td> tags are nested inside the <tr> tags, and thins
means, that every cell in a row must be inside the <tr> element. Note, that the
attribute border to the <table> tag is added to actually see the table borders
when you execute the codes, but you should never do this when you are
writing your markup – table border is a job for CSS!
 HTML5 IMAGE
• Can you picture out a web page without any images? Imagine Facebook but instead of
seeing images it’s just plain text. How about when you search for an unfamiliar type of
herb but without image, would you be able to tell otherwise? With that said images
help us visualize the product or an item.
• Web pages are not so different; images help to make the site more appealing. Images
can improve the design and the appearance of a web page.
• In HTML images are defined with the <img> tag. The image tag is an empty element
as it only contains attributes and therefore has no closing tag. The simplest way of
using the <img> tag is with the src attribute (src is an abbreviation of source).