1 HTML/CSS Tutorial. 2 Definitions WWW -- a software infrastructure layered on top of the Internet HTTP -- HyperText Transport Protocol, layered on top.

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

Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 6: HTML Tables.

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

Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.

Basic HTML Trystan Upstill Comp3400 Lecture 06/03/2001.

INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.

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.

Tutorial 4: Designing a Web Page with Tables

XP 1 New Perspectives on Creating Web Pages with HTML Tutorial 4: Designing a Web Page with Tables.

XP 1 Designing a Web Page with Tables Tutorial 4 Creating a News Page.

Creating a Web Page with Tables. Objectives Create a text table with preformatted text Create the basic structure of a graphical table Organize table.

Introducing Web Tables

XP Creating Web Pages with HTML Using Tables. XP Objectives Create a text table Create a table using the,, and tags Create table headers and captions.

Computer Science 1611 Internet & Web Creating Webpages with Style Hypertext and the HTML Markup Language (continued)

Using HTML Tables.

Basic HTML UCR Webmasters Support Group Derk Adams.

HTML Code. What we will cover Basic HTML Body Font Images Hyperlinks Tables Frames.

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.

Images and Tables. Displaying Image Attributes: SRC= " mypic.gif " – Name of the picture file SRC= " pic/mygif.jpg " – Name of file found in pic directory.

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 Tables and Forms Creating Web Pages with HTML CIS 133 Web Programming Concepts 1.

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.

Lesson 6. Links in HTML Computer Science Welcome to Virtual University in Pakistanhttp://

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

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

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.

Bayu Priyambadha, S.Kom. for long documents, you can even have links to other locations in that same document  … where ident is a variable for identifying.

CS105 Introduction to Computer Concepts HTML

Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction.

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Fluency with Information Technology Third Edition by Lawrence Snyder Chapter.

Internet Skills An Introduction to HTML Alan Noble Room 504 Tel: (44562 internal)

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

Chapter 4: Hypertext Markup Language Primer TECH Prof. Jeff Cheng.

Understanding HTML Code

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

Basic HTML Workshop By: Preeda Chunjongkolkul (Pete) Systems Librarian/Webmaster

1.NET Web Forms HTML Introduction © 2002 by Jerry Post.

>> 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.

Getting Started with HTML Please use speaker notes for additional information!

CNIT 132 – Week 7 HTML - Tables. Tables on the World Wide Web A table can be displayed on a Web page either in a text or graphical format. A text table:

CPT 123 Internet Skills Class Notes Publishing to the Web Session B.

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

Designing a Web Page with Tables. A text table: contains only text, evenly spaced on the Web page in rows and columns uses only standard word processing.

XHTML1-1 Extensible HyperText Markup Language (XHTML) Part 2 Xingquan (Hill) Zhu

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

Introduction HTML (Hypertext Markup Language) is used to create document on the World Wide Web. HTML is not a programming language, it is a markup language.

1 HTML/CSS Tutorial Alfred C. Weaver. 2 Definitions WWW -- a software infrastructure layered on top of the Internet HTTP -- HyperText Transport Protocol,

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

TABLES 1. In this chapter you will learn that tables have many uses in HTML. Objectives: Upon completing this section, you should be able to: 1. Insert.

TABLES 1. In this chapter you will learn that tables have many uses in HTML. Objectives: Upon completing this section, you should be able to: 1. Insert.

Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION.

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.

Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Project 5: Working with Tables Kelly L.

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.

CSE 409 – Advanced Internet Technology 1 DISCUSSION OF BASIC HTML TAGS.

©SoftMoore ConsultingSlide 1 Introduction to HTML: Block-Level Elements.

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

1 R3 R1 R5 R4 R6 R2 B B A A Looking at the Code Under the View menu Select Source.

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.

Designing a Web Page with Tables

LAB Work 02 MBA 61062: E-Commerce

Introduction to HTML.

Using HTML Tables SWBAT: - create tables using HTML

Web Design and Development

Lesson 5: HTML Tables.

Presentation transcript:

1 HTML/CSS Tutorial

2 Definitions WWW -- a software infrastructure layered on top of the Internet HTTP -- HyperText Transport Protocol, layered on top of TCP HTTPS -- secure HTTP using encryption HTML -- HyperText Markup Language, version 4.01 is current

3 HTML Page Format Qi’s web! Hello World

4 BODY Element Deprecated attributes (but still used) BACKGROUND=“Sunset.jpg” (can be tiled) BGCOLOR=color TEXT=color LINK=color (unvisited links) VLINK=color (visited links) ALINK=color (when selected)

5 Headings text -- largest of the six text text -- smallest of the six ALIGN="position" --left (default), center or right

6 Headings Document Headings Samples of the six heading types: Level-1 (H1) Level-2 (H2) Level-3 (H3) Level-4 (H4) Level-5 (H5) Level-6 (H6)

7 Paragraph defines a paragraph Add ALIGN="position" (left, center, right) Multiple 's do not create blank lines Use for blank line Fully-specified text uses and But is optional

8 Here is some text Centered text Right-justified text

9 Special Characters CharacterUse << >> && "" Space

10 Colors Values for BGCOLOR and COLOR many are predefined (red, blue, green,...) all colors can be specified as a six character hexadecimal value: RRGGBB FF0000 – red – gray – dark green FFFF00 – yellow

11 Fonts This is the text of line one Line two contains this text <FONT COLOR="blue" SIZE="6" FACE="Courier" The third line has this additional text Note: is now deprecated in favor of CSS.

12 Hyperlinks Welcome to Computer Science at the University of Virginia.

13 Images SRC is required WIDTH, HEIGHT may be in units of pixels or percentage of page or frame WIDTH="357" HEIGHT="50%" Images scale to fit the space allowed

14 Align=positionImage/Text Placement LeftImage on left edge; text flows to right of image RightImage on right edge; text flows to left TopImage is left; words align with top of image BottomImage is left; words align with bottom of image MiddleWords align with middle of image Images

15 Images This is a very cute dolphin on the left! You can see text wrap around it

16 ALIGN="left"

17 ALIGN="right"

18 ALIGN=“bottom"

19 Tables table tag optional table title table row table column header table data element

20 Tables Table Caption Heading1 Heading2 Row1 Col1 Data Row1 Col2 Data Row2 Col1 Data Row2 Col2 Data Row3 Col1 Data Row3 Col2 Data

21 Table Row Attributes Valid for the table row: ALIGN -- left, center, right VALIGN -- top, middle, bottom BGCOLOR -- background color One Two Three Four Five Six

22 Table Cell Attributes Valid for the table cell: colspan -- how many columns this cell occupies rowspan – how many rows this cell occupies a b c