SlideShare a Scribd company logo

Unit 04 PowerPoint (WebA)

Download as PPT, PDF
T
tclanton4

The document discusses creating tables in a website using an external style sheet. It covers defining table elements, creating a borderless table for a horizontal menu, linking an external style sheet to style pages, adding formatting to tables using cellspacing, cellpadding and other attributes, and validating HTML code.

Education
1 of 56
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
Unit 4 Creating Tables in a Web Site Using an External Style Sheet
Unit Objectives Define table elements Describe the steps used to plan, design, and code a table Create a borderless table for a horizontal menu bar with text links Create an external style sheet to define styles across a Web site Utilize classes to give you more control over styles Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Unit Objectives Link an external style sheet to Web pages where you want its styles applied Copy and paste HTML code to a new file Create a table with borders and insert text Alter the spacing between and within cells using the cellspacing and cellpadding attributes Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Unit Objectives Utilize inline styles to alter the style of individual elements on a Web page Add background color to rows and cells Insert a caption below a table Create headings that span rows using the rowspan attribute Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Starting Notepad++ Click the Start button on the Windows taskbar to display the Start menu Click All Programs at the bottom of the left pane on the Start menu to display the All Programs list Click Notepad++ in the All Programs list Click Notepad++ in the list to display the Notepad++ window If the Notepad++ window is not maximized, click the Maximize button on the Notepad++ title bar to maximize it Click View on the menu bar If the Word wrap command does not have a check mark next to it, click Word wrap Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Entering Initial HTML Tags to Define the Web Page Structure Enter the HTML code shown in Table 4-3. Press ENTER at the end of each line. If you make an error as you are typing, use the BACKSPACE key to delete all the characters back to and including the incorrect characters, then continue typing Position the insertion point on the blank line between the <body> and </body> tags (line 12) and press the ENTER key to position the insertion point on line 13 Compare what you typed to Figure 4–12. If you notice errors, use your mouse pointer or ARROW keys to move the insertion point to the right of each error and use the BACKSPACE key to correct the error Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Entering Initial HTML Tags to Define the Web Page Structure Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Saving an HTML File With a USB flash drive connected to one of the computer’s USB ports, click File on the Notepad++ menu bar and then click Save Type sabatinas.html in the File name text box (do not press ENTER) Click Computer in the left pane of the Save As dialog box to display a list of available drives If necessary, scroll until UDISK 2.0 (G:) or the name of your storage device is displayed in the list of available drives Open the Chapter04\ChapterFiles folder Click the Save button in the Save As dialog box to save the file on the USB flash drive in the Chapter04\ChapterFiles folder with the name sabatinas.html Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Inserting and Centering an Image With the insertion point on line 13, enter the HTML code shown in Table 4–4, pressing ENTER at the end of each line. Make sure to indent the second line of code by using the TAB key. This separates the start and end <div> tag from the <img> tag, highlighting the image insertion. Press the ENTER key twice at the end of line 15 to position the insertion point on line 17 Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Inserting and Centering an Image Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Creating a Horizontal Menu Bar with Text Links With the insertion point on line 17, enter the HTML code, as shown in Table 4–5, pressing ENTER after each line. Use the TAB key to indent the code, as shown in the table. Press the ENTER key once more after line 28 to position the insertion point on line 29 Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Adding Paragraphs of Text With the insertion point on line 29, enter the HTML code, as shown in Table 4–6, to insert the paragraphs of text, pressing the ENTER key after each line, including line 31 Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Adding Paragraphs of Text Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Saving the HTML File Click the Save icon on the Notepad++ toolbar to save the most recent version of sabatinas.html on the same storage device and in the same folder as the last time you saved it Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Viewing a Web Page In Internet Explorer, click the Address bar to select the URL on the Address bar Type g:\Chapter04\ChapterFiles\sabatinas.html or the location of your file on the Address bar of your browser and press ENTER to display the Web page Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Viewing a Web Page Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Testing Links on a Web Page With Sabatina’s home page displayed in the browser, point to the e-mail link, sabatinas@isp.com and click the link to open the default e-mail program with the address sabatinas@isp.com in the To: text box Click the Close button in the New Message window. If a dialog box asks if you want to save changes, click No With the USB flash drive in drive G, click the Salads link from the home page just created. Click back to the Home page from the Salads page. Next, click the Pizza link from the Home page. Click back to the Home page from the Pizza page. The link for the Appetizers page will not work because that Web page is not yet created; you will create it later in this chapter Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Creating an External Style Sheet If necessary, click the Notepad++ button on the taskbar to display sabatinas.html. Click File on the menu bar and then click New Enter the CSS code, as shown in Table 4–7, using the TAB key to align text, as shown With the USB drive plugged into your computer, click File on the menu bar and then click Save As. Type styles1.css in the File name text box. If necessary, navigate to the G:\Chapter04\ ChapterFiles folder. Click the Save button in the Save As dialog box to save the file as styles1.css Click the File menu, click Print on the File menu, and then click the Print button in the Print dialog box to print a hard copy of the style sheet Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Creating an External Style Sheet Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Linking to an External Style Sheet Click the sabatinas.html tab in Notepad++ to make it the active window With the sabatinas.html file open, click the end of line 8 after the > and press the ENTER key twice. Your insertion point should be positioned on line 10 Type <link rel=”stylesheet” type=”text/css” href=”styles1 .css” /> as the HTML code and then press the ENTER key Click the Save button on the Notepad++ toolbar Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Linking to an External Style Sheet Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Validating a Web Page Open Internet Explorer and navigate to the Web site validator.w3.org Click the Validate by File Upload tab Click the Browse button Locate the sabatinas.html file on your storage device and click the file name Click the Open button in the Choose File to Upload dialog box and the file name will be inserted into the File box Click the Check button Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Printing an HTML File Click the Notepad++ button on the taskbar to activate the Notepad++ window Click File on the menu bar, click the Print command, and then click the Print button to print a hard copy of the HTML code Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Printing an HTML File Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Viewing, Testing, and Printing a Web Page Click the Internet Explorer button on the Windows taskbar to activate Internet Explorer In Internet Explorer, click the Address bar to select the URL in the Address bar Type g:\Chapter04\ChapterFiles\sabatinas.html (or the specific path to your file) to display the new URL in the Address bar and then press the ENTER key Click the Salads and Pizza links to test that they work correctly Click the Print button on Internet Explorer Command bar to print the Web page Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Viewing, Testing, and Printing a Web Page Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Copying and Pasting HTML Code to a New File If necessary, click the Notepad++ button on the taskbar and click the sabatinas.html tab to make it the active window Click immediately to the left of the < in the <!DOCTYPE html tag on line 1 Drag through the </table> tag on line 30 to highlight lines 1 through 30 Press CTRL+C to copy the selected lines to the Clipboard Click File on the Notepad++ menu bar and then click New Press CTRL+V to paste the contents from the Clipboard into a new file. Press the ENTER key twice to position the insertion point on line 32 Change the words Pizza Home in the <title> on line 8 to ~ Appetizers (using the tilde ~ character) Change the word menuwordselect on line 22 to menuword Change the word menuword on line 24 to menuwordselect Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Saving an HTML File With a USB drive plugged into the computer, click File on the menu bar and then click Save As. Type appetizers.html in the File name text box If necessary, click USB (G:) in the Save in list. Double-click the Chapter04 folder and then double-click the ChapterFiles folder in the list of available folders. Click the Save button in the Save As dialog box Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Saving an HTML File Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Creating a Table with Borders and Inserting Text With the insertion point on line 32, enter the HTML code for the Appetizers table, as shown in Table 4–8, using TAB to create indents, and pressing ENTER after each line except the last line Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Creating a Table with Borders and Inserting Text Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Saving, Validating, Viewing, and Printing the Web Page In Notepad++, click the Save icon on the toolbar to save appetizers.html Click the Internet Explorer button on the taskbar Use the W3C validator service to validate the appetizers.html Web page Click the Notepad++ button to return to Notepad++ Print the appetizers.html Notepad++ file Use the Back button or Internet Explorer tabs to return to the Sabatina’s home page Click the Appetizers link on the home page to show the most recent file Click the Print button on the Command bar to print the Web page Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Saving, Validating, Viewing, and Printing the Web Page Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Testing Links on a Web Page Click the Home link to change to the Sabatina’s Pizza home page Click the Appetizers link to return to the appetizers.html Web page Click the Pizza link. (You will add a heading to the Pizza page later in the project.) Click the Salads link Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Testing Links on a Web Page Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Opening an HTML File Click the Notepad++ button on the taskbar With a USB drive plugged into your computer, click File on the menu bar and then click Open on the File menu If necessary, navigate to the Chapter04\ChapterFiles folder on the USB drive Double-click salads.html in the list of files to open the file in Notepad++ Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Opening an HTML File Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Linking to an External Style Sheet Highlight the phrase <!--Insert link statement here --> on line 10 Type <link rel=”stylesheet” type=”text/css” href=”styles1.css” /> to enter the link to the external style sheet. Do not press the ENTER key Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Adding Cellspacing and Cellpadding to a Table Click immediately to the right of the second “ (quotation mark) in the border=“5” statement on line 33 and then press the SPACEBAR Type cellpadding=”5” cellspacing=”10” as the attributes and values but do not press the ENTER key Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Adding Cellspacing and Cellpadding to a Table Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Saving, Validating, Printing, and Viewing the HTML File and Printing the Web Page With the USB drive plugged into your computer, click File on the menu bar and then click Save to save the salads.html file Click the Internet Explorer button on the taskbar to display the Sabatina’s ~ Salads page Validate the Web page using the W3C validator service Use the Back button or Internet Explorer tabs to return to the Sabatina’s ~ Salads page Click the Refresh icon on the Address bar to show the most recent file Click the Print button on the Command bar to print the Web page Click the Notepad++ button to return to Notepad++. Print the file Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Opening an HTML File Click the Notepad++ button on the taskbar With the USB drive plugged into your computer, click File on the menu bar and then click Open on the File menu If necessary, navigate to the Chapter04\ChapterFiles folder on the USB drive Double-click pizza.html in the list of files to open the file in Notepad++ Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Linking the External Style Sheet Highlight the text <!--Insert link statement here --> on line 10 Type <link rel=”stylesheet” type=”text/css” href=”styles1.css” /> to enter the link to the external style sheet. Do not press the ENTER key Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Adding a Table Caption Highlight the text <!--Line 31 – Insert caption here --> on line 35 Type <caption>Additional ingredients include mushrooms, olives, pepperoni - $2.00 per item</caption> as the tag to add the italic caption below the table Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Adding a Table Caption Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Creating the Headings that Span Rows Highlight <!--Insert first rowspan heading here --> on line 38 Press the TAB key twice and then type <th rowspan=”3”>Thin Crust and then press the ENTER key; the next line is automatically indented to the same level Type <br/>Pizza and then press the ENTER key Type </th> as the HTML code but do not press the ENTER key Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Creating the Headings that Span Rows Highlight <!--Insert second rowspan heading here --> on line 59 Press the TAB key twice and then type <th rowspan=”3”>Thick Crust and then press the ENTER key Type <br/>Pizza and then press the ENTER key Type </th> as the HTML code but do not press the ENTER key Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Creating the Headings that Span Rows Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Saving, Validating, and Printing the HTML File With the USB drive plugged into your computer, click the Save icon on the Notepad++ toolbar to save the pizza.html file Validate the HTML file using the validator.w3.org Web page Print the Notepad++ file Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Viewing and Printing the Web Page Click the Internet Explorer button on the taskbar Click the Pizza link on the menu table to display the Pizza Web page Print the Web page with rowspan attributes entered Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Viewing and Printing the Web Page Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Quitting Notepad++ and a Browser In Notepad++, click the File menu, then Close All Click the Close button on the Notepad++ title bar Click the Close button on the browser title bar. If necessary, click the Close all tabs button Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Chapter Summary Define table elements Describe the steps used to plan, design, and code a table Create a borderless table for a horizontal menu bar with text links Create an external style sheet to define styles across a Web site Utilize classes to give you more control over styles Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Unit Summary Link an external style sheet to Web pages where you want its styles applied Copy and paste HTML code to a new file Create a table with borders and insert text Alter the spacing between and within cells using the cellspacing and cellpadding attributes Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Unit Summary Utilize inline styles to alter the style of individual elements on a Web page Add background color to rows and cells Insert a caption below a table Create headings that span rows using the rowspan attribute Unit 4: Creating Tables in a Web Site Using an External Style Sheet
Unit 4 Complete Creating Tables in a Web Site Using an External Style Sheet

