Class 3 – Creating Lists In this lesson, you will learn to use HTML to organize your text into lists.

Slides:



Advertisements
Similar presentations
Use Tables for Layout Control Day 7. You will learn to: Understand Tables Create a Simple Table Modify Your Tables Appearance Create Page Layouts with.
Advertisements

Chapter 3 – Web Design Tables & Page Layout
Internet Basics & Way Beyond!
HTML popo.
HyperText Markup Language (HTML). Introduction to HTML Hyper Text Markup Language HTML Example The structure of an HTML document Agenda.
HTML: HyperText Markup Language Hello World Welcome to the world!
Anne McGrath 16 th February  Review of what we have learned so far.  Angled brackets surround HTML tags.  The words between the angled brackets.
HTML/XML XHTML Authoring. Creating Tables  Table: An arrangement of horizontal rows and vertical columns. The intersection of a row and a column is called.
Chapter 4 Marking Up With Html: A Hypertext Markup Language Primer.
XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists.
Unit 2, cont. September 14 HTML,Validating your pages, Publishing your site.
Computing Concepts Advanced HTML: Tables and Forms.
Web Page Development Identify elements of a Web Page Start Notepad
Using HTML Tables.
Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.
Tags through Forms. This element is required for all HTML pages It must be at the top of every page of every website We’ll see later on why it is important.
HTML Notes Chapters 1--6 Codes used in creating HTML documents are called tags. Tags are always enclosed in left ( ) angle brackets. Tags can be upper.
CSS (Cascading Style Sheets): How the web is styled Create Rules that specify how the content of an HTML Element should appear. CSS controls how your web.
HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.
1 The Structure of a Web Table beginning of the table structure first row of three in the table end of the table structure table cells You do not need.
Creating Tables in a Web Site Using an External Style Sheet
CHAPTER 11 Tables. How Are Tables Used Data Display  Very tidy and very useful Better Text Alignment  Putting text in tables allows you to format indents.
Chapter 4 Fluency with Information Technology L. Snyder Marking Up With HTML: A Hypertext Markup Language Primer.
Chapter 3 Working with Text and Cascading Style Sheets.
Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple.
Internet Skills An Introduction to HTML Alan Noble Room 504 Tel: (44562 internal)
CO1552 – Web Application Development Lists, Special Characters, and Tables.
Essential Tags Web Design – Sec 3-3 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.
Chapter 4: Hypertext Markup Language Primer TECH Prof. Jeff Cheng.
Understanding HTML Code
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.
XP Mohammad Moizuddin Creating Web Pages with HTML Tutorial 1 1 New Perspectives on Creating Web Pages With HTML Tutorial 1: Developing a Basic Web Page.
JMD2144 – Lesson 4 Web Design & New Media.
1 ADVANCED MICROSOFT WORD Lesson 13 – Working with Long Documents Microsoft Office 2003: Advanced.
XP New Perspectives on Microsoft Word 2002 Tutorial 31 Microsoft Word 2002 Tutorial 3 – Creating a Multiple-Page Report.
Essentials of HTML Class 4 Instructor: Jeanne Hart
XP 2 HTML Tutorial 1: Developing a Basic Web Page.
IS1824: Introduction to Internet Multimedia Lecture 5: Layout in HTML Rob Gleasure
Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment.
HTML: Hyptertext Markup Language Doman’s Sections.
Organization Components (Lists, Table & Frame) Wah Yan College (Hong Kong) Mr. Li. C.P.
4 Chapter Four Introduction to HTML. 4 Chapter Objectives Learn basic HTML commands Discover how to display graphic image objects in Web pages Create.
LEARNING HTML PowerPoint #1 Cyrus Saadat, Webmaster.
Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.
HTML— More Tags, Formatting, and Lists. Formatting Tags  Bold  Italics  Underline  Big text  Small text  Subscript (H 2 O)  Superscript (10 3 )
1 Web Application Programming Presented by: Mehwish Shafiq.
Basic Table Elements. 2 Objectives Define table elements Describe the steps used to plan, design, and code a table Create a borderless table with text.
HTML ( HYPER TEXT MARK UP LANGUAGE ). What is HTML HTML describes the content and format of web pages using tags. Ex. Title Tag: A title It’s the job.
© 2011 Delmar, Cengage Learning Chapter 3 Working with Text and Cascading Style Sheets.
HTML.
Cascading Style Sheets CSS. Source W3Schools
Formatting Text with HTML. Objectives: Students will be able to: Define the structure of the document with block elements Format numbered, bulleted, and.
Headings are defined with the to tags. defines the largest heading. defines the smallest heading. Note: Browsers automatically add an empty line before.
Microsoft Expression Web 3 – Illustrated Unit D: Structuring and Styling Text.
Assistant Professor,UCER Naini,Allahabad
Creating Tables in a Web Site HTML 4 Created by S. Cox.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
CS 100 Introduction to Web Page Construction and HTML.
XP 2 HTML Tutorial 1: Developing a Basic Web Page.
Tutorial 5: Tables Session OBJECTIVES Create a table Insert a table summary Insert a table caption Add rows and cells Merge Cells inside a Table.
HTML Tags BTT1O. HTML  Documents written in hypertext markup language can be interpreted by all web browsers.  This language lets the web page developer.
Group 9: Through examples, explain how to build a css navigation bar. Presented by: Daniel Ku, Matt Iannacci & Iphia Henry.
HTML for web designing short course. What is an HTML File? HTML stands for Hyper Text Markup Language An HTML file must have an htm or html file extension.
Tutorial 5 Working with Web Tables. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Learn and Apply the structure of.
Text Elements. We've already learned about the,,,, and elements. Now let's learn some elements that we'll use to present actual text content on our web.
Glencoe Introduction to Web Design Chapter 4 XHTML Basics 1 Review Do you remember the vocabulary terms from this chapter? Use the following slides to.
Lesson 5. XHTML Tags, Attributes and Structure XHTML Basic Structure head and body titles Paragraph headings comments Document Presentation Manipulating.
Organizing Content with Lists and Tables
Elements of HTML Web Design – Sec 3-2
CS7026: Authoring for Digital Media HTML Authoring
Presentation transcript:

