Basic Webpage Design Formatting output using Unordered List and Ordered List tag.

Slides:



Advertisements
Similar presentations
MA foundation Creating webpages using XHTML (part 1) Simon Mahony CCH
Advertisements

Lists in HTML PowerPoint How to create lists in HTML
HTML popo.
HyperText Markup Language (HTML). Introduction to HTML Hyper Text Markup Language HTML Example The structure of an HTML document Agenda.
Learning HTML Internet and Web Application Development SWE 444 Dr. Ahmed Youssef.
HTML popo.
Presenter: James Huang Date: Sept. 26,  Introduction  Basics  Lists  Links  Forms  CSS 2.
Images, Tables, lists, blocks, layout, forms, iframes
Overview  Recap  HTML. Recap  What is cloud computing?  What are application service providers (ASPs)?  Describe major functions of operating systems.
Beginning Web Site Creation: Dreamweaver CS4 Noreen Brown XHTML CODING -- TAGS.
LIST- HYPERLINK- IMAGES
Web Page Development Identify elements of a Web Page Start Notepad
SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application HTML Programming Language 6 6 Chapter.
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.
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.
HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.
Chapter 3 BIE1313/BPROG1203 | Web design Prepared by Mohamed Abdulkarim / Mike Ng Ah Ngan.
CS105 Introduction to Computer Concepts HTML
Chapter 2: The Client Side: HTML CIS 275—Web Application Development for Business I.
MORE HTML REMEMBER TO SEARCH W3 SCHOOLS FOR MORE INFO.
HTML basics exercises.
ACM 511 HTML Week -1 ACM 511 Course Notes. Books ACM 511 Course Notes.
Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The.
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.
CS105 INTRODUCTION TO COMPUTER CONCEPTS HTML Instructor: Cuong (Charlie) Pham.
IS1824: Introduction to Internet Multimedia Lecture 5: Layout in HTML Rob Gleasure
IDK0040 Võrgurakendused I harjutus 03: Lists, tables and frames Deniss Kumlander.
HTML Lesson 5 Hyper Text Markup Language. Assignment 4  Create a new HTML page called index.htm and save it in your HTML_Folder  Use the same format.
Organization Components (Lists, Table & Frame) Wah Yan College (Hong Kong) Mr. Li. C.P.
Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.
HTML 58.51A LINKING & LISTS Linking to local files name of destination.... anchor tag HREF attribute. This attribute identifies the location of the link.
Suzanne Sultan1 Line Breaks, Paragraphs, lists Lab3.
HTML.
UNIT 2 UNIT 2 Module 3: HTML Lists Overview. List There are two common types of HTML lists Ordered list numbered Unordered list bullet points.
CSE 409 – Advanced Internet Technology 1 DISCUSSION OF BASIC HTML TAGS.
Are You Smarter Than a 5 th Grader? 1,000,000 5th Grade HTML 5th Grade Syntax 4th Grade HTML 4th Grade Syntax 3rd Grade HTML 3rd Grade Syntax 2nd Grade.
Web programming Part 1: HTML 由 NordriDesign 提供
Basic HTML. So, what exactly is HTML? HTML stands for: HTML stands for: Hypertext Markup Language. It is a purpose built markup language for the delivery.
WEEK -1 ACM 262 ACM 262 Course Notes. HTML What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML.
Assistant Professor,UCER Naini,Allahabad
HTML cancho. HTML HyperText Markup Language A set of HTML tags.
Click on CIS120/17 to go to website for course. The week of will tell you what is planned for the week and what has been assigned.
Tutorial #1 Using HTML to Create Web Pages. HTML, XHTML, and CSS HTML – HyperText Markup Language The tags the browser uses to define the content of the.
Chapter 5 pp HTML Elements & Attributes Format Content Or Examples This Text Is A Hyperlink.
Unordered Lists Need to make a list of items that aren't numbered? You need.
Chapter 4 HTML Tags. HTML is written in something called tags. Tags come in pairs, an opening one and a closing one. The first pair of tags we'll write.
LISTS AND LINKS Explained By: Sarbjit Kaur. Lecturer, Department of Computer Application, PGG.C.G., Sector: 42, Chandigarh.
1 Introduction to HTML. 2 Definitions  W W W – World Wide Web.  HTML – HyperText Markup Language – The Language of Web Pages on the World Wide Web.
HTML AN INTRODUCTION TO WEB PAGE PROGRAMMING. INTRODUCTION TO HTML With HTML you can create your own Web site. HTML stands for Hyper Text Markup Language.
HTML Tables Tables are defined with the tag. A table is divided into rows (with the tag), and each row is divided into data cells (with the tag). td stands.
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.
© UNT in partnership with TEA1 Web Technologies Introduction to HTML Scripting.
Lesson 5. XHTML Tags, Attributes and Structure XHTML Basic Structure head and body titles Paragraph headings comments Document Presentation Manipulating.
Tutorial 1 – Creating Web Pages With HTML
HTML Basics (Part-3).
Web Development Part 1.
LAB Work 01 MBA 61062: E-Commerce
Elements of HTML Web Design – Sec 3-2
Introduction to the Internet
HTML Formatting.
Formatted Lists Unordered Lists Usage of Unordered List Ordered Lists
HTML Lists CS 1150 Fall 2016.
Chapter 6 Lists.
Formatted Lists Unordered Lists Usage of Unordered List Ordered Lists
Elements of HTML Web Design – Sec 3-2
HTML (HyperText Markup Language)
TABLES, LISTS & IMAGES.  Tables are defined with tag.  Table is divided into rows and columns.  Table must have at least one row and one column  Table.
Web Design and Development
Formatted Lists Unordered Lists Usage of Unordered List Ordered Lists
Presentation transcript:

