CIS 50: Computing and Information Technology

Building Webpages: HTMLAt the end of this assignment, you will: View source code of webpages Create a webpage using a text editor like Notepad or TextEdit (MAC) View your webpage in any browser: IE/Edge, Firefox, Chrome

THERE WILL BE FOUR (4) PRINTOUTS/FILES TO SUBMIT FOR CREDIT:

Create a folder named: your_name_HW8, BE SURE TO SAVE ALL YOUR FILES TO THAT FOLDER1. Assignment #1a — your_name_webpage1.html2. Assignment #1b — your_name_webpage1.docx3. Assignment #2a — your_name.html4. Assignment #2b — your_name.docx

Submit via Canvas

Internet and ‘The Web’

The Internet is a worldwide, noncommercial, freely accessible network of computer networks. It is the mother of all computer networks. The World Wide Web (WWW) is a vast, ever-expanding collection of online documents and information formatted in Hypertext Markup Language (HTML) distributed over the Internet. As technology goes, the Web is a relatively young extension of the Internet, created in 1989.

The Web is exploding in popularity because of its simple, graphical nature and easy accessibility. Before 1989 only a relatively small community of individuals had the patience to learn the skills to understand and use the Internet. But when the Web was born, suddenly anyone could use it. Instead of cryptic commands, the Web employed simple point-and-click techniques already used in standard GUI interfaces. In your previous Internet assignments, you clicked a visible link and “jumped” to the referenced document regardless of its location. No experience necessary.

The Web consists of countless Web-formatted (HTML) documents, known as Web pages or documents. Web documents live on computers that run HTTP (Hypertext Transfer Protocol) servers. Most HTTP Web servers are hosted on UNIX machines, however, personal computers (PCs and Macintosh computers are also used). To access a Web server and display a Web page, you need client software known as a Web browser like Microsoft Internet Explorer/Edge, FireFox, or Chrome. Browsers are so named because they are easy-to-use programs that allow you to freely browse Web pages. Read more about the various browsers at: http://www.browsers.com and http://www.w3schools.com/browsers/.

Intro to HTML

Hypertext Markup Language (HTML) is the major language of the Internet’s World Wide Web. Web sites and Web Pages are written in HTML code. It is a simple, easy to use, markup convention used to create hypertext document. It is not really a programming language like Java, C, or BASIC -- it is much simpler. It is a way of describing how a set of text and images should be displayed using browser software.

HW8a: 5/2017 Page: 1

CIS 50: Computing and Information TechnologyA Web page consists of an HTML-coded text file, plus any image (picture) files use on the pages. The HTML file (a normal text file) contains all the text to display, and also acts as the ‘glue’ to hold the text and images together in the right places, and display them on a computer of any operating system (PC, MAC, Unix) using any type or size of monitor.

View the video Creating Webpages with HTML: https://media.pearsoncmg.com/ph/bp/bp_evans_soundbytes_11/07_constructing_web_pages_with_html/index.html?

If you turn Transcript On, you can see what the speaker is saying.

You do not have to be a programmer to use it. If you can create/edit a text file, then you can

write HTML code. Writing a HTML file means composing the text you want to display, then inserting any tags you want in the right places. One great thing about learning HTML is that you can see how everyone else has done it, by looking at their source code. You can see the HTML source of any page you are viewing. Try it now;

To view a web page HTML source code;Start your favorite browser, FireFox, Chrome, or Internet Explorer/EdgeAccess a sample webpage: http://www.w3schools.com/html/html_examples.asp

Click on each of the links: HTML document, HTML headings, HTML paragraphs…. You will see the HTML code in the window on the right and the webpage in the window on the left.

Click on the link to this LPC webpage: www.laspositascollege.edu

When you see the webpage, right-click and ‘View Source’. This is the HTML code behind that webpage.

One great thing about learning HTML is that you can see how everyone else has done it, by looking at his or her source code. View lots of source code. View the source code of any page that makes you wonder how they did something. Everyone who uses HTML has learned it by reading other people’s HTML code -- the Internet is a big, mutual-learning community.

You do not need any special software program to write HTML code. Some special ‘editors’ exist, but many pros and beginners prefer to use a plain text editor like Windows Notepad to create their Web page with HTML tags. MS Word will also convert your documents into HTML format and MSWord has several web page wizards to help you start.

HW8a: 5/2017 Page: 2

CIS 50: Computing and Information TechnologyCreate a HTML document

Almost every document that you see on the Web has at least five basic components; headings, paragraphs, lists, links, and graphics. The next section will illustrate the use of these tags.

You do not need any special kind of software to generate HTML documents beyond a simple text editor like Notepad or TextEdit (MAC) that will save your document file as ASCII text.

Attn: MAC users. TextEdit and Notepad++ for the MAC are two common text editors. You can Google and download the software. Your Mac may come with TextEdit, which is a