Class 3 – Creating Lists In this lesson, you will learn to use HTML to organize your text into lists.

Creating Lists Types of Lists One way to organize the text in your Web pages is with lists. In addition to the obvious benefit of being able to list items on a page, they also provide a design benefit by enabling you to break up long pages of ordinary paragraphs.

Creating Lists con’t HTML recognizes the following list types and has tags that correspond to each:  Bulleted (unordered) lists  Numbered/lettered (ordered) lists  Definition lists

Tip You should use ordered lists when the items in the list must be followed in a specific order, and use unordered lists when they do not. You generally use definition lists for terms and their definitions, but they can have other uses as well.

Bulleted List A bullet (usually a solid circle) appears in front of each item in an unordered list. HTML automatically creates the bullet when you use the unordered list tag ( ) together with the list item tag ( ). Although the following sample HTML shows each list item as a single line of text, your list items can be as long as you want:

Bulleted Lists con’t first item in the list second item in the list third item in the list

Formatting Bulleted Lists HTML automatically adds a solid circle in front of each list item as a bullet, but you have two other choices. Using style sheet tags you can select one of two other bullet types: a square or a hollow circle.

Con’t Lists a list item another list item a list item another list item

Numbered Lists If the items in your list should follow a specific order, as in recipes or instructions, you want to use the ordered list tag ( ). With this tag, HTML automatically numbers or letters your items for you. Here's an example:   first item in the list  second item in the list  third item in the list  Notice how similar the two list samples are. Both the and tags call for the individual list items to be identified with the tag.

Definition Lists If you need it, HTML has one more type of list available to you: the definition list, which uses the tag. Rather than using the usual tag to specify the items in the list, this type of list uses the tag (for definition terms) and the tag for their definitions. The Definition Term Is defined below the term.

Summary In this lesson, you've learned: HTML recognizes three different list types: unordered (bulleted), ordered (numbered), and definition. Rather than the default bullet style (a solid circle), style sheets enable you to select three other bullet types: a square, a hollow circle, or an image of your own. The value attribute of the tag sets the beginning number for your list.

Class 3 – Creating Tables In this lesson, you will learn how to build tables using HTML, and how to control the layout and appearance of a Web page using tables.

Simple Tables Traditionally, tables have been used for displaying tabular data (such as numbers) in rows and columns. The flexibility of HTML, however, enables Web developers to create tables that display more than just numbers. In fact, as important as the capability to display tabular data is, even more important to Web designers is the capability to control the layout of other document elements (such as text and images).

Caution Although HTML tables look similar to your favorite spreadsheet, HTML tables don't perform mathematical functions.

Tables con’t HTML tables are not difficult to create, but they do require some organization. All HTML tables begin with the tag and end with the tag. In between those tags are three other tags to be aware of, as follows:

Tables con’t defines a horizontal row. defines a data cell within that row. specifies a data cell as a table heading. In newer browsers, a table heading cell is formatted as centered and bold.

Tip The World Wide Web Consortium's Web site ( has detailed descriptions of all the attributes available for tables, as well as examples of how you can use them.

Using Tables for Layout Look at the source code for some of your favorite Web pages and I bet that you'll find they were created using tables. Following are some of my favorite Web pages that use tables to control the page layout: The columns of search categories are created with tables. This site is essentially a three column table. office/ editions/ prodinfo/ default.mspx Microsoft, too, uses tables to design the layout of its Web site. office/ editions/ prodinfo/ default.mspx The Americal Idol Web site demonstrates another creative use of tables in layout.

Tip Even if you don't plan to place a border around the cells in your table, it's much easier to see how your HTML commands are interpreted by your Web browser when you have the borders turned on ( ). After you are satisfied that the table is formatted correctly and your content is where you want it to be, you can remove the border attribute, leaving just the tag.

Summary In this lesson, you've learned: Tables can control the layout of HTML document elements (such as text, navigation, and images). Extra spaces in your HTML documents help you keep track of the table tags. Luckily, web browsers ignore any extra spaces.