More Related Content

PPTX
Access chapter 1
Wayland Baptist University
 
PDF
Computer application lab file
Dr. Prashant Vats
 
DOCX
How to use microsoft word
PRINTDESK by Dan
 
DOC
Learning the Basics of Microsoft Word 2010 for Microsoft Windows Transcript
Saide OER Africa
 
PPT
Project 06
smwilson22
 
PPT
Project 03 Creating Web Pages with Links, Images, and Formatted Text
Angela Edel
 
PDF
Apa paper setup
yosra Yassora
 
PPTX
Word chapter 2
Wayland Baptist University
 
Access chapter 1
Wayland Baptist University
 
Computer application lab file
Dr. Prashant Vats
 
How to use microsoft word
PRINTDESK by Dan
 
Learning the Basics of Microsoft Word 2010 for Microsoft Windows Transcript
Saide OER Africa
 
Project 06
smwilson22
 
Project 03 Creating Web Pages with Links, Images, and Formatted Text
Angela Edel
 
Apa paper setup
yosra Yassora
 
Word chapter 2
Wayland Baptist University
 

What's hot (18)

PDF
Micro Soft Access - Creating Forms
FaHaD .H. NooR
 
DOCX
Manual for Fillable Form
Clayton Boessen
 
PDF
WritingSamplesCombined
Janet Henjum
 