perfectly good basic text editor. Be sure to choose Format > Make Plain Text so that you get a plain text file. 

HW8a: 5/2017 Page: 3

CIS 50: Computing and Information TechnologyAssignment #1a, 1b: your first webpage

1. Using Notepad or any text editor, start a new document; type the following HTML statements

HW8a: 5/2017 Page: 4

CIS 50: Computing and Information Technology

2. Save the HTML document as; your_name_webpage1.htmlNOTE:: the default file extension for Notepad is .txt. You need to replace .txt with .html You will receive 0 points if you submit a .txt file

View your webpageAs you create your Web page, you should view it frequently with your browser. This helps you catch mistakes early before the page gets too complicated. To view the web page, as it will appear on the Web, launch your browser and open the local HTML document you just created. This is known as opening a local file, because you are NOT going out to the Internet to access it.

3. Open your HTML document as a local document;NOTE: FireFox,-> select File, Open File, Chrome->Ctrl+O From Notepad, save your your_name_webpage1.html HTML document again Minimize Notepad

Start your browser: Safari, FireFox, ChromeOpen your HTML document as a local document;NOTE: FireFox,-> select File, Open File, Chrome- >Ctrl+O

Browse to find the device/folder where you saved your file: your_name_webpage1.html

If your HTML code is correct, you will see the document as if it were displayed over the Internet

4. If your web page does not seem to display correctly; Minimize your browser Restore Notepad with your current HTML document Make any corrections Save your Notepad document again Minimize Notepad Restore your browser window

Select File Open and type the filename again OR click the REFRESH button

This process of correcting, saving, redisplaying your HTML document is a constant cycle until you have completed your web page.

When you have the web page working correctly:5. Display the your_name_webpage1.html page from your browser

HW8a: 5/2017 Page: 5

CIS 50: Computing and Information TechnologyADD JAVASCRIPT

JavaScript is a scripting or programming language that allows you to implement complex things on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved. It is the third layer of the layer cake of standard web technologies, two of which (HTML and CSS).

1. In the your_name_webpage1.html document after the <h4>Instructor: DJFields</h4> line, Copy and paste the following JavaScript code. Be sure to download and save the two image files: pic_bulbon.gif and pic_bulboff.gif to your folder

<! --------------------------------------- COMMENT --------------------------------------------- ><h2>What Can JavaScript Do? Light on/off</h2><p>JavaScript can change HTML attributes.</p><p>In this case JavaScript changes the src (source) attribute of an image.</p><button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button><img id="myImage" src="pic_bulboff.gif" style="width:100px"><button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

Save the file, test the webpage. The webpage should show.

2. Copy and paste the following JavaScript code after the previous JavaScript code.

<! ------------------------------------------------- COMMENT ------------------------------------ ><h2>What Can JavaScript Do?</h2><script> var txt; var person = prompt("Please enter your name:", "Harry Potter"); if (person == null || person == "") { txt = "User cancelled the prompt."; } else { txt = "Hello " + person + "! How are you today?"; } document.getElementById("demo").innerHTML = txt;</script>

Save the file, test the webpage, make any corrections.

3. When you have your_name_webpage1.html displayed in your browser, make a PrintScreen paste into a word processing document, name the file your_name_webpage1.docx

When done, submit via Canvas the files: your_name_webpage1.html AND your_name_webpage1.docx

HW8a: 5/2017 Page: 6

CIS 50: Computing and Information TechnologyLearning More

The Internet is a great place to learn more about creating web pages and HTML.

Open the URL: http://www.w3schools.com/html/ for an interactive tutorial on learning HTML.

Work with Images

Images or graphics on web pages add color, energy, and excitement to a Web page. However, the often slow down transmission time and are often unnecessary. Adding images to your Web page will enhance the presentation of information, and will often capture the attention of users who otherwise may not visit your site. Inline images are embedded in your Web page. Icons, buttons, custom bullets, and photos are all inline images. Most inline images are in Graphic Interchange Format (.GIF) or Joint Photographic Experts Group (JPEG) format.

To use a .GIF or .JPG image in your Web page, make sure the image file is in the same directory or USB device or your .HTML document.

You can find graphics images everywhere on the Web. If see an image on a Web Page, right click the image and select Save Picture As and save the graphic on your computer. Use your favorite search engine to search for ‘clipart’ and you will find thousands of web sites that have images for you to download. You can also change/edit these images with the appropriate software such as: Adobe Photoshop, Picasa, photoshop.com.

Images can be embedded in almost any HTML document. To include an image in your document, use the <img> tag. The <img> tag includes;

<p><img src=’filename.gif’> or <img src=’filename.jpg’>NOTE: ‘ ‘ single straight quotes

Fun Banners

Use the following websites to create banners for your webpage. Create the banner, save the banner as a ..gif file, use the <p><img src=’filename.gif’> or <img src=’filename.jpg’> tag to display your banner on your webpage.

