Color Templates Software Engineering Module: Web UI Programming Topic: HTML TALENTSPRINT | © Copyright 2012.

Slides:

Advertisements

Similar presentations

Copyright © 2003 Pearson Education, Inc. Slide 5-1 Created by Cheryl M. Hughes The Web Wizards Guide to XML by Cheryl M. Hughes.

Advertisements

Tables Tables provide a means of organising the layout of data

Section 16.1 Create a basic table using HTML Define borders Merge cells Align content in tables Section 16.2 Create a frames-based Web page using HTML.

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.

Chapter 3 – Web Design Tables & Page Layout

Creating Tables in a Web Site

Working with Web Tables

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 8 Key Concepts 1 Copyright © Terry Felke-Morris.

CREATED BY : VIRAL M.KORADIYA. Anchor elements are defined by the element. The element accepts several attributes, but either the Name or HREF attribute.

Using Dreamweaver MX. Slide 1 Standard toolbars and menus Time indicator: gives an approximation of download time of the page Properties panel.

CIS101 Introduction to Computing Week 07. Agenda Your questions Resume project Review Project Two HTML Project Three This week online Next class.

© 2004, Robert K. Moniot Chapters 4 & 5 Introduction to HTML, More Details.

1 XHTML continued Use the anchor tag to link from page to pageUse the anchor tag to link from page to page Create absolute and relative linksCreate absolute.

Introducing Web Tables

 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.

Introduction to HTML II Shih-Heng Chin. Preface Structure of a HTML File Elements used frequently Tables.

Exploring the Internet Creating web pages with 2-d layout Instructor: Michael Krolak Instructor: Patrick Krolak See also

HTML. Goals How to use the Komodo editor HTML coding and testing Basic HTML tags List and Images Tables and Links At least 2 pages and navigation

HTML. Creating a Table Attributes: border: indicates the border type of the table Value: 0 (no border), 1, 2, etc. cols: indicates the number of columns.

What is a TABLE? The HTML table allows web designers to arrange & organize data -- text, images, hyperlinks, forms, form fields, other tables, etc. Tables.

Notes Ch. 12—Creating Tables Web Page Design. Why Use Tables? Tables are used to create a variety of items such as calendars, charts, and spreadsheets.

INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.

HTML Essentials Tables and Table Tags. Overview Use of Tables goes beyond tabulating data Frequently used to format Web pages / control layout Especially.

Chapter 5 Working with Tables. Agenda Add a Table Assign a Table Border Adjust Cell Padding and Spacing Adjust Cell Width and Height Add Column Labels.

XHTML Tables. Tables: Allow us to display information on the page in a uniform fashion. Work well for organizing groups of words, images, and links. Are.

XHTML1 Tables N100 Creating a Simple Web Page. XHTML2 Creating Basic Tables Tables are collections of rows and columns that you use to organize and display.

Identifies the Structure Table Row Column 1 Table Heading Column 2.

CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 5: Working with Tables.

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.

CS105 Introduction to Computer Concepts HTML

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.

HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.

Dr. Nuha El-KhaliliInternet Programming ( ) HTML Hyper Text Markup Language The language of web pages Maintained by the W3C

HTML Overview Part 4 – Tables 1. HTML Tables  Tables are defined with the tag pair.  A table is divided into rows with tag pairs. o tr stands for "table.

1 3/7/05CS120 The Information Era Chapter 4 Basic Web Page Construction TOPICS: More on tables and images.

>> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.

HTML: Tables & Frames Internet Technology1. HTML: Tables Table tags ► surround the entire table ► header row (text is boldfaced) ► surround each row ►

1 Web Developer Foundations: Using XHTML Chapter 3 XHTML Hyperlinks and Tables.

1 Web Developer & Design Foundations with XHTML Chapter 3 Key Concepts.

CS105 INTRODUCTION TO COMPUTER CONCEPTS HTML Instructor: Cuong (Charlie) Pham.

Kingdom of Saudi Arabia Ministry of Higher Education Al-Imam Muhammad Ibn Saud Islamic University College of Computer and Information Sciences Chapter.

HTML (Hypertext Markup Language) – Class 3 Recap: HTML Special Characters (ex: ©). Including Images – using the tag. Lists – Ordered and Unordered.

CO1552 – Web Application Development Linking Pages - The Basis of the Web.

HTML: Tables & Frames Internet Technology.

Introducing Web Tables. Tables for tabulating items  Better looking  More flexibility  More efficient to explain information than plain text.

Tables lab5. Drawing a table Tables are the web designer’s best friend and worst enemy. To draw a table we will use:  tag  for raw  tags for column.

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

1 Review of HTML Elements. 2 The tag These tags are marked as comments in HTML. Any text between these two comment tags will.

CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor

1 Tables attributes. 2 Table attributes: border Activates border around cells Syntax: – where “n” is a value in pixels which controls the “thickness”