Basic Webpage Design Formatting output using Unordered List and Ordered List tag

Objectives To learn how to use list tags in html. To identify the diffirent attributes of list tag. To differentiate the use of from tag. To visualize the output of some examples given

LIST TAGS With HTML you can display images in a document.

LIST TAGS Unordered Lists Unordered list is a list of items. The list of items are marked with bullets (typically small black circles). An unordered list starts with the tag. Each list item starts with the tag. Coffee Milk Here is how it looks in a browser: Coffee Milk Inside a list item you can put paragraphs, line breaks, images, links, other.

LIST TAGS Ordered Lists An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the tag. Each list item starts with the tag. Here is how it looks in a browser: 1. Coffee 2. Milk Inside a list item you can put paragraphs, line breaks, images, links, other. Coffee Milk

HTML - LIST TAGS (examples) EXAMPLE 01. An unordered list

HTML - LIST TAGS (examples) EXAMPLE 01. An unordered list An unordered list An Unordered List: Coffee Tea Milk

HTML - LIST TAGS (examples) EXAMPLE 02. An ordered list

HTML - LIST TAGS (examples) An ordered list An Ordered List: Coffee Tea Milk EXAMPLE 02. An ordered list

HTML - LIST TAGS (examples) EXAMPLE 03. Different types of ordered lists

HTML - LIST TAGS (examples) Different types of ordered lists Numbered list: Apples Bananas Lemons Oranges Letters list: Apples Bananas Lemons Oranges EXAMPLE 03. Different types of ordered lists Lowercase letters list: Apples Bananas Lemons Oranges Lists alalix Page 9 of 16 MEDIONE Roman numbers list: Apples Bananas Lemons Oranges Lowercase Roman numbers list: Apples Bananas Lemons Oranges

HTML - LIST TAGS (examples) EXAMPLE 04. Different types of unordered lists

HTML - LIST TAGS (examples) Different types of unordered lists Disc bullets list: Apples Bananas Lemons Oranges EXAMPLE 04. Different types of unordered lists Circle bullets list: Apples Bananas Lemons Oranges Square bullets list: Apples Bananas Lemons Oranges

HTML - LIST TAGS (examples) EXAMPLE 06. Nested list 2

HTML - LIST TAGS (examples) Nested List2 A nested List: Coffee Tea EXAMPLE 05. Nested list Black tea Green tea China Africa Milk

HTML - LIST TAGS (examples) EXAMPLE 07. Definition List

HTML - LIST TAGS (examples) Definition List A Definition List: Coffee Black hot drink Milk White cold drink EXAMPLE 07. Definition List

Summary Lists commonly are found in documents, including web pages. You can itemize your content in html using list tag. An unordered list starts with the tag An ordered list starts with the tag