PDF
Access slide show
jhaastrup1
 
PPT
Creating A Web Site with Google Sites
CyberScienceSchool
 
PPTX
Chapter.10
jdswitzer
 
PPTX
Pranavi verma-class-9-word-processing
PranaviVerma
 
PPTX
Word chapter 1
Wayland Baptist University
 
PDF
Word 2010 tutorial
Ivanelcampeon
 
PPTX
Chapter.11
jdswitzer
 
PPT
Microsoft office support and and outlook slide show
GET CONTACT
 
PPTX
Chapter.09
jdswitzer
 
PDF
Office productivity tools (part ii) (5.71 mb)
IMRAN KHAN
 
DOCX
BBA I Semester IT All assignments
Roshan Kumar
 
PPTX
Text formatting in ms word ppt
Josephclarin15
 
ODT
Open Office Writer : Lesson 03
thinkict
 
PPT
Microsoft Word Intermediate
University of Puerto Rico
 
PDF
Pks ms word unit 1_bcomcs
KALAISELVI P
 
Micro Soft Access - Creating Forms
FaHaD .H. NooR
 
Manual for Fillable Form
Clayton Boessen
 
WritingSamplesCombined
Janet Henjum
 
Access slide show
jhaastrup1
 
Creating A Web Site with Google Sites
CyberScienceSchool
 
