LESSON 3. Coding Tables Continued
|
|
- Hugo Harrison
- 5 years ago
- Views:
Transcription
1 LESSON 3 Coding Tables Continued
2 Lesson Learning Targets I can create a Web page table that displays text and / or images. I can create a Web page table that serves as a menu bar.
3 Creating the Secondary (New Releases) Web Page
4 Starting Notepad Open Notepad++ Save in Folders: HTML and JS Unit 3 Tables In Class Project Save As: newreleases.html
5 Enter in HTML Skeleton <!DOCTYPE> <html> <head> <title>bell Video New Releases</title> </head> <body> </body> </html>
6 Add Skeleton
7 Add Bell Video Image to Top! Inside the body tags immediately add the following code. <body> <img src = bellvideologo.jpg" width="596 height="93 /> </body>
8 Creating a Horizontal Menu Bar with Text Links Insert a Table with 1 Row and 7 Columns (Each Word Gets a Column and Each I Gets a Column)
9 Thinking Through the First Table Table Requirements(color coded with next slide): 1) Borderless 2) 1 Row all cells in row are centered 3) 7 Columns 4) Want it to take up 60% of the width of the browser
10 Creating a Horizontal Menu Bar with Text Links After the <img/> tag, type the following: <br /> <table border="0" cols="7 width="60%"> <tr align="center"> </tr> </table>
11
12 Row Requirements: Thinking Through Row 1 1) 7 Columns each with word or 2) All Data Cells 3) Each have a varying width % of the table
13 Add Cell 1 and Cell 2 After the <tr> tag, type the following: <tr align="center"> <td width="20%"><a href = bellvideohome.html">home</a></td> <td width="1%"> </td>
14 Add Cells, 3, 4, 5, 6 (continue) <td width="25%"><a =href="newreleases.html">new Releases</a></td> <td width="1%"> </td> <td width="15%"><a href="actor.html">actor</a></td> <td width="1%"> </td> <td width = 15% ><a href= type.html >Type</a></td>
15
16 What you Should See So Far
17 Creating a Table with Borders
18 Table Requirements: Thinking Through the Second Table 1) Border = 5 pixels 2) 5 Rows 1 heading, 4 data 3) 3 Columns 4) Want it to take up 80% of the width of the browser
19 Creating Table Outline After the horizontal menu table just added, create a new table and the first row of headings: <br /> <table cols="3" border="5" width="80%"> <tr> </tr> <tr> </tr>
20 Creating Table Outline (continued) <tr> </tr> <tr> </tr> <tr> </tr> </table>
21
22 Row 1 Requirements: Thinking Through Row 1 1) 3 Heading Cells will default to center alignment **will use <th> tags** 2) Background color = blue
23 Edit Row 1 Edit the code for the first row <tr bgcolor="blue"> <th><font color="white size="+1"> Title</font></th> <th><font color="white size="+1"> Actor(s)</font></th> <th><font color="white size="+1"> Description</font></th> </tr>
24 Thinking Through Row 2 Row 2, 3, 4 Requirements: 1) 3 data Cells **will use <td> tags** **NOTE when define the width of the cells (percentage wise%) in one row applies to all rows**
25 Edit Row 2 Edit second row of text: <tr> <td width="25%">good Night, <br />and Good Luck</td> <td width="30%">david Strathairn <br />George Clooney</td> <td width="45%">nostalgic black and white used to show period authenticity.</td> </tr>
26 Edit Row 3 Edit third row of text: <tr> </tr> <td>walk the Line</td> <td>joaquin Phoenix<br /> Reese Witherspoon</td> <td>the music is compelling; the lives are riveting.</td>
27 Edit Row 4 Edit the fourth row of text: <tr> </tr> <td>the Constant Gardener</td> <td>rachel Weisz <br />Ralph Fiennes</td> <td>flashback structure enhances this mystery as it circles around a conspiracy.</td>
28 Edit Row 5 Create the fifth row of text and end the table: <tr> </tr> <td>cinderella Man</td> <td>paul Giamatti <br />Russell Crowe</td> <td>a movie where a good man prevails despite odds against him.</td>
29 Special Note When Designing tables As many rows of text can continue to be added as you need You ONLY need to specify and know number of columns ahead of time because this MUST be specified in the <table> tag
30
31 What you Should Now See!
32 Testing Links in a Web Page DO They Work? Click the Home link in the horizontal menu bar on the New Releases Web page Click the New Releases link in the vertical menu bar on the home page to return to the New Releases Web page Click the Type link in the horizontal menu bar on the New Releases Web page Click the Actor link in the horizontal menu bar on the Type Web page
33 Project 4: Creating Tables in a Web Site Testing Links in a Web Page 33
34 Displaying Rules within a Table
35 Displaying Rules In Table Rules Attribute used to create horizontal or vertical lines within a table (around the individual cells) Insert inside the <table> tag rules= cols shows vertical lines rules= rows shows horizontal lines rules= none shows no lines
36 Displaying Rules In Table Displaying Vertical Rules Add the following into the <table> tag <br /> <table cols= 3" border="5 rules= cols width="80%"> <tr bgcolor="blue"> **Now Refresh your browser what do you see?**
37 Displaying Rules In Table Displaying Vertical Rules
38 Displaying Rules In Table Displaying Horizontal Rules Change the following in the <table> tag <br /> <table cols= 3" border="5 rules= rows width="80%"> <tr bgcolor="blue"> **Now Refresh your browser what do you see?**
39 Displaying Rules In Table Displaying Horizontal Rules
40 Displaying Rules In Table Displaying No Rules Change the following in the <table> tag <br /> <table cols= 3" border="5 rules= none width="80%"> <tr bgcolor="blue"> **Now Refresh your browser what do you see?**
41 Displaying Rules In Table
42 Displaying Rules In Table Special Note Be Default a table will display all rules If you want something different you must specify
43 Practice Worksheet 3C
44
45 LESSON 4 Coding Tables Continued (Cell spacing, padding, captions, and spanning)
46 Lesson Learning Targets I can format a Web page table with cell padding and cell spacing. I can format a Web page table using cell spanning to combine cells across a row or column.
47 Adding Cellspacing, Cellpadding, and a Caption
48 Cell Formatting Cell Formatting By default, the size of each data cell fits the minimum size for the inserted text
49 Cell Formatting Cell Padding : cellpadding Defines the number of pixels of space within a cell of a table (white space inside the cell) Cell Spacing : cellspacing Defines the number of pixels of space between cells in a table (width of the cell borders)
50 Compare Can Make Tables Look Nicer
51 Opening an HTML File Open actor.html file in NotePad (downloaded from my classroom website and saved with the other files
52 BEFORE Cellspacing, Cell padding, and table Caption
53 AFTER Cellspacing and Cell padding, and Caption
54 Adding Cellspacing and Cellpadding to a Table Find the table immediately after the horizontal menu; make the following changes: <table border="5" cellspacing= 2 cellpadding= 5 cols="4" width="70%">... <tr bgcolor="blue"> <th><font color="white" size=+1>actor</font></td>
55 55 Adding a Table Caption A caption helps clarify the purpose of the table Immediately before the end of the table, find the text <!--Insert caption here --> Replace the comment with: <caption align= bottom ><em>listing of movies by actor</em></caption> **note this tag is nested INSIDE the table tag**
56 56 Table Caption Start Tag Purpose End Tag <caption> - Place inside the table tags - Will place a caption around table - Used to provide clarification to table - Can use align attribute to choose location around table (top, bottom) </caption>
57 Table after Cellspacing and Cell padding, and Caption
58 Project 4: Creating Tables in a Web Site Saving and Printing the HTML File and Viewing and Printing the Web Page 58
59 Spanning Rows and Columns
60 Spanning Rows and Columns Cell Spanning Merging several cells into a single cell An attribute of the <th> or <td> tags **This is where planning becomes extremely IMPORTANT**
61 Spanning Rows and Columns Column Spanning Attribute: colspan Defines the number of columns spanned by a cell Row Spanning Attribute : rowspan Defines the number of rows spanned by a cell
62 Table without Cell Spanning
63 Table with Cell Spanning Adds to the visual Appearance of a Table!!
64 Practicing Spanning Write the basic code to create the cell spanning on the table on the next slide (we ll add in attributes later)
65
66 Opening an HTML File Open type.html (should be downloaded from my classroom website)
67 We Want to Span 3 columns in the first Row Together The first cell in the first row spans three columns Add colspan= 3 as an attribute to this cell We will then only program ONE CELL for this row
68 Creating the First Heading That Spans Columns Find the end of the table with the horizontal menu bar; insert the follow (in yellow): <br /> <table border="5" cellspacing="2 cellpadding="5" cols="2" width="80%"> <tr> </tr> <th colspan="3" bgcolor="blue"> </th> <font color="white" face= Chaucer size="+2">movies by Type</font>
69 Span 2 Rows In row 2 first cell with rowspan= 3 In row 3&4 the first cell will already be accounted for (in row 2) so when we program we start with cell 2 In row 5 first cell with rowspan= 3 In row 6&7 the first cell will already be accounted for (in row 5) so when we program we start with cell 2
70 Creating the First Heading That Spans Columns After the movies by Type Row add the following </tr> <tr> <th rowspan="3" width="20%" bgcolor="black"> <font color="#ffffff size="+1">drama</font> </th>
71 Span 2 Rows Notice after Drama in Row 2 Title-Actor(s) spans 2 columns so needs colspan= 2
72 Add next 2 cells in row 2 After the Drama Cell complete the row with the following </tr> <th colspan="2" bgcolor="gainsboro"> </th> <font color="blue" size="+1">title - Actor(s)</font>
73 Add the next two rows Remember- on the next two rows the first cell is already taken up by cell spanning <tr> </tr> <tr> </tr> <td>good Night, and Good Luck</td> <td>david Strathairn</td> <td>the Constant Gardener</td> <td>rachel Weisz<br />Ralph Fiennes</td>
74
75 What you should see!
76 Add Comedy RowSpan After the 3 rd row (drama movies) Insert the following to span Comedy over two rows <tr> <th rowspan="3" width="20%" bgcolor="black"> </th> <font color="#ffffff" size="+1">comedy </font>
77 Creating the Second Heading That Spans Columns Complete row 5 Title Actor(s) spans 2 columns <th colspan="2" bgcolor="gainsboro"> </th> </tr> <font color="blue" size="+1">title - Actor(s)</font>
78 Add the next two rows Remember- on the next two rows the first cell is already taken up by cell spanning <tr> </tr> <tr> </tr> <td>the Wedding Crashers</td> <td>owen Wilson</td> <td>napoleon Dynamite</td> <td>jon Heder</td>
79
80 What you Should Now See!
81 Project 4: Creating Tables in a Web Site 81
82 Homework Worksheet 3D
83
84 DAY 6, 7, 8 Project 3A Work Days!
85 DAY 9 & 10 Review and Test!
Chapter 4 Notes. Creating Tables in a Website
Chapter 4 Notes Creating Tables in a Website Project for Chapter 4 Statewide Realty Web Site Chapter Objectives Define table elements Describe the steps used to plan, design, and code a table Create a
More informationTutorial 5 Working with Tables and Columns. HTML and CSS 6 TH EDITION
Tutorial 5 Working with Tables and Columns HTML and CSS 6 TH EDITION Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple rows and columns
More informationTables *Note: Nothing in Volcano!*
Tables *Note: Nothing in Volcano!* 016 1 Learning Objectives After this lesson you will be able to Design a web page table with rows and columns of text in a grid display Write the HTML for integrated
More informationIMY 110 Theme 7 HTML Tables
IMY 110 Theme 7 HTML Tables 1. HTML Tables 1.1. Tables The HTML table model allows authors to arrange data into rows and columns of cells, just as in word processing software such as Microsoft Word. It
More informationINFS 2150 / 7150 Intro to Web Development / HTML Programming
XP Objectives INFS 2150 / 7150 Intro to Web Development / HTML Programming Designing a Web Page with Tables Create a text table Create a table using the , , and tags Create table headers
More informationCOMSC-030 Web Site Development- Part 1. Part-Time Instructor: Joenil Mistal
COMSC-030 Web Site Development- Part 1 Part-Time Instructor: Joenil Mistal Chapter 9 9 Working with Tables Are you looking for a method to organize data on a page? Need a way to control our page layout?
More informationWeb Design and Application Development
Yarmouk University Providing Fundamental ICT Skills for Syrian Refugees (PFISR) Web Design and Application Development Dr. Abdel-Karim Al-Tamimi altamimi@yu.edu.jo Lecture 04 A. Al-Tamimi 1 Lecture Overview
More informationc122sep2214.notebook September 22, 2014
This is using the border attribute next we will look at doing the same thing with CSS. 1 Validating the page we just saw. 2 This is a warning that recommends I use CSS. 3 This caused a warning. 4 Now I
More informationHtml basics Course Outline
Html basics Course Outline Description Learn the essential skills you will need to create your web pages with HTML. Topics include: adding text any hyperlinks, images and backgrounds, lists, tables, and
More informationChapter 4 Creating Tables in a Web Site Using an External Style Sheet
Chapter 4 Creating Tables in a Web Site Using an External Style Sheet MULTIPLE RESPONSE Modified Multiple Choice 1. Attributes are set relative to the elements in a table. a. line c. row b. column d. cell
More informationHTML Exercise 24 Tables
HTML Exercise 24 Tables Tables allow you to put things in columns and rows. Without tables, you can only have one long list of text and graphics (check Exercise 20). If you have ever made a table in a
More informationExercise #2: your Profile
TABLE EXERCISES #1 and #2 Directions: Create a folder called Table Exercises. Save eachh exercise in that folder using the names Exercise 1.html, Exercise 2.html, etc. unless otherwise specified. Exercise
More informationLESSON LEARNING TARGETS
DAY 3 Frames LESSON LEARNING TARGETS I can describe the attributes of the tag. I can write code to create frames for displaying Web pages with headings, menus, and other content using the
More informationIndian Institute of Technology Kharagpur. HTML Part III. Prof. Indranil Sen Gupta Dept. of Computer Science & Engg. I.I.T.
Indian Institute of Technology Kharagpur HTML Part III Prof. Indranil Sen Gupta Dept. of Computer Science & Engg. I.I.T. Kharagpur, INDIA Lecture 15: HTML Part III On completion, the student will be able
More informationChapter 7 Tables and Layout
Chapter 7 Tables and Layout Presented by Thomas Powell Slides adopted from HTML & XHTML: The Complete Reference, 4th Edition 2003 Thomas A. Powell We want Layout! Design requirements: pixel level layout,
More informationChapter 7 Tables and Layout
Chapter 7 Tables and Layout Presented by Thomas Powell Slides adopted from HTML & XHTML: The Complete Reference, 4th Edition 2003 Thomas A. Powell We want Layout! Design requirements: pixel level layout,
More informationShatin Tsung Tsin Secondary School S.3 Computer and Technology Web Page Design by HTML Introduction to HTML
Shatin Tsung Tsin Secondary School S.3 Computer and Technology Web Page Design by HTML Introduction to HTML HTML (Hyper Text Markup Language) is the set of markup symbols (tags or codes) (e.g. , ,
More informationCSC 101: PreLab Reading for Lab #4 More HTML (some of this reading on Tables and Images are based on previous writings of Prof William Turkett)
CSC 101: PreLab Reading for Lab #4 More HTML (some of this reading on Tables and Images are based on previous writings of Prof William Turkett) Purpose: The purpose of this pre-lab is to provide you with
More informationWeb Design and Development ACS Chapter 12. Using Tables 11/23/2017 1
Web Design and Development ACS-1809 Chapter 12 Using Tables 11/23/2017 1 Using Tables Understand the concept and uses of tables in web pages Create a basic table structure Format tables within web pages
More informationTHE ASIAN SCHOOL. Class-10. ch8. A. Check the Right Answer (1*9)
THE ASIAN SCHOOL Class-10 ch8 A. Check the Right Answer (1*9) 1. Which attribute of the tag is used to create named anchors in a web document? c. NAME 2. Which attribute of the tag is used to add
More informationIntroduction to Computer Science (I1100) Internet. Chapter 7
Internet Chapter 7 606 HTML 607 HTML Hypertext Markup Language (HTML) is a language for creating web pages. A web page is made up of two parts: the head and the body. The head is the first part of a web
More informationCSC 121 Computers and Scientific Thinking
CSC 121 Computers and Scientific Thinking Fall 2005 HTML and Web Pages 1 HTML & Web Pages recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language
More informationHyperText Markup Language/Tables
HyperText Markup Language/Tables 1 HyperText Markup Language/Tables Tables are used for presenting tabular data and abused for laying out pages. They can be inserted anywhere on the page, even within other
More informationDreamweaver CS3 Concepts and Techniques
Dreamweaver CS3 Concepts and Techniques Chapter 3 Tables and Page Layout Part 1 Other pages will be inserted in the website Hierarchical structure shown in page DW206 Chapter 3: Tables and Page Layout
More informationWeb Development & Design Foundations with HTML5
1 Web Development & Design Foundations with HTML5 CHAPTER 8 TABLES 2 Learning Outcomes In this chapter, you will learn how to... Create a basic table with the table, table row, table header, and table
More informationHTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space.
HTML Summary Structure All of the following are containers. Structure Contains the entire web page. Contains information
More informationCreating Tables in a Web Site Using an External Style Sheet
HTML 4 Creating Tables in a Web Site Using an External Style Sheet Objectives You will have mastered the material in this chapter when you can: Define table elements Describe the steps used to plan, design,
More informationHTML What is HTML Hyper Text Markup Language is a computer based language used to create WebPages.
vinsri76@yahoo.com +965-69300304 HTML What is HTML Hyper Text Markup Language is a computer based language used to create WebPages. Name Two text Editor which are used to create HTML page. They are: Notepad
More informationHTML, XHTML, and CSS 8/21/2011. Chapter Objectives. Chapter 4. Chapter Objectives. Chapter Objectives
HTML, XHTML, and CSS Sixth Edition Chapter 4 Creating Tables in a Web Site Using an External Style Sheet Chapter Objectives Define table elements Describe the steps used to plan, design, and code a table
More informationFinal Examination Semester 1 / Year 2012
Final Examination Semester 1 / Year 2012 COURSE : INTERNET APPLICATION COURSE CODE : CSIS1013 TIME : 2 1/2 HOURS DEPARTMENT : COMPUTER SCIENCE LECTURER : TEE CHENG SIEW Student s ID : Batch No. : Notes
More informationLecture 08. Tables in HTML. Mr. Mubashir Ali Lecturer (Dept. of Computer Science)
Lecture 08 Tables in HTML Mr. Mubashir Ali Lecturer (Dept. of dr.mubashirali1@gmail.com 1 Summary of the previous lecture Adding images to web page Using images as links Image map Adding audio and video
More informationrecall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML)
HTML & Web Pages recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML) HTML specifies formatting within a page using tags in its
More informationHTML Tags <A></A> <A HREF="http://www.cnn.com"> CNN </A> HREF
HTML Tags Tag Either HREF or NAME is mandatory Definition and Attributes The A tag is used for links and anchors. The tags go on either side of the link like this: the link
More informationHTML WORKSHEET Explain HTML HEAD Tag Title Tag BASEFONT Tag
vinsri76@yahoo.com HTML WORKSHEET Explain HTML HEAD Tag Title Tag BASEFONT Tag 1. 2. Text Editor 1. 2. Graphic Editor Name & Explain Attribute of Body Tags 1. 2. 1. 2. 3. 4. Name & Explain Attribute of
More informationChapter 5. Introduction to XHTML: Part 2
Chapter 5. Introduction to XHTML: Part 2 Tables Attributes of the table element: border: width of the table border in pixels (0 makes all lines invisible) align: horizontal alignment (left, center, or
More informationHTML & XHTML Tag Quick Reference
HTML & XHTML Tag Quick Reference This reference notes some of the most commonly used HTML and XHTML tags. It is not, nor is it intended to be, a comprehensive list of available tags. Details regarding
More informationTables & Lists. Organized Data. R. Scott Granneman. Jans Carton
Tables & Lists Organized Data R. Scott Granneman Jans Carton 1.3 2014 R. Scott Granneman Last updated 2015-11-04 You are free to use this work, with certain restrictions. For full licensing information,
More informationWeb Design 101. What is HTML? HTML Tags. Web Browsers. <!DOCTYPE html> <html> <body> <h1>my First Heading</h1> <p>my first paragraph.
What is HTML? Web Design 101 HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language à A markup language is a set of markup tags The tags describe
More informationCOMS 359: Interactive Media
COMS 359: Interactive Media Agenda Review Web Design Preview Review Tables Create html spreadsheets Page Layout Review Table Tags Numerous Attributes = border,
More informationCOMPUTER APPLICATIONS IN BUSINESS FYBMS SEM II
CHAPTER 1: HTML 1. What is HTML? Define its structure. a. HTML [Hypertext Markup Language] is the main markup language for creating web pages and other information that can be displayed in a web browser.
More informationCertified HTML5 Developer VS-1029
VS-1029 Certified HTML5 Developer Certification Code VS-1029 HTML5 Developer Certification enables candidates to develop websites and web based applications which are having an increased demand in the
More informationHTML TAG SUMMARY HTML REFERENCE 18 TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES MOST TAGS
MOST TAGS CLASS Divides tags into groups for applying styles 202 ID Identifies a specific tag 201 STYLE Applies a style locally 200 TITLE Adds tool tips to elements 181 Identifies the HTML version
More informationAdvanced HTML Scripting WebGUI Users Conference
Advanced HTML Scripting 2004 WebGUI Users Conference XHTML where did that x come from? XHTML =? Extensible Hypertext Markup Language Combination of HTML and XML More strict than HTML Things to Remember
More informationFinal Exam Study Guide
Final Exam Study Guide 1. What does HTML stand for? 2. Which file extension is used with standard web pages? a..doc b..xhtml c..txt d..html 3. Which is not part of an XHTML element? a. Anchor b. Start
More informationA Balanced Introduction to Computer Science, 3/E
A Balanced Introduction to Computer Science, 3/E David Reed, Creighton University 2011 Pearson Prentice Hall ISBN 978-0-13-216675-1 Chapter 2 HTML and Web Pages 1 HTML & Web Pages recall: a Web page is
More informationSECTION C GRADE 12 EXAMINATION GUIDELINES
SACAI SECTION C GRADE 12 EXAMINATION GUIDELINES COMPUTER APPLICATIONS TECHNOLOGY 2016 Examination guidelines for Computer Application Technology INTRODUCTION The Curriculum and Assessment Policy Statement
More informationINFS 2150 Introduction to Web Development
INFS 2150 Introduction to Web Development 6. Tables and Columns Objectives Explore the structure of a web table Create table heading and data cells Apply CSS styles to a table Create cells that span multiple
More informationINFS 2150 Introduction to Web Development
INFS 2150 Introduction to Web Development 6. Tables and Columns Objectives Explore the structure of a web table Create table heading and data cells Apply CSS styles to a table Create cells that span multiple
More informationBasic HTML. Lecture 14. Robb T. Koether. Hampden-Sydney College. Wed, Feb 20, 2013
Basic HTML Lecture 14 Robb T. Koether Hampden-Sydney College Wed, Feb 20, 2013 Robb T. Koether (Hampden-Sydney College) Basic HTML Wed, Feb 20, 2013 1 / 36 1 HTML 2 HTML File Structure 3 HTML Elements
More informationTable-Based Web Pages
Table-Based Web Pages Web Authoring and Design Benjamin Kenwright Outline What do we mean by Table-Based Web Sites? Review Table Tags/Structure Tips/Debugging/Applications Summary Review/Discussion Submissions/Quizzes/GitHub
More informationThis booklet is knowledge of. a web page. of a web page find what you. you want to. SiteSell offers. Introduction
From www.basic computerskills.com/ Thank you for downloading this freee Booklet. This booklet is intended for people, who want to start out with their own web site or just want to get the basic knowledge
More informationPage Layout Using Tables
This section describes various options for page layout using tables. Page Layout Using Tables Introduction HTML was originally designed to layout basic office documents such as memos and business reports,
More informationGIMP WEB 2.0 MENUS WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR CREATING AN HTML LIST
GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR Hover effect: CREATING AN HTML LIST Most horizontal or vertical navigation bars begin with a simple
More informationSummary 4/5. (contains info about the html)
Summary Tag Info Version Attributes Comment 4/5
More informationA HTML document has two sections 1) HEAD section and 2) BODY section A HTML file is saved with.html or.htm extension
HTML Website is a collection of web pages on a particular topic, or of a organization, individual, etc. It is stored on a computer on Internet called Web Server, WWW stands for World Wide Web, also called
More informationBasic HTML. Lecture 14. Robb T. Koether. Hampden-Sydney College. Wed, Feb 20, 2013
Basic HTML Lecture 14 Robb T. Koether Hampden-Sydney College Wed, Feb 20, 2013 Robb T. Koether (Hampden-Sydney College) Basic HTML Wed, Feb 20, 2013 1 / 26 1 HTML 2 HTML File Structure 3 HTML Elements
More informationIntro to html. --- define every element, attribute, and entity along with the rules for their use
Notes September 14, 2010 Intro to html replace with your document's title
More informationCHAPTER 2 MARKUP LANGUAGES: XHTML 1.0
WEB TECHNOLOGIES A COMPUTER SCIENCE PERSPECTIVE CHAPTER 2 MARKUP LANGUAGES: XHTML 1.0 Modified by Ahmed Sallam Based on original slides by Jeffrey C. Jackson reserved. 0-13-185603-0 HTML HELLO WORLD! Document
More informationAs we design and build out our HTML pages, there are some basics that we may follow for each page, site, and application.
Extra notes - Client-side Design and Development Dr Nick Hayward HTML - Basics A brief introduction to some of the basics of HTML. Contents Intro element add some metadata define a base address
More informationCSC 101: Lab #2 HTML and the WWW Manual and Report Lab Date: Tuesday, 2/2/2010 Report Due Date: Friday, 2/5/2010 3:00pm
CSC 101: Lab #2 HTML and the WWW Manual and Report Lab Date: Tuesday, 2/2/2010 Report Due Date: Friday, 2/5/2010 3:00pm Lab Report: Answer the report questions in this document as you encounter them. For
More informationTable of Contents. MySource Matrix Content Types Manual
Table of Contents Chapter 1 Introduction... 5 Chapter 2 WYSIWYG Editor... 6 Replace Text... 6 Select Snippet Keyword... 7 Insert Table and Table Properties... 8 Editing the Table...10 Editing a Cell...12
More informationChapter 9 Table Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D
Chapter 9 Table Basics Key Concepts Copyright 2013 Terry Ann Morris, Ed.D 1 Learning Outcomes Describe the recommended use of a table on a web page Configure a basic table with the table, table row, table
More informationHyper Text Markup Language HTML: A Tutorial
Hyper Text Markup Language HTML: A Tutorial Ahmed Othman Eltahawey December 21, 2016 The World Wide Web (WWW) is an information space where documents and other web resources are located. Web is identified
More informationHTTP and HTML. We will use HTML as a frontend to our webapplications, therefore a basic knowledge of HTML is required, especially in forms.
HTTP and HTML We will use HTML as a frontend to our webapplications, therefore a basic knowledge of HTML is required, especially in forms. HTTP and HTML 28 January 2008 1 When the browser and the server
More informationBy Ryan Stevenson. Guidebook #2 HTML
By Ryan Stevenson Guidebook #2 HTML Table of Contents 1. HTML Terminology & Links 2. HTML Image Tags 3. HTML Lists 4. Text Styling 5. Inline & Block Elements 6. HTML Tables 7. HTML Forms HTML Terminology
More informationHow to Make a Homepage using
How to Make a Homepage using 3 HTML In this chapter, we will learn the following to World Class Web standards: Using a Storyboard to Create a Homepage Starting a HTML Homepage Adding Page Properties to
More informationCreating a Web Page with HTML
CT1501 DEVELOPMENT OF INTERNET APPLICATION Creating a Web Page with HTML Prepared By: Huda Alsuwailem Reviewed by: Rehab Alfallaj www.faculty.ksu.edu.sa/rehab-alfallaj ralfallaj@ksu.edu.sa Tables
More informationIntroduction to Computer Science (I1100) Internet. Chapter 7
Internet Chapter 7 606 HTML 607 HTML Hypertext Markup Language (HTML) is a language for creating web pages. A web page is made up of two parts: the head and the body. The head is the first part of a web
More informationCreating Web Pages Using HTML
Creating Web Pages Using HTML HTML Commands Commands are called tags Each tag is surrounded by Some tags need ending tags containing / Tags are not case sensitive, but for future compatibility, use
More informationChapter 1 Getting Started with HTML 5 1. Chapter 2 Introduction to New Elements in HTML 5 21
Table of Contents Chapter 1 Getting Started with HTML 5 1 Introduction to HTML 5... 2 New API... 2 New Structure... 3 New Markup Elements and Attributes... 3 New Form Elements and Attributes... 4 Geolocation...
More informationMathematics. Computer Applications. New Jersey Quality Single Accountability Continuum (NJQSAC) Department: Course Title.
Textbook(s): Date: Content Unit 1 MS PowerPoint September 1-11 Name the parts of the PowerPoint Window. How do you use a Design Template? What types of toolbars are there in PowerPoint? How do you insert
More informationIndex. CSS directive, # (octothorpe), intrapage links, 26
Holzschlag_.qxd 3/30/05 9:23 AM Page 299 Symbols @import CSS directive, 114-115 # (octothorpe), intrapage links, 26 A a element, 23, 163, 228 abbr element, 228 absolute keywords for font sizing, 144 absolute
More informationIntroducing Web Tables
TABLE AND FRAMESET Introducing Web Tables A table can be displayed on a Web page either in a text or graphical format. A text table: Contains only text, evenly spaced on the Web page in rows and columns
More informationLab 4 CSS CISC1600, Spring 2012
Lab 4 CSS CISC1600, Spring 2012 Part 1 Introduction 1.1 Cascading Style Sheets or CSS files provide a way to control the look and feel of your web page that is more convenient, more flexible and more comprehensive
More informationIntermediate HTML Using Dreamweaver
Intermediate HTML Using Dreamweaver Technical Support Services Office of Information Technology, West Virginia University OIT Help Desk: (304) 293-4444, oithelp@mail.wvu.edu http://oit.wvu.edu/training/classmat/
More informationAdvanced HTML 5.1 INTRODUCTION 5.2 OBJECTIVES
5 Advanced HTML 5.1 INTRODUCTION An effective way to organize web documents, visually, and also logically, by dividing the page into different parts is the necessity of the website today. In each part
More informationCOPYRIGHTED MATERIAL. Contents. Chapter 1: Creating Structured Documents 1
59313ftoc.qxd:WroxPro 3/22/08 2:31 PM Page xi Introduction xxiii Chapter 1: Creating Structured Documents 1 A Web of Structured Documents 1 Introducing XHTML 2 Core Elements and Attributes 9 The
More informationITNP43: HTML Lecture 3
ITNP43: HTML Lecture 3 Niederst, Chapts 10, 11, 13 (3rd edn) 1 HTML So Far... Structural tags , , Text formatting , etc Element attributes e.g. Inline images
More informationCertified HTML Designer VS-1027
VS-1027 Certification Code VS-1027 Certified HTML Designer Certified HTML Designer HTML Designer Certification allows organizations to easily develop website and other web based applications which are
More informationICT IGCSE Practical Revision Presentation Web Authoring
21.1 Web Development Layers 21.2 Create a Web Page Chapter 21: 21.3 Use Stylesheets 21.4 Test and Publish a Website Web Development Layers Presentation Layer Content layer: Behaviour layer Chapter 21:
More informationCIS 228 (Fall, 2012) Exam 2, 11/20/12
CIS 228 (Fall, 2012) Exam 2, 11/20/12 Name (sign) Name (print) email Question 1 2 3 4 5 6 7 8 9 10 TOTAL Score CIS 228, exam 2 1 11/20/12 True or false: Question 1 Unordered lists can contain ordered sub-lists.
More informationCITS1231 Web Technologies. HTML Tables and Page Design Issues
CITS1231 Web Technologies HTML Tables and Page Design Issues Lecture Content Defining Tables Creating Hyperlinks Formatting Text Meta-data Good HTML practices 2 Creating a Newspaper-Style Layout 3 Table
More informationAdding Audio and Video Content to Web pages. Audio Content - Add some Audio content to your page. Audio & Video 1
Audio & Video 1 Adding Audio and Video Content to Web pages Create a new page in your Notepad++ and name it 6AV: audio & Video
More information11. HTML5 and Future Web Application
11. HTML5 and Future Web Application 1. Where to learn? http://www.w3schools.com/html/html5_intro.asp 2. Where to start: http://www.w3schools.com/html/html_intro.asp 3. easy to start with an example code
More information1. Please, please, please look at the style sheets job aid that I sent to you some time ago in conjunction with this document.
1. Please, please, please look at the style sheets job aid that I sent to you some time ago in conjunction with this document. 2. W3Schools has a lovely html tutorial here (it s worth the time): http://www.w3schools.com/html/default.asp
More informationAdding CSS to your HTML
Adding CSS to your HTML Lecture 3 CGS 3066 Fall 2016 September 27, 2016 Making your document pretty CSS is used to add presentation to the HTML document. We have seen 3 ways of adding CSS. In this lecture,
More informationCOMP519: Web Programming Lecture 4: HTML (Part 3)
COMP519: Web Programming Lecture 4: HTML (Part 3) Ullrich Hustadt Department of Computer Science School of Electrical Engineering, Electronics, and Computer Science University of Liverpool Contents 1 HTML
More information1 Creating a simple HTML page
cis3.5, spring 2009, lab I.3 / prof sklar. 1 Creating a simple HTML page 1.1 Overview For this assignment, you will create an HTML file in a text editor. on a PC, this is Notepad (not Wordpad) on a Mac,
More informationThe City School. Prep Section. ICTech. 2 nd Term. PAF Chapter. Class 7. Worksheets for Intervention Classes
The City School PAF Chapter Prep Section ICTech Class 7 2 nd Term Worksheets for Intervention Classes Name: Topic: Scratch Date: Q.1: Label the diagram 1 2 3 4 5 6 7 12 8 9 11 10 1. 2. 3. 4. 5. 6. 7. 8.
More informationThe City School. Prep Section. ICTech. 2 nd Term. PAF Chapter. Class 8. Worksheets for Intervention Classes
The City School PAF Chapter Prep Section ICTech Class 8 2 nd Term Worksheets for Intervention Classes Name: Topic: Flowchart Date: Q. Write the name and description of the following symbol. Symbol Name
More informationCIS 228 (Spring, 2012) Final, 5/17/12
CIS 228 (Spring, 2012) Final, 5/17/12 Name (sign) Name (print) email I would prefer to fail than to receive a grade of or lower for this class. Question 1 2 3 4 5 6 7 8 9 A B C D E TOTAL Score CIS 228,
More informationUNIVERSITY OF CAMBRIDGE INTERNATIONAL EXAMINATIONS International General Certificate of Secondary Education MARK SCHEME for the May/June 2011 question paper for the guidance of teachers 0417 INFORMATION
More informationBasic HTML Lecture 14
Basic HTML Lecture 14 Robb T. Koether Hampden-Sydney College Fri, Feb 17, 2012 Robb T. Koether (Hampden-Sydney College) Basic HTMLLecture 14 Fri, Feb 17, 2012 1 / 25 1 HTML 2 HTML File Structure 3 Headings
More informationChapter 11: Going All Out with FrontPage
Chapter 11: Going All Out with FrontPage Creating a Product Page Easy Web Design project, Chapter 11 Most store sites need at least one product page. On the Notebooks Web site, the Products page is divided
More informationCalendar Project. Project Brief. Part I: A Date to Remember. Assignments are evaluated for understanding
HTML and CSS Building HTML Tables and Introducing HTML5 Calendar Project HTML tables have a storied history on the Web. Championed as a Web design layout tool in the 1990s, they are now chiefly used for
More informationDeccansoft Software Services
Deccansoft Software Services (A Microsoft Learning Partner) HTML and CSS COURSE SYLLABUS Module 1: Web Programming Introduction In this module you will learn basic introduction to web development. Module
More informationepromo Guidelines DUE DATES NOT ALLOWED PLAIN TEXT VERSION
epromo Guidelines HTML Maximum width 700px (length = N/A) Image resolution should be 72dpi Maximum total file size, including all images = 200KB Only use inline CSS, no stylesheets Use tables, rather than
More informationBasic CSS Lecture 17
Basic CSS Lecture 17 Robb T. Koether Hampden-Sydney College Wed, Feb 21, 2018 Robb T. Koether (Hampden-Sydney College) Basic CSSLecture 17 Wed, Feb 21, 2018 1 / 22 1 CSS 2 Background Styles 3 Text Styles
More informationTitle: Jan 29 11:03 AM (1 of 23) Note that I have now added color and some alignment to the middle and to the right on this example.
Title: Jan 29 11:03 AM (1 of 23) Note that I have now added color and some alignment to the middle and to the right on this example. Sorry about these half rectangle shapes a Smartboard issue today. To
More information