Upload File

lists, images, tables and links. lists unordered list the first item the second item the third item...

  • Home
  • Documents
  • 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
38
Lecture 3 Kanida Sinmai [email protected] http://mis.csit.sci.tsu.ac.th/kanida Lists, Images, Tables and L

Upload: willis-pearson

Post on 29-Dec-2015

233 views

Category:

Documents


13 download

Report

Tags:

TRANSCRIPT

Page 1: 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

Lecture 3Kanida Sinmai

[email protected]://mis.csit.sci.tsu.ac.th/kanida

Lists, Images, Tables and Links

Page 2: 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

ListsUnordered List• The first item• The second item• The third item• The fourth item

Ordered List1. The first item2. The second item3. The third item4. The fourth item

Page 3: 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

Unordered HTML Lists<h2>Unordered List with Default Bullets</h2>

<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>

Page 4: 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

Unordered HTML Lists• Style Attribute

<ul style="list-style-type:disc"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>

Page 5: 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

Unordered HTML Lists• Style Attribute

<ul style="list-style-type:circle"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>

Page 6: 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

Unordered HTML Lists• Style Attribute

<ul style="list-style-type:square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>

Page 7: 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

Unordered HTML Lists• Style Attribute

<ul style="list-style-type:none"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>

Page 8: 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

Ordered HTML Lists<h2>Ordered List</h2>

<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>

Page 9: 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

Ordered HTML Lists – Type Attribute

Page 10: 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

<ol type="1"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>

Ordered HTML Lists – Type 1

Page 11: 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

<ol type="A"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>

Ordered HTML Lists – Type A

Page 12: 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

<ol type="a"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>

Ordered HTML Lists – Type a

Page 13: 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

<ol type="I"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>

Ordered HTML Lists – Type I

Page 14: 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

<ol type="i"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>

Ordered HTML Lists – Type i

Page 15: 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

HTML Description Lists<dl> <dt>Coffee</dt> <dd>black hot drink</dd> <dd>Mocka</dd> <dd>Late</dd>

<dt>Milk</dt> <dd>- white cold drink</dd></dl>

Page 16: 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

Nested Lists<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li></ul>

Page 17: 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

Lists Summary• <ul> element to define an unordered list• style attribute to define the bullet style• <ol> element to define an ordered list• type attribute to define the numbering type• <li> element to define a list item• <dl> element to define a description list• <dt> element to define the description term• <dd> element to define the description data• Lists can be nested inside lists

Page 18: 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

Images

GIF JPGPNG

Page 19: 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

GIFGraphic Interchange Format• Maximum number of 256 colors• Can be Animated• Transparency : allow one color• Interlaced : low resolution to higher – from blur, low-detail to

successive layer

Page 20: 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

JPGJPEG (Joint Photographic Expert Group)• Unlimited colors• Compression : more compress, more degrade image

0% compression 80% compression

Page 21: 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

PNGPNG (Portable Network Graphics)• Without copyright limitation (that found in GIF)• Vary in color: PNG-8 (256 colors) – PNG-24 (millions colors)• Transparency• PNG-24 - file size is larger than JPG• PNG-8 - file size is lower compared with GIF

Page 22: 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

Images• In HTML, images are defined with the <img> tag.• The <img> tag is empty, it contains attributes only, and does not have a

closing tag.• The src attribute specifies the URL (web address) of the image:

<img src="url" alt="some_text” />e.g.<img src="wrongname.gif" alt="HTML5 Icon”/>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128” />

Page 23: 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

Tables• Tables are defined with the <table> tag.• Tables are divided into table rows with the <tr> tag.• Table rows are divided into table data with the <td> tag.• A table row can also be divided into table headings with the <th> tag.

Page 24: 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

Tables <table style="width:100%"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr></table>

Page 25: 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

Table – border attribute<table border="1" style="width:100%"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr></table>

Page 26: 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

Table – border style<html><head><style>table, th, td { border: 1px solid black; border-collapse: collapse;}</style></head><body>

Page 27: 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

Table headings<table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Points</th> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr></table>

Page 28: 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

Table - colspan<h2>Cell that spans two columns:</h2><table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr></table>

Page 29: 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

Table - rowspan<table style="width:100%"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr></table>

Page 30: 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

Table - caption<table style="width:100%"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr></table>

Page 31: 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

Links• HTML links are hyperlinks.• A hyperlink is a text or an image you can click on, and jump to another

document.

Page 32: 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

Links - Syntax<a href="url">link text</a>

url links<a href="http://www.google.com/">Visit Google</a>

Local links<a href="html_images.asp">HTML Images</a>

Page 33: 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

Links – target attribute<a href="http://www.google.com/" target="_blank">Google!</a>

Page 34: 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

Links - ColoursBy default, a link will appear like this (in all browsers):• An unvisited link is underlined and blue• A visited link is underlined and purple• An active link is underlined and red

Page 35: 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

Links – Colours using style<style>a:link {color:green; background-color:transparent; text-decoration:none}a:visited {color:pink; background-color:transparent; text-decoration:none}a:hover {color:red; background-color:transparent; text-decoration:underline}a:active {color:yellow; background-color:transparent; text-decoration:underline}</style>

Page 36: 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

Links – Colours using style<head><style>********</style></head><body><p>You can change the default colors of links</p><a href="html_images.asp" target="_blank">HTML Images</a> </body></html>

Page 37: 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

Image as Link<a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0"></a>

Page 38: 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

Link – create a bookmark

<p><a href="#C4">Jump to Chapter 4</a></p>

<h2>Chapter 1</h2><p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2><p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2><p>This chapter explains ba bla bla</p>