Chapter.10
jdswitzer
 
Pranavi verma-class-9-word-processing
PranaviVerma
 
Word chapter 1
Wayland Baptist University
 
Word 2010 tutorial
Ivanelcampeon
 
Chapter.11
jdswitzer
 
Microsoft office support and and outlook slide show
GET CONTACT
 
Chapter.09
jdswitzer
 
Office productivity tools (part ii) (5.71 mb)
IMRAN KHAN
 
BBA I Semester IT All assignments
Roshan Kumar
 
Text formatting in ms word ppt
Josephclarin15
 
Open Office Writer : Lesson 03
thinkict
 
Microsoft Word Intermediate
University of Puerto Rico
 
Pks ms word unit 1_bcomcs
KALAISELVI P
 
Ad

Viewers also liked (19)

PPTX
Getting Started - The Basics
tclanton4
 
PPT
Intro to Information Systems
tclanton4
 
PPTX
Base2
tclanton4
 
PPTX
Creating a Writer Document
tclanton4
 
PPTX
Advanced Features of Writer
tclanton4
 
PPTX
Creating a Worksheet in Calc
tclanton4
 
PPTX
Formatting a Worksheet in Calc
tclanton4
 
PPT
Chapter 5 - Web Design
tclanton4
 
PPT
Chapter 4 - Web Design
tclanton4
 
PPT
Chapter 8 - Web Design
tclanton4
 
PPT
Chapter 7 - Web Design
tclanton4
 
PPT
Chapter 3 - Web Design
tclanton4
 
PPTX
Charts in Calc
tclanton4
 
PPT
Chapter 13 - Web Design
tclanton4
 
PPT
Chapter 6 - Web Design
tclanton4
 
PPT
Chapter 14 - Web Design
tclanton4
 
PPT
Chapter 10 - Web Design
tclanton4
 
PPTX
Impress
tclanton4
 
PPTX
Base1
tclanton4
 
Getting Started - The Basics
tclanton4
 
Intro to Information Systems
tclanton4
 
Base2
tclanton4
 
Creating a Writer Document
tclanton4
 
Advanced Features of Writer
tclanton4
 
Creating a Worksheet in Calc
tclanton4
 
Formatting a Worksheet in Calc
tclanton4
 
Chapter 5 - Web Design
tclanton4
 
Chapter 4 - Web Design
tclanton4
 
Chapter 8 - Web Design
tclanton4
 
Chapter 7 - Web Design
tclanton4
 
Chapter 3 - Web Design
tclanton4
 
Charts in Calc
tclanton4
 
Chapter 13 - Web Design
tclanton4
 
Chapter 6 - Web Design
tclanton4
 
Chapter 14 - Web Design
tclanton4
 
Chapter 10 - Web Design
tclanton4
 
Impress
tclanton4
 
Base1
tclanton4
 
Ad

Similar to Unit 04 PowerPoint (WebA) (20)

PPT
Ddpz2613 topic4 table
Mohamad Sahiedan
 
PPT
Ddpz2613 topic8 css
Mohamad Sahiedan
 
DOCX
ITECH2106-6106 Lab01-HTML CSS Intro and Needs Analysis.pdf.docx
christiandean12115
 
PPT
Using Mozilla Sea Monkey
Desiree Caskey
 
PPT
Ddpz2613 topic3 linking
Mohamad Sahiedan
 
PPT
M02 un12 p01
Intan Jameel
 
PPT
TID Chapter 8 Web Page Development
WanBK Leo
 
PDF
Using Stylesheets To Design A Web Site In Dreamweaver Mx 2004
brighteyes
 
PPT
Building A Website
marabeas
 
PPT
Ddpz2613 topic2 web
Mohamad Sahiedan
 
PPT
Table tags 2
cherrybear2014
 
