Agenda Lists Purpose Types of Lists: Unordered Ordered Definition.

Slides:



Advertisements
Similar presentations
HTML popo.
Advertisements

HyperText Markup Language (HTML). Introduction to HTML Hyper Text Markup Language HTML Example The structure of an HTML document Agenda.
Chapter 2 HTML Basics Key Concepts
XHTML Basics Web pages used to be written exclusively in html
How Tags are used to form your Web Page
Lists, Lists, & Lists Unordered List Ordered List Definition List.
Chapter 4 – Intermediate HTML 4 Outline 4.1 Unordered Lists 4.2 Nested and Ordered Lists 4.3 Basic HTML Tables 4.4 Intermediate HTML Tables and Formatting.
1.  Formatting is applied to spreadsheet components for the purpose of organizing and clarifying information.  Data that is presented in a uniform and.
Chapter 3 Working with Text and Cascading Style Sheets.
XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists.
Introduction to HTML Lists Why Use Lists? Lists are one way to organize information for easy access. People are familiar with using lists to organize.
HTML: PART ONE. Creating an HTML Document  It is a good idea to plan out a web page before you start coding  Draw a planning sketch or create a sample.
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.
SSome HTML tags allow you to specify a variety of options, or attributes, along with the basic tag itself. For example, when you begin a paragraph with.
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.
Web page - A Web page is a simple text file that contains HTML tags (code) that describe what should be displayed on the browser. -The Web browser interprets.
Chapter 3 Working with Text and Cascading Style Sheets.
Class 3 – Creating Lists In this lesson, you will learn to use HTML to organize your text into lists.
HTML II. Factors to consider in designing a website. Organizing your files. HTML Tables. Unordered Lists. Ordered Lists. HTML Forms. Learning Objectives.
INTRODUCTION TO HTML5 Styling Text. Change the Font Size  You can use the font-size property to change the font size for a document’s text.  Instead.
Agenda Links External and Internet Links Anchor Tag Text Hyperlinks Image Hyperlinks Images Image Attributes: src, alt, width, height, align, border.
1.  Describe the anatomy of a web page  Format the body of a web page with block-level elements including headings, paragraphs, lists, and blockquotes.
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Formatting Text and Lists Essentials for.
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.
XP 1 HTML Committed to Shaping the Next Generation of IT Experts. 01: Introduction to HTML.
1 Web Development Lecture # 11 Introduction to XHTML (Chapter # 4) It.GulGasht.Com.
Ordered Lists By Brian Christian. Ordered List Tags You use this tag when you want to start an ordered list. Each list item you write need to start with.
XP 2 HTML Tutorial 1: Developing a Basic Web Page.
Agenda Block-Level vs. Inline Elements (tags) Manipulating Text,  , Text Characteristics,,,,,,,,,,,,,,, Font Attributes: size, color, face Horizontal.
Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.
CIS234A- Lecture 7 Instructor Greg D’Andrea. Tables A table can be displayed on a Web page either in a text or graphical format. A text table: – contains.
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 58.51A LINKING & LISTS Linking to local files name of destination.... anchor tag HREF attribute. This attribute identifies the location of the link.
1.  Formatting applied to spreadsheet for the purpose of organizing and clarifying information.  Data presented in a uniform and consistent format 
HTML Introduction. Lecture 7 What we will cover…  Understanding the first html code…  Tags o two-sided tags o one-sided tags  Block level elements.
Formatting Text with HTML. Objectives: Students will be able to: Define the structure of the document with block elements Format numbered, bulleted, and.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2- part 2 Key Concepts 1 Copyright © Terry Felke-Morris.
CSS THE MISSING MANUAL Introduction. Benefits of CSS Style sheets offer more formatting choices than are offered in straight HTML  EXAMPLE: When you.
The Complete Reference OMT II Mam Saima Gul. * Modern HTML has three basic forms of lists: ordered lists ( ), unordered lists ( ), and definition lists.
Creating Tables in a Web Site HTML 4 Created by S. Cox.
Elements and Attributes. XHTML Elements The element contains special information that does not necessarily show up on the web page. The element determines.
CS134 Web Design & Development Attributes, Lists, Tables, Links, and Images Mehmud Abliz.
`. Lecture Overview HTML Body Elements Linking techniques HyperText references Linking images Linking to locations on a page Linking to a fragment on.
XP 2 HTML Tutorial 1: Developing a Basic Web Page.
XP 1 HTML Tutorial 1: Developing a Basic Web Page.
INT222 – Internet Fundamentals
LISTS AND LINKS Explained By: Sarbjit Kaur. Lecturer, Department of Computer Application, PGG.C.G., Sector: 42, Chandigarh.
NOTEPAD++ Lab 1 1 Riham ALSmari. Why Notepad++ ?  Syntax highlighting  Tabbed document interface  Zooming  Indentation code  Find and replace over.
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.
Q.Nand1 HTML Creating an HTML Document Lesson 2. Q.Nand2 Overview Creating an HTML Document: –HTML syntax –Creating Basic Tags –Displaying Your HTML Files.
Basic Webpage Design Formatting output using Unordered List and Ordered List tag.
Lesson 5. XHTML Tags, Attributes and Structure XHTML Basic Structure head and body titles Paragraph headings comments Document Presentation Manipulating.
HTML Basics.
Organizing Content with Lists and Tables
Web Development & Design Foundations with HTML5 7th Edition
HTML Formatting.
Formatted Lists Unordered Lists Usage of Unordered List Ordered Lists
Text Elements.
HTML Lists CS 1150 Fall 2016.
Formatted Lists Unordered Lists Usage of Unordered List Ordered Lists
Elements and Attributes
Text Elements.
Text Elements.
HTML Lists CS 1150 Spring 2017.
Formatted Lists Unordered Lists Usage of Unordered List Ordered Lists
Text Elements.
COS 125 DAY 13.
Text Elements.
Presentation transcript:

Agenda Lists Purpose Types of Lists: Unordered Ordered Definition

Lists  Lists allow you to display information in a concise, organized manner without having to use tables.  Things to do: Put out the garbage Walk the dog Cook supper Lists can use various bullet shapes and sizes, and other formats such as letters and numbers Bulleted items stand- out and therefore are easier to read.

Unordered Lists  Unordered List (block-level tag) This will create a list that uses a bullet beside text as opposed to numbers or letters. Use this style of list when order is not important. The tag is used to designate (assign) the individual items in the list. The and tags require closing tags ( i.e., ) Text will wrap on the next line if it’s too long to fit on one line (i.e. word-wrap) You can use attributes to change the bullet style.

Unordered Lists  Attributes  type – indicates which type of bullet style to be used in the unordered list. eg.  Refer to INT222 course notes for examples of unordered lists… The type attribute can be used in the tag as well…

Unordered Lists  Nested Lists Lists can be placed within lists to indicate sub- items. Source code and result is displayed below:  Item1  Sub-Item 1a  Sub-Item 1b  Item2 Item1 Sub-Item 1a Sub-Item 1b Item 2

Ordered List  Ordered List ( block-level Tag) This will create a list that order the lists by letter or number. Use this style of list when order is important. Rules regarding the and (beginning and ending) tags remain similar as with unordered lists. You can use attributes to change the style of number or letter that will appear in the list.

Ordered Lists  Attributes  type – indicates which type of style to be used in the ordered list (default is decimal numbers). eg.   start – indicates which number or letter to start. Refer to INT222 course notes for examples of ordered lists… First two examples will produce lists with upper and lowercase letters. The last two examples will display lower and uppercase Roman numerals

Definition Lists  definition list (block-level tag) The definition list allows the user to define words (like a glossary of terms). Refer to example below.  Web Broswer A software application used to locate and display web pages The and tags define the area of a definition list. There are two other tags that are used: (definition term) – this represents the “word” or “term” being defined (requires ending tag ) (definition description) – this represents the “definition” of the above-mentioned work or “term” (requires ending tag ). Word or term Definition of Word or term

Definition Lists  Lists can be placed within lists to indicate sub-items. Source code and result is displayed below:  Web Browser  A software application used to locate and display web pages Web Browser A software application used to locate and display web pages Note: By default, a browser will align terms on left (indented for each item). Refer to INT222 web page for additional examples