Developing a web site
Jiacheng Mai
dc17_focuson.pptxFocus On
Web Development
Discovering Computers Enhanced Edition ©2017
Tools, Apps, Devices, and the Impact of Technology
1
Objectives Overview
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
See Page FO 1
for Detailed Objectives
‹#›
2
Discuss tools for creating a website, such as text editors, code editors, and content management systems, and when to use each
Explain the uses of HTML5, CSS, and JavaScript technologies when creating websites
Discuss concepts related to web development, including static and dynamic content, relative and absolut references, HTML tags and attributes, and embedded and inline styles
Explain how to view a webpage’s source code after displaying the page in a browser
Objectives Overview
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
See Page FO 1
for Detailed Objectives
‹#›
3
Explain the unique role of the index.html page in a website
Use HTML tags to add a title, headings, paragraphs, images, links, ordered and unordered lists, and videos to a webpage
Use CSS to specify fonts, colors, and styles for text and background images or colors for webpages
Upload a website to a web server using an FTP program
Use JavaScript to display the current date and time on a webpage
Tools for Creating a Website
Text editors
Similar to a word processing program, but lacks most text formatting features
Operating systems typically include a text editor
A code editor is a type of text editor that contains additional features to help web developers write code
Page FO 2
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Tools for Creating a Website
Page FO 2
Figure 1
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Tools for Creating a Website
Content Management Systems
Enables and manages the publishing, modification, organization, and access of various forms of documents and other files on a network or the web
Web developer creates a theme, and one or more website content administrators enters the content
Page FO 3
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Tools for Creating a Website
Page FO 4
Figure 2
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Website Technologies
Hypertext Markup Language (HTML) uses a set of codes called tags to format documents for display in a browser
A complementary technology called cascading style sheets (CSS) contains specifications for the fonts, colors, layout, and placement of these HTML elements on a webpage
JavaScript is a programming language for creating programs that a browser can run to generate content for a website
Page FO 4
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Website Technologies
Page FO 5
Figure 3
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Website Technologies
Responsive webpages automatically adjust the size of their content to display appropriately relative to the size of the screen of the device on which it is displayed
Page FO 5
Figure 4
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Structure of a Webpage
A webpage’s source code contains text marked up with HTML tags that instruct a browser how to display that content
Page FO 6
Figure 5
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Structure of a Webpage
The World Wide Web Consortium (W3C) oversees the specification of HTML Standards
The W3C provides a free, online HTML5 validator application to ensure that a webpage’s HTML tags follow the specifications, or rules, for HTML5
Page FO 7
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Structure of a Webpage
Page FO 7
Figure 6
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Creating the index.html File
Run the text editor of your choice
Navigate to and open the template.html file
If necessary, enable the word wrap feature so that you can view all the webpage text without scrolling horizontally
Save the file using the file name, index.html. Do not exit the text editor
Page FO 9
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Creating the index.html File
Page FO 9
Figure 8
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Copying the Starter Text from a Source File and Pasting It in the index.html File
Open the startertext.txt file
Select all the text in the startertext.txt file
Copy the text
Close the startertext.txt file
Display the text editor window containing the index.html file
Position the insertion point on blank line after the line that says, <!—Page content begins here -->
Paste the text
Save the changes to the index.html file
Pages FO 10 – FO 11
Figure 11
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Copying the Starter Text from a Source File and Pasting It in the index.html File
Page FO 11
Figure 11
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Adding the Webpage Title
Select the text, Page Title, that appears between the <title> and </title> tags
Type Mark's Web Development Page as the title. Replace the name, Mark, with your first name
Pages FO 11 – FO 12
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Adding the Webpage Title
Page FO 12
Figure 13
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Headings
Headings indicate the different sections of a webpage. HTML supports six levels of headings, which are identified by the following tags: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>
Page FO 12
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Headings
Page FO 12
Figure 14
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Identifying the Headings in the index.html File
Position the insertion point at the beginning of the line that reads, Web Development
Type <h1> to identify where the heading begins
Position the insertion point at the end of the line of text that reads, Web Development
Type </h1> to identify where the heading ends. Although the browser disregards spacing, you may type blank spaces to indent this tag so it lines up with its opening <h1> tag
Page FO 13
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Identifying the Headings in the index.html File
Page FO 13
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Identifying the Headings in the index.html File
Position the insertion point at the beginning the line that reads, HTML5
Type <h2> to identify where the heading begins
Position the insertion point at the end of the line of text that reads, HTML5
Type </h2> to identify where the heading ends. To increase readability, you may type spaces to indent this tag so it lines up with its opening <h2> tag
Page FO 13
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Identifying the Headings in the index.html File
Page FO 13
Figure 16
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Identifying the Headings in the index.html File
Repeat the previous steps to identify the lines that read, CSS and JavaScript, as <h2> headings, and indent each line by four spaces
Save the changes to the index.html file
Page FO 14
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Identifying the Headings in the index.html File
Page FO 14
Figure 17
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Viewing the index.html Webpage in a Browser
Minimize the text editor window showing the HTML code for the index.html file
If necessary, navigate to the location of the index.html file
Double-click the index.html file to open it in a browser
When you are finished viewing the webpage in the browser, minimize the browser window and redisplay the text editor containing the index.html file
Pages FO 14 – FO 15
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Viewing the index.html Webpage in a Browser
Page FO 15
Figure 19
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Paragraphs
The <p> and </p> tags are used to identify the beginning and ending of Paragraphs
If you have several paragraphs of text on your webpage, these tags will inform the browser to insert additional line spacing above and below the paragraph so that the text is easier to read when displayed in the browser
The browser ignores line breaks and line spacing in the HTML file, so it is important to properly define the paragraphs using the <p> and </p> tags
Page FO 15
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Identifying the Paragraphs in the index.html File
Position the insertion point at the beginning of the paragraph that begins with, Three technologies form the foundation….
Type <p> to indicate where the paragraph begins
Position the insertion point at the end of the first paragraph
Type </p> to indicate the end of the paragraph. Although spacing does not matter to the browser, you may type spaces to indent this tag so it lines up with its opening <p> tag
Page FO 16
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Identifying the Paragraphs in the index.html File
Page FO 16
Figure 20
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Identifying the Paragraphs in the index.html File
For the remaining paragraphs in the index.html file, type <p> at the beginning of each paragraph and type </p> at the end of each paragraph. To increase readability, you may type spaces to indent this tag so that it lines up with its opening <p> tag
Save the changes to the index.html file
Refresh or reload the webpage in the browser window to verify the changes are displayed properly
Page FO 16
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Identifying the Paragraphs in the index.html File
Page FO 16
Figure 21
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Images
Images can be either photos or graphics
Images always are stored as separate files, and references to the images appear in the HTML code using the <img> tag
Common attributes for the <img> tag describe the location of an image file, alternate text for the image, and a style that indicates how to position the image
Page FO 17
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Inserting Images in the index.html File
Locate the <h2>HTML5</h2> heading in the file. Position the insertion point before the first <p> tag that follows this heading and then press the ENTER key to insert a new line
Type <img src="images/html5_image.png" alt="HTML5 Image" style="float:left"> to insert a reference to the html5_image.png file in the images folder, set the alternate text to HTML5 Image, and style the image so that it is aligned to the left of the text under the HTML5 heading
Page FO 18
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Inserting Images in the index.html File
Page FO 18
Figure 22
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Inserting Images in the index.html File
Locate the <h2>CSS</h2> heading in the file. Position the insertion point before the first <p> tag that follows this heading and then press the ENTER key to insert a new line
Type <img src="images/css_image.png" alt="CSS Image" style="float:right"> to insert a reference to the css_image.png file in the images folder, set the alternate text to CSS Image, and style the image so that it is aligned to the right of the text under the CSS heading
Page FO 19
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Inserting Images in the index.html File
Locate the <h2>JavaScript</h2> heading in the file. Position the insertion point before the first <p> tag that follows this heading and then press the ENTER key to insert a new line
Type <img src="images/js_image.png" alt="JavaScript Image" style="float:left"> to insert a reference to the js_image.png file in the images folder, set the alternate text to JavaScript Image, and align the image to the left of the text under the JavaScript heading
Save the changes to the index.html file
Page FO 19
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Inserting Images in the index.html File
Page FO 19
Figure 23
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Inserting Images in the index.html File
Refresh or reload the webpage in the browser window to verify the changes are displayed properly. If necessary, scroll to display the three images
Page FO 19
Figure 24
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Links
A link, or hyperlink, can be text or an image in a webpage that a user clicks to navigate to another webpage, download a file, or perform another action, such as running an email app and addressing an email message
Page FO 20
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Inserting a Link with an Absolute Reference
In the second paragraph beginning, HTML5 specifies the structure, position the insertion point immediately before the H in HTML5
Type <a href="http://www.w3.org/html/logo" target="_blank"> to specify the link destination and that the resulting webpage should open in a new, blank window
Position the insertion point after HTML5 and then type </a> to indicate the end of the link
Page FO 21
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Inserting a Link with an Absolute Reference
Page FO 21
Figure 25
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Inserting a Link with an Absolute Reference
In the same paragraph, position the insertion point immediately before CSS and type <a href="http://www.w3.org/Style/Examples/011/firstcss" target="_blank"> to specify the link destination and that the resulting webpage should open in a new, blank window
Position the insertion point after CSS and then type </a> to indicate the end of the link
Save the changes to the index.html file
Refresh or reload the webpage in the browser window to verify the changes are displayed properly
Page FO 21
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Inserting a Link with an Absolute Reference
In the same paragraph, position the insertion point immediately before JavaScript and type <a href="http://javascript.com" target="_blank"> to specify the link destination and that the resulting webpage should open in a new, blank window
Position the insertion point after JavaScript and then type </a> to indicate the end of the link
Save the changes to the index.html file
Refresh or reload the webpage in the browser window to verify the changes are displayed properly
Page FO 21
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Inserting a Link with an Absolute Reference
Page FO 21
Figure 26
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Creating the video.html File
Open the template.html file in a text editor.
Save the file with the file name, video.html.
Between the <title> and </title> tags, select the existing text and then type Web Development to replace the text
Save the changes to the video.html file. Do not close the file
Page FO 22
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Inserting a Link with a Relative Reference
Display the index.html file
Position the insertion point immediately before the W in the paragraph beginning, Watch a video
Type <a href="video.html"> to indicate the beginning of the link that will point to video.html, which is in the same folder as index.html
Position the insertion point after the word, video, in the same sentence and then type </a> to indicate the end of the link
Save the changes to the index.html file
Refresh or reload the webpage in the browser window to verify the changes are displayed properly
Page FO 22
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Inserting a Link with a Relative Reference
Page FO 22
Figure 27
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Unordered and Ordered Lists
Page FO 23
Figure 28
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Adding an Ordered List
The items in this ordered list will include the three links for HTML5, CSS, and JavaScript. To change the first paragraph into an ordered list, change the first <p> to <ol> and the corresponding </p> to </ol>
Position the insertion point before the <a> tag for the HTML5 link, press the ENTER key, press the SPACEBAR two times to create an indent, and then type <li> to indicate the beginning of a list item, and then press the ENTER key
Position the insertion point immediately after the semicolon in the HTML5 sentence, press the ENTER key, press the SPACEBAR until the insertion point lines up with the opening <li> tag, and then type </li> to indicate the end of the first list item. Adjust the line spacing and indentation as necessary
Press the ENTER key so that the next list item will begin on a new line in the file
Page FO 23
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Adding an Ordered List
Page FO 23
Figure 29
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Adding an Ordered List
Insert the remaining list items, typing the <li> and </li> tags for the CSS and JavaScript sentences
Adjust the line spacing and indentation
Save the changes to the index.html file
Refresh or reload the webpage in the browser window to verify the changes are displayed properly
Page FO 24
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Adding an Ordered List
Page FO 24
Figure 30
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Applying Styles with CSS
Although it is possible to customize these elements of webpages using HTML, CSS makes it easier to specify the appearance of similar elements in the same webpage or same website
Embedded styles, which define styles in the <head> section of the index.html document, apply to the entire webpage on which they are defined
Page FO 24
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Applying Styles with CSS
Page FO 25
Figure 31
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Adding CSS to the index.html File
Position the insertion point at the end of the </title> tag and then press the ENTER key
Type the text from the previous slide and in Figure 31. Make sure you pay attention to the spacing and indentation to maximize readability
Save the changes to the webpage
Refresh or reload the webpage in the browser window to verify the changes are displayed properly
Page FO 26
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Adding CSS to the index.html File
Page FO 26
Figure 32
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Adding the fancy Style to the index.html File
Position the insertion point immediately before the word, current, in the first paragraph below the HTML5 heading
Type <span class="fancy"> to indicate where you want to begin applying the fancy style
Position the insertion point immediately after the word, HTML, in the same sentence
Type </span> to indicate where you want to stop applying the fancy style
Page FO 26
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Adding the fancy Style to the index.html File
Page FO 26
Figure 33
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Adding the fancy Style to the index.html File
Position the insertion point immediately before the word, Additional, in the second paragraph below the HTML5 heading
Type <span class="fancy"> to indicate where you want to begin applying the fancy style
Position the insertion point immediately after the word, features, in the same sentence
Type </span> to indicate where you want to stop applying the fancy style
Save the changes to the index.html file
Refresh or reload the webpage in the browser window to verify the changes are displayed properly
Page FO 27
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Adding the fancy Style to the index.html File
Page FO 27
Figure 34
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
JavaScript
JavaScript is code that can be added to HTML documents to enhance the webpage by adding interactivity or dynamic content
Page FO 27
Figure 35
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Using JavaScript to Add the Current Date and Time
Position the insertion point after the </style> tag in the <head> section and then press the ENTER key two times
Type the code shown in Figure 35a to enter the JavaScript code that retrieves the current date and time. Be sure to apply the same spacing, indentation, and use of uppercase and lowercase letters as shown in the figure
Position the insertion point immediately after the y in the <body> tag. Press the SPACEBAR one time and then type onload=showDateAndTime() to specify that you want to run the JavaScript code when the webpage loads
Page FO 28
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Using JavaScript to Add the Current Date and Time
Page FO 28
Figure 36
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Using JavaScript to Add the Current Date and Time
Position the insertion point immediately after the last </p> tag in the index.html file and then press the ENTER key two times
Type the code shown in Figure 35b to specify where to display the current date
Save the changes to the index.html file
Refresh or reload the webpage in the browser window to verify the changes are displayed properly
Refresh or reload the page again to verify that the JavaScript updates the date and time that is displayed
Page FO 28
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Using JavaScript to Add the Current Date and Time
Page FO 28
Figure 37
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Adding a YouTube Video to a Webpage
When you locate a video on that you want to include on a webpage, YouTube provides HTML code you can use to add the video to the webpage
Page FO 29
Figure 38
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Embedding a YouTube Video in the video.html Webpage
Open a new browser tab and navigate to youtube.com
Use the search box on the youtube.com webpage to locate a video about web development
Locate the embed code. Hint: click the Share link and then click the Embed link
Select the embed code in its entirety and then copy it to the clipboard
Page FO 29
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Embedding a YouTube Video in the video.html Webpage
Display the text editor containing the code for the video.html webpage
Position the insertion point on a blank line immediately following the line that reads, <!--Page content begins here -->
Paste the contents of the clipboard
Page FO 29
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Embedding a YouTube Video in the video.html Webpage
Page FO 29
Figure 39
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Adding a Link Back to the index.html Webpage
Position the insertion point on the blank line after the code pasted in from YouTube, immediately above the </html> tag, and then press the ENTER key
Type <br> to add a line break after the code to display the video
Press the ENTER key two times and then type <a href="index.html">Home</a> to add a link back to the website’s home page referenced in index.html
Page FO 30
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Adding a Link Back to the index.html Webpage
Page FO 30
Figure 40
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Adding a Background Style to the video.html Webpage
When choosing a background image for a webpage, be sure to choose one that does not detract from the webpage content
Background images create a pattern behind a webpage’s content
Page FO 30
Figure 41
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Adding a Background Style to the video.html Webpage
Position the insertion point immediately after the </title> tag and then press the ENTER key
Type the code in Figure 41. Be sure to apply the same line spacing and indenting as shown in the figure
Save the changes to the video.html file
Page FO 31
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Adding a Background Style to the video.html Webpage
Page FO 31
Figure 42
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Exiting the Text Editor and Previewing the Webpages
Close the video.html file in the text editor. If necessary, save the changes to the file
Close the index.html file in the text editor. If necessary, save the changes to the file
Redisplay the index.html file in the browser window. Click the Reload or Refresh button to make sure you are viewing the most current version of the webpage
Page FO 31
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Exiting the Text Editor and Previewing the Webpages
Page FO 31
Figure 43
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Exiting the Text Editor and Previewing the Webpages
Verify the webpage you are viewing looks the same as Figure 43. The headings and paragraphs should be formatted, the page should have a light blue background color, two phrases should be formatted with the fancy style, and the three images should have loaded
Click the HTML5 link to make sure it navigates to the proper destination. Then, return to the browser tab or window displaying the index.html webpage
Page FO 32
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Exiting the Text Editor and Previewing the Webpages
Click the CSS link to make sure it navigates to the proper destination. Then, return to the browser tab or window displaying the index.html webpage
Click the JavaScript link to make sure it navigates to the proper destination. Then, return to the browser tab or window displaying the index.html webpage
Click the ‘Watch a video’ link to display the video.html webpage
Page FO 32
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Exiting the Text Editor and Previewing the Webpages
Page FO 32
Figure 44
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Exiting the Text Editor and Previewing the Webpages
Click the play button in the video player to play the embedded video
When you have finished watching the video, click the Home link at the bottom of the webpage to return to the index.html webpage
Close all browser windows
Page FO 32
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Publishing a Website Online
Type the host name (the name of the web server) and the user name and password for the account, or set up a profile containing this information using an FTP application
Click the connect button to connect to the server
Page FO 33
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Publishing a Website Online
Page FO 33
Figure 45
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Publishing a Website Online
In the local site section of the FTP application, navigate to the website folder containing the HTML, images, and other files for the website.
In the remote site section of the FTP application, you should see the contents of your account on the web server. No files should appear if you have not yet uploaded any
Select the index.html and video.html files and the images folder from the local websites section
Drag the selected items to the remote website section, or select the upload option to upload these files to the web server
Page FO 34
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Publishing a Website Online
Page FO 34
Figure 46
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Viewing a Website Online
Open a new browser or browser tab.
In the address bar, type the absolute address of the website hosted on a web server. (This begins with http:// and includes the name of the server hosting the site.) The website will appear
Page FO 35
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Viewing a Website Online
Page FO 35
Figure 47
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Summary of Tags and Styles
Page FO 36
Table 2
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Summary of Tags and Styles
Page FO 36
Table 2
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Summary of Tags and Styles
Page FO 37
Table 3
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
‹#›
Summary
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
See Page FO 1
for Detailed Objectives
‹#›
93
Discuss tools for creating a website, such as text editors, code editors, and content management systems, and when to use each
Explain the uses of HTML5, CSS, and JavaScript technologies when creating websites
Discuss concepts related to web development, including static and dynamic content, relative and absolut references, HTML tags and attributes, and embedded and inline styles
Explain how to view a webpage’s source code after displaying the page in a browser
Summary
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
See Page FO 1
for Detailed Objectives
‹#›
94
Explain the unique role of the index.html page in a website
Use HTML tags to add a title, headings, paragraphs, images, links, ordered and unordered lists, and videos to a webpage
Use CSS to specify fonts, colors, and styles for text and background images or colors for webpages
Upload a website to a web server using an FTP program
Use JavaScript to display the current date and time on a webpage
Complete
Focus On
Web Development
Discovering Computers Enhanced Edition ©2017
Tools, Apps, Devices, and the Impact of Technology
95