KEY
Artdm171 Week4 Tags
Gilbert Guerrero
 
PDF
Web Design
Mr_Casey
 
DOC
Basic Web Design.doc
butest
 
PPTX
From doh to pro!
Jeremy Harder
 
PPT
Introduction to HTML, CSS, and Scripting In the world of web development, thr...
SIVASANKARANSIVAKUMA
 
PPT
Web Design - Lesson 3
Jamie Hutt
 
DOCX
HTML Lab ProjectTo create a simple web page you will need .docx
adampcarr67227
 
PPTX
Week 2 HTML lists, hyperlinks, tables, and images
Rowena LI
 
PPTX
pracc III for presentation.pptx
Hailsh
 
Ddpz2613 topic4 table
Mohamad Sahiedan
 
Ddpz2613 topic8 css
Mohamad Sahiedan
 
ITECH2106-6106 Lab01-HTML CSS Intro and Needs Analysis.pdf.docx
christiandean12115
 
Using Mozilla Sea Monkey
Desiree Caskey
 
Ddpz2613 topic3 linking
Mohamad Sahiedan
 
M02 un12 p01
Intan Jameel
 
TID Chapter 8 Web Page Development
WanBK Leo
 
Using Stylesheets To Design A Web Site In Dreamweaver Mx 2004
brighteyes
 
Building A Website
marabeas
 
Ddpz2613 topic2 web
Mohamad Sahiedan
 
Table tags 2
cherrybear2014
 
Artdm171 Week4 Tags
Gilbert Guerrero
 
Web Design
Mr_Casey
 
Basic Web Design.doc
butest
 
From doh to pro!
Jeremy Harder
 
Introduction to HTML, CSS, and Scripting In the world of web development, thr...
SIVASANKARANSIVAKUMA
 
Web Design - Lesson 3
Jamie Hutt
 
HTML Lab ProjectTo create a simple web page you will need .docx
adampcarr67227
 
Week 2 HTML lists, hyperlinks, tables, and images
Rowena LI
 
pracc III for presentation.pptx
Hailsh
 

More from tclanton4 (6)

PPT
Chapter 12 - Web Design
tclanton4
 
PPT
Chapter 11 - Web Design
tclanton4
 
PPT
Chapter 9 - Web Design
tclanton4
 
PPT
Chapter 1 - Web Design
tclanton4
 
PPTX
Project Mgt
tclanton4
 
PPTX
Formatting Features of Writer
tclanton4
 
Chapter 12 - Web Design
tclanton4
 
Chapter 11 - Web Design
tclanton4
 
Chapter 9 - Web Design
tclanton4
 
Chapter 1 - Web Design
tclanton4
 
Project Mgt
tclanton4
 
Formatting Features of Writer
tclanton4
 

Recently uploaded (20)

PDF
Paper A Mock Exam 9_ Attempt review.pdf.
SameeraNaveed2
 
PDF
Complications of Minimal Access Surgery at WLH
mohitsuren827
 
PDF
A systematic review of self-coping strategies used by university students to ...
CleeveMoralde1
 
PDF
Supply Chain Operations Speaking Notes -ICLT Program
labyankof
 
PPTX
UNIT III MENTAL HEALTH NURSING ASSESSMENT
Sonali Gupta
 
PDF
advance database management system book.pdf
hinamannan364
 
PPTX
202450812 BayCHI UCSC-SV 20250812 v17.pptx
home
 
PDF
Computing-Curriculum for Schools in Ghana
abigailanane203
 