CIS234A Lecture 8 Instructor Greg D’Andrea. Review Text Table contains only text, evenly spaced on the Web page in rows and columns uses only standard.

Unit 4 Create and Use Tables. TITLE CORNELL NOTES TOPIC: NOTES: Name: Date: 09/08/2009 Period : Summary: Reasons for using tables Unit 4 Page 1 Display.

26 HTML Tables … surround table … surround each row … surround each cell … like, but bold and centered by default (for table headings) … table title No.

HTML CS 105. Page Structure HTML elements control the details of how a page gets displayed. Every HTML document has the following basic structure: … …

1 Creating the Home Page. 2 Creating a Table Table attributes  Two rows and two columns  No border  Left-aligned Change the vertical alignment of the.

Creating Tables in a Web Site HTML 4 Created by S. Cox.

LINKING WEBPAGES USING HTML HYPERLINKS. Hyperlinks are text strings or images on a webpage which when clicked on, links to another section in the same.

Web111a_chapt04.ppt HTM: Section 4 Tables Table Types Text table elements Easy to use Use fixed-font text (font family monospace) Andale Mono Courier Monaco.

Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 5: HTML Tables.

1 HTML. 2 Full forms WWW – world Wide Web HTTP – Hyper Text Transfer Protocol HTML – Hyper Text Markup Language.

TABLES. Session Checklist ► Learn the ways that tables can help you organize data on your Web site ► Learn how to prepare a spreadsheet-like table that.

1 Mansoor Ahmed Bughio. 2 HTML TABLES With HTML you can create tables. Examples Tables This example demonstrates how to create tables in an HTML document.

CIS101 Introduction to Computing Week 07 Spring 2004.

>> HTML: Tables.

HTML Tables CS 1150 Spring 2017.

Table of Contents Creating Frames Frameset Tag and its attributes

Table of Contents Creating Frames Frameset Tag and its attributes

Table of Contents Creating Frames Frameset Tag and its attributes

Lesson 5: HTML Tables.

Presentation transcript:

Color Templates Software Engineering Module: Web UI Programming Topic: HTML TALENTSPRINT | © Copyright 2012

Color Templates TALENTSPRINT | © Copyright HTML Basics The content in this presentation is aimed at teaching learners to: Create hyperlinks that navigate to different WebPages Display data in a structured format using HTML tables

Color Templates TALENTSPRINT | © Copyright Hyper Links Use anchor tag to create a link. Text to be displayed The href attribute is used to indicate the page we are linking to. The target attribute defines where the linked document will be opened. _blank, _parent, _self, _top, frame_name can be the values of the target attribute. Text to be displayed

Color Templates TALENTSPRINT | © Copyright Hyper Links Google Pages Anchor Tag Hyperlink URL Targeting Naming

Color Templates TALENTSPRINT | © Copyright Tables An HTML table is an element comprised of rows and columns Tables are container elements, and their sole purpose is to house other HTML elements and arrange them in a tabular fashion -- row by row, column by column

Color Templates TALENTSPRINT | © Copyright Tables tag defines the table tag divides the table into rows tag divides the rows into cells A data cell can contain text, images, lists, paragraphs, forms, horizantal rules, tables, etc.

Color Templates TALENTSPRINT | © Copyright Tables A Simple Table row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

Color Templates TALENTSPRINT | © Copyright Tables Table with Border Attribute Row 1, cell 1 Row 1, cell 2 row 1, Cell 1row 1 Cell 2

Color Templates TALENTSPRINT | © Copyright Tables Table with Heading Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 HeadingAnother Heading row 1, cell 1row 1, cell 2 row 2, cell 1row 2, cell 2

Color Templates TALENTSPRINT | © Copyright Tables Cell Padding Cell Padding specifies the space between the cell wall and the cell content in pixels. <table border=5" cellpadding="10"> …..

Color Templates TALENTSPRINT | © Copyright Tables Cell Spacing <table border=5" cellspacing="10"> …. Cell Spacing Specifies the space between cells in pixels.

Color Templates TALENTSPRINT | © Copyright Tables The width attribute can be used to define the width of a table It is defined as a fixed width in pixels irrespective of window size A relative table width is specified as a percentage of the width of the viewing window. table width Example: …. Or ….

Color Templates TALENTSPRINT | © Copyright Tables Colspan and Rowspan Table cells can span across more than one column or row - COLSPAN defines number of columns across - ROWSPAN defines number of rows down Columns Rows

Color Templates TALENTSPRINT | © Copyright Tables Colspan Example

Color Templates TALENTSPRINT | © Copyright Tables Rowspan Example

Color Templates TALENTSPRINT | © Copyright Tables Rowspan and Colspan Example

Color Templates TALENTSPRINT | © Copyright HTML Navigation and Tables