<h2 id="C4">Chapter 4</h2><p>This chapter explains ba bla bla</p>


Chapter 5 Notes. P. 189: Sets, Bags, and Lists To understand the distinction between sets, bags, and lists, remember that a set has unordered elements,

Blocking Analysis of FIFO, Unordered, and Priority-Ordered ...bbb/papers/talks/rtss13a.pdfOn Spin Locks in AUTOSAR: Blocking Analysis of FIFO, Unordered, and Priority-Ordered Spin

TIVDM1Modelling unordered collections1 Peter Gorm Larsen

A Beginner’s Guide to LATEX February 27, 2013 · You can put stu into ordered and unordered lists by using the enumerate and itemize commands, respec- ... are produced with \BigOh{n},

Web Site Design - stanford.edu · CS03 Beginning Web Site Design Slide 3 of 40 Lists There are two main types of lists in HTML: • Unordered – Bulleted lists (disc, circle, square)

Basic filesystem concepts · 2019-12-09 · Our naïve models of storage have been based upon "free" and "used" lists. Logically, they're sets, in the sense that they're unordered

Introduction - v4.software-carpentry.org · The world is notmade of lists and arrays Mathematicians uses setsfar more often An unordered collectionof distinctitems Collection: contains

SOUTH FLORIDA WORKFORCE INVESTMENT BOARD ...sharepoint.careersourcesfl.com/sites/web/Lists/South...SOUTH FLORIDA WORKFORCE INVESTMENT BOARD AGENDA ITEM NUMBER: 2A AGENDA ITEM SUBJECT:

POTMiner: mining ordered, unordered, and partially-ordered trees - …elvex.ugr.es/idbis/dm/docs/2010-KAIS-POTMiner.pdf · POTMiner: mining ordered, unordered, and partially-ordered

Arrays - cs.duke.edu › ... › arrayTutorial.pdf · •Arrays are similar to lists, but elements in arrays are ordered and elements in a list are unordered. When traversing an array,

Spinning the Web - Virginia Tech Scholarly Communication ...Document Body tags Information Type Elements Physical Style Elements Text Elements Unordered, Ordered Lists ... Logical

Web Development Recipesmedia.pragprog.com/titles/wbdev/accessible.pdfdo it is with nested, unordered lists. However, when users are presented with this kind of layout, it can be hard

1001 - A tool for binary representations of unordered ... · 1" 1001 - A tool for binary representations of unordered multistate characters (with examples from genomic data) Mavrodiev

Loop-Free Convergence with Unordered Updatespenumarp/papers/tnsm.pdfLoop-Free Convergence with Unordered Updates Glenn Robertson, Nirupam Roy, Phani Krishna Penumarthi, Srihari Nelakuditi,

Lists in Java Part of the Collections Framework. Kinds of Collections Collection --a group of objects, called elements –Set-- An unordered collection

Models for Ordered and Unordered Categorical Variablesliberalarts.utexas.edu/prc/_files/cs/Multinomial_Ordinal_Models.pdf · Models for Ordered and Unordered Categorical Variables

Applied Databaseshomepages.inf.ed.ac.uk/opb/ad/lect3.pdf · File organization { unordered data Keep two lists: pages with room and pages with no room. Full Free space Variations:

Searching Arrays. COMP104 Lecture 22 / Slide 2 Unordered Linear Search * Search an unordered array of integers for a value and return its index if the

1 Introduction to HTML: Part 1 Outline Introduction Elements and Attributes Editing HTML Common Elements Headers Images Unordered Lists Nested and Ordered

Validity of the Healing Encounters and Attitudes Lists ... › images › LearnMore › 2017_User... · nonspecific factors. “Item banks” are needed. • Item banks = sets of

Reducing Latency in Tor Circuits with Unordered Delivery

Equality Comparison for Unordered Collections · The second reason why we need equality comparison defined for unordered containers is consistency: There is simply no valid reason

Create Unordered and Ordered lists Cascading Style Sheets Insert and align Graphics Image enhancements Background images and site maintenance Working with

Aleph Update - library.mcgill.ca · • Filter item lists by sub-library and year in the GUI (CAT) • Item lists in the GUI have sort options but no filtering • As these lists

Sorted Lists CS 308 - Data Structures. Sorted List Specification (partial) InsertItem (ItemType item) Function: Adds item to list Preconditions: (1) List

Linked Lists CS-212 Dick Steflik. Linked Lists A sequential collection of information Can be unordered; i.e. in no specific order Can be ordered; may

Featured Item Lists for the Non-Programmer Bob Duncan Lafayette College

Hashing. How to Implement a Dictionary? Sequences ordered unordered Binary Search Trees Skip lists Hashtables

Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter

XHTML Lists. There are three types of lists available in XHTML Unordered or bulleted lists Ordered or numbered lists Definition or directory lists

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

>> Introduction to HTML: Forms. Introduction to HTML 5 Important HTML Tags HTML tags and attributes Images Hyperlinks Lists –{ordered | unordered | definition}

Introduction to Python DocumentationIntroduction to Python Documentation, Release v0.0.1 •Bullet Lists •Definition Lists •Option Lists 3.The First Item 4.The Second Item 5.The

Stable Structure from Motion for Unordered Image Collections€¦ · Stable Structure from Motion for Unordered Image Collections 3 the cathedral data set (cf. Section3) with 480

CSS Tutorial Part 2 - University of Delaware › ~yarringt › 103 › Fall14 › CSSTutorial2.pdfCSS Tutorial Part 2: Lists: The default style for an unordered (bulleted) list is