PPTX
Tissue processing ( HISTOPATHOLOGICAL TECHNIQUE
mathiasmelwyn7
 
PPTX
Radiologic_Anatomy_of_the_Brachial_plexus [final].pptx
atiaruhi95
 
PDF
Trump Administration's workforce development strategy
Mebane Rash
 
PDF
RTP_AR_KS1_Tutor's Guide_English [FOR REPRODUCTION].pdf
RobertMentino1
 
PDF
IGGE1 Understanding the Self1234567891011
rhea22labucay
 
PDF
LNK 2025 (2).pdf MWEHEHEHEHEHEHEHEHEHEHE
NielDestora
 
PDF
RMMM.pdf make it easy to upload and study
sajedul2
 
PDF
SOIL: Factor, Horizon, Process, Classification, Degradation, Conservation
Sipra Biswas
 
PDF
Hazard Identification & Risk Assessment .pdf
estagiarioprotegesms
 
PDF
What if we spent less time fighting change, and more time building what’s rig...
Derek Wenmoth
 
PDF
1_English_Language_Set_2.pdf probationary
emailjagmeetsingh9
 
PPTX
Introduction to Building Materials
Mrunali Vasava
 
Paper A Mock Exam 9_ Attempt review.pdf.
SameeraNaveed2
 
Complications of Minimal Access Surgery at WLH
mohitsuren827
 
A systematic review of self-coping strategies used by university students to ...
CleeveMoralde1
 
Supply Chain Operations Speaking Notes -ICLT Program
labyankof
 
UNIT III MENTAL HEALTH NURSING ASSESSMENT
Sonali Gupta
 
advance database management system book.pdf
hinamannan364
 
202450812 BayCHI UCSC-SV 20250812 v17.pptx
home
 
Computing-Curriculum for Schools in Ghana
abigailanane203
 
Tissue processing ( HISTOPATHOLOGICAL TECHNIQUE
mathiasmelwyn7
 
Radiologic_Anatomy_of_the_Brachial_plexus [final].pptx
atiaruhi95
 
Trump Administration's workforce development strategy
Mebane Rash
 
RTP_AR_KS1_Tutor's Guide_English [FOR REPRODUCTION].pdf
RobertMentino1
 
IGGE1 Understanding the Self1234567891011
rhea22labucay
 
LNK 2025 (2).pdf MWEHEHEHEHEHEHEHEHEHEHE
NielDestora
 
RMMM.pdf make it easy to upload and study
sajedul2
 
SOIL: Factor, Horizon, Process, Classification, Degradation, Conservation
Sipra Biswas
 
Hazard Identification & Risk Assessment .pdf
estagiarioprotegesms
 
What if we spent less time fighting change, and more time building what’s rig...
Derek Wenmoth
 
1_English_Language_Set_2.pdf probationary
emailjagmeetsingh9
 
Introduction to Building Materials
Mrunali Vasava
 

Unit 04 PowerPoint (WebA)

  • 1. Unit 4 Creating Tables in a Web Site Using an External Style Sheet
  • 2. Unit Objectives Define table elements Describe the steps used to plan, design, and code a table Create a borderless table for a horizontal menu bar with text links Create an external style sheet to define styles across a Web site Utilize classes to give you more control over styles Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 3. Unit Objectives Link an external style sheet to Web pages where you want its styles applied Copy and paste HTML code to a new file Create a table with borders and insert text Alter the spacing between and within cells using the cellspacing and cellpadding attributes Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 4. Unit Objectives Utilize inline styles to alter the style of individual elements on a Web page Add background color to rows and cells Insert a caption below a table Create headings that span rows using the rowspan attribute Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 5. Starting Notepad++ Click the Start button on the Windows taskbar to display the Start menu Click All Programs at the bottom of the left pane on the Start menu to display the All Programs list Click Notepad++ in the All Programs list Click Notepad++ in the list to display the Notepad++ window If the Notepad++ window is not maximized, click the Maximize button on the Notepad++ title bar to maximize it Click View on the menu bar If the Word wrap command does not have a check mark next to it, click Word wrap Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 6. Entering Initial HTML Tags to Define the Web Page Structure Enter the HTML code shown in Table 4-3. Press ENTER at the end of each line. If you make an error as you are typing, use the BACKSPACE key to delete all the characters back to and including the incorrect characters, then continue typing Position the insertion point on the blank line between the <body> and </body> tags (line 12) and press the ENTER key to position the insertion point on line 13 Compare what you typed to Figure 4–12. If you notice errors, use your mouse pointer or ARROW keys to move the insertion point to the right of each error and use the BACKSPACE key to correct the error Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 7. Entering Initial HTML Tags to Define the Web Page Structure Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 8. Saving an HTML File With a USB flash drive connected to one of the computer’s USB ports, click File on the Notepad++ menu bar and then click Save Type sabatinas.html in the File name text box (do not press ENTER) Click Computer in the left pane of the Save As dialog box to display a list of available drives If necessary, scroll until UDISK 2.0 (G:) or the name of your storage device is displayed in the list of available drives Open the Chapter04\ChapterFiles folder Click the Save button in the Save As dialog box to save the file on the USB flash drive in the Chapter04\ChapterFiles folder with the name sabatinas.html Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 9. Inserting and Centering an Image With the insertion point on line 13, enter the HTML code shown in Table 4–4, pressing ENTER at the end of each line. Make sure to indent the second line of code by using the TAB key. This separates the start and end <div> tag from the <img> tag, highlighting the image insertion. Press the ENTER key twice at the end of line 15 to position the insertion point on line 17 Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 10. Inserting and Centering an Image Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 11. Creating a Horizontal Menu Bar with Text Links With the insertion point on line 17, enter the HTML code, as shown in Table 4–5, pressing ENTER after each line. Use the TAB key to indent the code, as shown in the table. Press the ENTER key once more after line 28 to position the insertion point on line 29 Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 12. Adding Paragraphs of Text With the insertion point on line 29, enter the HTML code, as shown in Table 4–6, to insert the paragraphs of text, pressing the ENTER key after each line, including line 31 Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 13. Adding Paragraphs of Text Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 14. Saving the HTML File Click the Save icon on the Notepad++ toolbar to save the most recent version of sabatinas.html on the same storage device and in the same folder as the last time you saved it Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 15. Viewing a Web Page In Internet Explorer, click the Address bar to select the URL on the Address bar Type g:\Chapter04\ChapterFiles\sabatinas.html or the location of your file on the Address bar of your browser and press ENTER to display the Web page Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 16. Viewing a Web Page Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 17. Testing Links on a Web Page With Sabatina’s home page displayed in the browser, point to the e-mail link, sabatinas@isp.com and click the link to open the default e-mail program with the address sabatinas@isp.com in the To: text box Click the Close button in the New Message window. If a dialog box asks if you want to save changes, click No With the USB flash drive in drive G, click the Salads link from the home page just created. Click back to the Home page from the Salads page. Next, click the Pizza link from the Home page. Click back to the Home page from the Pizza page. The link for the Appetizers page will not work because that Web page is not yet created; you will create it later in this chapter Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 18. Creating an External Style Sheet If necessary, click the Notepad++ button on the taskbar to display sabatinas.html. Click File on the menu bar and then click New Enter the CSS code, as shown in Table 4–7, using the TAB key to align text, as shown With the USB drive plugged into your computer, click File on the menu bar and then click Save As. Type styles1.css in the File name text box. If necessary, navigate to the G:\Chapter04\ ChapterFiles folder. Click the Save button in the Save As dialog box to save the file as styles1.css Click the File menu, click Print on the File menu, and then click the Print button in the Print dialog box to print a hard copy of the style sheet Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 19. Creating an External Style Sheet Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 20. Linking to an External Style Sheet Click the sabatinas.html tab in Notepad++ to make it the active window With the sabatinas.html file open, click the end of line 8 after the > and press the ENTER key twice. Your insertion point should be positioned on line 10 Type <link rel=”stylesheet” type=”text/css” href=”styles1 .css” /> as the HTML code and then press the ENTER key Click the Save button on the Notepad++ toolbar Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 21. Linking to an External Style Sheet Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 22. Validating a Web Page Open Internet Explorer and navigate to the Web site validator.w3.org Click the Validate by File Upload tab Click the Browse button Locate the sabatinas.html file on your storage device and click the file name Click the Open button in the Choose File to Upload dialog box and the file name will be inserted into the File box Click the Check button Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 23. Printing an HTML File Click the Notepad++ button on the taskbar to activate the Notepad++ window Click File on the menu bar, click the Print command, and then click the Print button to print a hard copy of the HTML code Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 24. Printing an HTML File Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 25. Viewing, Testing, and Printing a Web Page Click the Internet Explorer button on the Windows taskbar to activate Internet Explorer In Internet Explorer, click the Address bar to select the URL in the Address bar Type g:\Chapter04\ChapterFiles\sabatinas.html (or the specific path to your file) to display the new URL in the Address bar and then press the ENTER key Click the Salads and Pizza links to test that they work correctly Click the Print button on Internet Explorer Command bar to print the Web page Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 26. Viewing, Testing, and Printing a Web Page Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 27. Copying and Pasting HTML Code to a New File If necessary, click the Notepad++ button on the taskbar and click the sabatinas.html tab to make it the active window Click immediately to the left of the < in the <!DOCTYPE html tag on line 1 Drag through the </table> tag on line 30 to highlight lines 1 through 30 Press CTRL+C to copy the selected lines to the Clipboard Click File on the Notepad++ menu bar and then click New Press CTRL+V to paste the contents from the Clipboard into a new file. Press the ENTER key twice to position the insertion point on line 32 Change the words Pizza Home in the <title> on line 8 to ~ Appetizers (using the tilde ~ character) Change the word menuwordselect on line 22 to menuword Change the word menuword on line 24 to menuwordselect Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 28. Saving an HTML File With a USB drive plugged into the computer, click File on the menu bar and then click Save As. Type appetizers.html in the File name text box If necessary, click USB (G:) in the Save in list. Double-click the Chapter04 folder and then double-click the ChapterFiles folder in the list of available folders. Click the Save button in the Save As dialog box Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 29. Saving an HTML File Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 30. Creating a Table with Borders and Inserting Text With the insertion point on line 32, enter the HTML code for the Appetizers table, as shown in Table 4–8, using TAB to create indents, and pressing ENTER after each line except the last line Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 31. Creating a Table with Borders and Inserting Text Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 32. Saving, Validating, Viewing, and Printing the Web Page In Notepad++, click the Save icon on the toolbar to save appetizers.html Click the Internet Explorer button on the taskbar Use the W3C validator service to validate the appetizers.html Web page Click the Notepad++ button to return to Notepad++ Print the appetizers.html Notepad++ file Use the Back button or Internet Explorer tabs to return to the Sabatina’s home page Click the Appetizers link on the home page to show the most recent file Click the Print button on the Command bar to print the Web page Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 33. Saving, Validating, Viewing, and Printing the Web Page Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 34. Testing Links on a Web Page Click the Home link to change to the Sabatina’s Pizza home page Click the Appetizers link to return to the appetizers.html Web page Click the Pizza link. (You will add a heading to the Pizza page later in the project.) Click the Salads link Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 35. Testing Links on a Web Page Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 36. Opening an HTML File Click the Notepad++ button on the taskbar With a USB drive plugged into your computer, click File on the menu bar and then click Open on the File menu If necessary, navigate to the Chapter04\ChapterFiles folder on the USB drive Double-click salads.html in the list of files to open the file in Notepad++ Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 37. Opening an HTML File Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 38. Linking to an External Style Sheet Highlight the phrase <!--Insert link statement here --> on line 10 Type <link rel=”stylesheet” type=”text/css” href=”styles1.css” /> to enter the link to the external style sheet. Do not press the ENTER key Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 39. Adding Cellspacing and Cellpadding to a Table Click immediately to the right of the second “ (quotation mark) in the border=“5” statement on line 33 and then press the SPACEBAR Type cellpadding=”5” cellspacing=”10” as the attributes and values but do not press the ENTER key Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 40. Adding Cellspacing and Cellpadding to a Table Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 41. Saving, Validating, Printing, and Viewing the HTML File and Printing the Web Page With the USB drive plugged into your computer, click File on the menu bar and then click Save to save the salads.html file Click the Internet Explorer button on the taskbar to display the Sabatina’s ~ Salads page Validate the Web page using the W3C validator service Use the Back button or Internet Explorer tabs to return to the Sabatina’s ~ Salads page Click the Refresh icon on the Address bar to show the most recent file Click the Print button on the Command bar to print the Web page Click the Notepad++ button to return to Notepad++. Print the file Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 42. Opening an HTML File Click the Notepad++ button on the taskbar With the USB drive plugged into your computer, click File on the menu bar and then click Open on the File menu If necessary, navigate to the Chapter04\ChapterFiles folder on the USB drive Double-click pizza.html in the list of files to open the file in Notepad++ Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 43. Linking the External Style Sheet Highlight the text <!--Insert link statement here --> on line 10 Type <link rel=”stylesheet” type=”text/css” href=”styles1.css” /> to enter the link to the external style sheet. Do not press the ENTER key Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 44. Adding a Table Caption Highlight the text <!--Line 31 – Insert caption here --> on line 35 Type <caption>Additional ingredients include mushrooms, olives, pepperoni - $2.00 per item</caption> as the tag to add the italic caption below the table Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 45. Adding a Table Caption Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 46. Creating the Headings that Span Rows Highlight <!--Insert first rowspan heading here --> on line 38 Press the TAB key twice and then type <th rowspan=”3”>Thin Crust and then press the ENTER key; the next line is automatically indented to the same level Type <br/>Pizza and then press the ENTER key Type </th> as the HTML code but do not press the ENTER key Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 47. Creating the Headings that Span Rows Highlight <!--Insert second rowspan heading here --> on line 59 Press the TAB key twice and then type <th rowspan=”3”>Thick Crust and then press the ENTER key Type <br/>Pizza and then press the ENTER key Type </th> as the HTML code but do not press the ENTER key Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 48. Creating the Headings that Span Rows Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 49. Saving, Validating, and Printing the HTML File With the USB drive plugged into your computer, click the Save icon on the Notepad++ toolbar to save the pizza.html file Validate the HTML file using the validator.w3.org Web page Print the Notepad++ file Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 50. Viewing and Printing the Web Page Click the Internet Explorer button on the taskbar Click the Pizza link on the menu table to display the Pizza Web page Print the Web page with rowspan attributes entered Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 51. Viewing and Printing the Web Page Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 52. Quitting Notepad++ and a Browser In Notepad++, click the File menu, then Close All Click the Close button on the Notepad++ title bar Click the Close button on the browser title bar. If necessary, click the Close all tabs button Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 53. Chapter Summary Define table elements Describe the steps used to plan, design, and code a table Create a borderless table for a horizontal menu bar with text links Create an external style sheet to define styles across a Web site Utilize classes to give you more control over styles Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 54. Unit Summary Link an external style sheet to Web pages where you want its styles applied Copy and paste HTML code to a new file Create a table with borders and insert text Alter the spacing between and within cells using the cellspacing and cellpadding attributes Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 55. Unit Summary Utilize inline styles to alter the style of individual elements on a Web page Add background color to rows and cells Insert a caption below a table Create headings that span rows using the rowspan attribute Unit 4: Creating Tables in a Web Site Using an External Style Sheet
  • 56. Unit 4 Complete Creating Tables in a Web Site Using an External Style Sheet