http://flamingtext.com/net-fu/forms/banner.html

http://www.3dtextmaker.com/image_editor.html

Add Color

In your first sample webpage of this exercise, the background of the webpage was green with the HTML tag

<body bgcolor = "#00FF00">

HW8a: 5/2017 Page: 7

CIS 50: Computing and Information TechnologyIn the HTML language, color can be specified for text, background, and links. Color is imposed by activating one or more of the color guns in your monitor. There are three such color pistols. They are the RED pistol, GREEN pistol and BLUE pistol (RGB). By a combination of intensities, over 256 shades may be created. The color choices made in HTML are made by selecting a combination of RED GREEN BLUE (RGB) pistol intensities for each of the three guns. The intensity combinations are expressed in hexadecimal (HEX) codes formed around base 16. In base 16, hexadecimal, the numbering system is as follows:

1 2 3 4 5 6 7 8 9 A B C D E F which translates into: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

The # tips the browser off that the following sequence is in HEX. The first 2 digits activate the RED pistol. The middle two digits activate the GREEN pistol. The last two digits activate BLUE pistol. By combining the intensity of these three basic colors we can get the desired shades.

#FFFFFF - White #FF2400 - Orange Red #FF0000 - Red#00FF00 - Green #0000FF - Blue #9370DB - Orchid#FF00FF - Magenta #70DBDB - Turquoise #00FFFF - Cyan#FFFF00 - Yellow #000000 - Black #70DB93 - Aquamarine#3299CC - Sky Blue #32CD32 - Lime Green #238E68 - Sea Green#238E23 - Forest Green #9F9F5F - Khaki #CC3299 - Violet Red#8C1717 - Scarlet #FF6EC7 - Neon Pink

For a sample of different colors and their HEX codes, visit the following web pages: http://www.htmlgoodies.com/tutorials/colors/article.php/3478961 http://www.imagitek.com/bcs.html

Plan your WebPage

The second part of this exercise, you will use Notepad and your browser (Internet Explorer or Firefox) to create your own personal web page. In anticipation of this exercise, you will need to do some preliminary organization.

Search the web for web pages of other people and make a list of what items you will want to include: name, address, email address, a welcome message, current interests, activities, projects, announcements, a picture, a list of at least 3 URLs that you frequent. On paper ‘storyboard’ your web page layout.

HW8a: 5/2017 Page: 8

CIS 50: Computing and Information Technology

Assignment #2a, 2b: your personal webpage

For this exercise you will create your own web page of your own design. The only requirements are that you must use Notepad and your web page must include:

two different types of headings

a non-white background color three paragraphs of

information one graphic image

links to three of your favorite web sites

an ordered or bullet list ONE JAVASCRIPT code – code that

is different than this assignment

Getting started: Every HTML document starts with <html> start tag and ends with an </html> end tag. Inside these tag pair is the <head>...</head> pair and then the <body>...</body> pair which divide the document into two sections. The structure of these tags never changes. It is the first thing you type when you create a Web page.

Start a new Notepad document, Type the following HTML code

<html><head><title> your name here </title></head><body bgcolor = "#rrggbb">

Type headings, paragraphs, links, graphics, lists, etc

</body></html>

Save your webpage as your_name.html (use the first eight characters of your name as the filename)

Display your web page from your browser, make any corrections

When complete, Printscreen your webpage as seen from your browserUse MS Word, Copy, Paste, Save and Print your web page as displayed from your browser

Save the printscreen using the filename: your_name.docx

When done, submit via Canvas the file your_name_webpage1.html AND ayour_name_webpage1.bmp or .docx

HW8a: 5/2017 Page: 9

CIS 50: Computing and Information Technology

HTML Command Summary

Every HTML document starts with <html> start tag and ends with an </html> end tag. Inside these tag pair is the <head>...</head> pair and then the <body>...</body> pair which divide the document into two sections. The structure of these tags never changes. It is the first thing you type when you create a Web page.

<html><head><title> document title text </title></head><body bgcolor = "#rrggbb’>

Type headings, paragraphs, links, graphics, lists, etc

</body></html>

TAG DESCRIPTION<p> ... </p> paragraph<i> ... </i> display text in italics<b> ... </b> display text in bold<center> ...</center> display text centered<ol><li><li></ol>

ordered list displays text in numbered list1. list item 12. list item 2

3. list item 3<ul><li><li></ul>

unordered list displays text with bullets list item 1 list item 2 list item 3

<h1> ... </h1><h2> ... </h2><h3> ... </h3><h4> ... </h4><h5> ... </h5><h6> ... </h6>

Six level of headings display text in different fonts sizes

<a href = “http://URL”>text_to_highlight</a>

Creates/ displays link to another web site

<a href=“mailto:address@domain.com> text_to highlight</a><img src=’image.gif’> or <img src=’image.jpg’>

Add image to web page

HW8a: 5/2017 Page: 10